ydb-embedded-ui 4.29.0 → 4.31.0

package/README.md

@@ -2,7 +2,8 @@
 
 Local viewer for YDB clusters
 
-[Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+* [Docs for users](https://ydb.tech/en/docs/maintenance/embedded_monitoring/ydb_monitoring)
+* [Project Roadmap](ROADMAP.md)
 
 ## Preview
 

package/dist/components/ClipboardButton/ClipboardButton.tsx

@@ -0,0 +1,52 @@
+import {
+    Button,
+    ButtonProps,
+    ClipboardIcon,
+    CopyToClipboard as CopyToClipboardUiKit,
+    CopyToClipboardStatus,
+    Tooltip,
+} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+const b = cn('clipboard-button');
+
+interface ClipboardButtonProps extends Pick<ButtonProps, 'disabled' | 'size' | 'title' | 'view'> {
+    className?: string;
+    text: string;
+}
+
+/**
+ * An inner component required
+ * because `react-copy-to-clipboard` doesn't work with `Tooltip` otherwise.
+ */
+function InnerButton({
+    className,
+    status,
+    title,
+    ...props
+}: Omit<ClipboardButtonProps, 'text'> & {status: CopyToClipboardStatus}) {
+    return (
+        <Tooltip
+            content={status === CopyToClipboardStatus.Success ? 'Copied!' : title || 'Copy'}
+            /**
+             * Auto-placement has a bug with text changing.
+             * @link https://github.com/ydb-platform/ydb-embedded-ui/pull/648#discussion_r1453530092
+             */
+            placement="bottom-start"
+        >
+            <Button {...props} className={b(null, className)}>
+                <Button.Icon>
+                    <ClipboardIcon status={status} size={16} />
+                </Button.Icon>
+            </Button>
+        </Tooltip>
+    );
+}
+
+export function ClipboardButton({text, ...props}: ClipboardButtonProps) {
+    return (
+        <CopyToClipboardUiKit text={text} timeout={1000}>
+            {(status) => <InnerButton {...props} status={status} />}
+        </CopyToClipboardUiKit>
+    );
+}

package/dist/components/ClipboardButton/index.ts

@@ -0,0 +1 @@
+export * from './ClipboardButton';

package/dist/components/EntityStatus/EntityStatus.js

@@ -1,14 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import {Icon, Link as UIKitLink} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import React from 'react';
 import {Link} from 'react-router-dom';
-import {ClipboardButton, Link as UIKitLink, Button, Icon} from '@gravity-ui/uikit';
-
-import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleExclamationIcon from '../../assets/icons/circle-exclamation.svg';
-import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import circleInfoIcon from '../../assets/icons/circle-info.svg';
 import circleTimesIcon from '../../assets/icons/circle-xmark.svg';
-
+import triangleExclamationIcon from '../../assets/icons/triangle-exclamation.svg';
+import {ClipboardButton} from '../ClipboardButton';
 import './EntityStatus.scss';
 
 const icons = {
@@ -121,15 +120,13 @@ class EntityStatus extends React.Component {
                     {this.renderLink()}
                 </span>
                 {hasClipboardButton && (
-                    <Button
-                        component="span"
+                    <ClipboardButton
+                        text={name}
                         size="s"
                         className={b('clipboard-button', {
                             visible: this.props.clipboardButtonAlwaysVisible,
                         })}
-                    >
-                        <ClipboardButton text={name} size={16} />
-                    </Button>
+                    />
                 )}
             </div>
         );

package/dist/components/EntityStatus/EntityStatus.scss

@@ -10,25 +10,14 @@
     @include body-2-typography();
 
     &__clipboard-button {
-        display: none;
-        justify-content: center;
-        align-items: center;
+        visibility: hidden;
 
         margin-left: 8px;
 
         color: var(--yc-color-text-secondary);
 
-        .yc-button__text {
-            margin: 0;
-        }
-
-        .yc-clipboard-button {
-            width: 24px;
-            height: 24px;
-        }
-
         &_visible {
-            display: inline-flex;
+            visibility: visible;
         }
     }
 

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,32 @@
+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);
+            const chartData = datapoints.map((datapoint) => datapoint[0] || 0);
+
+            if (!metricDescription) {
+                return undefined;
+            }
+
+            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,36 @@
+import {formatBytes} from '../../utils/bytesParsers';
+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;
+    }
+};
+
+function formatChartValueToMs(value: ChartValue) {
+    return formatToMs(roundToPrecision(convertToNumber(value), 2));
+}
+
+function formatChartValueToSize(value: ChartValue) {
+    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[];
+}
+
+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/App.scss

@@ -107,21 +107,21 @@ body,
         border-right: unset;
         border-left: unset;
     }
-
-    .yc-clipboard-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
 }
 
 .error {
     color: var(--g-color-text-danger);
 }
 
-.data-table__row:hover .entity-status__clipboard-button,
-.ydb-virtual-table__row:hover .entity-status__clipboard-button {
-    display: flex;
+.data-table__row,
+.ydb-virtual-table__row,
+.ydb-tree-view__item {
+    &:hover,
+    &:focus-within {
+        & .clipboard-button {
+            visibility: visible;
+        }
+    }
 }
 
 .g-root .data-table_highlight-rows .data-table__row:hover {