Merge branch 'main' into astandrik.vertical-progress-bar-1190

astandrik · web-flow · commit c16f02421c7b · 2024-11-01T17:41:35.000+03:00
diff --git a/src/components/CriticalActionDialog/CriticalActionDialog.tsx b/src/components/CriticalActionDialog/CriticalActionDialog.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {CircleXmarkFill, TriangleExclamationFill} from '@gravity-ui/icons';
 import {Checkbox, Dialog, Icon} from '@gravity-ui/uikit';
 
+import {ResultIssues} from '../../containers/Tenant/Query/Issues/Issues';
 import type {IResponseError} from '../../types/api/error';
 import {cn} from '../../utils/cn';
 
@@ -13,6 +14,9 @@ import './CriticalActionDialog.scss';
 const b = cn('ydb-critical-dialog');
 
 const parseError = (error: IResponseError) => {
+    if (error.data && 'issues' in error.data && error.data.issues) {
+        return <ResultIssues hideSeverity data={error.data} />;
+    }
     if (error.status === 403) {
         return criticalActionDialogKeyset('no-rights-error');
     }
diff --git a/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx b/src/components/TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx
@@ -21,6 +21,28 @@ interface NodeEdpointsTooltipProps {
 export const NodeEndpointsTooltipContent = ({data, nodeHref}: NodeEdpointsTooltipProps) => {
     const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
     const info: (DefinitionListItemProps & {key: string})[] = [];
+    if (data?.Host) {
+        info.push({
+            name: i18n('field_host'),
+            children: data.Host,
+            copyText: data.Host,
+            key: 'Host',
+        });
+    }
+    if (data?.Tenants?.[0]) {
+        info.push({
+            name: i18n('field_database'),
+            children: data.Tenants[0],
+            key: 'Database',
+        });
+    }
+    if (data?.Roles?.length) {
+        info.push({
+            name: i18n('field_roles'),
+            children: data.Roles.join(', '),
+            key: 'Roles',
+        });
+    }
 
     if (data?.Rack) {
         info.push({name: i18n('field_rack'), children: data.Rack, key: 'Rack'});
@@ -33,14 +55,6 @@ export const NodeEndpointsTooltipContent = ({data, nodeHref}: NodeEdpointsToolti
             }
         });
     }
-    if (data?.Host) {
-        info.push({
-            name: i18n('field_host'),
-            children: data.Host,
-            copyText: data.Host,
-            key: 'Host',
-        });
-    }
 
     if (isUserAllowedToMakeChanges && nodeHref) {
         info.push({
@@ -56,7 +70,7 @@ export const NodeEndpointsTooltipContent = ({data, nodeHref}: NodeEdpointsToolti
                 {info.map(({children, key, ...rest}) => {
                     return (
                         <DefinitionList.Item key={key} {...rest}>
-                            <span className={b('definition')}>{children}</span>
+                            <div className={b('definition')}>{children}</div>
                         </DefinitionList.Item>
                     );
                 })}
diff --git a/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/en.json b/src/components/TooltipsContent/NodeEndpointsTooltipContent/i18n/en.json
@@ -1,5 +1,7 @@
 {
   "field_rack": "Rack",
   "field_host": "Host",
-  "context_developer-ui": "Developer UI"
+  "context_developer-ui": "Developer UI",
+  "field_database": "Database",
+  "field_roles": "Roles"
 }
diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx
@@ -113,19 +113,19 @@ export const Nodes = ({path, database, additionalNodesProps = {}}: NodesProps) =
                 />
                 <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
-                <EntitiesCount
-                    total={totalNodes}
-                    current={nodes.length}
-                    label={'Nodes'}
-                    loading={isLoading}
-                />
                 <TableColumnSetup
                     popupWidth={200}
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
                     sortable={false}
                 />
+                <EntitiesCount
+                    total={totalNodes}
+                    current={nodes.length}
+                    label={'Nodes'}
+                    loading={isLoading}
+                />
             </React.Fragment>
         );
     };
diff --git a/src/containers/Nodes/PaginatedNodes.tsx b/src/containers/Nodes/PaginatedNodes.tsx
@@ -96,19 +96,19 @@ export const PaginatedNodes = ({path, database, parentRef, additionalNodesProps}
                 />
                 <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
-                <EntitiesCount
-                    total={totalEntities}
-                    current={foundEntities}
-                    label={'Nodes'}
-                    loading={!inited}
-                />
                 <TableColumnSetup
                     popupWidth={200}
                     items={columnsToSelect}
                     showStatus
                     onUpdate={setColumns}
                     sortable={false}
                 />
+                <EntitiesCount
+                    total={totalEntities}
+                    current={foundEntities}
+                    label={'Nodes'}
+                    loading={!inited}
+                />
             </React.Fragment>
         );
     };
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 {ActionTooltip, Flex, 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 createToast from '../../utils/createToast';
 import {formatDateTime} from '../../utils/dataFormatters/dataFormatters';
 import {parseProtobufTimestampToMs} from '../../utils/timeParsers';
 
 import {COLUMNS_NAMES, COLUMNS_TITLES} from './constants';
 import i18n from './i18n';
 
-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,91 @@ 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 (
+        <Flex gap="2">
+            <ActionTooltip title={i18n('header_forget')} placement={['left', 'auto']}>
+                <div>
+                    <ButtonWithConfirmDialog
+                        buttonView="outlined"
+                        dialogHeader={i18n('header_forget')}
+                        dialogText={i18n('text_forget')}
+                        onConfirmAction={() =>
+                            forgetOperation({id, database})
+                                .unwrap()
+                                .then(() => {
+                                    createToast({
+                                        name: 'Forgotten',
+                                        title: i18n('text_forgotten', {id}),
+                                        type: 'success',
+                                    });
+                                    refreshTable();
+                                })
+                        }
+                        buttonDisabled={isLoadingCancel}
+                    >
+                        <Icon data={Ban} />
+                    </ButtonWithConfirmDialog>
+                </div>
+            </ActionTooltip>
+            <ActionTooltip title={i18n('header_cancel')} placement={['right', 'auto']}>
+                <div>
+                    <ButtonWithConfirmDialog
+                        buttonView="outlined"
+                        dialogHeader={i18n('header_cancel')}
+                        dialogText={i18n('text_cancel')}
+                        onConfirmAction={() =>
+                            cancelOperation({id, database})
+                                .unwrap()
+                                .then(() => {
+                                    createToast({
+                                        name: 'Cancelled',
+                                        title: i18n('text_cancelled', {id}),
+                                        type: 'success',
+                                    });
+                                    refreshTable();
+                                })
+                        }
+                        buttonDisabled={isForgetLoading}
+                    >
+                        <Icon data={CircleStop} />
+                    </ButtonWithConfirmDialog>
+                </div>
+            </ActionTooltip>
+        </Flex>
+    );
+}
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,12 @@
   "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?",
+  "text_forgotten": "The operation {{id}} has been forgotten",
+  "text_cancelled": "The operation {{id}} has been cancelled"
 }
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/containers/Storage/StorageControls/StorageControls.tsx b/src/containers/Storage/StorageControls/StorageControls.tsx
@@ -69,12 +69,6 @@ export function StorageGroupsControls({
                     onChange={handleVisibleEntitiesChange}
                 />
             )}
-            <EntitiesCount
-                label={i18n('groups')}
-                loading={entitiesLoading}
-                total={entitiesCountTotal}
-                current={entitiesCountCurrent}
-            />
             <TableColumnSetup
                 popupWidth={200}
                 items={columnsToSelect}
@@ -97,6 +91,12 @@ export function StorageGroupsControls({
                     />
                 </React.Fragment>
             ) : null}
+            <EntitiesCount
+                label={i18n('groups')}
+                loading={entitiesLoading}
+                total={entitiesCountTotal}
+                current={entitiesCountCurrent}
+            />
         </React.Fragment>
     );
 }
