ydb-embedded-ui 5.2.1 → 5.4.0

package/dist/containers/PDisk/PDiskGroups.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
+import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { getPDiskStorageColumns } from '../Storage/StorageGroups/getStorageGroupsColumns';
+import { pdiskPageCn } from './shared';
+import { pDiskPageKeyset } from './i18n';
+export function PDiskGroups({ data, nodesMap, loading }) {
+    const pDiskStorageColumns = useMemo(() => {
+        return getPDiskStorageColumns(nodesMap);
+    }, [nodesMap]);
+    const renderContent = () => {
+        if (loading) {
+            return _jsx(TableSkeleton, {});
+        }
+        return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: pdiskPageCn('groups-title') }, { children: pDiskPageKeyset('groups') })), _jsx("div", { children: renderContent() })] }));
+}

package/dist/containers/PDisk/i18n/en.json

@@ -0,0 +1,8 @@
+{
+    "fqdn": "FQDN",
+    "pdisk": "PDisk",
+    "groups": "Groups",
+    "node": "Node",
+    "restart-pdisk-button": "Restart PDisk",
+    "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?"
+}

package/dist/containers/PDisk/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const pDiskPageKeyset: (key: "groups" | "node" | "pdisk" | "fqdn" | "restart-pdisk-button" | "restart-pdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/containers/PDisk/i18n/index.js

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

package/dist/containers/PDisk/shared.d.ts

@@ -0,0 +1,10 @@
+export declare const pdiskPageCn: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};

package/dist/containers/PDisk/shared.js

@@ -0,0 +1,2 @@
+import { cn } from '../../utils/cn';
+export const pdiskPageCn = cn('ydb-pdisk-page');

package/dist/containers/ReduxTooltip/ReduxTooltip.d.ts

@@ -1,4 +1,4 @@
-declare var _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, import("react-redux").Omit<PropTypes.InferProps<{
+declare const _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, import("react-redux").Omit<PropTypes.InferProps<{
     className: PropTypes.Requireable<string>;
     toolTipVisible: PropTypes.Requireable<boolean>;
     currentHoveredRef: PropTypes.Requireable<object>;

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import { hideTooltip } from '../../store/reducers/tooltip';
+import { tooltipTemplates } from '../../utils/tooltip';
 import './ReduxTooltip.scss';
 const propTypes = {
     className: PropTypes.string,
@@ -44,13 +45,13 @@ function ReduxTooltip(props) {
             : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData) })));
 }
 const mapStateToProps = (state) => {
-    const { toolTipVisible, currentHoveredRef, data, template, additionalData, positions } = state.tooltip;
+    const { toolTipVisible, currentHoveredRef, data, templateType, additionalData, positions } = state.tooltip;
     const { popupClassName } = additionalData || {};
     return {
         toolTipVisible,
         currentHoveredRef,
         data,
-        template,
+        template: tooltipTemplates[templateType],
         additionalData,
         positions,
         popupClassName,

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.d.ts

@@ -1,16 +1,8 @@
 /// <reference types="react" />
 import './DiskStateProgressBar.scss';
-export declare enum EDiskStateSeverity {
-    Grey = 0,
-    Green = 1,
-    Blue = 2,
-    Yellow = 3,
-    Orange = 4,
-    Red = 5
-}
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
-    severity?: EDiskStateSeverity;
+    severity?: number;
     compact?: boolean;
 }
 export declare function DiskStateProgressBar({ diskAllocatedPercent, severity, compact, }: DiskStateProgressBarProps): JSX.Element;

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.js

@@ -3,19 +3,9 @@ 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 './DiskStateProgressBar.scss';
 const b = cn('storage-disk-progress-bar');
-// numeric enum to allow ordinal comparison
-export var EDiskStateSeverity;
-(function (EDiskStateSeverity) {
-    EDiskStateSeverity[EDiskStateSeverity["Grey"] = 0] = "Grey";
-    EDiskStateSeverity[EDiskStateSeverity["Green"] = 1] = "Green";
-    EDiskStateSeverity[EDiskStateSeverity["Blue"] = 2] = "Blue";
-    EDiskStateSeverity[EDiskStateSeverity["Yellow"] = 3] = "Yellow";
-    EDiskStateSeverity[EDiskStateSeverity["Orange"] = 4] = "Orange";
-    EDiskStateSeverity[EDiskStateSeverity["Red"] = 5] = "Red";
-})(EDiskStateSeverity || (EDiskStateSeverity = {}));
-const severityToColor = Object.entries(EDiskStateSeverity).reduce((acc, [color, severity]) => (Object.assign(Object.assign({}, acc), { [severity]: color })), {});
 export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, compact, }) {
     const [inverted] = useSetting(INVERTED_DISKS_KEY);
     const renderAllocatedPercent = () => {
@@ -27,7 +17,7 @@ export function DiskStateProgressBar({ diskAllocatedPercent = -1, severity, comp
                     } }), _jsx("div", Object.assign({ className: b('filled-title') }, { children: `${Math.round(diskAllocatedPercent)}%` }))] })));
     };
     const mods = { inverted, compact };
