ydb-embedded-ui 5.4.0 → 5.5.0

package/dist/containers/App/App.js

@@ -5,12 +5,10 @@ import ContentWrapper, { Content } from './Content';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import AppIcons from '../AppIcons/AppIcons';
 import { Navigation } from '../AsideNavigation/Navigation';
-import { registerLanguages } from '../../utils/monaco';
 import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
 import { settings } from '../UserSettings/settings';
 import { Providers } from './Providers';
 import './App.scss';
-registerLanguages();
 function App({ store, history, singleClusterMode, children, userSettings = settings }) {
     return (_jsxs(Providers, Object.assign({ store: store, history: history }, { children: [_jsx(Helmet, { defaultTitle: "YDB Monitoring", titleTemplate: "%s \u2014 YDB Monitoring" }), _jsx(ContentWrapper, { children: _jsx(Navigation, Object.assign({ userSettings: userSettings }, { children: _jsxs(ErrorBoundary, { children: [_jsx(Content, Object.assign({ singleClusterMode: singleClusterMode }, { children: children })), _jsx("div", { id: "fullscreen-root" })] }) })) }), _jsx(ReduxTooltip, {}), _jsx(AppIcons, {})] })));
 }

package/dist/containers/App/App.scss

@@ -4,6 +4,9 @@
 * {
     // FIXME: this is an overkill, potentially could break external components, needs refactoring
     box-sizing: border-box;
+
+    // Make all digits in the app monospace
+    font-variant-numeric: tabular-nums;
 }
 
 .yc-select-popup__tick-icon {

package/dist/containers/App/Content.js

@@ -8,16 +8,18 @@ import { Clusters } from '../Clusters/Clusters';
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
 import Node from '../Node/Node';
-import { PDisk } from '../PDisk/PDisk';
+import { PDiskPage } from '../PDiskPage/PDiskPage';
+import { VDiskPage } from '../VDiskPage/VDiskPage';
 import { Tablet } from '../Tablet';
 import TabletsFilters from '../TabletsFilters/TabletsFilters';
 import Header from '../Header/Header';
 import Authentication from '../Authentication/Authentication';
 import { getUser } from '../../store/reducers/authentication/authentication';
+import { getNodesList } from '../../store/reducers/nodesList';
 import { getClusterPath } from '../Cluster/utils';
 import { useSlots } from '../../components/slots';
 import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { ClusterSlot, ClustersSlot, NodeSlot, PDiskSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, } from './appSlots';
+import { ClusterSlot, ClustersSlot, NodeSlot, PDiskPageSlot, VDiskPageSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, } from './appSlots';
 import i18n from './i18n';
 import './App.scss';
 const b = cn('app');
@@ -39,8 +41,13 @@ const routesSlots = [
     },
     {
         path: routes.pDisk,
-        slot: PDiskSlot,
-        component: PDisk,
+        slot: PDiskPageSlot,
+        component: PDiskPage,
+    },
+    {
+        path: routes.vDisk,
+        slot: VDiskPageSlot,
+        component: VDiskPage,
     },
     {
         path: routes.tablet,
@@ -88,7 +95,7 @@ export function Content(props) {
                     exact: true,
                     component: Clusters,
                     slot: ClustersSlot,
-                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsxs(Route, { children: [_jsx(GetUser, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
+                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsxs(Route, { children: [_jsx(GetUser, {}), _jsx(GetNodesList, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
                                 return renderRouteSlot(slots, route);
                             }), _jsx(Redirect, Object.assign({}, redirectProps))] })] }, "single-cluster")] }));
 }
@@ -105,6 +112,13 @@ function GetUser() {
     }, [dispatch, isAuthenticated, isInternalUser]);
     return null;
 }
