refactor project tree layout (DataLinkDC#2372)

gaoyan1998 · Oct 10, 2023 · d2d26f6 · d2d26f6
1 parent 16835aa
commit d2d26f6
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 8 deletions.
diff --git a/dinky-web/src/locales/en-US/global.ts b/dinky-web/src/locales/en-US/global.ts
@@ -148,6 +148,7 @@ export default {
   'global.table.execmode.batch': 'Batch Mode',
   'global.table.execmode.streaming': 'Stream Mode',
   'global.table.lifecycle.publish': 'Publish',
+  'global.table.lifecycle.stopped': 'Stopped',
   'global.table.lifecycle.online': 'Online',
   'global.table.lifecycle.unknown': 'Unknown',
   'global.table.execmode': 'Execution mode',

diff --git a/dinky-web/src/locales/zh-CN/global.ts b/dinky-web/src/locales/zh-CN/global.ts
@@ -144,6 +144,7 @@ export default {
   'global.table.lifecycle.all': '全部',
   'global.table.lifecycle.dev': '开发中',
   'global.table.lifecycle.publish': '已发布',
+  'global.table.lifecycle.stopped': '已停止',
   'global.table.lifecycle.online': '已上线',
   'global.table.lifecycle.unknown': '未知',
   'global.table.execmode': '执行模式',

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/JobTree/index.tsx
@@ -46,7 +46,15 @@ type TreeProps = {
 };
 
 const JobTree: React.FC<TreeProps & connect> = (props) => {
-  const { projectData, onNodeClick, style, height, onRightClick } = props;
+  const {
+    projectData,
+    onNodeClick,
+    style,
+    height,
+    onRightClick,
+    selectedKeys: selectedKey
+  } = props;
+
   const [searchValue, setSearchValueValue] = useState('');
   const [data, setData] = useState<any[]>(buildProjectTree(projectData, searchValue));
 
@@ -56,8 +64,7 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
 
   const [expandedKeys, setExpandedKeys] = useState<Key[]>();
   const [autoExpandParent, setAutoExpandParent] = useState(true);
-  const [selectedKeys, setSelectedKeys] = useState(props.selectedKeys);
-
+  const [selectedKeys, setSelectedKeys] = useState(selectedKey);
   const onChangeSearch = (e: any) => {
     let { value } = e.target;
     if (!value) {
@@ -95,7 +102,7 @@ const JobTree: React.FC<TreeProps & connect> = (props) => {
       const expandList: any[] = generateList(data, []);
       let expandedKeys: any = expandList
         .map((item: any) => {
-          if (item?.key == treeKey) {
+          if (item?.key === treeKey) {
             return getParentKey(item.key, data);
           }
           return null;

diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/Project/function.tsx
@@ -1,6 +1,10 @@
 import { getTabIcon } from '@/pages/DataStudio/MiddleContainer/function';
+import { DIALECT } from '@/services/constants';
 import { Catalogue } from '@/types/Studio/data.d';
 import { searchTreeNode } from '@/utils/function';
+import { l } from '@/utils/intl';
+import { Badge, Space } from 'antd';
+import { PresetStatusColorType } from 'antd/es/_util/colors';
 
 export const generateList = (data: any, list: any[]) => {
   for (const element of data) {
@@ -58,17 +62,66 @@ export const buildProjectTree = (
   data
     ? data.map((item: Catalogue) => {
         const currentPath = path ? [...path, item.name] : [item.name];
+        // 构造生命周期的值
+        const stepValue = buildStepValue(item.task?.step);
+        // 渲染生命周期的徽标
+        const renderStepBadge = item.isLeaf && showBadge(item.type) && (
+          <>
+            <Badge.Ribbon
+              style={{
+                top: -14,
+                left: -57,
+                width: '56px',
+                height: '18px',
+                fontSize: '6px',
+                lineHeight: '18px'
+              }}
+              key={item.id}
+              placement={'start'}
+              text={stepValue.title}
+              color={stepValue.color}
+            />
+          </>
+        );
+        // 渲染生命周期的 标记点
+        const renderPreFixState = item.isLeaf && showBadge(item.type) && (
+          <>
+            <Badge
+              title={stepValue.title}
+              status={(stepValue.status as PresetStatusColorType) ?? 'default'}
+            />
+          </>
+        );
+
+        // 总渲染 title
+        const renderTitle = (
+          <>
+            <Space align={'baseline'} size={2}>
+              {renderStepBadge}
+              {searchTreeNode(item.name, searchValue)}
+            </Space>
+          </>
+        );
+
         return {
-          // isLeaf: (item.type && item.children.length === 0) ,
           isLeaf: item.isLeaf,
           name: item.name,
           parentId: item.parentId,
           label: searchTreeNode(item.name, searchValue),
-          icon: item.type && item.children.length === 0 && getTabIcon(item.type, 20),
+          icon: item.type && item.children.length === 0 && (
+            <Space size={'small'}>
+              {renderPreFixState}
+              {getTabIcon(item.type, 20)}
+            </Space>
+          ),
           value: item.id,
           path: currentPath,
           type: item.type,
-          title: <>{searchTreeNode(item.name, searchValue)}</>,
+          title: (
+            <>
+              {item.isLeaf && showBadge(item.type) && <>{'\u00A0'.repeat(16)}</>} {renderTitle}
+            </>
+          ),
           fullInfo: item,
           key: item.id,
           id: item.id,
@@ -82,4 +135,69 @@ export const isUDF = (jobType: string) => {
   return jobType === 'Scala' || jobType === 'Python' || jobType === 'Java';
 };
 
-export const buildUDFTree = (data: []) => {};
+export const buildStepValue = (step: number) => {
+  // "success", "processing", "error", "default", "warning"
+  // todo: 生命周期正在重构 后续在优化
+  switch (step) {
+    case 0:
+      return {
+        title: l('global.table.lifecycle.unknown'),
+        status: 'default',
+        color: '#b0aeae'
+      };
+    case 1:
+      return {
+        title: l('global.table.lifecycle.dev'),
+        status: 'processing',
+        color: '#1890ff'
+      };
+    case 2:
+      return {
+        title: l('global.table.lifecycle.online'),
+        status: 'success',
+        color: '#52c41a'
+      };
+    case 3:
+      return {
+        title: l('global.table.lifecycle.stopped'),
+        status: 'error',
+        color: '#f5222d'
+      };
+    case 4:
+      return {
+        title: l('global.table.lifecycle.offline'),
+        status: 'warning',
+        color: '#faad14'
+      };
+    default:
+      return {
+        title: l('global.table.lifecycle.dev'),
+        status: 'default',
+        color: '#1890ff'
+      };
+  }
+};
+
+export const showBadge = (type: string) => {
+  if (!type) {
+    return false;
+  }
+  switch (type.toLowerCase()) {
+    case DIALECT.SQL:
+    case DIALECT.MYSQL:
+    case DIALECT.ORACLE:
+    case DIALECT.SQLSERVER:
+    case DIALECT.POSTGRESQL:
+    case DIALECT.CLICKHOUSE:
+    case DIALECT.PHOENIX:
+    case DIALECT.DORIS:
+    case DIALECT.HIVE:
+    case DIALECT.STARROCKS:
+    case DIALECT.PRESTO:
+    case DIALECT.FLINK_SQL:
+    case DIALECT.FLINKJAR:
+      return true;
+    default:
+      return false;
+  }
+};