diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx index bd7b1604..d30632e8 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/datasetIntro.jsx @@ -1,4 +1,5 @@ import { getAccessToken } from '@/access'; +import KFIcon from '@/components/KFIcon'; import { addDatasetVersionDetail, deleteDatasetVersion, @@ -7,12 +8,7 @@ import { getDatasetVersionsById, } from '@/services/dataset/index.js'; import { downLoadZip } from '@/utils/downloadfile'; -import { - DeleteOutlined, - DownloadOutlined, - PlusCircleOutlined, - UploadOutlined, -} from '@ant-design/icons'; +import { UploadOutlined } from '@ant-design/icons'; import { Button, Form, Input, Modal, Select, Table, Tabs, Upload, message } from 'antd'; import moment from 'moment'; import { useEffect, useRef, useState } from 'react'; @@ -203,7 +199,7 @@ const Dataset = () => { type="link" size="small" key="download" - icon={} + icon={} onClick={(e) => downloadAlone(e, record)} > 下载 @@ -227,9 +223,9 @@ const Dataset = () => {
{datasetDetailObj.name}
+
数据集 id:{datasetDetailObj.id}
{datasetDetailObj.data_tag || '...'}
{datasetDetailObj.data_type}
- {/*
English
*/}
@@ -257,10 +253,10 @@ const Dataset = () => { options={versionList} /> @@ -269,21 +265,21 @@ const Dataset = () => { style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} > diff --git a/react-ui/src/pages/Dataset/index.less b/react-ui/src/pages/Dataset/index.less index 2ff0b580..abf185b2 100644 --- a/react-ui/src/pages/Dataset/index.less +++ b/react-ui/src/pages/Dataset/index.less @@ -5,9 +5,9 @@ height: 49px; padding: 0 30px; padding-right: 30px; + font-family: 'Alibaba'; background-image: url(/assets/images/pipeline-back.png); background-size: 100% 100%; - font-family: 'Alibaba'; } .datasetIntroTopBox { display: flex; @@ -36,10 +36,10 @@ padding: 20px 30px; color: #1d1d20; font-size: 16px; + font-family: alibaba; background: #ffffff; border-radius: 10px; box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09); - font-family: alibaba; .dataButtonList { display: flex; align-items: center; @@ -70,7 +70,7 @@ .datasetBox { font-family: 'Alibaba'; background: #f9fafb; - + :global { .ant-tabs-top > .ant-tabs-nav { margin: 0; @@ -89,20 +89,8 @@ } .plusButton { margin: 0 18px 0 20px; - color: #1d1d20; - font-size: 14px; - font-family: 'Alibaba'; - background: rgba(22, 100, 255, 0.06); - border: 1px solid; - border-color: rgba(22, 100, 255, 0.11); - border-radius: 4px; -} -.plusButton:hover { - color: #1d1d20 !important; - background: rgba(22, 100, 255, 0.06) !important; - border: 1px solid !important; - border-color: rgba(22, 100, 255, 0.11) !important; } + .datasetCneterBox { display: flex; justify-content: space-between; @@ -119,8 +107,8 @@ height: 100%; margin-right: 10px; padding-top: 15px; - background: #ffffff; font-family: 'Alibaba'; + background: #ffffff; box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); .custTab { display: flex; @@ -233,63 +221,66 @@ .dataItem { position: relative; width: 23.5%; - height:164px; - background:#ffffff; - border:1px solid; - border-color:#eaeaea; - border-radius:4px; + height: 164px; margin: 0 20px 25px 0; + background: #ffffff; + border: 1px solid; + border-color: #eaeaea; + border-radius: 4px; cursor: pointer; .itemText { position: absolute; top: 20px; left: 20px; - background: linear-gradient(to right ,rgba(22, 100, 255,0.6) 0,rgba(22, 100, 255,0) 100%); height: 6px; - line-height: 0px; - color:#1d1d20; - font-size:16px; + color: #1d1d20; + font-size: 16px; font-family: 'Alibaba'; + line-height: 0px; + background: linear-gradient( + to right, + rgba(22, 100, 255, 0.6) 0, + rgba(22, 100, 255, 0) 100% + ); } - .itemDescripition{ + .itemDescripition { position: absolute; top: 57px; left: 20px; + display: -webkit-box; padding-right: 28px; - color:#575757; - font-size:14px; - word-break: break-all; overflow: hidden; - display: -webkit-box; + color: #575757; + font-size: 14px; + word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .itemTime { position: absolute; - display: flex; - align-items: center; bottom: 22px; left: 20px; + display: flex; + align-items: center; color: #808080; font-size: 13px; } .itemIcon { position: absolute; - display: flex; - align-items: center; right: 20px; bottom: 22px; + display: flex; + align-items: center; color: #808080; font-size: 13px; } } - .dataItem:hover{ - border-color: #1664FF; - box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1) - + .dataItem:hover { + border-color: #1664ff; + box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1); } - .dataItem:hover .itemText{ - color: #1664FF; + .dataItem:hover .itemText { + color: #1664ff; } } } @@ -300,9 +291,9 @@ width: 825px; padding: 20px 67px; background-image: url(/assets/images/modal-back.png); - background-repeat:no-repeat; - background-size:100%; + background-repeat: no-repeat; background-position: top center; + background-size: 100%; border-radius: 21px; } .ant-modal-header { diff --git a/react-ui/src/pages/Dataset/publicData.jsx b/react-ui/src/pages/Dataset/publicData.jsx index 298e51f4..32451ad8 100644 --- a/react-ui/src/pages/Dataset/publicData.jsx +++ b/react-ui/src/pages/Dataset/publicData.jsx @@ -3,13 +3,13 @@ import creatByImg from '@/assets/img/creatBy.png'; import { getAssetIcon, getDatasetList } from '@/services/dataset/index.js'; import { Form, Input, Pagination } from 'antd'; import moment from 'moment'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import Styles from './index.less'; const { Search } = Input; const leftdataList = [1, 2, 3]; -const PublicData = (React.FC = () => { +const PublicData = () => { const [queryFlow, setQueryFlow] = useState({ page: 0, size: 10, @@ -256,5 +256,5 @@ const PublicData = (React.FC = () => {
); -}); +}; export default PublicData; diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index 2eead78c..38f11ce2 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -18,6 +18,7 @@ import { elapsedTime } from '@/utils/date'; import { to } from '@/utils/promise'; import { modalConfirm } from '@/utils/ui'; import { Button, ConfigProvider, Space, Table, message } from 'antd'; +import classNames from 'classnames'; import momnet from 'moment'; import { useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -273,12 +274,14 @@ function Experiment() { dataIndex: 'name', key: 'name', render: (text) =>
{text}
, + width: '20%', }, { title: '关联流水线名称', dataIndex: 'workflow_name', key: 'workflow_name', render: (text, record) => routeToEdit(e, record)}>{text}, + width: '20%', }, { title: '实验描述', @@ -289,6 +292,7 @@ function Experiment() { title: '最近五次运行状态', dataIndex: 'status_list', key: 'status_list', + width: 200, render: (text) => { let newText = text && text.replace(/\s+/g, '').split(','); return ( @@ -375,18 +379,8 @@ function Experiment() { ]; return (
- {/*
- -
*/}
-
@@ -400,12 +394,14 @@ function Experiment() {
{experimentInList && experimentInList.length > 0 ? (
-
序号
-
TensorBoard
-
运行时长
-
开始时间
-
状态
-
操作
+
序号
+
可视化
+
+
运行时长
+
开始时间
+
+
状态
+
操作
) : ( '' @@ -415,17 +411,16 @@ function Experiment() { ? experimentInList.map((item, index) => (
- routerToText(e, item, record)}> + routerToText(e, item, record)} + > {index + 1} -
+
{item.nodes_result?.tensorboard_log ? ( -
- {item.finish_time - ? elapsedTime(new Date(item.create_time), new Date(item.finish_time)) - : elapsedTime(new Date(item.create_time), new Date())} -
-
- {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')} +
+
+ {item.finish_time + ? elapsedTime(new Date(item.create_time), new Date(item.finish_time)) + : elapsedTime(new Date(item.create_time), new Date())} +
+
+ {momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')} +
-
+
-
+
@@ -267,21 +263,21 @@ const Dataset = () => { style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} > diff --git a/react-ui/src/pages/Pipeline/index.jsx b/react-ui/src/pages/Pipeline/index.jsx index 50206ace..456fa56b 100644 --- a/react-ui/src/pages/Pipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/index.jsx @@ -240,12 +240,7 @@ const Pipeline = () => { return (
-
diff --git a/react-ui/src/pages/Pipeline/index.less b/react-ui/src/pages/Pipeline/index.less index 05c793b0..c15bcfa1 100644 --- a/react-ui/src/pages/Pipeline/index.less +++ b/react-ui/src/pages/Pipeline/index.less @@ -9,30 +9,16 @@ background-image: url(/assets/images/pipeline-back.png); background-size: 100% 100%; } -.plusButton { - color: #1d1d20; - font-size: 14px; - font-family: 'Alibaba'; - background: rgba(22, 100, 255, 0.06); - border: 1px solid; - border-color: rgba(22, 100, 255, 0.11); - border-radius: 4px; -} -.plusButton:hover { - color: #1d1d20 !important; - background: rgba(22, 100, 255, 0.06) !important; - border: 1px solid !important; - border-color: rgba(22, 100, 255, 0.11) !important; -} + .modal { :global { .ant-modal-content { width: 825px; padding: 20px 67px; background-image: url(/assets/images/modal-back.png); - background-repeat:no-repeat; - background-size:100%; + background-repeat: no-repeat; background-position: top center; + background-size: 100%; border-radius: 21px; } .ant-modal-header { @@ -62,6 +48,5 @@ .ant-btn-primary { background: #1664ff; } - } }