ydb-embedded-ui 3.2.2 → 3.3.0

package/dist/{utils/getNodesColumns.js → containers/Nodes/getNodesColumns.tsx}

@@ -1,20 +1,37 @@
 import cn from 'bem-cn-lite';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable, {Column} from '@yandex-cloud/react-data-table';
 import {Button, Popover} from '@gravity-ui/uikit';
 
-import Icon from '../components/Icon/Icon';
-import EntityStatus from '../components/EntityStatus/EntityStatus';
-import PoolsGraph from '../components/PoolsGraph/PoolsGraph';
-import ProgressViewer from '../components/ProgressViewer/ProgressViewer';
-import {TabletsStatistic} from '../components/TabletsStatistic';
+import Icon from '../../components/Icon/Icon';
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
+import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
+import {TabletsStatistic} from '../../components/TabletsStatistic';
 
-import {getDefaultNodePath} from '../containers/Node/NodePages';
-import {formatBytes} from './index';
+import {formatBytes} from '../../utils/index';
+import {INodesPreparedEntity} from '../../types/store/nodes';
+import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
 
-const b = cn('kv-nodes');
+import {getDefaultNodePath} from '../Node/NodePages';
 
-export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeRef}) {
-    const columns = [
+import './NodesTable.scss';
+
+const b = cn('ydb-nodes-table');
+
+interface GetNodesColumnsProps {
+    showTooltip: (...args: Parameters<typeof externalShowTooltip>) => void;
+    hideTooltip: VoidFunction;
+    tabletsPath?: string;
+    getNodeRef?: Function;
+}
+
+export function getNodesColumns({
+    showTooltip,
+    hideTooltip,
+    tabletsPath,
+    getNodeRef,
+}: GetNodesColumnsProps) {
+    const columns: Column<INodesPreparedEntity>[] = [
         {
             name: 'NodeId',
             header: '#',
@@ -23,19 +40,20 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
         },
         {
             name: 'Host',
-            render: ({row, value}) => {
+            render: ({row}) => {
                 const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
-
-                if (typeof value === 'undefined') {
+                if (typeof row.Host === 'undefined') {
                     return <span>—</span>;
                 }
                 return (
                     <div className={b('host-name-wrapper')}>
                         <EntityStatus
                             name={row.Host}
-                            onNameMouseEnter={(e) => showTooltip(e.target, row, 'nodeEndpoints')}
+                            onNameMouseEnter={(e: MouseEvent) =>
+                                showTooltip(e.target, row, 'nodeEndpoints')
+                            }
                             onNameMouseLeave={hideTooltip}
-                            status={row.Overall}
+                            status={row.SystemState}
                             path={getDefaultNodePath(row.NodeId)}
                             hasClipboardButton
                             className={b('host-name')}
@@ -60,28 +78,28 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             name: 'DataCenter',
             header: 'DC',
             align: DataTable.LEFT,
-            render: ({value}) => (value ? value : '—'),
+            render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
             width: '60px',
         },
         {
             name: 'Rack',
             header: 'Rack',
             align: DataTable.LEFT,
-            render: ({value}) => (value ? value : '—'),
+            render: ({row}) => (row.Rack ? row.Rack : '—'),
             width: '80px',
         },
         {
             name: 'Version',
             width: '200px',
             align: DataTable.LEFT,
-            render: ({value}) => {
-                return <Popover content={value}>{value}</Popover>;
+            render: ({row}) => {
+                return <Popover content={row.Version}>{row.Version}</Popover>;
             },
         },
         {
-            name: 'uptime',
+            name: 'Uptime',
             header: 'Uptime',
-            sortAccessor: ({StartTime}) => -StartTime,
+            sortAccessor: ({StartTime}) => StartTime && -StartTime,
             align: DataTable.LEFT,
             width: '110px',
         },
@@ -90,12 +108,9 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             header: 'Memory',
             sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
             defaultOrder: DataTable.DESCENDING,
-            render: ({value, row}) => {
-                if (value) {
-                    return formatBytes(value);
-                }
-                if (row.Metrics) {
-                    return formatBytes(row.Metrics.Memory);
+            render: ({row}) => {
+                if (row.MemoryUsed) {
+                    return formatBytes(row.MemoryUsed);
                 } else {
                     return '—';
                 }
@@ -107,14 +122,20 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             name: 'PoolStats',
             header: 'CPU',
             sortAccessor: ({PoolStats = []}) =>
-                PoolStats.reduce((acc, item) => acc + item.Usage, 0),
+                PoolStats.reduce((acc, item) => {
+                    if (item.Usage) {
+                        return acc + item.Usage;
+                    } else {
+                        return acc;
+                    }
+                }, 0),
             defaultOrder: DataTable.DESCENDING,
-            render: ({value}) =>
-                value ? (
+            render: ({row}) =>
+                row.PoolStats ? (
                     <PoolsGraph
                         onMouseEnter={showTooltip}
                         onMouseLeave={hideTooltip}
-                        pools={value}
+                        pools={row.PoolStats}
                     />
                 ) : (
                     '—'
@@ -128,9 +149,13 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             sortAccessor: ({LoadAverage = []}) =>
                 LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
             defaultOrder: DataTable.DESCENDING,
-            render: ({value}) =>
-                value && value.length > 0 ? (
-                    <ProgressViewer value={value[0]} percents={true} colorizeProgress={true} />
+            render: ({row}) =>
+                row.LoadAverage && row.LoadAverage.length > 0 ? (
+                    <ProgressViewer
+                        value={row.LoadAverage[0]}
+                        percents={true}
+                        colorizeProgress={true}
+                    />
                 ) : (
                     '—'
                 ),

package/dist/containers/Nodes/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "empty.default": "No such nodes"
+}

package/dist/containers/Nodes/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-nodes';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Nodes/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "empty.default": "Нет узлов"
+}

package/dist/containers/Nodes/index.ts

@@ -0,0 +1 @@
+export * from './Nodes';

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,7 +1,7 @@
 .storage-disk-progress-bar {
     $block: &;
 
-    $border-width: 2px;
+    $border-width: 1px;
     $outer-border-radius: 4px;
     $inner-border-radius: $outer-border-radius - $border-width;
 
@@ -10,7 +10,7 @@
     display: block;
 
     min-width: 50px;
-    height: var(--yc-text-body-2-line-height);
+    height: var(--yc-text-body-3-line-height);
 
     text-align: center;
 
@@ -19,6 +19,17 @@
     border-radius: $outer-border-radius;
     background-color: var(--yc-color-infographics-misc-light);
 
+    &_compact {
+        min-width: 0;
+        height: 12px;
+
+        border-radius: 2px;
+
+        #{$block}__filled {
+            border-radius: 1px;
+        }
+    }
+
     #{$block}__filled {
         background-color: var(--yc-color-infographics-misc-medium);
     }
@@ -89,25 +100,8 @@
 
         font-size: var(--yc-text-body-1-font-size);
         // bar height minus borders
-        line-height: calc(var(--yc-text-body-2-line-height) - #{$border-width * 2});
+        line-height: calc(var(--yc-text-body-3-line-height) - #{$border-width * 2});
 
         color: inherit;
     }
-
-    &__link {
-        display: flex;
-        justify-content: center;
-
-        // extend active area to include borders
-        height: var(--yc-text-body-2-line-height);
-        margin: -$border-width;
-        padding: $border-width;
-
-        color: inherit;
-        border-radius: $outer-border-radius;
-
-        &:hover {
-            color: inherit;
-        }
-    }
 }

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -9,33 +9,49 @@ import './DiskStateProgressBar.scss';
 
 const b = cn('storage-disk-progress-bar');
 
-export const diskProgressColors = {
-    0: 'Grey',
-    1: 'Green',
-    2: 'Blue',
-    3: 'Yellow',
-    4: 'Orange',
-    5: 'Red',
-};
+// numeric enum to allow ordinal comparison
+export enum EDiskStateSeverity {
+    Grey = 0,
+    Green = 1,
+    Blue = 2,
+    Yellow = 3,
+    Orange = 4,
+    Red = 5,
+}
+
+const severityToColor = Object.entries(EDiskStateSeverity).reduce(
+    (acc, [color, severity]) => ({...acc, [severity]: color}),
+    {} as Record<EDiskStateSeverity, keyof typeof EDiskStateSeverity>,
+);
 
 interface DiskStateProgressBarProps {
     diskAllocatedPercent?: number;
-    severity?: keyof typeof diskProgressColors;
+    severity?: EDiskStateSeverity;
+    compact?: boolean;
 }
 
-function DiskStateProgressBar({
+export function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
+    compact,
 }: DiskStateProgressBarProps) {
     const inverted = useSelector((state) => JSON.parse(getSettingValue(state, INVERTED_DISKS_KEY)));
 
     const renderAllocatedPercent = () => {
+        if (compact) {
+            return <div className={b('filled')} style={{width: '100%'}} />;
+        }
+
         return (
             diskAllocatedPercent >= 0 && (
                 <React.Fragment>
                     <div
                         className={b('filled')}
-                        style={{width: `${inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent}%`}}
+                        style={{
+                            width: `${
+                                inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent
+                            }%`,
+                        }}
                     />
                     <div className={b('filled-title')}>
                         {`${Math.round(diskAllocatedPercent)}%`}
@@ -45,9 +61,11 @@ function DiskStateProgressBar({
         );
     };
 
-    const mods: Record<string, boolean | undefined> = {inverted};
-    if (severity !== undefined && severity in diskProgressColors) {
-        mods[diskProgressColors[severity].toLocaleLowerCase()] = true;
+    const mods: Record<string, boolean | undefined> = {inverted, compact};
+
+    const color = severity !== undefined && severityToColor[severity];
+    if (color) {
+        mods[color.toLocaleLowerCase()] = true;
     }
 
     return (
@@ -63,5 +81,3 @@ function DiskStateProgressBar({
         </div>
     );
 }
-
-export default DiskStateProgressBar;

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

@@ -0,0 +1 @@
+export * from './DiskStateProgressBar';

package/dist/containers/Storage/{Pdisk/Pdisk.scss → PDisk/PDisk.scss}

@@ -3,14 +3,24 @@
 
     width: 120px;
 
-    border-radius: 4px; // to match interactive area with disk shape
-
     &__content {
+        position: relative;
+
         border-radius: 4px; // to match interactive area with disk shape
     }
 
-    &__popup-wrapper {
-        padding: 12px;
+    &__vdisks {
+        display: flex;
+        // this breaks disks relative sizes, but disks rarely exceed one line
+        flex-wrap: wrap;
+        gap: 2px;
+
+        margin-bottom: 4px;
+    }
+
+    &__vdisks-item {
+        flex-basis: 5px;
+        flex-shrink: 0;
     }
 
     &__media-type {
@@ -19,6 +29,7 @@
         right: 4px;
 
         font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-3-line-height);
 
         color: var(--yc-color-text-secondary);
     }

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -0,0 +1,145 @@
+import React, {useEffect, useState, useRef, useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import {InternalLink} from '../../../components/InternalLink';
+
+import routes, {createHref} from '../../../routes';
+import {getVDisksForPDisk} from '../../../store/reducers/storage';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
+import {TVDiskStateInfo} from '../../../types/api/vdisk';
+import {stringifyVdiskId} from '../../../utils';
+import {useTypedSelector} from '../../../utils/hooks';
+import {getPDiskType} from '../../../utils/pdisk';
+
+import {STRUCTURE} from '../../Node/NodePages';
+
+import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
+import {PDiskPopup} from '../PDiskPopup';
+import {VDisk} from '../VDisk';
+
+import {NOT_AVAILABLE_SEVERITY} from '../utils';
+
+import './PDisk.scss';
+
+const b = cn('pdisk-storage');
+
+const stateSeverity = {
+    [TPDiskState.Initial]: EDiskStateSeverity.Grey,
+    [TPDiskState.Normal]: EDiskStateSeverity.Green,
+    [TPDiskState.InitialFormatRead]: EDiskStateSeverity.Yellow,
+    [TPDiskState.InitialSysLogRead]: EDiskStateSeverity.Yellow,
+    [TPDiskState.InitialCommonLogRead]: EDiskStateSeverity.Yellow,
+    [TPDiskState.InitialFormatReadError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialSysLogReadError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialSysLogParseError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialCommonLogReadError]: EDiskStateSeverity.Red,
+    [TPDiskState.InitialCommonLogParseError]: EDiskStateSeverity.Red,
+    [TPDiskState.CommonLoggerInitError]: EDiskStateSeverity.Red,
+    [TPDiskState.OpenFileError]: EDiskStateSeverity.Red,
+    [TPDiskState.ChunkQuotaError]: EDiskStateSeverity.Red,
+    [TPDiskState.DeviceIoError]: EDiskStateSeverity.Red,
+};
+
+interface PDiskProps {
+    nodeId: number;
+    data?: TPDiskStateInfo;
+}
+
+const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
+    key !== undefined && key in stateSeverity;
+
+const getStateSeverity = (pDiskState?: TPDiskState) => {
+    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
+};
+
+export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
+    // NodeId in data is required for the popup
+    const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
+
+    const vdisks: TVDiskStateInfo[] | undefined = useTypedSelector((state) =>
+        // @ts-expect-error selector is correct, but js infers broken type
+        // unignore after rewriting reducer in ts
+        getVDisksForPDisk(state, nodeId, data.PDiskId),
+    );
+
+    const [severity, setSeverity] = useState(getStateSeverity(data.State));
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+
+    const anchor = useRef(null);
+
+    useEffect(() => {
+        const newSeverity = getStateSeverity(data.State);
+        if (severity !== newSeverity) {
+            setSeverity(newSeverity);
+        }
+    }, [data.State]);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+
+    const pdiskAllocatedPercent = useMemo(() => {
+        const {AvailableSize, TotalSize} = data;
+
+        if (!AvailableSize || !TotalSize) {
+            return undefined;
+        }
+
+        return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
+            ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
+            : undefined;
+    }, [data]);
+
+    const renderVDisks = () => {
+        if (!vdisks?.length) {
+            return null;
+        }
+
+        return (
+            <div className={b('vdisks')}>
+                {vdisks.map((vdisk) => (
+                    <div
+                        key={stringifyVdiskId(vdisk.VDiskId)}
+                        className={b('vdisks-item')}
+                        style={{
+                            // 1 is small enough for empty disks to be of the minimum width
+                            // but if all of them are empty, `flex-grow: 1` would size them evenly
+                            flexGrow: (Number(vdisk.AllocatedSize) || 1),
+                        }}
+                    >
+                        <VDisk data={vdisk} compact />
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    return (
+        <React.Fragment>
+            <PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible} />
+            <div className={b()} ref={anchor}>
+                {renderVDisks()}
+                <InternalLink
+                    to={createHref(
+                        routes.node,
+                        {id: nodeId, activeTab: STRUCTURE},
+                        {pdiskId: data.PDiskId || ''},
+                    )}
+                    className={b('content')}
+                    onMouseEnter={showPopup}
+                    onMouseLeave={hidePopup}
+                >
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={pdiskAllocatedPercent}
+                        severity={severity}
+                    />
+                    <div className={b('media-type')}>{getPDiskType(data)}</div>
+                </InternalLink>
+            </div>
+        </React.Fragment>
+    );
+};

package/dist/containers/Storage/PDisk/__tests__/colors.tsx

@@ -0,0 +1,37 @@
+import {MemoryRouter} from 'react-router-dom';
+
+import {renderWithStore} from '../../../../utils/tests/providers';
+
+import {TPDiskState} from '../../../../types/api/pdisk';
+
+import {PDisk} from '../PDisk';
+
+describe('PDisk state', () => {
+    it('Should determine severity based on State', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk nodeId={1} data={{State: TPDiskState.Normal}} />
+                <PDisk nodeId={2} data={{State: TPDiskState.ChunkQuotaError}} />
+            </MemoryRouter>,
+        );
+
+        const [normalDisk, erroredDisk] = getAllByRole('meter');
+
+        expect(normalDisk.className).not.toBe(erroredDisk.className);
+    });
+
+    it('Should display as unavailabe when no State is provided', () => {
+        const {getAllByRole} = renderWithStore(
+            <MemoryRouter>
+                <PDisk nodeId={1} />
+                <PDisk nodeId={2} data={{State: TPDiskState.ChunkQuotaError}} />
+            </MemoryRouter>,
+        );
+
+        const [disk1, disk2] = getAllByRole('meter');
+
+        // unavailable disks display with the grey color
+        expect(disk1.className).toMatch(/_grey\b/i);
+        expect(disk2.className).not.toMatch(/_grey\b/i);
+    });
+});

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

@@ -0,0 +1 @@
+export * from './PDisk';

package/dist/containers/Storage/PDiskPopup/PDiskPopup.scss

@@ -0,0 +1,3 @@
+.pdisk-storage-popup {
+    padding: 12px;
+}

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -0,0 +1,82 @@
+import {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import {Popup, PopupProps} from '@gravity-ui/uikit';
+
+import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
+
+import {EFlag} from '../../../types/api/enums';
+import {TPDiskStateInfo} from '../../../types/api/pdisk';
+import {getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
+import {bytesToGB} from '../../../utils/utils';
+
+import './PDiskPopup.scss';
+
+const b = cn('pdisk-storage-popup');
+
+const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
+
+export type NodesHosts = {
+    // NodeId => Host
+    [nodeId: number]: string;
+}
+
+export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesHosts) => {
+    const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = data;
+
+    const pdiskData: InfoViewerItem[] = [
+        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId})},
+        {label: 'State', value: State || 'not available'},
+        {label: 'Type', value: getPDiskType(data) || 'unknown'},
+    ];
+
+    if (NodeId) {
+        pdiskData.push({label: 'Node Id', value: NodeId});
+    }
+
+    if (nodes && NodeId && nodes[NodeId]) {
+        pdiskData.push({label: 'Host', value: nodes[NodeId]});
+    }
+
+    if (Path) {
+        pdiskData.push({label: 'Path', value: Path});
+    }
+
+    pdiskData.push({
+        label: 'Available',
+        value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
+    });
+
+    if (Realtime && errorColors.includes(Realtime)) {
+        pdiskData.push({label: 'Realtime', value: Realtime});
+    }
+
+    if (Device && errorColors.includes(Device)) {
+        pdiskData.push({label: 'Device', value: Device});
+    }
+
+    return pdiskData;
+};
+
+interface PDiskPopupProps extends PopupProps {
+    data: TPDiskStateInfo;
+    nodes?: NodesHosts;
+}
+
+export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
+    const info = useMemo(() => preparePDiskData(data, nodes), [data, nodes]);
+
+    return (
+        <Popup
+            className={b()}
+            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}
+        >
+            <InfoViewer title="PDisk" info={info} size="s" />
+        </Popup>
+    );
+};

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

@@ -0,0 +1 @@
+export * from './PDiskPopup';

package/dist/containers/Storage/Storage.js

@@ -32,7 +32,7 @@ import {
     getStorageNodesCount,
     getUsageFilterOptions,
 } from '../../store/reducers/storage';
-import {getNodesList} from '../../store/reducers/clusterNodes';
+import {getNodesList} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';