feat: allow pass create and delete DB funcs to UI (#2087)

artemmufazalov · web-flow · commit 810f60b46ad7 · 2025-04-03T15:51:56.000Z
diff --git a/src/containers/App/Content.tsx b/src/containers/App/Content.tsx
@@ -17,6 +17,8 @@ import {
     useCapabilitiesLoaded,
     useCapabilitiesQuery,
     useClusterWithoutAuthInUI,
+    useMetaCapabilitiesLoaded,
+    useMetaCapabilitiesQuery,
 } from '../../store/reducers/capabilities/hooks';
 import {nodesListApi} from '../../store/reducers/nodesList';
 import {cn} from '../../utils/cn';
@@ -213,8 +215,12 @@ function GetCapabilities({children}: {children: React.ReactNode}) {
     useCapabilitiesQuery();
     const capabilitiesLoaded = useCapabilitiesLoaded();
 
+    useMetaCapabilitiesQuery();
+    // It is always true if there is no meta, since request finishes with an error
+    const metaCapabilitiesLoaded = useMetaCapabilitiesLoaded();
+
     return (
-        <LoaderWrapper loading={!capabilitiesLoaded} size="l">
+        <LoaderWrapper loading={!capabilitiesLoaded || !metaCapabilitiesLoaded} size="l">
             {children}
         </LoaderWrapper>
     );
diff --git a/src/containers/Tenants/Tenants.scss b/src/containers/Tenants/Tenants.scss
@@ -52,4 +52,23 @@
     &__name {
         overflow: hidden;
     }
+
+    &__controls {
+        width: 100%;
+    }
+
+    &__table-wrapper {
+        width: max-content;
+    }
+
+    &__create-database {
+        position: sticky;
+        right: 0;
+
+        margin: 0 0 0 auto;
+    }
+
+    &__remove-db {
+        color: var(--ydb-color-status-red);
+    }
 }
diff --git a/src/containers/Tenants/Tenants.tsx b/src/containers/Tenants/Tenants.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 
+import {CirclePlus, TrashBin} from '@gravity-ui/icons';
 import type {Column} from '@gravity-ui/react-data-table';
 import DataTable from '@gravity-ui/react-data-table';
-import {Button} from '@gravity-ui/uikit';
+import type {DropdownMenuItem} from '@gravity-ui/uikit';
+import {Button, DropdownMenu, Icon} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
 import {ResponseError} from '../../components/Errors/ResponseError';
@@ -13,7 +15,10 @@ import {ResizeableDataTable} from '../../components/ResizeableDataTable/Resizeab
 import {Search} from '../../components/Search';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TenantNameWrapper} from '../../components/TenantNameWrapper/TenantNameWrapper';
