PullRequest: 310 Fixes oceanbase/odc#816

Merge branch 'feat/dev-4.2.4-odc-816 of git@code.alipay.com:oceanbase/oceanbase-developer-center.git into dev-4.2.4 https://code.alipay.com/oceanbase/oceanbase-developer-center/pull_requests/310 Signed-off-by: 晓康 <xxk268858@oceanbase.com> * wip: api debug * wip: api debug * feat: append filters to DatabaseSelect * Fixes oceanbase/odc#816 * fix: modify comparisionResult's return value
oceanbase · Jan 31, 2024 · fefbaa4 · fefbaa4
1 parent 251a0c0
commit fefbaa4
Show file tree

Hide file tree

Showing 30 changed files with 1,586 additions and 138 deletions.
diff --git a/src/common/network/table/index.ts b/src/common/network/table/index.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { INlsObject, ITableColumn, LobExt, RSModifyDataType } from '@/d.ts';
+import { INlsObject, ITable, ITableColumn, LobExt, RSModifyDataType } from '@/d.ts';
 import { ITableModel, TableColumn } from '@/page/Workspace/components/CreateTable/interface';
 import sessionManager from '@/store/sessionManager';
 import setting from '@/store/setting';
@@ -150,7 +150,10 @@ export async function generateUpdateTableDDL(
   return res?.data || { sql: '', tip: '' };
 }
 
