ydb-embedded-ui 5.3.0 → 5.5.0

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

@@ -3,12 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import cn from 'bem-cn-lite';
 import { Label, Popup } from '@gravity-ui/uikit';
-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/disks/helpers';
-import { preparePDiskData } from '../PDiskPopup';
+import { EFlag } from '../../types/api/enums';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { bytesToGB, bytesToSpeed } from '../../utils/utils';
+import { isFullVDiskData } from '../../utils/disks/helpers';
+import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
+import { preparePDiskData } from '../PDiskPopup/PDiskPopup';
+import { InfoViewer } from '../InfoViewer';
 import './VDiskPopup.scss';
 const b = cn('vdisk-storage-popup');
 const prepareUnavailableVDiskData = (data) => {
@@ -17,7 +18,7 @@ const prepareUnavailableVDiskData = (data) => {
     if (StoragePoolName) {
         vdiskData.push({ label: 'StoragePool', value: StoragePoolName });
     }
-    vdiskData.push({ label: 'NodeId', value: NodeId !== null && NodeId !== void 0 ? NodeId : '–' }, { label: 'PDiskId', value: PDiskId !== null && PDiskId !== void 0 ? PDiskId : '–' }, { label: 'VSlotId', value: VSlotId !== null && VSlotId !== void 0 ? VSlotId : '–' });
+    vdiskData.push({ label: 'NodeId', value: NodeId !== null && NodeId !== void 0 ? NodeId : EMPTY_DATA_PLACEHOLDER }, { label: 'PDiskId', value: PDiskId !== null && PDiskId !== void 0 ? PDiskId : EMPTY_DATA_PLACEHOLDER }, { label: 'VSlotId', value: VSlotId !== null && VSlotId !== void 0 ? VSlotId : EMPTY_DATA_PLACEHOLDER });
     return vdiskData;
 };
 const prepareVDiskData = (data) => {

package/dist/components/VirtualTable/TableHead.d.ts

@@ -2,6 +2,7 @@ import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize'
 import type { Column, OnSort, SortOrderType } from './types';
 interface TableHeadCellProps<T> {
     column: Column<T>;
+    resizeable?: boolean;
     sortOrder?: SortOrderType;
     defaultSortOrder: SortOrderType;
     onSort?: (columnName: string) => void;
@@ -9,7 +10,7 @@ interface TableHeadCellProps<T> {
     onCellMount?: (element: Element) => void;
     onCellUnMount?: (element: Element) => void;
 }
-export declare const TableHeadCell: <T>({ column, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => JSX.Element;
+export declare const TableHeadCell: <T>({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }: TableHeadCellProps<T>) => JSX.Element;
 interface TableHeadProps<T> {
     columns: Column<T>[];
     onSort?: OnSort;

package/dist/components/VirtualTable/TableHead.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING } from './constants';
+import { ASCENDING, DEFAULT_RESIZEABLE, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING, } from './constants';
 import { b } from './shared';
 const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
 // Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
@@ -15,7 +15,7 @@ const ColumnSortIcon = ({ sortOrder, sortable, defaultSortOrder }) => {
         return null;
     }
 };
-export const TableHeadCell = ({ column, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
+export const TableHeadCell = ({ column, resizeable, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
     var _a;
     const cellWrapperRef = useRef(null);
     useEffect(() => {
@@ -30,9 +30,7 @@ export const TableHeadCell = ({ column, sortOrder, defaultSortOrder, onSort, row
         };
     }, [onCellMount, onCellUnMount]);
     const content = (_a = column.header) !== null && _a !== void 0 ? _a : column.name;
-    return (_jsx("th", { children: _jsx("div", Object.assign({ ref: cellWrapperRef, className: b('head-cell-wrapper', {
-                resizeable: column.resizeable,
-            }), style: {
+    return (_jsx("th", { children: _jsx("div", Object.assign({ ref: cellWrapperRef, className: b('head-cell-wrapper', { resizeable }), style: {
                 height: `${rowHeight}px`,
                 width: `${column.width}px`,
             } }, {
@@ -101,8 +99,10 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
     };
     const renderTableHead = () => {
         return (_jsx("thead", Object.assign({ className: b('head') }, { children: _jsx("tr", { children: columns.map((column) => {
+                    var _a;
                     const sortOrder = sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
-                    return (_jsx(TableHeadCell, { column: column, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
+                    const resizeable = onColumnsResize && ((_a = column.resizeable) !== null && _a !== void 0 ? _a : DEFAULT_RESIZEABLE);
+                    return (_jsx(TableHeadCell, { column: column, resizeable: resizeable, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
                 }) }) })));
     };
     return (_jsxs(_Fragment, { children: [renderTableColGroups(), renderTableHead()] }));

package/dist/components/VirtualTable/constants.d.ts

@@ -2,6 +2,7 @@ export declare const LEFT = "left";
 export declare const CENTER = "center";
 export declare const RIGHT = "right";
 export declare const DEFAULT_ALIGN = "left";
+export declare const DEFAULT_RESIZEABLE = true;
 export declare const ASCENDING = 1;
 export declare const DESCENDING = -1;
 export declare const DEFAULT_SORT_ORDER = -1;

package/dist/components/VirtualTable/constants.js

@@ -2,6 +2,7 @@ export const LEFT = 'left';
 export const CENTER = 'center';
 export const RIGHT = 'right';
 export const DEFAULT_ALIGN = LEFT;
+export const DEFAULT_RESIZEABLE = true;
 export const ASCENDING = 1;
 export const DESCENDING = -1;
 export const DEFAULT_SORT_ORDER = DESCENDING;

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}

@@ -2,20 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect } from 'react';
 import { StringParam, useQueryParams } from 'use-query-params';
 import { Helmet } from 'react-helmet-async';
+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);
@@ -27,19 +31,28 @@ export function PDisk() {
     useEffect(() => {
         dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
     }, [dispatch, nodeId, pDiskId]);
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
-    const fetchData = useCallback((isBackground) => {
+    const fetchData = useCallback(async (isBackground) => {
         if (!isBackground) {
             dispatch(setPDiskDataWasNotLoaded());
         }
-        if (nodeId && pDiskId) {
-            dispatch(getPDiskData({ nodeId, pDiskId }));
-            dispatch(getPDiskStorage({ nodeId, pDiskId }));
+        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
+            return Promise.all([
+                dispatch(getPDiskData({ nodeId, pDiskId })),
+                dispatch(getPDiskStorage({ nodeId, pDiskId })),
+            ]);
         }
+        return undefined;
     }, [dispatch, nodeId, pDiskId]);
     useAutofetcher(fetchData, [fetchData], true);
+    const handleRestart = async () => {
+        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
+            return window.api.restartPDisk(nodeId, pDiskId);
+        }
+        return undefined;
+    };
+    const handleAfterRestart = async () => {
+        return fetchData(true);
+    };
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
             ? `${pDiskPageKeyset('pdisk')} ${pDiskId}`
@@ -50,10 +63,13 @@ 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')] })) })));
     };
     const renderInfo = () => {
         if (pDiskLoading && !pDiskWasLoaded) {
@@ -64,5 +80,5 @@ export function PDisk() {
     const renderGroupsTable = () => {
         return (_jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading && !groupsWasLoaded }));
     };
-    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderInfo(), renderGroupsTable()] })));
+    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] })));
 }

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

@@ -16,25 +16,12 @@
     &__meta,
     &__title,
     &__info,
+    &__controls,
     &__groups-title {
         position: sticky;
         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/PDiskPage/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/PDiskPage/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/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);
             }