+function GetNodesList() {
+    const dispatch = useTypedDispatch();
+    React.useEffect(() => {
+        dispatch(getNodesList());
+    }, [dispatch]);
+    return null;
+}
 function ContentWrapper(props) {
     const { singleClusterMode, isAuthenticated } = props;
     return (_jsxs(Switch, { children: [_jsx(Route, Object.assign({ path: routes.auth }, { children: _jsx(Authentication, { closable: true }) })), _jsx(Route, { children: _jsx("div", Object.assign({ className: b({ embedded: singleClusterMode }) }, { children: isAuthenticated ? props.children : _jsx(Authentication, {}) })) })] }));

package/dist/containers/App/appSlots.d.ts

@@ -2,7 +2,8 @@ import type { RedirectProps, RouteComponentProps } from 'react-router';
 import type Cluster from '../Cluster/Cluster';
 import type { Clusters } from '../Clusters/Clusters';
 import type Node from '../Node/Node';
-import type { PDisk } from '../PDisk/PDisk';
+import type { PDiskPage } from '../PDiskPage/PDiskPage';
+import type { VDiskPage } from '../VDiskPage/VDiskPage';
 import type { Tablet } from '../Tablet';
 import type TabletsFilters from '../TabletsFilters/TabletsFilters';
 import type Tenant from '../Tenant/Tenant';
@@ -26,9 +27,14 @@ export declare const NodeSlot: import("../../components/slots/types").SlotCompon
         component: typeof Node;
     } & RouteComponentProps) => React.ReactNode);
 }, never>;
-export declare const PDiskSlot: import("../../components/slots/types").SlotComponent<{
+export declare const PDiskPageSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
-        component: typeof PDisk;
+        component: typeof PDiskPage;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
+export declare const VDiskPageSlot: import("../../components/slots/types").SlotComponent<{
+    children: import("react").ReactNode | ((props: {
+        component: typeof VDiskPage;
     } & RouteComponentProps) => React.ReactNode);
 }, never>;
 export declare const TabletSlot: import("../../components/slots/types").SlotComponent<{

package/dist/containers/App/appSlots.js

@@ -3,7 +3,8 @@ export const ClustersSlot = createSlot('clusters');
 export const ClusterSlot = createSlot('cluster');
 export const TenantSlot = createSlot('tenant');
 export const NodeSlot = createSlot('node');
-export const PDiskSlot = createSlot('pDisk');
+export const PDiskPageSlot = createSlot('pDisk');
+export const VDiskPageSlot = createSlot('vDisk');
 export const TabletSlot = createSlot('tablet');
 export const TabletsFiltersSlot = createSlot('tabletsFilters');
 export const RoutesSlot = createSlot('routes');

package/dist/containers/Header/breadcrumbs.js

@@ -68,6 +68,15 @@ const getPDiskBreadcrumbs = (options, query = {}) => {
     });
     return breadcrumbs;
 };
+const getVDiskBreadcrumbs = (options, query = {}) => {
+    const { vDiskSlotId } = options;
+    const breadcrumbs = getPDiskBreadcrumbs(options, query);
+    const text = vDiskSlotId
+        ? `${headerKeyset('breadcrumbs.vDisk')} ${vDiskSlotId}`
+        : headerKeyset('breadcrumbs.vDisk');
+    breadcrumbs.push({ text });
+    return breadcrumbs;
+};
 const getTabletsBreadcrubms = (options, query = {}) => {
     const { tenantName, nodeIds } = options;
     const newQuery = Object.assign(Object.assign({}, query), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets });
@@ -106,6 +115,9 @@ export const getBreadcrumbs = (page, options, rawBreadcrumbs = [], query = {}) =
         case 'pDisk': {
             return [...rawBreadcrumbs, ...getPDiskBreadcrumbs(options, query)];
         }
+        case 'vDisk': {
+            return [...rawBreadcrumbs, ...getVDiskBreadcrumbs(options, query)];
+        }
         case 'tablets': {
             return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
         }

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

