diff --git a/react-ui/src/pages/Experiment/components/LogGroup/index.less b/react-ui/src/pages/Experiment/components/LogGroup/index.less index ede8b0cf..2962a2c6 100644 --- a/react-ui/src/pages/Experiment/components/LogGroup/index.less +++ b/react-ui/src/pages/Experiment/components/LogGroup/index.less @@ -21,8 +21,13 @@ color: white; font-size: 14px; white-space: pre-line; + text-align: left; word-break: break-all; background: #19253b; + + &--empty { + text-align: center; + } } &__more-button { diff --git a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx index 00cea44b..38b98af8 100644 --- a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx +++ b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx @@ -10,6 +10,7 @@ import { ExperimentLog } from '@/pages/Experiment/training/props'; import { getExperimentPodsLog } from '@/services/experiment/index.js'; import { DoubleRightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons'; import { Button } from 'antd'; +import classNames from 'classnames'; import { useEffect, useState } from 'react'; import styles from './index.less'; @@ -22,6 +23,7 @@ type Log = { log_content: string; // 日志内容 }; +// 滚动到底部 const scrollToBottom = (smooth: boolean = true) => { const element = document.getElementsByClassName('ant-tabs-content-holder')?.[0]; if (element) { @@ -46,6 +48,8 @@ function LogGroup({ const [collapse, setCollapse] = useState(true); const [logList, setLogList, logListRef] = useStateRef([]); const [completed, setCompleted] = useState(false); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [isMouseDown, setIsMouseDown, isMouseDownRef] = useStateRef(false); useEffect(() => { scrollToBottom(false); @@ -59,6 +63,24 @@ function LogGroup({ } }, []); + useEffect(() => { + const mouseDown = () => { + setIsMouseDown(true); + }; + + const mouseUp = () => { + setIsMouseDown(false); + }; + + document.addEventListener('mousedown', mouseDown); + document.addEventListener('mouseup', mouseUp); + + return () => { + document.removeEventListener('mousedown', mouseDown); + document.removeEventListener('mouseup', mouseUp); + }; + }, []); + // 请求日志 const requestExperimentPodsLog = async () => { const list = logListRef.current; @@ -69,11 +91,14 @@ function LogGroup({ }; const res = await getExperimentPodsLog(params); const { log_detail } = res.data; - if (log_detail && log_detail.log_content) { + if (log_detail) { setLogList((oldList) => oldList.concat(log_detail)); - setTimeout(() => { - scrollToBottom(); - }, 100); + + if (!isMouseDownRef.current && log_detail.log_content) { + setTimeout(() => { + scrollToBottom(); + }, 100); + } } else { setCompleted(true); } @@ -115,7 +140,13 @@ function LogGroup({ )} {showLog && ( -
{logText ? logText : '暂无日志'}
+
+ {logText ? logText : '暂无日志'} +
)}
{showMoreBtn && ( diff --git a/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.less b/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.less index 743970b9..579fa7c3 100644 --- a/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.less +++ b/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.less @@ -8,15 +8,15 @@ font-size: 15px; &--running { - color: #6ac21d; + color: @success-color; } &--failed { - color: #df6d6d; + color: @error-color; } } &__icon { width: 14px; - color: #6ac21d; + color: @success-color; cursor: pointer; & + & { diff --git a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less index 54e164bf..a2b0ded5 100644 --- a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less +++ b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less @@ -11,8 +11,8 @@ margin-bottom: 15px; &_label { - width: 120px; - color: #1d1d20; + width: 180px; + color: @text-color; font-size: 15px; } &_value { @@ -20,8 +20,8 @@ width: 100px; margin-left: 15px; padding: 10px 20px; - color: #1d1d20; - font-size: 15px; + color: @text-color; + font-size: @font-size; line-height: 20px; background: #f6f6f6; border: 1px solid #e0e0e1; diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index a35591a1..aa6349d8 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -84,7 +84,6 @@ function Experiment() { // 获取实验实例 const getQueryByExperiment = (val) => { getQueryByExperimentId(val).then((ret) => { - console.log(val); setExpandedRowKeys(val); if (ret && ret.data && ret.data.length > 0) { try { @@ -162,7 +161,6 @@ function Experiment() { }; const expandChange = (e, record) => { clearExperimentInTimers(); - console.log(e, record); if (record.id === expandedRowKeys) { setExpandedRowKeys(null); } else { @@ -238,7 +236,6 @@ function Experiment() { }; // 当前页面切换 const paginationChange = async (current, size) => { - console.log('page', current, size); pageOption.current = { page: current, size: size, diff --git a/react-ui/src/pages/Experiment/status.ts b/react-ui/src/pages/Experiment/status.ts index 71999346..b9c45af6 100644 --- a/react-ui/src/pages/Experiment/status.ts +++ b/react-ui/src/pages/Experiment/status.ts @@ -1,3 +1,5 @@ +import themes from '@/styles/theme.less'; + export interface StatusInfo { label: string; color: string; @@ -18,42 +20,42 @@ export enum ExperimentStatus { export const experimentStatusInfo: Record = { Running: { label: '运行中', - color: '#1664ff', + color: themes.primaryColor, icon: '/assets/images/running-icon.png', }, Succeeded: { label: '成功', - color: '#63a728', + color: themes.successColor, icon: '/assets/images/success-icon.png', }, Pending: { label: '等待中', - color: '#f981eb', + color: themes.pendingColor, icon: '/assets/images/pending-icon.png', }, Failed: { label: '失败', - color: '#c73131', + color: themes.errorColor, icon: '/assets/images/fail-icon.png', }, Error: { label: '错误', - color: '#c73131', + color: themes.errorColor, icon: '/assets/images/fail-icon.png', }, Terminated: { label: '终止', - color: '#8a8a8a', + color: themes.abortColor, icon: '/assets/images/omitted-icon.png', }, Skipped: { label: '未执行', - color: '#8a8a8a', + color: themes.abortColor, icon: '/assets/images/omitted-icon.png', }, Omitted: { label: '未执行', - color: '#8a8a8a', + color: themes.abortColor, icon: '/assets/images/omitted-icon.png', }, }; diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less index 5d5ebccd..f1a7b2b2 100644 --- a/react-ui/src/styles/theme.less +++ b/react-ui/src/styles/theme.less @@ -11,10 +11,11 @@ @background-color: #f9fafb; // 页面背景颜色 @text-color: #1d1d20; @text-color-secondary: #575757; -@success-color: #1ace62; +@success-color: #6ac21d; @error-color: #c73131; @warning-color: #f98e1b; @abort-color: #8a8a8a; +@pending-color: #ecb934; @border-color: rgba(22, 100, 255, 0.3); @border-color-secondary: rgba(22, 100, 255, 0.1); @@ -78,4 +79,6 @@ fontSizeInput: @font-size-input; fontSizeInputLg: @font-size-input-lg; siderBGColor: @sider-background-color; + abortColor: @abort-color; + pendingColor: @pending-color; }