diff --git a/dinky-web/src/locales/en-US/global.ts b/dinky-web/src/locales/en-US/global.ts index c0b66d5372..97b9792bdf 100644 --- 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 index 19a89aad73..d505563bc0 100644 --- 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 index 4d967af0c3..37da5b412d 100644 --- 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 = (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(buildProjectTree(projectData, searchValue)); @@ -56,8 +64,7 @@ const JobTree: React.FC = (props) => { const [expandedKeys, setExpandedKeys] = useState(); 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 = (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 index 092b7b4c19..e06c36609e 100644 --- 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) && ( + <> + + + ); + // 渲染生命周期的 标记点 + const renderPreFixState = item.isLeaf && showBadge(item.type) && ( + <> + + + ); + + // 总渲染 title + const renderTitle = ( + <> + + {renderStepBadge} + {searchTreeNode(item.name, searchValue)} + + + ); + 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 && ( + + {renderPreFixState} + {getTabIcon(item.type, 20)} + + ), 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; + } +};