@@ -2,6 +2,7 @@
     "breadcrumbs.tenant": "Tenant",
     "breadcrumbs.node": "Node",
     "breadcrumbs.pDisk": "PDisk",
+    "breadcrumbs.vDisk": "VDisk",
     "breadcrumbs.tablet": "Tablet",
     "breadcrumbs.tablets": "Tablets"
 }

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

@@ -1 +1 @@
-export declare const headerKeyset: (key: "breadcrumbs.tenant" | "breadcrumbs.node" | "breadcrumbs.pDisk" | "breadcrumbs.tablet" | "breadcrumbs.tablets", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const headerKeyset: (key: "breadcrumbs.tenant" | "breadcrumbs.node" | "breadcrumbs.pDisk" | "breadcrumbs.vDisk" | "breadcrumbs.tablet" | "breadcrumbs.tablets", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
+import throttle from 'lodash/throttle';
 import { basename as appBasename } from '../../../store/index';
 import routes, { createHref } from '../../../routes';
 const b = cn('heatmap');
@@ -100,7 +100,7 @@ export const HeatmapCanvas = (props) => {
             props.hideTooltip();
         }, 40);
     };
-    const _onCanvasMouseMove = _.throttle((x, y) => {
+    const _onCanvasMouseMove = throttle((x, y) => {
         //this is needed to force ReduxPopup rerender
         const event = new CustomEvent('scroll');
         window.dispatchEvent(event);

package/dist/containers/Node/NodeStructure/NodeStructure.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import url from 'url';
-import { isEmpty } from 'lodash/fp';
+import isEmpty from 'lodash/isEmpty';
 import cn from 'bem-cn-lite';
 import { Loader } from '../.././../components/Loader';
 import { getNodeStructure } from '../../../store/reducers/node/node';

package/dist/containers/Node/NodeStructure/Pdisk.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import cn from 'bem-cn-lite';
-import { isEmpty } from 'lodash/fp';
+import isEmpty from 'lodash/isEmpty';
 import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
 import { EFlag } from '../../../types/api/enums';
@@ -78,7 +78,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(Popover, Object.assign({ placement: ['right'], content: _jsx(Vdisk, Object.assign({}, row)), tooltipContentClassName: b('vdisk-details') }, { children: _jsx(Button, Object.assign({ view: "flat-secondary", className: b('vdisk-details-button', {
+                return (_jsx(Popover, Object.assign({ placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details') }, { children: _jsx(Button, Object.assign({ view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
                         }) }, { children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) })) })));
             },

package/dist/containers/Node/NodeStructure/Vdisk.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import { type TVDiskStateInfo } from '../../../types/api/vdisk';
-export declare function Vdisk({ AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskId, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, }: TVDiskStateInfo): JSX.Element;
+import type { PreparedStructureVDisk } from '../../../store/reducers/node/types';
+interface VDiskProps {
+    data: PreparedStructureVDisk;
+}
+export declare function Vdisk({ data }: VDiskProps): JSX.Element;
+export {};

package/dist/containers/Node/NodeStructure/Vdisk.js

@@ -3,84 +3,11 @@ import React from 'react';
 import cn from 'bem-cn-lite';
 import { EVDiskState } from '../../../types/api/vdisk';
 import { EFlag } from '../../../types/api/enums';
-import { formatStorageValuesToGb, stringifyVdiskId, } from '../../../utils/dataFormatters/dataFormatters';
-import { bytesToGB, bytesToSpeed } from '../../../utils/utils';
-import { valueIsDefined } from '../../../utils';
+import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { VDiskInfo } from '../../../components/VDiskInfo/VDiskInfo';
 const b = cn('kv-node-structure');
-export function Vdisk({ AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskId, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, }) {
-    var _a, _b, _c, _d;
-    const vdiskInfo = [];
-    if (valueIsDefined(VDiskSlotId)) {
-        vdiskInfo.push({ label: 'VDisk Slot Id', value: VDiskSlotId });
-    }
-    if (valueIsDefined(Guid)) {
-        vdiskInfo.push({ label: 'GUID', value: Guid });
-    }
-    if (valueIsDefined(Kind)) {
-        vdiskInfo.push({ label: 'Kind', value: Kind });
-    }
-    if (valueIsDefined(VDiskState)) {
-        vdiskInfo.push({
-            label: 'VDisk State',
-            value: VDiskState,
-        });
-    }
-    if (valueIsDefined(DiskSpace)) {
-        vdiskInfo.push({
-            label: 'Disk Space',
-            value: _jsx(EntityStatus, { status: DiskSpace }),
-        });
-    }
-    if (valueIsDefined((_a = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _a === void 0 ? void 0 : _a.Flag)) {
-        vdiskInfo.push({
-            label: 'Fresh Rank Satisfaction',
-            value: _jsx(EntityStatus, { status: (_b = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.FreshRank) === null || _b === void 0 ? void 0 : _b.Flag }),
-        });
-    }
-    if (valueIsDefined((_c = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _c === void 0 ? void 0 : _c.Flag)) {
-        vdiskInfo.push({
-            label: 'Level Rank Satisfaction',
-            value: _jsx(EntityStatus, { status: (_d = SatisfactionRank === null || SatisfactionRank === void 0 ? void 0 : SatisfactionRank.LevelRank) === null || _d === void 0 ? void 0 : _d.Flag }),
-        });
-    }
-    vdiskInfo.push({ label: 'Replicated', value: Replicated ? 'Yes' : 'No' });
-    vdiskInfo.push({ label: 'Allocated Size', value: bytesToGB(AllocatedSize) });
-    vdiskInfo.push({ label: 'Available Size', value: bytesToGB(AvailableSize) });
-    if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
-        vdiskInfo.push({
-            label: 'Size',
-            value: (_jsx(ProgressViewer, { value: AllocatedSize, capacity: Number(AllocatedSize) + Number(AvailableSize), formatValues: formatStorageValuesToGb, colorizeProgress: true })),
-        });
-    }
-    vdiskInfo.push({
-        label: 'Has Unreadable Blobs',
-        value: HasUnreadableBlobs ? 'Yes' : 'No',
-    });
-    if (valueIsDefined(IncarnationGuid)) {
-        vdiskInfo.push({ label: 'Incarnation GUID', value: IncarnationGuid });
-    }
-    if (valueIsDefined(InstanceGuid)) {
-        vdiskInfo.push({ label: 'Instance GUID', value: InstanceGuid });
-    }
-    if (valueIsDefined(FrontQueues)) {
-        vdiskInfo.push({
-            label: 'Front Queues',
-            value: _jsx(EntityStatus, { status: FrontQueues }),
-        });
-    }
-    if (valueIsDefined(StoragePoolName)) {
-        vdiskInfo.push({ label: 'Storage Pool Name', value: StoragePoolName });
-    }
-    vdiskInfo.push({
-        label: 'Read Throughput',
-        value: bytesToSpeed(ReadThroughput),
-    });
-    vdiskInfo.push({
-        label: 'Write Throughput',
-        value: bytesToSpeed(WriteThroughput),
-    });
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: "VDisk " })), _jsx(EntityStatus, { status: VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red, name: stringifyVdiskId(VDiskId) })] })), _jsx("div", Object.assign({ className: b('column') }, { children: _jsx(InfoViewer, { className: b('section'), info: vdiskInfo }) }))] }));
+export function Vdisk({ data }) {
+    const { VDiskState, VDiskId } = data;
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: "VDisk " })), _jsx(EntityStatus, { status: VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red, name: stringifyVdiskId(VDiskId) })] })), _jsx("div", Object.assign({ className: b('column') }, { children: _jsx(VDiskInfo, { className: b('section'), data: data }) }))] }));
 }

