ydb-embedded-ui 4.9.0 → 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,12 +1,10 @@
-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 {TVDiskStateInfo} from '../../../types/api/vdisk';
-import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
@@ -43,8 +41,8 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageGroupsProps {
-    data: any;
-    nodes: NodesMap;
+    data: PreparedStorageGroup[];
+    nodes?: NodesMap;
     tableSettings: Settings;
     visibleEntities: VisibleEntities;
     onShowAll?: VoidFunction;
@@ -93,25 +91,25 @@ function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     }
 }
 
-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}
                             >
@@ -129,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
@@ -157,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,
         },
@@ -189,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,
         },
@@ -198,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,
         },
@@ -207,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,
         },
@@ -216,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} />;
             },
@@ -235,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,
         },
@@ -244,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,
         },
@@ -253,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);
 
@@ -277,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>
                         );
                     })}
@@ -330,7 +337,7 @@ function StorageGroups({
 
     return data ? (
         <DataTable
-            key={visibleEntities as string}
+            key={visibleEntities}
             theme="yandex-cloud"
             data={data}
             columns={columns}
@@ -340,5 +347,3 @@ function StorageGroups({
         />
     ) : null;
 }
-
-export default StorageGroups;

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

@@ -1,9 +1,8 @@
-import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 
-import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {
@@ -25,7 +24,7 @@ enum TableColumnsIds {
     FQDN = 'FQDN',
     DataCenter = 'DataCenter',
     Rack = 'Rack',
-    uptime = 'uptime',
+    Uptime = 'Uptime',
     PDisks = 'PDisks',
     Missing = 'Missing',
 }
@@ -34,8 +33,7 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageNodesProps {
-    data: any;
-    nodes: any;
+    data: PreparedStorageNode[];
     tableSettings: Settings;
     visibleEntities: VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
@@ -48,7 +46,7 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     FQDN: 'FQDN',
     DataCenter: 'DC',
     Rack: 'Rack',
-    uptime: 'Uptime',
+    Uptime: 'Uptime',
     PDisks: 'PDisks',
     Missing: 'Missing',
 };
@@ -75,7 +73,7 @@ function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     }
 }
 
-function StorageNodes({
+export function StorageNodes({
     data,
     tableSettings,
     visibleEntities,
@@ -85,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],
@@ -114,8 +112,8 @@ function StorageNodes({
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.uptime,
-            header: tableColumnsNames[TableColumnsIds.uptime],
+            name: TableColumnsIds.Uptime,
+            header: tableColumnsNames[TableColumnsIds.Uptime],
             width: 130,
             sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
             align: DataTable.RIGHT,
@@ -131,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>
@@ -195,5 +193,3 @@ function StorageNodes({
         />
     ) : null;
 }
-
-export default StorageNodes;

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -13,6 +13,7 @@
 
         &-meta {
             position: relative;
+            z-index: 0;
 
             padding: 0 5px;
 

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -3,7 +3,7 @@ import cn from 'bem-cn-lite';
 
 import {Select, SelectOption} from '@gravity-ui/uikit';
 
-import EntityStatus from "../../../components/EntityStatus/EntityStatus";
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 
 import {getUsageSeverityForEntityStatus} from '../utils';
 
@@ -27,14 +27,7 @@ interface UsageFilterProps {
 const b = cn('usage-filter');
 
 export const UsageFilter = (props: UsageFilterProps) => {
-    const {
-        className,
-        value = [],
-        groups = [],
-        onChange,
-        debounce = 200,
-        disabled,
-    } = props;
+    const {className, value = [], groups = [], onChange, debounce = 200, disabled} = props;
 
     const [filterValue, setFilterValue] = useState(value);
     const timer = useRef<number>();
@@ -50,11 +43,15 @@ export const UsageFilter = (props: UsageFilterProps) => {
         });
     }, [value]);
 
-    const options = useMemo(() => groups.map(({threshold, count}) => ({
-        value: String(threshold),
-        text: `${threshold}%`,
-        data: {count}
-    })), [groups]);
+    const options = useMemo(
+        () =>
+            groups.map(({threshold, count}) => ({
+                value: String(threshold),
+                text: `${threshold}%`,
+                data: {count},
+            })),
+        [groups],
+    );
 
     const handleUpdate = (newValue: string[]) => {
         setFilterValue(newValue);
@@ -67,17 +64,20 @@ export const UsageFilter = (props: UsageFilterProps) => {
 
     const maxWidth = Math.max(...groups.map(({count}) => count));
 
-    const renderOption = ({value, data, text}: SelectOption) => (
+    const renderOption = ({value: optionValue, data, text}: SelectOption) => (
         <div className={b('option')}>
             <EntityStatus
                 className={b('option-title')}
-                status={getUsageSeverityForEntityStatus(Number(value))}
+                status={getUsageSeverityForEntityStatus(Number(optionValue))}
                 name={text}
                 size="xs"
             />
             <div className={b('option-meta')}>
                 {i18n('groups_count', {count: data.count})}
-                <div className={b('option-bar')} style={{width: `${data.count / maxWidth * 100}%`}} />
+                <div
+                    className={b('option-bar')}
+                    style={{width: `${(data.count / maxWidth) * 100}%`}}
+                />
             </div>
         </div>
     );

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

@@ -13,14 +13,14 @@ import {useTypedSelector} from '../../../utils/hooks';
 import routes, {createHref} from '../../../routes';
 import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema';
-import { setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import {Loader} from '../../../components/Loader';
 
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes';
-import Storage from '../../Storage/Storage';
+import {Storage} from '../../Storage/Storage';
 import {Tablets} from '../../Tablets';
 
 import Describe from './Describe/Describe';
@@ -130,7 +130,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Tablets path={currentSchemaPath} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return <Storage tenant={tenantNameString} database={true} />;
+                return <Storage tenant={tenantNameString} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -27,10 +27,13 @@ const renderName = (tenant) => {
         const {Name} = tenant;
         return (
             <div className={b('tenant-name-wrapper')}>
-                <EntityStatus status={tenant.State} />
-                <span className={b('tenant-name-trim')}>
-                    <span className={b('tenant-name')}>{Name}</span>
-                </span>
+                <EntityStatus
+                    status={tenant.State}
+                    name={Name}
+                    withLeftTrim
+                    hasClipboardButton
+                    clipboardButtonAlwaysVisible
+                />
             </div>
         );
     }

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

@@ -10,21 +10,6 @@
         display: flex;
         overflow: hidden;
         align-items: center;
-
-        & .yc-link {
-            display: flex;
-        }
-    }
-    &__tenant-name-trim {
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        direction: rtl;
-    }
-
-    &__tenant-name {
-        unicode-bidi: plaintext;
     }
 
     &__top {