Cb 4270 row counter add cancel button for big tables

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/DatabaseDataSource.ts

@@ -9,7 +9,7 @@ import { action, makeObservable, observable, toJS } from 'mobx';
 
 import type { IConnectionExecutionContext } from '@cloudbeaver/core-connections';
 import type { IServiceInjector } from '@cloudbeaver/core-di';
-import { Task } from '@cloudbeaver/core-executor';
+import { ITask, Task } from '@cloudbeaver/core-executor';
 import { ResultDataFormat } from '@cloudbeaver/core-sdk';
 
 import { DatabaseDataActions } from './DatabaseDataActions';
@@ -33,6 +33,7 @@ export abstract class DatabaseDataSource<TOptions, TResult extends IDatabaseData
   error: Error | null;
   executionContext: IConnectionExecutionContext | null;
   outdated: boolean;
+  cancelLoadTotalCountTask: ITask<number> | null;
 
   get canCancel(): boolean {
     if (this.activeTask instanceof Task) {
@@ -59,6 +60,7 @@ export abstract class DatabaseDataSource<TOptions, TResult extends IDatabaseData
 
   constructor(serviceInjector: IServiceInjector) {
     this.serviceInjector = serviceInjector;
+    this.cancelLoadTotalCountTask = null;
     this.actions = new DatabaseDataActions(this);
     this.access = DatabaseDataAccessMode.Default;
     this.results = [];
@@ -95,6 +97,7 @@ export abstract class DatabaseDataSource<TOptions, TResult extends IDatabaseData
       prevOptions: observable,
       options: observable,
       requestInfo: observable,
+      cancelLoadTotalCountTask: observable.ref,
       error: observable.ref,
       executionContext: observable,
       disabled: observable,
@@ -372,7 +375,8 @@ export abstract class DatabaseDataSource<TOptions, TResult extends IDatabaseData
   abstract request(prevResults: TResult[]): TResult[] | Promise<TResult[]>;
   abstract save(prevResults: TResult[]): Promise<TResult[]> | TResult[];
 
-  abstract dispose(): Promise<void>;
+  abstract cancelLoadTotalCount(): ITask<number> | null;
+  abstract dispose(): Promise<void> | void;
   abstract loadTotalCount(resultIndex: number): Promise<void>;
 
   async requestDataAction(): Promise<TResult[] | null> {

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/IDatabaseDataSource.ts

@@ -7,6 +7,7 @@
  */
 import type { IConnectionExecutionContext } from '@cloudbeaver/core-connections';
 import type { IServiceInjector } from '@cloudbeaver/core-di';
+import type { ITask } from '@cloudbeaver/core-executor';
 import type { ResultDataFormat } from '@cloudbeaver/core-sdk';
 
 import type { IDatabaseDataAction, IDatabaseDataActionClass, IDatabaseDataActionInterface } from './IDatabaseDataAction';
@@ -47,6 +48,7 @@ export interface IDatabaseDataSource<TOptions, TResult extends IDatabaseDataResu
   readonly cancelled: boolean;
   readonly serviceInjector: IServiceInjector;
   readonly outdated: boolean;
+  readonly cancelLoadTotalCountTask: ITask<number> | null;
 
   isLoadable: () => boolean;
   isReadonly: (resultIndex: number) => boolean;
@@ -83,6 +85,7 @@ export interface IDatabaseDataSource<TOptions, TResult extends IDatabaseDataResu
   setExecutionContext: (context: IConnectionExecutionContext | null) => this;
   setTotalCount: (resultIndex: number, count: number) => this;
   loadTotalCount: (resultIndex: number) => Promise<void>;
+  cancelLoadTotalCount: () => ITask<number> | null;
 
   retry: () => Promise<void>;
   /** Allows to perform an asynchronous action on the data source, this action will wait previous action to finish and save or load requests.
@@ -94,5 +97,5 @@ export interface IDatabaseDataSource<TOptions, TResult extends IDatabaseDataResu
   cancel: () => Promise<void> | void;
   clearError: () => this;
   resetData: () => this;
-  dispose: () => Promise<void>;
+  dispose: () => Promise<void> | void;
 }

webapp/packages/plugin-data-viewer/src/ResultSetDataSource.ts

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import type { IServiceInjector } from '@cloudbeaver/core-di';
+import type { ITask } from '@cloudbeaver/core-executor';
 import type { AsyncTaskInfoService, GraphQLService } from '@cloudbeaver/core-sdk';
 
 import { DatabaseDataSource } from './DatabaseDataModel/DatabaseDataSource';
@@ -20,6 +21,24 @@ export abstract class ResultSetDataSource<TOptions> extends DatabaseDataSource<T
     super(serviceInjector);
   }
 
+  dispose(): void {
+    this.cancelLoadTotalCount();
+  }
+
+  async refreshData(): Promise<void> {
+    this.cancelLoadTotalCount();
+
+    await super.refreshData();
+  }
+
+  cancelLoadTotalCount(): ITask<number> | null {
+    if (!this.cancelLoadTotalCountTask?.cancelled) {
+      this.cancelLoadTotalCountTask?.cancel();
+    }
+
+    return this.cancelLoadTotalCountTask;
+  }
+
   async loadTotalCount(resultIndex: number) {
     const executionContext = this.executionContext;
     const executionContextInfo = this.executionContext?.context;
@@ -34,7 +53,7 @@ export abstract class ResultSetDataSource<TOptions> extends DatabaseDataSource<T
       throw new Error('Result id must be provided');
     }
 
-    const task = this.asyncTaskInfoService.create(async () => {
+    const asyncTask = this.asyncTaskInfoService.create(async () => {
       const { taskInfo } = await this.graphQLService.sdk.asyncSqlRowDataCount({
         resultsId: result.id!,
         connectionId: executionContextInfo.connectionId,
@@ -45,16 +64,25 @@ export abstract class ResultSetDataSource<TOptions> extends DatabaseDataSource<T
       return taskInfo;
     });
 
-    const count = await executionContext.run(
+    const task = executionContext.run(
       async () => {
-        const info = await this.asyncTaskInfoService.run(task);
+        const info = await this.asyncTaskInfoService.run(asyncTask);
         const { count } = await this.graphQLService.sdk.getSqlRowDataCountResult({ taskId: info.id });
+
         return count;
       },
-      () => this.asyncTaskInfoService.cancel(task.id),
-      () => this.asyncTaskInfoService.remove(task.id),
+      () => this.asyncTaskInfoService.cancel(asyncTask.id),
+      () => this.asyncTaskInfoService.remove(asyncTask.id),
     );
 
-    this.setTotalCount(resultIndex, count);
+    this.cancelLoadTotalCountTask = task;
+
+    try {
+      const count = await task;
+
+      this.setTotalCount(resultIndex, count);
+    } finally {
+      this.cancelLoadTotalCountTask = null;
+    }
   }
 }

webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooter.tsx

@@ -13,6 +13,7 @@ import { Form, getComputed, ToolsPanel } from '@cloudbeaver/core-blocks';
 import type { IDataContext } from '@cloudbeaver/core-data-context';
 import { useService } from '@cloudbeaver/core-di';
 
+import { ResultSetConstraintAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetConstraintAction';
 import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel';
 import { DataViewerSettingsService } from '../../DataViewerSettingsService';
 import { AutoRefreshButton } from './AutoRefresh/AutoRefreshButton';
@@ -94,6 +95,7 @@ export const TableFooter = observer<Props>(function TableFooter({ resultIndex, m
   }, [model.countGain]);
 
   const disabled = getComputed(() => model.isLoading() || model.isDisabled(resultIndex));
+  const constraint = model.getResult(resultIndex) ? model.source.getAction(resultIndex, ResultSetConstraintAction) : null;
 
   return styled(tableFooterStyles)(
     <ToolsPanel type="secondary">
@@ -116,7 +118,7 @@ export const TableFooter = observer<Props>(function TableFooter({ resultIndex, m
           />
         </Form>
       </count>
-      <TableFooterRowCount model={model} resultIndex={resultIndex} />
+      {constraint?.supported && <TableFooterRowCount model={model} resultIndex={resultIndex} />}
       <TableFooterMenu model={model} resultIndex={resultIndex} simple={simple} context={context} />
       {model.source.requestInfo.requestMessage.length > 0 && (
         <time>

webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/TableFooterRowCount.tsx

@@ -24,16 +24,9 @@ interface Props {
 }
 
 export const TableFooterRowCount: React.FC<Props> = observer(function TableFooterRowCount({ resultIndex, model }) {
-  const translate = useTranslate();
   const notificationService = useService(NotificationService);
   const [loading, setLoading] = useState(false);
 
-  const result = model.getResult(resultIndex);
-
-  if (!result) {
-    return null;
-  }
-
   async function loadTotalCount() {
     try {
       setLoading(true);
@@ -45,13 +38,63 @@ export const TableFooterRowCount: React.FC<Props> = observer(function TableFoote
     }
   }
 
+  function cancelTotalCount() {
+    try {
+      setLoading(false);
+      model.source.cancelLoadTotalCount();
+    } catch (e: any) {
+      const cancelled = model.source.cancelLoadTotalCountTask?.cancelled;
+
+      if (!cancelled) {
+        notificationService.logException(e, 'data_viewer_total_count_cancel_failed_title', typeof e === 'string' ? e : undefined);
+      }
+    }
+  }
+
+  if (loading) {
+    return <CancelTotalCountAction onClick={cancelTotalCount} />;
+  }
+
+  return <TotalCountAction loading={loading} resultIndex={resultIndex} model={model} onClick={loadTotalCount} />;
+});
+
+const CancelTotalCountAction = observer(function CancelTotalCountAction({ onClick }: { onClick: VoidFunction }) {
+  const translate = useTranslate();
+
+  return styled(tableFooterMenuStyles)(
+    <div className={classes.wrapper} title={translate('ui_processing_cancel')}>
+      <ToolsAction icon="/icons/data_cancel.svg" viewBox="0 0 32 32" onClick={onClick}>
+        {translate('ui_processing_cancel')}
+      </ToolsAction>
+    </div>,
+  );
+});
+
+const TotalCountAction = observer(function TotalCountAction({
+  onClick,
+  loading,
+  resultIndex,
+  model,
+}: {
+  onClick: VoidFunction;
+  loading: boolean;
+  resultIndex: number;
+  model: IDatabaseDataModel<any, IDatabaseResultSet>;
+}) {
+  const result = model.getResult(resultIndex);
+  const translate = useTranslate();
+  const disabled = getComputed(() => model.isLoading() || model.isDisabled(resultIndex));
+
+  if (!result) {
+    return null;
+  }
+
   const currentCount = result.loadedFully ? result.count : `${result.count}+`;
   const count = result.totalCount ?? currentCount;
-  const disabled = getComputed(() => model.isLoading() || model.isDisabled(resultIndex));
 
   return styled(tableFooterMenuStyles)(
     <div className={classes.wrapper} title={translate('data_viewer_total_count_tooltip')}>
-      <ToolsAction disabled={disabled} loading={loading} icon="/icons/data_row_count.svg" viewBox="0 0 32 32" onClick={loadTotalCount}>
+      <ToolsAction disabled={disabled} loading={loading} icon="/icons/data_row_count.svg" viewBox="0 0 32 32" onClick={onClick}>
         <span>{count}</span>
       </ToolsAction>
     </div>,

webapp/packages/plugin-data-viewer/src/locales/en.ts

@@ -1,3 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 export default [
   ['plugin_data_viewer_data_viewer_settings_group', 'Data Viewer'],
   ['table_header_sql_expression', 'Enter a SQL expression to filter results, e.g. column_name=10'],
@@ -46,6 +53,7 @@ export default [
   ['data_viewer_refresh_result_set', 'Refresh result set'],
   ['data_viewer_total_count_tooltip', 'Get total count'],
   ['data_viewer_total_count_failed', 'Failed to get total count'],
+  ['data_viewer_total_count_cancel_failed_title', 'Failed to cancel getting of total count'],
   ['data_viewer_model_not_loaded', 'Table model is not loaded'],
   ['settings_data_editor', 'Data Editor'],
   ['settings_data_editor_disable_edit_name', 'Disable Edit'],

webapp/packages/plugin-data-viewer/src/locales/it.ts

@@ -1,3 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 export default [
   ['plugin_data_viewer_data_viewer_settings_group', 'Data Viewer'],
   ['table_header_sql_expression', 'Digita una espresione SQL per filtrare i risultati'],
@@ -39,6 +46,7 @@ export default [
   ['data_viewer_refresh_result_set', 'Refresh result set'],
   ['data_viewer_total_count_tooltip', 'Get total count'],
   ['data_viewer_total_count_failed', 'Failed to get total count'],
+  ['data_viewer_total_count_cancel_failed_title', 'Failed to cancel getting of total count'],
   ['data_viewer_model_not_loaded', 'Table model is not loaded'],
   ['settings_data_editor', 'Data Editor'],
   ['settings_data_editor_disable_edit_name', 'Disable Edit'],

webapp/packages/plugin-data-viewer/src/locales/ru.ts

@@ -1,3 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 export default [
   ['plugin_data_viewer_data_viewer_settings_group', 'Просмотр данных'],
   ['table_header_sql_expression', 'Введите SQL выражение чтобы отфильтровать результаты, например, column_name=10'],
@@ -40,6 +47,7 @@ export default [
   ['data_viewer_refresh_result_set', 'Обновить резалт сет'],
   ['data_viewer_total_count_tooltip', 'Получить количество записей'],
   ['data_viewer_total_count_failed', 'Не удалось получить количество записей'],
+  ['data_viewer_total_count_cancel_failed_title', 'Не удалось отменить получение количества записей'],
   ['data_viewer_model_not_loaded', 'Не удалось загрузить модель таблицы'],
   ['settings_data_editor', 'Редактор данных'],
   ['settings_data_editor_disable_edit_name', 'Отключить редактирование'],

webapp/packages/plugin-data-viewer/src/locales/zh.ts

@@ -1,3 +1,10 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 export default [
   ['plugin_data_viewer_data_viewer_settings_group', 'Data Viewer'],
   ['table_header_sql_expression', '输入SQL表达式以过滤结果'],
@@ -46,6 +53,7 @@ export default [
   ['data_viewer_refresh_result_set', 'Refresh result set'],
   ['data_viewer_total_count_failed', 'Failed to get total count'],
   ['data_viewer_total_count_tooltip', 'Get total count'],
+  ['data_viewer_total_count_cancel_failed_title', 'Failed to cancel getting of total count'],
   ['data_viewer_model_not_loaded', 'Table model is not loaded'],
   ['settings_data_editor', 'Data Editor'],
   ['settings_data_editor_disable_edit_name', 'Disable Edit'],

webapp/packages/plugin-sql-editor/src/SqlResultTabs/SqlQueryResultService.ts

@@ -163,6 +163,7 @@ export class SqlQueryResultService {
 
         // TODO: we need to dispose table model, but don't close execution context, so now we only
         const model = this.tableViewerStorageService.get(group.modelId);
+        model?.source.cancelLoadTotalCount();
         // model?.dispose();
 
         if (model?.isLoading()) {