ydb-embedded-ui 1.11.0 → 1.12.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* number type instead of string for uint32 ([e60799e](https://github.com/ydb-platform/ydb-embedded-ui/commit/e60799edec4ef831e8c0d51f4384cde83520541d))
+* **Storage:** expect arbitrary donors data ([09f8e08](https://github.com/ydb-platform/ydb-embedded-ui/commit/09f8e085c94faacd9da502643355e932346502ac))
+* vdisk data contains pdisk data, not id ([bd1ea7f](https://github.com/ydb-platform/ydb-embedded-ui/commit/bd1ea7f59e0461256bb12f146b50470d21ac1ace))
+
 ## [1.11.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.3...v1.11.0) (2022-08-23)
 
 

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,9 +1,8 @@
 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';
@@ -16,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 {
@@ -47,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');
@@ -60,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: {
@@ -108,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 >= 100})}
+                    >
+                        ≥ {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],
@@ -135,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],
@@ -184,47 +205,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 TVDiskStateInfo[], (el) => (
-                        Array.isArray(el.Donors) && el.Donors.length > 0 ? (
-                            <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <Vdisk
-                                    {...el}
-                                    PoolName={row[TableColumnsIds.PoolName]}
-                                    nodes={nodes}
-                                />
-                                {el.Donors.map((donor) => (
+                    {_.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
-                                        {...donor}
-                                        // donor and acceptor are always in the same group
+                                        {...el}
                                         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>
+                            )
+                        );
+                    })}
                 </div>
             ),
             align: DataTable.CENTER,

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

@@ -1 +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/schema.ts

@@ -91,27 +91,19 @@ export interface TTableDescription {
 export interface TPartitionConfig {
     /** uint64 */
     FollowerCount?: string;
-    /**
-     * uint32
-     * @deprecated use FollowerGroups
-     */
-    CrossDataCenterFollowerCount?: string;
+    /** @deprecated use FollowerGroups */
+    CrossDataCenterFollowerCount?: number;
     /** 0 or 1 items */
     FollowerGroups?: TFollowerGroup[];
 }
 
 export interface TFollowerGroup {
-    /** uint32 */
-    FollowerCount?: string;
+    FollowerCount?: number;
     AllowLeaderPromotion?: boolean;
     AllowClientRead?: boolean;
-    /** uint32[] */
-    AllowedNodeIDs?: string[];
-    /**
-     * uint32[]
-     * @deprecated use AllowedDataCenters
-     */
-    AllowedDataCenterNumIDs?: string[];
+    AllowedNodeIDs?: number[];
+    /** @deprecated use AllowedDataCenters */
+    AllowedDataCenterNumIDs?: number[];
     RequireAllDataCenters?: boolean;
     LocalNodeOnly?: boolean;
     RequireDifferentNodes?: boolean;

package/dist/types/api/storage.ts

@@ -64,12 +64,11 @@ export enum EVDiskState {
 
 interface TRank {
     /**
-     * uint32
      * Rank in percents; 0-100% is good; >100% is bad.
      * Formula for rank calculation is the following:
      * Rank = actual_value / max_allowed_value * 100
      */
-    RankPercent?: string;
+    RankPercent?: number;
 
     /**
      * Flag is the Rank transformed to something simple
@@ -84,16 +83,17 @@ interface TVDiskSatisfactionRank {
 }
 
 interface TVDiskID {
-    /** uint32 */
-    GroupID?: string;
-    /** uint32 */
-    GroupGeneration?: string;
-    /** uint32 */
-    Ring?: string;
-    /** uint32 */
-    Domain?: string;
-    /** uint32 */
-    VDisk?: string;
+    GroupID?: number;
+    GroupGeneration?: number;
+    Ring?: number;
+    Domain?: number;
+    VDisk?: number;
+}
+
+export interface TVSlotId {
+    NodeId?: number;
+    PDiskId?: number;
+    VSlotId?: number;
 }
 
 export interface TVDiskStateInfo {
@@ -102,18 +102,14 @@ export interface TVDiskStateInfo {
     CreateTime?: string;
     /** uint64 */
     ChangeTime?: string;
-    /** uint32 */
-    PDiskId?: string;
-    /** uint32 */
-    VDiskSlotId?: string;
+    PDisk?: TPDiskStateInfo;
+    VDiskSlotId?: number;
     /** uint64 */
     Guid?: string;
     /** uint64 */
     Kind?: string;
-    /** uint32 */
-    NodeId?: string;
-    /** uint32 */
-    Count?: string;
+    NodeId?: number;
+    Count?: number;
 
     Overall?: EFlag;
 
@@ -154,7 +150,8 @@ export interface TVDiskStateInfo {
      * VDisk actor instance guid
      */
     InstanceGuid?: string;
-    Donors?: TVDiskStateInfo[];
+    // in reality it is `Donors: TVDiskStateInfo[] | TVSlotId[]`, but this way it is more error-proof
+    Donors?: Array<TVDiskStateInfo | TVSlotId>;
 
     /** VDisk (Skeleton) Front Queue Status */
     FrontQueues?: EFlag;
@@ -173,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.0",
+  "version": "1.12.1",
   "files": [
     "dist"
   ],