ydb-embedded-ui 6.11.0 → 6.13.0

package/dist/containers/Cluster/Cluster.scss

@@ -28,15 +28,12 @@
     }
 
     &__tabs {
-        --g-tabs-border-width: 0;
-
         position: sticky;
         left: 0;
 
         display: flex;
         justify-content: space-between;
         align-items: center;
-
-        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
+        @include tabs-wrapper-styles();
     }
 }

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
@@ -102,14 +102,14 @@ const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) =>
     });
     return info;
 };
-export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
+export const ClusterInfo = ({ cluster, versionsValues = [], groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     let internalLink = backend + '/internal';
     if (singleClusterMode && !customBackend) {
         internalLink = `/internal`;
     }
     const { info = [], links = [] } = additionalClusterProps;
-    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
+    const clusterInfo = getInfo(cluster !== null && cluster !== void 0 ? cluster : {}, versionsValues, groupsStats, info, [
         { title: DEVELOPER_UI_TITLE, url: internalLink },
         ...links,
     ]);
@@ -117,10 +117,10 @@ export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {
         if (loading) {
             return _jsx(InfoViewerSkeleton, { className: b('skeleton'), rows: 9 });
         }
-        if (error) {
-            return _jsx(ResponseError, { error: error, className: b('error') });
+        if (error && !cluster) {
+            return null;
         }
         return _jsx(InfoViewer, { dots: true, info: clusterInfo });
     };
-    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('info'), children: getContent() }) }));
+    return (_jsxs("div", { className: b(), children: [error ? _jsx(ResponseError, { error: error, className: b('error') }) : null, _jsx("div", { className: b('info'), children: getContent() })] }));
 };

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -44,7 +44,7 @@
     &__links {
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        gap: var(--g-spacing-2);
     }
 
     &__storage-groups-stats {

package/dist/containers/Clusters/constants.d.ts

@@ -14,7 +14,7 @@ export declare const COLUMNS_NAMES: {
     readonly DESCRIPTION: "description";
     readonly BALANCER: "balancer";
 };
-export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "status" | "tenants" | "versions" | "service" | "load" | "hosts" | "balancer" | "title" | "owner")[];
+export declare const DEFAULT_COLUMNS: ("status" | "nodes" | "storage" | "tenants" | "versions" | "service" | "load" | "hosts" | "balancer" | "owner" | "title")[];
 export declare const COLUMNS_TITLES: {
     readonly title: "Cluster";
     readonly versions: "Versions";

package/dist/containers/Heatmap/Heatmap.d.ts

@@ -1,6 +1,7 @@
 import './Heatmap.scss';
 interface HeatmapProps {
+    database: string;
     path: string;
 }
-export declare const Heatmap: ({ path }: HeatmapProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heatmap: ({ path, database }: HeatmapProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Heatmap/Heatmap.js

@@ -14,11 +14,11 @@ import { COLORS_RANGE_SIZE, getColorIndex, getColorRange, getCurrentMetricLimits
 import './Heatmap.scss';
 const b = cn('heatmap');
 const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
-export const Heatmap = ({ path }) => {
+export const Heatmap = ({ path, database }) => {
     const dispatch = useTypedDispatch();
     const itemsContainer = React.createRef();
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path }, { pollingInterval: autoRefreshInterval });
+    const { currentData, isFetching, error } = heatmapApi.useGetHeatmapTabletsInfoQuery({ path, database }, { pollingInterval: autoRefreshInterval });
     const loading = isFetching && currentData === undefined;
     const { tablets = [], metrics } = currentData || {};
     const { sort, heatmap, currentMetric } = useTypedSelector((state) => state.heatmap);
@@ -68,13 +68,14 @@ export const Heatmap = ({ path }) => {
     };
     const renderContent = () => {
         const { min, max } = getCurrentMetricLimits(currentMetric, tablets);
-        return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('filters'), children: [_jsx(Select, { className: b('heatmap-select'), value: currentMetric ? [currentMetric] : [], options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", { className: b('sort-checkbox'), children: _jsx(Checkbox, { onUpdate: handleCheckboxChange, checked: sort, children: "Sort" }) }), _jsx("div", { className: b('histogram-checkbox'), children: _jsx(Checkbox, { onUpdate: handleHeatmapChange, checked: heatmap, children: "Heatmap" }) }), _jsxs("div", { className: b('limits'), children: [_jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "min:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(min) ? formatNumber(min) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "max:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(max) ? formatNumber(max) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "count:" }), _jsx("div", { className: b('limits-value'), children: formatNumber(tablets.length) })] })] })] }), heatmap ? renderHeatmapCanvas() : renderHistogram()] }));
+        let content;
+        if (!error || currentData) {
+            content = heatmap ? renderHeatmapCanvas() : renderHistogram();
+        }
+        return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('filters'), children: [_jsx(Select, { className: b('heatmap-select'), value: currentMetric ? [currentMetric] : [], options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", { className: b('sort-checkbox'), children: _jsx(Checkbox, { onUpdate: handleCheckboxChange, checked: sort, children: "Sort" }) }), _jsx("div", { className: b('histogram-checkbox'), children: _jsx(Checkbox, { onUpdate: handleHeatmapChange, checked: heatmap, children: "Heatmap" }) }), _jsxs("div", { className: b('limits'), children: [_jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "min:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(min) ? formatNumber(min) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "max:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(max) ? formatNumber(max) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "count:" }), _jsx("div", { className: b('limits-value'), children: formatNumber(tablets.length) })] })] })] }), error ? _jsx(ResponseError, { error: error }) : null, content] }));
     };
     if (loading) {
         return _jsx(Loader, {});
     }
-    if (error) {
-        return _jsx(ResponseError, { error: error });
-    }
     return renderContent();
 };

package/dist/containers/Node/Node.js

@@ -80,13 +80,11 @@ export function Node(props) {
     if (loading) {
         return _jsx(Loader, { size: "l" });
     }
-    else if (error) {
-        return _jsx(ResponseError, { error: error });
+    if (node) {
+        return (_jsxs("div", { className: b(null, props.className), ref: container, children: [_jsx(Helmet, { titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring`, children: _jsx("title", { children: activeTabVerified.title }) }), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), error ? _jsx(ResponseError, { error: error, className: b('error') }) : null, renderTabs(), _jsx("div", { className: b('content'), children: renderTabContent() })] }));
     }
-    else {
-        if (node) {
-            return (_jsxs("div", { className: b(null, props.className), ref: container, children: [_jsx(Helmet, { titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring`, children: _jsx("title", { children: activeTabVerified.title }) }), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", { className: b('content'), children: renderTabContent() })] }));
-        }
-        return _jsx("div", { className: "error", children: "no node data" });
+    if (error) {
+        return _jsx(ResponseError, { error: error });
     }
+    return _jsx("div", { className: "error", children: "no node data" });
 }

package/dist/containers/Node/Node.scss

@@ -23,15 +23,12 @@
     }
 
     &__tabs {
-        --g-tabs-border-width: 0;
-
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         padding: 0 20px;
-
-        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
+        @include tabs-wrapper-styles();
     }
 
     &__tab {
@@ -56,4 +53,8 @@
         height: 100%;
         padding: 20px;
     }
+
+    &__error {
+        padding: 0 20px;
+    }
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import url from 'url';
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
@@ -59,11 +59,11 @@ function NodeStructure({ nodeId, className }) {
         if (loadingStructure) {
             return _jsx(Loader, { size: "m" });
         }
-        if (error) {
-            return _jsx(ResponseError, { error: error });
+        if (error && !currentData) {
+            return null;
         }
         return renderStructure();
     };
-    return (_jsx("div", { className: b(), ref: scrollContainerRef, children: _jsx("div", { className: className, children: renderContent() }) }));
+    return (_jsxs("div", { className: b(), ref: scrollContainerRef, children: [error ? _jsx(ResponseError, { error: error, className: b('error') }) : null, _jsx("div", { className: className, children: renderContent() })] }));
 }
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -10,6 +10,10 @@
     @include flex-container();
     @include body-2-typography();
 
+    &__error {
+        padding: 20px 20px 0;
+    }
+
     &__pdisk {
         display: flex;
         flex-direction: column;
@@ -142,26 +146,6 @@
     &__selected-vdisk {
         animation: onSelectedVdiskAnimation 4s;
     }
-
-    &__row {
-        display: flex;
-    }
-
-    &__column {
-        display: flex;
-        flex-direction: column;
-
-        margin-bottom: 15px;
-    }
-
-    &__title {
-        margin-right: 16px;
-
-        font-weight: 500;
-        text-transform: uppercase;
-
-        @include body-2-typography();
-    }
 }
 
 @keyframes onSelectedVdiskAnimation {

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

@@ -7,6 +7,7 @@ import isEmpty from 'lodash/isEmpty';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
 import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { VDiskInfo } from '../../../components/VDiskInfo/VDiskInfo';
 import { EFlag } from '../../../types/api/enums';
 import { EVDiskState } from '../../../types/api/vdisk';
 import { valueIsDefined } from '../../../utils';
@@ -16,7 +17,6 @@ import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataForma
 import { createVDiskDeveloperUILink } from '../../../utils/developerUI/developerUI';
 import i18n from '../i18n';
 import { PDiskTitleBadge } from './PDiskTitleBadge';
-import { Vdisk } from './Vdisk';
 const b = cn('kv-node-structure');
 var VDiskTableColumnsIds;
 (function (VDiskTableColumnsIds) {
@@ -78,7 +78,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(Popover, { placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
+                return (_jsx(Popover, { placement: ['right'], content: _jsx(VDiskInfo, { data: row, withTitle: true, withVDiskPageLink: true }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
                         }), children: _jsx(Icon, { data: CircleInfoFill, size: 18 }) }) }));
             },
@@ -107,7 +107,7 @@ export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFro
         if (isEmpty(data)) {
             return _jsx("div", { children: "No information about PDisk" });
         }
-        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details') }), _jsxs("div", { className: b('vdisks-container'), children: [_jsx("div", { className: b('vdisks-header'), children: "VDisks" }), renderVDisks()] })] }));
+        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details'), withPDiskPageLink: true }), _jsxs("div", { className: b('vdisks-container'), children: [_jsx("div", { className: b('vdisks-header'), children: "VDisks" }), renderVDisks()] })] }));
     };
     return (_jsxs("div", { className: b('pdisk'), id: id, children: [_jsxs("div", { className: b('pdisk-header'), children: [_jsxs("div", { className: b('pdisk-title-wrapper'), children: [_jsx(EntityStatus, { status: Device }), _jsx(PDiskTitleBadge, { label: "PDiskID", value: PDiskId, className: b('pdisk-title-id') }), _jsx(PDiskTitleBadge, { value: Type, className: b('pdisk-title-type') }), _jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('pdisk-title-size') }), _jsx(PDiskTitleBadge, { label: "VDisks", value: vDisks.length })] }), _jsx(Button, { onClick: unfolded ? onClosePDiskDetails : onOpenPDiskDetails, view: "flat-secondary", children: _jsx(ArrowToggle, { direction: unfolded ? 'top' : 'bottom' }) })] }), unfolded && renderPDiskDetails()] }));
 }

package/dist/containers/Nodes/Nodes.js

@@ -5,6 +5,7 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { StringParam, useQueryParams } from 'use-query-params';
 import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
+import { isAccessError } from '../../components/Errors/PageError/PageError';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
 import { ProblemFilter } from '../../components/ProblemFilter';
@@ -65,7 +66,7 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
     }, [data, searchValue, uptimeFilter, problemFilter]);
     const totalNodes = (data === null || data === void 0 ? void 0 : data.TotalNodes) || 0;
     const renderControls = () => {
-        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: (nodes === null || nodes === void 0 ? void 0 : nodes.length) || 0, label: 'Nodes', loading: isLoading })] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: nodes.length, label: 'Nodes', loading: isLoading })] }));
     };
     const renderTable = () => {
         const rawColumns = getNodesColumns({
@@ -74,7 +75,7 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         const columns = rawColumns.map((column) => {
             return { ...column, sortable: isSortableNodesProperty(column.name) };
         });
-        if (nodes && nodes.length === 0) {
+        if (nodes.length === 0) {
             if (problemFilter !== ProblemFilterValues.ALL ||
                 uptimeFilter !== NodesUptimeFilterValues.All) {
                 return _jsx(Illustration, { name: "thumbsUp", width: "200" });
@@ -82,11 +83,8 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         }
         return (_jsx(ResizeableDataTable, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: nodes || [], columns: columns, settings: DEFAULT_TABLE_SETTINGS, sortOrder: sort, onSort: handleSort, emptyDataMessage: i18n('empty.default'), rowClassName: (row) => b('node', { unavailable: isUnavailableNode(row) }) }));
     };
-    if (error) {
-        if (error.status === 403) {
-            return _jsx(AccessDenied, {});
-        }
-        return _jsx(ResponseError, { error: error });
+    if (isAccessError(error)) {
+        return _jsx(AccessDenied, {});
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, children: renderTable() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), error ? _jsx(ResponseError, { error: error }) : null, _jsx(TableWithControlsLayout.Table, { loading: isLoading, children: data ? renderTable() : null })] }));
 };

