ydb-embedded-ui 5.3.0 → 5.4.0

package/dist/components/MetricChart/MetricChart.js

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { YagrPlugin } from '@gravity-ui/chartkit/yagr';
 import ChartKit, { settings } from '@gravity-ui/chartkit';
 import { useAutofetcher } from '../../utils/hooks';
-import { COLORS } from '../../utils/versions';
 import { cn } from '../../utils/cn';
 import { Loader } from '../Loader';
 import { ResponseError } from '../Errors/ResponseError';
@@ -11,6 +10,7 @@ import { convertResponse } from './convertReponse';
 import { getDefaultDataFormatter } from './getDefaultDataFormatter';
 import { getChartData } from './getChartData';
 import { chartReducer, initialChartState, setChartData, setChartDataLoading, setChartDataWasNotLoaded, setChartError, } from './reducer';
+import { colorToRGBA, colors } from './colors';
 import i18n from './i18n';
 import './MetricChart.scss';
 const b = cn('ydb-metric-chart');
@@ -20,12 +20,16 @@ const prepareWidgetData = (data, options = {}) => {
     const defaultDataFormatter = getDefaultDataFormatter(dataType);
     const isDataEmpty = !data.metrics.length;
     const graphs = data.metrics.map((metric, index) => {
+        const lineColor = metric.color || colors[index];
+        const color = colorToRGBA(lineColor, 0.1);
         return {
             id: metric.target,
             name: metric.title || metric.target,
-            color: metric.color || COLORS[index],
             data: metric.data,
             formatter: defaultDataFormatter,
+            lineColor,
+            color,
+            legendColorKey: 'lineColor',
         };
     });
     return {
@@ -41,7 +45,8 @@ const prepareWidgetData = (data, options = {}) => {
                     padding: isDataEmpty ? [10, 0, 10, 0] : undefined,
                 },
                 series: {
-                    type: 'line',
+                    type: 'area',
+                    lineWidth: 1.5,
                 },
                 select: {
                     zoom: false,
@@ -128,7 +133,7 @@ export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autore
             }
             dispatch(setChartError(err));
         }
-    }, [metrics, timeFrame, width]);
+    }, [database, metrics, timeFrame, width]);
     useAutofetcher(fetchChartData, [fetchChartData], autorefresh);
     const convertedData = prepareWidgetData(data, chartOptions);
     const renderContent = () => {

package/dist/components/MetricChart/colors.d.ts

@@ -0,0 +1,2 @@
+export declare const colors: string[];
+export declare function colorToRGBA(initialColor: string, opacity: number): string;

package/dist/components/MetricChart/colors.js

@@ -0,0 +1,21 @@
+import { colord } from 'colord';
+// Grafana classic palette
+export const colors = [
+    '#7EB26D',
+    '#EAB839',
+    '#6ED0E0',
+    '#EF843C',
+    '#E24D42',
+    '#1F78C1',
+    '#BA43A9',
+    '#705DA0',
+    '#508642',
+    '#CCA300', // 9: dark sand
+];
+export function colorToRGBA(initialColor, opacity) {
+    const color = colord(initialColor);
+    if (!color.isValid()) {
+        throw new Error('Invalid color is passed');
+    }
+    return color.alpha(opacity).toRgbString();
+}

package/dist/components/MetricChart/getDefaultDataFormatter.js

@@ -11,6 +11,9 @@ export const getDefaultDataFormatter = (dataType) => {
         case 'size': {
             return formatChartValueToSize;
         }
+        case 'percent': {
+            return formatChartValueToPercent;
+        }
         default:
             return undefined;
     }
@@ -29,6 +32,12 @@ function formatChartValueToSize(value) {
     }
     return formatBytes({ value: convertToNumber(value), precision: 3 });
 }
