ydb-embedded-ui 4.8.2 → 4.10.0

package/dist/containers/Storage/Storage.tsx

@@ -0,0 +1,240 @@
+import {useCallback, useEffect} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Settings} from '@gravity-ui/react-data-table';
+
+import {Search} from '../../components/Search';
+import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
+import {UptimeFilter} from '../../components/UptimeFIlter';
+import {AccessDenied} from '../../components/Errors/403';
+import {EntitiesCount} from '../../components/EntitiesCount';
+
+import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
+import {
+    getStorageInfo,
+    setInitialState,
+    setVisibleEntities,
+    setStorageTextFilter,
+    setUsageFilter,
+    setStorageType,
+    setNodesUptimeFilter,
+    setDataWasNotLoaded,
+} from '../../store/reducers/storage/storage';
+import {
+    selectFilteredGroups,
+    selectFilteredNodes,
+    selectStorageNodesCount,
+    selectStorageGroupsCount,
+    selectUsageFilterOptions,
+} from '../../store/reducers/storage/selectors';
+import {VISIBLE_ENTITIES, STORAGE_TYPES} from '../../store/reducers/storage/constants';
+import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {AdditionalNodesInfo, NodesUptimeFilterValues} from '../../utils/nodes';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+
+import {StorageGroups} from './StorageGroups/StorageGroups';
+import {StorageNodes} from './StorageNodes/StorageNodes';
+import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
+import {StorageVisibleEntityFilter} from './StorageVisibleEntityFilter/StorageVisibleEntityFilter';
+import {UsageFilter} from './UsageFilter';
+
+import './Storage.scss';
+
+const b = cn('global-storage');
+
+const tableSettings: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    defaultOrder: DataTable.DESCENDING,
+};
+
+interface StorageProps {
+    additionalNodesInfo?: AdditionalNodesInfo;
+    tenant?: string;
+    nodeId?: string;
+}
+
+export const Storage = ({additionalNodesInfo, tenant, nodeId}: StorageProps) => {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {
+        loading,
+        wasLoaded,
+        error,
+        type: storageType,
+        visible: visibleEntities,
+        filter,
+        usageFilter,
+        nodesUptimeFilter,
+    } = useTypedSelector((state) => state.storage);
+    const storageNodes = useTypedSelector(selectFilteredNodes);
+    const storageGroups = useTypedSelector(selectFilteredGroups);
+    const nodesCount = useTypedSelector(selectStorageNodesCount);
+    const groupsCount = useTypedSelector(selectStorageGroupsCount);
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const usageFilterOptions = useTypedSelector(selectUsageFilterOptions);
+
+    useEffect(() => {
+        dispatch(getNodesList());
+
+        return () => {
+            // Clean data on component unmount
+            dispatch(setInitialState());
+        };
+    }, [dispatch]);
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(
+                getStorageInfo(
+                    {
+                        tenant,
+                        nodeId,
+                        visibleEntities,
+                        type: storageType,
+                    },
+                    {
+                        concurrentId: 'getStorageInfo',
+                    },
+                ),
+            );
+        },
+        [dispatch, tenant, nodeId, visibleEntities, storageType],
+    );
+
+    const autorefreshEnabled = tenant ? autorefresh : true;
+
+    useAutofetcher(fetchData, [fetchData], autorefreshEnabled);
+
+    const handleUsageFilterChange = (value: string[]) => {
+        dispatch(setUsageFilter(value));
+    };
+
+    const handleTextFilterChange = (value: string) => {
+        dispatch(setStorageTextFilter(value));
+    };
+
+    const handleGroupVisibilityChange = (value: string) => {
+        dispatch(setVisibleEntities(value as VisibleEntities));
+    };
+
+    const handleStorageTypeChange = (value: string) => {
+        dispatch(setStorageType(value as StorageType));
+    };
+
+    const handleUptimeFilterChange = (value: string) => {
+        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    };
+
+    const handleShowAllNodes = () => {
+        handleGroupVisibilityChange(VISIBLE_ENTITIES.all);
+        handleUptimeFilterChange(NodesUptimeFilterValues.All);
+    };
+
+    const renderLoader = () => {
+        return <TableSkeleton className={b('loader')} />;
+    };
+
+    const renderDataTable = () => {
+        return (
+            <div className={b('table-wrapper')}>
+                {storageType === STORAGE_TYPES.groups && (
+                    <StorageGroups
+                        visibleEntities={visibleEntities}
+                        data={storageGroups}
+                        tableSettings={tableSettings}
+                        nodes={nodesMap}
+                        onShowAll={() => handleGroupVisibilityChange(VISIBLE_ENTITIES.all)}
+                    />
+                )}
+                {storageType === STORAGE_TYPES.nodes && (
+                    <StorageNodes
+                        visibleEntities={visibleEntities}
+                        nodesUptimeFilter={nodesUptimeFilter}
+                        data={storageNodes}
+                        tableSettings={tableSettings}
+                        onShowAll={handleShowAllNodes}
+                        additionalNodesInfo={additionalNodesInfo}
+                    />
+                )}
+            </div>
+        );
+    };
+
+    const renderEntitiesCount = () => {
+        const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
+        const count = storageType === STORAGE_TYPES.groups ? groupsCount : nodesCount;
+        const current =
+            storageType === STORAGE_TYPES.groups ? storageGroups.length : storageNodes.length;
+
+        return (
+            <EntitiesCount
+                label={entityName}
+                loading={loading && !wasLoaded}
+                total={count.total}
+                current={current}
+            />
+        );
+    };
+
+    const renderControls = () => {
+        return (
+            <div className={b('controls')}>
+                <div className={b('search')}>
+                    <Search
+                        placeholder={
+                            storageType === STORAGE_TYPES.groups
+                                ? 'Group ID, Pool name'
+                                : 'Node ID, FQDN'
+                        }
+                        onChange={handleTextFilterChange}
+                        value={filter}
+                    />
+                </div>
+
+                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+                <StorageVisibleEntityFilter
+                    value={visibleEntities}
+                    onChange={handleGroupVisibilityChange}
+                />
+
+                {storageType === STORAGE_TYPES.nodes && (
+                    <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
+                )}
+
+                {storageType === STORAGE_TYPES.groups && (
+                    <UsageFilter
+                        value={usageFilter}
+                        onChange={handleUsageFilterChange}
+                        groups={usageFilterOptions}
+                        disabled={usageFilterOptions.length === 0}
+                    />
+                )}
+                {renderEntitiesCount()}
+            </div>
+        );
+    };
+
+    const showLoader = loading && !wasLoaded;
+
+    if (error) {
+        if (error.status === 403) {
+            return <AccessDenied />;
+        }
+
+        return <div className={b()}>{error.statusText}</div>;
+    }
+
+    return (
+        <div className={b()}>
+            {renderControls()}
+            {showLoader ? renderLoader() : renderDataTable()}
+        </div>
+    );
+};

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

