ydb-embedded-ui 5.2.1 → 5.4.0

package/dist/components/InfoViewer/InfoViewer.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import cn from 'bem-cn-lite';
 import './InfoViewer.scss';
 const b = cn('info-viewer');
-const InfoViewer = ({ title, info, dots = true, size, className, multilineLabels, renderEmptyState, }) => {
+export const InfoViewer = ({ title, info, dots = true, size, className, multilineLabels, renderEmptyState, }) => {
     if ((!info || !info.length) && renderEmptyState) {
         return _jsx(_Fragment, { children: renderEmptyState({ title, size }) });
     }

package/dist/components/InfoViewer/formatters/cdcStream.d.ts

@@ -1,5 +1,5 @@
 import { TCdcStreamDescription } from '../../../types/api/schema';
 export declare const formatCdcStreamItem: <Key extends keyof TCdcStreamDescription>(label: Key, value: TCdcStreamDescription[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TCdcStreamDescription[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/common.d.ts

@@ -1,5 +1,5 @@
 import type { TDirEntry } from '../../../types/api/schema';
 export declare const formatCommonItem: <Key extends keyof TDirEntry>(label: Key, value: TDirEntry[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TDirEntry[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/pqGroup.d.ts

@@ -1,13 +1,13 @@
 import { TPersQueueGroupDescription, TPQPartitionConfig, TPQTabletConfig } from '../../../types/api/schema';
 export declare const formatPQGroupItem: <Key extends keyof TPersQueueGroupDescription>(label: Key, value: TPersQueueGroupDescription[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TPersQueueGroupDescription[Key] | null | undefined;
 };
 export declare const formatPQTabletConfig: <Key extends keyof TPQTabletConfig>(label: Key, value: TPQTabletConfig[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TPQTabletConfig[Key] | null | undefined;
 };
 export declare const formatPQPartitionConfig: <Key extends keyof TPQPartitionConfig>(label: Key, value: TPQPartitionConfig[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TPQPartitionConfig[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/schema.d.ts

@@ -1,5 +1,5 @@
 import type { TIndexDescription } from '../../../types/api/schema';
 export declare const formatTableIndexItem: <Key extends keyof TIndexDescription>(label: Key, value: TIndexDescription[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TIndexDescription[Key] | null | undefined;
 };

package/dist/components/InfoViewer/formatters/table.d.ts

@@ -2,17 +2,17 @@ import type { TFollowerGroup, TPartitionConfig, TTableStats } from '../../../typ
 import type { TMetrics } from '../../../types/api/tenant';
 export declare const formatTabletMetricsItem: <Key extends keyof TMetrics>(label: Key, value: TMetrics[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TMetrics[Key] | null | undefined;
 };
 export declare const formatFollowerGroupItem: <Key extends keyof TFollowerGroup>(label: Key, value: TFollowerGroup[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TFollowerGroup[Key] | null | undefined;
 };
 export declare const formatPartitionConfigItem: <Key extends keyof TPartitionConfig>(label: Key, value: TPartitionConfig[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TPartitionConfig[Key] | null | undefined;
 };
 export declare const formatTableStatsItem: <Key extends keyof TTableStats>(label: Key, value: TTableStats[Key]) => {
     label: string;
-    value: import("react").ReactNode;
+    value: {} | TTableStats[Key] | null | undefined;
 };

package/dist/components/InfoViewer/utils.d.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 import { InfoViewerItem } from './InfoViewer';
-declare type LabelMap<T> = {
+type LabelMap<T> = {
     [label in keyof T]?: string;
 };
-declare type ValueFormatters<T> = {
+type ValueFormatters<T> = {
     [label in keyof T]?: (value: T[label]) => ReactNode;
 };
 interface CreateInfoFormatterOptions<Shape> {
@@ -13,7 +13,7 @@ interface CreateInfoFormatterOptions<Shape> {
 }
 export declare function createInfoFormatter<Shape extends Record<string, any>>({ values: valueFormatters, labels: labelMap, defaultValueFormatter, }: CreateInfoFormatterOptions<Shape>): <Key extends keyof Shape>(label: Key, value: Shape[Key]) => {
     label: keyof Shape | NonNullable<LabelMap<Shape>[keyof Shape]>;
-    value: ReactNode;
+    value: {} | Shape[Key] | null | undefined;
 };
 export declare const formatObject: <Shape extends Record<string, any>>(formatter: <Key extends keyof Shape>(value: Key, label: Shape[Key]) => InfoViewerItem, obj?: Partial<Shape> | undefined) => InfoViewerItem[];
 export {};

package/dist/components/InfoViewerSkeleton/InfoViewerSkeleton.d.ts

@@ -0,0 +1,7 @@
+import './InfoViewerSkeleton.scss';
+interface InfoViewerSkeletonProps {
+    className?: string;
+    rows?: number;
+}
+export declare const InfoViewerSkeleton: ({ rows, className }: InfoViewerSkeletonProps) => JSX.Element;
+export {};

package/dist/components/InfoViewerSkeleton/InfoViewerSkeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Skeleton } from '@gravity-ui/uikit';
+import './InfoViewerSkeleton.scss';
+const b = block('ydb-info-viewer-skeleton');
+const SkeletonLabel = () => (_jsxs("div", Object.assign({ className: b('label') }, { children: [_jsx(Skeleton, { className: b('label__text') }), _jsx("div", { className: b('label__dots') })] })));
+export const InfoViewerSkeleton = ({ rows = 8, className }) => (_jsx("div", Object.assign({ className: b(null, className) }, { children: [...new Array(rows)].map((_, index) => (_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx(SkeletonLabel, {}), _jsx(Skeleton, { className: b('value') })] }), `skeleton-row-${index}`))) })));

package/dist/{containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss → components/InfoViewerSkeleton/InfoViewerSkeleton.scss}

@@ -1,10 +1,8 @@
-.ydb-cluster-info-skeleton {
+.ydb-info-viewer-skeleton {
     display: flex;
     flex-direction: column;
     gap: 16px;
 
-    margin-top: 5px;
-
     &__row {
         display: flex;
         align-items: flex-start;
@@ -39,10 +37,4 @@
         min-width: 200px;
         max-width: 20%;
     }
-
-    &__versions {
-        min-width: 400px;
-        max-width: 40%;
-        height: 36px;
-    }
 }

package/dist/components/InternalLink/InternalLink.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from 'react-router-dom';
 import cn from 'bem-cn-lite';

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from '@gravity-ui/uikit';
 import { createExternalUILink, parseQuery } from '../../routes';

package/dist/components/LinkWithIcon/LinkWithIcon.d.ts

@@ -0,0 +1,8 @@
+import './LinkWithIcon.scss';
+interface ExternalLinkWithIconProps {
+    title: string;
+    url: string;
+    external?: boolean;
+}
+export declare const LinkWithIcon: ({ title, url, external }: ExternalLinkWithIconProps) => JSX.Element;
+export {};

package/dist/components/LinkWithIcon/LinkWithIcon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import block from 'bem-cn-lite';
+import { Link } from '@gravity-ui/uikit';
+import { ArrowUpRightFromSquare } from '@gravity-ui/icons';
+import { InternalLink } from '../InternalLink';
+import './LinkWithIcon.scss';
+const b = block('ydb-link-with-icon');
+export const LinkWithIcon = ({ title, url, external = true }) => {
+    const linkContent = (_jsxs(_Fragment, { children: [title, '\u00a0', _jsx(ArrowUpRightFromSquare, {})] }));
+    if (external) {
+        return (_jsx(Link, Object.assign({ href: url, target: "_blank", className: b() }, { children: linkContent })));
+    }
+    return (_jsx(InternalLink, Object.assign({ to: url, className: b() }, { children: linkContent })));
+};

package/dist/components/{ExternalLinkWithIcon/ExternalLinkWithIcon.scss → LinkWithIcon/LinkWithIcon.scss}

@@ -1,4 +1,4 @@
-.ydb-external-link-with-icon {
+.ydb-link-with-icon {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;

package/dist/components/MetricChart/MetricChart.d.ts

@@ -2,6 +2,7 @@ import type { TimeFrame } from '../../utils/timeframes';
 import type { ChartOptions, MetricDescription, OnChartDataStatusChange } from './types';
 import './MetricChart.scss';
 interface DiagnosticsChartProps {
+    database: string;
     title?: string;
     metrics: MetricDescription[];
     timeFrame?: TimeFrame;
@@ -17,5 +18,5 @@ interface DiagnosticsChartProps {
      */
     isChartVisible?: boolean;
 }
-export declare const MetricChart: ({ title, metrics, timeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, }: DiagnosticsChartProps) => JSX.Element;
+export declare const MetricChart: ({ database, title, metrics, timeFrame, autorefresh, width, height, chartOptions, onChartDataStatusChange, isChartVisible, }: DiagnosticsChartProps) => JSX.Element;
 export {};

package/dist/components/MetricChart/MetricChart.js

@@ -3,7 +3,6 @@ import { useCallback, useEffect, useReducer, useRef } from 'react';
 import { YagrPlugin } from '@gravity-ui/chartkit/yagr';
 import ChartKit, { settings } from '@gravity-ui/chartkit';
 import { useAutofetcher } from '../../utils/hooks';
-import { COLORS } from '../../utils/versions';
 import { cn } from '../../utils/cn';
 import { Loader } from '../Loader';
 import { ResponseError } from '../Errors/ResponseError';
@@ -11,6 +10,8 @@ import { convertResponse } from './convertReponse';
 import { getDefaultDataFormatter } from './getDefaultDataFormatter';
 import { getChartData } from './getChartData';
 import { chartReducer, initialChartState, setChartData, setChartDataLoading, setChartDataWasNotLoaded, setChartError, } from './reducer';
+import { colorToRGBA, colors } from './colors';
+import i18n from './i18n';
 import './MetricChart.scss';
 const b = cn('ydb-metric-chart');
 settings.set({ plugins: [YagrPlugin] });
@@ -19,12 +20,16 @@ const prepareWidgetData = (data, options = {}) => {
     const defaultDataFormatter = getDefaultDataFormatter(dataType);
     const isDataEmpty = !data.metrics.length;
     const graphs = data.metrics.map((metric, index) => {
+        const lineColor = metric.color || colors[index];
+        const color = colorToRGBA(lineColor, 0.1);
         return {
             id: metric.target,
             name: metric.title || metric.target,
-            color: metric.color || COLORS[index],
             data: metric.data,
             formatter: defaultDataFormatter,
+            lineColor,
+            color,
+            legendColorKey: 'lineColor',
         };
     });
     return {
@@ -40,7 +45,8 @@ const prepareWidgetData = (data, options = {}) => {
                     padding: isDataEmpty ? [10, 0, 10, 0] : undefined,
                 },
                 series: {
-                    type: 'line',
+                    type: 'area',
+                    lineWidth: 1.5,
                 },
                 select: {
                     zoom: false,
@@ -66,7 +72,7 @@ const prepareWidgetData = (data, options = {}) => {
         },
     };
 };
-export const MetricChart = ({ title, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, }) => {
+export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autorefresh, width = 400, height = width / 1.5, chartOptions, onChartDataStatusChange, isChartVisible, }) => {
     const mounted = useRef(false);
     useEffect(() => {
         mounted.current = true;
@@ -97,6 +103,7 @@ export const MetricChart = ({ title, metrics, timeFrame = '1h', autorefresh, wid
             // 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({
+                database,
                 metrics,
                 timeFrame,
                 maxDataPoints: width / 2,
@@ -105,7 +112,8 @@ export const MetricChart = ({ title, metrics, timeFrame = '1h', autorefresh, wid
             if (!mounted.current) {
                 return;
             }
-            // In some cases error could be in response with 200 status code
+            // Response could be a plain html for ydb versions without charts support
+            // Or there could be an error 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)) {
@@ -113,7 +121,9 @@ export const MetricChart = ({ title, metrics, timeFrame = '1h', autorefresh, wid
                 dispatch(setChartData(preparedData));
             }
             else {
-                const err = { statusText: response.error };
+                const err = {
+                    statusText: typeof response === 'string' ? i18n('not-supported') : response.error,
+                };
                 throw err;
             }
         }
@@ -123,7 +133,7 @@ export const MetricChart = ({ title, metrics, timeFrame = '1h', autorefresh, wid
             }
             dispatch(setChartError(err));
         }
-    }, [metrics, timeFrame, width]);
+    }, [database, metrics, timeFrame, width]);
     useAutofetcher(fetchChartData, [fetchChartData], autorefresh);
     const convertedData = prepareWidgetData(data, chartOptions);
     const renderContent = () => {

package/dist/components/MetricChart/colors.d.ts

@@ -0,0 +1,2 @@
+export declare const colors: string[];
+export declare function colorToRGBA(initialColor: string, opacity: number): string;

package/dist/components/MetricChart/colors.js

@@ -0,0 +1,21 @@
+import { colord } from 'colord';
+// Grafana classic palette
+export const colors = [
+    '#7EB26D',
+    '#EAB839',
+    '#6ED0E0',
+    '#EF843C',
+    '#E24D42',
+    '#1F78C1',
+    '#BA43A9',
+    '#705DA0',
+    '#508642',
+    '#CCA300', // 9: dark sand
+];
+export function colorToRGBA(initialColor, opacity) {
+    const color = colord(initialColor);
+    if (!color.isValid()) {
+        throw new Error('Invalid color is passed');
+    }
+    return color.alpha(opacity).toRgbString();
+}

package/dist/components/MetricChart/getChartData.d.ts

@@ -1,9 +1,10 @@
 import { type TimeFrame } from '../../utils/timeframes';
 import type { MetricDescription } from './types';
 interface GetChartDataParams {
+    database: string;
     metrics: MetricDescription[];
     timeFrame: TimeFrame;
     maxDataPoints: number;
 }
-export declare const getChartData: ({ metrics, timeFrame, maxDataPoints }: GetChartDataParams) => Promise<import("../../types/api/render").JsonRenderResponse>;
+export declare const getChartData: ({ database, metrics, timeFrame, maxDataPoints, }: GetChartDataParams) => Promise<import("../../types/api/render").JsonRenderResponse>;
 export {};

package/dist/components/MetricChart/getChartData.js

@@ -1,7 +1,7 @@
 import { TIMEFRAMES } from '../../utils/timeframes';
-export const getChartData = async ({ metrics, timeFrame, maxDataPoints }) => {
+export const getChartData = async ({ database, metrics, timeFrame, maxDataPoints, }) => {
     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}` });
+    return window.api.getChartData({ target: targetString, from, until, maxDataPoints, database }, { concurrentId: `getChartData|${targetString}` });
 };

package/dist/components/MetricChart/getDefaultDataFormatter.d.ts

@@ -1,4 +1,4 @@
 import type { ChartDataType, ChartValue } from './types';
-export declare const getDefaultDataFormatter: (dataType?: ChartDataType | undefined) => typeof formatChartValueToMs | undefined;
+export declare const getDefaultDataFormatter: (dataType?: ChartDataType) => typeof formatChartValueToMs | undefined;
 declare function formatChartValueToMs(value: ChartValue): string;
 export {};

package/dist/components/MetricChart/getDefaultDataFormatter.js

@@ -11,6 +11,9 @@ export const getDefaultDataFormatter = (dataType) => {
         case 'size': {
             return formatChartValueToSize;
         }
+        case 'percent': {
+            return formatChartValueToPercent;
+        }
         default:
             return undefined;
     }
@@ -29,6 +32,12 @@ function formatChartValueToSize(value) {
     }
     return formatBytes({ value: convertToNumber(value), precision: 3 });
 }
+function formatChartValueToPercent(value) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
+    return Math.round(convertToNumber(value) * 100) + '%';
+}
 // Numeric values expected, not numeric value should be displayd as 0
 function convertToNumber(value) {
     if (isNumeric(value)) {

package/dist/components/MetricChart/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "not-supported": "Charts are not supported on current ydb version"
+}

package/dist/components/MetricChart/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "not-supported", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/components/MetricChart/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-metric-chart';
+export default registerKeysets(COMPONENT, { en });

package/dist/components/MetricChart/reducer.d.ts

@@ -14,7 +14,7 @@ export declare const setChartError: (error: IResponseError) => {
 export declare const setChartDataWasNotLoaded: () => {
     readonly type: "chart/SET_DATA_WAS_NOT_LOADED";
 };
-declare type ChartAction = ReturnType<typeof setChartDataLoading> | ReturnType<typeof setChartData> | ReturnType<typeof setChartError> | ReturnType<typeof setChartDataWasNotLoaded>;
+type ChartAction = ReturnType<typeof setChartDataLoading> | ReturnType<typeof setChartData> | ReturnType<typeof setChartError> | ReturnType<typeof setChartDataWasNotLoaded>;
 interface ChartState {
     loading: boolean;
     wasLoaded: boolean;

package/dist/components/MetricChart/types.d.ts

@@ -1,4 +1,8 @@
-export declare 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';
+import type { PoolName } from '../../types/api/nodes';
+type Percentile = 'p50' | 'p75' | 'p90' | 'p99';
+type QueriesLatenciesMetric = `queries.latencies.${Percentile}`;
+type PoolUsageMetric = `resources.cpu.${PoolName}.usage`;
+export type Metric = 'queries.requests' | 'resources.memory.used_bytes' | 'resources.storage.used_bytes' | 'resources.cpu.usage' | PoolUsageMetric | QueriesLatenciesMetric;
 export interface MetricDescription {
     target: Metric;
     title?: string;
@@ -11,10 +15,11 @@ export interface PreparedMetricsData {
     timeline: number[];
     metrics: PreparedMetric[];
 }
-export declare type ChartValue = number | string | null;
-export declare type ChartDataType = 'ms' | 'size';
+export type ChartValue = number | string | null;
+export type ChartDataType = 'ms' | 'size' | 'percent';
 export interface ChartOptions {
     dataType?: ChartDataType;
 }
-export declare type ChartDataStatus = 'loading' | 'success' | 'error';
-export declare type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;
+export type ChartDataStatus = 'loading' | 'success' | 'error';
+export type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;
+export {};

package/dist/components/NodeHostWrapper/NodeHostWrapper.js

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 import { Button, PopoverBehavior } from '@gravity-ui/uikit';
 import { getDefaultNodePath } from '../../containers/Node/NodePages';
 import { isUnavailableNode } from '../../utils/nodes';
-import EntityStatus from '../EntityStatus/EntityStatus';
+import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { NodeEndpointsTooltipContent } from '../TooltipsContent';
 import { Icon } from '../Icon';
 import { CellWithPopover } from '../CellWithPopover/CellWithPopover';

package/dist/components/PDiskInfo/PDiskInfo.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { PreparedPDisk } from '../../utils/disks/types';
+import { type InfoViewerProps } from '../InfoViewer/InfoViewer';
+import './PDiskInfo.scss';
+interface PDiskInfoProps<T extends PreparedPDisk> extends Omit<InfoViewerProps, 'info'> {
+    pDisk: T;
+    nodeId?: number | string | null;
+    isPDiskPage?: boolean;
+}
+export declare function PDiskInfo<T extends PreparedPDisk>({ pDisk, nodeId, isPDiskPage, ...infoViewerProps }: PDiskInfoProps<T>): JSX.Element;
+export {};

package/dist/components/PDiskInfo/PDiskInfo.js

@@ -0,0 +1,71 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { cn } from '../../utils/cn';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { valueIsDefined } from '../../utils';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
+import { getPDiskPagePath } from '../../routes';
+import { InfoViewer } from '../InfoViewer/InfoViewer';
+import { EntityStatus } from '../EntityStatus/EntityStatus';
+import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
+import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
+import { pDiskInfoKeyset } from './i18n';
+import './PDiskInfo.scss';
+const b = cn('ydb-pdisk-info');
+export function PDiskInfo(_a) {
+    var { pDisk, nodeId, isPDiskPage = false } = _a, infoViewerProps = __rest(_a, ["pDisk", "nodeId", "isPDiskPage"]);
+    const { PDiskId, Path, Guid, Category, Type, Device, Realtime, State, SerialNumber, TotalSize, AvailableSize, } = pDisk;
+    const total = Number(TotalSize);
+    const available = Number(AvailableSize);
+    const pdiskInfo = [];
+    if (valueIsDefined(Path)) {
+        pdiskInfo.push({ label: pDiskInfoKeyset('path'), value: Path });
+    }
+    if (valueIsDefined(Guid)) {
+        pdiskInfo.push({ label: pDiskInfoKeyset('guid'), value: Guid });
+    }
+    if (valueIsDefined(Category)) {
+        pdiskInfo.push({ label: pDiskInfoKeyset('category'), value: Category });
+        pdiskInfo.push({ label: pDiskInfoKeyset('type'), value: Type });
+    }
+    if (total >= 0 && available >= 0) {
+        pdiskInfo.push({
+            label: pDiskInfoKeyset('size'),
+            value: (_jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+        });
+    }
+    if (valueIsDefined(State)) {
+        pdiskInfo.push({ label: pDiskInfoKeyset('state'), value: State });
+    }
+    if (valueIsDefined(Device)) {
+        pdiskInfo.push({
+            label: pDiskInfoKeyset('device'),
+            value: _jsx(EntityStatus, { status: Device }),
+        });
+    }
+    if (valueIsDefined(Realtime)) {
+        pdiskInfo.push({
+            label: pDiskInfoKeyset('realtime'),
+            value: _jsx(EntityStatus, { status: Realtime }),
+        });
+    }
+    if (valueIsDefined(SerialNumber)) {
+        pdiskInfo.push({
+            label: pDiskInfoKeyset('serial-number'),
+            value: SerialNumber || EMPTY_DATA_PLACEHOLDER,
+        });
+    }
+    if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
+        const pDiskPagePath = getPDiskPagePath(PDiskId, nodeId);
+        const pDiskInternalViewerPath = createPDiskDeveloperUILink({
+            nodeId,
+            pDiskId: PDiskId,
+        });
+        pdiskInfo.push({
+            label: pDiskInfoKeyset('links'),
+            value: (_jsxs("span", Object.assign({ className: b('links') }, { children: [!isPDiskPage && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('pdisk-page'), url: pDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: pDiskInfoKeyset('developer-ui'), url: pDiskInternalViewerPath })] }))),
+        });
+    }
+    return _jsx(InfoViewer, Object.assign({ info: pdiskInfo }, infoViewerProps));
+}

package/dist/components/PDiskInfo/PDiskInfo.scss

@@ -0,0 +1,8 @@
+.ydb-pdisk-info {
+    &__links {
+        display: flex;
+        flex-flow: row wrap;
+
+        gap: 12px;
+    }
+}

package/dist/components/PDiskInfo/i18n/en.json

@@ -0,0 +1,14 @@
+{
+    "path": "Path",
+    "guid": "GUID",
+    "category": "Category",
+    "type": "Type",
+    "size": "Size",
+    "state": "State",
+    "device": "Device",
+    "realtime": "Realtime",
+    "serial-number": "SerialNumber",
+    "links": "Links",
+    "developer-ui": "Developer UI",
+    "pdisk-page": "PDisk page"
+}

package/dist/components/PDiskInfo/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const pDiskInfoKeyset: (key: "path" | "type" | "state" | "size" | "links" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/components/PDiskInfo/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-pDisk-info';
+export const pDiskInfoKeyset = registerKeysets(COMPONENT, { en });

package/dist/components/PageMeta/PageMeta.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './PageMeta.scss';
+interface PageMetaProps {
+    items: (string | undefined)[];
+    className?: string;
+}
+export declare function PageMeta({ items, className }: PageMetaProps): JSX.Element;
+export {};

package/dist/components/PageMeta/PageMeta.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import './PageMeta.scss';
+const b = cn('ydb-page-meta');
+export function PageMeta({ items, className }) {
+    return (_jsx("div", Object.assign({ className: b(null, className) }, { children: items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0') })));
+}

package/dist/components/PageMeta/PageMeta.scss

@@ -0,0 +1,10 @@
+@import '../../styles//mixins.scss';
+
+.ydb-page-meta {
+    display: flex;
+    flex-flow: row nowrap;
+
+    color: var(--g-color-text-primary);
+
+    @include body-2-typography();
+}

package/dist/components/ProgressViewer/ProgressViewer.d.ts

@@ -10,7 +10,7 @@ export declare const PROGRESS_VIEWER_SIZE_IDS: {
     readonly l: "l";
     readonly head: "head";
 };
-declare type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
+type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
 interface ProgressViewerProps {
     value?: number | string;
     capacity?: number | string;

package/dist/components/QueryResultTable/Cell/Cell.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import { useTypedDispatch } from '../../../utils/hooks';
 import { showTooltip, hideTooltip } from '../../../store/reducers/tooltip';
 import { b } from '../QueryResultTable';
 export const Cell = React.memo(function Cell(props) {
     const { className, value } = props;
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     useEffect(() => () => {
         dispatch(hideTooltip());
     }, [dispatch]);