ydb-embedded-ui 1.10.3 → 1.12.0

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

@@ -1,11 +1,13 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
+import {Label, Popover, PopoverBehavior} from '@yandex-cloud/uikit';
 
-import Vdisk from '../Vdisk/Vdisk';
+import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+
+import {TVDiskStateInfo} from '../../../types/api/storage';
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 //@ts-ignore
@@ -13,6 +15,9 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 //@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
 
+import Vdisk from '../Vdisk/Vdisk';
+import {isFullDonorData, getDegradedSeverity, getUsageSeverity, getUsage} from '../utils';
+
 import './StorageGroups.scss';
 
 enum TableColumnsIds {
@@ -44,11 +49,11 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     Used: 'Used',
     Limit: 'Limit',
     UsedSpaceFlag: 'Space',
-    UsedPercents: 'Used percents',
+    UsedPercents: 'Usage',
     Read: 'Read',
     Write: 'Write',
     VDisks: 'VDisks',
-    Missing: 'Missing',
+    Missing: 'Degraded',
 };
 
 const b = cn('global-storage-groups');
@@ -57,8 +62,8 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     switch (visibleEntities) {
         case VisibleEntities.All: {
             return {
-                columnId: TableColumnsIds.GroupID,
-                order: DataTable.ASCENDING,
+                columnId: TableColumnsIds.Missing,
+                order: DataTable.DESCENDING,
             };
         }
         case VisibleEntities.Missing: {
@@ -105,6 +110,34 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             },
             align: DataTable.LEFT,
         },
+        {
+            name: TableColumnsIds.Missing,
+            header: tableColumnsNames[TableColumnsIds.Missing],
+            width: 100,
+            render: ({value, row}) => value ? (
+                <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label>
+            ) : '-',
+            align: DataTable.LEFT,
+            defaultOrder: DataTable.DESCENDING,
+        },
+        {
+            name: TableColumnsIds.UsedPercents,
+            header: tableColumnsNames[TableColumnsIds.UsedPercents],
+            width: 100,
+            render: ({row}) => {
+                const usage = getUsage(row, 5);
+                return (
+                    <Label
+                        theme={getUsageSeverity(usage)}
+                        className={b('usage-label', {overload: usage >= 100})}
+                    >
+                        ≥ {usage}%
+                    </Label>
+                );
+            },
+            sortAccessor: getUsage,
+            align: DataTable.LEFT,
+        },
         {
             name: TableColumnsIds.GroupID,
             header: tableColumnsNames[TableColumnsIds.GroupID],
@@ -132,18 +165,6 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             },
             align: DataTable.RIGHT,
         },
-        // {
-        //     name: tableColumnsIds.UsedPercents,
-        //     header: tableColumnsNames[tableColumnsIds.UsedPercents],
-        //     width: '100px',
-        //     render: ({row}) => {
-        //         return (
-        //             Math.round((row[tableColumnsIds.Used] * 100) / row[tableColumnsIds.Limit]) +
-        //             '%'
-        //         );
-        //     },
-        //     align: DataTable.RIGHT,
-        // },
         {
             name: TableColumnsIds.UsedSpaceFlag,
             header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
@@ -181,26 +202,44 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             },
             align: DataTable.RIGHT,
         },