package/dist/containers/Nodes/getNodesColumns.js

@@ -68,7 +68,6 @@ const versionColumn = {
         return _jsx(CellWithPopover, Object.assign({ content: row.Version }, { children: row.Version }));
     },
     sortable: false,
-    resizeable: true,
 };
 const uptimeColumn = {
     name: NODES_COLUMNS_IDS.Uptime,

package/dist/containers/PDiskPage/PDiskPage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './PDiskPage.scss';
+export declare function PDiskPage(): JSX.Element;

package/dist/containers/{PDisk/PDisk.js → PDiskPage/PDiskPage.js}

@@ -6,19 +6,20 @@ import { Icon } from '@gravity-ui/uikit';
 import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
 import { getPDiskData, getPDiskStorage, setPDiskDataWasNotLoaded, } from '../../store/reducers/pdisk/pdisk';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { valueIsDefined } from '../../utils';
 import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getSeverityColor } from '../../utils/disks/helpers';
 import { PageMeta } from '../../components/PageMeta/PageMeta';
-import { StatusIcon } from '../../components/StatusIcon/StatusIcon';
 import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
 import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
 import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { PDiskGroups } from './PDiskGroups';
 import { pdiskPageCn } from './shared';
 import { pDiskPageKeyset } from './i18n';
