feat(Storage): use VirtualTable (#628)

Author: artemmufazalov

src/components/EmptyState/EmptyState.scss

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

src/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

src/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}
         />
     );
 };

src/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;
 }
 

src/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;
 }
 

src/components/VirtualTable/VirtualTable.scss

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

src/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} />;

src/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 = () => {

src/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} />;
+};

src/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} />;