From 371d754dbc275f3720b6dc7628399d51cbd7b276 Mon Sep 17 00:00:00 2001 From: zhaowei Date: Thu, 8 May 2025 15:16:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9A=E6=97=B6=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E6=89=A7=E8=A1=8C=E6=97=B6=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/ActiveLearn/Instance/index.tsx | 17 +++++++++++++++++ .../components/ActiveLearnBasic/index.tsx | 7 ++++--- react-ui/src/pages/AutoML/Instance/index.tsx | 17 +++++++++++++++++ .../AutoML/components/AutoMLBasic/index.tsx | 13 ++++++++++--- react-ui/src/pages/Experiment/Info/index.jsx | 15 ++++++++------- .../components/ExperimentDrawer/index.tsx | 10 ++++++---- .../src/pages/HyperParameter/Instance/index.tsx | 17 +++++++++++++++++ .../components/HyperParameterBasic/index.tsx | 6 ++++-- react-ui/src/utils/index.ts | 11 +++++++++++ 9 files changed, 94 insertions(+), 19 deletions(-) diff --git a/react-ui/src/pages/ActiveLearn/Instance/index.tsx b/react-ui/src/pages/ActiveLearn/Instance/index.tsx index 680f935c..756acfd4 100644 --- a/react-ui/src/pages/ActiveLearn/Instance/index.tsx +++ b/react-ui/src/pages/ActiveLearn/Instance/index.tsx @@ -35,6 +35,8 @@ function ActiveLearnInstance() { const params = useParams(); const instanceId = safeInvoke(Number)(params.id); const evtSourceRef = useRef(null); + const [currentTime, setCurrentTime] = useState(); + const finish_time = workflowStatus?.finishedAt; useEffect(() => { if (instanceId) { @@ -46,6 +48,20 @@ function ActiveLearnInstance() { // eslint-disable-next-line react-hooks/exhaustive-deps }, [instanceId]); + // 定时刷新耗时 + useEffect(() => { + if (finish_time) { + setCurrentTime(new Date(finish_time)); + } else { + const timer = setInterval(() => { + setCurrentTime(new Date()); + }, 1000); + return () => { + clearInterval(timer); + }; + } + }, [finish_time]); + // 获取实验实例详情 const getExperimentInsInfo = async (isStatusDetermined: boolean) => { const [res] = await to(getActiveLearnInsReq(instanceId)); @@ -153,6 +169,7 @@ function ActiveLearnInstance() { className={styles['active-learn-instance__basic']} info={experimentInfo} runStatus={workflowStatus} + finishTime={currentTime} isInstance /> ), diff --git a/react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx b/react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx index 892e6725..e76fe67b 100644 --- a/react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx +++ b/react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx @@ -31,9 +31,10 @@ type BasicInfoProps = { className?: string; isInstance?: boolean; runStatus?: NodeStatus; + finishTime?: Date; }; -function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfoProps) { +function BasicInfo({ info, className, runStatus, finishTime, isInstance = false }: BasicInfoProps) { const getResourceDescription = useComputingResource()[1]; const basicDatas: BasicInfoData[] = useMemo(() => { if (!info) { @@ -218,7 +219,7 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo }, { label: '执行时长', - value: elapsedTime(info.create_time, runStatus.finishedAt), + value: elapsedTime(info.create_time, finishTime), ellipsis: true, }, { @@ -245,7 +246,7 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo ellipsis: true, }, ]; - }, [runStatus, info]); + }, [runStatus, info, finishTime]); return (
diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index 44489ea7..4ffb085a 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -35,6 +35,8 @@ function AutoMLInstance() { const params = useParams(); const instanceId = safeInvoke(Number)(params.id); const evtSourceRef = useRef(null); + const [currentTime, setCurrentTime] = useState(); + const finish_time = workflowStatus?.finishedAt; useEffect(() => { if (instanceId) { @@ -46,6 +48,20 @@ function AutoMLInstance() { // eslint-disable-next-line react-hooks/exhaustive-deps }, [instanceId]); + // 定时刷新耗时 + useEffect(() => { + if (finish_time) { + setCurrentTime(new Date(finish_time)); + } else { + const timer = setInterval(() => { + setCurrentTime(new Date()); + }, 1000); + return () => { + clearInterval(timer); + }; + } + }, [finish_time]); + // 获取实验实例详情 const getExperimentInsInfo = async (isStatusDetermined: boolean) => { const [res] = await to(getExperimentInsReq(instanceId)); @@ -156,6 +172,7 @@ function AutoMLInstance() { className={styles['auto-ml-instance__basic']} info={autoMLInfo} runStatus={workflowStatus} + finishTime={currentTime} isInstance /> ), diff --git a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx index 98a1f4ba..e31c7ecb 100644 --- a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx +++ b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx @@ -40,9 +40,16 @@ type AutoMLBasicProps = { className?: string; isInstance?: boolean; runStatus?: NodeStatus; + finishTime?: Date; }; -function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLBasicProps) { +function AutoMLBasic({ + info, + className, + runStatus, + finishTime, + isInstance = false, +}: AutoMLBasicProps) { const getResourceDescription = useComputingResource()[1]; const basicDatas: BasicInfoData[] = useMemo(() => { if (!info) { @@ -296,7 +303,7 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB }, { label: '执行时长', - value: elapsedTime(info.create_time, runStatus.finishedAt), + value: elapsedTime(info.create_time, finishTime), }, { label: '状态', @@ -321,7 +328,7 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB ), }, ]; - }, [runStatus, info]); + }, [runStatus, info, finishTime]); return (
diff --git a/react-ui/src/pages/Experiment/Info/index.jsx b/react-ui/src/pages/Experiment/Info/index.jsx index 7ecaf4ee..d7d7b16b 100644 --- a/react-ui/src/pages/Experiment/Info/index.jsx +++ b/react-ui/src/pages/Experiment/Info/index.jsx @@ -27,11 +27,12 @@ function ExperimentText() { const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false); const [propsDrawerOpen, openPropsDrawer, closePropsDrawer, propsDrawerOpenRef] = useVisible(false); - const [currentDate, setCurrentDate] = useState(); + const [currentTime, setCurrentTime] = useState(); const navigate = useNavigate(); const evtSourceRef = useRef(); const width = 110; const height = 36; + const finish_time = experimentIns?.finish_time useEffect(() => { initGraph(); @@ -62,16 +63,17 @@ function ExperimentText() { // 定时刷新耗时 useEffect(() => { - if (experimentIns && !experimentIns.finish_time) { + if (finish_time) { + setCurrentTime(new Date(finish_time)); + } else { const timer = setInterval(() => { - setCurrentDate(new Date()); - console.log('定时刷新'); + setCurrentTime(new Date()); }, 1000); return () => { clearInterval(timer); }; } - }, [experimentIns]); + }, [finish_time]); // 获取流水线模版 const getWorkflow = async () => { @@ -100,7 +102,6 @@ function ExperimentText() { if (res && res.data && workflowRef.current) { setExperimentIns(res.data); const { status, nodes_status, argo_ins_ns, argo_ins_name, finish_time } = res.data; - setCurrentDate(new Date(finish_time)); const workflowData = workflowRef.current; const experimentStatusObjs = parseJsonText(nodes_status); workflowData.nodes.forEach((item) => { @@ -489,7 +490,7 @@ function ExperimentText() {
执行时长： - {elapsedTime(experimentIns?.create_time, experimentIns?.finish_time)} + {elapsedTime(experimentIns?.create_time, currentTime)}
状态： diff --git a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx index bcb3af1e..a74690ac 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx @@ -41,15 +41,17 @@ const ExperimentDrawer = ({ instanceNodeStartTime, instanceNodeEndTime, }: ExperimentDrawerProps) => { - const [currentDate, setCurrentDate] = useState( + const [currentTime, setCurrentTime] = useState( instanceNodeEndTime ? new Date(instanceNodeEndTime) : new Date(), ); // 定时刷新耗时 useEffect(() => { - if (!instanceNodeEndTime) { + if (instanceNodeEndTime) { + setCurrentTime(new Date(instanceNodeEndTime)); + } else { const timer = setInterval(() => { - setCurrentDate(new Date()); + setCurrentTime(new Date()); }, 1000); return () => { clearInterval(timer); @@ -158,7 +160,7 @@ const ExperimentDrawer = ({
耗时： - {elapsedTime(instanceNodeStartTime, currentDate)} + {elapsedTime(instanceNodeStartTime, currentTime)}
(null); + const [currentTime, setCurrentTime] = useState(); + const finish_time = workflowStatus?.finishedAt; useEffect(() => { if (instanceId) { @@ -46,6 +48,20 @@ function HyperParameterInstance() { // eslint-disable-next-line react-hooks/exhaustive-deps }, [instanceId]); + // 定时刷新耗时 + useEffect(() => { + if (finish_time) { + setCurrentTime(new Date(finish_time)); + } else { + const timer = setInterval(() => { + setCurrentTime(new Date()); + }, 1000); + return () => { + clearInterval(timer); + }; + } + }, [finish_time]); + // 获取实验实例详情 const getExperimentInsInfo = async (isStatusDetermined: boolean) => { const [res] = await to(getRayInsReq(instanceId)); @@ -168,6 +184,7 @@ function HyperParameterInstance() { className={styles['hyper-parameter-instance__basic']} info={experimentInfo} runStatus={workflowStatus} + finishTime={currentTime} isInstance /> ), diff --git a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx index 89487cb6..e62bc6ff 100644 --- a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx @@ -33,12 +33,14 @@ type HyperParameterBasicProps = { className?: string; isInstance?: boolean; runStatus?: NodeStatus; + finishTime?: Date; }; function HyperParameterBasic({ info, className, runStatus, + finishTime, isInstance = false, }: HyperParameterBasicProps) { const getResourceDescription = useComputingResource()[1]; @@ -155,7 +157,7 @@ function HyperParameterBasic({ }, { label: '执行时长', - value: elapsedTime(info.create_time, runStatus.finishedAt), + value: elapsedTime(info.create_time, finishTime), ellipsis: true, }, { @@ -182,7 +184,7 @@ function HyperParameterBasic({ ellipsis: true, }, ]; - }, [runStatus, info]); + }, [runStatus, info, finishTime]); return (
diff --git a/react-ui/src/utils/index.ts b/react-ui/src/utils/index.ts index 3113c8ea..995f3501 100644 --- a/react-ui/src/utils/index.ts +++ b/react-ui/src/utils/index.ts @@ -6,6 +6,7 @@ import { PageEnum } from '@/enums/pagesEnums'; import G6 from '@antv/g6'; +import { number } from 'echarts'; /** * 生成 8 位随机数 @@ -346,3 +347,13 @@ export const trimCharacter = (str: string, ch: string): string => { export const convertEmptyStringToUndefined = (value?: string): string | undefined => { return value === '' ? undefined : value; }; + + +export const formatNumber = (value?: number | null, toFixed?: number) : number | string => { + if (typeof value !== "number") { + return '--' + } + + return toFixed ? Number(value).toFixed(toFixed) : value +} +