@@ -149,12 +149,6 @@ export function StorageNodesControls({
             {withGroupBySelect ? null : (
                 <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
             )}
-            <EntitiesCount
-                label={i18n('nodes')}
-                loading={entitiesLoading}
-                total={entitiesCountTotal}
-                current={entitiesCountCurrent}
-            />
             <TableColumnSetup
                 popupWidth={200}
                 items={columnsToSelect}
@@ -177,6 +171,12 @@ export function StorageNodesControls({
                     />
                 </React.Fragment>
             ) : null}
+            <EntitiesCount
+                label={i18n('nodes')}
+                loading={entitiesLoading}
+                total={entitiesCountTotal}
+                current={entitiesCountCurrent}
+            />
         </React.Fragment>
     );
 }
diff --git a/src/containers/Tablets/TabletsTable.tsx b/src/containers/Tablets/TabletsTable.tsx
@@ -136,8 +136,13 @@ function TabletActions(tablet: TTabletStateInfo) {
             }}
             buttonDisabled={isDisabledRestart || !isUserAllowedToMakeChanges}
             withPopover
-            popoverContent={i18n('controls.kill-not-allowed')}
-            popoverDisabled={isUserAllowedToMakeChanges}
+            popoverContent={
+                isUserAllowedToMakeChanges
+                    ? i18n('dialog.kill-header')
+                    : i18n('controls.kill-not-allowed')
+            }
+            popoverPlacement={['right', 'auto']}
+            popoverDisabled={false}
         >
             <Icon data={ArrowRotateLeft} />
         </ButtonWithConfirmDialog>
diff --git a/src/containers/Tenant/Query/Issues/Issues.tsx b/src/containers/Tenant/Query/Issues/Issues.tsx
diff --git a/src/services/api.ts b/src/services/api.ts
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
diff --git a/src/types/api/error.ts b/src/types/api/error.ts
diff --git a/src/types/api/operations.ts b/src/types/api/operations.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"field_rack": "Rack",`
`3`	`3`	`"field_host": "Host",`
`4`		`- "context_developer-ui": "Developer UI"`
	`4`	`+ "context_developer-ui": "Developer UI",`
	`5`	`+ "field_database": "Database",`
	`6`	`+ "field_roles": "Roles"`
`5`	`7`	`}`
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`