[Refactor][Web]Refactor result query (DataLinkDC#3920)

Co-authored-by: zackyoungh <[email protected]>
Zzm0809 · Nov 18, 2024 · e6f9508 · e6f9508
1 parent 49e994e
commit e6f9508
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 154 deletions.
diff --git a/dinky-admin/src/main/java/org/dinky/controller/TaskController.java b/dinky-admin/src/main/java/org/dinky/controller/TaskController.java
@@ -178,8 +178,7 @@ public Result<List<SqlExplainResult>> explainSql(@RequestBody TaskDTO taskDTO) t
     @ExecuteProcess(type = ProcessType.FLINK_JOB_PLAN)
     @CheckTaskOwner(checkParam = TaskId.class, checkInterface = TaskService.class)
     public Result<ObjectNode> getJobPlan(@RequestBody TaskDTO taskDTO) {
-        ObjectNode jobPlan = null;
-        jobPlan = taskService.getJobPlan(taskDTO);
+        ObjectNode jobPlan = taskService.getJobPlan(taskDTO);
         return Result.succeed(jobPlan, Status.EXECUTE_SUCCESS);
     }
 

diff --git a/dinky-common/src/main/java/org/dinky/data/model/SystemConfiguration.java b/dinky-common/src/main/java/org/dinky/data/model/SystemConfiguration.java
@@ -447,6 +447,7 @@ public Map<String, String> getFlinkHistoryServerConfiguration() {
                     FileUtil.file(DirConstant.getTempRootDir(), "flink-job-archive")
                             .getAbsolutePath());
             config.put("historyserver.archive.fs.dir", FLINK_JOB_ARCHIVE);
+            config.put("historyserver.archive.clean-expired-jobs", "true");
         }
         return config;
     }

diff --git a/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig/index.tsx b/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig/index.tsx
@@ -17,23 +17,15 @@
  *
  */
 
-import { Tabs, TabsProps, Tag } from 'antd';
-import {
-  ProForm,
-  ProFormDigit,
-  ProFormGroup,
-  ProFormSelect,
-  ProFormSwitch
-} from '@ant-design/pro-components';
+import { Tabs, TabsProps } from 'antd';
+import { ProForm, ProFormDigit, ProFormGroup, ProFormSwitch } from '@ant-design/pro-components';
 import { l } from '@/utils/intl';
 import React from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { DIALECT, SWITCH_OPTIONS } from '@/services/constants';
 import { TaskState, TempData } from '@/pages/DataStudio/type';
 import { BasicConfig } from '@/pages/DataStudio/CenterTabContent/SqlTask/TaskConfig/BasicConfig';
 import { isSql, assert } from '@/pages/DataStudio/utils';
