ydb-embedded-ui 4.27.1 → 4.28.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.28.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.27.1...v4.28.0) (2024-01-10)
+
+
+### Features
+
+* **Storage:** use VirtualTable ([#628](https://github.com/ydb-platform/ydb-embedded-ui/issues/628)) ([67fd9b0](https://github.com/ydb-platform/ydb-embedded-ui/commit/67fd9b03653dd28be650094c987451b09fcce858))
+
 ## [4.27.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.27.0...v4.27.1) (2024-01-10)
 
 

package/dist/components/EmptyState/EmptyState.scss

@@ -19,10 +19,13 @@
         }
 
         &_size_m {
-            position: relative;
-
             width: 800px;
             height: 240px;
+        }
+
+        &_position_center {
+            position: relative;
+
             margin: 0 auto;
         }
     }

package/dist/components/EmptyState/EmptyState.tsx

@@ -13,18 +13,26 @@ const sizes = {
     l: 350,
 };
 
-interface EmptyStateProps {
+export interface EmptyStateProps {
     title: string;
     image?: ReactNode;
     description?: ReactNode;
     actions?: ReactNode[];
     size?: keyof typeof sizes;
+    position?: 'left' | 'center';
 }
 
-export const EmptyState = ({image, title, description, actions, size = 'm'}: EmptyStateProps) => {
+export const EmptyState = ({
+    image,
+    title,
+    description,
+    actions,
+    size = 'm',
+    position = 'center',
+}: EmptyStateProps) => {
     return (
         <div className={block({size})}>
-            <div className={block('wrapper', {size})}>
+            <div className={block('wrapper', {size, position})}>
                 <div className={block('image')}>
                     {image ? (
                         image

package/dist/components/Errors/403/AccessDenied.tsx

@@ -1,19 +1,20 @@
-import {EmptyState} from '../../EmptyState';
+import {EmptyState, type EmptyStateProps} from '../../EmptyState';
 import {Illustration} from '../../Illustration';
 
 import i18n from '../i18n';
 
-interface AccessDeniedProps {
+interface AccessDeniedProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
     title?: string;
     description?: string;
 }
 
-export const AccessDenied = ({title, description}: AccessDeniedProps) => {
+export const AccessDenied = ({title, description, ...restProps}: AccessDeniedProps) => {
     return (
         <EmptyState
             image={<Illustration name="403" />}
             title={title || i18n('403.title')}
             description={description || i18n('403.description')}
+            {...restProps}
         />
     );
 };

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -5,7 +5,7 @@ import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 interface ProblemFilterProps {
     value: ProblemFilterValue;
-    onChange: (value: string) => void;
+    onChange: (value: ProblemFilterValue) => void;
     className?: string;
 }
 

package/dist/components/UptimeFIlter/UptimeFilter.tsx

@@ -4,7 +4,7 @@ import {NodesUptimeFilterValues, NodesUptimeFilterTitles} from '../../utils/node
 
 interface UptimeFilterProps {
     value: NodesUptimeFilterValues;
-    onChange: (value: string) => void;
+    onChange: (value: NodesUptimeFilterValues) => void;
     className?: string;
 }
 

package/dist/components/VirtualTable/VirtualTable.scss

@@ -15,7 +15,7 @@
     @include body-2-typography();
 
     &__table {
-        width: 100%;
+        width: max-content;
         max-width: 100%;
 
         table-layout: fixed;

package/dist/containers/Cluster/Cluster.tsx

@@ -18,14 +18,12 @@ import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
 import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
-import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
-import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 import {InternalLink} from '../../components/InternalLink';
 import {Tenants} from '../Tenants/Tenants';
-import {Nodes} from '../Nodes/Nodes';
-import {VirtualNodes} from '../Nodes/VirtualNodes';
-import {Storage} from '../Storage/Storage';
+import {StorageWrapper} from '../Storage/StorageWrapper';
+import {NodesWrapper} from '../Nodes/NodesWrapper';
 import {Versions} from '../Versions/Versions';
 
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';
@@ -55,8 +53,6 @@ function Cluster({
     const match = useRouteMatch<{activeTab: string}>(routes.cluster);
     const {activeTab = clusterTabsIds.tenants} = match?.params || {};
 
-    const [useVirtualNodes] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
-
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
         ignoreQueryPrefix: true,
@@ -111,17 +107,20 @@ function Cluster({
                 return <Tenants additionalTenantsProps={additionalTenantsProps} />;
             }
             case clusterTabsIds.nodes: {
-                return useVirtualNodes ? (
-                    <VirtualNodes
+                return (
+                    <NodesWrapper
                         parentContainer={container.current}
                         additionalNodesProps={additionalNodesProps}
                     />
-                ) : (
-                    <Nodes additionalNodesProps={additionalNodesProps} />
                 );
             }
             case clusterTabsIds.storage: {
-                return <Storage additionalNodesProps={additionalNodesProps} />;
+                return (
+                    <StorageWrapper
+                        parentContainer={container.current}
+                        additionalNodesProps={additionalNodesProps}
+                    />
+                );
             }
             case clusterTabsIds.versions: {
                 return <Versions versionToColor={versionToColor} />;

package/dist/containers/Nodes/Nodes.tsx

@@ -106,12 +106,12 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
         dispatch(setSearchValue(value));
     };
 
-    const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value as ProblemFilterValue));
+    const handleProblemFilterChange = (value: ProblemFilterValue) => {
+        dispatch(changeFilter(value));
     };
 
-    const handleUptimeFilterChange = (value: string) => {
-        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
+        dispatch(setNodesUptimeFilter(value));
     };
 
     const renderControls = () => {

package/dist/containers/Nodes/NodesWrapper.tsx

@@ -0,0 +1,21 @@
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
+
+import {VirtualNodes} from './VirtualNodes';
+import {Nodes} from './Nodes';
+
+interface NodesWrapperProps {
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const NodesWrapper = ({parentContainer, ...props}: NodesWrapperProps) => {
+    const [useVirtualTable] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
+    if (useVirtualTable) {
+        return <VirtualNodes parentContainer={parentContainer} {...props} />;
+    }
+
+    return <Nodes {...props} />;
+};

package/dist/containers/Nodes/VirtualNodes.tsx

@@ -72,27 +72,17 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
         return b('node', {unavailable: isUnavailableNode(row)});
     };
 
-    const handleSearchQueryChange = (value: string) => {
-        setSearchValue(value);
-    };
-    const handleProblemFilterChange = (value: string) => {
-        setProblemFilter(value as ProblemFilterValue);
-    };
-    const handleUptimeFilterChange = (value: string) => {
-        setUptimeFilter(value as NodesUptimeFilterValues);
-    };
-
     const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
         return (
             <>
                 <Search
-                    onChange={handleSearchQueryChange}
+                    onChange={setSearchValue}
                     placeholder="Host name"
                     className={b('search')}
                     value={searchValue}
                 />
-                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
-                <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
+                <ProblemFilter value={problemFilter} onChange={setProblemFilter} />
+                <UptimeFilter value={uptimeFilter} onChange={setUptimeFilter} />
                 <EntitiesCount
                     total={totalEntities}
                     current={foundEntities}
@@ -116,7 +106,7 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps
 
     const renderErrorMessage: RenderErrorMessage = (error) => {
         if (error && error.status === 403) {
-            return <AccessDenied />;
+            return <AccessDenied position="left" />;
         }
 
         return <ResponseError error={error} />;

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

@@ -6,6 +6,7 @@
     $inner-border-radius: $outer-border-radius - $border-width;
 
     position: relative;
+    z-index: 0;
 
     display: block;
 

package/dist/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -20,6 +20,7 @@ export const EmptyFilter = ({
 }: EmptyFilterProps) => (
     <EmptyState
         image={<Illustration name="thumbsUp" />}
+        position="left"
         title={title}
         description={message}
         actions={

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

@@ -1,14 +1,13 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {InternalLink} from '../../../components/InternalLink';
 import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
-import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
 import {isFullVDiskData} from '../../../utils/storage';
 
@@ -44,6 +43,7 @@ const stateSeverity = {
 interface PDiskProps {
     nodeId: number;
     data?: TPDiskStateInfo;
+    vDisks?: TVDiskStateInfo[];
 }
 
 const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
@@ -53,12 +53,10 @@ const getStateSeverity = (pDiskState?: TPDiskState) => {
     return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
-export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
+export const PDisk = ({nodeId, data: rawData = {}, vDisks}: PDiskProps) => {
     // NodeId in data is required for the popup
     const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
 
-    const vdisks = useTypedSelector((state) => selectVDisksForPDisk(state, nodeId, data.PDiskId));
-
     const [severity, setSeverity] = useState(getStateSeverity(data.State));
     const [isPopupVisible, setIsPopupVisible] = useState(false);
 
@@ -100,13 +98,13 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
     };
 
     const renderVDisks = () => {
-        if (!vdisks?.length) {
+        if (!vDisks?.length) {
             return null;
         }
 
         return (
             <div className={b('vdisks')}>
-                {vdisks.map((vdisk) => {
+                {vDisks.map((vdisk) => {
                     const donors = vdisk.Donors;
 
                     return (

package/dist/containers/Storage/Storage.tsx

@@ -1,11 +1,7 @@
 import {useCallback, useEffect} from 'react';
 import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
 
-import {Search} from '../../components/Search';
-import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
-import {EntitiesCount} from '../../components/EntitiesCount';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {ResponseError} from '../../components/Errors/ResponseError';
 
@@ -51,14 +47,11 @@ import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 
 import {StorageGroups} from './StorageGroups/StorageGroups';
 import {StorageNodes} from './StorageNodes/StorageNodes';
-import {StorageTypeFilter} from './StorageTypeFilter/StorageTypeFilter';
-import {StorageVisibleEntitiesFilter} from './StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
-import {UsageFilter} from './UsageFilter';
+import {StorageControls} from './StorageControls/StorageControls';
+import {b} from './shared';
 
 import './Storage.scss';
 
-const b = cn('global-storage');
-
 interface StorageProps {
     additionalNodesProps?: AdditionalNodesProps;
     tenant?: string;
@@ -155,16 +148,16 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
         dispatch(setStorageTextFilter(value));
     };
 
-    const handleGroupVisibilityChange = (value: string) => {
-        dispatch(setVisibleEntities(value as VisibleEntities));
+    const handleGroupVisibilityChange = (value: VisibleEntities) => {
+        dispatch(setVisibleEntities(value));
     };
 
-    const handleStorageTypeChange = (value: string) => {
-        dispatch(setStorageType(value as StorageType));
+    const handleStorageTypeChange = (value: StorageType) => {
+        dispatch(setStorageType(value));
     };
 
-    const handleUptimeFilterChange = (value: string) => {
-        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
+        dispatch(setNodesUptimeFilter(value));
     };
 
     const handleShowAllNodes = () => {
@@ -202,65 +195,35 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
         );
     };
 
-    const renderEntitiesCount = () => {
-        const entityName = storageType === STORAGE_TYPES.groups ? 'Groups' : 'Nodes';
-        const current =
-            storageType === STORAGE_TYPES.groups ? storageGroups.length : storageNodes.length;
-
-        return (
-            <EntitiesCount
-                label={entityName}
-                loading={loading && !wasLoaded}
-                total={entitiesCount.total}
-                current={current}
-            />
-        );
-    };
-
     const renderControls = () => {
         return (
-            <>
-                <div className={b('search')}>
-                    <Search
-                        placeholder={
-                            storageType === STORAGE_TYPES.groups
-                                ? 'Group ID, Pool name'
-                                : 'Node ID, FQDN'
-                        }
-                        onChange={handleTextFilterChange}
-                        value={filter}
-                    />
-                </div>
-
-                {!isNodePage && (
-                    <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
-                )}
-
-                <StorageVisibleEntitiesFilter
-                    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()}
-            </>
+            <StorageControls
+                searchValue={filter}
+                handleSearchValueChange={handleTextFilterChange}
+                withTypeSelector={!isNodePage}
+                storageType={storageType}
+                handleStorageTypeChange={handleStorageTypeChange}
+                visibleEntities={visibleEntities}
+                handleVisibleEntitiesChange={handleGroupVisibilityChange}
+                nodesUptimeFilter={nodesUptimeFilter}
+                handleNodesUptimeFilterChange={handleUptimeFilterChange}
+                groupsUsageFilter={usageFilter}
+                groupsUsageFilterOptions={usageFilterOptions}
+                handleGroupsUsageFilterChange={handleUsageFilterChange}
+                entitiesCountCurrent={
+                    storageType === STORAGE_TYPES.groups
+                        ? storageGroups.length
+                        : storageNodes.length
+                }
+                entitiesCountTotal={entitiesCount.total}
+                entitiesLoading={loading && !wasLoaded}
+            />
         );
     };
 
     if (error) {
         if (error.status === 403) {
-            return <AccessDenied />;
+            return <AccessDenied position="left" />;
         }
 
         return <ResponseError error={error} />;

package/dist/containers/Storage/StorageControls/StorageControls.tsx

@@ -0,0 +1,104 @@
+import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
+import {Search} from '../../../components/Search/Search';
+import {UptimeFilter} from '../../../components/UptimeFIlter';
+
+import type {StorageType, VisibleEntities} from '../../../store/reducers/storage/types';
+import {STORAGE_TYPES} from '../../../store/reducers/storage/constants';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+
+import {UsageFilter, type UsageFilterItem} from '../UsageFilter/UsageFilter';
+import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter';
+import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
+import i18n from '../i18n';
+import {b} from '../shared';
+
+interface StorageControlsProps {
+    searchValue?: string;
+    handleSearchValueChange: (value: string) => void;
+
+    withTypeSelector?: boolean;
+    storageType: StorageType;
+    handleStorageTypeChange: (value: StorageType) => void;
+
+    visibleEntities: VisibleEntities;
+    handleVisibleEntitiesChange: (value: VisibleEntities) => void;
+
+    nodesUptimeFilter: NodesUptimeFilterValues;
+    handleNodesUptimeFilterChange: (value: NodesUptimeFilterValues) => void;
+
+    withGroupsUsageFilter?: boolean;
+    groupsUsageFilter?: string[];
+    groupsUsageFilterOptions?: UsageFilterItem[];
+    handleGroupsUsageFilterChange?: (value: string[]) => void;
+
+    entitiesCountCurrent: number;
+    entitiesCountTotal?: number;
+    entitiesLoading: boolean;
+}
+
+export const StorageControls = ({
+    searchValue,
+    handleSearchValueChange,
+
+    withTypeSelector,
+    storageType,
+    handleStorageTypeChange,
+
+    visibleEntities,
+    handleVisibleEntitiesChange,
+
+    nodesUptimeFilter,
+    handleNodesUptimeFilterChange,
+
+    withGroupsUsageFilter,
+    groupsUsageFilter,
+    groupsUsageFilterOptions,
+    handleGroupsUsageFilterChange,
+
+    entitiesCountCurrent,
+    entitiesCountTotal,
+    entitiesLoading,
+}: StorageControlsProps) => {
+    const isNodes = storageType === STORAGE_TYPES.nodes;
+    const entityName = isNodes ? i18n('nodes') : i18n('groups');
+
+    return (
+        <>
+            <Search
+                value={searchValue}
+                onChange={handleSearchValueChange}
+                placeholder={
+                    isNodes
+                        ? i18n('controls_nodes-search-placeholder')
+                        : i18n('controls_groups-search-placeholder')
+                }
+                className={b('search')}
+            />
+            {withTypeSelector && (
+                <StorageTypeFilter value={storageType} onChange={handleStorageTypeChange} />
+            )}
+            <StorageVisibleEntitiesFilter
+                value={visibleEntities}
+                onChange={handleVisibleEntitiesChange}
+            />
+
+            {isNodes && (
+                <UptimeFilter value={nodesUptimeFilter} onChange={handleNodesUptimeFilterChange} />
+            )}
+            {!isNodes && withGroupsUsageFilter && (
+                <UsageFilter
+                    value={groupsUsageFilter}
+                    onChange={handleGroupsUsageFilterChange}
+                    groups={groupsUsageFilterOptions}
+                />
+            )}
+
+            <EntitiesCount
+                label={entityName}
+                loading={entitiesLoading}
+                total={entitiesCountTotal}
+                current={entitiesCountCurrent}
+            />
+        </>
+    );
+};