+function formatChartValueToPercent(value) {
+    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) {
     if (isNumeric(value)) {

package/dist/components/MetricChart/types.d.ts

@@ -1,4 +1,8 @@
-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';
+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' | 'resources.memory.used_bytes' | 'resources.storage.used_bytes' | 'resources.cpu.usage' | PoolUsageMetric | QueriesLatenciesMetric;
 export interface MetricDescription {
     target: Metric;
     title?: string;
@@ -12,9 +16,10 @@ export interface PreparedMetricsData {
     metrics: PreparedMetric[];
 }
 export type ChartValue = number | string | null;
-export type ChartDataType = 'ms' | 'size';
+export type ChartDataType = 'ms' | 'size' | 'percent';
 export interface ChartOptions {
     dataType?: ChartDataType;
 }
 export type ChartDataStatus = 'loading' | 'success' | 'error';
 export type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;
+export {};

package/dist/containers/PDisk/PDisk.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
 import { StringParam, useQueryParams } from 'use-query-params';
 import { Helmet } from 'react-helmet-async';
+import { Icon } from '@gravity-ui/uikit';
+import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
 import { getPDiskData, getPDiskStorage, setPDiskDataWasNotLoaded, } from '../../store/reducers/pdisk/pdisk';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
@@ -11,6 +13,7 @@ import { PageMeta } from '../../components/PageMeta/PageMeta';
 import { StatusIcon } from '../../components/StatusIcon/StatusIcon';
 import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
 import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { PDiskGroups } from './PDiskGroups';
 import { pdiskPageCn } from './shared';
 import { pDiskPageKeyset } from './i18n';
@@ -30,16 +33,28 @@ export function PDisk() {
     useEffect(() => {
         dispatch(getNodesList());
     }, [dispatch]);
-    const fetchData = useCallback((isBackground) => {
+    const fetchData = useCallback(async (isBackground) => {
         if (!isBackground) {
             dispatch(setPDiskDataWasNotLoaded());
         }
         if (nodeId && pDiskId) {
-            dispatch(getPDiskData({ nodeId, pDiskId }));
-            dispatch(getPDiskStorage({ nodeId, pDiskId }));
+            return Promise.all([
+                dispatch(getPDiskData({ nodeId, pDiskId })),
+                dispatch(getPDiskStorage({ nodeId, pDiskId })),
+            ]);
         }
+        return undefined;
     }, [dispatch, nodeId, pDiskId]);
     useAutofetcher(fetchData, [fetchData], true);
+    const handleRestart = async () => {
+        if (nodeId && pDiskId) {
+            return window.api.restartPDisk(nodeId, pDiskId);
+        }
+        return undefined;
+    };
+    const handleAfterRestart = async () => {
+        return fetchData(true);
+    };
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
             ? `${pDiskPageKeyset('pdisk')} ${pDiskId}`
@@ -55,6 +70,9 @@ export function PDisk() {
     const renderPageTitle = () => {
         return (_jsxs("div", Object.assign({ className: pdiskPageCn('title') }, { children: [_jsx("span", Object.assign({ className: pdiskPageCn('title__prefix') }, { children: pDiskPageKeyset('pdisk') })), _jsx(StatusIcon, { status: getSeverityColor(Severity), size: "s" }), pDiskId] })));
     };
+    const renderControls = () => {
+        return (_jsx("div", Object.assign({ className: pdiskPageCn('controls') }, { children: _jsxs(ButtonWithConfirmDialog, Object.assign({ onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog') }, { children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] })) })));
+    };
     const renderInfo = () => {
         if (pDiskLoading && !pDiskWasLoaded) {
             return _jsx(InfoViewerSkeleton, { className: pdiskPageCn('info'), rows: 10 });
@@ -64,5 +82,5 @@ export function PDisk() {
     const renderGroupsTable = () => {
         return (_jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading && !groupsWasLoaded }));
     };
-    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderInfo(), renderGroupsTable()] })));
+    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] })));
 }

package/dist/containers/PDisk/PDisk.scss

@@ -16,6 +16,7 @@
     &__meta,
     &__title,
     &__info,
+    &__controls,
     &__groups-title {
         position: sticky;
         left: 0;

package/dist/containers/PDisk/i18n/en.json

@@ -2,5 +2,7 @@
     "fqdn": "FQDN",
     "pdisk": "PDisk",
     "groups": "Groups",
-    "node": "Node"
+    "node": "Node",
+    "restart-pdisk-button": "Restart PDisk",
+    "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?"
 }

package/dist/containers/PDisk/i18n/index.d.ts

@@ -1 +1 @@
-export declare const pDiskPageKeyset: (key: "groups" | "node" | "pdisk" | "fqdn", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const pDiskPageKeyset: (key: "groups" | "node" | "pdisk" | "fqdn" | "restart-pdisk-button" | "restart-pdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.js

@@ -1,12 +1,17 @@
 import i18n from '../i18n';
+const pools = ['IC', 'IO', 'Batch', 'User', 'System'];
+const getPoolMetricConfig = (poolName) => {
+    return {
+        target: `resources.cpu.${poolName}.usage`,
+        title: poolName,
+    };
+};
 export const cpuDashboardConfig = [
     {
         title: i18n('charts.cpu-usage'),
-        metrics: [
-            {
-                target: 'resources.cpu.usage',
-                title: i18n('charts.cpu-usage'),
-            },
-        ],
+        metrics: pools.map(getPoolMetricConfig),
+        options: {
+            dataType: 'percent',
+        },
     },
 ];

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -18,7 +18,7 @@
     "by-size": "by size",
     "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",
     "storage.tablet-storage-title": "Tablet storage",

package/dist/services/api.d.ts

@@ -93,6 +93,7 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     getExplainQueryAst(query: string, database: string): Promise<import("../types/api/query").ExplainQueryResponse>;
     getHotKeys(path: string, enableSampling: boolean, { concurrentId }?: AxiosOptions): Promise<JsonHotKeysResponse>;
     getHealthcheckInfo(database: string, { concurrentId }?: AxiosOptions): Promise<HealthCheckAPIResponse>;
+    restartPDisk(nodeId: number | string, pDiskId: number | string): Promise<any>;
     killTablet(id?: string): Promise<string>;
     stopTablet(id?: string, hiveId?: string): Promise<string>;
     resumeTablet(id?: string, hiveId?: string): Promise<string>;

package/dist/services/api.js

@@ -2,6 +2,7 @@ import { __rest } from "tslib";
 import AxiosWrapper from '@gravity-ui/axios-wrapper';
 import { backend as BACKEND, metaBackend as META_BACKEND } from '../store';
 import { prepareSortValue } from '../utils/filters';
+import { createPDiskDeveloperUILink } from '../utils/developerUI/developerUI';
 import { BINARY_DATA_IN_PLAIN_TEXT_DISPLAY } from '../utils/constants';
 import { parseMetaCluster } from './parsers/parseMetaCluster';
 import { parseMetaTenants } from './parsers/parseMetaTenants';
@@ -207,6 +208,18 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     getHealthcheckInfo(database, { concurrentId } = {}) {
         return this.get(this.getPath('/viewer/json/healthcheck?merge_records=true'), { tenant: database }, { concurrentId });
     }
+    restartPDisk(nodeId, pDiskId) {
+        const pDiskPath = createPDiskDeveloperUILink({
+            nodeId,
+            pDiskId,
+            host: this.getPath(''),
+        });
+        return this.post(pDiskPath, 'restartPDisk=', {}, {
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+            },
+        });
+    }
     killTablet(id) {
         return this.get(this.getPath(`/tablets?KillTabletID=${id}`), {});
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "files": [
     "dist"
   ],
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.4.1",
-    "@gravity-ui/chartkit": "^4.20.1",
+    "@gravity-ui/chartkit": "^4.23.0",
     "@gravity-ui/components": "^2.12.0",
     "@gravity-ui/date-utils": "^1.4.2",
     "@gravity-ui/i18n": "^1.2.0",
@@ -24,6 +24,7 @@
     "@reduxjs/toolkit": "^2.2.1",
     "axios": "^1.6.7",
     "bem-cn-lite": "^4.1.0",
+    "colord": "^2.9.3",
     "copy-to-clipboard": "^3.3.3",
     "crc-32": "^1.2.2",
     "history": "^4.10.1",