feat: add control to execute forget command for an export

astandrik · astandrik · commit 01de67bdd8ae · 2024-10-28T18:29:53.000+03:00
diff --git a/src/containers/Operations/Operations.scss b/src/containers/Operations/Operations.scss
@@ -2,4 +2,9 @@
     &__search {
         width: 220px;
     }
+
+    &__buttons-container {
+        display: flex;
+        gap: var(--g-spacing-2);
+    }
 }
diff --git a/src/containers/Operations/Operations.tsx b/src/containers/Operations/Operations.tsx
@@ -5,7 +5,7 @@ import {isAccessError} from '../../components/Errors/PageError/PageError';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {operationListApi} from '../../store/reducers/operationList';
+import {operationsApi} from '../../store/reducers/operations';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 
 import {OperationsControls} from './OperationsControls';
@@ -24,7 +24,7 @@ export function Operations({database}: OperationsProps) {
     const {kind, searchValue, pageSize, pageToken, handleKindChange, handleSearchChange} =
         useOperationsQueryParams();
 
-    const {data, isFetching, error} = operationListApi.useGetOperationListQuery(
+    const {data, isFetching, error, refetch} = operationsApi.useGetOperationListQuery(
         {database, kind, page_size: pageSize, page_token: pageToken},
         {
             pollingInterval: autoRefreshInterval,
@@ -61,7 +61,7 @@ export function Operations({database}: OperationsProps) {
             <TableWithControlsLayout.Table loading={isFetching} className={b('table')}>
                 {data ? (
                     <ResizeableDataTable
-                        columns={getColumns()}
+                        columns={getColumns({database, refreshTable: refetch})}
                         data={filteredOperations}
                         emptyDataMessage={i18n('title_empty')}
                     />
diff --git a/src/containers/Operations/OperationsControls.tsx b/src/containers/Operations/OperationsControls.tsx
@@ -4,7 +4,7 @@ import {Select} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
 import {Search} from '../../components/Search';
-import type {OperationKind} from '../../types/api/operationList';
+import type {OperationKind} from '../../types/api/operations';
 
 import {OPERATION_KINDS} from './constants';
 import i18n from './i18n';
diff --git a/src/containers/Operations/columns.tsx b/src/containers/Operations/columns.tsx
@@ -1,18 +1,30 @@
 import {duration} from '@gravity-ui/date-utils';
+import {Ban, CircleStop} from '@gravity-ui/icons';
 import type {Column as DataTableColumn} from '@gravity-ui/react-data-table';
-import {Text} from '@gravity-ui/uikit';
+import {Icon, Text} from '@gravity-ui/uikit';
 
+import {ButtonWithConfirmDialog} from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
-import type {TOperation} from '../../types/api/operationList';
-import {EStatusCode} from '../../types/api/operationList';
+import {operationsApi} from '../../store/reducers/operations';
+import type {TOperation} from '../../types/api/operations';
+import {EStatusCode} from '../../types/api/operations';
 import {EMPTY_DATA_PLACEHOLDER, HOUR_IN_SECONDS, SECOND_IN_MS} from '../../utils/constants';
 import {formatDateTime} from '../../utils/dataFormatters/dataFormatters';
 import {parseProtobufTimestampToMs} from '../../utils/timeParsers';
 
 import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
 import i18n from './i18n';
+import {b} from './shared';
 
-export function getColumns(): DataTableColumn<TOperation>[] {
+import './Operations.scss';
+
+export function getColumns({
+    database,
+    refreshTable,
+}: {
+    database: string;
+    refreshTable: VoidFunction;
+}): DataTableColumn<TOperation>[] {
     return [
         {
             name: COLUMNS_NAMES.ID,
@@ -114,5 +126,75 @@ export function getColumns(): DataTableColumn<TOperation>[] {
                 return Date.now() - createTime;
             },
         },
+        {
+            name: 'Actions',
+            sortable: false,
+            resizeable: false,
+            header: '',
+            render: ({row}) => {
+                return (
+                    <OperationsActions
+                        operation={row}
+                        database={database}
+                        refreshTable={refreshTable}
+                    />
+                );
+            },
+        },
     ];
 }
+
+interface OperationsActionsProps {
+    operation: TOperation;
+    database: string;
+    refreshTable: VoidFunction;
+}
+
+function OperationsActions({operation, database, refreshTable}: OperationsActionsProps) {
+    const [cancelOperation, {isLoading: isLoadingCancel}] =
+        operationsApi.useCancelOperationMutation();
+    const [forgetOperation, {isLoading: isForgetLoading}] =
+        operationsApi.useForgetOperationMutation();
+
+    const id = operation.id;
+    if (!id) {
+        return null;
+    }
+
+    return (
+        <div className={b('buttons-container')}>
+            <ButtonWithConfirmDialog
+                buttonView="outlined"
+                dialogHeader={i18n('header_forget')}
+                dialogText={i18n('text_forget')}
+                onConfirmAction={() =>
+                    forgetOperation({id, database})
+                        .unwrap()
+                        .then(() => refreshTable())
+                }
+                buttonDisabled={isLoadingCancel}
+                popoverContent={i18n('header_forget')}
+                popoverDisabled={false}
+                withPopover
+            >
+                <Icon data={Ban} />
+            </ButtonWithConfirmDialog>
+            <ButtonWithConfirmDialog
+                buttonView="outlined"
+                dialogHeader={i18n('header_cancel')}
+                dialogText={i18n('text_cancel')}
+                onConfirmAction={() =>
+                    cancelOperation({id, database})
+                        .unwrap()
+                        .then(() => refreshTable())
+                }
+                buttonDisabled={isForgetLoading}
+                popoverContent={i18n('header_cancel')}
+                popoverDisabled={false}
+                withPopover
+            >
+                <Icon data={CircleStop} />
+            </ButtonWithConfirmDialog>
+        </div>
+    );
+}
diff --git a/src/containers/Operations/constants.ts b/src/containers/Operations/constants.ts
@@ -1,4 +1,4 @@
-import type {OperationKind} from '../../types/api/operationList';
+import type {OperationKind} from '../../types/api/operations';
 
 import i18n from './i18n';
 
diff --git a/src/containers/Operations/i18n/en.json b/src/containers/Operations/i18n/en.json
@@ -13,5 +13,10 @@
   "column_createTime": "Create Time",
   "column_endTime": "End Time",
   "column_duration": "Duration",
-  "label_duration-ongoing": "{{value}} (ongoing)"
+  "label_duration-ongoing": "{{value}} (ongoing)",
+
+  "header_cancel": "Cancel operation",
+  "header_forget": "Forget operation",
+  "text_cancel": "The operation will be cancelled. Do you want to proceed?",
+  "text_forget": "The operation will be forgotten. Do you want to proceed?"
 }
diff --git a/src/containers/Operations/useOperationsQueryParams.ts b/src/containers/Operations/useOperationsQueryParams.ts
@@ -1,7 +1,7 @@
 import {NumberParam, StringParam, useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
-import type {OperationKind} from '../../types/api/operationList';
+import type {OperationKind} from '../../types/api/operations';
 
 const operationKindSchema = z.enum(['ss/backgrounds', 'export', 'buildindex']).catch('buildindex');
 
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -23,7 +23,12 @@ import type {ModifyDiskResponse} from '../types/api/modifyDisk';
 import type {TNetInfo} from '../types/api/netInfo';
 import type {NodesRequestParams, TNodesInfo} from '../types/api/nodes';
 import type {TEvNodesInfo} from '../types/api/nodesList';
-import type {OperationListRequestParams, TOperationList} from '../types/api/operationList';
+import type {
+    OperationCancelRequestParams,
+    OperationForgetRequestParams,
+    OperationListRequestParams,
+    TOperationList,
+} from '../types/api/operations';
 import type {EDecommitStatus, TEvPDiskStateResponse, TPDiskInfoResponse} from '../types/api/pdisk';
 import type {
     Actions,
@@ -886,6 +891,36 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
 
+    cancelOperation(
+        params: OperationCancelRequestParams,
+        {concurrentId, signal}: AxiosOptions = {},
+    ) {
+        return this.post<TOperationList>(
+            this.getPath('/operation/cancel'),
+            {},
+            {...params},
+            {
+                concurrentId,
+                requestConfig: {signal},
+            },
+        );
+    }
+
+    forgetOperation(
+        params: OperationForgetRequestParams,
+        {concurrentId, signal}: AxiosOptions = {},
+    ) {
+        return this.post<TOperationList>(
+            this.getPath('/operation/forget'),
+            {},
+            {...params},
+            {
+                concurrentId,
+                requestConfig: {signal},
+            },
+        );
+    }
+
     getClusterBaseInfo(
         _clusterName: string,
         _opts: AxiosOptions = {},
diff --git a/src/store/reducers/operationList.ts b/src/store/reducers/operationList.ts
diff --git a/src/store/reducers/operations.ts b/src/store/reducers/operations.ts
@@ -0,0 +1,44 @@
+import type {
+    OperationCancelRequestParams,
+    OperationForgetRequestParams,
+    OperationListRequestParams,
+} from '../../types/api/operations';
+
+import {api} from './api';
+
+export const operationsApi = api.injectEndpoints({
+    endpoints: (build) => ({
+        getOperationList: build.query({
+            queryFn: async (params: OperationListRequestParams, {signal}) => {
+                try {
+                    const data = await window.api.getOperationList(params, {signal});
+                    return {data};
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+        cancelOperation: build.mutation({
+            queryFn: async (params: OperationCancelRequestParams, {signal}) => {
+                try {
+                    const data = await window.api.cancelOperation(params, {signal});
+                    return {data};
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+        forgetOperation: build.mutation({
+            queryFn: async (params: OperationForgetRequestParams, {signal}) => {
+                try {
+                    const data = await window.api.forgetOperation(params, {signal});
+                    return {data};
+                } catch (error) {
+                    return {error};
+                }
+            },
+        }),
+    }),
+    overrideExisting: 'throw',
+});
diff --git a/src/types/api/operations.ts b/src/types/api/operations.ts
@@ -121,3 +121,13 @@ export interface OperationListRequestParams {
     page_size?: number;
     page_token?: string;
 }
+
+export interface OperationCancelRequestParams {
+    database: string;
+    id: string;
+}
+
+export interface OperationForgetRequestParams {
+    database: string;
+    id: string;
+}

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,9 @@`
`2`	`2`	`&__search {`
`3`	`3`	`width: 220px;`
`4`	`4`	`}`
	`5`	`+`
	`6`	`+ &__buttons-container {`
	`7`	`+ display: flex;`
	`8`	`+ gap: var(--g-spacing-2);`
	`9`	`+ }`
`5`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type {OperationKind} from '../../types/api/operationList';`
	`1`	`+import type {OperationKind} from '../../types/api/operations';`
`2`	`2`
`3`	`3`	`import i18n from './i18n';`
`4`	`4`