feat: add databases page (#3246)

Author: artemmufazalov

src/components/TenantNameWrapper/TenantNameWrapper.tsx

@@ -16,6 +16,7 @@ import i18n from './i18n';
 interface TenantNameWrapperProps {
     tenant: PreparedTenant;
     additionalTenantsProps?: AdditionalTenantsProps;
+    externalLink?: boolean;
 }
 
 const getTenantBackend = (
@@ -35,12 +36,16 @@ const getTenantBackend = (
     return additionalTenantsProps.prepareTenantBackend(nodeId);
 };
 
-export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWrapperProps) {
+export function TenantNameWrapper({
+    tenant,
+    additionalTenantsProps,
+    externalLink,
+}: TenantNameWrapperProps) {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const {settings} = useClusterBaseInfo();
 
     const backend = getTenantBackend(tenant, additionalTenantsProps);
-    const isExternalLink = Boolean(backend);
+    const isExternalLink = externalLink || Boolean(backend);
 
     const links = getDatabaseLinks(additionalTenantsProps, tenant?.Name, tenant?.Type);
     const {monitoring: clusterMonitoring} = useClusterBaseInfo();
@@ -72,6 +77,7 @@ export function TenantNameWrapper({tenant, additionalTenantsProps}: TenantNameWr
             hasClipboardButton
             path={getTenantPath(
                 {
+                    clusterName: tenant.Cluster,
                     database: useDatabaseId ? tenant.Id : tenant.Name,
                     backend,
                 },

src/containers/App/Content.tsx

@@ -34,7 +34,7 @@ import {useAppTitle} from './AppTitleContext';
 import {SettingsBootstrap} from './SettingsBootstrap';
 import {
     ClusterSlot,
-    ClustersSlot,
+    HomePageSlot,
     NodeSlot,
     PDiskPageSlot,
     RedirectSlot,
@@ -104,7 +104,15 @@ const routesSlots: RouteSlot[] = [
     },
 ];
 
-const Clusters = lazyComponent(() => import('../Clusters/Clusters'), 'Clusters');
+const multiClusterRoutes: RouteSlot[] = [
+    {
+        path: routes.homePage,
+        exact: true,
+        component: lazyComponent(() => import('../HomePage/HomePage'), 'HomePage'),
+        slot: HomePageSlot,
+        wrapper: HomePageDataWrapper,
+    },
+];
 
 function renderRouteSlot(slots: SlotMap, route: RouteSlot) {
     return (
@@ -147,7 +155,7 @@ export function Content(props: ContentProps) {
 
     const redirect = slots.get(RedirectSlot);
     const redirectProps: RedirectProps =
-        redirect?.props ?? (singleClusterMode ? {to: getClusterPath()} : {to: routes.clusters});
+        redirect?.props ?? (singleClusterMode ? {to: getClusterPath()} : {to: routes.homePage});
 
     return (
         <Switch>
@@ -157,12 +165,8 @@ export function Content(props: ContentProps) {
                 <Switch>
                     {singleClusterMode
                         ? null
-                        : renderRouteSlot(slots, {
-                              path: routes.clusters,
-                              exact: true,
-                              component: Clusters,
-                              slot: ClustersSlot,
-                              wrapper: ClustersDataWrapper,
+                        : multiClusterRoutes.map((route) => {
+                              return renderRouteSlot(slots, route);
                           })}
                     {/* Single cluster routes */}
                     {routesSlots.map((route) => {
@@ -193,7 +197,7 @@ function DataWrapper({children}: {children: React.ReactNode}) {
     );
 }
 
-function ClustersDataWrapper({children}: {children: React.ReactNode}) {
+function HomePageDataWrapper({children}: {children: React.ReactNode}) {
     return (
         <GetMetaCapabilities>
             <GetMetaUser>{children}</GetMetaUser>

src/containers/App/appSlots.tsx

@@ -2,19 +2,19 @@ import type {RedirectProps, RouteComponentProps} from 'react-router-dom';
 
 import {createSlot} from '../../components/slots';
 import type {Cluster} from '../Cluster/Cluster';
-import type {Clusters} from '../Clusters/Clusters';
+import type {HomePage} from '../HomePage/HomePage';
 import type {Node} from '../Node/Node';
 import type {PDiskPage} from '../PDiskPage/PDiskPage';
 import type {StorageGroupPage} from '../StorageGroupPage/StorageGroupPage';
 import type {Tablet} from '../Tablet';
 import type {Tenant} from '../Tenant/Tenant';
 import type {VDiskPage} from '../VDiskPage/VDiskPage';
 
-export const ClustersSlot = createSlot<{
+export const HomePageSlot = createSlot<{
     children:
         | React.ReactNode
-        | ((props: {component: typeof Clusters} & RouteComponentProps) => React.ReactNode);
-}>('clusters');
+        | ((props: {component: typeof HomePage} & RouteComponentProps) => React.ReactNode);
+}>('homePage');
 export const ClusterSlot = createSlot<{
     children:
         | React.ReactNode

src/containers/Cluster/Cluster.tsx

@@ -39,7 +39,7 @@ import {Configs} from '../Configs/Configs';
 import {Nodes} from '../Nodes/Nodes';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
 import {TabletsTable} from '../Tablets/TabletsTable';
-import {Tenants} from '../Tenants/Tenants';
+import {TenantsClusterTab} from '../Tenants/TenantsClusterTab';
 import {VersionsContainer} from '../Versions/Versions';
 
 import {ClusterOverview} from './ClusterOverview/ClusterOverview';
@@ -217,7 +217,7 @@ export function Cluster({additionalClusterProps, additionalTenantsProps}: Cluste
                                 ).pathname
                             }
                         >
-                            <Tenants
+                            <TenantsClusterTab
                                 additionalTenantsProps={additionalTenantsProps}
                                 scrollContainerRef={container}
                             />

src/containers/Clusters/Clusters.scss

@@ -1,22 +1,8 @@
 @use '../../styles/mixins.scss';
 
-.clusters {
-    overflow: auto;
-    gap: var(--g-spacing-4);
-
-    padding: var(--g-spacing-4) 0 0 var(--g-spacing-5);
-
+.ydb-clusters {
     @include mixins.body-2-typography();
-    @include mixins.flex-container();
-
-    &__title-wrapper,
-    &__controls-wrapper {
-        padding-right: var(--g-spacing-5);
-    }
 
-    &__autorefresh {
-        margin-left: auto;
-    }
     &__cluster-name {
         white-space: normal;
         text-decoration: none;
@@ -31,17 +17,6 @@
         white-space: normal;
     }
 
-    &__control {
-        width: 200px;
-        margin-right: 15px;
-
-        &_wide {
-            width: 320px;
-        }
-    }
-    &__column-setup {
-        margin-left: auto;
-    }
     &__empty-cell {
         color: var(--g-color-text-secondary);
     }
@@ -57,21 +32,8 @@
     }
 
     &__table-wrapper {
-        overflow: auto;
-
-        @include mixins.flex-container();
-    }
-
-    &__table-content {
-        overflow: auto;
-
-        height: 100%;
-    }
-
-    &__table {
         --data-table-cell-align: top;
         --data-table-cell-vertical-padding: var(--g-spacing-3);
-        @include mixins.freeze-nth-column(1);
     }
 
     &__balancer-copy-icon {