ydb-embedded-ui 5.3.0 → 5.5.0

package/dist/components/DiskPageTitle/DiskPageTitle.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { EFlag } from '../../types/api/enums';
+import './DiskPageTitle.scss';
+interface DiskPageTitleProps {
+    entityName: ReactNode;
+    status: EFlag;
+    id: ReactNode;
+    className?: string;
+}
+export declare function DiskPageTitle({ entityName, status, id, className }: DiskPageTitleProps): JSX.Element;
+export {};

package/dist/components/DiskPageTitle/DiskPageTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import { StatusIcon } from '../StatusIcon/StatusIcon';
+import './DiskPageTitle.scss';
+const b = cn('ydb-disk-page-title');
+export function DiskPageTitle({ entityName, status, id, className }) {
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [_jsx("span", Object.assign({ className: b('prefix') }, { children: entityName })), _jsx(StatusIcon, { status: status, size: "s" }), id] })));
+}

package/dist/components/DiskPageTitle/DiskPageTitle.scss

@@ -0,0 +1,17 @@
+@import '../../styles/mixins.scss';
+
+.ydb-disk-page-title {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: baseline;
+
+    text-wrap: nowrap;
+
+    @include header-2-typography();
+
+    &__prefix {
+        margin-right: 6px;
+
+        color: var(--g-color-text-secondary);
+    }
+}