-import {clusterName} from '../../store';
+import {
+    useCreateDatabaseFeatureAvailable,
+    useDeleteDatabaseFeatureAvailable,
+} from '../../store/reducers/capabilities/hooks';
 import {
     ProblemFilterValues,
     changeFilter,
@@ -28,6 +33,7 @@ import {
 import {setSearchValue, tenantsApi} from '../../store/reducers/tenants/tenants';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
+import {uiFactory} from '../../uiFactory/uiFactory';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {
@@ -36,6 +42,9 @@ import {
     formatStorageValuesToGb,
 } from '../../utils/dataFormatters/dataFormatters';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {useClusterNameFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+
+import i18n from './i18n';
 
 import './Tenants.scss';
 
@@ -50,13 +59,20 @@ interface TenantsProps {
 export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     const dispatch = useTypedDispatch();
 
+    const clusterName = useClusterNameFromQuery();
+
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {currentData, isFetching, error} = tenantsApi.useGetTenantsInfoQuery(
         {clusterName},
         {pollingInterval: autoRefreshInterval},
     );
     const loading = isFetching && currentData === undefined;
 
+    const isCreateDBAvailable =
+        useCreateDatabaseFeatureAvailable() && uiFactory.onCreateDB !== undefined;
+    const isDeleteDBAvailable =
+        useDeleteDatabaseFeatureAvailable() && uiFactory.onDeleteDB !== undefined;
+
     const tenants = useTypedSelector((state) => selectTenants(state, clusterName));
     const searchValue = useTypedSelector(selectTenantsSearchValue);
     const filteredTenants = useTypedSelector((state) => selectFilteredTenants(state, clusterName));
@@ -70,6 +86,23 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
         dispatch(setSearchValue(value));
     };
 
+    const renderCreateDBButton = () => {
+        if (isCreateDBAvailable && clusterName) {
+            return (
+                <Button
+                    view="action"
+                    onClick={() => uiFactory.onCreateDB?.({clusterName})}
+                    className={b('create-database')}
+                >
+                    <Icon data={CirclePlus} />
+                    {i18n('create-database')}
+                </Button>
+            );
+        }
+
+        return null;
+    };
+
     const renderControls = () => {
         return (
             <React.Fragment>
@@ -86,6 +119,7 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
                     label={'Databases'}
                     loading={loading}
                 />
+                {renderCreateDBButton()}
             </React.Fragment>
         );
     };
@@ -202,6 +236,53 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
             },
         ];
 
+        if (isDeleteDBAvailable) {
+            columns.push({
+                name: 'actions',
+                header: '',
+                width: 40,
+                resizeable: false,
+                align: DataTable.CENTER,
+                render: ({row}) => {
+                    const databaseId = row.UserAttributes?.database_id;
+                    const databaseName = row.Name;
+
+                    let menuItems: (DropdownMenuItem | DropdownMenuItem[])[] = [];
+
+                    if (clusterName && databaseName && databaseId) {
+                        menuItems = [
+                            {
+                                text: i18n('remove'),
+                                iconStart: <TrashBin />,
+                                action: () => {
+                                    uiFactory.onDeleteDB?.({
+                                        clusterName,
+                                        databaseId,
+                                        databaseName,
+                                    });
+                                },
+                                className: b('remove-db'),
+                            },
+                        ];
+                    }
+
+                    if (!menuItems.length) {
+                        return null;
+                    }
+                    return (
+                        <DropdownMenu
+                            defaultSwitcherProps={{
+                                view: 'flat',
+                                size: 's',
+                                pin: 'brick-brick',
+                            }}
+                            items={menuItems}
+                        />
+                    );
+                },
+            });
+        }
+
         if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
             return <Illustration name="thumbsUp" width="200" />;
         }
@@ -218,12 +299,16 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
     };
 
     return (
-        <TableWithControlsLayout>
-            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
-            {error ? <ResponseError error={error} /> : null}
-            <TableWithControlsLayout.Table loading={loading}>
-                {currentData ? renderTable() : null}
-            </TableWithControlsLayout.Table>
-        </TableWithControlsLayout>
+        <div className={b('table-wrapper')}>
+            <TableWithControlsLayout>
+                <TableWithControlsLayout.Controls className={b('controls')}>
+                    {renderControls()}
+                </TableWithControlsLayout.Controls>
+                {error ? <ResponseError error={error} /> : null}
+                <TableWithControlsLayout.Table loading={loading}>
+                    {currentData ? renderTable() : null}
+                </TableWithControlsLayout.Table>
+            </TableWithControlsLayout>
+        </div>
     );
 };
diff --git a/src/containers/Tenants/i18n/en.json b/src/containers/Tenants/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "create-database": "Create database",
+  "remove": "Remove"
+}
diff --git a/src/containers/Tenants/i18n/index.ts b/src/containers/Tenants/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tenants-table';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/services/api/meta.ts b/src/services/api/meta.ts
@@ -1,4 +1,5 @@
 import {metaBackend as META_BACKEND} from '../../store';
+import type {MetaCapabilitiesResponse} from '../../types/api/capabilities';
 import type {
     MetaBaseClusterInfo,
     MetaBaseClusters,
@@ -15,6 +16,14 @@ export class MetaAPI extends BaseYdbAPI {
         return `${META_BACKEND ?? ''}${path}`;
     }
 
+    getMetaCapabilities() {
+        return this.get<MetaCapabilitiesResponse>(
+            this.getPath('/capabilities'),
+            {},
+            {timeout: 1000},
+        );
+    }
+
     getClustersList(_?: never, {signal}: {signal?: AbortSignal} = {}) {
         return this.get<MetaClusters>(this.getPath('/meta/clusters'), null, {
             requestConfig: {signal},
diff --git a/src/store/reducers/capabilities/capabilities.ts b/src/store/reducers/capabilities/capabilities.ts
@@ -1,6 +1,6 @@
 import {createSelector} from '@reduxjs/toolkit';
 
-import type {Capability, SecuritySetting} from '../../../types/api/capabilities';
+import type {Capability, MetaCapability, SecuritySetting} from '../../../types/api/capabilities';
 import type {AppDispatch, RootState} from '../../defaultStore';
 
 import {api} from './../api';
@@ -19,6 +19,21 @@ export const capabilitiesApi = api.injectEndpoints({
                 }
             },
         }),
+        getMetaCapabilities: build.query({
+            queryFn: async () => {
+                try {
+                    if (!window.api.meta) {
+                        throw new Error('Method is not implemented.');
+                    }
+                    const data = await window.api.meta.getMetaCapabilities();
+                    return {data};
+                } catch (error) {
+                    // If capabilities endpoint is not available, there will be an error
+                    // That means no new features are available
+                    return {error};
+                }
+            },
+        }),
     }),
     overrideExisting: 'throw',
 });
