ydb-embedded-ui 4.30.0 → 4.31.1

package/README.md

@@ -15,6 +15,8 @@ docker pull cr.yandex/yc/yandex-docker-local-ydb
 docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
 ```
 
+Open http://localhost:8765 to view it in the browser.
+
 ## Development
 
 1. Run on a machine with Docker installed:

package/dist/components/MetricChart/MetricChart.scss

@@ -0,0 +1,34 @@
+.ydb-metric-chart {
+    display: flex;
+    flex-direction: column;
+
+    padding: 16px 16px 8px;
+
+    border: 1px solid var(--g-color-line-generic);
+    border-radius: 8px;
+
+    &__title {
+        margin-bottom: 10px;
+    }
+
+    &__chart {
+        position: relative;
+
+        display: flex;
+        overflow: hidden;
+
+        width: 100%;
+        height: 100%;
+    }
+
+    &__error {
+        position: absolute;
+        z-index: 1;
+        top: 10%;
+        left: 50%;
+
+        text-align: center;
+
+        transform: translateX(-50%);
+    }
+}

package/dist/components/MetricChart/MetricChart.tsx

@@ -0,0 +1,198 @@
+import {useCallback, useEffect, useReducer, useRef} from 'react';
+
+import {RawSerieData, YagrPlugin, YagrWidgetData} from '@gravity-ui/chartkit/yagr';
+import ChartKit, {settings} from '@gravity-ui/chartkit';
+
+import type {IResponseError} from '../../types/api/error';
+import type {TimeFrame} from '../../utils/timeframes';
+import {useAutofetcher} from '../../utils/hooks';
+import {COLORS} from '../../utils/versions';
+import {cn} from '../../utils/cn';
+
+import {Loader} from '../Loader';
+import {ResponseError} from '../Errors/ResponseError';
+
+import type {ChartOptions, MetricDescription, PreparedMetricsData} from './types';
+import {convertResponse} from './convertReponse';
+import {getDefaultDataFormatter} from './getDefaultDataFormatter';
+import {getChartData} from './getChartData';
+import {
+    chartReducer,
+    initialChartState,
+    setChartData,
+    setChartDataLoading,
+    setChartDataWasNotLoaded,
+    setChartError,
+} from './reducer';
+
+import './MetricChart.scss';
+
+const b = cn('ydb-metric-chart');
+
+settings.set({plugins: [YagrPlugin]});
+
+const prepareWidgetData = (
+    data: PreparedMetricsData,
+    options: ChartOptions = {},
+): YagrWidgetData => {
+    const {dataType} = options;
+    const defaultDataFormatter = getDefaultDataFormatter(dataType);
+
+    const isDataEmpty = !data.metrics.length;
+
+    const graphs: RawSerieData[] = data.metrics.map((metric, index) => {
+        return {
+            id: metric.target,
+            name: metric.title || metric.target,
+            color: metric.color || COLORS[index],
+            data: metric.data,
+            formatter: defaultDataFormatter,
+        };
+    });
+
+    return {
+        data: {
+            timeline: data.timeline,
+            graphs,
+        },
+
+        libraryConfig: {
+            chart: {
+                size: {
+                    // When empty data chart is displayed without axes it have different paddings
+                    // To compensate it, additional paddings are applied
+                    padding: isDataEmpty ? [10, 0, 10, 0] : undefined,
+                },
+                series: {
+                    type: 'line',
+                },
+                select: {
+                    zoom: false,
+                },
+            },
+            scales: {
+                y: {
+                    type: 'linear',
+                    range: 'nice',
+                },
+            },
+            axes: {
+                y: {
+                    values: defaultDataFormatter
+                        ? (_, ticks) => ticks.map(defaultDataFormatter)
+                        : undefined,
+                },
+            },
+            tooltip: {
+                show: true,
+                tracking: 'sticky',
+            },
+        },
+    };
+};
+
+interface DiagnosticsChartProps {
+    title?: string;
+    metrics: MetricDescription[];
+    timeFrame?: TimeFrame;
+
+    autorefresh?: boolean;
+
+    height?: number;
+    width?: number;
+
+    chartOptions?: ChartOptions;
+}
+
+export const MetricChart = ({
+    title,
+    metrics,
+    timeFrame = '1h',
+    autorefresh,
+    width = 400,
+    height = width / 1.5,
+    chartOptions,
+}: DiagnosticsChartProps) => {
+    const mounted = useRef(false);
+
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+
+    const [{loading, wasLoaded, data, error}, dispatch] = useReducer(
+        chartReducer,
+        initialChartState,
+    );
+
+    const fetchChartData = useCallback(
+        async (isBackground: boolean) => {
+            dispatch(setChartDataLoading());
+
+            if (!isBackground) {
+                dispatch(setChartDataWasNotLoaded());
+            }
+
+            try {
+                // maxDataPoints param is calculated based on width
+                // should be width > maxDataPoints to prevent points that cannot be selected
+                // more px per dataPoint - easier to select, less - chart is smoother
+                const response = await getChartData({
+                    metrics,
+                    timeFrame,
+                    maxDataPoints: width / 2,
+                });
+
+                // Hack to prevent setting value to state, if component unmounted
+                if (!mounted.current) return;
+
+                // In some cases error could be in response with 200 status code
+                // It happens when request is OK, but chart data cannot be returned due to some reason
+                // Example: charts are not enabled in the DB ('GraphShard is not enabled' error)
+                if (Array.isArray(response)) {
+                    const preparedData = convertResponse(response, metrics);
+                    dispatch(setChartData(preparedData));
+                } else {
+                    dispatch(setChartError({statusText: response.error}));
+                }
+            } catch (err) {
+                if (!mounted.current) return;
+
+                dispatch(setChartError(err as IResponseError));
+            }
+        },
+        [metrics, timeFrame, width],
+    );
+
+    useAutofetcher(fetchChartData, [fetchChartData], autorefresh);
+
+    const convertedData = prepareWidgetData(data, chartOptions);
+
+    const renderContent = () => {
+        if (loading && !wasLoaded) {
+            return <Loader />;
+        }
+
+        return (
+            <div className={b('chart')}>
+                <ChartKit type="yagr" data={convertedData} />
+                {error && <ResponseError className={b('error')} error={error} />}
+            </div>
+        );
+    };
+
+    return (
+        <div
+            className={b(null)}
+            style={{
+                height,
+                width,
+            }}
+        >
+            <div className={b('title')}>{title}</div>
+            {renderContent()}
+        </div>
+    );
+};

package/dist/components/MetricChart/convertReponse.ts

@@ -0,0 +1,33 @@
+import type {MetricData} from '../../types/api/render';
+import type {MetricDescription, PreparedMetric, PreparedMetricsData} from './types';
+
+export const convertResponse = (
+    data: MetricData[] = [],
+    metrics: MetricDescription[],
+): PreparedMetricsData => {
+    const preparedMetrics = data
+        .map(({datapoints, target}) => {
+            const metricDescription = metrics.find((metric) => metric.target === target);
+
+            if (!metricDescription) {
+                return undefined;
+            }
+
+            const chartData = datapoints.map((datapoint) => datapoint[0]);
+
+            return {
+                ...metricDescription,
+                data: chartData,
+            };
+        })
+        .filter((metric): metric is PreparedMetric => metric !== undefined);
+
+    // Asuming all metrics in response have the same timeline
+    // Backend return data in seconds, while chart needs ms
+    const timeline = data[0].datapoints.map((datapoint) => datapoint[1] * 1000);
+
+    return {
+        timeline,
+        metrics: preparedMetrics,
+    };
+};

package/dist/components/MetricChart/getChartData.ts

@@ -0,0 +1,20 @@
+import {TIMEFRAMES, type TimeFrame} from '../../utils/timeframes';
+import type {MetricDescription} from './types';
+
+interface GetChartDataParams {
+    metrics: MetricDescription[];
+    timeFrame: TimeFrame;
+    maxDataPoints: number;
+}
+
+export const getChartData = async ({metrics, timeFrame, maxDataPoints}: GetChartDataParams) => {
+    const targetString = metrics.map((metric) => `target=${metric.target}`).join('&');
+
+    const until = Math.round(Date.now() / 1000);
+    const from = until - TIMEFRAMES[timeFrame];
+
+    return window.api.getChartData(
+        {target: targetString, from, until, maxDataPoints},
+        {concurrentId: `getChartData|${targetString}`},
+    );
+};

package/dist/components/MetricChart/getDefaultDataFormatter.ts

@@ -0,0 +1,45 @@
+import {formatBytes} from '../../utils/bytesParsers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
+import {formatToMs} from '../../utils/timeParsers';
+import {isNumeric} from '../../utils/utils';
+
+import type {ChartDataType, ChartValue} from './types';
+
+export const getDefaultDataFormatter = (dataType?: ChartDataType) => {
+    switch (dataType) {
+        case 'ms': {
+            return formatChartValueToMs;
+        }
+        case 'size': {
+            return formatChartValueToSize;
+        }
+        default:
+            return undefined;
+    }
+};
+
+// Values in y axis won't be null and will always be present and properly formatted
+// EMPTY_DATA_PLACEHOLDER is actually empty data format for values in a tooltip
+function formatChartValueToMs(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return formatToMs(roundToPrecision(convertToNumber(value), 2));
+}
+
+function formatChartValueToSize(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return formatBytes({value: convertToNumber(value), precision: 3});
+}
+
+// Numeric values expected, not numeric value should be displayd as 0
+function convertToNumber(value: unknown): number {
+    if (isNumeric(value)) {
+        return Number(value);
+    }
+
+    return 0;
+}

package/dist/components/MetricChart/index.ts

@@ -0,0 +1,2 @@
+export type {MetricDescription, Metric, ChartOptions} from './types';
+export {MetricChart} from './MetricChart';

package/dist/components/MetricChart/reducer.ts

@@ -0,0 +1,86 @@
+import {createRequestActionTypes} from '../../store/utils';
+import type {IResponseError} from '../../types/api/error';
+
+import type {PreparedMetricsData} from './types';
+
+const FETCH_CHART_DATA = createRequestActionTypes('chart', 'FETCH_CHART_DATA');
+const SET_CHART_DATA_WAS_NOT_LOADED = 'chart/SET_DATA_WAS_NOT_LOADED';
+
+export const setChartDataLoading = () => {
+    return {
+        type: FETCH_CHART_DATA.REQUEST,
+    } as const;
+};
+
+export const setChartData = (data: PreparedMetricsData) => {
+    return {
+        data,
+        type: FETCH_CHART_DATA.SUCCESS,
+    } as const;
+};
+
+export const setChartError = (error: IResponseError) => {
+    return {
+        error,
+        type: FETCH_CHART_DATA.FAILURE,
+    } as const;
+};
+
+export const setChartDataWasNotLoaded = () => {
+    return {
+        type: SET_CHART_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
+type ChartAction =
+    | ReturnType<typeof setChartDataLoading>
+    | ReturnType<typeof setChartData>
+    | ReturnType<typeof setChartError>
+    | ReturnType<typeof setChartDataWasNotLoaded>;
+
+interface ChartState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data: PreparedMetricsData;
+    error: IResponseError | undefined;
+}
+
+export const initialChartState: ChartState = {
+    // Set chart initial state as loading, in order not to mount and unmount component in between requests
+    // as it leads to memory leak errors in console (not proper useEffect cleanups in chart component itself)
+    // TODO: possible fix (check needed): chart component is always present, but display: none for chart while loading
+    loading: true,
+    wasLoaded: false,
+    data: {timeline: [], metrics: []},
+    error: undefined,
+};
+
+export const chartReducer = (state: ChartState, action: ChartAction) => {
+    switch (action.type) {
+        case FETCH_CHART_DATA.REQUEST: {
+            return {...state, loading: true};
+        }
+        case FETCH_CHART_DATA.SUCCESS: {
+            return {...state, loading: false, wasLoaded: true, error: undefined, data: action.data};
+        }
+        case FETCH_CHART_DATA.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                // Clear data, so error will be displayed with empty chart
+                data: {timeline: [], metrics: []},
+                loading: false,
+                wasLoaded: true,
+            };
+        }
+        case SET_CHART_DATA_WAS_NOT_LOADED: {
+            return {...state, wasLoaded: false};
+        }
+        default:
+            return state;
+    }
+};

package/dist/components/MetricChart/types.ts

@@ -0,0 +1,32 @@
+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';
+
+export interface MetricDescription {
+    target: Metric;
+    title?: string;
+    color?: string;
+}
+
+export interface PreparedMetric extends MetricDescription {
+    data: (number | null)[];
+}
+
+export interface PreparedMetricsData {
+    timeline: number[];
+    metrics: PreparedMetric[];
+}
+
+export type ChartValue = number | string | null;
+
+export type ChartDataType = 'ms' | 'size';
+
+export interface ChartOptions {
+    dataType?: ChartDataType;
+}

package/dist/components/TimeFrameSelector/TimeFrameSelector.scss

@@ -0,0 +1,5 @@
+.ydb-timeframe-selector {
+    display: flex;
+
+    gap: 2px;
+}

package/dist/components/TimeFrameSelector/TimeFrameSelector.tsx

@@ -0,0 +1,33 @@
+import {Button} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import {TIMEFRAMES, type TimeFrame} from '../../utils/timeframes';
+
+import './TimeFrameSelector.scss';
+
+const b = cn('ydb-timeframe-selector');
+
+interface TimeFrameSelectorProps {
+    value: TimeFrame;
+    onChange: (value: TimeFrame) => void;
+    className?: string;
+}
+
+export const TimeFrameSelector = ({value, onChange, className}: TimeFrameSelectorProps) => {
+    return (
+        <div className={b(null, className)}>
+            {Object.keys(TIMEFRAMES).map((timeFrame) => {
+                return (
+                    <Button
+                        view="flat"
+                        selected={value === timeFrame}
+                        key={timeFrame}
+                        onClick={() => onChange(timeFrame as TimeFrame)}
+                    >
+                        {timeFrame}
+                    </Button>
+                );
+            })}
+        </div>
+    );
+};

package/dist/containers/App/Content.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import {Switch, Route, Redirect, Router, useLocation} from 'react-router-dom';
+import {QueryParamProvider} from 'use-query-params';
+import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 
@@ -80,18 +82,20 @@ function ContentWrapper(props) {
         <HistoryContext.Consumer>
             {(history) => (
                 <Router history={history}>
-                    <Switch>
-                        <Route path={routes.auth}>
-                            <Authentication closable />
-                        </Route>
-                        <Route>
-                            <ThemeProvider theme={theme}>
-                                <div className={b({embedded: singleClusterMode})}>
-                                    {isAuthenticated ? props.children : <Authentication />}
-                                </div>
-                            </ThemeProvider>
-                        </Route>
-                    </Switch>
+                    <QueryParamProvider adapter={ReactRouter5Adapter}>
+                        <Switch>
+                            <Route path={routes.auth}>
+                                <Authentication closable />
+                            </Route>
+                            <Route>
+                                <ThemeProvider theme={theme}>
+                                    <div className={b({embedded: singleClusterMode})}>
+                                        {isAuthenticated ? props.children : <Authentication />}
+                                    </div>
+                                </ThemeProvider>
+                            </Route>
+                        </Switch>
+                    </QueryParamProvider>
                 </Router>
             )}
         </HistoryContext.Consumer>

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

@@ -0,0 +1,50 @@
+import {type ChartConfig, TenantDashboard} from './TenantDashboard/TenantDashboard';
+import i18n from './i18n';
+
+const defaultDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.queries-per-second'),
+        metrics: [
+            {
+                target: 'queries.requests',
+                title: i18n('charts.queries-per-second'),
+            },
+        ],
+    },
+    {
+        title: i18n('charts.transaction-latency', {percentile: ''}),
+        metrics: [
+            {
+                target: 'queries.latencies.p50',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p50',
+                }),
+            },
+            {
+                target: 'queries.latencies.p75',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p75',
+                }),
+            },
+            {
+                target: 'queries.latencies.p90',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p90',
+                }),
+            },
+            {
+                target: 'queries.latencies.p99',
+                title: i18n('charts.transaction-latency', {
+                    percentile: 'p99',
+                }),
+            },
+        ],
+        options: {
+            dataType: 'ms',
+        },
+    },
+];
+
+export const DefaultDashboard = () => {
+    return <TenantDashboard charts={defaultDashboardConfig} />;
+};

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

@@ -72,22 +72,31 @@ export function MetricsCards({
 
     const queryParams = parseQuery(location);
 
+    // Allow tabs untoggle behaviour
+    const getTabIfNotActive = (tab: TenantMetricsTab) => {
+        if (tab === metricsTab) {
+            return '';
+        }
+
+        return tab;
+    };
+
     const tabLinks: Record<TenantMetricsTab, string> = {
         [TENANT_METRICS_TABS_IDS.cpu]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.cpu,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.cpu),
         }),
         [TENANT_METRICS_TABS_IDS.storage]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.storage,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.storage),
         }),
         [TENANT_METRICS_TABS_IDS.memory]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.memory,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.memory),
         }),
         [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath({
             ...queryParams,
-            [TenantTabsGroups.metricsTab]: TENANT_METRICS_TABS_IDS.healthcheck,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.healthcheck),
         }),
     };
 

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

@@ -0,0 +1,18 @@
+import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
+
+const cpuDashboardConfig: ChartConfig[] = [
+    {
+        title: i18n('charts.cpu-usage'),
+        metrics: [
+            {
+                target: 'resources.cpu.usage',
+                title: i18n('charts.cpu-usage'),
+            },
+        ],
+    },
+];
+
+export const CpuDashboard = () => {
+    return <TenantDashboard charts={cpuDashboardConfig} />;
+};

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

@@ -1,4 +1,5 @@
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {CpuDashboard} from './CpuDashboard';
 import {TopNodesByLoad} from './TopNodesByLoad';
 import {TopNodesByCpu} from './TopNodesByCpu';
 import {TopShards} from './TopShards';
@@ -12,6 +13,7 @@ interface TenantCpuProps {
 export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) {
     return (
         <>
+            <CpuDashboard />
             <TopNodesByLoad path={path} additionalNodesProps={additionalNodesProps} />
             <TopNodesByCpu path={path} additionalNodesProps={additionalNodesProps} />
             <TopShards path={path} />

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

@@ -0,0 +1,14 @@
+.ydb-tenant-dashboard {
+    width: var(--diagnostics-section-table-width);
+    margin-bottom: var(--diagnostics-section-margin);
+
+    &__controls {
+        margin-bottom: 10px;
+    }
+
+    &__charts {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 16px;
+    }
+}