ydb-embedded-ui 1.10.1 → 1.11.0

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/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -60,20 +60,21 @@ function DetailedOverview(props: DetailedOverviewProps) {
         const isTenant = tenantName === currentSchemaPath;
         return (
             <div className={b()}>
-                <div className={b('section')}>
-                    {!isTenant && (
-                        <Overview type={type} tenantName={tenantName} />
-                    )}
-                    {isTenant && <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo}/>}
-                </div>
-                {isTenant && (
-                    <div className={b('section')}>
-                        <Healthcheck
-                            tenant={tenantName}
-                            preview={true}
-                            showMoreHandler={openModalHandler}
-                        />
-                    </div>
+                {isTenant ? (
+                    <>
+                        <div className={b('section')}>
+                            <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo} />
+                        </div>
+                        <div className={b('section')}>
+                            <Healthcheck
+                                tenant={tenantName}
+                                preview={true}
+                                showMoreHandler={openModalHandler}
+                            />
+                        </div>
+                    </>
+                ) : (
+                    <Overview type={type} tenantName={tenantName} />
                 )}
             </div>
         );

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -33,6 +33,7 @@ import {
     DEFAULT_SIZE_RESULT_PANE_KEY,
     DEFAULT_TABLE_SETTINGS,
     SAVED_QUERIES_KEY,
+    QUERY_INITIAL_RUN_ACTION_KEY,
 } from '../../../utils/constants';
 import {prepareQueryResponse} from '../../../utils/index';
 
@@ -538,7 +539,13 @@ function QueryEditor(props) {
     };
 
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, selectRunAction} = props;
+        const {
+            executeQuery,
+            explainQuery,
+            savedQueries,
+            selectRunAction,
+            setSettingValue,
+        } = props;
         const {runAction} = executeQuery;
         const runIsDisabled = !executeQuery.input || executeQuery.loading;
         const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
@@ -546,7 +553,10 @@ function QueryEditor(props) {
         const menuItems = RUN_ACTIONS.map((action) => {
             return {
                 text: action.content,
-                action: () => selectRunAction(action.value),
+                action: () => {
+                    selectRunAction(action.value);
+                    setSettingValue(QUERY_INITIAL_RUN_ACTION_KEY, action.value);
+                },
             };
         });