diff --git a/react-ui/src/components/InfoGroup/index.less b/react-ui/src/components/InfoGroup/index.less new file mode 100644 index 00000000..cf05c8b2 --- /dev/null +++ b/react-ui/src/components/InfoGroup/index.less @@ -0,0 +1,14 @@ +.kf-info-group { + width: 100%; + + &__content { + padding: 20px @content-padding; + background-color: white; + border: 1px solid @border-color-base; + border-radius: 0 0 4px 4px; + + &&--scroll { + padding: 0; + } + } +} diff --git a/react-ui/src/components/InfoGroup/index.tsx b/react-ui/src/components/InfoGroup/index.tsx new file mode 100644 index 00000000..4e3359c0 --- /dev/null +++ b/react-ui/src/components/InfoGroup/index.tsx @@ -0,0 +1,28 @@ +import classNames from 'classnames'; +import InfoGroupTitle from '../InfoGroupTitle'; +import './index.less'; + +type InfoGroupProps = { + title: string; + contentScroll?: boolean; // 内容是否需要滚动,如果可以滚动,则取消 padding + className?: string; + style?: React.CSSProperties; + children?: React.ReactNode; +}; + +function InfoGroup({ title, contentScroll = false, className, style, children }: InfoGroupProps) { + return ( +
+ +
+ {children} +
+
+ ); +} + +export default InfoGroup; diff --git a/react-ui/src/pages/AutoML/components/ConfigTitle/index.less b/react-ui/src/components/InfoGroupTitle/index.less similarity index 95% rename from react-ui/src/pages/AutoML/components/ConfigTitle/index.less rename to react-ui/src/components/InfoGroupTitle/index.less index 5b894c43..ee3c9011 100644 --- a/react-ui/src/pages/AutoML/components/ConfigTitle/index.less +++ b/react-ui/src/components/InfoGroupTitle/index.less @@ -1,4 +1,4 @@ -.config-title { +.kf-info-group-title { width: 100%; height: 56px; padding-left: @content-padding; @@ -10,7 +10,7 @@ border: 1px solid #e8effb; border-radius: 4px 4px 0 0; - &__img { + &__image { width: 16px; height: 16px; margin-right: 10px; diff --git a/react-ui/src/components/InfoGroupTitle/index.tsx b/react-ui/src/components/InfoGroupTitle/index.tsx new file mode 100644 index 00000000..7eec2ab8 --- /dev/null +++ b/react-ui/src/components/InfoGroupTitle/index.tsx @@ -0,0 +1,25 @@ +import { Flex } from 'antd'; +import classNames from 'classnames'; +import './index.less'; + +type InfoGroupTitleProps = { + title: string; + className?: string; + style?: React.CSSProperties; +}; + +function InfoGroupTitle({ title, style, className }: InfoGroupTitleProps) { + return ( + + + {title} + + ); +} + +export default InfoGroupTitle; diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index 7b416de1..b146b57f 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -33,7 +33,7 @@ function AutoMLInstance() { useEffect(() => { if (instanceId) { - getExperimentInsInfo(); + getExperimentInsInfo(false); } return () => { closeSSE(); @@ -41,7 +41,7 @@ function AutoMLInstance() { }, []); // 获取实验实例详情 - const getExperimentInsInfo = async () => { + const getExperimentInsInfo = async (isStatusDetermined: boolean) => { const [res] = await to(getExperimentInsReq(instanceId)); if (res && res.data) { const info = res.data as AutoMLInstanceData; @@ -51,6 +51,14 @@ function AutoMLInstance() { if (paramJson) { setAutoMLInfo(paramJson); } + + // 这个接口返回的状态有延时,SSE 返回的状态是最新的 + // SSE 调用时,不需要解析 node_status, 也不要重新建立 SSE + if (!isStatusDetermined) { + setInstanceInfo(info); + return; + } + // 进行节点状态 const nodeStatusJson = parseJsonText(node_status); if (nodeStatusJson) { @@ -103,7 +111,7 @@ function AutoMLInstance() { statusData.phase !== ExperimentStatus.Running ) { closeSSE(); - getExperimentInsInfo(); + getExperimentInsInfo(true); } } } diff --git a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx index b6f214ae..4b74db21 100644 --- a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx +++ b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx @@ -283,7 +283,6 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB title="运行信息" data={instanceDatas} labelWidth={70} - threeColumn style={{ marginBottom: '20px' }} /> ) : ( @@ -291,7 +290,6 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB title="基本信息" data={basicDatas} labelWidth={70} - threeColumn style={{ marginBottom: '20px' }} /> )} @@ -299,10 +297,9 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB title="配置信息" data={configDatas} labelWidth={150} - threeColumn style={{ marginBottom: '20px' }} /> - + ); } diff --git a/react-ui/src/pages/AutoML/components/ConfigInfo/index.less b/react-ui/src/pages/AutoML/components/ConfigInfo/index.less index 7722651f..33fb3314 100644 --- a/react-ui/src/pages/AutoML/components/ConfigInfo/index.less +++ b/react-ui/src/pages/AutoML/components/ConfigInfo/index.less @@ -1,20 +1,10 @@ .config-info { - flex: 1; - min-width: 0; - - &__content { - padding: 20px; - padding: 20px @content-padding; - background-color: white; - border: 1px solid @border-color-base; - border-radius: 0 0 4px 4px; - } - :global { .kf-basic-info { width: 100%; &__item { + width: calc((100% - 80px) / 3); &__label { font-size: @font-size; text-align: left; @@ -27,14 +17,4 @@ } } } - - &--three-column { - :global { - .kf-basic-info { - &__item { - width: calc((100% - 80px) / 3); - } - } - } - } } diff --git a/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx b/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx index 2fbb6825..10e042e4 100644 --- a/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx +++ b/react-ui/src/pages/AutoML/components/ConfigInfo/index.tsx @@ -1,7 +1,6 @@ import BasicInfo, { type BasicInfoData } from '@/components/BasicInfo'; +import InfoGroup from '@/components/InfoGroup'; import classNames from 'classnames'; -import { useEffect } from 'react'; -import ConfigTitle from '../ConfigTitle'; import styles from './index.less'; export * from '@/components/BasicInfo/format'; export type { BasicInfoData }; @@ -9,39 +8,18 @@ export type { BasicInfoData }; type ConfigInfoProps = { title: string; data: BasicInfoData[]; + labelWidth: number; className?: string; style?: React.CSSProperties; - children?: React.ReactNode; - labelWidth: number; - threeColumn?: boolean; }; -function ConfigInfo({ - title, - data, - className, - style, - children, - labelWidth, - threeColumn = false, -}: ConfigInfoProps) { - useEffect(() => {}, []); - +function ConfigInfo({ title, data, labelWidth, className, style }: ConfigInfoProps) { return ( -
- +
- {children}
-
+ ); } diff --git a/react-ui/src/pages/AutoML/components/ConfigTitle/index.tsx b/react-ui/src/pages/AutoML/components/ConfigTitle/index.tsx deleted file mode 100644 index 546eca88..00000000 --- a/react-ui/src/pages/AutoML/components/ConfigTitle/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Flex } from 'antd'; -import styles from './index.less'; - -type ConfigTitleProps = { - title: string; -}; - -function ConfigTitle({ title }: ConfigTitleProps) { - return ( - - - {title} - - ); -} - -export default ConfigTitle; diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less index 6d88dea3..0257451b 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less @@ -9,24 +9,18 @@ &__text { width: 100%; height: 460px; - margin-bottom: 16px; padding: 20px @content-padding; overflow: auto; white-space: pre-wrap; - border: 1px solid @border-color-base; - border-radius: 0 0 4px 4px; } - &__image-container { + &__images { display: flex; align-items: flex-start; width: 100%; - padding: 20px @content-padding; overflow-x: auto; - border: 1px solid @border-color-base; - border-radius: 0 0 4px 4px; - &__image { + &__item { height: 248px; margin-right: 20px; border: 1px solid rgba(96, 107, 122, 0.3); diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx index 933f6fbd..fce2e5fb 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx @@ -1,7 +1,7 @@ +import InfoGroup from '@/components/InfoGroup'; import { getFileReq } from '@/services/file'; import { to } from '@/utils/promise'; import { useEffect, useMemo, useState } from 'react'; -import ConfigTitle from '../ConfigTitle'; import styles from './index.less'; type ExperimentResultProps = { @@ -35,20 +35,22 @@ function ExperimentResult({ fileUrl, imageUrl }: ExperimentResultProps) { return (
- -
{result}
- -
- {images.map((item, index) => ( - - ))} -
+ +
{result}
+
+ +
+ {images.map((item, index) => ( + + ))} +
+
); }