-    const color = severity !== undefined && severityToColor[severity];
+    const color = severity !== undefined && getSeverityColor(severity);
     if (color) {
         mods[color.toLocaleLowerCase()] = true;
     }

package/dist/containers/Storage/PDisk/PDisk.d.ts

@@ -1,10 +1,10 @@
 import type { TVDiskStateInfo } from '../../../types/api/vdisk';
-import { TPDiskStateInfo } from '../../../types/api/pdisk';
+import type { PreparedPDisk } from '../../../utils/disks/types';
 import './PDisk.scss';
 interface PDiskProps {
     nodeId: number;
-    data?: TPDiskStateInfo;
+    data?: PreparedPDisk;
     vDisks?: TVDiskStateInfo[];
 }
-export declare const PDisk: ({ nodeId, data: rawData, vDisks }: PDiskProps) => JSX.Element;
+export declare const PDisk: ({ nodeId, data, vDisks }: PDiskProps) => JSX.Element;
 export {};

package/dist/containers/Storage/PDisk/PDisk.js

@@ -1,67 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useState, useRef } from 'react';
 import cn from 'bem-cn-lite';
 import { InternalLink } from '../../../components/InternalLink';
 import { Stack } from '../../../components/Stack/Stack';
 import routes, { createHref } from '../../../routes';
-import { TPDiskState } from '../../../types/api/pdisk';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { getPDiskType } from '../../../utils/pdisk';
-import { isFullVDiskData } from '../../../utils/storage';
+import { isFullVDiskData } from '../../../utils/disks/helpers';
 import { STRUCTURE } from '../../Node/NodePages';
-import { DiskStateProgressBar, EDiskStateSeverity } from '../DiskStateProgressBar';
+import { DiskStateProgressBar } from '../DiskStateProgressBar';
 import { PDiskPopup } from '../PDiskPopup';
 import { VDisk } from '../VDisk';
