|
|
@@ -18,10 +18,12 @@ import { experimentStatusInfo } from '../status'; |
|
|
import styles from './index.less'; |
|
|
import styles from './index.less'; |
|
|
|
|
|
|
|
|
let graph = null; |
|
|
let graph = null; |
|
|
|
|
|
const NodePrefix = 'workflow'; |
|
|
|
|
|
|
|
|
function ExperimentText() { |
|
|
function ExperimentText() { |
|
|
const [experimentIns, setExperimentIns] = useState(undefined); |
|
|
const [experimentIns, setExperimentIns] = useState(undefined); |
|
|
const [experimentNodeData, setExperimentNodeData, experimentNodeDataRef] = useStateRef(undefined); |
|
|
const [experimentNodeData, setExperimentNodeData, experimentNodeDataRef] = useStateRef(undefined); |
|
|
|
|
|
const [workflowStatus, setWorkflowStatus] = useState(undefined); |
|
|
const graphRef = useRef(); |
|
|
const graphRef = useRef(); |
|
|
const workflowRef = useRef(); |
|
|
const workflowRef = useRef(); |
|
|
const locationParams = useParams(); // 新版本获取路由参数接口 |
|
|
const locationParams = useParams(); // 新版本获取路由参数接口 |
|
|
@@ -89,10 +91,22 @@ function ExperimentText() { |
|
|
const { status, nodes_status, argo_ins_ns, argo_ins_name, finish_time } = res.data; |
|
|
const { status, nodes_status, argo_ins_ns, argo_ins_name, finish_time } = res.data; |
|
|
const workflowData = workflowRef.current; |
|
|
const workflowData = workflowRef.current; |
|
|
const experimentStatusObjs = parseJsonText(nodes_status); |
|
|
const experimentStatusObjs = parseJsonText(nodes_status); |
|
|
workflowData.nodes.forEach((item) => { |
|
|
|
|
|
const experimentNode = experimentStatusObjs?.[item.id]; |
|
|
|
|
|
updateWorkflowNode(item, experimentNode); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
if (experimentStatusObjs) { |
|
|
|
|
|
workflowData.nodes.forEach((item) => { |
|
|
|
|
|
const experimentNode = experimentStatusObjs?.[item.id]; |
|
|
|
|
|
updateWorkflowNode(item, experimentNode); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 处理workflow状态 |
|
|
|
|
|
Object.keys(experimentStatusObjs).some((key) => { |
|
|
|
|
|
if (key.startsWith(NodePrefix)) { |
|
|
|
|
|
const workflowStatus = experimentStatusObjs[key]; |
|
|
|
|
|
setWorkflowStatus(workflowStatus); |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
return false; |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// 绘制图 |
|
|
// 绘制图 |
|
|
getGraphData(workflowData, true); |
|
|
getGraphData(workflowData, true); |
|
|
@@ -147,6 +161,15 @@ function ExperimentText() { |
|
|
status: phase, |
|
|
status: phase, |
|
|
})); |
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
const workflowStatus = Object.values(nodes).find((node) => |
|
|
|
|
|
node.displayName.startsWith(NodePrefix), |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
// 设置工作流状态 |
|
|
|
|
|
if (workflowStatus) { |
|
|
|
|
|
setWorkflowStatus(workflowStatus); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const workflowData = workflowRef.current; |
|
|
const workflowData = workflowRef.current; |
|
|
workflowData.nodes.forEach((item) => { |
|
|
workflowData.nodes.forEach((item) => { |
|
|
const experimentNode = Object.values(nodes).find((node) => node.displayName === item.id); |
|
|
const experimentNode = Object.values(nodes).find((node) => node.displayName === item.id); |
|
|
@@ -471,13 +494,13 @@ function ExperimentText() { |
|
|
<div className={styles['pipeline-container']}> |
|
|
<div className={styles['pipeline-container']}> |
|
|
<div className={styles['pipeline-container__top']}> |
|
|
<div className={styles['pipeline-container__top']}> |
|
|
<div className={styles['pipeline-container__top__info']}> |
|
|
<div className={styles['pipeline-container__top__info']}> |
|
|
启动时间:{formatDate(experimentIns?.create_time)} |
|
|
|
|
|
|
|
|
启动时间:{formatDate(workflowStatus?.startedAt)} |
|
|
</div> |
|
|
</div> |
|
|
<div className={styles['pipeline-container__top__info']}> |
|
|
<div className={styles['pipeline-container__top__info']}> |
|
|
执行时长: |
|
|
执行时长: |
|
|
<RunDuration |
|
|
<RunDuration |
|
|
createTime={experimentIns?.create_time} |
|
|
|
|
|
finishTime={experimentIns?.finish_time} |
|
|
|
|
|
|
|
|
createTime={workflowStatus?.startedAt} |
|
|
|
|
|
finishTime={workflowStatus?.finishedAt} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div className={styles['pipeline-container__top__info']}> |
|
|
<div className={styles['pipeline-container__top__info']}> |
|
|
@@ -488,11 +511,11 @@ function ExperimentText() { |
|
|
height: '8px', |
|
|
height: '8px', |
|
|
borderRadius: '50%', |
|
|
borderRadius: '50%', |
|
|
marginRight: '6px', |
|
|
marginRight: '6px', |
|
|
backgroundColor: experimentStatusInfo[experimentIns?.status]?.color, |
|
|
|
|
|
|
|
|
backgroundColor: experimentStatusInfo[workflowStatus?.phase]?.color, |
|
|
}} |
|
|
}} |
|
|
></div> |
|
|
></div> |
|
|
<span style={{ color: experimentStatusInfo[experimentIns?.status]?.color }}> |
|
|
|
|
|
{experimentStatusInfo[experimentIns?.status]?.label} |
|
|
|
|
|
|
|
|
<span style={{ color: experimentStatusInfo[workflowStatus?.phase]?.color }}> |
|
|
|
|
|
{experimentStatusInfo[workflowStatus?.phase]?.label} |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<Button |
|
|
<Button |
|
|
|