feat: use mutation

astandrik · astandrik · commit adc597a18126 · 2024-10-17T16:08:03.000+03:00
diff --git a/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx b/src/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx
@@ -7,6 +7,8 @@ import {NavigationTree} from 'ydb-ui-components';
 
 import {useCreateDirectoryFeatureAvailable} from '../../../../store/reducers/capabilities/hooks';
 import {schemaApi} from '../../../../store/reducers/schema/schema';
+import type {GetTableSchemaDataParams} from '../../../../store/reducers/tableSchemaData';
+import {useGetTableSchemaDataMutation} from '../../../../store/reducers/tableSchemaData';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {useQueryExecutionSettings, useTypedDispatch} from '../../../../utils/hooks';
 import {getSchemaControls} from '../../utils/controls';
@@ -26,6 +28,19 @@ export function SchemaTree(props: SchemaTreeProps) {
     const createDirectoryFeatureAvailable = useCreateDirectoryFeatureAvailable();
     const {rootPath, rootName, rootType, currentPath, onActivePathUpdate} = props;
     const dispatch = useTypedDispatch();
+    const [getTableSchemaDataMutation] = useGetTableSchemaDataMutation();
+
+    const getTableSchemaDataPromise = React.useCallback(
+        async (args: GetTableSchemaDataParams) => {
+            try {
+                const result = await getTableSchemaDataMutation(args).unwrap();
+                return result;
+            } catch (e) {
+                return undefined;
+            }
+        },
+        [getTableSchemaDataMutation],
+    );
 
     const [querySettings, setQueryExecutionSettings] = useQueryExecutionSettings();
     const [createDirectoryOpen, setCreateDirectoryOpen] = React.useState(false);
@@ -119,6 +134,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                         showCreateDirectoryDialog: createDirectoryFeatureAvailable
                             ? handleOpenCreateDirectoryDialog
                             : undefined,
+                        getTableSchemaDataPromise,
                     },
                     rootPath,
                 )}
diff --git a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 
+import {skipToken} from '@reduxjs/toolkit/query';
+
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
+import {overviewApi} from '../../../../store/reducers/overview/overview';
+import {viewSchemaApi} from '../../../../store/reducers/viewSchema/viewSchema';
 import type {EPathType} from '../../../../types/api/schema';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useTableData} from '../../../../utils/hooks';
