ydb-embedded-ui 1.10.2 → 1.11.1

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,6 @@
+import type {TVDiskStateInfo, TVSlotId} from '../../../types/api/storage';
+
 export * from './constants';
+
+export const isFullDonorData = (donor: TVDiskStateInfo | TVSlotId): donor is TVDiskStateInfo =>
+    'VDiskId' in donor;

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import './SchemaInfoViewer.scss';
 
-import {formatCPU, formatBytes, formatNumber, formatBps} from '../../../../utils';
+import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../../utils';
 
 import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
 
@@ -38,8 +38,8 @@ const formatTableStatsItem = createInfoFormatter({
     values: {
         DataSize: formatBytes,
         IndexSize: formatBytes,
-        LastAccessTime: (value) => value > 0 ? new Date(Number(value)).toUTCString() : 'N/A',
-        LastUpdateTime: (value) => value > 0 ? new Date(Number(value)).toUTCString() : 'N/A',
+        LastAccessTime: formatDateTime,
+        LastUpdateTime: formatDateTime,
     },
     defaultValueFormatter: formatNumber,
 });

package/dist/setupTests.js

@@ -3,3 +3,11 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+import {configure as configureUiKit} from '@yandex-cloud/uikit';
+import {configure as configureYdbUiComponents} from 'ydb-ui-components';
+import {i18n, Lang} from '../src/utils/i18n';
+
+i18n.setLang(Lang.En);
+configureYdbUiComponents({lang: Lang.En});
+configureUiKit({lang: Lang.En});

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

@@ -52,3 +52,121 @@ export interface TPDiskStateInfo {
     Overall?: EFlag;
     SerialNumber?: string;
 }
+
+export enum EVDiskState {
+    Initial = 'Initial',
+    LocalRecoveryError = 'LocalRecoveryError',
+    SyncGuidRecovery = 'SyncGuidRecovery',
+    SyncGuidRecoveryError = 'SyncGuidRecoveryError',
+    OK = 'OK',
+    PDiskError = 'PDiskError',
+}
+
+interface TRank {
+    /**
+     * 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?: number;
+
+    /**
+     * Flag is the Rank transformed to something simple
+     * to understand: Green, Yellow or Red
+     */
+    Flag?: EFlag;
+}
+
+interface TVDiskSatisfactionRank {
+    FreshRank?: TRank;
+    LevelRank?: TRank;
+}
+
+interface TVDiskID {
+    GroupID?: number;
+    GroupGeneration?: number;
+    Ring?: number;
+    Domain?: number;
+    VDisk?: number;
+}
+
+export interface TVSlotId {
+    NodeId?: number;
+    PDiskId?: number;
+    VSlotId?: number;
+}
+
+export interface TVDiskStateInfo {
+    VDiskId?: TVDiskID;
+    /** uint64 */
+    CreateTime?: string;
+    /** uint64 */
+    ChangeTime?: string;
+    PDisk?: TPDiskStateInfo;
+    VDiskSlotId?: number;
+    /** uint64 */
+    Guid?: string;
+    /** uint64 */
+    Kind?: string;
+    NodeId?: number;
+    Count?: number;
+
+    Overall?: EFlag;
+
+    /** Current state of VDisk */
+    VDiskState?: EVDiskState;
+    /** Disk space flags */
+    DiskSpace?: EFlag;
+    /** Compaction satisfaction rank */
+    SatisfactionRank?: TVDiskSatisfactionRank;
+    /** Is VDisk replicated? (i.e. contains all blobs it must have) */
+    Replicated?: boolean;
+    /** Does this VDisk has any yet unreplicated phantom-like blobs? */
+    UnreplicatedPhantoms?: boolean;
+    /** The same for the non-phantom-like blobs. */
+    UnreplicatedNonPhantoms?: boolean;
+    /**
+     * uint64
+     * How many unsynced VDisks from current BlobStorage group we see
+     */
+    UnsyncedVDisks?: string;
+    /**
+     * uint64
+     * How much this VDisk have allocated on corresponding PDisk
+     */
+    AllocatedSize?: string;
+    /**
+     * uint64
+     * How much space is available for VDisk corresponding to PDisk's hard space limits
+     */
+    AvailableSize?: string;
+    /** Does this disk has some unreadable but not yet restored blobs? */
+    HasUnreadableBlobs?: boolean;
+    /** fixed64 */
+    IncarnationGuid?: string;
+    DonorMode?: boolean;
+    /**
+     * fixed64
+     * VDisk actor instance guid
+     */
+    InstanceGuid?: string;
+    // 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;
+
+    /** VDisk storage pool label */
+    StoragePoolName?: string;
+
+    /**
+     * uint64
+     * Read bytes per second from PDisk for TEvVGet blobs only
+     */
+    ReadThroughput?: string;
+    /**
+     * uint64
+     * Write bytes per second to PDisk for TEvVPut blobs and replication bytes only
+     */
+    WriteThroughput?: string;
+}

package/dist/types/index.ts

@@ -0,0 +1 @@
+export type RequiredField<Src, Fields extends keyof Src> = Src & Required<Pick<Src, Fields>>;