From cbd6d916531dd3d35f77385e78690b8ce90adffa Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Tue, 3 Dec 2024 09:12:33 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E8=87=AA=E5=8A=A8=E6=9C=BA=E5=99=A8?= =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E5=AE=8C=E6=88=90=E6=97=B6=EF=BC=8C=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E8=AF=A6=E6=83=85=E5=8F=88=E8=BF=94=E5=9B=9ERunning?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/components/InfoGroup/index.less | 14 ++++++++ react-ui/src/components/InfoGroup/index.tsx | 28 ++++++++++++++++ .../InfoGroupTitle}/index.less | 4 +-- .../src/components/InfoGroupTitle/index.tsx | 25 +++++++++++++++ react-ui/src/pages/AutoML/Instance/index.tsx | 14 ++++++-- .../AutoML/components/AutoMLBasic/index.tsx | 5 +-- .../AutoML/components/ConfigInfo/index.less | 22 +------------ .../AutoML/components/ConfigInfo/index.tsx | 32 +++---------------- .../AutoML/components/ConfigTitle/index.tsx | 22 ------------- .../components/ExperimentResult/index.less | 10 ++---- .../components/ExperimentResult/index.tsx | 32 ++++++++++--------- 11 files changed, 106 insertions(+), 102 deletions(-) create mode 100644 react-ui/src/components/InfoGroup/index.less create mode 100644 react-ui/src/components/InfoGroup/index.tsx rename react-ui/src/{pages/AutoML/components/ConfigTitle => components/InfoGroupTitle}/index.less (95%) create mode 100644 react-ui/src/components/InfoGroupTitle/index.tsx delete mode 100644 react-ui/src/pages/AutoML/components/ConfigTitle/index.tsx 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) => ( + + ))} +
+
); } From f33aafd786c5306d9bf0879bb194ee4a05293926 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Tue, 3 Dec 2024 09:21:10 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E8=87=AA=E5=8A=A8=E6=9C=BA=E5=99=A8?= =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E5=AE=8C=E6=88=90=E6=97=B6=EF=BC=8C=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E8=AF=A6=E6=83=85=E5=8F=88=E8=BF=94=E5=9B=9ERunning?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/pages/AutoML/Instance/index.tsx | 2 +- react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index b146b57f..fd64d079 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -54,7 +54,7 @@ function AutoMLInstance() { // 这个接口返回的状态有延时，SSE 返回的状态是最新的 // SSE 调用时，不需要解析 node_status， 也不要重新建立 SSE - if (!isStatusDetermined) { + if (isStatusDetermined) { setInstanceInfo(info); return; } diff --git a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx index 4b74db21..854c6035 100644 --- a/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx +++ b/react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx @@ -278,14 +278,15 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB return (
- {isInstance && runStatus ? ( + {isInstance && runStatus && ( - ) : ( + )} + {!isInstance && ( Date: Tue, 3 Dec 2024 14:22:40 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E8=87=AA=E5=8A=A8=E6=9C=BA?= =?UTF-8?q?=E5=99=A8=E5=AD=A6=E4=B9=A0=E5=AE=9E=E9=AA=8C=E7=BB=93=E6=9E=9C?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A8=A1=E5=9E=8B=E4=B8=8B=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/iconfont/iconfont.js | 2 +- react-ui/src/pages/AutoML/Instance/index.tsx | 13 +++-- .../components/ExperimentResult/index.less | 33 ++++++++++--- .../components/ExperimentResult/index.tsx | 49 +++++++++++++++---- .../Experiment/components/LogGroup/index.tsx | 4 +- 5 files changed, 79 insertions(+), 22 deletions(-) diff --git a/react-ui/src/iconfont/iconfont.js b/react-ui/src/iconfont/iconfont.js index 7097beaf..d7576e9c 100644 --- a/react-ui/src/iconfont/iconfont.js +++ b/react-ui/src/iconfont/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4511447='',(t=>{var a=(h=(h=document.getElementsByTagName("script"))[h.length-1]).getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var l,z,v,i,o,m=function(a,h){h.parentNode.insertBefore(a,h)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}l=function(){var a,h=document.createElement("div");h.innerHTML=t._iconfont_svg_string_4511447,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(a=document.body).firstChild?m(h,a.firstChild):a.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),l()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(v=l,i=t.document,o=!1,d(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,p())})}function p(){o||(o=!0,v())}function d(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}p()}})(window); \ No newline at end of file +window._iconfont_svg_string_4511447='',(t=>{var a=(h=(h=document.getElementsByTagName("script"))[h.length-1]).getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var l,z,v,i,o,m=function(a,h){h.parentNode.insertBefore(a,h)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}l=function(){var a,h=document.createElement("div");h.innerHTML=t._iconfont_svg_string_4511447,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(a=document.body).firstChild?m(h,a.firstChild):a.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),l()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(v=l,i=t.document,o=!1,d(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,p())})}function p(){o||(o=!0,v())}function d(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}p()}})(window); \ No newline at end of file diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index fd64d079..947ac63d 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -55,7 +55,10 @@ function AutoMLInstance() { // 这个接口返回的状态有延时，SSE 返回的状态是最新的 // SSE 调用时，不需要解析 node_status， 也不要重新建立 SSE if (isStatusDetermined) { - setInstanceInfo(info); + setInstanceInfo((prev) => ({ + ...info, + nodeStatus: prev!.nodeStatus, + })); return; } @@ -101,7 +104,7 @@ function AutoMLInstance() { ) as NodeStatus; if (statusData) { setInstanceInfo((prev) => ({ - ...(prev as AutoMLInstanceData), + ...prev!, nodeStatus: statusData, })); @@ -172,7 +175,11 @@ function AutoMLInstance() { label: '实验结果', icon: , children: ( - + ), }, { diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less index 0257451b..c36da152 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less @@ -6,9 +6,25 @@ background-color: white; border-radius: 10px; + &__download { + display: flex; + align-items: center; + height: 34px; + margin-bottom: 16px; + padding-left: @content-padding; + color: @text-color; + font-size: 13px; + background-color: #f8f8f9; + border-radius: 4px; + + &__btn { + margin-left: 22px; + } + } + &__text { width: 100%; - height: 460px; + height: 420px; padding: 20px @content-padding; overflow: auto; white-space: pre-wrap; @@ -20,14 +36,19 @@ width: 100%; overflow-x: auto; + :global { + .ant-image { + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + } + } + &__item { height: 248px; - margin-right: 20px; border: 1px solid rgba(96, 107, 122, 0.3); - - &:last-child { - margin-right: 0; - } } } } diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx index fce2e5fb..c5522834 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx @@ -1,15 +1,18 @@ import InfoGroup from '@/components/InfoGroup'; +import KFIcon from '@/components/KFIcon'; import { getFileReq } from '@/services/file'; import { to } from '@/utils/promise'; +import { Button, Image } from 'antd'; import { useEffect, useMemo, useState } from 'react'; import styles from './index.less'; type ExperimentResultProps = { fileUrl?: string; imageUrl?: string; + modelPath?: string; }; -function ExperimentResult({ fileUrl, imageUrl }: ExperimentResultProps) { +function ExperimentResult({ fileUrl, imageUrl, modelPath }: ExperimentResultProps) { const [result, setResult] = useState(''); const images = useMemo(() => { @@ -35,20 +38,46 @@ function ExperimentResult({ fileUrl, imageUrl }: ExperimentResultProps) { return (
+ {modelPath && ( +
+ 文件名 + save_model.joblib + +
+ )}
{result}
- {images.map((item, index) => ( - - ))} + + console.log(`current index: ${current}, prev index: ${prev}`), + }} + > + {images.map((item) => ( + + ))} +
diff --git a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx index 75d914f5..1b448930 100644 --- a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx +++ b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx @@ -52,7 +52,7 @@ function LogGroup({ const [_isMouseDown, setIsMouseDown, isMouseDownRef] = useStateRef(false); const preStatusRef = useRef(undefined); const socketRef = useRef(undefined); - const retryRef = useRef(2); // 等待 2 秒，重试 2 次 + const retryRef = useRef(2); // 等待 2 秒，重试 3 次 useEffect(() => { scrollToBottom(false); @@ -147,7 +147,7 @@ function LogGroup({ socket.addEventListener('close', (event) => { console.log('WebSocket is closed:', event); - // 有时候会出现连接失败，重试 2 次 + // 有时候会出现连接失败，重试 3 次 if (event.code !== 1000 && retryRef.current > 0) { retryRef.current -= 1; setTimeout(() => {