+import {useAutoRefreshInterval} from '../../../../utils/hooks';
 import {
     isColumnEntityType,
     isExternalTableType,
@@ -20,6 +24,7 @@ import {
     getRowTableColumns,
     getViewColumns,
 } from './columns';
+import {prepareSchemaData, prepareViewSchema} from './prepareData';
 import {b} from './shared';
 
 import './SchemaViewer.scss';
@@ -32,11 +37,31 @@ interface SchemaViewerProps {
 }
 
 export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaViewerProps) => {
-    const {tableData, isOverviewLoading, isViewSchemaLoading} = useTableData({
-        type,
-        path,
-        tenantName,
-    });
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {currentData, isLoading: loading} = overviewApi.useGetOverviewQuery(
+        {
+            paths: [path],
+            database: tenantName,
+        },
+        {
+            pollingInterval: autoRefreshInterval,
+        },
+    );
+
+    const {data: schemaData} = currentData ?? {};
+
+    const viewSchemaRequestParams = isViewType(type) ? {path, database: tenantName} : skipToken;
+
+    const {data: viewColumnsData, isLoading: isViewSchemaLoading} =
+        viewSchemaApi.useGetViewSchemaQuery(viewSchemaRequestParams);
+
+    const tableData = React.useMemo(() => {
+        if (isViewType(type)) {
+            return prepareViewSchema(viewColumnsData);
+        }
+
+        return prepareSchemaData(type, schemaData);
+    }, [schemaData, type, viewColumnsData]);
 
     const hasAutoIncrement = React.useMemo(() => {
         return tableData.some((i) => i.autoIncrement);
@@ -63,7 +88,7 @@ export const SchemaViewer = ({type, path, tenantName, extended = false}: SchemaV
         return [];
     }, [type, extended, hasAutoIncrement, hasDefaultValue]);
 
-    if (isOverviewLoading || isViewSchemaLoading) {
+    if (loading || isViewSchemaLoading) {
         return <TableSkeleton />;
     }
 
diff --git a/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts b/src/containers/Tenant/Schema/SchemaViewer/prepareData.ts
@@ -1,21 +1,17 @@
-import type {SchemaData} from '../containers/Tenant/Schema/SchemaViewer/types';
-import {
-    isColumnEntityType,
-    isExternalTableType,
-    isRowTableType,
-} from '../containers/Tenant/utils/schema';
-import type {ColumnType} from '../types/api/query';
+import type {ColumnType} from '../../../../types/api/query';
 import type {
     EPathType,
     TColumnTableDescription,
     TEvDescribeSchemeResult,
     TExternalTableDescription,
     TFamilyDescription,
     TTableDescription,
-} from '../types/api/schema';
-import {EColumnCodec} from '../types/api/schema';
+} from '../../../../types/api/schema';
+import {EColumnCodec} from '../../../../types/api/schema';
+import type {Nullable} from '../../../../utils/typecheckers';
+import {isColumnEntityType, isExternalTableType, isRowTableType} from '../../utils/schema';
 
-import type {Nullable} from './typecheckers';
+import type {SchemaData} from './types';
 
 function formatColumnCodec(codec?: EColumnCodec) {
     if (!codec) {
diff --git a/src/containers/Tenant/utils/schemaActions.ts b/src/containers/Tenant/utils/schemaActions.ts
@@ -3,12 +3,13 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 
 import type {AppDispatch} from '../../../store';
 import {changeUserInput} from '../../../store/reducers/executeQuery';
+import type {GetTableSchemaDataParams} from '../../../store/reducers/tableSchemaData';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import type {QueryMode, QuerySettings} from '../../../types/store/query';
 import createToast from '../../../utils/createToast';
-import {getTableDataPromise} from '../../../utils/hooks';
 import {transformPath} from '../ObjectSummary/transformPath';
+import type {SchemaData} from '../Schema/SchemaViewer/types';
 import i18n from '../i18n';
 
 import {nodeTableTypeToPathType} from './schema';
@@ -37,11 +38,9 @@ interface ActionsAdditionalEffects {
     updateQueryExecutionSettings: (settings?: Partial<QuerySettings>) => void;
     setActivePath: (path: string) => void;
     showCreateDirectoryDialog?: (path: string) => void;
-}
-
-interface AdditionalInputQueryOptions {
-    mode?: QueryMode;
-    withTableData?: boolean;
+    getTableSchemaDataPromise?: (
+        params: GetTableSchemaDataParams,
+    ) => Promise<SchemaData[] | undefined>;
 }
 
 interface BindActionParams {
@@ -56,19 +55,28 @@ const bindActions = (
     dispatch: AppDispatch,
     additionalEffects: ActionsAdditionalEffects,
 ) => {
-    const {setActivePath, updateQueryExecutionSettings, showCreateDirectoryDialog} =
-        additionalEffects;
-
-    const inputQuery = (tmpl: TemplateFn, options?: AdditionalInputQueryOptions) => () => {
-        if (options?.mode) {
-            updateQueryExecutionSettings({queryMode: options.mode});
+    const {
+        setActivePath,
+        updateQueryExecutionSettings,
+        showCreateDirectoryDialog,
+        getTableSchemaDataPromise,
+    } = additionalEffects;
+
+    const inputQuery = (tmpl: TemplateFn, mode?: QueryMode) => () => {
+        if (mode) {
+            updateQueryExecutionSettings({queryMode: mode});
         }
 
         const pathType = nodeTableTypeToPathType[params.type];
+        const withTableData = [selectQueryTemplate, upsertQueryTemplate].includes(tmpl);
 
         const userInputDataPromise =
-            options?.withTableData && pathType
-                ? getTableDataPromise(params.path, params.tenantName, pathType, dispatch)
+            withTableData && pathType && getTableSchemaDataPromise
+                ? getTableSchemaDataPromise({
+                      path: params.path,
+                      tenantName: params.tenantName,
+                      type: pathType,
+                  })
                 : Promise.resolve(undefined);
 
         userInputDataPromise.then((tableData) => {
@@ -86,24 +94,24 @@ const bindActions = (
                   showCreateDirectoryDialog(params.path);
               }
             : undefined,
-        createTable: inputQuery(createTableTemplate, {mode: 'script'}),
-        createColumnTable: inputQuery(createColumnTableTemplate, {mode: 'script'}),
-        createAsyncReplication: inputQuery(createAsyncReplicationTemplate, {mode: 'script'}),
-        alterAsyncReplication: inputQuery(alterAsyncReplicationTemplate, {mode: 'script'}),
-        dropAsyncReplication: inputQuery(dropAsyncReplicationTemplate, {mode: 'script'}),
-        alterTable: inputQuery(alterTableTemplate, {mode: 'script'}),
-        selectQuery: inputQuery(selectQueryTemplate, {withTableData: true}),
-        upsertQuery: inputQuery(upsertQueryTemplate, {withTableData: true}),
-        createExternalTable: inputQuery(createExternalTableTemplate, {mode: 'script'}),
-        dropExternalTable: inputQuery(dropExternalTableTemplate, {mode: 'script'}),
-        selectQueryFromExternalTable: inputQuery(selectQueryTemplate, {mode: 'query'}),
-        createTopic: inputQuery(createTopicTemplate, {mode: 'script'}),
-        alterTopic: inputQuery(alterTopicTemplate, {mode: 'script'}),
-        dropTopic: inputQuery(dropTopicTemplate, {mode: 'script'}),
-        createView: inputQuery(createViewTemplate, {mode: 'script'}),
-        dropView: inputQuery(dropViewTemplate, {mode: 'script'}),
-        dropIndex: inputQuery(dropTableIndex, {mode: 'script'}),
-        addTableIndex: inputQuery(addTableIndex, {mode: 'script'}),
+        createTable: inputQuery(createTableTemplate, 'script'),
+        createColumnTable: inputQuery(createColumnTableTemplate, 'script'),
+        createAsyncReplication: inputQuery(createAsyncReplicationTemplate, 'script'),
+        alterAsyncReplication: inputQuery(alterAsyncReplicationTemplate, 'script'),
+        dropAsyncReplication: inputQuery(dropAsyncReplicationTemplate, 'script'),
+        alterTable: inputQuery(alterTableTemplate, 'script'),
+        selectQuery: inputQuery(selectQueryTemplate),
+        upsertQuery: inputQuery(upsertQueryTemplate),
+        createExternalTable: inputQuery(createExternalTableTemplate, 'script'),
+        dropExternalTable: inputQuery(dropExternalTableTemplate, 'script'),
+        selectQueryFromExternalTable: inputQuery(selectQueryTemplate, 'query'),
+        createTopic: inputQuery(createTopicTemplate, 'script'),
+        alterTopic: inputQuery(alterTopicTemplate, 'script'),
+        dropTopic: inputQuery(dropTopicTemplate, 'script'),
+        createView: inputQuery(createViewTemplate, 'script'),
+        dropView: inputQuery(dropViewTemplate, 'script'),
+        dropIndex: inputQuery(dropTableIndex, 'script'),
+        addTableIndex: inputQuery(addTableIndex, 'script'),
         copyPath: () => {
             try {
                 copy(params.relativePath);
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -374,7 +374,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
     getDescribe(
-        {path, database}: {path: string; database: string},
+        {path, database, timeout}: {path: string; database: string; timeout?: Timeout},
         {concurrentId, signal}: AxiosOptions = {},
     ) {
         return this.get<Nullable<TEvDescribeSchemeResult>>(
@@ -386,7 +386,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 partition_stats: true,
                 subs: 0,
             },
-            {concurrentId: concurrentId || `getDescribe|${path}`, requestConfig: {signal}},
+            {concurrentId: concurrentId || `getDescribe|${path}`, requestConfig: {signal}, timeout},
         );
     }
     getSchemaAcl(
diff --git a/src/store/reducers/tableSchemaData.ts b/src/store/reducers/tableSchemaData.ts
@@ -0,0 +1,71 @@
+import {
+    prepareSchemaData,
+    prepareViewSchema,
+} from '../../containers/Tenant/Schema/SchemaViewer/prepareData';
+import type {SchemaData} from '../../containers/Tenant/Schema/SchemaViewer/types';
+import {isViewType} from '../../containers/Tenant/utils/schema';
+import type {EPathType} from '../../types/api/schema';
+import {isQueryErrorResponse} from '../../utils/query';
+
+import {api} from './api';
+import {createViewSchemaQuery} from './viewSchema/viewSchema';
+
+export interface GetTableSchemaDataParams {
+    path: string;
+    tenantName: string;
+    type: EPathType;
+}
+
+const tableSchemaDataConcurrentId = 'getTableSchemaData';
+
+const TABLE_SCHEMA_TIMEOUT = 1000;
+
+export const tableSchemeDataApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        getTableSchemaData: build.mutation<SchemaData[], GetTableSchemaDataParams>({
+            queryFn: async ({path, tenantName, type}, {signal}) => {
+                try {
+                    const schemaData = await window.api.getDescribe(
+                        {
+                            path,
+                            database: tenantName,
+                            timeout: TABLE_SCHEMA_TIMEOUT,
+                        },
+                        {signal, concurrentId: tableSchemaDataConcurrentId + 'describe'},
+                    );
+
+                    if (isViewType(type)) {
+                        const response = await window.api.sendQuery(
+                            {
+                                query: createViewSchemaQuery(path),
+                                database: tenantName,
+                                action: 'execute-scan',
+                                timeout: TABLE_SCHEMA_TIMEOUT,
+                            },
+                            {
+                                withRetries: true,
+                                concurrentId: tableSchemaDataConcurrentId + 'query',
+                            },
+                        );
+
+                        if (isQueryErrorResponse(response)) {
+                            return {error: response};
+                        }
+
+                        const viewColumnsData = {data: response?.result?.[0]?.columns || []};
+                        const result = prepareViewSchema(viewColumnsData.data);
+                        return {data: result};
+                    }
+
+                    const result = prepareSchemaData(type, schemaData);
+
+                    return {data: result};
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+    }),
+});
+
+export const {useGetTableSchemaDataMutation} = tableSchemeDataApi;
diff --git a/src/store/reducers/viewSchema/viewSchema.ts b/src/store/reducers/viewSchema/viewSchema.ts
@@ -1,7 +1,7 @@
 import {isQueryErrorResponse} from '../../../utils/query';
 import {api} from '../api';
 
-function createViewSchemaQuery(path: string) {
+export function createViewSchemaQuery(path: string) {
     return `SELECT * FROM \`${path}\` LIMIT 0`;
 }
 
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
@@ -6,4 +6,3 @@ export * from './useTableSort';
 export * from './useSearchQuery';
 export * from './useAutoRefreshInterval';
 export * from './useEventHandler';
-export * from './useTableData';
diff --git a/src/utils/hooks/useTableData.ts b/src/utils/hooks/useTableData.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import {isQueryErrorResponse} from '../../../utils/query';`
`2`	`2`	`import {api} from '../api';`
`3`	`3`
`4`		`-function createViewSchemaQuery(path: string) {`
	`4`	`+export function createViewSchemaQuery(path: string) {`
`5`	`5`	return `SELECT * FROM \`${path}\` LIMIT 0`;
`6`	`6`	`}`
`7`	`7`