ci4s
/
ci4sManagement-cloud
41
0
Fork 1
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

merge

This commit is contained in:
liu2592603532 2024-04-23 15:52:53 +08:00
parent e27478072a
commit fa83541d47
12 changed files with 190 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
react-ui/src/global.less
View File

@ -100,10 +100,10 @@ body {
padding: 21px 16px;
background-color: #fff;
}
.ant-table-wrapper .ant-table {
height: 81vh;
overflow-y: auto;
}
// .ant-table-wrapper .ant-table {
// height: 81vh;
// // overflow-y: auto;
// }
.ant-pro-global-header-logo img {
height: 21px;
}
@ -111,7 +111,7 @@ body {
height: 94vh;
}
.ant-pro-layout .ant-pro-layout-container {
height: 98vh;
height: 100vh;
}
.ant-modal-confirm .ant-modal-confirm-paragraph {
margin: 54px 0 auto;

2
react-ui/src/pages/Dataset/datasetIntro.jsx
View File

@ -377,7 +377,7 @@ const Dataset = () => {
},
]}
>
<Upload {...props} data={{ uuid: uuid }}>
<Upload {...props} data={{ uuid: uuid }} accept=".zip,.tgz">
<Button
style={{
fontSize: '14px',

2
react-ui/src/pages/Dataset/index.less
View File

@ -240,7 +240,7 @@
line-height: 0px;
background: linear-gradient(
to right,
rgba(22, 100, 255, 0.6) 0,
rgba(22, 100, 255, 0.3) 0,
rgba(22, 100, 255, 0) 100%
);
}

11
react-ui/src/pages/Dataset/personalData.jsx
View File

@ -1,9 +1,10 @@
import { getAccessToken } from '@/access';
import clock from '@/assets/img/clock.png';
import creatByImg from '@/assets/img/creatBy.png';
import KFIcon from '@/components/KFIcon';
import { addDatesetAndVesion, getAssetIcon, getDatasetList } from '@/services/dataset/index.js';
import { getDictSelectOption } from '@/services/system/dict';
import { PlusCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, Modal, Pagination, Radio, Select, Upload } from 'antd';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
@ -261,10 +262,10 @@ const PublicData = (React.FC = () => {
}}
/>
<Button
type="primary"
className={Styles.plusButton}
type="default"
style={{ marginLeft: '20px' }}
onClick={showModal}
icon={<PlusCircleOutlined style={{ color: '#1664ff' }} />}
icon={<KFIcon type="icon-xinjian2" />}
>
新建数据集
</Button>
@ -424,7 +425,7 @@ const PublicData = (React.FC = () => {
</Radio.Group>
</Form.Item>
<Form.Item label="数据文件" name="dataset_version_vos">
<Upload {...props} data={{ uuid: uuid }}>
<Upload {...props} data={{ uuid: uuid }} accept=".zip,.tgz">
<Button
style={{
fontSize: '14px',

254
react-ui/src/pages/Experiment/index.jsx
View File

@ -379,149 +379,153 @@ function Experiment() {
},
];
return (
<div>
<div className={Styles.experimentBox}>
<div className={Styles.pipelineTopBox}>
<Button type="default" onClick={createExperiment} icon={<KFIcon type="icon-xinjian2" />}>
新建实验
</Button>
</div>
<Table
columns={columns}
dataSource={experimentList}
pagination={paginationProps}
rowKey="id"
expandable={{
expandedRowRender: (record) => (
<div>
{experimentInList && experimentInList.length > 0 ? (
<div className={Styles.tableExpandBox} style={{ paddingBottom: '16px' }}>
<div className={Styles.index}>序号</div>
<div className={Styles.tensorBoard}>可视化</div>
<div className={Styles.description}>
<div style={{ width: '50%' }}>运行时长</div>
<div style={{ width: '50%' }}>开始时间</div>
<div className={classNames('vertical-scroll-table', Styles.experimentTable)}>
<Table
columns={columns}
dataSource={experimentList}
pagination={paginationProps}
rowKey="id"
scroll={{ y: 'calc(100% - 55px)' }}
expandable={{
expandedRowRender: (record) => (
<div>
{experimentInList && experimentInList.length > 0 ? (
<div className={Styles.tableExpandBox} style={{ paddingBottom: '16px' }}>
<div className={Styles.index}>序号</div>
<div className={Styles.tensorBoard}>可视化</div>
<div className={Styles.description}>
<div style={{ width: '50%' }}>运行时长</div>
<div style={{ width: '50%' }}>开始时间</div>
</div>
<div className={Styles.status}>状态</div>
<div className={Styles.operation}>操作</div>
</div>
<div className={Styles.status}>状态</div>
<div className={Styles.operation}>操作</div>
</div>
) : (
''
)}
) : (
''
)}
{experimentInList && experimentInList.length > 0
? experimentInList.map((item, index) => (
<div
key={item.id}
className={classNames(Styles.tableExpandBox, Styles.tableExpandBoxContent)}
>
<a
className={Styles.index}
style={{ padding: '0 16px' }}
onClick={(e) => routerToText(e, item, record)}
{experimentInList && experimentInList.length > 0
? experimentInList.map((item, index) => (
<div
key={item.id}
className={classNames(Styles.tableExpandBox, Styles.tableExpandBoxContent)}
>
{index + 1}
</a>
<div className={Styles.tensorBoard}>
{item.nodes_result?.tensorboard_log ? (
<TensorBoardStatus
status={item.tensorBoardStatus}
onClick={() => handleTensorboard(item)}
></TensorBoardStatus>
) : (
'-'
)}
</div>
<div className={Styles.description}>
<div style={{ width: '50%' }}>
{item.finish_time
? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
: elapsedTime(new Date(item.create_time), new Date())}
<a
className={Styles.index}
style={{ padding: '0 16px' }}
onClick={(e) => routerToText(e, item, record)}
>
{index + 1}
</a>
<div className={Styles.tensorBoard}>
{item.nodes_result?.tensorboard_log ? (
<TensorBoardStatus
status={item.tensorBoardStatus}
onClick={() => handleTensorboard(item)}
></TensorBoardStatus>
) : (
'-'
)}
</div>
<div style={{ width: '50%' }}>
{momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
<div className={Styles.description}>
<div style={{ width: '50%' }}>
{item.finish_time
? elapsedTime(new Date(item.create_time), new Date(item.finish_time))
: elapsedTime(new Date(item.create_time), new Date())}
</div>
<div style={{ width: '50%' }}>
{momnet(item.create_time).format('YYYY-MM-DD HH:mm:ss')}
</div>
</div>
</div>
<div className={Styles.statusBox}>
<img
style={{ width: '17px', marginRight: '7px' }}
src={experimentStatusInfo[item.status]?.icon}
/>{' '}
<span
style={{ color: experimentStatusInfo[item.status]?.color }}
className={Styles.statusIcon}
>
{experimentStatusInfo[item.status]?.label}
</span>
</div>
<div className={Styles.operation}>
<Button
type="link"
size="small"
key="stop"
disabled={
item.status === 'Succeeded' ||
item.status === 'Failed' ||
item.status === 'Terminated'
}
icon={<KFIcon type="icon-zhongzhi" />}
onClick={async () => {
putQueryByExperimentInsId(item.id).then((ret) => {
if (ret.code === 200) {
message.success('终止成功');
getQueryByExperiment(record.id);
} else {
message.error(ret.msg);
}
});
}}
>
终止
</Button>
<ConfigProvider
theme={{
token: {
colorLink: themes['warningColor'],
},
}}
>
<div className={Styles.statusBox}>
<img
style={{ width: '17px', marginRight: '7px' }}
src={experimentStatusInfo[item.status]?.icon}
/>{' '}
<span
style={{ color: experimentStatusInfo[item.status]?.color }}
className={Styles.statusIcon}
>
{experimentStatusInfo[item.status]?.label}
</span>
</div>
<div className={Styles.operation}>
<Button
type="link"
size="small"
key="batchRemove"
disabled={item.status === 'Running' || item.status === 'Pending'}
icon={<KFIcon type="icon-shanchu" />}
onClick={() => {
modalConfirm({
title: '确定删除该条实例吗？',
onOk: () => {
deleteQueryByExperimentInsId(item.id).then((ret) => {
if (ret.code === 200) {
message.success('删除成功');
getQueryByExperiment(record.id);
} else {
message.error(ret.msg);
}
});
},
key="stop"
disabled={
item.status === 'Succeeded' ||
item.status === 'Failed' ||
item.status === 'Terminated'
}
icon={<KFIcon type="icon-zhongzhi" />}
onClick={async () => {
putQueryByExperimentInsId(item.id).then((ret) => {
if (ret.code === 200) {
message.success('终止成功');
getQueryByExperiment(record.id);
} else {
message.error(ret.msg);
}
});
}}
>
删除
终止
</Button>
</ConfigProvider>
<ConfigProvider
theme={{
token: {
colorLink: themes['warningColor'],
},
}}
>
<Button
type="link"
size="small"
key="batchRemove"
disabled={item.status === 'Running' || item.status === 'Pending'}
icon={<KFIcon type="icon-shanchu" />}
onClick={() => {
modalConfirm({
title: '确定删除该条实例吗？',
onOk: () => {
deleteQueryByExperimentInsId(item.id).then((ret) => {
if (ret.code === 200) {
message.success('删除成功');
getQueryByExperiment(record.id);
} else {
message.error(ret.msg);
}
});
},
});
}}
>
删除
</Button>
</ConfigProvider>
</div>
</div>
</div>
))
: ''}
</div>
),
onExpand: (e, a) => {
expandChange(e, a);
},
expandedRowKeys: [expandedRowKeys],
rowExpandable: (record) => true,
}}
/>
))
: ''}
</div>
),
onExpand: (e, a) => {
expandChange(e, a);
},
expandedRowKeys: [expandedRowKeys],
rowExpandable: (record) => true,
}}
/>
</div>
{isModalOpen && (
<AddExperimentModal
isAdd={isAdd}

13
react-ui/src/pages/Experiment/index.less
View File

@ -76,3 +76,16 @@
.statusBox:hover .statusIcon {
visibility: visible;
}
.experimentBox{
height: calc(100% - 20px);
.experimentTable{
height: calc(100% - 60px);
:global{
.ant-table-wrapper .ant-table{
// overflow-y: auto;
height: calc(100% - 48px);
}
}
}
}

11
react-ui/src/pages/Model/index.less
View File

@ -211,17 +211,8 @@
width: 100%;
.dataItem {
position: relative;
<<<<<<< HEAD
width: 23.8%;
height:164px;
background:#ffffff;
border:1px solid;
border-color:#eaeaea;
border-radius:4px;
=======
width: 23.5%;
height: 164px;
>>>>>>> 708a5facb090bd542e06a0356466fa159720a223
margin: 0 20px 25px 0;
background: #ffffff;
border: 1px solid;
@ -239,7 +230,7 @@
line-height: 0px;
background: linear-gradient(
to right,
rgba(22, 100, 255, 0.6) 0,
rgba(22, 100, 255, 0.3) 0,
rgba(22, 100, 255, 0) 100%
);
}

2
react-ui/src/pages/Model/modelIntro.jsx
View File

@ -375,7 +375,7 @@ const Dataset = () => {
},
]}
>
<Upload {...props} data={{ uuid: uuid }}>
<Upload {...props} data={{ uuid: uuid }} accept=".zip,.tgz">
<Button
style={{
fontSize: '14px',

11
react-ui/src/pages/Model/personalData.jsx
View File

@ -1,8 +1,9 @@
import { getAccessToken } from '@/access';
import clock from '@/assets/img/clock.png';
import creatByImg from '@/assets/img/creatBy.png';
import KFIcon from '@/components/KFIcon';
import { addModel, getAssetIcon, getModelList } from '@/services/dataset/index.js';
import { PlusCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, Modal, Pagination, Radio, Select, Upload } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
@ -264,10 +265,10 @@ const PublicData = () => {
}}
/>
<Button
type="primary"
className={Styles.plusButton}
type="default"
style={{ marginLeft: '20px' }}
onClick={showModal}
icon={<PlusCircleOutlined style={{ color: '#1664ff' }} />}
icon={<KFIcon type="icon-xinjian2" />}
>
模型注册
</Button>
@ -413,7 +414,7 @@ const PublicData = () => {
<Select allowClear placeholder="请选择模型标签" options={[]} />
</Form.Item>
<Form.Item label="模型文件" name="models_version_vos">
<Upload {...props} data={{ uuid: uuid }}>
<Upload {...props} data={{ uuid: uuid }} accept=".zip,.tgz">
<Button
style={{
fontSize: '14px',

14
react-ui/src/pages/Pipeline/index.jsx
View File

@ -10,12 +10,12 @@ import {
import themes from '@/styles/theme.less';
import { modalConfirm } from '@/utils/ui';
import { Button, ConfigProvider, Form, Input, Modal, 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';
import Styles from './index.less';
const { TextArea } = Input;
const Pipeline = () => {
const [form] = Form.useForm();
const navgite = useNavigate();
@ -239,13 +239,21 @@ const Pipeline = () => {
},
];
return (
<div>
<div className={Styles.PipelineBox}>
<div className={Styles.pipelineTopBox}>
<Button type="default" onClick={showModal} icon={<KFIcon type="icon-xinjian2" />}>
新建流水线
</Button>
</div>
<Table columns={columns} dataSource={pipeList} pagination={paginationProps} rowKey="id" />
<div className={classNames('vertical-scroll-table', Styles.PipelineTable)}>
<Table
columns={columns}
dataSource={pipeList}
pagination={paginationProps}
rowKey="id"
scroll={{ y: 'calc(100% - 55px)' }}
/>
</div>
<Modal
title={
<div style={{ display: 'flex', alignItems: 'center', fontWeight: 500 }}>

15
react-ui/src/pages/Pipeline/index.less
View File

@ -8,6 +8,7 @@
padding-right: 30px;
background-image: url(/assets/images/pipeline-back.png);
background-size: 100% 100%;
}
.modal {
@ -50,3 +51,17 @@
}
}
}
.PipelineBox{
height: calc(100% - 20px);
.PipelineTable{
height: calc(100% - 60px);
:global{
.ant-table-wrapper .ant-table{
// overflow-y: auto;
height: calc(100% - 48px);
}
}
}
}

4
react-ui/src/services/session.ts
View File

@ -8,9 +8,7 @@ let remoteMenu: any = null;
export function getRemoteMenu() {
return remoteMenu;
}
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
export function setRemoteMenu(data: any) {
remoteMenu = data;
}