package/dist/{containers/Storage → components}/DiskStateProgressBar/DiskStateProgressBar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import cn from 'bem-cn-lite';
-import { INVERTED_DISKS_KEY } from '../../../utils/constants';
-import { useSetting } from '../../../utils/hooks';
-import { getSeverityColor } from '../../../utils/disks/helpers';
+import { INVERTED_DISKS_KEY } from '../../utils/constants';
+import { useSetting } from '../../utils/hooks';
+import { getSeverityColor } from '../../utils/disks/helpers';
 import './DiskStateProgressBar.scss';
 const b = cn('storage-disk-progress-bar');
 export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, }) {

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -12,7 +12,7 @@ export declare function ErrorBoundaryInner({ children, useRetry, onReportProblem
 interface ErrorBoundaryFallbackProps {
     error: Error;
     useRetry?: boolean;
-    resetErrorBoundary: () => void;
+    resetErrorBoundary?: () => void;
     onReportProblem?: (error?: Error) => void;
 }
 export declare function ErrorBoundaryFallback({ error, resetErrorBoundary, useRetry, onReportProblem, }: ErrorBoundaryFallbackProps): JSX.Element;

package/dist/components/GroupInfo/GroupInfo.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PreparedStorageGroup } from '../../store/reducers/storage/types';
+import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
+interface GroupInfoProps<T extends Partial<PreparedStorageGroup>> extends Omit<InfoViewerProps, 'info'> {
+    data: T;
+}
+export declare function GroupInfo<T extends Partial<PreparedStorageGroup>>({ data, ...infoViewerProps }: GroupInfoProps<T>): JSX.Element;
+export {};

package/dist/components/GroupInfo/GroupInfo.js

@@ -0,0 +1,28 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { valueIsDefined } from '../../utils';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { InfoViewer } from '../InfoViewer';
+import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
+import { groupInfoKeyset } from './i18n';
+export function GroupInfo(_a) {
+    var { data } = _a, infoViewerProps = __rest(_a, ["data"]);
+    const { GroupID, PoolName, Used, Limit, ErasureSpecies } = data;
+    const groupInfo = [];
+    if (valueIsDefined(GroupID)) {
+        groupInfo.push({ label: groupInfoKeyset('group-id'), value: GroupID });
+    }
+    if (valueIsDefined(PoolName)) {
+        groupInfo.push({ label: groupInfoKeyset('pool-name'), value: PoolName });
+    }
+    if (valueIsDefined(ErasureSpecies)) {
+        groupInfo.push({ label: groupInfoKeyset('erasure'), value: ErasureSpecies });
+    }
+    if (Number(Used) >= 0 && Number(Limit) >= 0) {
+        groupInfo.push({
+            label: groupInfoKeyset('size'),
+            value: (_jsx(ProgressViewer, { value: Used, capacity: Limit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+        });
+    }
+    return _jsx(InfoViewer, Object.assign({ info: groupInfo }, infoViewerProps));
+}

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

@@ -0,0 +1,6 @@
+{
+    "group-id": "Group ID",
+    "pool-name": "Storage Pool Name",
+    "size": "Size",
+    "erasure": "Erasure"
+}

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

@@ -0,0 +1 @@
+export declare const groupInfoKeyset: (key: "size" | "group-id" | "erasure" | "pool-name", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

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

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,21 +10,26 @@ 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] });
 const prepareWidgetData = (data, options = {}) => {
-    const { dataType } = options;
+    const { dataType, scaleRange } = 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 {
@@ -41,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,
@@ -51,6 +56,8 @@ const prepareWidgetData = (data, options = {}) => {
                 y: {
                     type: 'linear',
                     range: 'nice',
+                    min: (scaleRange === null || scaleRange === void 0 ? void 0 : scaleRange.min) || 0,
+                    max: scaleRange === null || scaleRange === void 0 ? void 0 : scaleRange.max,
                 },
             },
             axes: {
@@ -128,7 +135,7 @@ export const MetricChart = ({ database, title, metrics, timeFrame = '1h', autore
             }
             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/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/types.d.ts

@@ -1,4 +1,8 @@
-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';
+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;
@@ -12,9 +16,14 @@ export interface PreparedMetricsData {
     metrics: PreparedMetric[];
 }
 export type ChartValue = number | string | null;
-export type ChartDataType = 'ms' | 'size';
+export type ChartDataType = 'ms' | 'size' | 'percent';
 export interface ChartOptions {
     dataType?: ChartDataType;
+    scaleRange?: {
+        min?: number;
+        max?: number;
+    };
 }
 export type ChartDataStatus = 'loading' | 'success' | 'error';
 export type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;
+export {};

package/dist/components/MonacoEditor/MonacoEditor.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MonacoEditor: import("react").ForwardRefExoticComponent<import("react-monaco-editor").MonacoEditorProps & import("react").RefAttributes<typeof import("react-monaco-editor/lib/editor").default>>;

package/dist/components/MonacoEditor/MonacoEditor.js

@@ -0,0 +1,7 @@
+import { lazyComponent } from '../../utils/lazyComponent';
+export const MonacoEditor = lazyComponent(async () => {
+    const Editor = (await import('react-monaco-editor')).default;
+    const { registerLanguages } = await import('../../utils/monaco');
+    registerLanguages();
+    return { Editor };
+}, 'Editor');

package/dist/{containers/Storage → components}/PDiskPopup/PDiskPopup.d.ts

@@ -1,7 +1,7 @@
 import { PopupProps } from '@gravity-ui/uikit';
-import type { NodesMap } from '../../../types/store/nodesList';
-import { InfoViewerItem } from '../../../components/InfoViewer';
-import type { PreparedPDisk } from '../../../utils/disks/types';
+import type { NodesMap } from '../../types/store/nodesList';
+import type { PreparedPDisk } from '../../utils/disks/types';
+import { InfoViewerItem } from '../InfoViewer';
 import './PDiskPopup.scss';
 export declare const preparePDiskData: (data: PreparedPDisk, nodes?: NodesMap) => InfoViewerItem[];
 interface PDiskPopupProps extends PopupProps {

package/dist/{containers/Storage → components}/PDiskPopup/PDiskPopup.js

@@ -3,17 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import cn from 'bem-cn-lite';
 import { Popup } from '@gravity-ui/uikit';
-import { InfoViewer } from '../../../components/InfoViewer';
-import { EFlag } from '../../../types/api/enums';
-import { getPDiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { bytesToGB } from '../../../utils/utils';
+import { EFlag } from '../../types/api/enums';
+import { getPDiskId } from '../../utils/dataFormatters/dataFormatters';
+import { bytesToGB } from '../../utils/utils';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
+import { InfoViewer } from '../InfoViewer';
 import './PDiskPopup.scss';
 const b = cn('pdisk-storage-popup');
 const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 export const preparePDiskData = (data, nodes) => {
     const { AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device } = data;
     const pdiskData = [
-        { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || '-' },
+        { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || EMPTY_DATA_PLACEHOLDER },
         { label: 'State', value: State || 'not available' },
         { label: 'Type', value: Type || 'unknown' },
     ];

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

@@ -3,6 +3,7 @@ import './PageMeta.scss';
 interface PageMetaProps {
     items: (string | undefined)[];
     className?: string;
+    loading?: boolean;
 }
-export declare function PageMeta({ items, className }: PageMetaProps): JSX.Element;
+export declare function PageMeta({ items, loading, className }: PageMetaProps): JSX.Element;
 export {};

package/dist/components/PageMeta/PageMeta.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@gravity-ui/uikit';
 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') })));
+export function PageMeta({ items, loading, className }) {
+    const renderContent = () => {
+        if (loading) {
+            return _jsx(Skeleton, { className: b('skeleton') });
+        }
+        return items.filter((item) => Boolean(item)).join('\u00a0\u00a0\u00B7\u00a0\u00a0');
+    };
+    return _jsx("div", Object.assign({ className: b(null, className) }, { children: renderContent() }));
 }

package/dist/components/PageMeta/PageMeta.scss

@@ -4,7 +4,16 @@
     display: flex;
     flex-flow: row nowrap;
 
+    height: var(--g-text-body-2-line-height);
+
+    text-wrap: nowrap;
+
     color: var(--g-color-text-primary);
 
     @include body-2-typography();
+
+    &__skeleton {
+        width: 80%;
+        height: 80%;
+    }
 }

package/dist/components/Stack/Stack.scss

@@ -8,6 +8,8 @@
     position: relative;
 
     &__layer {
+        background: var(--g-color-base-background);
+
         transition: transform 0.1s ease-out;
 
         &:first-child {

package/dist/{containers/Storage → components}/VDisk/VDisk.d.ts

@@ -1,5 +1,5 @@
-import type { NodesMap } from '../../../types/store/nodesList';
-import type { PreparedVDisk } from '../../../utils/disks/types';
+import type { NodesMap } from '../../types/store/nodesList';
+import type { PreparedVDisk } from '../../utils/disks/types';
 import './VDisk.scss';
 interface VDiskProps {
     data?: PreparedVDisk;

package/dist/{containers/Storage → components}/VDisk/VDisk.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useRef } from 'react';
 import cn from 'bem-cn-lite';
-import { InternalLink } from '../../../components/InternalLink';
-import routes, { createHref } from '../../../routes';
-import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { isFullVDiskData } from '../../../utils/disks/helpers';
-import { STRUCTURE } from '../../Node/NodePages';
-import { DiskStateProgressBar } from '../DiskStateProgressBar';
-import { VDiskPopup } from '../VDiskPopup';
+import routes, { createHref } from '../../routes';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { isFullVDiskData } from '../../utils/disks/helpers';
+import { STRUCTURE } from '../../containers/Node/NodePages';
+import { VDiskPopup } from '../VDiskPopup/VDiskPopup';
+import { DiskStateProgressBar } from '../DiskStateProgressBar/DiskStateProgressBar';
+import { InternalLink } from '../InternalLink';
 import './VDisk.scss';
-const b = cn('vdisk-storage');
+const b = cn('ydb-vdisk-component');
 export const VDisk = ({ data = {}, nodes, compact }) => {
     var _a, _b;
     const isFullData = isFullVDiskData(data);

package/dist/{containers/Storage → components}/VDisk/VDisk.scss

@@ -1,4 +1,4 @@
-.vdisk-storage {
+.ydb-vdisk-component {
     border-radius: 4px; // to match interactive area with disk shape
 
     &__content {

package/dist/components/VDisk/VDiskWithDonorsStack.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { NodesMap } from '../../types/store/nodesList';
+import type { PreparedVDisk } from '../../utils/disks/types';
+interface VDiskWithDonorsStackProps {
+    data?: PreparedVDisk;
+    nodes?: NodesMap;
+    compact?: boolean;
+    className?: string;
+    stackClassName?: string;
+}
+export declare function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }: VDiskWithDonorsStackProps): JSX.Element;
+export {};

package/dist/components/VDisk/VDiskWithDonorsStack.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { isFullVDiskData } from '../../utils/disks/helpers';
+import { Stack } from '../Stack/Stack';
+import { VDisk } from './VDisk';
+export function VDiskWithDonorsStack({ data, nodes, compact, className, stackClassName, }) {
+    const donors = data === null || data === void 0 ? void 0 : data.Donors;
+    const content = donors && donors.length > 0 ? (_jsxs(Stack, Object.assign({ className: stackClassName }, { children: [_jsx(VDisk, { data: data, nodes: nodes, compact: compact }), donors.map((donor) => {
+                const isFullData = isFullVDiskData(donor);
+                // donor and acceptor are always in the same group
+                return (_jsx(VDisk, { data: donor, nodes: nodes, compact: compact }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
+            })] }))) : (_jsx(VDisk, { data: data, nodes: nodes, compact: compact }));
+    return _jsx("div", Object.assign({ className: className }, { children: content }));
+}

package/dist/components/VDiskInfo/VDiskInfo.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { PreparedVDisk } from '../../utils/disks/types';
+import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
+import './VDiskInfo.scss';
+interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps, 'info'> {
+    data: T;
+    isVDiskPage?: boolean;
+}
+export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, ...infoViewerProps }: VDiskInfoProps<T>): JSX.Element;
+export {};

package/dist/components/VDiskInfo/VDiskInfo.js

@@ -0,0 +1,113 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { valueIsDefined } from '../../utils';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
+import { bytesToSpeed } from '../../utils/utils';
+import { cn } from '../../utils/cn';
+import { createVDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { getVDiskPagePath } from '../../routes';
+import { InfoViewer } from '../InfoViewer';
+import { EntityStatus } from '../EntityStatus/EntityStatus';
+import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
+import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
+import { vDiskInfoKeyset } from './i18n';
+import './VDiskInfo.scss';
+const b = cn('ydb-vdisk-info');
+// eslint-disable-next-line complexity
+export function VDiskInfo(_a) {
+    var _b, _c, _d, _e;
+    var { data, isVDiskPage = false } = _a, infoViewerProps = __rest(_a, ["data", "isVDiskPage"]);
+    const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data;
+    const vdiskInfo = [];
+    if (valueIsDefined(VDiskSlotId)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId });
+    }
+    if (valueIsDefined(StoragePoolName)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('pool-name'), value: StoragePoolName });
+    }
+    if (valueIsDefined(VDiskState)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('state-status'),
+            value: VDiskState,
+        });
+    }
+    if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('size'),
+            value: (_jsx(ProgressViewer, { value: AllocatedSize, capacity: Number(AllocatedSize) + Number(AvailableSize), formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+        });
+    }
+    if (valueIsDefined(Kind)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('kind'), value: Kind });
+    }
+    if (valueIsDefined(Guid)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('guid'), value: Guid });
+    }
+    if (valueIsDefined(IncarnationGuid)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid });
+    }
+    if (valueIsDefined(InstanceGuid)) {
+        vdiskInfo.push({ label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid });
+    }
+    if (valueIsDefined(Replicated)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('replication-status'),
+            value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
+        });
+    }
+    if (valueIsDefined(DiskSpace)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('space-status'),
+            value: _jsx(EntityStatus, { status: DiskSpace }),
+        });
+    }
+    if (valueIsDefined((_b = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _b === void 0 ? void 0 : _b.Flag)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('fresh-rank-satisfaction'),
+            value: _jsx(EntityStatus, { status: (_c = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _c === void 0 ? void 0 : _c.Flag }),
+        });
+    }
+    if (valueIsDefined((_d = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _d === void 0 ? void 0 : _d.Flag)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('level-rank-satisfaction'),
+            value: _jsx(EntityStatus, { status: (_e = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _e === void 0 ? void 0 : _e.Flag }),
+        });
+    }
+    if (valueIsDefined(FrontQueues)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('front-queues'),
+            value: _jsx(EntityStatus, { status: FrontQueues }),
+        });
+    }
+    if (valueIsDefined(HasUnreadableBlobs)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('has-unreadable-blobs'),
+            value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
+        });
+    }
+    if (valueIsDefined(ReadThroughput)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('read-throughput'),
+            value: bytesToSpeed(ReadThroughput),
+        });
+    }
+    if (valueIsDefined(WriteThroughput)) {
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('write-throughput'),
+            value: bytesToSpeed(WriteThroughput),
+        });
+    }
+    if (valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId)) {
+        const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
+        const vDiskInternalViewerPath = createVDiskDeveloperUILink({
+            nodeId: NodeId,
+            pDiskId: PDiskId,
+            vDiskSlotId: VDiskSlotId,
+        });
+        vdiskInfo.push({
+            label: vDiskInfoKeyset('links'),
+            value: (_jsxs("span", Object.assign({ className: b('links') }, { children: [!isVDiskPage && (_jsx(LinkWithIcon, { title: vDiskInfoKeyset('vdisk-page'), url: vDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: vDiskInfoKeyset('developer-ui'), url: vDiskInternalViewerPath })] }))),
+        });
+    }
+    return _jsx(InfoViewer, Object.assign({ info: vdiskInfo }, infoViewerProps));
+}

