feat(Clusters): allow add, edit and delete cluster funcs (#2369)

Author: artemmufazalov

src/containers/App/Content.tsx

@@ -27,7 +27,6 @@ import {lazyComponent} from '../../utils/lazyComponent';
 import Authentication from '../Authentication/Authentication';
 import {getClusterPath} from '../Cluster/utils';
 import Header from '../Header/Header';
-import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
 
 import {
     ClusterSlot,
@@ -41,7 +40,6 @@ import {
     TenantSlot,
     VDiskPageSlot,
 } from './appSlots';
-import i18n from './i18n';
 
 import './App.scss';
 
@@ -147,26 +145,22 @@ export function Content(props: ContentProps) {
     const redirectProps: RedirectProps =
         redirect?.props ?? (singleClusterMode ? {to: getClusterPath()} : {to: routes.clusters});
 
-    let mainPage: RawBreadcrumbItem | undefined;
-    if (!singleClusterMode) {
-        mainPage = {text: i18n('pages.clusters'), link: routes.clusters};
-    }
-
     return (
         <Switch>
-            {singleClusterMode
-                ? null
-                : renderRouteSlot(slots, {
-                      path: routes.clusters,
-                      exact: true,
-                      component: Clusters,
-                      slot: ClustersSlot,
-                  })}
             {additionalRoutes?.rendered}
-            {/* Single cluster routes */}
-            <Route key="single-cluster">
-                <Header mainPage={mainPage} />
+            <Route>
+                <Header />
                 <Switch>
+                    {singleClusterMode
+                        ? null
+                        : renderRouteSlot(slots, {
+                              path: routes.clusters,
+                              exact: true,
+                              component: Clusters,
+                              slot: ClustersSlot,
+                              wrapper: GetMetaCapabilities,
+                          })}
+                    {/* Single cluster routes */}
                     {routesSlots.map((route) => {
                         return renderRouteSlot(slots, route);
                     })}
@@ -226,6 +220,20 @@ function GetCapabilities({children}: {children: React.ReactNode}) {
     );
 }
 
+// Only for Clusters page, there is no need to request cluster capabilities there (GetCapabilities)
+// This wrapper is not used in GetCapabilities so the page does not wait for 2 consecutive capabilities requests
+function GetMetaCapabilities({children}: {children: React.ReactNode}) {
+    useMetaCapabilitiesQuery();
+    // It is always true if there is no meta, since request finishes with an error
+    const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();
+
+    return (
+        <LoaderWrapper loading={!metaCapabilitiesLoaded} size="l">
+            {children}
+        </LoaderWrapper>
+    );
+}
+
 interface ContentWrapperProps {
     singleClusterMode: boolean;
     isAuthenticated: boolean;

src/containers/App/i18n/en.json

@@ -2,18 +2,16 @@
 
 .clusters {
     overflow: auto;
+    gap: var(--g-spacing-4);
 
-    padding-top: 15px;
+    padding: var(--g-spacing-4) var(--g-spacing-5) 0;
 
     @include mixins.body-2-typography();
     @include mixins.flex-container();
+
     &__autorefresh {
         margin-left: auto;
     }
-    &__cluster {
-        display: flex;
-        align-items: center;
-    }
     &__cluster-status {
         width: 18px;
         height: 18px;
@@ -63,11 +61,6 @@
         white-space: normal;
     }
 
-    &__controls {
-        display: flex;
-
-        margin-bottom: 20px;
-    }
     &__control {
         width: 200px;
         margin-right: 15px;
@@ -87,48 +80,6 @@
         transition: none;
     }
 
-    &__aggregation,
-    &__controls {
-        margin-right: 15px;
-        margin-left: 15px;
-    }
-
-    &__aggregation {
-        display: flex;
-        align-items: center;
-
-        width: max-content;
-        height: 46px;
-        margin-bottom: 20px;
-        padding: 10px 20px;
-
-        border: 1px solid var(--g-color-line-generic);
-        border-radius: 10px;
-        background: var(--g-color-base-generic-ultralight);
-    }
-
-    &__aggregation-value-container {
-        display: flex;
-        align-items: center;
-
-        max-width: 230px;
-
-        font-size: var(--g-text-subheader-3-font-size);
-        line-height: var(--g-text-subheader-3-line-height);
-    }
-
-    &__aggregation-value-container:not(:last-child) {
-        margin-right: 30px;
-    }
-
-    &__aggregation-label {
-        margin-right: 8px;
-
-        font-weight: 200;
-
-        color: var(--g-color-text-complementary);
-    }
-
     &__text {
         color: var(--g-color-text-primary);
         @include mixins.body-2-typography();
@@ -147,7 +98,6 @@
     &__table-wrapper {
         overflow: auto;
 
-        padding-left: 5px;
         @include mixins.flex-container();
     }
 
@@ -186,4 +136,8 @@
         margin-left: 15px;
         @include mixins.body-2-typography();
     }
+
+    &__remove-cluster {
+        color: var(--ydb-color-status-red);
+    }
 }

src/containers/App/i18n/index.ts

@@ -1,30 +1,34 @@
 import React from 'react';
 
 import DataTable from '@gravity-ui/react-data-table';
-import {Select, TableColumnSetup} from '@gravity-ui/uikit';
+import {Flex, Select, TableColumnSetup, Text} from '@gravity-ui/uikit';
 import {Helmet} from 'react-helmet-async';
 
 import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Loader} from '../../components/Loader';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../components/Search';
+import {
+    useDeleteClusterFeatureAvailable,
+    useEditClusterFeatureAvailable,
+} from '../../store/reducers/capabilities/hooks';
 import {changeClustersFilters, clustersApi} from '../../store/reducers/clusters/clusters';
 import {
-    aggregateClustersInfo,
     filterClusters,
     selectClusterNameFilter,
     selectServiceFilter,
     selectStatusFilter,
     selectVersionFilter,
 } from '../../store/reducers/clusters/selectors';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
+import {uiFactory} from '../../uiFactory/uiFactory';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {useSelectedColumns} from '../../utils/hooks/useSelectedColumns';
 import {getMinorVersion} from '../../utils/versions';
 
-import {ClustersStatistics} from './ClustersStatistics';
-import {CLUSTERS_COLUMNS, CLUSTERS_COLUMNS_WIDTH_LS_KEY} from './columns';
+import {CLUSTERS_COLUMNS_WIDTH_LS_KEY, getClustersColumns} from './columns';
 import {
     CLUSTERS_SELECTED_COLUMNS_KEY,
     COLUMNS_NAMES,
@@ -44,6 +48,15 @@ export function Clusters() {
 
     const dispatch = useTypedDispatch();
 
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('clusters', {}));
+    }, [dispatch]);
+
+    const isEditClusterAvailable =
+        useEditClusterFeatureAvailable() && uiFactory.onEditCluster !== undefined;
+    const isDeleteClusterAvailable =
+        useDeleteClusterFeatureAvailable() && uiFactory.onDeleteCluster !== undefined;
+
     const clusterName = useTypedSelector(selectClusterNameFilter);
     const status = useTypedSelector(selectStatusFilter);
     const service = useTypedSelector(selectServiceFilter);
@@ -62,8 +75,12 @@ export function Clusters() {
         dispatch(changeClustersFilters({version: value}));
     };
 
+    const rawColumns = React.useMemo(() => {
+        return getClustersColumns({isEditClusterAvailable, isDeleteClusterAvailable});
+    }, [isDeleteClusterAvailable, isEditClusterAvailable]);
+
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
-        CLUSTERS_COLUMNS,
+        rawColumns,
         CLUSTERS_SELECTED_COLUMNS_KEY,
         COLUMNS_TITLES,
         DEFAULT_COLUMNS,
@@ -99,11 +116,6 @@ export function Clusters() {
         return filterClusters(clusters ?? [], {clusterName, status, service, version});
     }, [clusterName, clusters, service, status, version]);
 
-    const aggregation = React.useMemo(
-        () => aggregateClustersInfo(filteredClusters),
-        [filteredClusters],
-    );
-
     const statuses = React.useMemo(() => {
         return Array.from(
             new Set(
@@ -114,14 +126,29 @@ export function Clusters() {
             .map((el) => ({value: el, content: el}));
     }, [clusters]);
 
+    const renderPageTitle = () => {
+        return (
+            <Flex justifyContent="space-between">
+                <Flex gap={2}>
+                    <Text variant="header-1">{i18n('page_title')}</Text>
+                    <Text variant="header-1" color="secondary">
+                        {clusters?.length}
+                    </Text>
+                </Flex>
+                <AutoRefreshControl className={b('autorefresh')} />
+            </Flex>
+        );
+    };
+
     return (
         <div className={b()}>
             <Helmet>
                 <title>{i18n('page_title')}</title>
             </Helmet>
 
-            <ClustersStatistics stats={aggregation} count={filteredClusters.length} />
-            <div className={b('controls')}>
+            {renderPageTitle()}
+
+            <Flex>
                 <div className={b('control', {wide: true})}>
                     <Search
                         placeholder={i18n('controls_search-placeholder')}
@@ -178,8 +205,7 @@ export function Clusters() {
                         sortable={false}
                     />
                 </div>
-                <AutoRefreshControl className={b('autorefresh')} />
-            </div>
+            </Flex>
             {query.isError ? <ResponseError error={query.error} className={b('error')} /> : null}
             {query.isLoading ? <Loader size="l" /> : null}
             {query.fulfilledTimeStamp ? (