Merge branch 'dev-4.3.3' of https://code.alipay.com/oceanbase/oceanba…

…se-developer-center into dev-4.3.3
oceanbase · Oct 22, 2024 · 0926668 · 0926668
2 parents 500782e + cf4f96c
commit 0926668
Show file tree

Hide file tree

Showing 31 changed files with 1,615 additions and 1,315 deletions.
diff --git a/package.json b/package.json
@@ -60,6 +60,9 @@
     "@types/react": "^16.0.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@sentry/electron": "^3.0.7",
     "@trodi/electron-splashscreen": "^0.3.4",
     "archiver": "^5.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/common/network/task.ts b/src/common/network/task.ts
@@ -16,6 +16,7 @@
 
 import { IShadowSyncAnalysisResult } from '@/component/Task/ShadowSyncTask/CreateModal/interface';
 import {
+  AgainTaskRecord,
   CommonTaskLogType,
   CreateStructureComparisonTaskRecord,
   CreateTaskRecord,
@@ -563,7 +564,9 @@ export async function getDataArchiveSubTask(
     size?: number;
   },
 ): Promise<IResponseData<ICycleSubTaskRecord>> {
-  const res = await request.get(`/api/v2/schedule/schedules/${taskId}/tasks`, { params });
+  const res = await request.get(`/api/v2/schedule/schedules/${taskId}/tasks`, {
+    params,
+  });
   return res?.data;
 }
 
@@ -715,3 +718,13 @@ export async function getStructrueComparisonDetail(
   );
   return res?.data;
 }
