Browse Source

[Feature][UI Next] Add workflow instance dag node echo.

3.0.0/version-upgrade
Devosend 3 years ago committed by GitHub
parent
commit
88847e82b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 5
      dolphinscheduler-ui-next/src/locales/modules/en_US.ts
  2. 5
      dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
  3. 2
      dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts
  4. 4
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts
  5. 116
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-node-status.tsx
  6. 24
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx
  7. 32
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/status.module.scss
  8. 81
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts

5
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',

5
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: '任务名称',

2
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'

4
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
}

116
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>
)
}
})

24
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={[

32
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;
}
}

81
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
}
}
Loading…
Cancel
Save