@@ -1,25 +1,20 @@
-import _ from 'lodash';
 import cn from 'bem-cn-lite';
+
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesMap} from '../../../types/store/nodesList';
+import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
 
-import shieldIcon from '../../../assets/icons/shield.svg';
-
-import {Stack} from '../../../components/Stack/Stack';
-//@ts-ignore
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
-//@ts-ignore
-import {VisibleEntities} from '../../../store/reducers/storage';
-//@ts-ignore
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-//@ts-ignore
 import {stringifyVdiskId} from '../../../utils';
 import {getUsage, isFullVDiskData} from '../../../utils/storage';
 
+import shieldIcon from '../../../assets/icons/shield.svg';
+import {Stack} from '../../../components/Stack/Stack';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
@@ -46,10 +41,10 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageGroupsProps {
-    data: any;
-    nodes: NodesMap;
+    data: PreparedStorageGroup[];
+    nodes?: NodesMap;
     tableSettings: Settings;
-    visibleEntities: keyof typeof VisibleEntities;
+    visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
 }
 
@@ -70,21 +65,21 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
 
 const b = cn('global-storage-groups');
 
-function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
-        case VisibleEntities.All: {
+        case VISIBLE_ENTITIES.all: {
             return {
                 columnId: TableColumnsIds.PoolName,
                 order: DataTable.ASCENDING,
             };
         }
-        case VisibleEntities.Missing: {
+        case VISIBLE_ENTITIES.missing: {
             return {
                 columnId: TableColumnsIds.Missing,
                 order: DataTable.DESCENDING,
             };
         }
-        case VisibleEntities.Space: {
+        case VISIBLE_ENTITIES.space: {
             return {
                 columnId: TableColumnsIds.UsedSpaceFlag,
                 order: DataTable.DESCENDING,
@@ -96,25 +91,25 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageGroups({
+export function StorageGroups({
     data,
     tableSettings,
     visibleEntities,
     nodes,
     onShowAll,
 }: StorageGroupsProps) {
-    const allColumns: Column<any>[] = [
+    const allColumns: Column<PreparedStorageGroup>[] = [
         {
             name: TableColumnsIds.PoolName,
             header: tableColumnsNames[TableColumnsIds.PoolName],
             width: 250,
-            render: ({value}) => {
-                const splitted = (value as string)?.split('/');
+            render: ({row}) => {
+                const splitted = row.PoolName?.split('/');
                 return (
                     <div className={b('pool-name-wrapper')}>
                         {splitted && (
                             <Popover
-                                content={value as string}
+                                content={row.PoolName}
                                 placement={['right']}
                                 behavior={PopoverBehavior.Immediate}
                             >
@@ -132,9 +127,9 @@ function StorageGroups({
             name: TableColumnsIds.Type,
             header: tableColumnsNames[TableColumnsIds.Type],
             // prettier-ignore
-            render: ({value, row}) => (
+            render: ({row}) => (
                 <>
-                    <Label>{(value as string) || '—'}</Label>
+                    <Label>{row.Type || '—'}</Label>
                     {' '}
                     {row.Encryption && (
                         <Popover
@@ -160,8 +155,12 @@ function StorageGroups({
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],
             width: 100,
-            render: ({value, row}) =>
-                value ? <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label> : '-',
+            render: ({row}) =>
+                row.Missing ? (
+                    <Label theme={getDegradedSeverity(row)}>Degraded: {row.Missing}</Label>
+                ) : (
+                    '-'
+                ),
             align: DataTable.LEFT,
             defaultOrder: DataTable.DESCENDING,
         },
@@ -192,8 +191,8 @@ function StorageGroups({
             name: TableColumnsIds.GroupID,
             header: tableColumnsNames[TableColumnsIds.GroupID],
             width: 130,
-            render: ({value}) => {
-                return <span className={b('group-id')}>{value as number}</span>;
+            render: ({row}) => {
+                return <span className={b('group-id')}>{row.GroupID}</span>;
             },
             align: DataTable.RIGHT,
         },
@@ -201,8 +200,8 @@ function StorageGroups({
             name: TableColumnsIds.Used,
             header: tableColumnsNames[TableColumnsIds.Used],
             width: 100,
-            render: ({value}) => {
-                return bytesToGB(value, true);
+            render: ({row}) => {
+                return bytesToGB(row.Used, true);
             },
             align: DataTable.RIGHT,
         },
@@ -210,8 +209,8 @@ function StorageGroups({
             name: TableColumnsIds.Limit,
             header: tableColumnsNames[TableColumnsIds.Limit],
             width: 100,
-            render: ({value}) => {
-                return bytesToGB(value);
+            render: ({row}) => {
+                return bytesToGB(row.Limit);
             },
             align: DataTable.RIGHT,
         },
@@ -219,15 +218,17 @@ function StorageGroups({
             name: TableColumnsIds.UsedSpaceFlag,
             header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
             width: 110,
-            render: ({value}) => {
-                const val = value as number;
+            render: ({row}) => {
+                const value = row.UsedSpaceFlag;
+
                 let color = 'Red';
-                if (val < 100) {
+
+                if (value < 100) {
                     color = 'Green';
-                } else if (val < 10000) {
+                } else if (value < 10000) {
                     color = 'Yellow';
-                } else if (val < 1000000) {
-                    value = 'Orange';
+                } else if (value < 1000000) {
+                    color = 'Orange';
                 }
                 return <EntityStatus status={color} />;
             },
@@ -238,8 +239,8 @@ function StorageGroups({
             name: TableColumnsIds.Read,
             header: tableColumnsNames[TableColumnsIds.Read],
             width: 100,
-            render: ({value}) => {
-                return value ? bytesToSpeed(value) : '-';
+            render: ({row}) => {
+                return row.Read ? bytesToSpeed(row.Read) : '-';
             },
             align: DataTable.RIGHT,
         },
@@ -247,8 +248,8 @@ function StorageGroups({
             name: TableColumnsIds.Write,
             header: tableColumnsNames[TableColumnsIds.Write],
             width: 100,
-            render: ({value}) => {
-                return value ? bytesToSpeed(value) : '-';
+            render: ({row}) => {
+                return row.Write ? bytesToSpeed(row.Write) : '-';
             },
             align: DataTable.RIGHT,
         },
@@ -256,14 +257,17 @@ function StorageGroups({
             name: TableColumnsIds.VDisks,
             className: b('vdisks-column'),
             header: tableColumnsNames[TableColumnsIds.VDisks],
-            render: ({value}) => (
+            render: ({row}) => (
                 <div className={b('vdisks-wrapper')}>
-                    {_.map(value as TVDiskStateInfo[], (el) => {
-                        const donors = el.Donors;
+                    {row.VDisks?.map((vDisk) => {
+                        const donors = vDisk.Donors;
 
                         return donors && donors.length > 0 ? (
-                            <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk data={el} nodes={nodes} />
+                            <Stack
+                                className={b('vdisks-item')}
+                                key={stringifyVdiskId(vDisk.VDiskId)}
+                            >
+                                <VDisk data={vDisk} nodes={nodes} />
                                 {donors.map((donor) => {
                                     const isFullData = isFullVDiskData(donor);
 
@@ -280,8 +284,8 @@ function StorageGroups({
                                 })}
                             </Stack>
                         ) : (
-                            <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                <VDisk data={el} nodes={nodes} />
+                            <div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
+                                <VDisk data={vDisk} nodes={nodes} />
                             </div>
                         );
                     })}
@@ -295,7 +299,7 @@ function StorageGroups({
 
     let columns = allColumns;
 
-    if (visibleEntities === VisibleEntities.All) {
+    if (visibleEntities === VISIBLE_ENTITIES.all) {
         columns = allColumns.filter((col) => {
             return (
                 col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
@@ -303,7 +307,7 @@ function StorageGroups({
         });
     }
 
-    if (visibleEntities === VisibleEntities.Space) {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
 
         if (!data.length) {
@@ -317,7 +321,7 @@ function StorageGroups({
         }
     }
 
-    if (visibleEntities === VisibleEntities.Missing) {
+    if (visibleEntities === VISIBLE_ENTITIES.missing) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
 
         if (!data.length) {
@@ -333,7 +337,7 @@ function StorageGroups({
 
     return data ? (
         <DataTable
-            key={visibleEntities as string}
+            key={visibleEntities}
             theme="yandex-cloud"
             data={data}
             columns={columns}
@@ -343,5 +347,3 @@ function StorageGroups({
         />
     ) : null;
 }
-
-export default StorageGroups;

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,9 +1,10 @@
-import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 
-import {VisibleEntities} from '../../../store/reducers/storage';
+import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
+
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {
     AdditionalNodesInfo,
     isUnavailableNode,
@@ -23,7 +24,7 @@ enum TableColumnsIds {
     FQDN = 'FQDN',
     DataCenter = 'DataCenter',
     Rack = 'Rack',
-    uptime = 'uptime',
+    Uptime = 'Uptime',
     PDisks = 'PDisks',
     Missing = 'Missing',
 }
@@ -32,10 +33,9 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageNodesProps {
-    data: any;
-    nodes: any;
+    data: PreparedStorageNode[];
     tableSettings: Settings;
-    visibleEntities: keyof typeof VisibleEntities;
+    visibleEntities: VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
     additionalNodesInfo?: AdditionalNodesInfo;
@@ -46,22 +46,22 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     FQDN: 'FQDN',
     DataCenter: 'DC',
     Rack: 'Rack',
-    uptime: 'Uptime',
+    Uptime: 'Uptime',
     PDisks: 'PDisks',
     Missing: 'Missing',
 };
 
 const b = cn('global-storage-nodes');
 
-function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder | undefined {
+function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     switch (visibleEntities) {
-        case VisibleEntities.All: {
+        case VISIBLE_ENTITIES.all: {
             return {
                 columnId: TableColumnsIds.NodeId,
                 order: DataTable.ASCENDING,
             };
         }
-        case VisibleEntities.Missing: {
+        case VISIBLE_ENTITIES.missing: {
             return {
                 columnId: TableColumnsIds.Missing,
                 order: DataTable.DESCENDING,
@@ -73,7 +73,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageNodes({
+export function StorageNodes({
     data,
     tableSettings,
     visibleEntities,
@@ -83,7 +83,7 @@ function StorageNodes({
 }: StorageNodesProps) {
     const getNodeRef = additionalNodesInfo?.getNodeRef;
 
-    const allColumns: Column<any>[] = [
+    const allColumns: Column<PreparedStorageNode>[] = [
         {
             name: TableColumnsIds.NodeId,
             header: tableColumnsNames[TableColumnsIds.NodeId],
@@ -112,10 +112,10 @@ function StorageNodes({
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.uptime,
-            header: tableColumnsNames[TableColumnsIds.uptime],
+            name: TableColumnsIds.Uptime,
+            header: tableColumnsNames[TableColumnsIds.Uptime],
             width: 130,
-            sortAccessor: ({StartTime}) => -StartTime,
+            sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
             align: DataTable.RIGHT,
         },
         {
@@ -129,11 +129,11 @@ function StorageNodes({
             name: TableColumnsIds.PDisks,
             className: b('pdisks-column'),
             header: tableColumnsNames[TableColumnsIds.PDisks],
-            render: ({value, row}) => (
+            render: ({row}) => (
                 <div className={b('pdisks-wrapper')}>
-                    {_.map(value as any, (el) => (
-                        <div className={b('pdisks-item')} key={el.PDiskId}>
-                            <PDisk data={el} nodeId={row.NodeId} />
+                    {row.PDisks?.map((pDisk) => (
+                        <div className={b('pdisks-item')} key={pDisk.PDiskId}>
+                            <PDisk data={pDisk} nodeId={row.NodeId} />
                         </div>
                     ))}
                 </div>
@@ -146,18 +146,18 @@ function StorageNodes({
 
     let columns = allColumns;
 
-    if (visibleEntities === VisibleEntities.Space) {
+    if (visibleEntities === VISIBLE_ENTITIES.space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
     }
 
     if (!data.length) {
         let message;
 
-        if (visibleEntities === VisibleEntities.Space) {
+        if (visibleEntities === VISIBLE_ENTITIES.space) {
             message = i18n('empty.out_of_space');
         }
 
-        if (visibleEntities === VisibleEntities.Missing) {
+        if (visibleEntities === VISIBLE_ENTITIES.missing) {
             message = i18n('empty.degraded');
         }
 
@@ -166,7 +166,7 @@ function StorageNodes({
         }
 
         if (
-            visibleEntities !== VisibleEntities.All &&
+            visibleEntities !== VISIBLE_ENTITIES.all &&
             nodesUptimeFilter !== NodesUptimeFilterValues.All
         ) {
             message = i18n('empty.several_filters');
@@ -193,5 +193,3 @@ function StorageNodes({
         />
     ) : null;
 }
-
-export default StorageNodes;