ydb-embedded-ui 4.30.0 → 4.31.1

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx

@@ -0,0 +1,71 @@
+import {StringParam, useQueryParam} from 'use-query-params';
+
+import {cn} from '../../../../../utils/cn';
+import type {TimeFrame} from '../../../../../utils/timeframes';
+import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
+import {DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY} from '../../../../../utils/constants';
+import {TimeFrameSelector} from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
+import {
+    type ChartOptions,
+    MetricChart,
+    type MetricDescription,
+} from '../../../../../components/MetricChart';
+
+import './TenantDashboard.scss';
+
+const CHART_WIDTH = 428;
+const CHART_WIDTH_FULL = 872;
+
+const b = cn('ydb-tenant-dashboard');
+
+export interface ChartConfig {
+    metrics: MetricDescription[];
+    title: string;
+    options?: ChartOptions;
+}
+
+interface TenantDashboardProps {
+    charts: ChartConfig[];
+}
+
+export const TenantDashboard = ({charts}: TenantDashboardProps) => {
+    const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const [chartsEnabled] = useSetting(DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY);
+
+    if (!chartsEnabled) {
+        return null;
+    }
+
+    // If there is only one chart, display it with full width
+    const chartWidth = charts.length === 1 ? CHART_WIDTH_FULL : CHART_WIDTH;
+    const chartHeight = CHART_WIDTH / 1.5;
+
+    const renderContent = () => {
+        return charts.map((chartConfig) => {
+            return (
+                <MetricChart
+                    key={chartConfig.metrics.map(({target}) => target).join('&')}
+                    title={chartConfig.title}
+                    metrics={chartConfig.metrics}
+                    timeFrame={timeFrame as TimeFrame}
+                    chartOptions={chartConfig.options}
+                    autorefresh={autorefresh}
+                    width={chartWidth}
+                    height={chartHeight}
+                />
+            );
+        });
+    };
+
+    return (
+        <div className={b(null)}>
+            <div className={b('controls')}>
+                <TimeFrameSelector value={timeFrame as TimeFrame} onChange={setTimeframe} />
+            </div>
+            <div className={b('charts')}>{renderContent()}</div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDashboard.tsx

@@ -0,0 +1,21 @@
+import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
+
+const memoryDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.memory-usage'),
+        metrics: [
+            {
+                target: 'resources.memory.used_bytes',
+                title: i18n('charts.memory-usage'),
+            },
+        ],
+        options: {
+            dataType: 'size',
+        },
+    },
+];
+
+export const MemoryDashboard = () => {
+    return <TenantDashboard charts={memoryDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx

@@ -1,3 +1,4 @@
+import {MemoryDashboard} from './MemoryDashboard';
 import {TopNodesByMemory} from './TopNodesByMemory';
 
 interface TenantMemoryProps {
@@ -5,5 +6,10 @@ interface TenantMemoryProps {
 }
 
 export function TenantMemory({path}: TenantMemoryProps) {
-    return <TopNodesByMemory path={path} />;
+    return (
+        <>
+            <MemoryDashboard />
+            <TopNodesByMemory path={path} />
+        </>
+    );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -17,6 +17,7 @@ import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
 import {TenantStorage} from './TenantStorage/TenantStorage';
 import {TenantMemory} from './TenantMemory/TenantMemory';
+import {DefaultDashboard} from './DefaultDashboard';
 import {useHealthcheck} from './useHealthcheck';
 
 import './TenantOverview.scss';
@@ -140,7 +141,7 @@ export function TenantOverview({
                 );
             }
             default: {
-                return undefined;
+                return <DefaultDashboard />;
             }
         }
     };

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/StorageDashboard.tsx

@@ -0,0 +1,21 @@
+import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
+
+const storageDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.storage-usage'),
+        metrics: [
+            {
+                target: 'resources.storage.used_bytes',
+                title: i18n('charts.storage-usage'),
+            },
+        ],
+        options: {
+            dataType: 'size',
+        },
+    },
+];
+
+export const StorageDashboard = () => {
+    return <TenantDashboard charts={storageDashboardConfig} />;
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx

@@ -7,6 +7,7 @@ import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 
 import '../TenantOverview.scss';
 
+import {StorageDashboard} from './StorageDashboard';
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
 
@@ -62,6 +63,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
     ];
     return (
         <>
+            <StorageDashboard />
             <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
             <TopTables path={tenantName} />
             <TopGroups tenant={tenantName} />

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

@@ -23,5 +23,11 @@
   "by-load": "by load",
   "by-memory": "by memory",
   "by-usage": "by usage",
-  "by-size": "by size"
+  "by-size": "by size",
+
+  "charts.queries-per-second": "Queries per second",
+  "charts.transaction-latency": "Transactions latencies {{percentile}}",
+  "charts.cpu-usage": "CPU usage",
+  "charts.storage-usage": "Storage usage",
+  "charts.memory-usage": "Memory usage"
 }

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