-        {
-            name: TableColumnsIds.Missing,
-            header: tableColumnsNames[TableColumnsIds.Missing],
-            width: 100,
-            align: DataTable.CENTER,
-            defaultOrder: DataTable.DESCENDING,
-        },
         {
             name: TableColumnsIds.VDisks,
+            className: b('vdisks-column'),
             header: tableColumnsNames[TableColumnsIds.VDisks],
             render: ({value, row}) => (
                 <div className={b('vdisks-wrapper')}>
-                    {_.map(value as any, (el) => (
-                        <Vdisk
-                            key={stringifyVdiskId(el.VDiskId)}
-                            {...el}
-                            PoolName={row[TableColumnsIds.PoolName]}
-                            nodes={nodes}
-                        />
-                    ))}
+                    {_.map(value as TVDiskStateInfo[], (el) => {
+                        const donors = Array.isArray(el.Donors) ? el.Donors.filter(isFullDonorData) : [];
+
+                        return (
+                            donors.length > 0 ? (
+                                <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                    <Vdisk
+                                        {...el}
+                                        PoolName={row[TableColumnsIds.PoolName]}
+                                        nodes={nodes}
+                                    />
+                                    {donors.map((donor) => (
+                                        <Vdisk
+                                            {...donor}
+                                            // donor and acceptor are always in the same group
+                                            PoolName={row[TableColumnsIds.PoolName]}
+                                            nodes={nodes}
+                                            key={stringifyVdiskId(donor.VDiskId)}
+                                        />
+                                    ))}
+                                </Stack>
+                            ) : (
+                                <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                    <Vdisk
+                                        {...el}
+                                        PoolName={row[TableColumnsIds.PoolName]}
+                                        nodes={nodes}
+                                    />
+                                </div>
+                            )
+                        );
+                    })}
                 </div>
             ),
             align: DataTable.CENTER,

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -1,13 +1,13 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
-import {Popup} from '@yandex-cloud/uikit';
+import {Label, Popup} from '@yandex-cloud/uikit';
 
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
+import {InfoViewer} from '../../../components/InfoViewer';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -26,6 +26,9 @@ const propTypes = {
     FrontQueues: PropTypes.string,
     Replicated: PropTypes.bool,
     PoolName: PropTypes.string,
+    VDiskId: PropTypes.object,
+    DonorMode: PropTypes.bool,
+    nodes: PropTypes.object,
 };
 
 const stateSeverity = {
@@ -53,7 +56,7 @@ function Vdisk(props) {
 
     // determine disk status severity
     useEffect(() => {
-        const {DiskSpace, VDiskState, FrontQueues, Replicated} = props;
+        const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = props;
 
         // if the disk is not available, this determines its status severity regardless of other features
         if (!VDiskState) {
@@ -66,7 +69,10 @@ function Vdisk(props) {
         const FrontQueuesSeverity = Math.min(colorSeverity.Orange, getColorSeverity(FrontQueues));
 
         let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
-        if (!Replicated && newSeverity === colorSeverity.Green) {
+
+        // donors are always in the not replicated state since they are leftovers
+        // painting them blue is useless
+        if (!Replicated && !DonorMode && newSeverity === colorSeverity.Green) {
             newSeverity = colorSeverity.Blue;
         }
 
@@ -95,62 +101,62 @@ function Vdisk(props) {
             ReadThroughput,
             WriteThroughput,
         } = props;
-        const vdiskData = [{property: 'VDisk', value: stringifyVdiskId(VDiskId)}];
-        vdiskData.push({property: 'State', value: VDiskState ?? 'not available'});
-        PoolName && vdiskData.push({property: 'StoragePool', value: PoolName});
+        const vdiskData = [{label: 'VDisk', value: stringifyVdiskId(VDiskId)}];
+        vdiskData.push({label: 'State', value: VDiskState ?? 'not available'});
+        PoolName && vdiskData.push({label: 'StoragePool', value: PoolName});
 
         SatisfactionRank &&
             SatisfactionRank.FreshRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
             vdiskData.push({
-                property: 'Fresh',
+                label: 'Fresh',
                 value: SatisfactionRank.FreshRank.Flag,
             });
 
         SatisfactionRank &&
             SatisfactionRank.LevelRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
             vdiskData.push({
-                property: 'Level',
+                label: 'Level',
                 value: SatisfactionRank.LevelRank.Flag,
             });
 
         SatisfactionRank &&
             SatisfactionRank.FreshRank?.RankPercent &&
             vdiskData.push({
-                property: 'Fresh',
+                label: 'Fresh',
                 value: SatisfactionRank.FreshRank.RankPercent,
             });
 
         SatisfactionRank &&
             SatisfactionRank.LevelRank?.RankPercent &&
             vdiskData.push({
-                property: 'Level',
+                label: 'Level',
                 value: SatisfactionRank.LevelRank.RankPercent,
             });
 
         DiskSpace &&
             DiskSpace !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({property: 'Space', value: DiskSpace});
+            vdiskData.push({label: 'Space', value: DiskSpace});
 
         FrontQueues &&
             FrontQueues !== diskProgressColors[colorSeverity.Green] &&
-            vdiskData.push({property: 'FrontQueues', value: FrontQueues});
+            vdiskData.push({label: 'FrontQueues', value: FrontQueues});
 
-        !Replicated && vdiskData.push({property: 'Replicated', value: 'NO'});
+        !Replicated && vdiskData.push({label: 'Replicated', value: 'NO'});
 
-        UnsyncedVDisks && vdiskData.push({property: 'UnsyncVDisks', value: UnsyncedVDisks});
+        UnsyncedVDisks && vdiskData.push({label: 'UnsyncVDisks', value: UnsyncedVDisks});
 
         Boolean(Number(AllocatedSize)) &&
             vdiskData.push({
-                property: 'Allocated',
+                label: 'Allocated',
                 value: bytesToGB(AllocatedSize),
             });
 
         Boolean(Number(ReadThroughput)) &&
-            vdiskData.push({property: 'Read', value: bytesToSpeed(ReadThroughput)});
+            vdiskData.push({label: 'Read', value: bytesToSpeed(ReadThroughput)});
 
         Boolean(Number(WriteThroughput)) &&
             vdiskData.push({
-                property: 'Write',
+                label: 'Write',
                 value: bytesToSpeed(WriteThroughput),
             });
 
@@ -165,61 +171,54 @@ function Vdisk(props) {
             diskProgressColors[colorSeverity.Yellow],
         ];
         if (PDisk && nodes) {
-            const pdiskData = [{property: 'PDisk', value: getPDiskId(PDisk)}];
+            const pdiskData = [{label: 'PDisk', value: getPDiskId(PDisk)}];
             pdiskData.push({
-                property: 'State',
+                label: 'State',
                 value: PDisk.State || 'not available',
             });
-            pdiskData.push({property: 'Type', value: getPDiskType(PDisk) || 'unknown'});
-            PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
+            pdiskData.push({label: 'Type', value: getPDiskType(PDisk) || 'unknown'});
+            PDisk.NodeId && pdiskData.push({label: 'Node Id', value: PDisk.NodeId});
             PDisk.NodeId &&
                 nodes[PDisk.NodeId] &&
-                pdiskData.push({property: 'Host', value: nodes[PDisk.NodeId]});
-            PDisk.Path && pdiskData.push({property: 'Path', value: PDisk.Path});
+                pdiskData.push({label: 'Host', value: nodes[PDisk.NodeId]});
+            PDisk.Path && pdiskData.push({label: 'Path', value: PDisk.Path});
             pdiskData.push({
-                property: 'Available',
+                label: 'Available',
                 value: `${bytesToGB(PDisk.AvailableSize)} of ${bytesToGB(PDisk.TotalSize)}`,
             });
             errorColors.includes(PDisk.Realtime) &&
-                pdiskData.push({property: 'Realtime', value: PDisk.Realtime});
+                pdiskData.push({label: 'Realtime', value: PDisk.Realtime});
             errorColors.includes(PDisk.Device) &&
-                pdiskData.push({property: 'Device', value: PDisk.Device});
+                pdiskData.push({label: 'Device', value: PDisk.Device});
             return pdiskData;
         }
         return null;
     };
     /* eslint-enable */
 
-    const renderPopup = () => {
-        const vdiskData = prepareVdiskData();
-        const pdiskData = preparePdiskData();
-        return (
-            <Popup
-                className={b('popup-wrapper')}
-                anchorRef={anchor}
-                open={isPopupVisible}
-                placement={['top', 'bottom']}
-                hasArrow
-            >
-                <div className={b('popup-content')}>
-                    <div className={b('popup-section-name')}>VDisk</div>
-                    {_.map(vdiskData, (row) => (
-                        <React.Fragment key={row.property}>
-                            <div className={b('property')}>{row.property}</div>
-                            <div className={b('value')}>{row.value}</div>
-                        </React.Fragment>
-                    ))}
-                    <div className={b('popup-section-name')}>PDisk</div>
-                    {_.map(pdiskData, (row) => (
-                        <React.Fragment key={row.property}>
-                            <div className={b('property')}>{row.property}</div>
-                            <div className={b('value')}>{row.value}</div>
-                        </React.Fragment>
-                    ))}
-                </div>
-            </Popup>
-        );
-    };
+    const renderPopup = () => (
+        <Popup
+            className={b('popup-wrapper')}
+            anchorRef={anchor}
+            open={isPopupVisible}
+            placement={['top', 'bottom']}
+            // bigger offset for easier switching to neighbour nodes
+            // matches the default offset for popup with arrow out of a sense of beauty
+            offset={[0, 12]}
+        >
+            {props.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
+            <InfoViewer
+                title="VDisk"
+                info={prepareVdiskData()}
+                size="s"
+            />
+            <InfoViewer
+                title="PDisk"
+                info={preparePdiskData()}
+                size="s"
+            />
+        </Popup>
+    );
 
     const vdiskAllocatedPercent = useMemo(() => {
         const {AvailableSize, AllocatedSize, PDisk} = props;
@@ -243,13 +242,13 @@ function Vdisk(props) {
                     href={
                         props.NodeId
                             ? createHref(
-                                  routes.node,
-                                  {id: props.NodeId, activeTab: STRUCTURE},
-                                  {
-                                      pdiskId: props.PDisk?.PDiskId,
-                                      vdiskId: stringifyVdiskId(props.VDiskId),
-                                  },
-                              )
+                                routes.node,
+                                {id: props.NodeId, activeTab: STRUCTURE},
+                                {
+                                    pdiskId: props.PDisk?.PDiskId,
+                                    vdiskId: stringifyVdiskId(props.VDiskId),
+                                },
+                            )
                             : undefined
                     }
                 />

package/dist/containers/Storage/Vdisk/Vdisk.scss

@@ -1,35 +1,16 @@
 .vdisk-storage {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-
-    max-width: 200px;
-    margin-right: 10px;
-
-    cursor: pointer;
-
-    &:last-child {
-        margin-right: 0px;
-    }
     &__popup-wrapper {
-        padding: 5px 10px;
-    }
-    &__popup-content {
-        display: grid;
-        justify-items: stretch;
-        column-gap: 5px;
-    }
-    &__popup-section-name {
-        grid-column: 1 / 3;
+        padding: 12px;
 
-        margin: 5px 0;
+        .info-viewer + .info-viewer {
+            margin-top: 8px;
+            padding-top: 8px;
 
-        font-weight: 500;
-        text-align: center;
-
-        border-bottom: 1px solid var(--yc-color-line-generic);
+            border-top: 1px solid var(--yc-color-line-generic);
+        }
     }
-    &__property {
-        text-align: right;
+
+    &__donor-label {
+        margin-bottom: 8px;
     }
 }

package/dist/containers/Storage/Vdisk/__tests__/colors.tsx

@@ -0,0 +1,163 @@
+import {render} from '@testing-library/react'
+
+import VDisk from '../Vdisk'
+
+describe('VDisk state', () => {
+    it('Should determine severity based on the highest value among VDiskState, DiskSpace and FrontQueues', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Yellow" // severity 3, yellow
+                    FrontQueues="Green" // severity 1, green
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="PDiskError" // severity 5, red
+                    DiskSpace="Yellow" // severity 3, yellow
+                    FrontQueues="Green" // severity 1, green
+                />
+                <VDisk
+                    VDiskId={{Domain: 3}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Yellow" // severity 3, yellow
+                    FrontQueues="Orange" // severity 4, orange
+                />
+            </>
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_yellow\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+        expect(disk3.className).toMatch(/_orange\b/i);
+    });
+
+    it('Should not pick the highest severity based on FrontQueues value', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Green" // severity 1, green
+                    FrontQueues="Red" // severity 5, red
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="OK" // severity 1, green
+                    DiskSpace="Red" // severity 5, red
+                    FrontQueues="Red" // severity 5, red
+                />
+            </>
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).not.toMatch(/_red\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
+    it('Should display as unavailable when no VDiskState is provided', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk VDiskId={{Domain: 1}} />
+                <VDisk VDiskId={{Domain: 2}} VDiskState="OK" />
+                <VDisk VDiskId={{Domain: 3}}                 DiskSpace="Green" />
+                <VDisk VDiskId={{Domain: 4}}                                   FrontQueues="Green" />
+                <VDisk VDiskId={{Domain: 5}} VDiskState="OK" DiskSpace="Green" />
+                <VDisk VDiskId={{Domain: 6}} VDiskState="OK"                   FrontQueues="Green" />
+                <VDisk VDiskId={{Domain: 7}}                 DiskSpace="Green" FrontQueues="Green" />
+                <VDisk VDiskId={{Domain: 8}} VDiskState="OK" DiskSpace="Green" FrontQueues="Green" />
+            </>
+        );
+
+        const [disk1, disk2, disk3, disk4, disk5, disk6, disk7, disk8] = getAllByRole('meter');
+
+        // unavailable disks display with the highest severity
+        expect(disk1.className).toMatch(/_red\b/i);
+        expect(disk2.className).not.toMatch(/_red\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+        expect(disk4.className).toMatch(/_red\b/i);
+        expect(disk5.className).not.toMatch(/_red\b/i);
+        expect(disk6.className).not.toMatch(/_red\b/i);
+        expect(disk7.className).toMatch(/_red\b/i);
+        expect(disk8.className).not.toMatch(/_red\b/i);
+    });
+
+    it('Should display replicating VDisks in OK state with a distinct color', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    Replicated={false}
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="OK" // severity 1, green
+                    Replicated={true}
+                />
+            </>
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_blue\b/i);
+        expect(disk2.className).not.toMatch(/_blue\b/i);
+    });
+
+    it('Should display replicating VDisks in a not-OK state with a regular color', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="Initial" // severity 3, yellow
+                    Replicated={false}
+                    />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="PDiskError" // severity 5, red
+                    Replicated={false}
+                />
+            </>
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        expect(disk1.className).toMatch(/_yellow\b/i);
+        expect(disk2.className).toMatch(/_red\b/i);
+    });
+
+    it('Should always display donor VDisks with a regular color', () => {
+        const {getAllByRole} = render(
+            <>
+                <VDisk
+                    VDiskId={{Domain: 1}}
+                    VDiskState="OK" // severity 1, green
+                    Replicated={false} // donors are always in the not replicated state since they are leftovers
+                    DonorMode
+                />
+                <VDisk
+                    VDiskId={{Domain: 2}}
+                    VDiskState="Initial" // severity 3, yellow
+                    Replicated={false}
+                    DonorMode
+                />
+                <VDisk
+                    VDiskId={{Domain: 3}}
+                    VDiskState="PDiskError" // severity 5, red
+                    Replicated={false}
+                    DonorMode
+                />
+            </>
+        );
+
+        const [disk1, disk2, disk3] = getAllByRole('meter');
+
+        expect(disk1.className).not.toMatch(/_blue\b/i);
+        expect(disk1.className).toMatch(/_green\b/i);
+        expect(disk2.className).toMatch(/_yellow\b/i);
+        expect(disk3.className).toMatch(/_red\b/i);
+    });
+});

package/dist/containers/Storage/utils/index.ts

@@ -1 +1,50 @@
+import type {TVDiskStateInfo, TVSlotId} from '../../../types/api/storage';
+import type {IStoragePoolGroup} from '../../../types/store/storage';
+
 export * from './constants';
+
+export const isFullDonorData = (donor: TVDiskStateInfo | TVSlotId): donor is TVDiskStateInfo =>
+    'VDiskId' in donor;
+
+const generateEvaluator = (warn: number, crit: number) =>
+    (value: number) => {
+        if (0 <= value && value < warn) {
+            return 'success';
+        }
+
+        if (warn <= value && value < crit) {
+            return 'warning';
+        }
+
+        if (crit <= value) {
+            return 'danger';
+        }
+
+        return undefined;
+    };
+
+const defaultDegradationEvaluator = generateEvaluator(1, 2);
+
+const degradationEvaluators = {
+    'block-4-2': generateEvaluator(1, 2),
+    'mirror-3-dc': generateEvaluator(1, 3),
+};
+
+const canEvaluateErasureSpecies = (value?: string): value is keyof typeof degradationEvaluators =>
+    value !== undefined && value in degradationEvaluators;
+
+export const getDegradedSeverity = (group: IStoragePoolGroup) => {
+    const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies) ?
+        degradationEvaluators[group.ErasureSpecies] :
+        defaultDegradationEvaluator;
+
+    return evaluate(group.Missing);
+};
+
+export const getUsageSeverity = generateEvaluator(80, 85);
+
+export const getUsage = (data: IStoragePoolGroup, step = 1) => {
+    const usage = Math.round((data.Used * 100) / data.Limit);
+
+    return Math.floor(usage / step) * step;
+};

package/dist/services/api.d.ts

@@ -4,6 +4,15 @@ interface Window {
             params: {path: string},
             axiosOptions?: {concurrentId?: string},
         ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
+        getStorageInfo: (
+            params: {
+                tenant: string,
+                filter: string,
+                nodeId: string,
+                type: 'Groups' | 'Nodes',
+            },
+            axiosOptions?: {concurrentId?: string},
+        ) => Promise<import('../types/api/storage').TStorageInfo>;
         [method: string]: Function;
     };
 }