@@ -60,3 +75,13 @@ export async function queryCapability(
 
     return selectCapabilityVersion(getState(), capability, database) || 0;
 }
+
+export const selectMetaCapabilities = capabilitiesApi.endpoints.getMetaCapabilities.select({});
+
+export const selectMetaCapabilityVersion = createSelector(
+    (state: RootState) => state,
+    (_state: RootState, capability: MetaCapability) => capability,
+    (state, capability) => {
+        return selectMetaCapabilities(state).data?.Capabilities?.[capability];
+    },
+);
diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts
@@ -1,11 +1,13 @@
-import type {Capability, SecuritySetting} from '../../../types/api/capabilities';
+import type {Capability, MetaCapability, SecuritySetting} from '../../../types/api/capabilities';
 import {useTypedSelector} from '../../../utils/hooks';
 import {useDatabaseFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
 
 import {
     capabilitiesApi,
     selectCapabilityVersion,
     selectDatabaseCapabilities,
+    selectMetaCapabilities,
+    selectMetaCapabilityVersion,
     selectSecuritySetting,
 } from './capabilities';
 
@@ -20,6 +22,8 @@ export function useCapabilitiesLoaded() {
 
     const {data, error} = useTypedSelector((state) => selectDatabaseCapabilities(state, database));
 
+    // If capabilities endpoint is not available, request finishes with error
+    // That means no new features are available
     return Boolean(data || error);
 }
 
@@ -87,3 +91,27 @@ export const useClusterWithoutAuthInUI = () => {
 export const useLoginWithDatabase = () => {
     return useGetSecuritySetting('DomainLoginOnly') === false;
 };
+
+export function useMetaCapabilitiesQuery() {
+    capabilitiesApi.useGetMetaCapabilitiesQuery({});
+}
+
+export function useMetaCapabilitiesLoaded() {
+    const {data, error} = useTypedSelector(selectMetaCapabilities);
+
+    // If capabilities endpoint is not available, request finishes with error
+    // That means no new features are available
+    return Boolean(data || error);
+}
+
+const useGetMetaFeatureVersion = (feature: MetaCapability) => {
+    return useTypedSelector((state) => selectMetaCapabilityVersion(state, feature) || 0);
+};
+
+export const useCreateDatabaseFeatureAvailable = () => {
+    return useGetMetaFeatureVersion('/meta/create_database') >= 1;
+};
+
+export const useDeleteDatabaseFeatureAvailable = () => {
+    return useGetMetaFeatureVersion('/meta/delete_database') >= 1;
+};
diff --git a/src/types/api/capabilities.ts b/src/types/api/capabilities.ts
@@ -19,3 +19,23 @@ export type Capability =
     | '/viewer/nodes';
 
 export type SecuritySetting = 'UseLoginProvider' | 'DomainLoginOnly';
+
+export interface MetaCapabilitiesResponse {
+    Capabilities: Record<Partial<MetaCapability>, number>;
+}
+
+export type MetaCapability =
+    | '/meta/clusters'
+    | '/meta/db_clusters'
+    | '/meta/cp_databases'
+    | '/meta/get_config'
+    | '/meta/get_operation'
+    | '/meta/list_operations'
+    | '/meta/list_storage_types'
+    | '/meta/list_resource_presets'
+    | '/meta/create_database'
+    | '/meta/update_database'
+    | '/meta/delete_database'
+    | '/meta/simulate_database'
+    | '/meta/start_database'
+    | '/meta/stop_database';
diff --git a/src/types/api/tenant.ts b/src/types/api/tenant.ts
@@ -36,7 +36,7 @@ export interface TTenant {
     Owner?: string;
     Users?: string[];
     PoolStats?: TPoolStats[];
-    UserAttributes?: Record<string, string>;
+    UserAttributes?: UserAttributes;
     Overall?: EFlag;
     SystemTablets?: TTabletStateInfo[];
     ResourceId?: string;
@@ -127,6 +127,14 @@ export interface TTenantResource {
 /** incomplete */
 export interface ControlPlane {
     name?: string;
+    id?: string;
+    endpoint?: string;
+    folder_id?: string;
+}
+/** incomplete */
+interface UserAttributes {
+    database_id?: string;
+    folder_id?: string;
 }
 
 export type ETenantType = 'UnknownTenantType' | 'Domain' | 'Dedicated' | 'Shared' | 'Serverless';
diff --git a/src/uiFactory/types.ts b/src/uiFactory/types.ts
diff --git a/src/uiFactory/uiFactory.ts b/src/uiFactory/uiFactory.ts
diff --git a/src/utils/createToast.tsx b/src/utils/createToast.tsx
diff --git a/src/utils/hooks/useDatabaseFromQuery.ts b/src/utils/hooks/useDatabaseFromQuery.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "create-database": "Create database",
 +  "remove": "Remove"
 +}