@@ -23,5 +23,11 @@
   "by-load": "по нагрузке",
   "by-memory": "по памяти",
   "by-usage": "по потреблению",
-  "by-size": "по размеру"
+  "by-size": "по размеру",
+
+  "charts.queries-per-second": "Количество запросов в секунду",
+  "charts.transaction-latency": "Задержка транзакций {{percentile}}",
+  "charts.cpu-usage": "Использование CPU",
+  "charts.storage-usage": "Использование хранилища",
+  "charts.memory-usage": "Использование памяти"
 }

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

@@ -23,5 +23,8 @@
   "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
-  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"
+  "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older",
+
+  "settings.displayChartsInDbDiagnostics.title": "Display charts in database diagnostics",
+  "settings.displayChartsInDbDiagnostics.popover": "Incorrect data may be displayed (shows data only for the database related to the current node), does not work well on static nodes"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -23,5 +23,8 @@
   "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
 
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
-  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"
+  "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще",
+
+  "settings.displayChartsInDbDiagnostics.title": "Показывать графики в диагностике базы данных",
+  "settings.displayChartsInDbDiagnostics.popover": "Могут отображаться неправильные данные (показывает данные только для базы, относящейся к текущей ноде), плохо работает на статических нодах"
 }

package/dist/containers/UserSettings/settings.ts

@@ -10,6 +10,7 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     QUERY_USE_MULTI_SCHEMA_KEY,
+    DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 
@@ -94,6 +95,11 @@ export const queryUseMultiSchemaSetting: SettingProps = {
     title: i18n('settings.queryUseMultiSchema.title'),
     helpPopoverContent: i18n('settings.queryUseMultiSchema.popover'),
 };
+export const displayChartsInDbDiagnosticsSetting: SettingProps = {
+    settingKey: DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
+    title: i18n('settings.displayChartsInDbDiagnostics.title'),
+    helpPopoverContent: i18n('settings.displayChartsInDbDiagnostics.popover'),
+};
 
 export const appearanceSection: SettingsSection = {
     id: 'appearanceSection',
@@ -103,7 +109,12 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
+    settings: [
+        useNodesEndpointSetting,
+        useVirtualTables,
+        queryUseMultiSchemaSetting,
+        displayChartsInDbDiagnosticsSetting,
+    ],
 };
 
 export const generalPage: SettingsPage = {

package/dist/services/api.ts

@@ -28,6 +28,7 @@ import type {DescribeTopicResult} from '../types/api/topic';
 import type {TEvPDiskStateResponse} from '../types/api/pdisk';
 import type {TEvVDiskStateResponse} from '../types/api/vdisk';
 import type {TUserToken} from '../types/api/whoami';
+import type {JsonRenderRequestParams, JsonRenderResponse} from '../types/api/render';
 import type {QuerySyntax} from '../types/store/query';
 import type {ComputeApiRequestParams, NodesApiRequestParams} from '../store/reducers/nodes/types';
 import type {StorageApiRequestParams} from '../store/reducers/storage/types';
@@ -377,7 +378,24 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path_id: tenantId?.PathId,
         });
     }
