ydb-embedded-ui 4.18.0 → 4.19.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [4.19.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.0...v4.19.1) (2023-10-11)
+
+
+### Bug Fixes
+
+* add storage value to tb formatter ([#547](https://github.com/ydb-platform/ydb-embedded-ui/issues/547)) ([f1e4377](https://github.com/ydb-platform/ydb-embedded-ui/commit/f1e4377443be493a7072aca33a62b51e381f6841))
+
+## [4.19.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.18.0...v4.19.0) (2023-10-11)
+
+
+### Features
+
+* **TenantOverview:** add storage tab to tenant diagnostics ([#541](https://github.com/ydb-platform/ydb-embedded-ui/issues/541)) ([c4cdd35](https://github.com/ydb-platform/ydb-embedded-ui/commit/c4cdd354cd9780dfd7dfee80ec225f59d4230625))
+
+
+### Bug Fixes
+
+* add NodeId to NodeAddress type ([#545](https://github.com/ydb-platform/ydb-embedded-ui/issues/545)) ([3df82d3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3df82d39466696ec61e34b915b355dacd0482ebc))
+* display database name in node info ([#543](https://github.com/ydb-platform/ydb-embedded-ui/issues/543)) ([788ad9a](https://github.com/ydb-platform/ydb-embedded-ui/commit/788ad9a7a1a56ffe93ec7e4861ded6cceef72d9c))
+* fix cpu usage calculation ([#542](https://github.com/ydb-platform/ydb-embedded-ui/issues/542)) ([f46b03d](https://github.com/ydb-platform/ydb-embedded-ui/commit/f46b03d6157f19017560d71a9ab6591f045bad96))
+* fix incorrect data display in ProgressViewer ([#546](https://github.com/ydb-platform/ydb-embedded-ui/issues/546)) ([be077b8](https://github.com/ydb-platform/ydb-embedded-ui/commit/be077b83a4b4cf083d506e77abf0f2b6570c87d3))
+
 ## [4.18.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.17.0...v4.18.0) (2023-09-25)
 
 

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -23,7 +23,7 @@
     }
 
     .info-viewer__label {
-        min-width: 60px;
+        min-width: 100px;
     }
 
     &__section-title {

package/dist/components/FullNodeViewer/FullNodeViewer.tsx

@@ -5,7 +5,7 @@ import type {TSystemStateInfo} from '../../types/api/nodes';
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
 
-import InfoViewer from '../InfoViewer/InfoViewer';
+import InfoViewer, {type InfoViewerItem} from '../InfoViewer/InfoViewer';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 
@@ -24,16 +24,25 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
         value: Address,
     }));
 
-    const commonInfo = [
+    const commonInfo: InfoViewerItem[] = [];
+
+    // Do not add DB field for static nodes (they have no Tenants)
+    if (node?.Tenants?.length) {
+        commonInfo.push({label: 'Database', value: node.Tenants[0]});
+    }
+
+    commonInfo.push(
         {label: 'Version', value: node?.Version},
         {label: 'Uptime', value: calcUptime(node?.StartTime)},
         {label: 'DC', value: node?.DataCenterDescription},
         {label: 'Rack', value: node?.Rack},
-    ];
+    );
 
     const averageInfo = node?.LoadAverage?.map((load, loadIndex) => ({
         label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
-        value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
+        value: (
+            <ProgressViewer value={load} percents={true} colorizeProgress={true} capacity={100} />
+        ),
     }));
 
     return (

package/dist/components/ProgressViewer/ProgressViewer.tsx

@@ -46,7 +46,7 @@ interface ProgressViewerProps {
 
 export function ProgressViewer({
     value,
-    capacity = 100,
+    capacity,
     formatValues,
     percents,
     className,
@@ -84,13 +84,19 @@ export function ProgressViewer({
 
     const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
 
-    if (!isNaN(fillWidth)) {
+    const renderContent = () => {
+        if (capacityText) {
+            return `${valueText} ${divider} ${capacityText}`;
+        }
+
+        return valueText;
+    };
+
+    if (!isNaN(Number(value))) {
         return (
             <div className={b({size}, className)}>
                 <div className={b('line', {bg})} style={lineStyle}></div>
-                <span
-                    className={b('text', {text})}
-                >{`${valueText} ${divider} ${capacityText}`}</span>
+                <span className={b('text', {text})}>{renderContent()}</span>
             </div>
         );
     }

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -120,6 +120,7 @@ export function getNodesColumns({
                 row.LoadAverage && row.LoadAverage.length > 0 ? (
                     <ProgressViewer
                         value={row.LoadAverage[0]}
+                        capacity={100}
                         percents={true}
                         colorizeProgress={true}
                     />

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -23,7 +23,7 @@ export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesMap) => {
     const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = data;
 
     const pdiskData: InfoViewerItem[] = [
-        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
+        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId}) || '-'},
         {label: 'State', value: State || 'not available'},
         {label: 'Type', value: getPDiskType(data) || 'unknown'},
     ];

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,25 +1,12 @@
-import cn from 'bem-cn-lite';
-
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-import type {ValueOf} from '../../../types/common';
 import type {NodesMap} from '../../../types/store/nodesList';
 import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {HandleSort} from '../../../utils/hooks/useTableSort';
-
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {getUsage, isFullVDiskData, isSortableStorageProperty} from '../../../utils/storage';
-
-import shieldIcon from '../../../assets/icons/shield.svg';
-import {Stack} from '../../../components/Stack/Stack';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
+import {isSortableStorageProperty} from '../../../utils/storage';
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
-import {VDisk} from '../VDisk';
-import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
+import {getStorageGroupsColumns} from './getStorageGroupsColumns';
 
 import i18n from './i18n';
 import './StorageGroups.scss';
@@ -39,8 +26,6 @@ const TableColumnsIds = {
     Degraded: 'Degraded',
 } as const;
 
-type TableColumnId = ValueOf<typeof TableColumnsIds>;
-
 interface StorageGroupsProps {
     data: PreparedStorageGroup[];
     nodes?: NodesMap;
@@ -51,23 +36,6 @@ interface StorageGroupsProps {
     handleSort?: HandleSort;
 }
 
-const tableColumnsNames: Record<TableColumnId, string> = {
-    PoolName: 'Pool Name',
-    Kind: 'Type',
-    Erasure: 'Erasure',
-    GroupId: 'Group ID',
-    Used: 'Used',
-    Limit: 'Limit',
-    UsedSpaceFlag: 'Space',
-    Usage: 'Usage',
-    Read: 'Read',
-    Write: 'Write',
-    VDisks: 'VDisks',
-    Degraded: 'Degraded',
-};
-
-const b = cn('global-storage-groups');
-
 export function StorageGroups({
     data,
     tableSettings,
@@ -77,204 +45,7 @@ export function StorageGroups({
     sort,
     handleSort,
 }: StorageGroupsProps) {
-    const rawColumns: Column<PreparedStorageGroup>[] = [
-        {
-            name: TableColumnsIds.PoolName,
-            header: tableColumnsNames[TableColumnsIds.PoolName],
-            width: 250,
-            render: ({row}) => {
-                const splitted = row.PoolName?.split('/');
-                return (
-                    <div className={b('pool-name-wrapper')}>
-                        {splitted && (
-                            <Popover
-                                content={row.PoolName}
-                                placement={['right']}
-                                behavior={PopoverBehavior.Immediate}
-                            >
-                                <span className={b('pool-name')}>
-                                    {splitted[splitted.length - 1]}
-                                </span>
-                            </Popover>
-                        )}
-                    </div>
-                );
-            },
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.Kind,
-            header: tableColumnsNames[TableColumnsIds.Kind],
-            // prettier-ignore
-            render: ({row}) => (
-                <>
-                    <Label>{row.Kind || '—'}</Label>
-                    {' '}
-                    {row.Encryption && (
-                        <Popover
-                            content={i18n('encrypted')}
-                            placement="right"
-                            behavior={PopoverBehavior.Immediate}
-                        >
-                            <Label>
-                                <Icon data={shieldIcon} />
-                            </Label>
-                        </Popover>
-                    )}
-                </>
-            ),
-        },
-        {
-            name: TableColumnsIds.Erasure,
-            header: tableColumnsNames[TableColumnsIds.Erasure],
-            render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.Degraded,
-            header: tableColumnsNames[TableColumnsIds.Degraded],
-            width: 100,
-            render: ({row}) =>
-                row.Degraded ? (
-                    <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
-                ) : (
-                    '-'
-                ),
-            align: DataTable.LEFT,
-            defaultOrder: DataTable.DESCENDING,
-        },
-        {
-            name: TableColumnsIds.Usage,
-            header: tableColumnsNames[TableColumnsIds.Usage],
-            width: 100,
-            render: ({row}) => {
-                // without a limit the usage can be evaluated as 0,
-                // but the absence of a value is more clear
-                return row.Limit ? (
-                    <Label
-                        theme={getUsageSeverityForStorageGroup(row.Usage)}
-                        className={b('usage-label', {overload: row.Usage >= 90})}
-                    >
-                        {row.Usage}%
-                    </Label>
-                ) : (
-                    '-'
-                );
-            },
-            // without a limit exclude usage from sort to display at the bottom
-            sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.GroupId,
-            header: tableColumnsNames[TableColumnsIds.GroupId],
-            width: 130,
-            render: ({row}) => {
-                return <span className={b('group-id')}>{row.GroupID}</span>;
-            },
-            sortAccessor: (row) => Number(row.GroupID),
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Used,
-            header: tableColumnsNames[TableColumnsIds.Used],
-            width: 100,
-            render: ({row}) => {
-                return bytesToGB(row.Used, true);
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Limit,
-            header: tableColumnsNames[TableColumnsIds.Limit],
-            width: 100,
-            render: ({row}) => {
-                return bytesToGB(row.Limit);
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.UsedSpaceFlag,
-            header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
-            width: 110,
-            render: ({row}) => {
-                const value = row.UsedSpaceFlag;
-
-                let color = 'Red';
-
-                if (value < 100) {
-                    color = 'Green';
-                } else if (value < 10000) {
-                    color = 'Yellow';
-                } else if (value < 1000000) {
-                    color = 'Orange';
-                }
-                return <EntityStatus status={color} />;
-            },
-            align: DataTable.CENTER,
-        },
-
-        {
-            name: TableColumnsIds.Read,
-            header: tableColumnsNames[TableColumnsIds.Read],
-            width: 100,
-            render: ({row}) => {
-                return row.Read ? bytesToSpeed(row.Read) : '-';
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Write,
-            header: tableColumnsNames[TableColumnsIds.Write],
-            width: 100,
-            render: ({row}) => {
-                return row.Write ? bytesToSpeed(row.Write) : '-';
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.VDisks,
-            className: b('vdisks-column'),
-            header: tableColumnsNames[TableColumnsIds.VDisks],
-            render: ({row}) => (
-                <div className={b('vdisks-wrapper')}>
-                    {row.VDisks?.map((vDisk) => {
-                        const donors = vDisk.Donors;
-
-                        return donors && donors.length > 0 ? (
-                            <Stack
-                                className={b('vdisks-item')}
-                                key={stringifyVdiskId(vDisk.VDiskId)}
-                            >
-                                <VDisk data={vDisk} nodes={nodes} />
-                                {donors.map((donor) => {
-                                    const isFullData = isFullVDiskData(donor);
-
-                                    return (
-                                        <VDisk
-                                            data={isFullData ? donor : {...donor, DonorMode: true}}
-                                            // donor and acceptor are always in the same group
-                                            nodes={nodes}
-                                            key={stringifyVdiskId(
-                                                isFullData ? donor.VDiskId : donor,
-                                            )}
-                                        />
-                                    );
-                                })}
-                            </Stack>
-                        ) : (
-                            <div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
-                                <VDisk data={vDisk} nodes={nodes} />
-                            </div>
-                        );
-                    })}
-                </div>
-            ),
-            align: DataTable.CENTER,
-            sortable: false,
-            width: 900,
-        },
-    ];
+    const rawColumns: Column<PreparedStorageGroup>[] = getStorageGroupsColumns(nodes);
 
     let columns = rawColumns.map((column) => ({
         ...column,

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

@@ -0,0 +1,278 @@
+import cn from 'bem-cn-lite';
+
+import DataTable, {type Column} from '@gravity-ui/react-data-table';
+import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import shieldIcon from '../../../assets/icons/shield.svg';
+import type {ValueOf} from '../../../types/common';
+import type {NodesMap} from '../../../types/store/nodesList';
+import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
+import {getUsage, isFullVDiskData} from '../../../utils/storage';
+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 {VDisk} from '../VDisk';
+import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
+import i18n from './i18n';
+import './StorageGroups.scss';
+
+const b = cn('global-storage-groups');
+
+const GROUPS_COLUMNS_IDS = {
+    PoolName: 'PoolName',
+    Kind: 'Kind',
+    Erasure: 'Erasure',
+    GroupId: 'GroupId',
+    Used: 'Used',
+    Limit: 'Limit',
+    Usage: 'Usage',
+    UsedSpaceFlag: 'UsedSpaceFlag',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Degraded: 'Degraded',
+} as const;
+
+type GroupsColumns = ValueOf<typeof GROUPS_COLUMNS_IDS>;
+
+const tableColumnsNames: Record<GroupsColumns, string> = {
+    PoolName: 'Pool Name',
+    Kind: 'Type',
+    Erasure: 'Erasure',
+    GroupId: 'Group ID',
+    Used: 'Used',
+    Limit: 'Limit',
+    UsedSpaceFlag: 'Space',
+    Usage: 'Usage',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Degraded: 'Degraded',
+};
+
+const poolNameColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.PoolName,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.PoolName],
+    width: 250,
+    render: ({row}) => {
+        const splitted = row.PoolName?.split('/');
+        return (
+            <div className={b('pool-name-wrapper')}>
+                {splitted && (
+                    <Popover
+                        content={row.PoolName}
+                        placement={['right']}
+                        behavior={PopoverBehavior.Immediate}
+                    >
+                        <span className={b('pool-name')}>{splitted[splitted.length - 1]}</span>
+                    </Popover>
+                )}
+            </div>
+        );
+    },
+    align: DataTable.LEFT,
+};
+
+const kindColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Kind,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Kind],
+    // prettier-ignore
+    render: ({row}) => (
+        <>
+            <Label>{row.Kind || '—'}</Label>
+            {' '}
+            {row.Encryption && (
+                <Popover
+                    content={i18n('encrypted')}
+                    placement="right"
+                    behavior={PopoverBehavior.Immediate}
+                >
+                    <Label>
+                        <Icon data={shieldIcon} />
+                    </Label>
+                </Popover>
+            )}
+        </>
+    ),
+    sortable: false,
+};
+
+const erasureColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Erasure,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Erasure],
+    render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
+    align: DataTable.LEFT,
+    sortable: false,
+};
+
+const degradedColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Degraded,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Degraded],
+    width: 100,
+    render: ({row}) =>
+        row.Degraded ? (
+            <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
+        ) : (
+            '-'
+        ),
+    align: DataTable.LEFT,
+    defaultOrder: DataTable.DESCENDING,
+};
+
+const usageColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Usage,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Usage],
+    width: 100,
+    render: ({row}) => {
+        // without a limit the usage can be evaluated as 0,
+        // but the absence of a value is more clear
+        return row.Limit ? (
+            <Label
+                theme={getUsageSeverityForStorageGroup(row.Usage)}
+                className={b('usage-label', {overload: row.Usage >= 90})}
+            >
+                {row.Usage}%
+            </Label>
+        ) : (
+            '-'
+        );
+    },
+    // without a limit exclude usage from sort to display at the bottom
+    sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
+    align: DataTable.LEFT,
+    sortable: false,
+};
+
+const groupIdColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.GroupId,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.GroupId],
+    width: 130,
+    render: ({row}) => {
+        return <span className={b('group-id')}>{row.GroupID}</span>;
+    },
+    sortAccessor: (row) => Number(row.GroupID),
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const usedColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Used,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Used],
+    width: 100,
+    render: ({row}) => {
+        return bytesToGB(row.Used, true);
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const limitColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Limit,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Limit],
+    width: 100,
+    render: ({row}) => {
+        return bytesToGB(row.Limit);
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const usedSpaceFlagColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.UsedSpaceFlag,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.UsedSpaceFlag],
+    width: 110,
+    render: ({row}) => {
+        const value = row.UsedSpaceFlag;
+
+        let color = 'Red';
+
+        if (value < 100) {
+            color = 'Green';
+        } else if (value < 10000) {
+            color = 'Yellow';
+        } else if (value < 1000000) {
+            color = 'Orange';
+        }
+        return <EntityStatus status={color} />;
+    },
+    align: DataTable.CENTER,
+};
+
+const readColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Read,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Read],
+    width: 100,
+    render: ({row}) => {
+        return row.Read ? bytesToSpeed(row.Read) : '-';
+    },
+    align: DataTable.RIGHT,
+};
+
+const writeColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Write,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Write],
+    width: 100,
+    render: ({row}) => {
+        return row.Write ? bytesToSpeed(row.Write) : '-';
+    },
+    align: DataTable.RIGHT,
+};
+
+const getVdiscksColumn = (nodes?: NodesMap): Column<PreparedStorageGroup> => ({
+    name: GROUPS_COLUMNS_IDS.VDisks,
+    className: b('vdisks-column'),
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.VDisks],
+    render: ({row}) => (
+        <div className={b('vdisks-wrapper')}>
+            {row.VDisks?.map((vDisk) => {
+                const donors = vDisk.Donors;
+
+                return donors && donors.length > 0 ? (
+                    <Stack className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
+                        <VDisk data={vDisk} nodes={nodes} />
+                        {donors.map((donor) => {
+                            const isFullData = isFullVDiskData(donor);
+
+                            return (
+                                <VDisk
+                                    data={isFullData ? donor : {...donor, DonorMode: true}}
+                                    // donor and acceptor are always in the same group
+                                    nodes={nodes}
+                                    key={stringifyVdiskId(isFullData ? donor.VDiskId : donor)}
+                                />
+                            );
+                        })}
+                    </Stack>
+                ) : (
+                    <div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
+                        <VDisk data={vDisk} nodes={nodes} />
+                    </div>
+                );
+            })}
+        </div>
+    ),
+    align: DataTable.CENTER,
+    width: 900,
+});
+
+export const getStorageTopGroupsColumns = (): Column<PreparedStorageGroup>[] => {
+    return [groupIdColumn, kindColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
+};
+
+export const getStorageGroupsColumns = (nodes?: NodesMap): Column<PreparedStorageGroup>[] => {
+    return [
+        poolNameColumn,
+        kindColumn,
+        erasureColumn,
+        degradedColumn,
+        usageColumn,
+        groupIdColumn,
+        usedColumn,
+        limitColumn,
+        usedSpaceFlagColumn,
+        readColumn,
+        writeColumn,
+        getVdiscksColumn(nodes),
+    ];
+};