ydb-embedded-ui 4.19.3 → 4.20.1

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,17 +1,18 @@
-import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Popover} from '@gravity-ui/uikit';
+import DataTable, {type Column} from '@gravity-ui/react-data-table';
 
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
-
-import {isSortableNodesProperty} from '../../utils/nodes';
-import {formatBytesToGigabyte} from '../../utils/dataFormatters/dataFormatters';
-
+import {
+    formatBytesToGigabyte,
+    formatStorageValuesToGb,
+} from '../../utils/dataFormatters/dataFormatters';
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
-
-import type {NodeAddress} from '../../types/additionalProps';
+import type {GetNodeRefFunc} from '../../types/additionalProps';
+import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
+import {UsageLabel} from '../../components/UsageLabel/UsageLabel';
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
 
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
@@ -24,131 +25,214 @@ const NODES_COLUMNS_IDS = {
     CPU: 'CPU',
     LoadAverage: 'LoadAverage',
     Tablets: 'Tablets',
+    TopNodesLoadAverage: 'TopNodesLoadAverage',
+    TopNodesMemory: 'TopNodesMemory',
 };
 
 interface GetNodesColumnsProps {
     tabletsPath?: string;
-    getNodeRef?: (node?: NodeAddress) => string | null;
+    getNodeRef?: GetNodeRefFunc;
 }
 