-import './PDisk.scss';
-export function PDisk() {
+import './PDiskPage.scss';
+export function PDiskPage() {
     const dispatch = useTypedDispatch();
     const nodesMap = useTypedSelector(selectNodesMap);
     const { pDiskData, groupsData, pDiskLoading, pDiskWasLoaded, groupsLoading, groupsWasLoaded } = useTypedSelector((state) => state.pDisk);
@@ -30,14 +31,11 @@ export function PDisk() {
     useEffect(() => {
         dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
     }, [dispatch, nodeId, pDiskId]);
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
     const fetchData = useCallback(async (isBackground) => {
         if (!isBackground) {
             dispatch(setPDiskDataWasNotLoaded());
         }
-        if (nodeId && pDiskId) {
+        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
             return Promise.all([
                 dispatch(getPDiskData({ nodeId, pDiskId })),
                 dispatch(getPDiskStorage({ nodeId, pDiskId })),
@@ -47,7 +45,7 @@ export function PDisk() {
     }, [dispatch, nodeId, pDiskId]);
     useAutofetcher(fetchData, [fetchData], true);
     const handleRestart = async () => {
-        if (nodeId && pDiskId) {
+        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
             return window.api.restartPDisk(nodeId, pDiskId);
         }
         return undefined;
@@ -65,10 +63,10 @@ export function PDisk() {
     const renderPageMeta = () => {
         const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
         const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
+        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), loading: pDiskLoading && !pDiskWasLoaded, items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
     };
     const renderPageTitle = () => {
-        return (_jsxs("div", Object.assign({ className: pdiskPageCn('title') }, { children: [_jsx("span", Object.assign({ className: pdiskPageCn('title__prefix') }, { children: pDiskPageKeyset('pdisk') })), _jsx(StatusIcon, { status: getSeverityColor(Severity), size: "s" }), pDiskId] })));
+        return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskId, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
         return (_jsx("div", Object.assign({ className: pdiskPageCn('controls') }, { children: _jsxs(ButtonWithConfirmDialog, Object.assign({ onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog') }, { children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] })) })));

package/dist/containers/{PDisk/PDisk.scss → PDiskPage/PDiskPage.scss}

@@ -22,20 +22,6 @@
         left: 0;
     }
 
-    &__title {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: baseline;
-
-        @include header-2-typography();
-
-        &__prefix {
-            margin-right: 6px;
-
-            color: var(--g-color-text-secondary);
-        }
-    }
-
     &__groups-title {
         @include header-1-typography();
     }

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

@@ -2,14 +2,12 @@ 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 { Stack } from '../../../components/Stack/Stack';
+import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
+import { DiskStateProgressBar } from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
+import { PDiskPopup } from '../../../components/PDiskPopup/PDiskPopup';
 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 { PDiskPopup } from '../PDiskPopup';
-import { VDisk } from '../VDisk';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
 export const PDisk = ({ nodeId, data = {}, vDisks }) => {
@@ -26,15 +24,11 @@ export const PDisk = ({ nodeId, data = {}, vDisks }) => {
             return null;
         }
         return (_jsx("div", Object.assign({ className: b('vdisks') }, { children: vDisks.map((vdisk) => {
-                const donors = vdisk.Donors;
                 return (_jsx("div", Object.assign({ className: b('vdisks-item'), style: {
                         // 1 is small enough for empty disks to be of the minimum width
                         // but if all of them are empty, `flex-grow: 1` would size them evenly
                         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: donor }, stringifyVdiskId(isFullData ? donor.VDiskId : donor)));
-                            })] }), stringifyVdiskId(vdisk.VDiskId))) : (_jsx(VDisk, { data: vdisk, compact: true })) }), stringifyVdiskId(vdisk.VDiskId)));
+                    } }, { children: _jsx(VDiskWithDonorsStack, { data: vdisk, compact: true, stackClassName: b('donors-stack') }) }), 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: data.AllocatedPercent, severity: data.Severity }), _jsx("div", Object.assign({ className: b('media-type') }, { children: data.Type }))] }))] }))] }));

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -25,8 +25,6 @@
         flex-shrink: 0;
 
         .stack__layer {
-            background: var(--g-color-base-background);
-
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
             }

