This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 88847e8 [Feature][UI Next] Add workflow instance dag node echo.
88847e8 is described below
commit 88847e82b7f761fe9f9ac57498e09012c81ae883
Author: Devosend <[email protected]>
AuthorDate: Thu Feb 24 09:16:51 2022 +0800
[Feature][UI Next] Add workflow instance dag node echo.
---
.../src/locales/modules/en_US.ts | 5 +-
.../src/locales/modules/zh_CN.ts | 5 +-
.../src/service/modules/process-instances/index.ts | 2 +-
.../projects/workflow/components/dag/dag-hooks.ts | 4 +-
.../workflow/components/dag/dag-node-status.tsx | 116 +++++++++++++++++++++
.../projects/workflow/components/dag/index.tsx | 24 ++++-
.../workflow/components/dag/status.module.scss | 32 ++++++
.../workflow/components/dag/use-node-status.ts | 81 ++++++++++++++
8 files changed, 263 insertions(+), 6 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index a9d2833..87c8e19 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -477,7 +477,10 @@ const project = {
complement_range: 'Complement Range',
parameters_variables: 'Parameters variables',
global_parameters: 'Global parameters',
- local_parameters: 'Local parameters'
+ local_parameters: 'Local parameters',
+ type: 'Type',
+ retry_count: 'Retry Count',
+ submit_time: 'Submit Time'
},
task: {
task_name: 'Task Name',
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index 5ae3aec..fbb0e90 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -475,7 +475,10 @@ const project = {
complement_range: '补数范围',
parameters_variables: '参数变量',
global_parameters: '全局参数',
- local_parameters: '局部参数'
+ local_parameters: '局部参数',
+ type: '类型',
+ retry_count: '重试次数',
+ submit_time: '提交时间'
},
task: {
task_name: '任务名称',
diff --git
a/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
b/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
index 92ec13e..67b6323 100644
--- a/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
@@ -111,7 +111,7 @@ export function deleteProcessInstanceById(id: number, code:
number): any {
})
}
-export function queryTaskListByProcessId(id: IdReq, code: CodeReq): any {
+export function queryTaskListByProcessId(id: number, code: number): any {
return axios({
url: `/projects/${code}/process-instances/${id}/tasks`,
method: 'get'
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
index 55b6e42..114dbe7 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
@@ -27,6 +27,7 @@ import { useGraphBackfill } from './use-graph-backfill'
import { useDagDragAndDrop } from './use-dag-drag-drop'
import { useTaskEdit } from './use-task-edit'
import { useNodeMenu } from './use-node-menu'
+import { useNodeStatus } from './use-node-status'
export {
useCanvasInit,
@@ -40,5 +41,6 @@ export {
useCellUpdate,
useDagDragAndDrop,
useTaskEdit,
- useNodeMenu
+ useNodeMenu,
+ useNodeStatus
}
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-node-status.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-node-status.tsx
new file mode 100644
index 0000000..1272627
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-node-status.tsx
@@ -0,0 +1,116 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NTooltip, NSpin, NIcon } from 'naive-ui'
+import { defineComponent, PropType, h } from 'vue'
+import styles from './status.module.scss'
+
+const props = {
+ t: {
+ type: Object as PropType<any>,
+ require: true
+ },
+ taskInstance: {
+ type: Object as PropType<any>,
+ require: true
+ },
+ stateProps: {
+ type: Object as PropType<any>,
+ require: true
+ }
+}
+
+export default defineComponent({
+ name: 'dag-node-status',
+ props,
+ setup(props) {
+ const iconElement = h(
+ NIcon,
+ {
+ size: '20px'
+ },
+ {
+ default: () =>
+ h(props.stateProps.icon, {
+ color: props.stateProps.color
+ })
+ }
+ )
+ return {
+ iconElement
+ }
+ },
+ render() {
+ return (
+ <NTooltip placement='top'>
+ {{
+ trigger: () => {
+ if (this.stateProps.isSpin) {
+ return h(
+ NSpin,
+ {
+ small: 'small'
+ },
+ {
+ icon: () => this.iconElement
+ }
+ )
+ } else {
+ return this.iconElement
+ }
+ },
+ default: () => (
+ <ul class={styles['status-info']}>
+ <li>
+ {this.$props.t('project.workflow.name')}:{' '}
+ {this.taskInstance.name}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.status')}:{' '}
+ {this.stateProps.desc}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.type')}:{' '}
+ {this.taskInstance.taskType}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.host')}:{' '}
+ {this.taskInstance.host || '-'}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.retry_count')}:{' '}
+ {this.taskInstance.retryTimes}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.submit_time')}:{' '}
+ {this.taskInstance.submitTime}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.start_time')}:{' '}
+ {this.taskInstance.startTime}
+ </li>
+ <li>
+ {this.$props.t('project.workflow.end_time')}:{' '}
+ {this.taskInstance.endTime ? this.taskInstance.endTime : '-'}
+ </li>
+ </ul>
+ )
+ }}
+ </NTooltip>
+ )
+ }
+})
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
index 75c1fc7..8e1dc38 100644
---
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
@@ -16,7 +16,15 @@
*/
import type { Graph } from '@antv/x6'
-import { defineComponent, ref, provide, PropType, toRef } from 'vue'
+import {
+ defineComponent,
+ ref,
+ provide,
+ PropType,
+ toRef,
+ onMounted,
+ watch
+} from 'vue'
import DagToolbar from './dag-toolbar'
import DagCanvas from './dag-canvas'
import DagSidebar from './dag-sidebar'
@@ -28,7 +36,8 @@ import {
useDagDragAndDrop,
useTaskEdit,
useBusinessMapper,
- useNodeMenu
+ useNodeMenu,
+ useNodeStatus
} from './dag-hooks'
import { useThemeStore } from '@/store/theme/theme'
import VersionModal from '../../definition/components/version-modal'
@@ -108,6 +117,8 @@ export default defineComponent({
graph
})
+ const { refreshTaskStatus } = useNodeStatus({ graph })
+
const { onDragStart, onDrop } = useDagDragAndDrop({
graph,
readonly: toRef(props, 'readonly'),
@@ -155,6 +166,15 @@ export default defineComponent({
saveModelToggle(false)
}
+ onMounted(() => {
+ refreshTaskStatus()
+ })
+
+ watch(
+ () => props.definition,
+ () => refreshTaskStatus()
+ )
+
return () => (
<div
class={[
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/status.module.scss
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/status.module.scss
new file mode 100644
index 0000000..93a89af
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/status.module.scss
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .status-icon {
+ width: 100%;
+ height: 100%;
+ display: block;
+ font-size: 18px;
+}
+
+.status-info {
+ margin-bottom: 0;
+ list-style: none;
+ padding-left: 10px;
+ li {
+ margin-bottom: 5px;
+ }
+}
diff --git
a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts
new file mode 100644
index 0000000..0ecb4da
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts
@@ -0,0 +1,81 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Ref } from 'vue'
+import { render, h } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import type { Graph } from '@antv/x6'
+import { tasksState } from '@/utils/common'
+import { NODE, NODE_STATUS_MARKUP } from './dag-config'
+import { queryTaskListByProcessId } from '@/service/modules/process-instances'
+import NodeStatus from
'@/views/projects/workflow/components/dag/dag-node-status'
+
+interface Options {
+ graph: Ref<Graph | undefined>
+}
+
+/**
+ * Node status and tooltip
+ */
+export function useNodeStatus(options: Options) {
+ const { graph } = options
+ const route = useRoute()
+
+ const { t } = useI18n()
+
+ const setNodeStatus = (code: string, state: string, taskInstance: any) => {
+ const stateProps = tasksState(t)[state]
+ const node = graph.value?.getCellById(code)
+ if (node) {
+ // Destroy the previous dom
+ node.removeMarkup()
+ node.setMarkup(NODE.markup.concat(NODE_STATUS_MARKUP))
+ const nodeView = graph.value?.findViewByCell(node)
+ const el = nodeView?.find('div')[0]
+ const a = h(NodeStatus, {
+ t,
+ taskInstance,
+ stateProps
+ })
+
+ render(a, el as HTMLElement)
+ }
+ }
+
+ /**
+ * Task status
+ */
+ const refreshTaskStatus = () => {
+ const projectCode = Number(route.params.projectCode)
+ const instanceId = Number(route.params.id)
+
+ queryTaskListByProcessId(instanceId, projectCode).then((res: any) => {
+ window.$message.success(t('project.workflow.success'))
+ const { taskList } = res
+ if (taskList) {
+ taskList.forEach((taskInstance: any) => {
+ setNodeStatus(taskInstance.taskCode, taskInstance.state,
taskInstance)
+ })
+ }
+ })
+ }
+
+ return {
+ refreshTaskStatus
+ }
+}
