feat(Storage): vividly show degraded disks count

Author: ariser

src/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,7 +1,7 @@
 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 {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
@@ -16,7 +16,7 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils';
 
 import Vdisk from '../Vdisk/Vdisk';
-import {isFullDonorData} from '../utils';
+import {isFullDonorData, getDegradedSeverity} from '../utils';
 
 import './StorageGroups.scss';
 
@@ -53,7 +53,7 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     Read: 'Read',
     Write: 'Write',
     VDisks: 'VDisks',
-    Missing: 'Missing',
+    Missing: 'Degraded',
 };
 
 const b = cn('global-storage-groups');
@@ -62,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: {
@@ -110,6 +110,16 @@ 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.GroupID,
             header: tableColumnsNames[TableColumnsIds.GroupID],
@@ -186,13 +196,6 @@ 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'),

src/containers/Storage/utils/index.ts

@@ -1,6 +1,42 @@
 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);
+};

src/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;
     };
 }

src/types/api/storage.ts

@@ -170,3 +170,49 @@ export interface TVDiskStateInfo {
      */
     WriteThroughput?: string;
 }
+
+export interface TBSGroupStateInfo {
+    /** uint32 */
+    GroupID?: string;
+    ErasureSpecies?: string;
+    VDisks?: TVDiskStateInfo[];
+    /** uint64 */
+    ChangeTime?: string;
+    /** uint32 */
+    NodeId?: string; // filled during merge
+    /** uint32 */
+    GroupGeneration?: string;
+    Overall?: EFlag;
+    Latency?: EFlag;
+    /** uint32 */
+    Count?: string; // filled during group count
+    StoragePoolName?: string; // from BS_CONTROLLER
+}
+
+export interface TStoragePoolInfo {
+    Overall?: EFlag;
+    Name?: string;
+    Kind?: string;
+    Groups?: TBSGroupStateInfo[];
+    /** uint64 */
+    AcquiredUnits?: string;
+    AcquiredIOPS?: number;
+    /** uint64 */
+    AcquiredThroughput?: string;
+    /** uint64 */
+    AcquiredSize?: string;
+    MaximumIOPS?: number;
+    /** uint64 */
+    MaximumThroughput?: string;
+    /** uint64 */
+    MaximumSize?: string;
+}
+
+export interface TStorageInfo {
+    Overall?: EFlag;
+    StoragePools?: TStoragePoolInfo[];
+    /** uint64 */
+    TotalGroups?: string;
+    /** uint64 */
+    FoundGroups?: string;
+}

src/types/store/storage.ts

@@ -0,0 +1,11 @@
+import type {TBSGroupStateInfo} from '../api/storage';
+
+export interface IStoragePoolGroup extends TBSGroupStateInfo {
+    Read: number;
+    Write: number;
+    PoolName?: string;
+    Used: number;
+    Limit: number;
+    Missing: number;
+    UsedSpaceFlag: number;
+}