package/dist/containers/Nodes/getNodesColumns.js

@@ -8,7 +8,7 @@ import { TabletsStatistic } from '../../components/TabletsStatistic';
 import { UsageLabel } from '../../components/UsageLabel/UsageLabel';
 import { getLoadSeverityForNode } from '../../store/reducers/nodes/utils';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
-import { formatBytesToGigabyte, formatStorageValuesToGb, } from '../../utils/dataFormatters/dataFormatters';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
 export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
@@ -84,14 +84,7 @@ const memoryColumn = {
     header: 'Memory',
     sortAccessor: ({ MemoryUsed = 0 }) => Number(MemoryUsed),
     defaultOrder: DataTable.DESCENDING,
-    render: ({ row }) => {
-        if (row.MemoryUsed) {
-            return formatBytesToGigabyte(row.MemoryUsed);
-        }
-        else {
-            return '—';
-        }
-    },
+    render: ({ row }) => (_jsx(ProgressViewer, { value: row.MemoryUsed, capacity: row.MemoryLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.RIGHT,
     width: 120,
 };
@@ -111,7 +104,9 @@ const loadAverageColumn = {
     header: 'Load average',
     sortAccessor: ({ LoadAveragePercents = [] }) => LoadAveragePercents[0],
     defaultOrder: DataTable.DESCENDING,
-    render: ({ row }) => row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (_jsx(ProgressViewer, { value: row.LoadAveragePercents[0], percents: true, colorizeProgress: true, capacity: 100 })) : ('—'),
+    render: ({ row }) => (_jsx(ProgressViewer, { value: row.LoadAveragePercents && row.LoadAveragePercents.length > 0
+            ? row.LoadAveragePercents[0]
+            : undefined, percents: true, colorizeProgress: true, capacity: 100 })),
     align: DataTable.LEFT,
     width: 140,
     resizeMinWidth: 140,
@@ -147,22 +142,13 @@ const topNodesMemoryColumn = {
 };
 const sharedCacheUsageColumn = {
     name: NODES_COLUMNS_IDS.SharedCacheUsage,
-    header: 'Tablet Cache',
+    header: 'Caches',
     render: ({ row }) => (_jsx(ProgressViewer, { value: row.SharedCacheUsed, capacity: row.SharedCacheLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.LEFT,
     width: 140,
     resizeMinWidth: 140,
     sortable: false,
 };
-const memoryUsedInAllocColumn = {
-    name: NODES_COLUMNS_IDS.MemoryUsedInAlloc,
-    header: 'Query Runtime',
-    render: ({ row }) => (_jsx(ProgressViewer, { value: row.MemoryUsedInAlloc, capacity: row.MemoryLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
-    align: DataTable.LEFT,
-    width: 140,
-    resizeMinWidth: 140,
-    sortable: false,
-};
 const sessionsColumn = {
     name: NODES_COLUMNS_IDS.TotalSessions,
     header: 'Sessions',
@@ -204,7 +190,6 @@ export function getTopNodesByMemoryColumns({ tabletsPath, getNodeRef, }) {
         topNodesLoadAverageColumn,
         topNodesMemoryColumn,
         sharedCacheUsageColumn,
-        memoryUsedInAllocColumn,
         sessionsColumn,
         getTabletsColumn(tabletsPath),
     ];

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

@@ -0,0 +1,6 @@
+interface PDiskGroupsProps {
+    nodeId: string | number;
+    pDiskId: string | number;
+}
+export declare function PDiskGroups({ pDiskId, nodeId }: PDiskGroupsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/PDiskPage/PDiskGroups/PDiskGroups.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../../components/TableSkeleton/TableSkeleton';
+import { selectNodesMap } from '../../../store/reducers/nodesList';
+import { pDiskApi } from '../../../store/reducers/pdisk/pdisk';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { useAutoRefreshInterval, useTypedSelector } from '../../../utils/hooks';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getPDiskStorageColumns, } from '../../Storage/StorageGroups/getStorageGroupsColumns';
+export function PDiskGroups({ pDiskId, nodeId }) {
+    var _a;
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery({ pDiskId, nodeId }, { pollingInterval: autoRefreshInterval });
+    const loading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
+    const data = (_a = pDiskStorageQuery.currentData) !== null && _a !== void 0 ? _a : [];
+    const pDiskStorageColumns = React.useMemo(() => {
+        return getPDiskStorageColumns(nodesMap);
+    }, [nodesMap]);
+    if (loading) {
+        return _jsx(TableSkeleton, {});
+    }
+    return (_jsx(ResizeableDataTable, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
+}

package/dist/containers/PDiskPage/PDiskPage.js

@@ -1,64 +1,90 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ArrowRotateLeft } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, Tabs } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Helmet } from 'react-helmet-async';
 import { StringParam, useQueryParams } from 'use-query-params';
+import { z } from 'zod';
 import { AutoRefreshControl } from '../../components/AutoRefreshControl/AutoRefreshControl';
 import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { InternalLink } from '../../components/InternalLink/InternalLink';
 import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
 import { PageMeta } from '../../components/PageMeta/PageMeta';
+import { getPDiskPagePath } from '../../routes';
+import { api } from '../../store/reducers/api';
+import { selectIsUserAllowedToMakeChanges } from '../../store/reducers/authentication/authentication';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { selectNodesMap } from '../../store/reducers/nodesList';
 import { pDiskApi } from '../../store/reducers/pdisk/pdisk';
 import { valueIsDefined } from '../../utils';
-import { getSeverityColor } from '../../utils/disks/helpers';
+import { getPDiskId, getSeverityColor } from '../../utils/disks/helpers';
 import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { PDiskGroups } from './PDiskGroups';
+import { PDiskGroups } from './PDiskGroups/PDiskGroups';
+import { PDiskSpaceDistribution } from './PDiskSpaceDistribution/PDiskSpaceDistribution';
 import { pDiskPageKeyset } from './i18n';
 import { pdiskPageCn } from './shared';
 import './PDiskPage.scss';
+const PDISK_TABS_IDS = {
+    diskDistribution: 'diskDistribution',
+    groups: 'groups',
+};
+const PDISK_PAGE_TABS = [
+    {
+        id: PDISK_TABS_IDS.diskDistribution,
+        get title() {
+            return pDiskPageKeyset('disk-distribution');
+        },
+    },
+    {
+        id: PDISK_TABS_IDS.groups,
+        get title() {
+            return pDiskPageKeyset('groups');
+        },
+    },
+];
+const pDiskTabSchema = z.nativeEnum(PDISK_TABS_IDS).catch(PDISK_TABS_IDS.diskDistribution);
 export function PDiskPage() {
-    var _a;
     const dispatch = useTypedDispatch();
-    const nodesMap = useTypedSelector(selectNodesMap);
-    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
-    const [{ nodeId, pDiskId }] = useQueryParams({
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const [{ nodeId, pDiskId, activeTab }] = useQueryParams({
+        activeTab: StringParam,
         nodeId: StringParam,
         pDiskId: StringParam,
     });
+    const pDiskParamsDefined = valueIsDefined(nodeId) && valueIsDefined(pDiskId);
+    const pDiskTab = pDiskTabSchema.parse(activeTab);
     React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
     }, [dispatch, nodeId, pDiskId]);
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) ? { nodeId, pDiskId } : skipToken;
+    const params = pDiskParamsDefined ? { nodeId, pDiskId } : skipToken;
     const pdiskDataQuery = pDiskApi.useGetPdiskInfoQuery(params, {
         pollingInterval: autoRefreshInterval,
     });
     const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
-    const pDiskData = pdiskDataQuery.currentData || {};
-    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
-    const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery(params, {
-        pollingInterval: autoRefreshInterval,
-    });
-    const groupsLoading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
-    const groupsData = (_a = pDiskStorageQuery.currentData) !== null && _a !== void 0 ? _a : [];
-    const handleRestart = async () => {
-        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
-            return window.api.restartPDisk(nodeId, pDiskId).then((res) => {
-                if ((res === null || res === void 0 ? void 0 : res.result) === false) {
-                    const err = { statusText: res.error };
+    const pDiskData = pdiskDataQuery.currentData;
+    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData || {};
+    const handleRestart = async (isRetry) => {
+        if (pDiskParamsDefined) {
+            return window.api.restartPDisk({ nodeId, pDiskId, force: isRetry }).then((response) => {
+                if ((response === null || response === void 0 ? void 0 : response.result) === false) {
+                    const err = {
+                        statusText: response.error,
+                        retryPossible: response.forceRetryPossible,
+                    };
                     throw err;
                 }
             });
         }
         return undefined;
     };
-    const handleAfterRestart = async () => {
-        return Promise.all([pdiskDataQuery.refetch(), pDiskStorageQuery.refetch()]);
+    const handleAfterRestart = () => {
+        if (pDiskParamsDefined) {
+            dispatch(api.util.invalidateTags([{ type: 'PDiskData', id: getPDiskId(nodeId, pDiskId) }]));
+        }
     };
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
@@ -70,22 +96,45 @@ export function PDiskPage() {
     const renderPageMeta = () => {
         const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
         const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), loading: pDiskLoading, items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
+        return (_jsxs("div", { className: pdiskPageCn('meta'), children: [_jsx(PageMeta, { loading: pDiskLoading, items: [hostItem, nodeIdItem, NodeType, NodeDC] }), _jsx(AutoRefreshControl, {})] }));
     };
     const renderPageTitle = () => {
-        return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskId, className: pdiskPageCn('title') }));
+        return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskParamsDefined ? getPDiskId(nodeId, pDiskId) : null, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
-        return (_jsxs("div", { className: pdiskPageCn('controls'), children: [_jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId || !isUserAllowedToMakeChanges, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), withPopover: true, popoverContent: pDiskPageKeyset('restart-pdisk-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: [_jsx(Icon, { data: ArrowRotateLeft }), pDiskPageKeyset('restart-pdisk-button')] }), _jsx(AutoRefreshControl, { className: pdiskPageCn('auto-refresh-control') })] }));
+        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId || !isUserAllowedToMakeChanges, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), retryButtonText: pDiskPageKeyset('force-restart-pdisk-button'), withPopover: true, popoverContent: pDiskPageKeyset('restart-pdisk-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: [_jsx(Icon, { data: ArrowRotateLeft }), pDiskPageKeyset('restart-pdisk-button')] }) }));
     };
     const renderInfo = () => {
         if (pDiskLoading) {
             return _jsx(InfoViewerSkeleton, { className: pdiskPageCn('info'), rows: 10 });
         }
-        return (_jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info'), isPDiskPage: true }));
+        return _jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info') });
+    };
+    const renderTabs = () => {
+        return (_jsx("div", { className: pdiskPageCn('tabs'), children: _jsx(Tabs, { size: "l", items: PDISK_PAGE_TABS, activeTab: pDiskTab, wrapTo: ({ id }, tabNode) => {
+                    const path = pDiskParamsDefined
+                        ? getPDiskPagePath(pDiskId, nodeId, { activeTab: id })
+                        : undefined;
+                    return (_jsx(InternalLink, { to: path, children: tabNode }, id));
+                } }) }));
     };
-    const renderGroupsTable = () => {
-        return _jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading });
+    const renderTabsContent = () => {
+        switch (pDiskTab) {
+            case 'diskDistribution': {
+                return pDiskData ? _jsx(PDiskSpaceDistribution, { data: pDiskData }) : null;
+            }
+            case 'groups': {
+                return pDiskParamsDefined ? (_jsx(PDiskGroups, { nodeId: nodeId, pDiskId: pDiskId })) : null;
+            }
+            default:
+                return null;
+        }
+    };
+    const renderError = () => {
+        if (!pdiskDataQuery.error) {
+            return null;
+        }
+        return _jsx(ResponseError, { error: pdiskDataQuery.error });
     };
-    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] }));
+    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderError(), renderInfo(), renderTabs(), renderTabsContent()] }));
 }

package/dist/containers/PDiskPage/PDiskPage.scss

@@ -15,13 +15,16 @@
     &__title,
     &__info,
     &__controls,
-    &__groups-title {
+    &__tabs {
         position: sticky;
         left: 0;
     }
 
-    &__groups-title {
-        @include header-1-typography();
+    &__meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--g-spacing-4);
     }
 
     &__controls {
@@ -30,7 +33,7 @@
         gap: var(--g-spacing-2);
     }
 
-    &__auto-refresh-control {
-        margin-inline-start: auto;
+    &__tabs {
+        @include tabs-wrapper-styles();
     }
 }

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

@@ -0,0 +1,7 @@
+import type { PDiskData } from '../../../store/reducers/pdisk/types';
+import './PDiskSpaceDistribution.scss';
+interface PDiskSpaceDistributionProps {
+    data: PDiskData;
+}
+export declare function PDiskSpaceDistribution({ data }: PDiskSpaceDistributionProps): string | import("react/jsx-runtime").JSX.Element;
+export {};