ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/components/MetricChart/MetricChart.tsx

@@ -1,198 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

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

package/dist/components/MetricChart/reducer.ts

@@ -1,86 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,65 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {Button, PopoverBehavior} from '@gravity-ui/uikit';
-
-import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
-import type {NodeAddress} from '../../types/additionalProps';
-import {getDefaultNodePath} from '../../containers/Node/NodePages';
-import {isUnavailableNode} from '../../utils/nodes';
-
-import EntityStatus from '../EntityStatus/EntityStatus';
-import {NodeEndpointsTooltipContent} from '../TooltipsContent';
-import {Icon} from '../Icon';
-import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
-
-import './NodeHostWrapper.scss';
-
-const b = block('ydb-node-host-wrapper');
-
-interface NodeHostWrapperProps {
-    node: NodesPreparedEntity;
-    getNodeRef?: (node?: NodeAddress) => string | null;
-}
-
-export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
-    if (!node.Host) {
-        return <span>—</span>;
-    }
-
-    const isNodeAvailable = !isUnavailableNode(node);
-    const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
-    const nodePath = isNodeAvailable
-        ? getDefaultNodePath(node.NodeId, {
-              tenantName: node.TenantName,
-          })
-        : undefined;
-
-    return (
-        <CellWithPopover
-            disabled={!isNodeAvailable}
-            content={<NodeEndpointsTooltipContent data={node} />}
-            placement={['top', 'bottom']}
-            behavior={PopoverBehavior.Immediate}
-        >
-            <div className={b('host-wrapper')}>
-                <EntityStatus
-                    name={node.Host}
-                    status={node.SystemState}
-                    path={nodePath}
-                    hasClipboardButton
-                    className={b('host')}
-                />
-                {nodeRef && (
-                    <Button
-                        size="s"
-                        href={nodeRef}
-                        className={b('external-button')}
-                        target="_blank"
-                    >
-                        <Icon name="external" />
-                    </Button>
-                )}
-            </div>
-        </CellWithPopover>
-    );
-};

package/dist/components/PoolBar/PoolBar.tsx

@@ -1,39 +0,0 @@
-import block from 'bem-cn-lite';
-
-import type {TPoolStats} from '../../types/api/nodes';
-
-import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
-import {PoolTooltipContent} from '../TooltipsContent';
-
-import './PoolBar.scss';
-
-const b = block('ydb-pool-bar');
-
-const getBarType = (usage: number) => {
-    if (usage >= 75) {
-        return 'danger';
-    } else if (usage >= 50 && usage < 75) {
-        return 'warning';
-    } else {
-        return 'normal';
-    }
-};
-
-interface PoolBarProps {
-    data?: TPoolStats;
-}
-
-export const PoolBar = ({data = {}}: PoolBarProps) => {
-    const {Usage: usage = 0} = data;
-    const usagePercents = Math.min(usage * 100, 100);
-    const type = getBarType(usagePercents);
-
-    return (
-        <ContentWithPopup
-            className={b({type})}
-            content={<PoolTooltipContent data={data} className={b('popup-content')} />}
-        >
-            <div style={{height: `${usagePercents}%`}} className={b('value', {type})} />
-        </ContentWithPopup>
-    );
-};

package/dist/components/PoolUsage/PoolUsage.tsx

@@ -1,50 +0,0 @@
-import block from 'bem-cn-lite';
-
-import type {TPoolStats} from '../../types/api/nodes';
-
-import './PoolUsage.scss';
-
-const b = block('ydb-pool-usage');
-
-const getLineType = (fillWidth: number) => {
-    let fillColor = 'green';
-    if (fillWidth > 60 && fillWidth <= 80) {
-        fillColor = 'yellow';
-    } else if (fillWidth > 80) {
-        fillColor = 'red';
-    }
-
-    return fillColor;
-};
-
-interface PoolUsageProps {
-    data?: TPoolStats;
-}
-
-export const PoolUsage = ({data: pool = {}}: PoolUsageProps) => {
-    const {Threads, Name = 'Unknown', Usage = 0} = pool;
-    const dataExist = Usage && Threads;
-
-    const value = Math.floor(Usage * 100);
-    const fillWidth = value > 100 ? 100 : value;
-
-    return (
-        <div className={b()}>
-            <div className={b('info')}>
-                <div className={b('pool-name')}>{Name}</div>
-                {dataExist && (
-                    <div className={b('value')}>
-                        <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
-                        <div className={b('threads')}>(×{Threads})</div>
-                    </div>
-                )}
-            </div>
-            <div className={b('visual')}>
-                <div
-                    className={b('usage-line', {type: getLineType(fillWidth)})}
-                    style={{width: `${fillWidth}%`}}
-                />
-            </div>
-        </div>
-    );
-};

package/dist/components/PoolsGraph/PoolsGraph.tsx

@@ -1,23 +0,0 @@
-import block from 'bem-cn-lite';
-
-import type {TPoolStats} from '../../types/api/nodes';
-
-import {PoolBar} from '../PoolBar/PoolBar';
-
-import './PoolsGraph.scss';
-
-const b = block('ydb-pools-graph');
-
-interface PoolsGraphProps {
-    pools?: TPoolStats[];
-}
-
-export const PoolsGraph = ({pools = []}: PoolsGraphProps) => {
-    return (
-        <div className={b()}>
-            {pools.map((item, index) => (
-                <PoolBar key={index} data={item} />
-            ))}
-        </div>
-    );
-};

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -1,23 +0,0 @@
-import {RadioButton} from '@gravity-ui/uikit';
-
-import type {ProblemFilterValue} from '../../store/reducers/settings/types';
-import {ProblemFilterValues} from '../../store/reducers/settings/settings';
-
-interface ProblemFilterProps {
-    value: ProblemFilterValue;
-    onChange: (value: ProblemFilterValue) => void;
-    className?: string;
-}
-
-export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
-    return (
-        <RadioButton value={value} onUpdate={onChange} className={className}>
-            <RadioButton.Option value={ProblemFilterValues.ALL}>
-                {ProblemFilterValues.ALL}
-            </RadioButton.Option>
-            <RadioButton.Option value={ProblemFilterValues.PROBLEMS}>
-                {ProblemFilterValues.PROBLEMS}
-            </RadioButton.Option>
-        </RadioButton>
-    );
-};