ydb-embedded-ui 1.11.1 → 1.12.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [1.12.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.12.1...v1.12.2) (2022-08-29)
+
+
+### Bug Fixes
+
+* **Storage:** bright red usage starting from 90% ([69b7ed2](https://github.com/ydb-platform/ydb-embedded-ui/commit/69b7ed248151f518ffc5fabbdccf5ea9bbcd9405))
+* **Storage:** display usage without gte sign ([39630a2](https://github.com/ydb-platform/ydb-embedded-ui/commit/39630a2a06b574d53d0ef74c1b3e0dc96b9666a8))
+
+## [1.12.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.12.0...v1.12.1) (2022-08-26)
+
+
+### Bug Fixes
+
+* **Storage:** properly display usage for 0 storage ([aee67f9](https://github.com/ydb-platform/ydb-embedded-ui/commit/aee67f9314341c995e2c9468f5eedc48fa0a3d35))
+
+## [1.12.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.11.1...v1.12.0) (2022-08-26)
+
+
+### Features
+
+* **Storage:** show usage column ([73aed5f](https://github.com/ydb-platform/ydb-embedded-ui/commit/73aed5f9ed60b6d2bd77fd315ae514ee7443c489))
+* **Storage:** vividly show degraded disks count ([7315a9c](https://github.com/ydb-platform/ydb-embedded-ui/commit/7315a9cfd98002a7fab85d721712aa82c6dbb552))
+
 ## [1.11.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.11.0...v1.11.1) (2022-08-26)
 
 

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -42,6 +42,12 @@
         vertical-align: top;
         text-overflow: ellipsis;
     }
+    &__usage-label {
+        &_overload {
+            color: var(--yc-color-text-light-primary);
+            background-color: var(--yc-color-base-danger-heavy);
+        }
+    }
     &__group-id {
         font-weight: 500;
     }

package/dist/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, getUsageSeverity, getUsage} from '../utils';
 
 import './StorageGroups.scss';
 
@@ -49,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');
@@ -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,37 @@ 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);
+                // without a limit the usage can be evaluated as 0,
+                // but the absence of a value is more clear
+                return row.Limit ? (
+                    <Label
+                        theme={getUsageSeverity(usage)}
+                        className={b('usage-label', {overload: usage >= 90})}
+                    >
+                        {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],
@@ -137,18 +168,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],
@@ -186,13 +205,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'),

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

@@ -1,6 +1,51 @@
 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) => {
+    // if limit is 0, display 0
+    const usage = Math.round((data.Used * 100) / data.Limit) || 0;
+
+    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;
     };
 }

package/dist/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;
+}

package/dist/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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.11.1",
+  "version": "1.12.2",
   "files": [
     "dist"
   ],