feat(MetricChart): display per pool cpu usage (#769)

Author: artemmufazalov

src/components/MetricChart/getDefaultDataFormatter.ts

@@ -14,6 +14,9 @@ export const getDefaultDataFormatter = (dataType?: ChartDataType) => {
         case 'size': {
             return formatChartValueToSize;
         }
+        case 'percent': {
+            return formatChartValueToPercent;
+        }
         default:
             return undefined;
     }
@@ -34,6 +37,12 @@ function formatChartValueToSize(value: ChartValue) {
     }
     return formatBytes({value: convertToNumber(value), precision: 3});
 }
+function formatChartValueToPercent(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return Math.round(convertToNumber(value) * 100) + '%';
+}
 
 // Numeric values expected, not numeric value should be displayd as 0
 function convertToNumber(value: unknown): number {

src/components/MetricChart/types.ts

@@ -1,12 +1,17 @@
+import type {PoolName} from '../../types/api/nodes';
+
+type Percentile = 'p50' | 'p75' | 'p90' | 'p99';
+type QueriesLatenciesMetric = `queries.latencies.${Percentile}`;
+
+type PoolUsageMetric = `resources.cpu.${PoolName}.usage`;
+
 export type Metric =
     | 'queries.requests'
-    | 'queries.latencies.p50'
-    | 'queries.latencies.p75'
-    | 'queries.latencies.p90'
-    | 'queries.latencies.p99'
-    | 'resources.cpu.usage'
     | 'resources.memory.used_bytes'
-    | 'resources.storage.used_bytes';
+    | 'resources.storage.used_bytes'
+    | 'resources.cpu.usage'
+    | PoolUsageMetric
+    | QueriesLatenciesMetric;
 
 export interface MetricDescription {
     target: Metric;
@@ -25,7 +30,7 @@ export interface PreparedMetricsData {
 
 export type ChartValue = number | string | null;
 
-export type ChartDataType = 'ms' | 'size';
+export type ChartDataType = 'ms' | 'size' | 'percent';
 
 export interface ChartOptions {
     dataType?: ChartDataType;

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts

@@ -1,14 +1,23 @@
+import type {MetricDescription} from '../../../../../components/MetricChart';
+import type {PoolName} from '../../../../../types/api/nodes';
 import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
+const pools: PoolName[] = ['IC', 'IO', 'Batch', 'User', 'System'];
+
+const getPoolMetricConfig = (poolName: PoolName): MetricDescription => {
+    return {
+        target: `resources.cpu.${poolName}.usage`,
+        title: poolName,
+    };
+};
+
 export const cpuDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.cpu-usage'),
-        metrics: [
-            {
-                target: 'resources.cpu.usage',
-                title: i18n('charts.cpu-usage'),
-            },
-        ],
+        metrics: pools.map(getPoolMetricConfig),
+        options: {
+            dataType: 'percent',
+        },
     },
 ];

src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -23,7 +23,7 @@
 
   "charts.queries-per-second": "Queries per second",
   "charts.transaction-latency": "Transactions latencies {{percentile}}",
-  "charts.cpu-usage": "CPU cores used",
+  "charts.cpu-usage": "CPU usage by pool",
   "charts.storage-usage": "Tablet storage usage",
   "charts.memory-usage": "Memory usage",