-import { DataSources } from '@/types/RegCenter/data';
-import { TagAlignLeft } from '@/components/StyledComponents';
 import { JOB_LIFE_CYCLE } from '@/pages/DevOps/constants';
 
 export default (props: {
@@ -51,7 +43,7 @@ export default (props: {
       label: l('menu.datastudio.task.baseConfig'),
       children: (
         <BasicConfig
-          tempData={props.tempData}
+          tempData={tempData}
           data={props.data}
           onValuesChange={props.onValuesChange}
           setCurrentState={props.setCurrentState}
@@ -65,34 +57,7 @@ export default (props: {
     assert(data.dialect, [DIALECT.FLINK_SQL, DIALECT.FLINKJAR], true, 'includes')
   ) {
     const renderOtherConfig = () => {
-      if (isSql(data.dialect)) {
-        // const dataSourceData: Record<string, React.ReactNode> = {};
-        // const databaseDataList = tempData.dataSourceDataList;
-        // databaseDataList
-        //   .filter((x) => x.type.toLowerCase() === data?.dialect.toLowerCase())
-        //   .forEach((item: DataSources.DataSource) => {
-        //     dataSourceData[item.id] = (
-        //       <TagAlignLeft>
-        //         <Tag key={item.id} color={item.enabled ? 'processing' : 'error'}>
-        //           {item.type}
-        //         </Tag>
-        //         {item.name}
-        //       </TagAlignLeft>
-        //     );
-        //   });
-        // return (
-        //   <ProFormSelect
-        //     width={'sm'}
-        //     name={'databaseId'}
-        //     label={l('pages.datastudio.label.execConfig.selectDatabase')}
-        //     convertValue={(value) => String(value)}
-        //     valueEnum={dataSourceData}
-        //     placeholder='Please select a dataSource'
-        //     rules={[{ required: true, message: 'Please select your dataSource!' }]}
-        //     allowClear={false}
-        //   />
-        // );
-      } else {
+      if (!isSql(data.dialect)) {
         return (
           <>
             <ProFormSwitch

diff --git a/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx b/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx
@@ -26,15 +26,13 @@ import { Monaco } from '@monaco-editor/react';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 import {
   ApartmentOutlined,
-  AuditOutlined,
   BugOutlined,
   CaretRightOutlined,
   ClearOutlined,
   CloseOutlined,
   EnvironmentOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
-  FundOutlined,
   MergeCellsOutlined,
   PartitionOutlined,
   PauseOutlined,
@@ -47,7 +45,7 @@ import RunToolBarButton from '@/pages/DataStudio/components/RunToolBarButton';
 import { connect, useModel } from '@umijs/max';
 import CusPanelResizeHandle from '@/pages/DataStudio/components/CusPanelResizeHandle';
 import { ProForm, ProFormInstance } from '@ant-design/pro-components';
-import { useAsyncEffect, useFullscreen } from 'ahooks';
+import { useAsyncEffect, useFullscreen, useRafInterval } from 'ahooks';
 import { SelectFlinkEnv } from '@/pages/DataStudio/CenterTabContent/RunToolbar/SelectFlinkEnv';
 import { SelectFlinkRunMode } from '@/pages/DataStudio/CenterTabContent/RunToolbar/SelectFlinkRunMode';
 import { mapDispatchToProps } from '@/pages/DataStudio/DvaFunction';
@@ -94,7 +92,6 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
     showDesc,
     tempData,
     updateAction,
-    updateProject,
     updateCenterTab,
     activeTab,
     enabledDs,
@@ -137,7 +134,8 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
     versionId: 0,
     createTime: new Date(),
     updateTime: new Date(),
-    status: ''
+    status: '',
+    mockSinkFunction: true
   });
   // 代码恢复
   const [openDiffModal, setOpenDiffModal] = useState(false);
@@ -146,13 +144,20 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
   const formRef = useRef<ProFormInstance>();
   const [isFullscreen, { enterFullscreen, exitFullscreen }] = useFullscreen(containerRef);
 
-  const { initialState, setInitialState } = useModel('@@initialState');
+  const { initialState } = useModel('@@initialState');
+  const [refreshTaskStatusDelay, setRefreshTaskStatusDelay] = useState<number | undefined>(
+    undefined
+  );
+  useRafInterval(async () => {
+    const taskDetail = (await getTaskDetails(params.taskId))!!;
+    setCurrentState((prevState) => ({ ...prevState, status: taskDetail.status }));
+  }, refreshTaskStatusDelay);
 
   useAsyncEffect(async () => {
     const taskDetail = await getTaskDetails(params.taskId);
     if (taskDetail) {
       const statement = params.statement ?? taskDetail.statement;
-      const newParams = { ...taskDetail, taskId: params.taskId, statement };
+      const newParams = { ...taskDetail, taskId: params.taskId, statement, mockSinkFunction: true };
       // @ts-ignore
       setCurrentState(newParams);
       updateCenterTab({ ...props.tabData, params: newParams });
@@ -170,6 +175,14 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
     }
     setLoading(false);
   }, []);
+  // 定时刷新作业状态
+  useEffect(() => {
+    if (isStatusDone(currentState.status)) {
+      setRefreshTaskStatusDelay(undefined);
+    } else {
+      setRefreshTaskStatusDelay(3000);
+    }
+  }, [currentState.status]);
 
   // 数据初始化
   useEffect(() => {
@@ -197,7 +210,6 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
     editorInstance.current = editor;
     // @ts-ignore
     editor['id'] = currentState.taskId;
-    editor.onDidChangeCursorPosition((e) => {});
     registerEditorKeyBindingAndAction(editor);
   };
 
@@ -408,15 +420,22 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
   }, [updateAction, currentState.envId, handleSave, currentState.taskId, currentState.dialect]);
 
   const handleDebug = useCallback(async () => {
+    updateAction({
+      actionType: DataStudioActionType.TASK_RUN_DEBUG,
+      params: {
+        taskId: params.taskId
+      }
+    });
     const res = await debugTask(
       l('pages.datastudio.editor.debugging', '', { jobName: currentState.name }),
       { ...currentState }
     );
     if (res?.success && res?.data?.result?.success) {
       updateAction({
-        actionType: DataStudioActionType.TASK_RUN_DEBUG,
+        actionType: DataStudioActionType.TASK_PREVIEW_RESULT,
         params: {
           taskId: params.taskId,
+          isMockSinkResult: res.data?.result?.mockSinkResult,
           columns: res.data?.result?.columns ?? [],
           rowData: res.data?.result?.rowData ?? []
         }
@@ -436,7 +455,7 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
   }, [currentState, updateAction]);
 
   const handleStop = useCallback(async () => {
-    const result = await cancelTask('', currentState.taskId, false);
+    await cancelTask('', currentState.taskId, false);
     setCurrentState((prevState) => {
       return {
         ...prevState,

diff --git a/dinky-web/src/pages/DataStudio/CenterTabContent/index.less b/dinky-web/src/pages/DataStudio/CenterTabContent/index.less
@@ -44,3 +44,17 @@
   padding: 5px 15px;
   background-color: var(--main-background-color);
 }
+
+.no_diff_content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50vh;
+  text-align: center;
+}
+
+.diff_content {
+  height: 50vh;
+  padding: 10px;
+  border: 1px solid #fdfdfd1f;
+}