+
+/**
+ * 重试
+ * 无锁结构变更 执行异常时发起重试
+ */
+export async function againTask(data: Partial<AgainTaskRecord>): Promise<number> {
+  const res = await request.post(`/api/v2/osc/${data.id}/resume`);
+
+  return res?.successful;
+}
diff --git a/src/component/Action/Item.tsx b/src/component/Action/Item.tsx
@@ -17,7 +17,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Tooltip, Typography } from 'antd';
 import { TooltipPlacement } from 'antd/lib/tooltip';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 export interface BaseProps {
   /** 是否显示 */
@@ -28,7 +28,7 @@ export interface BaseProps {
   type?: 'default' | 'primary';
   className?: string;
   enableLoading?: boolean;
-  tooltip?: string;
+  tooltip?: string | React.ReactElement;
   placement?: TooltipPlacement;
   loading?: boolean;
   /** loading的时候覆盖children，用于icon的场景 */

diff --git a/src/component/CommonTable/component/ResizeTitle.tsx b/src/component/CommonTable/component/ResizeTitle.tsx
@@ -20,6 +20,7 @@ import styles from '../index.less';
 
 export function ResizeTitle(props) {
   const { width, onResize, onClick, ...restProps } = props;
+
   const [isDrag, setIsDrag] = useState(false);
   if (!width) {
     return <th {...restProps} />;

diff --git a/src/component/DisplayTable/index.tsx b/src/component/DisplayTable/index.tsx
@@ -30,37 +30,8 @@ import {
 import { TableRowSelection } from 'antd/es/table/interface';
 import { Resizable } from 'react-resizable';
 import styles from './index.less';
-
-// @ts-ignore
-const ResizeableTitle = (props) => {
-  const { onResize, onClick, width, ...restProps } = props;
-  const [allowClick, setAllowClick] = useState(true);
-
-  if (!width) {
-    // @see https://github.com/ant-design/ant-design/issues/14647#issuecomment-606365370
-    return <th {...restProps} onClick={onClick} />;
-  }
-
-  return (
-    <Resizable
-      width={width}
-      height={0}
-      onResize={onResize}
-      {...{
-        onMouseDown: () => {
-          setAllowClick(true);
-        },
-        onClick: (e: any) => allowClick && onClick(e),
-      }}
-      onResizeStart={() => {
-        setAllowClick(false);
-      }}
-      draggableOpts={{ enableUserSelectHack: false }}
-    >
-      <th {...restProps} />
-    </Resizable>
-  );
-};
+import { DEFAULT_COLUMN_WIDTH } from '../CommonTable/const';
+import { ResizeTitle } from '@/component/CommonTable/component/ResizeTitle';
 
 /**
  * 包含：
@@ -90,20 +61,23 @@ export default class DisplayTable extends React.Component<
     showQuickJumper?: boolean;
     expandable?: ExpandableConfig<any>;
     onChange?: (pagination: any) => void;
+    enableResize?: boolean;
   },
   {
     defaultPageSize: number;
     columns: ColumnProps<unknown>[];
+    columnWidthMap?: { [key: string]: string };
   }
 > {
   public readonly state = {
     defaultPageSize: 10,
     columns: this.props.columns,
+    columnWidthMap: null,
   };
 
   public components = {
     header: {
-      cell: ResizeableTitle,
+      cell: ResizeTitle,
     },
   };
 
@@ -124,19 +98,36 @@ export default class DisplayTable extends React.Component<
     });
   }
 
-  public handleResize =
-    (index: number) =>
-    (e: any, { size }: { size: { width: number } }) => {
-      this.setState(({ columns }) => {
-        const nextColumns = [...columns];
-        nextColumns[index] = {
-          ...nextColumns[index],
-          width: size.width,
-        };
+  public handleResize = (oriColumn) => {
+    return (e, { size }) => {
+      if (size?.width < oriColumn?.width) {
+        return;
+      }
 
-        return { columns: nextColumns };
+      this.setState(({ columnWidthMap }) => {
+        const newColumnWidthMap = {
+          ...columnWidthMap,
+          [oriColumn.key]: size?.width,
+        };
+        return { columnWidthMap: newColumnWidthMap };
       });
     };
+  };
+
+  public getResizableColumns() {
+    const { columnWidthMap } = this.state;
+    return this.props?.columns?.map((oriColumn) => {
+      return {
+        ...oriColumn,
+        width: columnWidthMap?.[oriColumn?.key] || oriColumn.width || DEFAULT_COLUMN_WIDTH,
+        onHeaderCell: (column) =>
+          ({
+            width: columnWidthMap?.[oriColumn?.key] || oriColumn.width || DEFAULT_COLUMN_WIDTH,
+            onResize: this.handleResize(oriColumn),
+          } as React.HTMLAttributes<HTMLElement>),
+      };
+    });
+  }
 
   public render() {
     const {
@@ -149,25 +140,19 @@ export default class DisplayTable extends React.Component<
       className,
       showSizeChanger = true,
       showQuickJumper = true,
+      enableResize,
       ...rest
     } = this.props;
-    const { defaultPageSize } = this.state;
+    const { defaultPageSize, columnWidthMap } = this.state;
 
-    // const resizableColumns = columns.map((col, index) => ({
-    //   ...col,
-    //   onHeaderCell: (column: ColumnProps<unknown>) => ({
-    //     width: column.width,
-    //     onResize: this.handleResize(index),
-    //   }),
-    // }));
+    const resizableColumns = this.getResizableColumns();
 
     return (
       <div className={`${styles.table} ${className}`}>
         <Table
           {...rest}
-          // columns={resizableColumns}
+          columns={enableResize ? resizableColumns : columns}
           dataSource={dataSource}
-          columns={columns}
           rowClassName={(record, i) => (i % 2 === 0 ? styles.even : styles.odd)}
           pagination={
             !disablePagination && {
@@ -189,8 +174,8 @@ export default class DisplayTable extends React.Component<
                 : null,
             }
           }
-
-          // components={this.components}
+          components={enableResize ? this.components : null}
+          scroll={{ x: 'max-content' }}
         />
       </div>
     );

diff --git a/src/component/ExecuteSqlDetailModal/index.tsx b/src/component/ExecuteSqlDetailModal/index.tsx
@@ -238,7 +238,7 @@ const ExecuteSQLDetailModal: React.FC<IProps> = ({ modalStore }: IProps) => {
         >
           {option?.map((i) => {
             return (
-              <Radio.Button value={i.value}>
+              <Radio.Button value={i.value} key={i?.value}>
                 <Tooltip title={i?.message}>{i?.icon}</Tooltip>
               </Radio.Button>
             );
@@ -297,7 +297,7 @@ const ExecuteSQLDetailModal: React.FC<IProps> = ({ modalStore }: IProps) => {
           >
             {traceViewOptions.map((i) => {
               return (
-                <Radio.Button value={i.value}>
+                <Radio.Button value={i.value} key={i?.value}>
                   <Tooltip title={i?.message}>{i?.icon}</Tooltip>
                 </Radio.Button>
               );
@@ -411,7 +411,7 @@ const ExecuteSQLDetailModal: React.FC<IProps> = ({ modalStore }: IProps) => {
                 >
                   {page?.radioOption.map((i) => {
                     return (
-                      <Radio.Button value={i.value} disabled={i.disabled}>
+                      <Radio.Button value={i.value} disabled={i.disabled} key={i?.value}>
                         <Tooltip title={getDisabledTooltip(i.label)}>{i.label}</Tooltip>
                       </Radio.Button>
                     );