package/dist/containers/Storage/Storage.js

@@ -6,7 +6,7 @@ import { ResponseError } from '../../components/Errors/ResponseError';
 import { setInitialState, setVisibleEntities, setStorageTextFilter, setUsageFilter, setStorageType, setNodesUptimeFilter, setDataWasNotLoaded, getStorageNodesInfo, getStorageGroupsInfo, setNodesSortParams, setGroupsSortParams, } from '../../store/reducers/storage/storage';
 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 { selectNodesMap } from '../../store/reducers/nodesList';
 import { useAutofetcher, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, useTypedDispatch, } from '../../utils/hooks';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
@@ -30,7 +30,6 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     const isNodePage = nodeId !== undefined;
     const storageType = isNodePage ? STORAGE_TYPES.groups : type;
     useEffect(() => {
-        dispatch(getNodesList());
         return () => {
             // Clean data on component unmount
             dispatch(setInitialState());

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -6,6 +6,7 @@
     &__vdisks-wrapper {
         display: flex;
         justify-content: center;
+        gap: 10px;
 
         min-width: 500px;
     }
@@ -13,15 +14,8 @@
         flex-grow: 1;
 
         max-width: 200px;
-        margin-right: 10px;
-
-        &:last-child {
-            margin-right: 0px;
-        }
 
         .stack__layer {
-            background: var(--g-color-base-background);
-
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
             }

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

@@ -6,7 +6,7 @@ import './StorageGroups.scss';
 type StorageGroupsColumn = VirtualTableColumn<PreparedStorageGroup> & DataTableColumn<PreparedStorageGroup>;
 export declare const GROUPS_COLUMNS_IDS: {
     readonly PoolName: "PoolName";
-    readonly Kind: "Kind";
+    readonly MediaType: "MediaType";
     readonly Erasure: "Erasure";
     readonly GroupId: "GroupId";
     readonly Used: "Used";

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

@@ -6,21 +6,19 @@ import { EFlag } from '../../../types/api/enums';
 import shieldIcon from '../../../assets/icons/shield.svg';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 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 { Stack } from '../../../components/Stack/Stack';
 import { CellWithPopover } from '../../../components/CellWithPopover/CellWithPopover';
 import { UsageLabel } from '../../../components/UsageLabel/UsageLabel';
-import { VDisk } from '../VDisk';
+import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import { getDegradedSeverity, getUsageSeverityForStorageGroup } from '../utils';
 import i18n from './i18n';
 import './StorageGroups.scss';
 const b = cn('global-storage-groups');
 export const GROUPS_COLUMNS_IDS = {
     PoolName: 'PoolName',
-    Kind: 'Kind',
+    MediaType: 'MediaType',
     Erasure: 'Erasure',
     GroupId: 'GroupId',
     Used: 'Used',
@@ -43,12 +41,12 @@ const poolNameColumn = {
     },
     align: DataTable.LEFT,
 };
-const kindColumn = {
-    name: GROUPS_COLUMNS_IDS.Kind,
+const typeColumn = {
+    name: GROUPS_COLUMNS_IDS.MediaType,
     header: 'Type',
     width: 100,
     align: DataTable.LEFT,
-    render: ({ row }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: row.Kind || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, Object.assign({ content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate }, { children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) })))] })),
+    render: ({ row }) => (_jsxs(_Fragment, { children: [_jsx(Label, { children: row.MediaType || '—' }), '\u00a0', row.Encryption && (_jsx(Popover, Object.assign({ content: i18n('encrypted'), placement: "right", behavior: PopoverBehavior.Immediate }, { children: _jsx(Label, { children: _jsx(Icon, { data: shieldIcon }) }) })))] })),
     sortable: false,
 };
 const erasureColumn = {
@@ -157,25 +155,19 @@ const getVdiscksColumn = (nodes) => ({
     render: ({ row }) => {
         var _a;
         return (_jsx("div", Object.assign({ className: b('vdisks-wrapper') }, { children: (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.map((vDisk) => {
-                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: 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)));
+                return (_jsx(VDiskWithDonorsStack, { data: vDisk, nodes: nodes, className: b('vdisks-item') }, stringifyVdiskId(vDisk.VDiskId)));
             }) })));
     },
     align: DataTable.CENTER,
     width: 900,
 });
 export const getStorageTopGroupsColumns = () => {
-    return [groupIdColumn, kindColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
+    return [groupIdColumn, typeColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
 };
 export const getPDiskStorageColumns = (nodes) => {
     return [
         poolNameColumn,
-        kindColumn,
+        typeColumn,
         erasureColumn,
         degradedColumn,
         groupIdColumn,
@@ -187,7 +179,7 @@ export const getPDiskStorageColumns = (nodes) => {
 const getStorageGroupsColumns = (nodes) => {
     return [
         poolNameColumn,
-        kindColumn,
+        typeColumn,
         erasureColumn,
         degradedColumn,
         usageColumn,

package/dist/containers/Storage/VirtualStorage.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
 import { AccessDenied } from '../../components/Errors/403/AccessDenied';
 import { ResponseError } from '../../components/Errors/ResponseError/ResponseError';
-import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { useTypedSelector } from '../../utils/hooks';
 import { StorageControls } from './StorageControls/StorageControls';
 import { VirtualStorageGroups } from './StorageGroups/VirtualStorageGroups';
 import { VirtualStorageNodes } from './StorageNodes/VirtualStorageNodes';
 export const VirtualStorage = ({ tenant, nodeId, parentContainer, additionalNodesProps, }) => {
-    const dispatch = useTypedDispatch();
     const [searchValue, setSearchValue] = useState('');
     const [storageType, setStorageType] = useState(STORAGE_TYPES.groups);
     const [visibleEntities, setVisibleEntities] = useState(VISIBLE_ENTITIES.all);
     const [nodesUptimeFilter, setNodesUptimeFilter] = useState(NodesUptimeFilterValues.All);
     const nodesMap = useTypedSelector(selectNodesMap);
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
     const handleShowAllGroups = () => {
         setVisibleEntities(VISIBLE_ENTITIES.all);
     };