-export async function getTableListByDatabaseName(sessionId: string, databaseName?: string) {
+export async function getTableListByDatabaseName(
+  sessionId: string,
+  databaseName?: string,
+): Promise<ITable[]> {
   const sid = generateDatabaseSid(databaseName, sessionId);
   const ret = await request.get(`/api/v1/table/list/${sid}`);
   return ret?.data || [];

diff --git a/src/common/network/task.ts b/src/common/network/task.ts
@@ -34,12 +34,14 @@ import {
   TaskStatus,
   TaskType,
   IDatasourceUser,
+  CreateStructureComparisonTaskRecord,
 } from '@/d.ts';
 import setting from '@/store/setting';
 import request from '@/util/request';
 import { downloadFile } from '@/util/utils';
 import { IProject } from '@/d.ts/project';
 import { generateFunctionSid } from './pathUtil';
+import { EOperationType, IComparisonResultData, IStructrueComparisonDetail } from '@/d.ts/task';
 
 /**
  * 根据函数获取ddl sql
@@ -62,7 +64,19 @@ export async function createTask(data: Partial<CreateTaskRecord>): Promise<numbe
   });
   return res?.data?.contents?.length || 0;
 }
-
+/**
+ * 新建结构比对工单
+ * @param data
+ * @returns boolean
+ */
+export async function createStructureComparisonTask(
+  data: Partial<CreateStructureComparisonTaskRecord>,
+) {
+  const res = await request.post(`/api/v2/flow/flowInstances/`, {
+    data,
+  });
+  return res?.data?.contents?.length > 0;
+}
 /**
  * 查询任务列表
  */
@@ -137,7 +151,10 @@ export async function getCycleTaskDetail<T>(id: number): Promise<CycleTaskDetail
 /**
  * 查询任务列表
  */
-export async function getTaskDetail(id: number, ignoreError: boolean = false): Promise<TaskDetail<TaskRecordParameters>> {
+export async function getTaskDetail(
+  id: number,
+  ignoreError: boolean = false,
+): Promise<TaskDetail<TaskRecordParameters>> {
   const res = await request.get(`/api/v2/flow/flowInstances/${id}`, {
     params: {
       ignoreError,
@@ -327,6 +344,25 @@ export async function getCycleTaskFile(taskId: number, objectId: string[]): Prom
   return downloadInfo?.data?.contents ?? [];
 }
 
+/**
+ * 下载文件（结构比对任务）
+ * @param taskId
+ * @param objectId
+ * @returns
+ */
+export async function getStructureComparisonTaskFile(
+  taskId: number,
+  objectId: string[],
+): Promise<string[]> {
+  const downloadInfo = await request.post(
+    `/api/v2/flow/flowInstances/${taskId}/tasks/structure-comparison/batchGetDownloadUrl`,
+    {
+      data: objectId,
+    },
+  );
+  return downloadInfo?.data?.contents ?? [];
+}
+
 /**
  * 查询分区详情
  */
@@ -496,9 +532,7 @@ export async function getProjectList(archived: boolean): Promise<IResponseData<I
 /**
  * 查询当前数据库是否需要锁表
  */
-export async function getLockDatabaseUserRequired(
-  databaseId: number,
-): Promise<{
+export async function getLockDatabaseUserRequired(databaseId: number): Promise<{
   lockDatabaseUserRequired: boolean;
   databaseId: number;
 }> {
@@ -520,3 +554,37 @@ export async function updateLimiterConfig(
   });
   return !!res?.data;
 }
+/**
+ * 获取结构比对中涉及的表信息
+ * @param taskId 结构比对工单id
+ * @param params.operationType 要筛选的任务结果类型
+ */
+export async function getStructrueComparison(
+  taskId: number,
+  params?: {
+    dbObjectName?: string;
+    operationType?: EOperationType;
+    page?: number;
+    size?: number;
+  },
+): Promise<IComparisonResultData> {
+  const res = await request.get(`/api/v2/schema-sync/structureComparison/${taskId}`, {
+    params,
+  });
+  return res?.data;
+}
+/**
+ * 获取结构比对中表的详情
+ * @param taskId
+ * @param structureComparisonId
+ * @returns
+ */
+export async function getStructrueComparisonDetail(
+  taskId: number,
+  structureComparisonId: number,
+): Promise<IStructrueComparisonDetail> {
+  const res = await request.get(
+    `/api/v2/schema-sync/structureComparison/${taskId}/${structureComparisonId}`,
+  );
+  return res?.data;
+}
diff --git a/src/component/DisplayTable/index.less b/src/component/DisplayTable/index.less
@@ -56,6 +56,13 @@
       height: 100%;
       cursor: col-resize;
     }
+    .ant-table-thead
+      > tr
+      > th:not(:last-child):not(.ant-table-selection-column):not(
+        .ant-table-row-expand-icon-cell
+      ):not([colspan])::before {
+      background-color: transparent;
+    }
   }
 
   .odd {

diff --git a/src/component/MonacoEditor/DiffEditor.tsx b/src/component/MonacoEditor/DiffEditor.tsx
@@ -0,0 +1,92 @@
+import * as monaco from 'monaco-editor';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import styles from './index.less';
+import { SettingStore } from '@/store/setting';
+import { inject, observer } from 'mobx-react';
+import classNames from 'classnames';
+
+export interface IDiffEditor {
+  settingStore?: SettingStore;
+  language?: string;
+  source: string;
+  modifie: string;
+  defaultSplit?: boolean;
+  theme?: string;
+}
+export interface IDiffEditorInstance {
+  /** @description 切换显示模式，默认为split模式 */
+  switchSplit: (v: boolean) => void;
+}
+const DiffEditor = inject('settingStore')(
+  observer(
+    forwardRef((props: IDiffEditor, ref: React.Ref<IDiffEditorInstance>) => {
+      const {
+        settingStore,
+        source = null,
+        modifie = null,
+        language = 'sql',
+        defaultSplit = true,
+        theme,
+      } = props;
+      const domRef = useRef<HTMLDivElement | null>(null);
+      const editorRef = useRef<monaco.editor.IStandaloneDiffEditor>();
+      const settingTheme = settingStore.theme.editorTheme;
+      const [split, setSplit] = useState<boolean>(defaultSplit);
+      useImperativeHandle(ref, () => ({
+        switchSplit: (v: boolean) => {
+          setSplit(v);
+        },
+      }));
+      const themeValue = useMemo(() => {
+        if (!theme) {
+          return settingTheme;
+        }
+        return theme;
+      }, [theme, settingTheme]);
+      const initEditor = async () => {
+        const originalModel = monaco.editor.createModel(source, language);
+        const modifiedModel = monaco.editor.createModel(modifie, language);
+        editorRef.current = monaco.editor.createDiffEditor(domRef.current, {
+          theme: themeValue,
+          minimap: { enabled: false },
+          renderOverviewRuler: false,
+          automaticLayout: true,
+          unicodeHighlight: {
+            invisibleCharacters: false,
+            ambiguousCharacters: false,
+          },
+          lineNumbersMinChars: 4,
+          lineNumbers: 'on',
+          readOnly: true,
+          renderSideBySide: true,
+          originalEditable: false,
+        });
+        editorRef.current?.setModel({
+          original: originalModel,
+          modified: modifiedModel,
+        });
+      };
+      useEffect(() => {
+        if (editorRef.current) {
+          editorRef.current.updateOptions({
+            renderSideBySide: split,
+          });
+        } else {
+          initEditor();
+        }
+        return () => {
+          if (editorRef.current) {
+            editorRef.current?.dispose();
+          }
+        };
+      }, [split]);
+
+      return (
+        <div className={styles.container}>
+          <div ref={domRef} className={styles.editor}></div>
+        </div>
+      );
+    }),
+  ),
+);
+export default DiffEditor;
diff --git a/src/component/MonacoEditor/index.less b/src/component/MonacoEditor/index.less
@@ -9,3 +9,14 @@
   width: 100%;
   height: 100%;
 }
+
+.diffEditor {
+  :global {
+    .monaco-editor {
+      .margin,
+      .monaco-editor-background {
+        background: var(--background-tertraiy-color);
+      }
+    }
+  }
+}
diff --git a/src/component/MonacoEditor/index.tsx b/src/component/MonacoEditor/index.tsx
@@ -54,6 +54,9 @@ export interface IProps {
 
   theme?: string;
 
+  /** @description 是否展示左侧行号 */
+  showLineNumbers?: boolean;
+
   readOnly?: boolean;
 
   onEditorCreated?: (editor: IEditor) => void;
@@ -62,7 +65,8 @@ export interface IProps {
 const MonacoEditor: React.FC<IProps> = function (props) {
   const {
     defaultValue,
-    language,
+    language = 'sql',
+    showLineNumbers = true,
     value,
     theme,
     readOnly,
@@ -139,14 +143,16 @@ const MonacoEditor: React.FC<IProps> = function (props) {
       ),
     );
     markerPluginApply(editorRef.current.getModel());
-    logger.debug('init plugin done')
+    logger.debug('init plugin done');
   }
 
   async function initEditor() {
     editorRef.current = monaco.editor?.create(domRef.current, {
       value: innerValue,
-      language: language || 'sql',
+      language: language,
       theme: themeValue,
+      lineNumbers: showLineNumbers ? 'on' : 'off',
+      lineNumbersMinChars: showLineNumbers ? 5 : 0,
       minimap: { enabled: false },
       automaticLayout: true,
       unicodeHighlight: {
@@ -163,7 +169,7 @@ const MonacoEditor: React.FC<IProps> = function (props) {
     if (!editorRef.current?.getModel?.()) {
       return;
     }
-    monaco.editor.setModelLanguage(editorRef.current.getModel(), language || 'sql');
+    monaco.editor.setModelLanguage(editorRef.current.getModel(), language);
     editorRef.current.onDidChangeModelContent((e) => {
       /**
        * editor value change
@@ -207,7 +213,7 @@ const MonacoEditor: React.FC<IProps> = function (props) {
       language &&
       language !== editorRef.current?.getModel().getLanguageId()
     ) {
-      monaco.editor.setModelLanguage(editorRef.current?.getModel(), language || 'sql');
+      monaco.editor.setModelLanguage(editorRef.current?.getModel(), language);
     }
   }, [language]);
 

diff --git a/src/component/SQLContent/index.tsx b/src/component/SQLContent/index.tsx
@@ -29,6 +29,7 @@ import styles from './index.less';
 @observer
 export class SQLContent extends React.PureComponent<{
   type?: TaskType;
+  showLineNumbers?: boolean;
   sqlObjectIds: string[];
   sqlObjectNames: string[];
   sqlContent: string;
@@ -48,7 +49,13 @@ export class SQLContent extends React.PureComponent<{
   };
 
   render() {
-    const { sqlObjectNames, sqlContent, language, settingStore } = this.props;
+    const {
+      sqlObjectNames,
+      sqlContent,
+      language,
+      settingStore,
+      showLineNumbers = true,
+    } = this.props;
     return (
       <div className={styles.sqlContent}>
         {sqlObjectNames ? (
@@ -80,6 +87,7 @@ export class SQLContent extends React.PureComponent<{
               readOnly
               defaultValue={sqlContent}
               language={language}
+              showLineNumbers={showLineNumbers}
               onEditorCreated={async (e: IEditor) => {
                 this.editor = e;
                 await this.editor.doFormat();

diff --git a/src/component/Table/MiniTable/index.tsx b/src/component/Table/MiniTable/index.tsx
@@ -58,7 +58,7 @@ export default function MiniTable<T extends object>({ loadData, ...restProps }:
   }, [pageSize]);
 
   const cloneProps = { ...restProps };
-  cloneProps.pagination = {
+  cloneProps.pagination = cloneProps.pagination && {
     ...cloneProps.pagination,
     pageSize: pageSize,
     showSizeChanger: false,

diff --git a/src/component/Task/Content.tsx b/src/component/Task/Content.tsx
@@ -242,6 +242,9 @@ class TaskManaerContent extends React.Component<IProps, IState> {
       case TaskPageType.DATA_ARCHIVE:
         modalStore.changeDataArchiveModal(true);
         break;
+      case TaskPageType.STRUCTURE_COMPARISON:
+        modalStore.changeStructureComparisonModal(true);
+        break;
       case TaskPageType.DATA_DELETE:
         modalStore.changeDataClearModal(true);
         break;
@@ -260,7 +263,7 @@ class TaskManaerContent extends React.Component<IProps, IState> {
       default:
     }
   };
-  
+
   componentDidMount(): void {
     this.openDefaultTask();
   }
@@ -289,14 +292,7 @@ class TaskManaerContent extends React.Component<IProps, IState> {
   };
   render() {
     const { pageKey, taskStore, isMultiPage = false } = this.props;
-    const {
-      detailId,
-      detailType,
-      detailVisible,
-      partitionPlan,
-      cycleTasks,
-      tasks,
-    } = this.state;
+    const { detailId, detailType, detailVisible, partitionPlan, cycleTasks, tasks } = this.state;
     const taskTabType = pageKey || taskStore?.taskPageType;
     const taskList = isCycleTaskPage(taskTabType) ? cycleTasks : tasks;
     return (