improve datastudio's menu tag logical & modify some layout (DataLinkD…

…C#2619) * improve some web code * improve some web code * improve some web code * Spotless Apply * improve some web code * Spotless Apply * improve some layout * Spotless Apply * modify some layout * Spotless Apply * delete unuse classname * improve some layout * Spotless Apply * fix i18n --------- Co-authored-by: Zzm0809 <[email protected]>
aiwenmo · Dec 12, 2023 · 2343bd8 · 2343bd8
1 parent 7ea8cab
commit 2343bd8
Show file tree

Hide file tree

Showing 34 changed files with 419 additions and 237 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -164,6 +164,7 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     readOnly, // 是否只读
     glyphMargin: true, // 字形边缘
     formatOnType: true, // 代码格式化
+    // columnSelection: true, // 列选择
     wrappingIndent:
       language === 'yaml' || language === 'yml' || language === 'json' ? 'indent' : 'none',
     inlineSuggest: {

diff --git a/dinky-web/src/components/LineageGraph/index.tsx b/dinky-web/src/components/LineageGraph/index.tsx
@@ -19,6 +19,7 @@
 
 import { Badge, Tooltip, Typography } from 'antd';
 
+import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext';
 import {
   LineageDetailInfo,
   LineageRelations,
@@ -28,19 +29,15 @@ import {
 import { l } from '@/utils/intl';
 import { SuccessNotification, WarningNotification } from '@/utils/messages';
 import {
+  ArrowsAltOutlined,
+  ColumnHeightOutlined,
   CompassOutlined,
-  ExpandAltOutlined,
-  FullscreenExitOutlined,
   InsertRowAboveOutlined,
-  PlusCircleOutlined,
-  ReloadOutlined
+  ReloadOutlined,
+  ShrinkOutlined
 } from '@ant-design/icons';
-import _ from 'lodash';
 import React, { useEffect } from 'react';
 import 'react-lineage-dag/dist/index.css';
-// import LineageDag from "react-lineage-dag";
-import LineageDagExt from '@/components/LineageGraph/lineage-dag-ext';
-// import LineageDagExt from "@/components/LineageGraph/lineage-dag-ext";
 
 interface LineageState {
   lineageData: LineageDetailInfo;
@@ -50,7 +47,7 @@ interface LineageState {
   relations: LineageRelations[];
   columns: any[];
   operator: any[];
-  centerId: string;
+  centerId?: string;
   showMinimap: boolean;
   refresh: boolean;
   expandField: boolean;
@@ -69,7 +66,7 @@ type JobLineageProps = {
 type ITable = {
   id: string;
   name: string;
-  isCollapse: boolean;
+  isCollapse?: boolean;
   fields: LineageTableColumn[];
 };
 
@@ -188,10 +185,10 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
           <Tooltip
             title={lineageState.expandField ? l('lineage.expandField') : l('lineage.expandField')}
           >
-            <FullscreenExitOutlined width={300} />
+            <ColumnHeightOutlined />
           </Tooltip>
         ),
-        onClick: (nodeData: any) => handleExpandField(nodeData, _.clone(data))
+        onClick: (nodeData: any) => handleExpandField(nodeData, data)
       },
       {
         id: 'expandDownstream',
@@ -206,7 +203,7 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
                 : l('lineage.collapseDownstream')
             }
           >
-            <PlusCircleOutlined />
+            <ShrinkOutlined />
           </Tooltip>
         ),
         onClick: (nodeData: { id: string }) => {
@@ -235,7 +232,7 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
                 : l('lineage.collapseUpstream')
             }
           >
-            <ExpandAltOutlined />
+            <ArrowsAltOutlined />
           </Tooltip>
         ),
         onClick: (nodeData: { id: string }) => {
@@ -327,11 +324,9 @@ const LineageGraph: React.FC<JobLineageProps> = (props) => {
           isAdsorb: true,
           theme: {
             shapeType: 'line',
-            gap: 20,
-            lineWidth: 1,
-            lineColor: '#e8e8e8',
-            circleRadiu: 5,
-            circleColor: '#e8e8e8'
+            gap: 30,
+            lineWidth: 0.2,
+            circleRadiu: 5
           }
         }
       }}

diff --git a/dinky-web/src/locales/en-US/pages.ts b/dinky-web/src/locales/en-US/pages.ts
@@ -48,7 +48,7 @@ export default {
    *
    * */
 
-  'button.push': 'submit',
+  'button.push': 'Push',
   /**
    *
    * catalog
@@ -1123,12 +1123,12 @@ export default {
   'user.usernamePlaceholder': 'Please enter user name',
 
   'lineage.getError': 'Cannot Get Lineage',
-  'lineage.expandField': 'Expand Field',
-  'lineage.collapseField': 'Collapse Field',
-  'lineage.expandDownstream': 'Expand Downstream',
-  'lineage.collapseDownstream': 'Collapse Downstream',
-  'lineage.expandUpstream': 'Expand Upstream',
-  'lineage.collapseUpstream': 'Collapse Upstream',
+  'lineage.expandField': 'Expand Field(UnSupported)',
+  'lineage.collapseField': 'Collapse Field(UnSupported)',
+  'lineage.expandDownstream': 'Expand Downstream(UnSupported)',
+  'lineage.collapseDownstream': 'Collapse Downstream(UnSupported)',
+  'lineage.expandUpstream': 'Expand Upstream(UnSupported)',
+  'lineage.collapseUpstream': 'Collapse Upstream(UnSupported)',
   'lineage.showMap': 'Show Map',
   'lineage.hideMap': 'Hide Map',
   'lineage.refresh': 'Refresh'

diff --git a/dinky-web/src/locales/zh-CN/pages.ts b/dinky-web/src/locales/zh-CN/pages.ts
@@ -45,7 +45,7 @@ export default {
    *
    * */
 
-  'button.push': '提交',
+  'button.push': '推送',
   /**
    *
    * catalog
@@ -1083,12 +1083,12 @@ export default {
   'user.usernamePlaceholder': '请输入用户名',
 
   'lineage.getError': '无法获取血缘',
-  'lineage.expandField': '展开字段',
-  'lineage.collapseField': '收缩字段',
-  'lineage.expandDownstream': '展开下游',
-  'lineage.collapseDownstream': '收起下游',
-  'lineage.expandUpstream': '展开上游',
-  'lineage.collapseUpstream': '收起上游',
+  'lineage.expandField': '展开字段(暂未实现)',
+  'lineage.collapseField': '收起字段(暂未实现)',
+  'lineage.expandDownstream': '展开下游(暂未实现)',
+  'lineage.collapseDownstream': '收起下游(暂未实现)',
+  'lineage.expandUpstream': '展开上游(暂未实现)',
+  'lineage.collapseUpstream': '收起上游(暂未实现)',
   'lineage.showMap': '显示小地图',
   'lineage.hideMap': '隐藏小地图',
   'lineage.refresh': '刷新血缘'

diff --git a/...DataStudio/BottomContainer/JobExecHistory/components/JobDetailInfoModel/StatementInfo.tsx b/...DataStudio/BottomContainer/JobExecHistory/components/JobDetailInfoModel/StatementInfo.tsx
@@ -33,8 +33,6 @@ type StatementInfoProps = {
 export const StatementInfo: React.FC<StatementInfoProps> = (props) => {
   const { row } = props;
 
-  console.log(row?.statement);
-
   return (
     <>
       <ProDescriptions

diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/JobExecHistory/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/JobExecHistory/index.tsx
@@ -250,8 +250,6 @@ const JobExecHistory: React.FC<connect> = (props) => {
     };
   };
 
-  console.log(currentTab);
-
   return (
     <>
       {tabs.panes.length === 0 ? (

diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Result/index.tsx
@@ -132,7 +132,7 @@ const Result = (props: any) => {
     } else {
       if (isSql(current.dialect)) {
         // common sql
-        const res = await handleGetOption('api/studio/getCommonSqlData', 'Get Data', {
+        const res = await handleGetOption('api/studio/getCommonSqlData', l('global.getdata.tips'), {
           taskId: params.taskId
         });
         if (res.data) {
@@ -149,9 +149,13 @@ const Result = (props: any) => {
           const historyData = res.data;
           if (historyData && '2' == historyData.status) {
             const historyId = historyData.id;
-            const tableData = await handleGetOption('api/studio/getJobData', 'Get Data', {
-              jobId: historyId
-            });
+            const tableData = await handleGetOption(
+              'api/studio/getJobData',
+              l('global.getdata.tips'),
+              {
+                jobId: historyId
+              }
+            );
             const data = tableData.data;
             if (data.success) {
               consoleData.result = data;

diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/index.tsx
@@ -21,7 +21,13 @@ import { CircleBtn } from '@/components/CallBackButton/CircleBtn';
 import Title from '@/components/Front/Title';
 import ContentScroll from '@/components/Scroll/ContentScroll';
 import MovableSidebar from '@/components/Sidebar/MovableSidebar';
-import { StateType, STUDIO_MODEL, VIEW } from '@/pages/DataStudio/model';
+import {
+  StateType,
+  STUDIO_MODEL,
+  TabsItemType,
+  TabsPageType,
+  VIEW
+} from '@/pages/DataStudio/model';
 import { LeftBottomMoreTabs, LeftBottomSide } from '@/pages/DataStudio/route';
 import { l } from '@/utils/intl';
 import { connect } from '@@/exports';
@@ -34,7 +40,13 @@ export type BottomContainerProps = {
   height: number | string;
 };
 const BottomContainer: React.FC<BottomContainerProps> = (props: any) => {
-  const { dispatch, size, bottomContainer, height } = props;
+  const {
+    dispatch,
+    size,
+    bottomContainer,
+    height,
+    tabs: { activeKey, panes }
+  } = props;
   const width = document.documentElement.clientWidth - VIEW.sideWidth * 2;
 
   /**
@@ -76,6 +88,13 @@ const BottomContainer: React.FC<BottomContainerProps> = (props: any) => {
     });
   };
 
+  const updateSelectBottomKey = (key: string) => {
+    dispatch({
+      type: STUDIO_MODEL.updateSelectBottomKey,
+      payload: key
+    });
+  };
+
   /**
    * 更新工具栏内容高度
    * @param {number} height
@@ -159,7 +178,32 @@ const BottomContainer: React.FC<BottomContainerProps> = (props: any) => {
   };
   const renderItems = () => {
     return [
-      ...LeftBottomSide.map((x) => {
+      ...LeftBottomSide.filter((tab) => {
+        if (!tab.isShow) {
+          return true;
+        }
+        if (parseInt(activeKey) < 0) {
+          return TabsPageType.None;
+        }
+        const currentTab = (panes as TabsItemType[]).find((item) => item.key === activeKey);
+        const show = tab.isShow(currentTab?.type ?? TabsPageType.None, currentTab?.subType);
+        // 如果当前打开的菜单等于 状态存的菜单 且 菜单不显示状态下，先切换到项目key(因为项目key 不可能不显示) 在关闭这个
+        // if current open menu equal status menu and menu is not show status, first switch to project key(because project key is not show) and close this
+        // if (tab.key === bottomContainer.selectKey && !show) {
+        //   updateSelectBottomKey(
+        //     currentTab?.subType?.toLowerCase() === DIALECT.FLINKSQLENV
+        //     || currentTab?.subType?.toLowerCase() === DIALECT.SCALA
+        //     || currentTab?.subType?.toLowerCase() === DIALECT.JAVA
+        //     || currentTab?.subType?.toLowerCase() === DIALECT.PYTHON_LONG
+        //       ? LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql环境，scala，java，python，切换到工具栏
+        //       : currentTab?.subType?.toLowerCase() === DIALECT.FLINK_SQL
+        //       || currentTab?.subType?.toLowerCase() === DIALECT.FLINKJAR
+        //       || isSql(currentTab?.subType  ?? '')
+        //     ? LeftBottomKey.CONSOLE_KEY : LeftBottomKey.TOOLS_KEY // 如果当前打开的是flinksql，flinkjar，切换到控制台
+        //   );
+        // }
+        return show;
+      }).map((x) => {
         return { ...x, key: x.key + '/' };
       }),
       ...getSubTabs()
@@ -233,5 +277,6 @@ const BottomContainer: React.FC<BottomContainerProps> = (props: any) => {
 };
 
 export default connect(({ Studio }: { Studio: StateType }) => ({
-  bottomContainer: Studio.bottomContainer
+  bottomContainer: Studio.bottomContainer,
+  tabs: Studio.tabs
 }))(BottomContainer);
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx
@@ -17,6 +17,8 @@
  *
  */
 
+import { LeftBottomKey, RightMenuKey } from '@/pages/DataStudio/data.d';
+import { isSql } from '@/pages/DataStudio/HeaderContainer/service';
 import { getTabIcon } from '@/pages/DataStudio/MiddleContainer/function';
 import { DIALECT } from '@/services/constants';
 import { Catalogue } from '@/types/Studio/data.d';
@@ -185,5 +187,29 @@ export const buildProjectTree = (
     : [];
 
 export const isUDF = (jobType: string): boolean => {
-  return jobType === 'Scala' || jobType === 'Python' || jobType === 'Java';
+  return (
+    jobType.toLowerCase() === DIALECT.SCALA ||
+    jobType.toLowerCase() === DIALECT.PYTHON_LONG ||
+    jobType.toLowerCase() === DIALECT.JAVA
+  );
 };
+
+export const isFlinkJob = (jobType: string): boolean => {
+  return jobType.toLowerCase() === DIALECT.FLINK_SQL || jobType.toLowerCase() === DIALECT.FLINKJAR;
+};
+
+export function getRightSelectKeyFromNodeClickJobType(jobType: string): string {
+  return isFlinkJob(jobType)
+    ? RightMenuKey.JOB_CONFIG_KEY
+    : isSql(jobType)
+    ? RightMenuKey.PREVIEW_CONFIG_KEY
+    : RightMenuKey.JOB_INFO_KEY;
+}
+
+export function getBottomSelectKeyFromNodeClickJobType(jobType: string): string {
+  return isFlinkJob(jobType) || isSql(jobType)
+    ? LeftBottomKey.CONSOLE_KEY
+    : isUDF(jobType) || jobType.toLowerCase() === DIALECT.FLINKSQLENV
+    ? LeftBottomKey.TOOLS_KEY
+    : LeftBottomKey.TOOLS_KEY;
+}
diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/index.tsx
@@ -18,12 +18,17 @@
  */
 
 import RightContextMenu from '@/components/RightContextMenu';
+import { LeftBottomKey } from '@/pages/DataStudio/data.d';
 import { getTabByTaskId } from '@/pages/DataStudio/function';
 import {
   FOLDER_RIGHT_MENU,
   JOB_RIGHT_MENU
 } from '@/pages/DataStudio/LeftContainer/Project/constants';
 import FolderModal from '@/pages/DataStudio/LeftContainer/Project/FolderModal';
+import {
+  getBottomSelectKeyFromNodeClickJobType,
+  getRightSelectKeyFromNodeClickJobType
+} from '@/pages/DataStudio/LeftContainer/Project/function';
 import JobModal from '@/pages/DataStudio/LeftContainer/Project/JobModal';
 import JobTree from '@/pages/DataStudio/LeftContainer/Project/JobTree';
 import {
@@ -32,6 +37,7 @@ import {
   STUDIO_MODEL,
   STUDIO_MODEL_ASYNC
 } from '@/pages/DataStudio/model';
+import { LeftBottomMoreTabs } from '@/pages/DataStudio/route';
 import {
   handleAddOrUpdate,
   handleOption,
@@ -126,6 +132,22 @@ const Project: React.FC = (props: connect) => {
     if (!isLeaf) {
       dispatch({ type: STUDIO_MODEL.updateProjectExpandKey, payload: [...expandKeys, key] });
       return;
+    } else {
+      dispatch({
+        type: STUDIO_MODEL.updateSelectRightKey,
+        payload: getRightSelectKeyFromNodeClickJobType(type)
+      });
+      const bottomKey = getBottomSelectKeyFromNodeClickJobType(type);
+      dispatch({
+        type: STUDIO_MODEL.updateSelectBottomKey,
+        payload: bottomKey
+      });
+      if (bottomKey === LeftBottomKey.TOOLS_KEY) {
+        dispatch({
+          type: STUDIO_MODEL.updateSelectBottomSubKey,
+          payload: LeftBottomMoreTabs[bottomKey][0].key
+        });
+      }
     }
 
     path.pop();