package/dist/components/VDiskInfo/VDiskInfo.scss

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

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

@@ -0,0 +1,23 @@
+{
+    "slot-id": "VDisk Slot Id",
+    "pool-name": "Storage Pool Name",
+    "kind": "Kind",
+    "guid": "GUID",
+    "incarnation-guid": "Incarnation GUID",
+    "instance-guid": "Instance GUID",
+    "replication-status": "Replicated",
+    "state-status": "VDisk State",
+    "space-status": "Disk Space",
+    "fresh-rank-satisfaction": "Fresh Rank Satisfaction",
+    "level-rank-satisfaction": "Level Rank Satisfaction",
+    "front-queues": "Front Queues",
+    "has-unreadable-blobs": "Has Unreadable Blobs",
+    "size": "Size",
+    "read-throughput": "Read Throughput",
+    "write-throughput": "Write Throughput",
+    "links": "Links",
+    "vdisk-page": "VDisk Page",
+    "developer-ui": "Developer UI",
+    "yes": "Yes",
+    "no": "No"
+}

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

@@ -0,0 +1 @@
+export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "guid" | "developer-ui" | "slot-id" | "pool-name" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

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

package/dist/{containers/Storage → components}/VDiskPopup/VDiskPopup.d.ts

@@ -1,7 +1,7 @@
 import { PopupProps } from '@gravity-ui/uikit';
-import type { NodesMap } from '../../../types/store/nodesList';
-import type { TVDiskStateInfo } from '../../../types/api/vdisk';
-import type { UnavailableDonor } from '../utils/types';
+import type { NodesMap } from '../../types/store/nodesList';
+import type { TVDiskStateInfo } from '../../types/api/vdisk';
+import type { UnavailableDonor } from '../../utils/disks/types';
 import './VDiskPopup.scss';
 interface VDiskPopupProps extends PopupProps {
     data: TVDiskStateInfo | UnavailableDonor;