refactor: DataStudio page (#2221)

* refactor: useThemeValue.tsx * refactor: space * refactor: onResize function * refactor: tableName * refactor: persist and loadData * refactor: render sort * refactor: jtx
DataLinkDC · Aug 16, 2023 · 0a0a832 · 0a0a832
1 parent abe29de
commit 0a0a832
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 91 deletions.
diff --git a/dinky-web/src/hooks/useThemeValue.tsx b/dinky-web/src/hooks/useThemeValue.tsx
@@ -6,24 +6,22 @@ export type ThemeValue = {
   borderColor: string
   footerColor: string
 }
-const { useToken } = theme;
+
 const getThemeValue = (isDark: boolean): ThemeValue => {
   if (isDark) {
     return {borderColor: "#343434", footerColor: "rgba(255, 255, 255, 0.18)"}
   } else {
     return {borderColor: "rgba(5, 5, 5, 0.06)", footerColor: "#f4f4f4"}
-    // return {borderColor: "#E0E2E5"}
   }
 }
+
 export default function useThemeValue() {
-  const {token} = useToken();
-  // const {initialState} = useModel("@@initialState");
   const [theme,setTheme] = useState(localStorage.getItem(THEME.NAV_THEME))
 
-  const isDark = theme === THEME.dark;
   useEffect(() => {
     setTheme(localStorage.getItem(THEME.NAV_THEME))
   },[localStorage.getItem(THEME.NAV_THEME)]);
-  return getThemeValue(isDark);
+
+  return getThemeValue(theme === THEME.dark);
 };
 
diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Console/service.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Console/service.tsx
@@ -1,5 +1,5 @@
 import {queryDataByParams} from "@/services/BusinessCrud";
 
 export function getConsoleData() {
-  return  queryDataByParams('api/process/getConsoleByUserId');
+  return queryDataByParams('api/process/getConsoleByUserId');
 }
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/MetaData/service.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/MetaData/service.tsx
@@ -11,5 +11,5 @@ export function clearMetaDataTable(id: number) {
   return queryDataByParams('api/database/unCacheSchemasAndTables', {id: id});
 }
 export function getDataBase() {
-  return  queryDataByParams('api/database/listEnabledAll');
+  return queryDataByParams('api/database/listEnabledAll');
 }
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/service.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/service.tsx
@@ -3,11 +3,11 @@ import {postAll, putData, putDataJson} from "@/services/api";
 
 
 export async function  getTaskData() {
-  return  (await postAll('/api/catalogue/getCatalogueTreeData')).datas;
+  return (await postAll('/api/catalogue/getCatalogueTreeData')).datas;
 }
 export function getTaskDetails(id:number) {
-  return  queryDataByParams('/api/task',{id:id});
+  return queryDataByParams('/api/task',{id:id});
 }
 export function putTask(params:any) {
-  return  putDataJson('/api/task',params);
+  return putDataJson('/api/task',params);
 }
diff --git a/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/service.tsx b/dinky-web/src/pages/DataStudio/RightContainer/JobConfig/service.tsx
@@ -1,10 +1,10 @@
 import {queryDataByParams} from "@/services/BusinessCrud";
 
 export function getSessionData() {
-  return  queryDataByParams('api/cluster/listSessionEnable');
+  return queryDataByParams('api/cluster/listSessionEnable');
 }
 export function getEnvData() {
-  return  queryDataByParams('/api/task/listFlinkSQLEnv');
+  return queryDataByParams('/api/task/listFlinkSQLEnv');
 }export function getClusterConfigurationData() {
-  return  queryDataByParams('/api/clusterConfiguration/listEnabledAll');
+  return queryDataByParams('/api/clusterConfiguration/listEnabledAll');
 }
diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
@@ -39,6 +39,7 @@ import {
 import * as monaco from "monaco-editor";
 import {Footer} from "antd/es/layout/layout";
 import FooterContainer from "@/pages/DataStudio/FooterContainer";
+import {l} from "@/utils/intl";
 
 const {Sider, Content} = Layout;
 
@@ -64,12 +65,8 @@ const DataStudio = (props: any) => {
     saveTabs,
     updateCenterContentHeight,
     updateSelectLeftKey,
-    updateLeftWidth,
-    updateSelectRightKey
-    ,
-    updateRightWidth,
+    updateSelectRightKey,
     updateSelectBottomKey,
-    updateBottomHeight,
     saveClusterConfiguration,
     activeBreadcrumbTitle,
     updateSelectBottomSubKey,
@@ -80,110 +77,101 @@ const DataStudio = (props: any) => {
   const [isModalUpdateTabContentOpen, setIsModalUpdateTabContentOpen] = useState(false);
   const [newTabData, setNewTabData] = useState({});
   const app = getDvaApp(); // 获取dva的实例
-  const persistor = app._store.persist;
+  const persist = app._store.persist;
   const bottomHeight = bottomContainer.selectKey === "" ? 0 : bottomContainer.height;
-  const [size, setSize] = useState({
+
+  const getClientSize = () => ({
     width: document.documentElement.clientWidth,
     height: document.documentElement.clientHeight,
     contentHeight: document.documentElement.clientHeight - VIEW.headerHeight - VIEW.headerNavHeight - VIEW.footerHeight - VIEW.otherHeight,
-  });
+  })
 
-  const onResize = useCallback(() => {
-    setSize({
-      width: document.documentElement.clientWidth,
-      height: document.documentElement.clientHeight,
-      contentHeight: document.documentElement.clientHeight - VIEW.headerHeight - VIEW.headerNavHeight - VIEW.footerHeight - VIEW.otherHeight,
-    })
-    const centerContentHeight = document.documentElement.clientHeight - VIEW.headerHeight - VIEW.headerNavHeight - VIEW.footerHeight - VIEW.otherHeight - bottomHeight;
+  const [size, setSize] = useState(getClientSize());
+
+  const onResize = () => {
+    setSize(getClientSize())
+    const centerContentHeight = getClientSize().contentHeight - bottomHeight;
     updateCenterContentHeight(centerContentHeight)
     updateToolContentHeight(centerContentHeight - VIEW.midMargin)
-  }, []);
+  };
 
   useEffect(() => {
     window.addEventListener('resize', onResize);
     onResize();
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  }, [onResize]);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
 
   const loadData = async () => {
-    saveDataBase(await getDataBase());
-    updateBottomConsole(await getConsoleData());
-    saveProject(await getTaskData());
-    saveSession(await getSessionData());
-    saveEnv(await getEnvData());
-    saveClusterConfiguration(await getClusterConfigurationData());
+    Promise.all([getDataBase(), getConsoleData(), getTaskData(), getSessionData(), getEnvData(), getClusterConfigurationData()])
+      .then(res => {
+      saveDataBase(res[0]);
+      updateBottomConsole(res[1]);
+      saveProject(res[2]);
+      saveSession(res[3]);
+      saveEnv(res[4]);
+      saveClusterConfiguration(res[5]);
+    })
 
     // 判断是否需要更新tab内容
-    if (tabs.activeKey) {
-      const currentTab = getCurrentTab(tabs.panes, tabs.activeKey);
-      const params = (currentTab?.params as DataStudioParams);
-      if (currentTab?.type === "project") {
-        getTaskDetails(params.taskId).then(res => {
-          for (const key of Object.keys(res)) {
-            if (res[key] !== params.taskData[key]) {
-              if (res[key] instanceof Object) {
-                if (JSON.stringify(res[key]) !== JSON.stringify(params.taskData[key])) {
-                  setIsModalUpdateTabContentOpen(true)
-                  setNewTabData(res)
-                  break
-                }
-              } else {
-                setIsModalUpdateTabContentOpen(true)
-                setNewTabData(res)
-                break
-              }
-            }
+    if (!tabs.activeKey) {
+      return;
+    }
+
+    const currentTab = getCurrentTab(tabs.panes, tabs.activeKey);
+    if (currentTab?.type !== "project") {
+      return;
+    }
 
-          }
+    const params = currentTab.params as DataStudioParams;
+    getTaskDetails(params.taskId).then(res => {
+     const changed = Object.keys(res).some(key => {
+        return res[key] !== params.taskData[key] &&
+          (res[key] instanceof Object ? JSON.stringify(res[key]) !== JSON.stringify(params.taskData[key]) : true)
+      })
 
-        })
+      if (changed) {
+        setIsModalUpdateTabContentOpen(true)
+        setNewTabData(res)
       }
-    }
+    })
   }
+
   useEffect(() => {
     loadData();
     onResize();
   }, []);
 
-
   /**
    * 渲染头部
    * @returns {JSX.Element}
    */
-  const renderHeaderContainer = () => {
-    return <HeaderContainer size={size} activeBreadcrumbTitle={activeBreadcrumbTitle}/>
-  }
-  const updateTabContent = () => {
-    (getCurrentTab(tabs.panes, tabs.activeKey)?.params as DataStudioParams).taskData = newTabData;
-    saveTabs({...tabs})
-    setIsModalUpdateTabContentOpen(false)
-  }
-
+  const renderHeaderContainer = () => <HeaderContainer size={size} activeBreadcrumbTitle={activeBreadcrumbTitle}/>
 
   /**
    * 渲染左侧侧边栏
    * @returns {JSX.Element}
    */
-  const renderLeftContainer = () => {
-    return <LeftContainer size={size}/>
-  }
+  const renderLeftContainer = () => <LeftContainer size={size}/>
 
   /**
    * 渲染右侧侧边栏
    * @returns {JSX.Element}
    */
-  const renderRightContainer = () => {
-    return <RightContainer size={size} bottomHeight={bottomHeight}/>
+  const renderRightContainer = () => <RightContainer size={size} bottomHeight={bottomHeight}/>
+
+  const updateTabContent = () => {
+    (getCurrentTab(tabs.panes, tabs.activeKey)?.params as DataStudioParams).taskData = newTabData;
+    saveTabs({...tabs})
+    setIsModalUpdateTabContentOpen(false)
   }
+
   return (
-    <PersistGate loading={null} persistor={persistor}>
-      <Fragment>
-        <Modal title="Sql内容或配置变更" open={isModalUpdateTabContentOpen} onOk={updateTabContent}
+    <PersistGate loading={null} persistor={persist}>
+        <Modal title={l('pages.datastudio.help.sqlChanged')} open={isModalUpdateTabContentOpen} onOk={updateTabContent}
                onCancel={() => setIsModalUpdateTabContentOpen(false)}>
-          <p>检测到当前页远程有更改，是否刷新更新数据？</p>
+          <p>{l('pages.datastudio.help.sqlChangedPrompt')}</p>
         </Modal>
+
         <div style={{marginInline: -10, marginBlock: -5}}>
           {/* 渲染 header */}
           {renderHeaderContainer()}
@@ -196,13 +184,12 @@ const DataStudio = (props: any) => {
                 items={LeftSide.map(x => ({key: x.key, label: x.label, icon: x.icon}))}
                 style={{
                   height: '50%',
-                  borderBlockStart: "1px solid " + themeValue.borderColor,
-                  borderInlineEnd: "1px solid " + themeValue.borderColor
+                  borderBlockStart: `1px solid ${themeValue.borderColor}`,
+                  borderInlineEnd: `1px solid ${themeValue.borderColor}`
                 }}
                 onClick={(item) =>  updateSelectLeftKey(item.key === leftContainer.selectKey ? '' : item.key)}
               />
 
-
               {/*底部菜单*/}
               <Menu
                 mode="inline"
@@ -212,7 +199,7 @@ const DataStudio = (props: any) => {
                   display: 'flex',
                   height: '50%',
                   flexDirection: "column-reverse",
-                  borderInlineEnd: "1px solid " + themeValue.borderColor
+                  borderInlineEnd: `1px solid ${themeValue.borderColor}`
                 }}
                 onClick={(item) => {
                   updateSelectBottomKey(item.key === bottomContainer.selectKey ? '' : item.key)
@@ -221,7 +208,6 @@ const DataStudio = (props: any) => {
                   }
                 }}
               />
-
             </Sider>
 
             <Content style={{
@@ -232,7 +218,6 @@ const DataStudio = (props: any) => {
               {/*渲染底部内容*/}
               {<BottomContainer size={size}/>}
 
-
               <div style={{
                 display: "flex",
                 position: "absolute",
@@ -269,7 +254,7 @@ const DataStudio = (props: any) => {
                     return TabsPageType.None
                   }
                   const v = (tabs.panes as TabsItemType[]).find(item => item.key === tabs.activeKey);
-                  return x.isShow(v?.type || TabsPageType.None, v?.subType)
+                  return x.isShow(v?.type ?? TabsPageType.None, v?.subType)
                 }).map(x => {
                   return {key: x.key, label: x.label, icon: x.icon}
                 })}
@@ -282,7 +267,6 @@ const DataStudio = (props: any) => {
 
         </div>
 
-      </Fragment>
     </PersistGate>
   );
 };

diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts
@@ -101,7 +101,12 @@ export type DataStudioParams = {
   resultData: Record<string, any>
 }
 
-export enum TabsPageType {None = "", metadata = "metadata", project = "project", flinkSql = "flinksql"}
+export enum TabsPageType {
+  None = "",
+  metadata = "metadata",
+  project = "project",
+  flinkSql = "flinksql"
+}
 
 export type TabsItemType = {
   id: string,
@@ -130,7 +135,7 @@ export type TabsType = {
 }
 
 export type ConnectorType = {
-  tablename: string;
+  tableName: string;
 }
 
 export type MetaStoreCatalogType = {

diff --git a/dlink-web/src/locales/en-US/pages.ts b/dlink-web/src/locales/en-US/pages.ts
@@ -302,6 +302,8 @@ export default {
   'pages.datastudio.label.result': 'Result',
   'pages.datastudio.label.result.query.latest.data': 'Get the latest data',
 
+  'pages.datastudio.help.sqlChanged': 'Sql context or configure changed',
+  'pages.datastudio.help.sqlChangedPrompt': 'the remote context corresponding to the current sql has changed, will the data be flushed?',
 
   'pages.datastudio.explain.validate.msg': 'FlinkSql Syntax and logic check',
   'pages.datastudio.explain.validate': 'Validating...',

diff --git a/dlink-web/src/locales/zh-CN/pages.ts b/dlink-web/src/locales/zh-CN/pages.ts
@@ -43,6 +43,7 @@ export default {
   'pages.login.submit': '登录',
   'pages.login.loginWith': '其他登录方式 :',
   'pages.login.registerAccount': '注册账户',
+
   'pages.welcome.Community': '官方社区',
   'pages.welcome.upgrade': '更新日志',
   'pages.welcome.QQ': 'QQ官方社区群',
@@ -298,9 +299,11 @@ export default {
 
 
   'pages.metadata.Console': '控制台',
+
   'pages.metadata.help.noSqlSelect': '未选择任何sql！',
   'pages.metadata.help.selectSql': '请在编辑器内选择你要执行的sql',
   'pages.metadata.help.exec': '执行选中sql',
+
   'pages.metadata.exec.result.msg': '执行时间: {time} 秒, 总行数: {rowCount}',
   'pages.metadata.exec.result.msghelp': '行数超过500，仅显示前500',
 
@@ -313,6 +316,9 @@ export default {
   'pages.datastudio.label.result': '结果',
   'pages.datastudio.label.result.query.latest.data': '获取最新数据',
 
+  'pages.datastudio.help.sqlChangedPrompt': '检测到当前页远程有更改，是否刷新更新数据？',
+  'pages.datastudio.help.sqlChanged': 'Sql内容或配置变更',
+
   'pages.datastudio.explain.validate.msg': 'FlinkSql 语法和逻辑检查',
   'pages.datastudio.explain.validate': '正在校验中...',
   'pages.datastudio.explain.validate.allright': '全部正确',