+const nodeIdColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.NodeId,
+    header: '#',
+    width: '80px',
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const getHostColumn = (
+    getNodeRef?: GetNodeRefFunc,
+    fixedWidth = false,
+): Column<NodesPreparedEntity> => ({
+    name: NODES_COLUMNS_IDS.Host,
+    render: ({row}) => {
+        return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
+    },
+    width: fixedWidth ? '350px' : undefined,
+    align: DataTable.LEFT,
+    sortable: false,
+});
+
+const dataCenterColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.DC,
+    header: 'DC',
+    align: DataTable.LEFT,
+    render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
+    width: '60px',
+};
+
+const rackColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.Rack,
+    header: 'Rack',
+    align: DataTable.LEFT,
+    render: ({row}) => (row.Rack ? row.Rack : '—'),
+    width: '80px',
+};
+
+const versionColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.Version,
+    width: '200px',
+    align: DataTable.LEFT,
+    render: ({row}) => {
+        return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
+    },
+    sortable: false,
+};
+
+const uptimeColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.Uptime,
+    header: 'Uptime',
+    sortAccessor: ({StartTime}) => StartTime && -StartTime,
+    align: DataTable.RIGHT,
+    width: '110px',
+    sortable: false,
+};
+
+const memoryColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.Memory,
+    header: 'Memory',
+    sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+    defaultOrder: DataTable.DESCENDING,
+    render: ({row}) => {
+        if (row.MemoryUsed) {
+            return formatBytesToGigabyte(row.MemoryUsed);
+        } else {
+            return '—';
+        }
+    },
+    align: DataTable.RIGHT,
+    width: '120px',
+};
+
+const cpuColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.CPU,
+    header: 'CPU',
+    sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
+    defaultOrder: DataTable.DESCENDING,
+    render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
+    align: DataTable.LEFT,
+    width: '80px',
+    sortable: false,
+};
+
+const loadAverageColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.LoadAverage,
+    header: 'Load average',
+    sortAccessor: ({LoadAverage = []}) =>
+        LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
+    defaultOrder: DataTable.DESCENDING,
+    render: ({row}) =>
+        row.LoadAverage && row.LoadAverage.length > 0 ? (
+            <ProgressViewer
+                value={row.LoadAverage[0]}
+                percents={true}
+                colorizeProgress={true}
+                capacity={100}
+            />
+        ) : (
+            '—'
+        ),
+    align: DataTable.LEFT,
+    width: '140px',
+    sortable: false,
+};
+
+const getTabletsColumn = (tabletsPath?: string): Column<NodesPreparedEntity> => ({
+    name: NODES_COLUMNS_IDS.Tablets,
+    width: '430px',
+    render: ({row}) => {
+        return row.Tablets ? (
+            <TabletsStatistic
+                path={tabletsPath ?? row.TenantName}
+                nodeIds={[row.NodeId]}
+                tablets={row.Tablets}
+            />
+        ) : (
+            '—'
+        );
+    },
+    align: DataTable.LEFT,
+    sortable: false,
+});
+
+const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.TopNodesLoadAverage,
+    header: 'Load',
+    render: ({row}) =>
+        row.LoadAverage && row.LoadAverage.length > 0 ? (
+            <UsageLabel
+                value={row.LoadAverage[0].toFixed()}
+                theme={getLoadSeverityForNode(row.LoadAverage[0])}
+            />
+        ) : (
+            '—'
+        ),
+    align: DataTable.LEFT,
+    width: '80px',
+    sortable: false,
+};
+
+const topNodesMemoryColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.TopNodesMemory,
+    header: 'Memory',
+    render: ({row}) =>
+        row.MemoryUsed ? (
+            <ProgressViewer
+                value={row.MemoryUsed}
+                capacity={row.MemoryLimit}
+                formatValues={formatStorageValuesToGb}
+                colorizeProgress={true}
+            />
+        ) : (
+            '—'
+        ),
+    align: DataTable.LEFT,
+    width: '140px',
+    sortable: false,
+};
+
 export function getNodesColumns({
     tabletsPath,
     getNodeRef,
 }: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
-    const columns: Column<NodesPreparedEntity>[] = [
-        {
-            name: NODES_COLUMNS_IDS.NodeId,
-            header: '#',
-            width: '80px',
-            align: DataTable.RIGHT,
-        },
-        {
-            name: NODES_COLUMNS_IDS.Host,
-            render: ({row}) => {
-                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
-            },
-            width: '350px',
-            align: DataTable.LEFT,
-        },
-        {
-            name: NODES_COLUMNS_IDS.DC,
-            header: 'DC',
-            align: DataTable.LEFT,
-            render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
-            width: '60px',
-        },
-        {
-            name: NODES_COLUMNS_IDS.Rack,
-            header: 'Rack',
-            align: DataTable.LEFT,
-            render: ({row}) => (row.Rack ? row.Rack : '—'),
-            width: '80px',
-        },
-        {
-            name: NODES_COLUMNS_IDS.Version,
-            width: '200px',
-            align: DataTable.LEFT,
-            render: ({row}) => {
-                return <Popover content={row.Version}>{row.Version}</Popover>;
-            },
-        },
-        {
-            name: NODES_COLUMNS_IDS.Uptime,
-            header: 'Uptime',
-            sortAccessor: ({StartTime}) => StartTime && -StartTime,
-            align: DataTable.RIGHT,
-            width: '110px',
-        },
-        {
-            name: NODES_COLUMNS_IDS.Memory,
-            header: 'Memory',
-            sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
-            defaultOrder: DataTable.DESCENDING,
-            render: ({row}) => {
-                if (row.MemoryUsed) {
-                    return formatBytesToGigabyte(row.MemoryUsed);
-                } else {
-                    return '—';
-                }
-            },
-            align: DataTable.RIGHT,
-            width: '120px',
-        },
-        {
-            name: NODES_COLUMNS_IDS.CPU,
-            header: 'CPU',
-            sortAccessor: ({PoolStats = []}) =>
-                PoolStats.reduce((acc, item) => {
-                    if (item.Usage) {
-                        return acc + item.Usage;
-                    } else {
-                        return acc;
-                    }
-                }, 0),
-            defaultOrder: DataTable.DESCENDING,
-            render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
-            align: DataTable.LEFT,
-            width: '120px',
-        },
-        {
-            name: NODES_COLUMNS_IDS.LoadAverage,
-            header: 'Load average',
-            sortAccessor: ({LoadAverage = []}) =>
-                LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
-            defaultOrder: DataTable.DESCENDING,
-            render: ({row}) =>
-                row.LoadAverage && row.LoadAverage.length > 0 ? (
-                    <ProgressViewer
-                        value={row.LoadAverage[0]}
-                        capacity={100}
-                        percents={true}
-                        colorizeProgress={true}
-                    />
-                ) : (
-                    '—'
-                ),
-            align: DataTable.LEFT,
-            width: '140px',
-        },
-        {
-            name: NODES_COLUMNS_IDS.Tablets,
-            width: '430px',
-            render: ({row}) => {
-                return row.Tablets ? (
-                    <TabletsStatistic
-                        path={tabletsPath ?? row.TenantName}
-                        nodeIds={[row.NodeId]}
-                        tablets={row.Tablets}
-                    />
-                ) : (
-                    '—'
-                );
-            },
-            align: DataTable.LEFT,
-        },
+    return [
+        nodeIdColumn,
+        getHostColumn(getNodeRef, true),
+        dataCenterColumn,
+        rackColumn,
+        versionColumn,
+        uptimeColumn,
+        memoryColumn,
+        cpuColumn,
+        loadAverageColumn,
+        getTabletsColumn(tabletsPath),
     ];
+}
 
-    return columns.map((column) => {
-        return {...column, sortable: isSortableNodesProperty(column.name)};
-    });
+export function getTopNodesByLoadColumns(
+    getNodeRef?: GetNodeRefFunc,
+): Column<NodesPreparedEntity>[] {
+    return [topNodesLoadAverageColumn, nodeIdColumn, getHostColumn(getNodeRef), versionColumn];
+}
+
+export function getTopNodesByCpuColumns(
+    getNodeRef?: GetNodeRefFunc,
+): Column<NodesPreparedEntity>[] {
+    return [cpuColumn, nodeIdColumn, getHostColumn(getNodeRef)];
+}
+
+export function getTopNodesByMemoryColumns({
+    tabletsPath,
+    getNodeRef,
+}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
+    return [
+        nodeIdColumn,
+        getHostColumn(getNodeRef, true),
+        uptimeColumn,
+        topNodesMemoryColumn,
+        topNodesLoadAverageColumn,
+        getTabletsColumn(tabletsPath),
+    ];
 }

package/dist/containers/Storage/Storage.tsx

@@ -73,7 +73,7 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
         loading,
         wasLoaded,
         error,
-        type: storageType,
+        type,
         visible: visibleEntities,
         filter,
         usageFilter,
@@ -87,6 +87,10 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
     const nodesSortParams = useTypedSelector(selectNodesSortParams);
     const groupsSortParams = useTypedSelector(selectGroupsSortParams);
 
+    // Do not display Nodes table for Node page (NodeId present)
+    const isNodePage = nodeId !== undefined;
+    const storageType = isNodePage ? STORAGE_TYPES.groups : type;
+
     useEffect(() => {
         dispatch(getNodesList());
 
@@ -228,7 +232,10 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
                     />
                 </div>
 
-                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+                {!isNodePage && (
+                    <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+                )}
+
                 <StorageVisibleEntitiesFilter
                     value={visibleEntities}
                     onChange={handleGroupVisibilityChange}

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

@@ -28,20 +28,9 @@
         }
     }
     &__pool-name-wrapper {
-        display: flex;
-        align-items: flex-end;
-
         width: 230px;
     }
-    &__pool-name {
-        display: inline-block;
-        overflow: hidden;
 
-        max-width: 230px;
-
-        vertical-align: top;
-        text-overflow: ellipsis;
-    }
     &__usage-label {
         &_overload {
             color: var(--yc-color-text-light-primary);

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx

@@ -12,6 +12,7 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {Stack} from '../../../components/Stack/Stack';
+import {CellWithPopover} from '../../../components/CellWithPopover/CellWithPopover';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 import i18n from './i18n';
@@ -58,17 +59,16 @@ const poolNameColumn: Column<PreparedStorageGroup> = {
     render: ({row}) => {
         const splitted = row.PoolName?.split('/');
         return (
-            <div className={b('pool-name-wrapper')}>
-                {splitted && (
-                    <Popover
-                        content={row.PoolName}
-                        placement={['right']}
-                        behavior={PopoverBehavior.Immediate}
-                    >
-                        <span className={b('pool-name')}>{splitted[splitted.length - 1]}</span>
-                    </Popover>
-                )}
-            </div>
+            splitted && (
+                <CellWithPopover
+                    wrapperClassName={b('pool-name-wrapper')}
+                    content={row.PoolName}
+                    placement={['right']}
+                    behavior={PopoverBehavior.Immediate}
+                >
+                    {splitted[splitted.length - 1]}
+                </CellWithPopover>
+            )
         );
     },
     align: DataTable.LEFT,

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

@@ -1,30 +1,9 @@
 import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
 import {EFlag} from '../../../types/api/enums';
+import {generateEvaluator} from '../../../utils/generateEvaluator';
 
 export * from './constants';
 
-const generateEvaluator =
-    <OkLevel extends string, WarnLevel extends string, CritLevel extends string>(
-        warn: number,
-        crit: number,
-        levels: [OkLevel, WarnLevel, CritLevel],
-    ) =>
-    (value: number) => {
-        if (0 <= value && value < warn) {
-            return levels[0];
-        }
-
-        if (warn <= value && value < crit) {
-            return levels[1];
-        }
-
-        if (crit <= value) {
-            return levels[2];
-        }
-
-        return undefined;
-    };
-
 const defaultDegradationEvaluator = generateEvaluator(1, 2, ['success', 'warning', 'danger']);
 
 const degradationEvaluators = {

package/dist/containers/Tenant/Diagnostics/Describe/Describe.tsx

@@ -1,7 +1,6 @@
 import {useCallback, useEffect, useState} from 'react';
 import {shallowEqual, useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
-// @ts-ignore
 import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 
@@ -99,14 +98,14 @@ const Describe = ({tenant, type}: IDescribeProps) => {
                 <JSONTree
                     data={preparedDescribeData}
                     className={b('tree')}
-                    onClick={({path}: {path: string}) => {
+                    onClick={({path}) => {
                         const newValue = !(expandMap.get(path) || false);
                         expandMap.set(path, newValue);
                     }}
                     searchOptions={{
                         debounceTime: 300,
                     }}
-                    isExpanded={(keypath: string) => {
+                    isExpanded={(keypath) => {
                         return expandMap.get(keypath) || false;
                     }}
                 />

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -11,7 +11,6 @@
         flex-direction: column;
 
         min-width: 300px;
-        height: max-content;
     }
 
     &__modal {

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import {Button, Modal} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../../types/api/schema';
-import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
+import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {Icon} from '../../../../components/Icon';
 import {useSetting} from '../../../../utils/hooks';
 import {DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS} from '../../../../utils/constants';
@@ -21,12 +21,13 @@ interface DetailedOverviewProps {
     className?: string;
     tenantName: string;
     additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
 const b = cn('kv-detailed-overview');
 
 function DetailedOverview(props: DetailedOverviewProps) {
-    const {type, tenantName, additionalTenantProps} = props;
+    const {type, tenantName, additionalTenantProps, additionalNodesProps} = props;
 
     const [isModalVisible, setIsModalVisible] = useState(false);
 
@@ -65,6 +66,7 @@ function DetailedOverview(props: DetailedOverviewProps) {
                     <TenantOverview
                         tenantName={tenantName}
                         additionalTenantProps={additionalTenantProps}
+                        additionalNodesProps={additionalNodesProps}
                     />
                 </div>
             );

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -109,6 +109,7 @@ function Diagnostics(props: DiagnosticsProps) {
                         type={type}
                         tenantName={tenantNameString}
                         additionalTenantProps={props.additionalTenantProps}
+                        additionalNodesProps={props.additionalNodesProps}
                     />
                 );
             }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx

@@ -3,6 +3,7 @@ import cn from 'bem-cn-lite';
 import type {IResponseError} from '../../../../../types/api/error';
 import type {IIssuesTree} from '../../../../../types/store/healthcheck';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {Loader} from '../../../../../components/Loader';
 
 import IssueTree from './IssuesViewer/IssueTree';
 
@@ -13,17 +14,23 @@ const b = cn('healthcheck');
 
 interface HealthcheckDetailsProps {
     issueTrees?: IIssuesTree[];
+    loading?: boolean;
+    wasLoaded?: boolean;
     error?: IResponseError;
 }
 
 export function HealthcheckDetails(props: HealthcheckDetailsProps) {
-    const {issueTrees, error} = props;
+    const {issueTrees, loading, wasLoaded, error} = props;
 
     const renderContent = () => {
         if (error) {
             return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
         }
 
+        if (loading && !wasLoaded) {
+            return <Loader size="m" />;
+        }
+
         if (!issueTrees || !issueTrees.length) {
             return i18n('status_message.ok');
         }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx

@@ -9,6 +9,7 @@ import type {IResponseError} from '../../../../../types/api/error';
 import {DiagnosticCard} from '../../../../../components/DiagnosticCard/DiagnosticCard';
 import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {Loader} from '../../../../../components/Loader';
 
 import i18n from './i18n';
 import './Healthcheck.scss';
@@ -19,17 +20,22 @@ interface HealthcheckPreviewProps {
     selfCheckResult: SelfCheckResult;
     issuesStatistics?: [StatusFlag, number][];
     loading?: boolean;
+    wasLoaded?: boolean;
     onUpdate: VoidFunction;
     error?: IResponseError;
     active?: boolean;
 }
 
 export function HealthcheckPreview(props: HealthcheckPreviewProps) {
-    const {selfCheckResult, issuesStatistics, loading, onUpdate, error, active} = props;
+    const {selfCheckResult, issuesStatistics, loading, wasLoaded, onUpdate, error, active} = props;
 
     const renderHeader = () => {
         const modifier = selfCheckResult.toLowerCase();
 
+        if (loading && !wasLoaded) {
+            return null;
+        }
+
         return (
             <div className={b('preview-header')}>
                 <div className={b('preview-title-wrapper')}>
@@ -50,6 +56,10 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
             return <ResponseError error={error} defaultMessage={i18n('no-data')} />;
         }
 
+        if (loading && !wasLoaded) {
+            return <Loader size="m" />;
+        }
+
         return (
             <div className={b('preview-content')}>
                 {!issuesStatistics || !issuesStatistics.length ? (

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.tsx

@@ -2,7 +2,6 @@ import {useCallback, useState} from 'react';
 import cn from 'bem-cn-lite';
 import _omit from 'lodash/omit';
 
-// @ts-ignore
 import JSONTree from 'react-json-inspector';
 
 import {TreeView} from 'ydb-ui-components';

package/dist/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx

@@ -38,6 +38,7 @@ interface MetricsCardsProps {
     selfCheckResult: SelfCheckResult;
     fetchHealthcheck: VoidFunction;
     healthcheckLoading?: boolean;
+    healthCheckWasLoaded?: boolean;
     healthcheckError?: IResponseError;
 }
 
@@ -47,6 +48,7 @@ export function MetricsCards({
     selfCheckResult,
     fetchHealthcheck,
     healthcheckLoading,
+    healthCheckWasLoaded,
     healthcheckError,
 }: MetricsCardsProps) {
     const location = useLocation();
@@ -124,6 +126,7 @@ export function MetricsCards({
                     issuesStatistics={issuesStatistics}
                     onUpdate={fetchHealthcheck}
                     loading={healthcheckLoading}
+                    wasLoaded={healthCheckWasLoaded}
                     error={healthcheckError}
                     active={metricsTab === TENANT_METRICS_TABS_IDS.healthcheck}
                 />