ydb-embedded-ui 4.29.0 → 4.31.0

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

@@ -125,3 +125,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.29.0",
+  "version": "4.31.0",
   "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,8 +46,9 @@
     "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.5.0"
+    "ydb-ui-components": "^3.6.0"
   },
   "scripts": {
     "start": "react-app-rewired start",