Devosend
3 years ago
committed by
GitHub
8 changed files with 263 additions and 6 deletions
@ -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> |
||||
) |
||||
} |
||||
}) |
||||
@ -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; |
||||
} |
||||
} |
||||
@ -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…
Reference in new issue