refactor_datastudio_dva

Zzm0809 · Nov 3, 2023 · 65eddad · 65eddad
1 parent a62a0d9
commit 65eddad
Show file tree

Hide file tree

Showing 54 changed files with 1,005 additions and 1,072 deletions.
diff --git a/dinky-web/src/components/CallBackButton/CircleBtn.tsx b/dinky-web/src/components/CallBackButton/CircleBtn.tsx
@@ -16,9 +16,9 @@
  *
  */
 
-import { TabsItemType } from '@/pages/DataStudio/types';
 import { Button } from 'antd';
 import React from 'react';
+import {TabItemInfo} from "@/model/DataStudio/dat.d";
 
 export type CircleButtonProps = {
   icon: React.ReactNode;
@@ -30,7 +30,7 @@ export type CircleButtonProps = {
 export type CircleDataStudioButtonProps = {
   icon: React.ReactNode;
   loading?: boolean;
-  onClick?: (panes: TabsItemType[], activeKey: string) => void;
+  onClick?: (panes: TabItemInfo[], activeKey: string) => void;
   title?: string;
   key?: string;
 };

diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -24,7 +24,6 @@ import {Editor, OnChange, useMonaco} from '@monaco-editor/react';
 import {editor} from 'monaco-editor';
 import { useState } from 'react';
 import {buildAllSuggestions} from "@/components/CustomEditor/CodeEdit/function";
-import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 
 export type CodeEditFormProps = {
   height?: string;

diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx
@@ -28,7 +28,6 @@ import { editor } from 'monaco-editor';
 import { EditorLanguage } from 'monaco-editor/esm/metadata';
 import { useEffect, useState } from 'react';
 import FullscreenBtn from '../FullscreenBtn';
-import {Loading} from "@/pages/Other/Loading";
 import {l} from "@/utils/intl";
 
 // loader.config({monaco});
@@ -90,7 +89,6 @@ const CodeShow = (props: CodeShowFormProps) => {
   const [fullScreen, setFullScreen] = useState<boolean>(false);
   const [editorRef, setEditorRef] = useState<any>();
   const [timer, setTimer] = useState<NodeJS.Timer>();
-  const themeValue = useThemeValue();
 
   // 使用编辑器钩子, 拿到编辑器实例
   const monaco = useMonaco();

diff --git a/dinky-web/src/model/DataStudio/BottomContainer/data.d.ts b/dinky-web/src/model/DataStudio/BottomContainer/data.d.ts
@@ -1,4 +1,6 @@
 export const DataStudioBottomState: string = 'DataStudioBottomState';
 
 
-export type DataStudioBottomStateType = {}
+export type DataStudioBottomStateType = {
+  console: string | '';
+}
diff --git a/dinky-web/src/model/DataStudio/BottomContainer/model.tsx b/dinky-web/src/model/DataStudio/BottomContainer/model.tsx
@@ -7,16 +7,31 @@ export type DataStudioBottomModelType = {
   namespace: string; // 命名空间
   state: DataStudioBottomStateType; // state 数据| 数据类型
   effects: {};
-  reducers: {};
+  reducers: {
+    updateConsoleData: Reducer<DataStudioBottomStateType>; // 保存底部区域的控制台内容数据
+  };
 }
 
 
 const DataStudioBottomModel: DataStudioBottomModelType = {
   namespace: DataStudioBottomState,
   state: {
+    console: '',
   },
   effects: {},
-  reducers: {}
+  reducers: {
+    /**
+     * 保存底部区域的控制台内容数据
+     * @param state
+     * @param payload
+     */
+    updateConsoleData(state, {payload}) {
+      return {
+        ...state,
+        console: payload,
+      };
+    },
+  }
 }
 
 

diff --git a/dinky-web/src/model/DataStudio/FooterContainer/model.tsx b/dinky-web/src/model/DataStudio/FooterContainer/model.tsx
@@ -5,7 +5,7 @@ import {
   DataStudioFooterStateType,
 } from "@/model/DataStudio/FooterContainer/data.d";
 import { Reducer } from "@umijs/max";
-import {getFooterValue} from "@/pages/DataStudio/function";
+import {getFooterValue} from "@/model/DataStudio/function";
 
 
 export type DataStudioFooterModelType = {

diff --git a/dinky-web/src/model/DataStudio/HeaderContainer/data.d.ts b/dinky-web/src/model/DataStudio/HeaderContainer/data.d.ts
@@ -1,4 +1,11 @@
+import {BaseConfigProperties} from "@/types/SettingCenter/data.d";
+
 export const DataStudioHeaderState: string = 'DataStudioHeaderState';
 
 
-export type DataStudioHeaderStateType = {}
+export type DataStudioHeaderStateType = {
+  dolphinSchedulerConfig : {
+    isEnable: boolean;
+    configList: BaseConfigProperties[];
+  }
+}
diff --git a/dinky-web/src/model/DataStudio/HeaderContainer/model.tsx b/dinky-web/src/model/DataStudio/HeaderContainer/model.tsx
@@ -1,27 +1,75 @@
-import {createModelTypes} from "@/utils/modelUtils";
-
-
-import {DataStudioHeaderState, DataStudioHeaderStateType} from "@/model/DataStudio/HeaderContainer/data.d";
-import { Effect, Reducer } from "@umijs/max";
-
+import { DataStudioHeaderState,DataStudioHeaderStateType } from '@/model/DataStudio/HeaderContainer/data.d';
+import { queryDsConfig } from "@/pages/SettingCenter/GlobalSetting/service";
+import { BaseConfigProperties } from "@/types/SettingCenter/data.d";
+import { createModelTypes } from "@/utils/modelUtils";
+import { Effect,Reducer } from '@umijs/max';
 
 export type DataStudioHeaderModelType = {
   namespace: string; // 命名空间
   state: DataStudioHeaderStateType; // state 数据| 数据类型
-  effects: {};
-  reducers: {};
-}
-
+  effects: {
+    fetchDolphinSchedulerConfig: Effect;
+  };
+  reducers: {
+    updateDolphinSchedulerConfig: Reducer<DataStudioHeaderStateType>;
+    updateDolphinSchedulerEnable: Reducer<DataStudioHeaderStateType>;
+    updateDolphinSchedulerConfigList: Reducer<DataStudioHeaderStateType>;
+  };
+};
 
 const DataStudioHeaderModel: DataStudioHeaderModelType = {
   namespace: DataStudioHeaderState,
   state: {
+    dolphinSchedulerConfig: {
+      isEnable: false,
+      configList: []
+    }
   },
-  effects: {},
-  reducers: {}
-}
+  effects: {
+    *fetchDolphinSchedulerConfig({ payload }, { call, put }) {
+      const response: BaseConfigProperties[] = yield call(queryDsConfig, payload);
 
+      yield put({
+        type: 'updateDolphinSchedulerConfigList',
+        payload: response
+      });
+      // 找出是否启用, 更新状态
+      const isEnable = response.find(item => item.key === 'dolphinscheduler.settings.enable')?.value === 'true';
+      yield put({
+        type: 'updateDolphinSchedulerEnable',
+        payload: isEnable
+      });
+    }
+  },
+  reducers: {
+    updateDolphinSchedulerConfig(state, { payload }) {
+      return {
+        ...state,
+        dolphinSchedulerConfig: payload
+      };
+    },
+    updateDolphinSchedulerEnable(state, { payload }) {
+      return {
+        ...state,
+        dolphinSchedulerConfig: {
+          ...state.dolphinSchedulerConfig,
+          isEnable: payload
+        }
+      };
+    },
+    updateDolphinSchedulerConfigList(state, { payload }) {
+      return {
+        ...state,
+        dolphinSchedulerConfig: {
+          ...state.dolphinSchedulerConfig,
+          configList: payload
+        }
+      };
+    }
+  }
+};
 
-export const [DataStudioHeaderStateModel, DataStudioHeaderStateModelAsync] = createModelTypes(DataStudioHeaderModel);
+export const [DataStudioHeaderStateModel, DataStudioHeaderStateModelAsync] =
+  createModelTypes(DataStudioHeaderModel);
 
 export default DataStudioHeaderModel;
diff --git a/dinky-web/src/model/DataStudio/LayoutState/model.tsx b/dinky-web/src/model/DataStudio/LayoutState/model.tsx
@@ -3,6 +3,7 @@ import {createModelTypes} from "@/utils/modelUtils";
 
 import {DataStudioLayoutState, DataStudioLayoutStateType} from "@/model/DataStudio/LayoutState/data.d";
 import { Effect, Reducer } from "@umijs/max";
+import {DATA_STUDIO_SLIDER_ROUTER_ROOT_KEY} from "@/model/DataStudio/constants";
 
 
 export type DataStudioLayoutStateModelType = {
@@ -64,7 +65,7 @@ const DataStudioLayoutModel: DataStudioLayoutStateModelType = {
   namespace: DataStudioLayoutState,
   state: {
     leftTopSliderContainer: {
-      selectKey: 'menu.datastudio.project', // 左上侧边栏默认选中的路由 key
+      selectKey: DATA_STUDIO_SLIDER_ROUTER_ROOT_KEY.PROJECT, // 左上侧边栏默认选中的路由 key
       selectSubKey: {},
       height: '100%', // 左上侧边栏高度
       width: 260 // 左上侧边栏宽度
@@ -80,7 +81,7 @@ const DataStudioLayoutModel: DataStudioLayoutStateModelType = {
       width: 260, // 右上侧边栏宽度
     },
     leftBottomSliderContainer: {
-      selectKey: 'menu.datastudio.console', // 左下侧边栏默认选中的路由 key
+      selectKey: DATA_STUDIO_SLIDER_ROUTER_ROOT_KEY.CONSOLE, // 左下侧边栏默认选中的路由 key
       selectSubKey: {},
       height: 180, // 左下侧边栏高度
       width: '100%' // 左下侧边栏宽度

diff --git a/dinky-web/src/model/DataStudio/LeftContainer/model.tsx b/dinky-web/src/model/DataStudio/LeftContainer/model.tsx
@@ -1,12 +1,10 @@
 import {createModelTypes} from "@/utils/modelUtils";
 
-import { Effect, Reducer } from "@umijs/max";
-import {
-  DataStudioLeftTopSliderState,
-  DataStudioLeftTopSliderStateType
-} from "@/model/DataStudio/LeftContainer/data.d";
-import {getDataBase} from "@/pages/DataStudio/LeftContainer/MetaData/service";
+import {Effect, Reducer} from "@umijs/max";
+import {DataStudioLeftTopSliderState, DataStudioLeftTopSliderStateType} from "@/model/DataStudio/LeftContainer/data.d";
+import {getDataSourceList} from "@/pages/DataStudio/LeftContainer/DataSource/service";
 import {getTaskData} from "@/pages/DataStudio/LeftContainer/Project/service";
+import {getMSCatalogs} from "@/pages/DataStudio/LeftContainer/Catalog/service";
 
 
 export type DataStudioLeftTopSliderModelType = {
@@ -71,27 +69,24 @@ const DataStudioLeftTopSliderModel: DataStudioLeftTopSliderModelType = {
   },
   effects: {
     * queryProjectData({payload}, {call, put}) {
-
       const response: [] = yield call(getTaskData, payload);
       yield put({
         type: 'updateProjectTreeData',
         payload: response
       })
     },
     * queryCatalogData({payload}, {call, put}) {
-      // todo 请求接口
-      // const response: [] = yield call(getTaskData, payload);
+      const response: [] = yield call(getMSCatalogs, payload);
       yield put({
         type: 'updateCatalogTreeData',
-        payload: payload
+        payload: response
       })
     },
     * queryDataSourceData({payload}, {call, put}) {
-      // todo 请求接口
-      const result: [] = yield call(getDataBase);
+      const result: [] = yield call(getDataSourceList, payload);
       yield put({
         type: 'updateDataSourceTreeData',
-        payload: payload
+        payload: result
       })
     }
   },

diff --git a/dinky-web/src/model/DataStudio/MiddleContainer/data.d.ts b/dinky-web/src/model/DataStudio/MiddleContainer/data.d.ts
@@ -1,43 +1,14 @@
-export const DataStudioMiddleState: string = 'DataStudioMiddleState';
+import {TabItemInfo} from "@/model/DataStudio/data.d";
 
+export const DataStudioMiddleState: string = 'DataStudioMiddleState';
 
-/**
- * @description: 任务类型
- */
-export enum TabsItemSubType {
-  FLINK_SQL = 'FlinkSql'
-}
 
-export type ConsoleState = {
-  result: {};
-};
 
-export enum TabItemType {
-  NONE = '',
-  METADATA = 'metadata',
-  PROJECT = 'project'
-}
-
-export interface TabsItem {
-  id: string; // tab id  可将主键 id/ 索引下表 作为 tab id
-  label: string; // tab 标签
-  breadcrumbLabel: string; // 面包屑标签
-  type: TabItemType; // tab 类型
-  subType: TabsItemSubType | null; // tab 子类型
-  key: string; // tab key
-  treeKey: string; // 树节点 key
-  value: string; // tab value
-  icon: any; // tab icon
-  closable: boolean; // 是否可关闭
-  path: string[]; // tab 路径
-  console: ConsoleState; // 控制台 仅 bottom 下可用
-  isModified: boolean; // 是否修改 用于判断是否需要保存 以及渲染tab标签带*号
-}
 
 export type TabStateType = {
   activeKey: string;
   activeBreadcrumbTitle: string;
-  tabList: TabsItem[];
+  tabList: TabItemInfo[];
 };
 
 

diff --git a/dinky-web/src/model/DataStudio/MiddleContainer/model.tsx b/dinky-web/src/model/DataStudio/MiddleContainer/model.tsx
@@ -5,7 +5,6 @@ import {
   DataStudioMiddleStateType
 } from "@/model/DataStudio/MiddleContainer/data.d";
 import {Reducer} from "@umijs/max";
-import {getFooterValue} from "@/pages/DataStudio/function";
 
 
 export type DataStudioMiddleModelType = {

diff --git a/dinky-web/src/model/DataStudio/RightContainer/data.d.ts b/dinky-web/src/model/DataStudio/RightContainer/data.d.ts
@@ -1,4 +1,4 @@
-import {Alert, Cluster} from "@/types/RegCenter/data";
+import {Alert, Cluster} from "@/types/RegCenter/data.d";
 import {DefaultOptionType} from "antd/es/select";
 
 export const DataStudioRightState: string = 'DataStudioRightState';

diff --git a/dinky-web/src/model/DataStudio/RightContainer/model.tsx b/dinky-web/src/model/DataStudio/RightContainer/model.tsx
@@ -2,7 +2,7 @@ import {createModelTypes} from "@/utils/modelUtils";
 
 import {DataStudioRightState, DataStudioRightStateType} from "@/model/DataStudio/RightContainer/data.d";
 import { Effect, Reducer } from "@umijs/max";
-import {getTaskData} from "@/pages/DataStudio/LeftContainer/Project/service";
+
 import {
   getAlertGroupData,
   getClusterConfigurationData,

diff --git a/dinky-web/src/model/DataStudio/constants.tsx b/dinky-web/src/model/DataStudio/constants.tsx
@@ -0,0 +1,45 @@
+export enum DATA_STUDIO_SLIDER_ROUTER_ROOT_KEY {
+  // 左侧顶部菜单 路由 key 一级
+  PROJECT = 'menu.datastudio.project',
+  CATALOG = 'menu.datastudio.catalog',
+  DATASOURCE = 'menu.datastudio.datasource',
+
+  // 右侧顶部菜单 路由 key 一级
+  JOB_CONFIG = 'menu.datastudio.jobConfig',
+  PREVIEW_CONFIG = 'menu.datastudio.previewConfig',
+  SAVE_POINT = 'menu.datastudio.savePoint',
+  HISTORY_VISION = 'menu.datastudio.historyVision',
+  JOB_INFO = 'menu.datastudio.jobInfo',
+
+  // 右侧底部菜单 路由 key 一级
+  CONSOLE = 'menu.datastudio.console',
+  RESULT=  'menu.datastudio.result',
+  BI ='menu.datastudio.bi',
+  LINEAGE = 'menu.datastudio.lineage',
+  PROCESS = 'menu.datastudio.process',
+  HISTORY = 'menu.datastudio.history',
+  TABLE_DATA = 'menu.datastudio.table-data',
+  TOOLS = 'menu.datastudio.tool',
+  TOOLS_TEXT_COMPARE = 'menu.datastudio.tool.text-comparison',
+  TOOLS_JSON_TO_SQL_DDL ='menu.datastudio.tool.jsonToSql',
+}
+
+
+/**
+ *  初始化各个容器的 高度和宽度 等样式信息
+ */
+export const VIEW_STYLE = {
+  headerHeight: 32,
+  headerNavHeight: 56,
+  footerHeight: 25,
+  sideWidth: 40,
+  leftToolWidth: 180,
+  marginTop: 84,
+  topHeight: 35.6,
+  bottomHeight: 100,
+  rightMargin: 32,
+  leftMargin: 36,
+  midMargin: 44,
+  otherHeight: 0,
+  paddingInline: 50
+};