chore: 日志优化

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 {

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<Log[]>([]);
   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({
         </div>
       )}
       {showLog && (
-        <div className={styles['log-group__detail']}>{logText ? logText : '暂无日志'}</div>
+        <div
+          className={classNames(styles['log-group__detail'], {
+            [styles['log-group__detail--empty']]: !logText,
+          })}
+        >
+          {logText ? logText : '暂无日志'}
+        </div>
       )}
       <div className={styles['log-group__more-button']}>
         {showMoreBtn && (

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;
 
     & + & {

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;

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,

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<ExperimentStatus, StatusInfo | undefined> = {
   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',
   },
 };

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;
 }