fix: 终止实验时，详情显示失败

react-ui/src/pages/ActiveLearn/Instance/index.tsx

@@ -153,6 +153,7 @@ function ActiveLearnInstance() {
           className={styles['active-learn-instance__basic']}
           info={experimentInfo}
           runStatus={workflowStatus}
+          instanceStatus={instanceInfo?.status}
           isInstance
         />
       ),

react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx

@@ -1,6 +1,5 @@
 import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
-import RunDuration from '@/components/RunDuration';
-import { AutoMLTaskType, autoMLTaskTypeOptions } from '@/enums';
+import { AutoMLTaskType, autoMLTaskTypeOptions, ExperimentStatus } from '@/enums';
 import { useComputingResource } from '@/hooks/useComputingResource';
 import {
   classifierAlgorithms,
@@ -10,7 +9,7 @@ import {
   regressorAlgorithms,
 } from '@/pages/ActiveLearn/components/CreateForm/utils';
 import { ActiveLearnData } from '@/pages/ActiveLearn/types';
-import { experimentStatusInfo } from '@/pages/Experiment/status';
+import ExperimentRunBasic from '@/pages/AutoML/components/ExperimentRunBasic';
 import { type NodeStatus } from '@/types';
 import {
   formatBoolean,
@@ -21,7 +20,6 @@ import {
   formatMirror,
   formatModel,
 } from '@/utils/format';
-import { Flex } from 'antd';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import styles from './index.less';
@@ -31,9 +29,16 @@ type BasicInfoProps = {
   className?: string;
   isInstance?: boolean;
   runStatus?: NodeStatus;
+  instanceStatus?: ExperimentStatus;
 };
 
-function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfoProps) {
+function BasicInfo({
+  info,
+  className,
+  runStatus,
+  instanceStatus,
+  isInstance = false,
+}: BasicInfoProps) {
   const getResourceDescription = useComputingResource()[1];
   const basicDatas: BasicInfoData[] = useMemo(() => {
     if (!info) {
@@ -205,53 +210,13 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
     ];
   }, [info, getResourceDescription]);
 
-  const instanceDatas = useMemo(() => {
-    if (!info || !runStatus) {
-      return [];
-    }
-
-    return [
-      {
-        label: '启动时间',
-        value: formatDate(info.create_time),
-      },
-      {
-        label: '执行时长',
-        value: <RunDuration createTime={info.create_time} finishTime={runStatus.finishedAt} />,
-      },
-      {
-        label: '状态',
-        value: (
-          <Flex align="center">
-            <img
-              style={{ width: '17px', marginRight: '7px' }}
-              src={experimentStatusInfo[runStatus.phase]?.icon}
-              draggable={false}
-              alt=""
-            />
-            <div
-              style={{
-                color: experimentStatusInfo[runStatus?.phase]?.color,
-                fontSize: '15px',
-                lineHeight: 1.6,
-              }}
-            >
-              {experimentStatusInfo[runStatus?.phase]?.label}
-            </div>
-          </Flex>
-        ),
-      },
-    ];
-  }, [runStatus, info]);
-
   return (
     <div className={classNames(styles['active-learn-basic'], className)}>
       {isInstance && runStatus && (
-        <ConfigInfo
-          title="运行信息"
-          datas={instanceDatas}
-          labelWidth={70}
-          style={{ marginBottom: '20px' }}
+        <ExperimentRunBasic
+          create_time={info?.create_time}
+          runStatus={runStatus}
+          instanceStatus={instanceStatus}
         />
       )}
       {!isInstance && (

react-ui/src/pages/AutoML/Instance/index.tsx

@@ -156,6 +156,7 @@ function AutoMLInstance() {
           className={styles['auto-ml-instance__basic']}
           info={autoMLInfo}
           runStatus={workflowStatus}
+          instanceStatus={instanceInfo?.status}
           isInstance
         />
       ),

react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx

@@ -1,20 +1,19 @@
 import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
-import RunDuration from '@/components/RunDuration';
 import {
   AutoMLTaskType,
   AutoMLType,
+  ExperimentStatus,
   autoMLEnsembleClassOptions,
   autoMLTaskTypeOptions,
 } from '@/enums';
 import { useComputingResource } from '@/hooks/useComputingResource';
 import { AutoMLData } from '@/pages/AutoML/types';
-import { experimentStatusInfo } from '@/pages/Experiment/status';
 import { type NodeStatus } from '@/types';
 import { parseJsonText } from '@/utils';
 import { formatBoolean, formatDataset, formatDate, formatEnum } from '@/utils/format';
-import { Flex } from 'antd';
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import ExperimentRunBasic from '../ExperimentRunBasic';
 import styles from './index.less';
 
 // 格式化优化方向
@@ -40,9 +39,16 @@ type AutoMLBasicProps = {
   className?: string;
   isInstance?: boolean;
   runStatus?: NodeStatus;
+  instanceStatus?: ExperimentStatus;
 };
 
-function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLBasicProps) {
+function AutoMLBasic({
+  info,
+  className,
+  runStatus,
+  instanceStatus,
+  isInstance = false,
+}: AutoMLBasicProps) {
   const getResourceDescription = useComputingResource()[1];
   const basicDatas: BasicInfoData[] = useMemo(() => {
     if (!info) {
@@ -284,53 +290,13 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB
     ];
   }, [info]);
 
-  const instanceDatas = useMemo(() => {
-    if (!info || !runStatus) {
-      return [];
-    }
-
-    return [
-      {
-        label: '启动时间',
-        value: formatDate(info.create_time),
-      },
-      {
-        label: '执行时长',
-        value: <RunDuration createTime={info.create_time} finishTime={runStatus.finishedAt} />,
-      },
-      {
-        label: '状态',
-        value: (
-          <Flex align="center">
-            <img
-              style={{ width: '17px', marginRight: '7px' }}
-              src={experimentStatusInfo[runStatus.phase]?.icon}
-              draggable={false}
-              alt=""
-            />
-            <div
-              style={{
-                color: experimentStatusInfo[runStatus?.phase]?.color,
-                fontSize: '15px',
-                lineHeight: 1.6,
-              }}
-            >
-              {experimentStatusInfo[runStatus?.phase]?.label}
-            </div>
-          </Flex>
-        ),
-      },
-    ];
-  }, [runStatus, info]);
-
   return (
     <div className={classNames(styles['auto-ml-basic'], className)}>
       {isInstance && runStatus && (
-        <ConfigInfo
-          title="运行信息"
-          datas={instanceDatas}
-          labelWidth={70}
-          style={{ marginBottom: '20px' }}
+        <ExperimentRunBasic
+          create_time={info?.create_time}
+          runStatus={runStatus}
+          instanceStatus={instanceStatus}
         />
       )}
       {!isInstance && (

react-ui/src/pages/AutoML/components/ExperimentList/index.tsx

@@ -8,6 +8,7 @@ import KFIcon from '@/components/KFIcon';
 import PageTitle from '@/components/PageTitle';
 import { ExperimentStatus, autoMLTypeOptions } from '@/enums';
 import { useCacheState } from '@/hooks/useCacheState';
+import { useServerTime } from '@/hooks/useServerTime';
 import { AutoMLData } from '@/pages/AutoML/types';
 import { experimentStatusInfo } from '@/pages/Experiment/status';
 import themes from '@/styles/theme.less';
@@ -51,6 +52,7 @@ function ExperimentList({ type }: ExperimentListProps) {
   const [experimentInsList, setExperimentInsList] = useState<ExperimentInstanceData[]>([]);
   const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
   const [experimentInsTotal, setExperimentInsTotal] = useState(0);
+  const [now] = useServerTime();
   const [pagination, setPagination] = useState<TablePaginationConfig>(
     cacheState?.pagination ?? {
       current: 1,
@@ -275,6 +277,7 @@ function ExperimentList({ type }: ExperimentListProps) {
           return {
             ...item,
             status: ExperimentStatus.Terminated,
+            finish_time: now().toISOString(),
           };
         }
         return item;

react-ui/src/pages/AutoML/components/ExperimentRunBasic/index.tsx

@@ -0,0 +1,70 @@
+import ConfigInfo from '@/components/ConfigInfo';
+import RunDuration from '@/components/RunDuration';
+import { ExperimentStatus } from '@/enums';
+import { experimentStatusInfo } from '@/pages/Experiment/status';
+import { type NodeStatus } from '@/types';
+import { formatDate } from '@/utils/format';
+import { Flex } from 'antd';
+import { useMemo } from 'react';
+
+type ExperimentRunBasicProps = {
+  create_time?: string;
+  runStatus?: NodeStatus;
+  instanceStatus?: ExperimentStatus;
+};
+
+function ExperimentRunBasic({ create_time, runStatus, instanceStatus }: ExperimentRunBasicProps) {
+  const instanceDatas = useMemo(() => {
+    if (!runStatus) {
+      return [];
+    }
+
+    const status =
+      instanceStatus === ExperimentStatus.Terminated ? instanceStatus : runStatus.phase;
+    const statusInfo = experimentStatusInfo[status];
+
+    return [
+      {
+        label: '启动时间',
+        value: formatDate(create_time),
+      },
+      {
+        label: '执行时长',
+        value: <RunDuration createTime={create_time} finishTime={runStatus.finishedAt} />,
+      },
+      {
+        label: '状态',
+        value: (
+          <Flex align="center">
+            <img
+              style={{ width: '17px', marginRight: '7px' }}
+              src={statusInfo?.icon}
+              draggable={false}
+              alt=""
+            />
+            <div
+              style={{
+                color: statusInfo?.color,
+                fontSize: '15px',
+                lineHeight: 1.6,
+              }}
+            >
+              {statusInfo?.label}
+            </div>
+          </Flex>
+        ),
+      },
+    ];
+  }, [runStatus, create_time, instanceStatus]);
+
+  return (
+    <ConfigInfo
+      title="运行信息"
+      datas={instanceDatas}
+      labelWidth={70}
+      style={{ marginBottom: '20px' }}
+    />
+  );
+}
+
+export default ExperimentRunBasic;

react-ui/src/pages/Dataset/components/ResourceItem/index.less

@@ -55,9 +55,7 @@
   }
   &__time {
     display: flex;
-    flex: 0 1 content;
     align-items: center;
-    width: 100%;
     color: #808080;
     font-size: 13px;
   }

react-ui/src/pages/Experiment/index.jsx

@@ -28,6 +28,7 @@ import AddExperimentModal from './components/AddExperimentModal';
 import ExperimentInstanceList from './components/ExperimentInstanceList';
 import styles from './index.less';
 import { experimentStatusInfo } from './status';
+import { useServerTime } from '@/hooks/useServerTime';
 
 // 定时器
 const timerIds = new Map();
@@ -47,6 +48,7 @@ function Experiment() {
   const [cacheState, setCacheState] = useCacheState();
   const [searchText, setSearchText] = useState(cacheState?.searchText);
   const [inputText, setInputText] = useState(cacheState?.searchText);
+  const [now] = useServerTime();
   const [pagination, setPagination] = useState(
     cacheState?.pagination ?? {
       current: 1,
@@ -384,6 +386,7 @@ function Experiment() {
           return {
             ...item,
             status: ExperimentStatus.Terminated,
+            finish_time: now().toISOString(),
           };
         }
         return item;

react-ui/src/pages/HyperParameter/Instance/index.tsx

@@ -168,6 +168,7 @@ function HyperParameterInstance() {
           className={styles['hyper-parameter-instance__basic']}
           info={experimentInfo}
           runStatus={workflowStatus}
+          instanceStatus={instanceInfo?.status}
           isInstance
         />
       ),

react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx

@@ -1,7 +1,8 @@
 import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
 import RunDuration from '@/components/RunDuration';
-import { hyperParameterOptimizedMode } from '@/enums';
+import { ExperimentStatus, hyperParameterOptimizedMode } from '@/enums';
 import { useComputingResource } from '@/hooks/useComputingResource';
+import ExperimentRunBasic from '@/pages/AutoML/components/ExperimentRunBasic';
 import { experimentStatusInfo } from '@/pages/Experiment/status';
 import {
   schedulerAlgorithms,
@@ -33,12 +34,14 @@ type HyperParameterBasicProps = {
   className?: string;
   isInstance?: boolean;
   runStatus?: NodeStatus;
+  instanceStatus?: ExperimentStatus;
 };
 
 function HyperParameterBasic({
   info,
   className,
   runStatus,
+  instanceStatus,
   isInstance = false,
 }: HyperParameterBasicProps) {
   const getResourceDescription = useComputingResource()[1];
@@ -187,11 +190,10 @@ function HyperParameterBasic({
   return (
     <div className={classNames(styles['hyper-parameter-basic'], className)}>
       {isInstance && runStatus && (
-        <ConfigInfo
-          title="运行信息"
-          datas={instanceDatas}
-          labelWidth={70}
-          style={{ marginBottom: '20px' }}
+        <ExperimentRunBasic
+          create_time={info?.create_time}
+          runStatus={runStatus}
+          instanceStatus={instanceStatus}
         />
       )}
       {!isInstance && (