-import { getUsageSeverityForPDisk, NOT_AVAILABLE_SEVERITY } from '../utils';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
-const stateSeverity = {
-    [TPDiskState.Initial]: EDiskStateSeverity.Grey,
-    [TPDiskState.Normal]: EDiskStateSeverity.Green,
-    [TPDiskState.InitialFormatRead]: EDiskStateSeverity.Yellow,
-    [TPDiskState.InitialSysLogRead]: EDiskStateSeverity.Yellow,
-    [TPDiskState.InitialCommonLogRead]: EDiskStateSeverity.Yellow,
-    [TPDiskState.InitialFormatReadError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialSysLogReadError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialSysLogParseError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialCommonLogReadError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialCommonLogParseError]: EDiskStateSeverity.Red,
-    [TPDiskState.CommonLoggerInitError]: EDiskStateSeverity.Red,
-    [TPDiskState.OpenFileError]: EDiskStateSeverity.Red,
-    [TPDiskState.ChunkQuotaError]: EDiskStateSeverity.Red,
-    [TPDiskState.DeviceIoError]: EDiskStateSeverity.Red,
-};
-const isSeverityKey = (key) => key !== undefined && key in stateSeverity;
-const getStateSeverity = (pDiskState) => {
-    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
-};
-export const PDisk = ({ nodeId, data: rawData = {}, vDisks }) => {
-    // NodeId in data is required for the popup
-    const data = useMemo(() => (Object.assign(Object.assign({}, rawData), { NodeId: nodeId })), [rawData, nodeId]);
-    const [severity, setSeverity] = useState(getStateSeverity(data.State));
+export const PDisk = ({ nodeId, data = {}, vDisks }) => {
     const [isPopupVisible, setIsPopupVisible] = useState(false);
     const anchor = useRef(null);
-    const pdiskAllocatedPercent = useMemo(() => {
-        const { AvailableSize, TotalSize } = data;
-        if (!AvailableSize || !TotalSize) {
-            return undefined;
-        }
-        return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
-            ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
-            : undefined;
-    }, [data]);
-    useEffect(() => {
-        const newStateSeverity = getStateSeverity(data.State);
-        const newSpaceSeverityFlag = getUsageSeverityForPDisk(pdiskAllocatedPercent || 0);
-        let newSeverity;
-        if (newStateSeverity === NOT_AVAILABLE_SEVERITY || !newSpaceSeverityFlag) {
-            newSeverity = newStateSeverity;
-        }
-        else {
-            newSeverity = Math.max(newStateSeverity, EDiskStateSeverity[newSpaceSeverityFlag]);
-        }
-        setSeverity(newSeverity);
-    }, [data.State, pdiskAllocatedPercent]);
     const showPopup = () => {
         setIsPopupVisible(true);
     };
@@ -80,9 +33,9 @@ export const PDisk = ({ nodeId, data: rawData = {}, vDisks }) => {
                         flexGrow: Number(vdisk.AllocatedSize) || 1,
                     } }, { children: donors && donors.length ? (_jsxs(Stack, Object.assign({ className: b('donors-stack') }, { children: [_jsx(VDisk, { data: vdisk, compact: true }), donors.map((donor) => {
                                 const isFullData = isFullVDiskData(donor);
-                                return (_jsx(VDisk, { compact: true, data: isFullData ? donor : Object.assign(Object.assign({}, donor), { DonorMode: true }) }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
+                                return (_jsx(VDisk, { compact: true, data: donor }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
                             })] }), stringifyVdiskId(vdisk.VDiskId))) : (_jsx(VDisk, { data: vdisk, compact: true })) }), stringifyVdiskId(vdisk.VDiskId)));
             }) })));
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", Object.assign({ className: b(), ref: anchor }, { children: [renderVDisks(), _jsxs(InternalLink, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: pdiskAllocatedPercent, severity: severity }), _jsx("div", Object.assign({ className: b('media-type') }, { children: getPDiskType(data) }))] }))] }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", Object.assign({ className: b(), ref: anchor }, { children: [renderVDisks(), _jsxs(InternalLink, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", Object.assign({ className: b('media-type') }, { children: data.Type }))] }))] }))] }));
 };

package/dist/containers/Storage/PDiskPopup/PDiskPopup.d.ts

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

package/dist/containers/Storage/PDiskPopup/PDiskPopup.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 { useMemo } from 'react';
 import cn from 'bem-cn-lite';
@@ -16,17 +6,16 @@ import { Popup } from '@gravity-ui/uikit';
 import { InfoViewer } from '../../../components/InfoViewer';
 import { EFlag } from '../../../types/api/enums';
 import { getPDiskId } from '../../../utils/dataFormatters/dataFormatters';
-import { getPDiskType } from '../../../utils/pdisk';
 import { bytesToGB } from '../../../utils/utils';
 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, Device } = data;
+    const { AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device } = data;
     const pdiskData = [
         { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || '-' },
         { label: 'State', value: State || 'not available' },
-        { label: 'Type', value: getPDiskType(data) || 'unknown' },
+        { label: 'Type', value: Type || 'unknown' },
     ];
     if (NodeId) {
         pdiskData.push({ label: 'Node Id', value: NodeId });

package/dist/containers/Storage/Storage.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 import { AccessDenied } from '../../components/Errors/403';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { ResponseError } from '../../components/Errors/ResponseError';
@@ -8,7 +7,7 @@ import { setInitialState, setVisibleEntities, setStorageTextFilter, setUsageFilt
 import { selectFilteredGroups, selectFilteredNodes, selectEntitiesCount, selectUsageFilterOptions, selectNodesSortParams, selectGroupsSortParams, } from '../../store/reducers/storage/selectors';
 import { VISIBLE_ENTITIES, STORAGE_TYPES } from '../../store/reducers/storage/constants';
 import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
-import { useAutofetcher, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
+import { useAutofetcher, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, useTypedDispatch, } from '../../utils/hooks';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { StorageGroups } from './StorageGroups/StorageGroups';
@@ -17,7 +16,7 @@ import { StorageControls } from './StorageControls/StorageControls';
 import { b } from './shared';
 import './Storage.scss';
 export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const { autorefresh } = useTypedSelector((state) => state.schema);
     const { loading, wasLoaded, error, type, visible: visibleEntities, filter, usageFilter, nodesUptimeFilter, } = useTypedSelector((state) => state.storage);
     const storageNodes = useTypedSelector(selectFilteredNodes);

package/dist/containers/Storage/StorageGroups/getGroups.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 { prepareStorageGroupsResponse } from '../../../store/reducers/storage/utils';
 import { EVersion } from '../../../types/api/storage';
 const getConcurrentId = (limit, offset) => {

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.d.ts

@@ -3,7 +3,7 @@ import type { Column as VirtualTableColumn } from '../../../components/VirtualTa
 import type { NodesMap } from '../../../types/store/nodesList';
 import type { PreparedStorageGroup, VisibleEntities } from '../../../store/reducers/storage/types';
 import './StorageGroups.scss';
-declare type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
+type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
 export declare const GROUPS_COLUMNS_IDS: {
     readonly PoolName: "PoolName";
     readonly Kind: "Kind";
@@ -19,6 +19,7 @@ export declare const GROUPS_COLUMNS_IDS: {
     readonly Degraded: "Degraded";
 };
 export declare const getStorageTopGroupsColumns: () => StorageGroupsColumn[];
+export declare const getPDiskStorageColumns: (nodes?: NodesMap) => StorageGroupsColumn[];
 export declare const getPreparedStorageGroupsColumns: (nodesMap: NodesMap | undefined, visibleEntities: VisibleEntities) => {
     sortable: boolean;
     name: string;

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import cn from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
 import { Icon, Label, Popover, PopoverBehavior } from '@gravity-ui/uikit';
+import { EFlag } from '../../../types/api/enums';
 import shieldIcon from '../../../assets/icons/shield.svg';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
-import { getUsage, isFullVDiskData, isSortableStorageProperty } from '../../../utils/storage';
+import { isSortableStorageProperty } from '../../../utils/storage';
+import { isFullVDiskData } from '../../../utils/disks/helpers';
 import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { Stack } from '../../../components/Stack/Stack';
 import { CellWithPopover } from '../../../components/CellWithPopover/CellWithPopover';
 import { UsageLabel } from '../../../components/UsageLabel/UsageLabel';
@@ -75,7 +77,7 @@ const usageColumn = {
         return row.Limit ? (_jsx(UsageLabel, { value: row.Usage, theme: getUsageSeverityForStorageGroup(row.Usage) })) : ('-');
     },
     // without a limit exclude usage from sort to display at the bottom
-    sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
+    sortAccessor: (row) => (row.Limit ? row.Usage : null),
     align: DataTable.LEFT,
     sortable: false,
 };
@@ -116,15 +118,15 @@ const usedSpaceFlagColumn = {
     width: 110,
     render: ({ row }) => {
         const value = row.UsedSpaceFlag;
-        let color = 'Red';
+        let color = EFlag.Red;
         if (value < 100) {
-            color = 'Green';
+            color = EFlag.Green;
         }
         else if (value < 10000) {
-            color = 'Yellow';
+            color = EFlag.Yellow;
         }
         else if (value < 1000000) {
-            color = 'Orange';
+            color = EFlag.Orange;
         }
         return _jsx(EntityStatus, { status: color });
     },
@@ -158,7 +160,7 @@ const getVdiscksColumn = (nodes) => ({
                 const donors = vDisk.Donors;
                 return donors && donors.length > 0 ? (_jsxs(Stack, Object.assign({ className: b('vdisks-item') }, { children: [_jsx(VDisk, { data: vDisk, nodes: nodes }), donors.map((donor) => {
                             const isFullData = isFullVDiskData(donor);
-                            return (_jsx(VDisk, { data: isFullData ? donor : Object.assign(Object.assign({}, donor), { DonorMode: true }), 
+                            return (_jsx(VDisk, { data: donor, 
                                 // donor and acceptor are always in the same group
                                 nodes: nodes }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
                         })] }), stringifyVdiskId(vDisk.VDiskId))) : (_jsx("div", Object.assign({ className: b('vdisks-item') }, { children: _jsx(VDisk, { data: vDisk, nodes: nodes }) }), stringifyVdiskId(vDisk.VDiskId)));
@@ -170,6 +172,18 @@ const getVdiscksColumn = (nodes) => ({
 export const getStorageTopGroupsColumns = () => {
     return [groupIdColumn, kindColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
 };
+export const getPDiskStorageColumns = (nodes) => {
+    return [
+        poolNameColumn,
+        kindColumn,
+        erasureColumn,
+        degradedColumn,
+        groupIdColumn,
+        usageColumn,
+        usedColumn,
+        getVdiscksColumn(nodes),
+    ];
+};
 const getStorageGroupsColumns = (nodes) => {
     return [
         poolNameColumn,

package/dist/containers/Storage/StorageNodes/getNodes.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 { prepareStorageNodesResponse } from '../../../store/reducers/storage/utils';
 const getConcurrentId = (limit, offset) => {
     return `getStorageNodes|offset${offset}|limit${limit}`;

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.js

@@ -72,7 +72,7 @@ const getStorageNodesColumns = (additionalNodesProps) => {
                 var _a;
                 return (_jsx("div", Object.assign({ className: b('pdisks-wrapper') }, { children: (_a = row.PDisks) === null || _a === void 0 ? void 0 : _a.map((pDisk) => {
                         var _a;
-                        const vDisks = (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId).map((data) => (Object.assign(Object.assign({}, data), { NodeId: row.NodeId })));
+                        const vDisks = (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
                         return (_jsx("div", Object.assign({ className: b('pdisks-item') }, { children: _jsx(PDisk, { data: pDisk, nodeId: row.NodeId, vDisks: vDisks }) }), pDisk.PDiskId));
                     }) })));
             },

package/dist/containers/Storage/StorageWrapper.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 { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../../utils/constants';
 import { useSetting } from '../../utils/hooks';

package/dist/containers/Storage/UsageFilter/UsageFilter.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import cn from 'bem-cn-lite';
 import { Select } from '@gravity-ui/uikit';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { getUsageSeverityForEntityStatus } from '../utils';
 import i18n from './i18n';
 import './UsageFilter.scss';

package/dist/containers/Storage/VDisk/VDisk.d.ts

@@ -1,9 +1,8 @@
 import type { NodesMap } from '../../../types/store/nodesList';
-import { TVDiskStateInfo } from '../../../types/api/vdisk';
-import type { UnavailableDonor } from '../utils/types';
+import type { PreparedVDisk } from '../../../utils/disks/types';
 import './VDisk.scss';
 interface VDiskProps {
-    data?: TVDiskStateInfo | UnavailableDonor;
+    data?: PreparedVDisk;
     nodes?: NodesMap;
     compact?: boolean;
 }

package/dist/containers/Storage/VDisk/VDisk.js

@@ -1,88 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+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/storage';
+import { isFullVDiskData } from '../../../utils/disks/helpers';
 import { STRUCTURE } from '../../Node/NodePages';
-import { DiskStateProgressBar, EDiskStateSeverity } from '../DiskStateProgressBar';
+import { DiskStateProgressBar } from '../DiskStateProgressBar';
 import { VDiskPopup } from '../VDiskPopup';
-import { NOT_AVAILABLE_SEVERITY } from '../utils';
 import './VDisk.scss';
 const b = cn('vdisk-storage');
-const stateSeverity = {
-    Initial: EDiskStateSeverity.Yellow,
-    LocalRecoveryError: EDiskStateSeverity.Red,
-    SyncGuidRecoveryError: EDiskStateSeverity.Red,
-    SyncGuidRecovery: EDiskStateSeverity.Yellow,
-    PDiskError: EDiskStateSeverity.Red,
-    OK: EDiskStateSeverity.Green,
-};
-const getStateSeverity = (vDiskState) => {
-    var _a;
-    if (!vDiskState) {
-        return NOT_AVAILABLE_SEVERITY;
-    }
-    return (_a = stateSeverity[vDiskState]) !== null && _a !== void 0 ? _a : NOT_AVAILABLE_SEVERITY;
-};
-const getColorSeverity = (color) => {
-    var _a;
-    if (!color) {
-        return EDiskStateSeverity.Grey;
-    }
-    return (_a = EDiskStateSeverity[color]) !== null && _a !== void 0 ? _a : EDiskStateSeverity.Grey;
-};
 export const VDisk = ({ data = {}, nodes, compact }) => {
     var _a, _b;
     const isFullData = isFullVDiskData(data);
-    const [severity, setSeverity] = useState(getStateSeverity(isFullData ? data.VDiskState : undefined));
     const [isPopupVisible, setIsPopupVisible] = useState(false);
     const anchor = useRef(null);
-    // determine disk status severity
-    useEffect(() => {
-        if (!isFullData) {
-            setSeverity(NOT_AVAILABLE_SEVERITY);
-            return;
-        }
-        const { DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode } = data;
-        // if the disk is not available, this determines its status severity regardless of other features
-        if (!VDiskState) {
-            setSeverity(NOT_AVAILABLE_SEVERITY);
-            return;
-        }
-        const DiskSpaceSeverity = getColorSeverity(DiskSpace);
-        const VDiskSpaceSeverity = getStateSeverity(VDiskState);
-        const FrontQueuesSeverity = Math.min(EDiskStateSeverity.Orange, getColorSeverity(FrontQueues));
-        let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
-        // donors are always in the not replicated state since they are leftovers
-        // painting them blue is useless
-        if (!Replicated && !DonorMode && newSeverity === EDiskStateSeverity.Green) {
-            newSeverity = EDiskStateSeverity.Blue;
-        }
-        setSeverity(newSeverity);
-    }, [data, isFullData]);
     const showPopup = () => {
         setIsPopupVisible(true);
     };
     const hidePopup = () => {
         setIsPopupVisible(false);
     };
-    const vdiskAllocatedPercent = useMemo(() => {
-        if (!isFullData) {
-            return undefined;
-        }
-        const { AvailableSize, AllocatedSize, PDisk } = data;
-        const available = AvailableSize ? AvailableSize : PDisk === null || PDisk === void 0 ? void 0 : PDisk.AvailableSize;
-        if (!available) {
-            return undefined;
-        }
-        return isNaN(Number(AllocatedSize))
-            ? undefined
-            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
-    }, [data, isFullData]);
     return (_jsxs(React.Fragment, { children: [_jsx(VDiskPopup, { data: data, nodes: nodes, anchorRef: anchor, open: isPopupVisible }), _jsx("div", Object.assign({ className: b(), ref: anchor, onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: data.NodeId && isFullData ? (_jsx(InternalLink, Object.assign({ to: createHref(routes.node, { id: data.NodeId, activeTab: STRUCTURE }, {
                         pdiskId: (_a = data.PDiskId) !== null && _a !== void 0 ? _a : (_b = data.PDisk) === null || _b === void 0 ? void 0 : _b.PDiskId,
                         vdiskId: stringifyVdiskId(data.VDiskId),
-                    }), className: b('content') }, { children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: vdiskAllocatedPercent, severity: severity, compact: compact }) }))) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: vdiskAllocatedPercent, severity: severity, compact: compact })) }))] }));
+                    }), className: b('content') }, { children: _jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact }) }))) : (_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity, compact: compact })) }))] }));
 };

package/dist/containers/Storage/VDiskPopup/VDiskPopup.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, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import cn from 'bem-cn-lite';
@@ -17,7 +7,7 @@ import { InfoViewer } from '../../../components/InfoViewer';
 import { EFlag } from '../../../types/api/enums';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
-import { isFullVDiskData } from '../../../utils/storage';
+import { isFullVDiskData } from '../../../utils/disks/helpers';
 import { preparePDiskData } from '../PDiskPopup';
 import './VDiskPopup.scss';
 const b = cn('vdisk-storage-popup');