+    getChartData(
+        {target, from, until, maxDataPoints}: JsonRenderRequestParams,
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        const requestString = `${target}&from=${from}&until=${until}&maxDataPoints=${maxDataPoints}&format=json`;
 
+        return this.post<JsonRenderResponse>(
+            this.getPath('/viewer/json/render'),
+            requestString,
+            {},
+            {
+                concurrentId,
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+            },
+        );
+    }
     /** @deprecated use localStorage instead */
     postSetting(settingsApi: string, name: string, value: string) {
         return this.request({

package/dist/services/settings.ts

@@ -3,6 +3,7 @@ import {TENANT_PAGES_IDS} from '../store/reducers/tenant/constants';
 import {
     ASIDE_HEADER_COMPACT_KEY,
     CLUSTER_INFO_HIDDEN_KEY,
+    DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     LAST_USED_QUERY_ACTION_KEY,
@@ -37,6 +38,7 @@ export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
     [CLUSTER_INFO_HIDDEN_KEY]: true,
     [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
+    [DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY]: false,
 };
 
 class SettingsManager {

package/dist/store/reducers/tenant/tenant.ts

@@ -24,7 +24,12 @@ const SET_METRICS_TAB = 'tenant/SET_METRICS_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 const SET_DATA_WAS_NOT_LOADED = 'tenant/SET_DATA_WAS_NOT_LOADED';
 
-const initialState = {loading: false, wasLoaded: false};
+// Tenant diagnostics tab content was requested twice,
+// because requests were sent before state was set as loading and after tenant data is fully loaded
+// So tenant data is considered loading from the start, there is no attempt to load tab content
+// TODO: try fix with 'display: none' for tenant diagnostics tab content while tenant data loading,
+// but with parallel (not sequent) data requests
+const initialState = {loading: true, wasLoaded: false};
 
 const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState, action) => {
     switch (action.type) {

package/dist/types/api/render.ts

@@ -0,0 +1,34 @@
+/**
+ * endpoint: /viewer/json/render
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/json_render.h
+ */
+
+export type JsonRenderResponse =
+    | {
+          error?: string;
+          status?: string;
+      }
+    | MetricData[];
+
+export interface MetricData {
+    datapoints: MetricDatapoint[];
+    target: string;
+    title: string;
+    tags: MetricTags;
+}
+
+interface MetricTags {
+    name: string;
+}
+
+/** [metric value - null or double, timestamp - seconds] */
+export type MetricDatapoint = [null | number, number];
+
+export interface JsonRenderRequestParams {
+    /** metrics names in format "target=queries.latencies.p50&target=queries.latencies.p75&target=queries.latencies.p90" */
+    target: string;
+    from: number;
+    until: number;
+    maxDataPoints: number;
+}

package/dist/utils/cn.ts

@@ -0,0 +1,3 @@
+import cn from 'bem-cn-lite';
+
+export {cn};

package/dist/utils/constants.ts

@@ -71,6 +71,8 @@ export const COLORS_PRIORITY = {
 
 export const TENANT_OVERVIEW_TABLES_LIMIT = 5;
 
+export const EMPTY_DATA_PLACEHOLDER = '—';
+
 // ==== Titles ====
 export const DEVELOPER_UI_TITLE = 'Developer UI';
 export const CLUSTER_DEFAULT_TITLE = 'Cluster';
@@ -125,3 +127,5 @@ export const USE_BACKEND_PARAMS_FOR_TABLES_KEY = 'useBackendParamsForTables';
 
 // Enable schema that supports multiple resultsets
 export const QUERY_USE_MULTI_SCHEMA_KEY = 'queryUseMultiSchema';
+
+export const DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY = 'displayChartsInDbDiagnostics';

package/dist/utils/timeParsers/formatDuration.ts

@@ -1,4 +1,5 @@
 import {DAY_IN_SECONDS, HOUR_IN_SECONDS} from '../constants';
+import {formatNumber} from '../dataFormatters/dataFormatters';
 
 import i18n from './i18n';
 
@@ -6,6 +7,8 @@ import i18n from './i18n';
  * Process time difference in ms and returns formated time.
  * By default only two major values are returned (days & hours, hours & minutes, minutes & seconds, etc.).
  * It can be altered with valuesCount arg
+ *
+ * value - duration in ms
  */
 export const formatDurationToShortTimeFormat = (value: number, valuesCount: 1 | 2 = 2) => {
     const ms = value % 1000;
@@ -62,3 +65,10 @@ export const formatDurationToShortTimeFormat = (value: number, valuesCount: 1 |
 
     return i18n('ms', duration);
 };
+
+/**
+ * Parse ms duration to string
+ */
+export const formatToMs = (value: number) => {
+    return i18n('ms', {ms: formatNumber(value)});
+};

package/dist/utils/timeframes.ts

@@ -0,0 +1,10 @@
+import {DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS} from './constants';
+
+export const TIMEFRAMES = {
+    '30m': 30 * MINUTE_IN_SECONDS,
+    '1h': HOUR_IN_SECONDS,
+    '1d': DAY_IN_SECONDS,
+    '1w': 7 * DAY_IN_SECONDS,
+} as const;
+
+export type TimeFrame = keyof typeof TIMEFRAMES;

package/dist/utils/versions/getVersionsColors.ts

@@ -9,6 +9,7 @@ export const hashCode = (s: string) => {
     }, 0);
 };
 
+// TODO: colors used in charts as well, need to move to constants
 // 11 distinct colors from https://mokole.com/palette.html
 export const COLORS = [
     '#008000', // green

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.30.0",
+  "version": "4.31.1",
   "files": [
     "dist"
   ],
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.3.0",
+    "@gravity-ui/chartkit": "^4.15.0",
     "@gravity-ui/components": "^2.9.1",
     "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
@@ -45,6 +46,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "url": "^0.11.0",
+    "use-query-params": "^2.2.1",
     "web-vitals": "1.1.2",
     "ydb-ui-components": "^3.6.0"
   },