+ {valueObj?.showValue ? (
+
+ ) : (
+
+ {valueObj?.showValue}
+ {
+ e.stopPropagation();
+ onChange?.({
+ ...valueObj,
+ fromSelect: false,
+ value: undefined,
+ showValue: undefined,
+ });
+ }}
+ />
+
+ ) : (
+ {placeholder}
+ )}
+ onClick(item)}
+ >
+ 
+ 
+ {item.name}
+
+ );
+}
+
+export default CategoryItem;
diff --git a/react-ui/src/pages/Dataset/components/CategoryList/index.less b/react-ui/src/pages/Dataset/components/CategoryList/index.less
new file mode 100644
index 00000000..5f925607
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/CategoryList/index.less
@@ -0,0 +1,22 @@
+.category-list {
+ width: 340px;
+ height: 100%;
+ margin-right: 10px;
+ padding: 15px 0;
+ background: white;
+ border-radius: 4px;
+ box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
+
+ &__content {
+ height: calc(100% - 32px - 15px);
+ margin-top: 15px;
+ padding-left: 20px;
+ overflow-y: auto;
+
+ &__title {
+ margin-bottom: 15px;
+ color: @text-color;
+ font-size: 14px;
+ }
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/CategoryList/index.tsx b/react-ui/src/pages/Dataset/components/CategoryList/index.tsx
new file mode 100644
index 00000000..28a8de66
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/CategoryList/index.tsx
@@ -0,0 +1,71 @@
+import { Flex, Input } from 'antd';
+import { CategoryData, ResourceType, resourceConfig } from '../../types';
+import CategoryItem from '../CategoryItem';
+import styles from './index.less';
+
+export type CategoryValue = {
+ dataType: number | undefined;
+ dataTag: number | undefined;
+};
+
+type CategoryProps = {
+ resourceType: ResourceType; // 资源类型，数据集还是模型
+ typeList: CategoryData[];
+ tagList: CategoryData[];
+ activeType?: number;
+ activeTag?: number;
+ onTypeSelect: (value: CategoryData) => void;
+ onTagSelect: (value: CategoryData) => void;
+ onSearch: (value: string) => void;
+};
+
+function CategoryList({
+ resourceType,
+ typeList,
+ tagList,
+ activeType,
+ activeTag,
+ onTypeSelect,
+ onTagSelect,
+ onSearch,
+}: CategoryProps) {
+ return (
+
+
+ {item.name}
+
+
+ );
+}
+
+export default CategoryList;
diff --git a/react-ui/src/pages/Dataset/components/ResourceList/index.less b/react-ui/src/pages/Dataset/components/ResourceList/index.less
new file mode 100644
index 00000000..91407e80
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourceList/index.less
@@ -0,0 +1,39 @@
+.resource-list {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ height: 100%;
+ padding: 20px 0;
+ background: white;
+ box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 32px;
+ margin-bottom: 30px;
+ padding: 0 30px;
+ color: @text-color;
+ font-size: 15px;
+ }
+
+ &__content {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ gap: 20px;
+ align-content: flex-start;
+ width: 100%;
+ margin-bottom: 30px;
+ padding: 0 30px;
+ overflow-y: auto;
+ }
+
+ :global {
+ .ant-pagination {
+ margin-right: 30px;
+ text-align: right;
+ }
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/ResourceList/index.tsx b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx
new file mode 100644
index 00000000..208e18c5
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx
@@ -0,0 +1,211 @@
+import KFIcon from '@/components/KFIcon';
+import { CommonTabKeys } from '@/enums';
+import AddModelModal from '@/pages/Dataset/components/AddModelModal';
+import { openAntdModal } from '@/utils/modal';
+import { to } from '@/utils/promise';
+import { modalConfirm } from '@/utils/ui';
+import { useNavigate } from '@umijs/max';
+import { App, Button, Input, Pagination, PaginationProps } from 'antd';
+import { Ref, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { CategoryData, ResourceData, ResourceType, resourceConfig } from '../../types';
+import AddDatasetModal from '../AddDatasetModal';
+import ResourceItem from '../Resourcetem';
+import styles from './index.less';
+
+export type ResourceListRef = {
+ reset: () => void;
+};
+
+type ResourceListProps = {
+ resourceType: ResourceType;
+ dataType?: number;
+ dataTag?: number;
+ isPublic: boolean;
+ typeList: CategoryData[];
+ tagList: CategoryData[];
+ initialSearchText?: string;
+ initialPagination?: PaginationProps;
+ setCacheState: (state?: any) => void;
+};
+
+function ResourceList(
+ {
+ resourceType,
+ dataType,
+ dataTag,
+ typeList,
+ tagList,
+ isPublic,
+ initialSearchText,
+ initialPagination,
+ setCacheState,
+ }: ResourceListProps,
+ ref: Ref
+
+
+
+ {typeList?.map((item) => (
+
+
+ {tagList?.map((item) => (
+
+
+
+ {resourceConfig[resourceType].typeTitle}
+
+
+ {resourceConfig[resourceType].tagTitle}
+
+
+
+ );
+}
+
+export default forwardRef(ResourceList);
diff --git a/react-ui/src/pages/Dataset/components/ResourcePage/index.less b/react-ui/src/pages/Dataset/components/ResourcePage/index.less
new file mode 100644
index 00000000..000c6132
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.less
@@ -0,0 +1,11 @@
+.resource-page {
+ height: 100%;
+ &__tabs-container {
+ height: 50px;
+ padding-left: 27px;
+ background-image: url(@/assets/img/page-title-bg.png);
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: 100% 100%;
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx
new file mode 100644
index 00000000..9e4dff88
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.tsx
@@ -0,0 +1,113 @@
+import { CommonTabKeys } from '@/enums';
+import { useCacheState } from '@/hooks/pageCacheState';
+import { getAssetIcon } from '@/services/dataset/index.js';
+import { to } from '@/utils/promise';
+import { Flex, Tabs, type TabsProps } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { CategoryData, ResourceType, resourceConfig } from '../../types';
+import CategoryList from '../CategoryList';
+import ResourceList, { ResourceListRef } from '../ResourceList';
+import styles from './index.less';
+
+type ResourcePageProps = {
+ resourceType: ResourceType; // 资源类型，数据集还是模型
+};
+
+function ResourcePage({ resourceType }: ResourcePageProps) {
+ const [cacheState, setCacheState] = useCacheState();
+ const [activeTab, setActiveTab] = useState
+ 数据总数：{total}个
+
+
+ setInputText(e.target.value)}
+ value={inputText}
+ />
+ {!isPublic && (
+ }
+ >
+ {resourceConfig[resourceType].addBtnTitle}
+
+ )}
+
+
+ {dataList?.map((item) => (
+
+
+
+
+
+ );
+}
+
+export default ResourcePage;
diff --git a/react-ui/src/pages/Dataset/components/Resourcetem/index.less b/react-ui/src/pages/Dataset/components/Resourcetem/index.less
new file mode 100644
index 00000000..edd97f85
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/Resourcetem/index.less
@@ -0,0 +1,61 @@
+.resource-item {
+ position: relative;
+ width: calc(25% - 15px);
+ padding: 20px;
+ background: white;
+ border: 1px solid #eaeaea;
+ border-radius: 4px;
+ cursor: pointer;
+
+ @media screen and (max-width: 1860px) {
+ & {
+ width: calc(33.33% - 13.33px);
+ }
+ }
+
+ &__name {
+ position: relative;
+ display: inline-block;
+ height: 24px;
+ margin: 0 10px 0 0 !important;
+ color: @text-color;
+ font-size: 16px;
+ }
+
+ &__description {
+ height: 44px;
+ margin-bottom: 20px;
+ color: @text-color-secondary;
+ font-size: 14px;
+ .multiLine(2);
+ }
+ &__time {
+ display: flex;
+ flex: 0 1 content;
+ align-items: center;
+ width: 100%;
+ color: #808080;
+ font-size: 13px;
+ }
+
+ &:hover {
+ border-color: @primary-color;
+ box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
+
+ .resource-item__name {
+ color: @primary-color;
+ }
+ }
+}
+
+.resource-item__name {
+ &::after {
+ position: absolute;
+ top: 14px;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ background: linear-gradient(to right, rgba(22, 100, 255, 0.3) 0, rgba(22, 100, 255, 0) 100%);
+ content: '';
+ }
+}
diff --git a/react-ui/src/pages/Dataset/components/Resourcetem/index.tsx b/react-ui/src/pages/Dataset/components/Resourcetem/index.tsx
new file mode 100644
index 00000000..b8ad9750
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/Resourcetem/index.tsx
@@ -0,0 +1,54 @@
+import clock from '@/assets/img/clock.png';
+import creatByImg from '@/assets/img/creatBy.png';
+import KFIcon from '@/components/KFIcon';
+import { formatDate } from '@/utils/date';
+import { Button, Flex, Typography } from 'antd';
+import { ResourceData } from '../../types';
+import styles from './index.less';
+
+type ResourceItemProps = {
+ item: ResourceData;
+ isPublic: boolean;
+ onRemove: (item: ResourceData) => void;
+ onClick: (item: ResourceData) => void;
+};
+
+function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps) {
+ return (
+
+
+ onClick(item)}>
+
+
+ {item.name}
+
+ {!isPublic && (
+
+ )}
+
+
+
+
+ );
+}
+
+export default ResourceItem;
diff --git a/react-ui/src/pages/Dataset/index.jsx b/react-ui/src/pages/Dataset/index.jsx
index 4d39b34e..33d2844d 100644
--- a/react-ui/src/pages/Dataset/index.jsx
+++ b/react-ui/src/pages/Dataset/index.jsx
@@ -1,90 +1,7 @@
-import { getDatasetList } from '@/services/dataset/index.js';
-import { Form, Input, Tabs } from 'antd';
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Styles from './index.less';
-import PersonalData from './personalData';
-import PublicData from './publicData';
-const { Search } = Input;
-const { TabPane } = Tabs;
-const leftdataList = [1, 2, 3];
+import ResourcePage from './components/ResourcePage';
+import { ResourceType } from './types';
-const Dataset = () => {
- const [queryFlow, setQueryFlow] = useState({
- page: 0,
- size: 10,
- name: null,
- });
- const navgite = useNavigate();
- const [isModalOpen, setIsModalOpen] = useState(false);
- const [datasetList, setDatasetList] = useState([]);
- const [total, setTotal] = useState(0);
- const [form] = Form.useForm();
- const [dialogTitle, setDialogTitle] = useState('新建数据');
- const getDatasetlist = () => {
- getDatasetList(queryFlow).then((ret) => {
- console.log(ret);
- if (ret.code == 200) {
- setDatasetList(ret.data.content);
- setTotal(ret.data.totalElements);
- }
- });
- };
-
- const showModal = () => {
- form.resetFields();
- setDialogTitle('新建数据集');
- setIsModalOpen(true);
- };
- const handleOk = () => {
- console.log(1111);
- setIsModalOpen(false);
- };
- const handleCancel = () => {
- setIsModalOpen(false);
- };
- const onFinish = (values) => {};
- const routeToIntro = (e, record) => {
- e.stopPropagation();
- navgite({ pathname: '/dataset/dataset' });
- };
- const onFinishFailed = (errorInfo) => {
- console.log('Failed:', errorInfo);
- };
- useEffect(() => {
- //getDatasetlist();
- return () => {};
- }, []);
- return (
- {item.description}
+
+ 
+ {item.create_by}
+
+
+ 
+ 最近更新: {formatDate(item.update_time, 'YYYY-MM-DD')}
+
+
-
-
- );
+const DatasetPage = () => {
+ return
-
-
-
-
-
-
- 
-
- ),
- content:
- 删除后，该数据集版本将不可恢复
- 是否确认删除?
,
- okText: '确认',
- cancelText: '取消',
+ const deleteDataset = () => {
+ modalConfirm({
+ title: '删除后，该数据集版本将不可恢复',
+ content: '是否确认删除?',
onOk: () => {
deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => {
getDatasetVersionList();
@@ -125,19 +86,26 @@ const Dataset = () => {
},
});
};
- const onFinish = (values) => {
- addDatasetVersionDetail(formList).then((ret) => {
- getDatasetVersionList();
- setIsModalOpen(false);
- message.success('创建成功');
- });
- };
// 获取版本下的文件列表
const getDatasetVersions = (params) => {
getDatasetVersionIdList(params).then((res) => {
setWordList(res?.data?.content ?? []);
});
};
+
+ const handleExport = async () => {
+ const hide = message.loading('正在下载');
+ hide();
+ downLoadZip(`/api/mmp/dataset/downloadAllFiles`, { dataset_id: locationParams.id, version });
+ };
+
+ const downloadAlone = (e, record) => {
+ console.log(record);
+ const hide = message.loading('正在下载');
+ hide();
+ downLoadZip(`/api/mmp/dataset/download/${record.id}`);
+ };
+
const handleChange = (value) => {
console.log(value);
if (value) {
@@ -147,15 +115,7 @@ const Dataset = () => {
setVersion(null);
}
};
- const onFinishFailed = (errorInfo) => {
- console.log('Failed:', errorInfo);
- };
- const downloadAlone = (e, record) => {
- console.log(record);
- const hide = message.loading('正在下载');
- hide();
- downLoadZip(`/api/mmp/dataset/download/${record.id}`);
- };
+
const columns = [
{
title: '序号',
@@ -187,7 +147,7 @@ const Dataset = () => {
title: '更新时间',
dataIndex: 'update_time',
key: 'update_time',
- render: (text) => {moment(text).format('YYYY-MM-DD HH:mm:ss')},
+ render: (text) => {formatDate(text)},
},
{
title: '操作',
@@ -264,15 +224,17 @@ const Dataset = () => {
- }
- >
- 删除
-
+ {!isPublic && (
+ }
+ >
+ 删除
+
+ )}
- 
- {dialogTitle}
-
- }
- open={isModalOpen}
- className={Styles.modal}
- okButtonProps={{
- htmlType: 'submit',
- form: 'form',
- }}
- onCancel={handleCancel}
- >
-
-
-
-
-
-
-
- 分类
-
- {datasetTypeList && datasetTypeList.length > 0
- ? datasetTypeList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetType(e, item);
- }}
- >
- 
- 
- {item.name}
-
-
-
- {item.name}
- 研究方向/应用领域
-
- {datasetDirectionList && datasetDirectionList.length > 0
- ? datasetDirectionList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetTag(e, item);
- }}
- >
-
-
- {item.name}
-
-
-
- {item.name}
-
-
-
- 数据总数：{total}个
-
-
-
-
- {datasetList && datasetList.length > 0
- ? datasetList.map((item) => {
- return (
- Demo */}
-
- routeToIntro(e, item)}>
- {item.name}
- ![]()
{
- e.stopPropagation();
- modalConfirm({
- title: '确定删除该条数据集实例吗？',
- onOk: () => {
- deleteDataset(item.id).then((ret) => {
- if (ret.code === 200) {
- message.success('删除成功');
- getModelLists(queryFlow);
- } else {
- message.error(ret.msg);
- }
- });
- },
- });
- }}
- className={Styles.dropdown}
- style={{ width: '17px', marginRight: '6px' }}
- src={deleteIcon}
- alt=""
- />
-
- );
- })
- : ''}
- {/* {item.description}
-
-
-
- {item.create_by}
-
-
-
- 最近更新: {moment(item.update_time).format('YYYY-MM-DD')}
-
-
- {dialogTitle}
-
- }
- open={isModalOpen}
- className={Styles.modal}
- okButtonProps={{
- htmlType: 'submit',
- form: 'form',
- }}
- onCancel={handleCancel}
- >
-
-
-
-
- );
-};
-export default PublicData;
diff --git a/react-ui/src/pages/Dataset/types.tsx b/react-ui/src/pages/Dataset/types.tsx
new file mode 100644
index 00000000..5f3c5f1e
--- /dev/null
+++ b/react-ui/src/pages/Dataset/types.tsx
@@ -0,0 +1,129 @@
+import KFIcon from '@/components/KFIcon';
+import { CommonTabKeys } from '@/enums';
+import {
+ addDatasetVersionDetail,
+ addModelsVersionDetail,
+ deleteDataset,
+ deleteModel,
+ getDatasetList,
+ getDatasetVersionIdList,
+ getDatasetVersionsById,
+ getModelList,
+ getModelVersionIdList,
+ getModelVersionsById,
+} from '@/services/dataset/index.js';
+import type { TabsProps } from 'antd';
+
+export enum ResourceType {
+ Model = 'Model', // 模型
+ Dataset = 'Dataset', // 数据集
+}
+
+type ResourceTypeInfo = {
+ getList: (params: any) => Promise
-
-
-
- 分类
-
- {datasetTypeList && datasetTypeList.length > 0
- ? datasetTypeList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetType(e, item);
- }}
- >
-
-
- {item.name}
-
-
-
- {item.name}
- 研究方向/应用领域
-
- {datasetDirectionList && datasetDirectionList.length > 0
- ? datasetDirectionList.map((item) => {
- return (
-
-
-
- );
- })
- : ''}
- {
- chooseDatasetTag(e, item);
- }}
- >
-
-
- {item.name}
-
-
-
- {item.name}
-
-
-
- 数据总数：{total}个
-
-
-
-
- {datasetList && datasetList.length > 0
- ? datasetList.map((item) => {
- return (
- Demo */}
-
- routeToIntro(e, item)}>
- {item.name}
- ![]()
{
- e.stopPropagation();
- modalConfirm({
- title: '确定删除该条数据集实例吗？',
- onOk: () => {
- deleteDataset(item.id).then((ret) => {
- if (ret.code === 200) {
- message.success('删除成功');
- getModelLists(queryFlow);
- } else {
- message.error(ret.msg);
- }
- });
- },
- });
- }}
- className={Styles.dropdown}
- style={{ width: '17px', marginRight: '6px' }}
- src={deleteIcon}
- alt=""
- />
-
- );
- })
- : ''}
- {/* {item.description}
-
-
- {item.create_by}
-
-
-
- 最近更新: {moment(item.update_time).format('YYYY-MM-DD')}
-
-
- {iframeUrl && }
+
);
}
diff --git a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.less b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.less
new file mode 100644
index 00000000..eec152a7
--- /dev/null
+++ b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.less
@@ -0,0 +1,9 @@
+.modal {
+ .global_param_item {
+ max-height: 230px;
+ padding: 24px 12px 0;
+ overflow-y: auto;
+ border: 1px solid #e6e6e6;
+ border-radius: 6px;
+ }
+}
diff --git a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx
similarity index 97%
rename from react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx
rename to react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx
index f5b2bfc4..71ec2f06 100644
--- a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx
+++ b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx
@@ -4,7 +4,7 @@ import KFModal from '@/components/KFModal';
import { type PipelineGlobalParam } from '@/types';
import { Form, Input, Radio, Select, type FormRule } from 'antd';
import { useState } from 'react';
-import styles from './addExperimentModal.less';
+import styles from './index.less';
type FormData = {
name?: string;
@@ -97,6 +97,11 @@ function AddExperimentModal({
wrapperCol: { span: 20 },
};
+ const paramLayout = {
+ labelCol: { span: 8 },
+ wrapperCol: { span: 16 },
+ };
+
// 除了流水线选择发生变化
const handleWorkflowChange = (id: string | number) => {
const pipeline: Workflow | undefined = workflowList.find((v) => v.id === id);
@@ -187,7 +192,7 @@ function AddExperimentModal({
fields.map(({ key, name, ...restField }) => (
+
+
+ );
+}
+
+export default ExperimentResult;
diff --git a/react-ui/src/pages/Experiment/components/LogGroup/index.less b/react-ui/src/pages/Experiment/components/LogGroup/index.less
new file mode 100644
index 00000000..ede8b0cf
--- /dev/null
+++ b/react-ui/src/pages/Experiment/components/LogGroup/index.less
@@ -0,0 +1,34 @@
+.log-group {
+ padding-bottom: 10px;
+
+ &__pod {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px;
+ background: rgba(234, 234, 234, 0.5);
+ cursor: pointer;
+
+ &__name {
+ margin-right: 10px;
+ color: @text-color;
+ font-size: 14px;
+ }
+ }
+
+ &__detail {
+ padding: 15px;
+ color: white;
+ font-size: 14px;
+ white-space: pre-line;
+ word-break: break-all;
+ background: #19253b;
+ }
+
+ &__more-button {
+ display: flex;
+ justify-content: center;
+ color: white;
+ background: #19253b;
+ }
+}
diff --git a/react-ui/src/pages/Experiment/experimentText/logGroup.tsx b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx
similarity index 69%
rename from react-ui/src/pages/Experiment/experimentText/logGroup.tsx
rename to react-ui/src/pages/Experiment/components/LogGroup/index.tsx
index 40940bae..f87d1d09 100644
--- a/react-ui/src/pages/Experiment/experimentText/logGroup.tsx
+++ b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx
@@ -1,16 +1,19 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-05-16 08:47:46
+ * @Description: 日志组件
+ */
+
import { useStateRef } from '@/hooks';
+import { ExperimentStatus } from '@/pages/Experiment/status';
+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 { useEffect, useState } from 'react';
-import { ExperimentStatus } from '../status';
-import styles from './logGroup.less';
+import styles from './index.less';
-export type LogGroupProps = {
- log_type: 'normal' | 'resource'; // 日志类型
- pod_name?: string; // 分布式名称
- log_content?: string; // 日志内容
- start_time?: string; // 日志开始时间
+export type LogGroupProps = ExperimentLog & {
status: ExperimentStatus; // 实验状态
};
@@ -23,7 +26,7 @@ function LogGroup({
log_type = 'normal',
pod_name = '',
log_content = '',
- start_time = '',
+ start_time,
status = ExperimentStatus.Pending,
}: LogGroupProps) {
const [collapse, setCollapse] = useState(true);
@@ -57,21 +60,6 @@ function LogGroup({
setCompleted(true);
}
};
- // 请求实时日志
- // const requestExperimentPodsRealtimeLog = async () => {
- // const params = {
- // pod_name,
- // namespace: namespace,
- // container_name: log_type === 'resource' ? '' : 'main',
- // };
- // const res = await getExperimentPodsRealtimeLog(params);
- // const { log_detail } = res.data;
- // if (log_detail && log_detail.log_content) {
- // setLogList((list) => list.concat(log_detail));
- // } else {
- // setCompleted(true);
- // }
- // };
// 处理折叠
const handleCollapse = async () => {
@@ -101,15 +89,15 @@ function LogGroup({
const logText = log_content + logList.map((v) => v.log_content).join('');
const showMoreBtn = status !== 'Running' && showLog && !completed && logText !== '';
return (
-
+
{log_type === 'resource' && (
-
-
{pod_name}
+
+
)}
- {showLog && {pod_name}
{collapse ? {logText}
}
-
+ {showLog &&
![]()
= {
+export const experimentStatusInfo: Record = {
Running: {
label: '运行中',
- color: '#165bff',
+ color: '#1664ff',
icon: '/assets/images/running-icon.png',
},
Succeeded: {
@@ -56,7 +53,7 @@ export const experimentStatusInfo: Record {
- let timer = new Date(time);
- let hours = timer.getHours(); //转换成时
- let minutes = timer.getMinutes(); //转换成分
- let secend = timer.getSeconds(); //转换成秒
-
- let str = `${minutes}分${secend}秒`;
- return str;
- };
- const pipelineContainer = useEmotionCss(() => {
- return {
- display: 'flex',
- backgroundColor: '#fff',
- height: '98vh',
- };
- });
- const graphStyle = useEmotionCss(() => {
- return {
- width: '100%',
- backgroundColor: '#f9fafb',
- flex: 1,
- };
- });
const graphRef = useRef();
const onDragEnd = (val) => {
console.log(val, 'eee');
@@ -61,12 +36,8 @@ function ExperimentText() {
id: val.component_name + '-' + s8(),
isCluster: false,
};
- console.log(graph, model);
-
graph.addItem('node', model, true);
- console.log(graph);
};
- const formChange = (val) => {};
const handlerClick = (e) => {
if (e.target.get('name') !== 'anchor-point' && e.item) {
propsRef.current.showDrawer(e, locationParams.id, messageRef.current);
@@ -74,7 +45,6 @@ function ExperimentText() {
};
const getGraphData = (data) => {
if (graph) {
- console.log(graph);
graph.data(data);
graph.render();
} else {
@@ -84,77 +54,39 @@ function ExperimentText() {
}
};
const getFirstWorkflow = (val) => {
- getWorkflowById(val).then((ret) => {
- if (graph && ret.data && ret.data.dag) {
- console.log(JSON.parse(ret.data.dag));
- getExperimentIns(locationParams.id).then((res) => {
- if (res.code == 200) {
- console.log(ret.data, 'data');
- setMessage(res.data);
- const experimentStatusObjs = JSON.parse(res.data.nodes_status);
- const newNodeList = JSON.parse(ret.data.dag).nodes.map((item) => {
- console.log(experimentStatusObjs);
+ getWorkflowById(val).then((pipelineRes) => {
+ if (graph && pipelineRes.data && pipelineRes.data.dag) {
+ getExperimentIns(locationParams.id).then((experimentRes) => {
+ if (experimentRes.code === 200) {
+ setMessage(experimentRes.data);
+ const experimentStatusObjs = JSON.parse(experimentRes.data.nodes_status);
+ const newNodeList = JSON.parse(pipelineRes.data.dag).nodes.map((item) => {
return {
...item,
- experimentEndTime:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].finishedAt,
- experimentStartTime:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].startedAt,
- experimentStatus:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].phase,
- component_id:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].id,
- img:
- experimentStatusObjs &&
- experimentStatusObjs[item.id] &&
- experimentStatusObjs[item.id].phase
- ? item.img.slice(0, item.img.length - 4) +
- '-' +
- experimentStatusObjs[item.id].phase +
- '.png'
- : item.img,
+ experimentEndTime: experimentStatusObjs?.[item.id]?.finishedAt,
+ experimentStartTime: experimentStatusObjs?.[item.id]?.startedAt,
+ experimentStatus: experimentStatusObjs?.[item.id]?.phase,
+ component_id: experimentStatusObjs?.[item.id]?.id,
+ img: experimentStatusObjs?.[item.id]?.phase
+ ? item.img.slice(0, item.img.length - 4) +
+ '-' +
+ experimentStatusObjs[item.id].phase +
+ '.png'
+ : item.img,
};
});
- const newData = { ...JSON.parse(ret.data.dag), nodes: newNodeList };
-
+ const newData = { ...JSON.parse(pipelineRes.data.dag), nodes: newNodeList };
getGraphData(newData);
- // setExperimentStatusObj(JSON.parse(ret.data.nodes_status))
}
});
}
- // graph&&graph.data(JSON.parse(ret.dag))
- // graph.render()
});
};
- // const getExperimentIn=(val)=>{
- // getExperimentIns(val).then(ret=>{
- // if(ret.code==200){
- // console.log(JSON.parse(ret.data.nodes_status));
- // setExperimentStatusObj(JSON.parse(ret.data.nodes_status))
- // setTimeout(() => {
- // console.log(experimentStatusObj);
-
- // }, 1000);
- // }
- // })
- // }
useEffect(() => {
initGraph();
getFirstWorkflow(locationParams.workflowId);
}, []);
- useEffect(() => {
- // Update the refs whenever the state changes
- messageRef.current = message;
- }, [message]);
const initGraph = () => {
const fittingString = (str, maxWidth, fontSize) => {
@@ -375,6 +307,8 @@ function ExperimentText() {
},
// linkCenter: true,
fitView: true,
+ minZoom: 0.5,
+ maxZoom: 3,
fitViewPadding: [320, 320, 220, 320],
});
graph.on('node:click', handlerClick);
@@ -386,40 +320,39 @@ function ExperimentText() {
};
};
return (
-
{logText}
}
+
{showMoreBtn && (
+ );
+}
+
+export default LogList;
diff --git a/react-ui/src/pages/Experiment/experimentText/paramsModal.less b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
similarity index 100%
rename from react-ui/src/pages/Experiment/experimentText/paramsModal.less
rename to react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
diff --git a/react-ui/src/pages/Experiment/experimentText/paramsModal.tsx b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
similarity index 91%
rename from react-ui/src/pages/Experiment/experimentText/paramsModal.tsx
rename to react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
index 1bdb0cec..f860135a 100644
--- a/react-ui/src/pages/Experiment/experimentText/paramsModal.tsx
+++ b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
@@ -6,8 +6,8 @@
import parameterImg from '@/assets/img/modal-parameter.png';
import KFModal from '@/components/KFModal';
import { type PipelineGlobalParam } from '@/types';
-import { getParamType } from './addExperimentModal';
-import styles from './paramsModal.less';
+import { getParamType } from '../AddExperimentModal';
+import styles from './index.less';
type ParamsModalProps = {
open: boolean;
@@ -24,6 +24,7 @@ function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
onOk={onCancel}
onCancel={onCancel}
cancelButtonProps={{ style: { display: 'none' } }}
+ width={825}
>
{globalParam?.map((item) => (
diff --git a/react-ui/src/pages/Experiment/experimentText/LogList.tsx b/react-ui/src/pages/Experiment/experimentText/LogList.tsx
deleted file mode 100644
index 0aff6360..00000000
--- a/react-ui/src/pages/Experiment/experimentText/LogList.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ExperimentStatus } from '../status';
-import LogGroup, { type LogGroupProps } from './logGroup';
-
-type LogListProps = {
- list: Omit[];
- status: ExperimentStatus;
-};
-
-function LogList({ list = [], status }: LogListProps) {
- return (
-
- {list.map((v) => (
-
- );
-}
-
-export default LogList;
diff --git a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less b/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less
deleted file mode 100644
index e8be2e5f..00000000
--- a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.modal {
- :global {
- // .ant-input {
- // height: 30px;
- // border-color: #e6e6e6;
- // }
- // .ant-select-single {
- // height: 40px;
- // }
- .ant-form-item .ant-form-item-label > label {
- color: rgba(29, 29, 32, 0.8);
- }
- }
-
- .global_param_item {
- max-height: 230px;
- padding: 24px 12px 0;
- overflow-y: auto;
- border: 1px solid #e6e6e6;
- border-radius: 6px;
- }
-}
diff --git a/react-ui/src/pages/Experiment/experimentText/index.less b/react-ui/src/pages/Experiment/experimentText/index.less
deleted file mode 100644
index cfe88478..00000000
--- a/react-ui/src/pages/Experiment/experimentText/index.less
+++ /dev/null
@@ -1,90 +0,0 @@
-#graph {
- position: relative;
- width: 100%;
- height: 100%;
-}
-.editPipelinePropsContent {
- display: flex;
- align-items: center;
- width: 100%;
- height: 43px;
- margin-bottom: 20px;
- padding: 0 24px;
- color: #1d1d20;
- font-size: 15px;
- font-family: 'Alibaba';
- background: #f8fbff;
-}
-.centerContainer {
- display: flex;
- flex: 1;
- flex-direction: column;
-}
-.buttonList {
- display: flex;
- align-items: center;
- width: 100%;
- height: 56px;
- padding: 0 30px;
- background: #ffffff;
- box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
-}
-.drawBox{
- :global{
- .ant-drawer .ant-drawer-body{
- overflow: hidden;
- }
-
- }
-}
-.experimentDrawer{
- :global{
- .ant-tabs >.ant-tabs-nav .ant-tabs-nav-list{
- margin-left: 24px;
- }
- .ant-drawer .ant-drawer-body{
- overflow-y: hidden;
- }
- .ant-tabs {
- height: calc(100% - 160px);
- overflow-y: auto;
- }
- }
-
-}
-.detailBox {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- color: #1d1d20;
- font-size: 15px;
- padding-left: 24px;
-
-}
-.allMessageItem {
- display: flex;
- align-items: center;
- margin-right: 30px;
- color: rgba(29, 29, 32, 0.8);
- font-size: 15px;
-}
-.param_button {
- margin-right: 0;
- margin-left: auto;
-}
-.resultTop {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 0;
- border-bottom: 1px solid #eee;
-}
-.resultContent {
- display: flex;
-
- align-items: center;
- justify-content: space-between;
- width: 100%;
- margin-bottom: 10px;
- padding: 0 20px 0 0;
-}
diff --git a/react-ui/src/pages/Experiment/experimentText/logGroup.less b/react-ui/src/pages/Experiment/experimentText/logGroup.less
deleted file mode 100644
index 4eee30d3..00000000
--- a/react-ui/src/pages/Experiment/experimentText/logGroup.less
+++ /dev/null
@@ -1,34 +0,0 @@
-.log_group {
- padding-bottom: 10px;
-}
-
-.log_group_pod {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 15px;
- background: rgba(234, 234, 234, 0.5);
- cursor: pointer;
-
- &_name {
- margin-right: 10px;
- color: #1d1d20;
- font-size: 14px;
- }
-}
-
-.log_group_detail {
- padding: 15px;
- color: white;
- font-size: 14px;
- white-space: pre-line;
- word-break: break-all;
- background: #19253b;
-}
-
-.log_group_more_button {
- display: flex;
- justify-content: center;
- color: white;
- background: #19253b;
-}
diff --git a/react-ui/src/pages/Experiment/experimentText/props.jsx b/react-ui/src/pages/Experiment/experimentText/props.jsx
deleted file mode 100644
index d5ac7999..00000000
--- a/react-ui/src/pages/Experiment/experimentText/props.jsx
+++ /dev/null
@@ -1,439 +0,0 @@
-import { getNodeResult, getQueryByExperimentLog } from '@/services/experiment/index.js';
-import { elapsedTime } from '@/utils/date';
-import { downLoadZip } from '@/utils/downloadfile';
-import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
-import { Drawer, Form, Input, Tabs, message } from 'antd';
-import moment from 'moment';
-import { forwardRef, useImperativeHandle, useState } from 'react';
-import LogList from './LogList';
-import Styles from './index.less';
-const { TextArea } = Input;
-const Props = forwardRef(({ onParentChange }, ref) => {
- const [form] = Form.useForm();
- const [stagingItem, setStagingItem] = useState({});
- const [resultObj, setResultObj] = useState([]);
- const [logList, setLogList] = useState([]);
- const statusObj = {
- Running: '运行中',
- Succeeded: '成功',
- Pending: '等待中',
- Failed: '失败',
- Error: '错误',
- Terminated: '终止',
- Skipped: '未执行',
- Omitted: '未执行',
- };
- const statusColorObj = {
- Running: '#165bff',
- Succeeded: '#63a728',
- Pending: '#f981eb',
- Failed: '#c73131',
- Error: '#c73131',
- Terminated: '#8a8a8a',
- Skipped: '#8a8a8a',
- Omitted: '#8a8a8ae',
- };
- const exportResult = (e, val) => {
- const hide = message.loading('正在下载');
- hide();
- downLoadZip(`/api/mmp/minioStorage/download`, { path: val });
- };
- const timers = (time) => {
- let timer = new Date(time);
- let hours = timer.getHours(); //转换成时
- let minutes = timer.getMinutes(); //转换成分
- let secend = timer.getSeconds(); //转换成秒
-
- let str = `${minutes}分${secend}秒`;
- return str;
- };
- const items = [
- {
- key: '1',
- label: '日志详情',
- children:
- {resultObj && resultObj.length > 0
- ? resultObj.map((item) => (
-
- ),
- icon:
-
- ))
- : null}
-
- {item.name}
-
-
-
- 文件名称
- 文件大小
-
- {item.value && item.value.length > 0
- ? item.value.map((ele) => (
-
- {ele.name}
- {ele.size}
-
- ))
- : null}
-
-
-
-
- );
-});
-
-export default Props;
diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx
index 611c18c6..057eb4e4 100644
--- a/react-ui/src/pages/Experiment/index.jsx
+++ b/react-ui/src/pages/Experiment/index.jsx
@@ -1,3 +1,4 @@
+import CommonTableCell from '@/components/CommonTableCell';
import KFIcon from '@/components/KFIcon';
import {
deleteExperimentById,
@@ -14,16 +15,15 @@ import {
} from '@/services/experiment/index.js';
import { getWorkflow } from '@/services/pipeline/index.js';
import themes from '@/styles/theme.less';
-import { elapsedTime } from '@/utils/date';
+import { elapsedTime, formatDate } from '@/utils/date';
import { to } from '@/utils/promise';
import { modalConfirm } from '@/utils/ui';
-import { Button, ConfigProvider, Space, Table, message } from 'antd';
+import { App, Button, ConfigProvider, Space, Table } from 'antd';
import classNames from 'classnames';
-import momnet from 'moment';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
+import AddExperimentModal from './components/AddExperimentModal';
import TensorBoardStatus, { TensorBoardStatusEnum } from './components/TensorBoardStatus';
-import AddExperimentModal from './experimentText/addExperimentModal';
import Styles from './index.less';
import { experimentStatusInfo } from './status';
@@ -47,6 +47,7 @@ function Experiment() {
const [isAdd, setIsAdd] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false);
const [addFormData, setAddFormData] = useState({});
+ const { message } = App.useApp();
useEffect(() => {
getList();
@@ -199,7 +200,7 @@ function Experiment() {
};
const routeToEdit = (e, record) => {
e.stopPropagation();
- navgite({ pathname: `/pipeline/pytorchtext/${record.workflow_id}/${record.workflow_name}` });
+ navgite({ pathname: `/pipeline/template/${record.workflow_id}/${record.workflow_name}` });
};
// 创建或者编辑实验接口请求
const handleAddExperiment = async (values) => {
@@ -256,7 +257,7 @@ function Experiment() {
};
const routerToText = (e, item, record) => {
e.stopPropagation();
- navgite({ pathname: `/pipeline/experimentPytorchtext/${record.workflow_id}/${item.id}` });
+ navgite({ pathname: `/pipeline/experiment/${record.workflow_id}/${item.id}` });
};
const handleTensorboard = async (experimentIn) => {
@@ -291,6 +292,8 @@ function Experiment() {
title: '实验描述',
dataIndex: 'description',
key: 'description',
+ render: CommonTableCell(true),
+ ellipsis: { showTitle: false },
},
{
title: '最近五次运行状态',
@@ -438,13 +441,9 @@ function Experiment() {
- 任务名称：{stagingItem.label}
-
-
- 执行状态：
-
-
- {statusObj[stagingItem.experimentStatus]}
-
-
-
- 启动时间：{moment(stagingItem.experimentStartTime).format('YYYY-MM-DD HH:mm:ss')}
-
-
- 耗时：
- {stagingItem.experimentEndTime
- ? elapsedTime(
- new Date(stagingItem.experimentStartTime),
- new Date(stagingItem.experimentEndTime),
- )
- : elapsedTime(new Date(stagingItem.experimentStartTime), new Date())}
-
-
- {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')}
+ {elapsedTime(item.create_time, item.finish_time)}
+ {formatDate(item.create_time)}
-
-
+ {/*
{assetCounts.map((item, index) => (
-
);
};
diff --git a/react-ui/src/pages/User/Login/login.less b/react-ui/src/pages/User/Login/login.less
index cf66dc93..88fa4035 100644
--- a/react-ui/src/pages/User/Login/login.less
+++ b/react-ui/src/pages/User/Login/login.less
@@ -1,28 +1,31 @@
.loginForm {
- width: 520px;
-}
-:global .ant-pro-form-login-main {
- margin: unset;
-}
-:global .ant-input-affix-wrapper-lg {
- padding: 19px 11px;
- color: rgba(29, 29, 32, 0.6);
- font-size: 18px;
- font-family: 'Alibaba';
- border-radius: 13px;
-}
-:global .ant-input-affix-wrapper {
- padding: 19px 11px;
- color: rgba(29, 29, 32, 0.6);
- font-size: 18px;
- font-family: 'Alibaba';
- border-radius: 13px;
-}
-:global .ant-btn.ant-btn-lg {
- height: 76px;
- color: #ffffff;
- font-size: 20px;
- font-family: 'Alibaba';
- background: #1664ff;
- border-radius: 41px;
+ :global {
+ .ant-pro-form-login-main {
+ width: auto !important;
+ max-width: auto !important;
+ margin: unset;
+ }
+ .ant-input-affix-wrapper-lg {
+ padding: 19px 11px;
+ color: rgba(29, 29, 32, 0.6);
+ font-size: 18px;
+ font-family: 'Alibaba';
+ border-radius: 13px;
+ }
+ .ant-input-affix-wrapper {
+ padding: 19px 11px;
+ color: rgba(29, 29, 32, 0.6);
+ font-size: 18px;
+ font-family: 'Alibaba';
+ border-radius: 13px;
+ }
+ .ant-btn.ant-btn-lg {
+ height: 76px;
+ color: #ffffff;
+ font-size: 20px;
+ font-family: 'Alibaba';
+ background: @primary-color;
+ border-radius: 41px;
+ }
+ }
}
diff --git a/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx b/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx
index dc1af6c9..74227506 100644
--- a/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx
+++ b/react-ui/src/pages/Workspace/components/AssetsManagement/index.tsx
@@ -35,10 +35,10 @@ function AssetsManagement() {
title: '组件',
value: component,
},
- {
- title: '代码配置',
- value: 0,
- },
+ // {
+ // title: '代码配置',
+ // value: 0,
+ // },
{
title: '流水线模版',
value: workflow,
@@ -64,9 +64,8 @@ function AssetsManagement() {
]}
/>
-
-
- 启动时间：{momnet(message.create_time).format('YYYY-MM-DD HH:mm:ss')}
-
-
- 执行时长：
- {message.finish_time
- ? elapsedTime(new Date(message.create_time), new Date(message.finish_time))
- : elapsedTime(new Date(message.create_time), new Date())}
-
-
- 状态：
-
-
- {experimentStatusInfo[message.status]?.label}
-
-
-
+
+ {
+ const [form] = Form.useForm();
+ const [experimentNodeData, setExperimentNodeData] = useState(
+ {} as PipelineNodeModelSerialize,
+ );
+ const [experimentResults, setExperimentResults] = useState([]);
+ const [experimentLogList, setExperimentLogList] = useState([]);
+
+ const items = [
+ {
+ key: '1',
+ label: '日志详情',
+ children: (
+
+
+ );
+});
+
+export default Props;
diff --git a/react-ui/src/pages/Mirror/create.less b/react-ui/src/pages/Mirror/Create/index.less
similarity index 73%
rename from react-ui/src/pages/Mirror/create.less
rename to react-ui/src/pages/Mirror/Create/index.less
index 902e2875..84f4c197 100644
--- a/react-ui/src/pages/Mirror/create.less
+++ b/react-ui/src/pages/Mirror/Create/index.less
@@ -9,9 +9,9 @@
background-color: white;
border-radius: 10px;
- &__title {
- display: flex;
- align-items: center;
+ &__type {
+ color: @text-color;
+ font-size: @font-size-input-lg;
}
}
}
diff --git a/react-ui/src/pages/Mirror/create.tsx b/react-ui/src/pages/Mirror/Create/index.tsx
similarity index 88%
rename from react-ui/src/pages/Mirror/create.tsx
rename to react-ui/src/pages/Mirror/Create/index.tsx
index 8ac38f6c..6ffaf808 100644
--- a/react-ui/src/pages/Mirror/create.tsx
+++ b/react-ui/src/pages/Mirror/Create/index.tsx
@@ -11,13 +11,17 @@ import SubAreaTitle from '@/components/SubAreaTitle';
import { CommonTabKeys } from '@/enums';
import { createMirrorReq } from '@/services/mirror';
import { to } from '@/utils/promise';
-import { getSessionItemThenRemove, mirrorNameKey } from '@/utils/sessionStorage';
-import { getFileListFromEvent } from '@/utils/ui';
+import {
+ getSessionStorageItem,
+ mirrorNameKey,
+ removeSessionStorageItem,
+} from '@/utils/sessionStorage';
+import { getFileListFromEvent, validateUploadFiles } from '@/utils/ui';
import { useNavigate } from '@umijs/max';
-import { Button, Col, Form, Input, Row, Upload, UploadFile, message, type UploadProps } from 'antd';
+import { App, Button, Col, Form, Input, Row, Upload, UploadFile, type UploadProps } from 'antd';
import { omit } from 'lodash';
import { useEffect, useState } from 'react';
-import styles from './create.less';
+import styles from './index.less';
type FormData = {
name: string;
@@ -45,6 +49,7 @@ function MirrorCreate() {
const navgite = useNavigate();
const [form] = Form.useForm();
const [nameDisabled, setNameDisabled] = useState(false);
+ const { message } = App.useApp();
const uploadProps: UploadProps = {
action: '/api/mmp/image/upload',
@@ -56,11 +61,14 @@ function MirrorCreate() {
};
useEffect(() => {
- const name = getSessionItemThenRemove(mirrorNameKey);
+ const name = getSessionStorageItem(mirrorNameKey);
if (name) {
form.setFieldValue('name', name);
setNameDisabled(true);
}
+ return () => {
+ removeSessionStorageItem(mirrorNameKey);
+ };
}, []);
// 创建公网、本地镜像
@@ -75,30 +83,16 @@ function MirrorCreate() {
};
} else {
const fileList = formData['fileList'] ?? [];
- if (fileList.length === 0) {
- message.error('请上传文件');
- return;
+ if (validateUploadFiles(fileList)) {
+ const file = fileList[0];
+ params = {
+ ...omit(formData, ['fileList', 'upload_type']),
+ path: file.response.data.url,
+ file_size: file.response.data.fileSize,
+ upload_type: 1,
+ image_type: 0,
+ };
}
- const file = fileList[0];
- if (file.status === 'uploading') {
- message.error('请等待文件上传完成');
- return;
- } else if (file.status === 'error') {
- message.error('文件上传失败，请重新上传文件');
- return;
- }
- if (!file.response || !file.response.data) {
- message.error('文件上传失败，请重新上传文件');
- return;
- }
-
- params = {
- ...omit(formData, ['fileList', 'upload_type']),
- path: file.response.data.url,
- file_size: file.response.data.fileSize,
- upload_type: 1,
- image_type: 0,
- };
}
const [res] = await to(createMirrorReq(params));
@@ -118,6 +112,7 @@ function MirrorCreate() {
navgite(-1);
};
+ // 上传前认证
const beforeUpload: UploadProps['beforeUpload'] = () => {
const fileList = form.getFieldValue('fileList');
if (Array.isArray(fileList) && fileList.length >= 1) {
@@ -134,12 +129,13 @@ function MirrorCreate() {
- }
- open={isModalOpen}
- className={Styles.modal}
- okButtonProps={{
- htmlType: 'submit',
- form: 'form',
- }}
- onCancel={handleCancel}
- >
-
-
-
- );
-};
-export default PublicData;
diff --git a/react-ui/src/pages/ModelDeployment/Create/index.less b/react-ui/src/pages/ModelDeployment/Create/index.less
new file mode 100644
index 00000000..f098861f
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/Create/index.less
@@ -0,0 +1,19 @@
+.model-deployment-create {
+ height: 100%;
+
+ &__content {
+ height: calc(100% - 60px);
+ margin-top: 10px;
+ padding: 30px 30px 10px;
+ overflow: auto;
+ color: @text-color;
+ font-size: @font-size-content;
+ background-color: white;
+ border-radius: 10px;
+
+ &__type {
+ color: @text-color;
+ font-size: @font-size-input-lg;
+ }
+ }
+}
diff --git a/react-ui/src/pages/ModelDeployment/Create/index.tsx b/react-ui/src/pages/ModelDeployment/Create/index.tsx
new file mode 100644
index 00000000..1c9d25b8
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/Create/index.tsx
@@ -0,0 +1,449 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 创建模型部署
+ */
+import KFIcon from '@/components/KFIcon';
+import PageTitle from '@/components/PageTitle';
+import ParameterInput from '@/components/ParameterInput';
+import SubAreaTitle from '@/components/SubAreaTitle';
+import { CommonTabKeys } from '@/enums';
+import { useComputingResource } from '@/hooks/resource';
+import ResourceSelectorModal, {
+ ResourceSelectorResponse,
+ ResourceSelectorType,
+ selectorTypeConfig,
+} from '@/pages/Pipeline/components/ResourceSelectorModal';
+import {
+ createModelDeploymentReq,
+ restartModelDeploymentReq,
+ updateModelDeploymentReq,
+} from '@/services/modelDeployment';
+import { camelCaseToUnderscore, underscoreToCamelCase } from '@/utils';
+import { openAntdModal } from '@/utils/modal';
+import { to } from '@/utils/promise';
+import {
+ getSessionStorageItem,
+ modelDeploymentInfoKey,
+ removeSessionStorageItem,
+} from '@/utils/sessionStorage';
+import { modalConfirm } from '@/utils/ui';
+import { useNavigate } from '@umijs/max';
+import { App, Button, Col, Flex, Form, Input, Row, Select } from 'antd';
+import { omit, pick } from 'lodash';
+import { useEffect, useState } from 'react';
+import { ModelDeploymentData, ModelDeploymentOperationType } from '../types';
+import styles from './index.less';
+
+// 表单数据
+export type FormData = {
+ serviceName: string; // 服务名称
+ description: string; // 描述
+ model: {
+ id: number;
+ version: string;
+ value: string;
+ showValue: string;
+ }; // 模型
+ image: string; // 镜像
+ resource: string; // 资源规格
+ replicas: string; // 副本数量
+ modelPath: string; // 模型路径
+ env: { key: string; value: string }[]; // 环境变量
+};
+
+function ModelDeploymentCreate() {
+ const navgite = useNavigate();
+ const [form] = Form.useForm();
+ const [resourceStandardList, filterResourceStandard] = useComputingResource();
+ const [selectedModel, setSelectedModel] = useState(
+ undefined,
+ ); // 选择的模型，为了再次打开时恢复原来的选择
+ const [operationType, setOperationType] = useState(ModelDeploymentOperationType.Create);
+ const [modelDeploymentInfo, setModelDeploymentInfo] = useState(
+ undefined,
+ );
+ const { message } = App.useApp();
+
+ useEffect(() => {
+ const res = getSessionStorageItem(modelDeploymentInfoKey, true);
+ if (res) {
+ setOperationType(res.operationType);
+ setModelDeploymentInfo(res);
+ const formData = underscoreToCamelCase(res) as FormData;
+ form.setFieldsValue(formData);
+ }
+ return () => {
+ removeSessionStorageItem(modelDeploymentInfoKey);
+ };
+ }, []);
+
+ // 获取选择数据集、模型后面按钮 icon
+ const getSelectBtnIcon = (type: ResourceSelectorType) => {
+ return );
+
+ const object = camelCaseToUnderscore({
+ ...omit(formData, ['replicas', 'env']),
+ replicas: Number(formData.replicas),
+ env,
+ });
+
+ const params =
+ operationType === ModelDeploymentOperationType.Create
+ ? object
+ : {
+ ...pick(modelDeploymentInfo, ['service_id', 'service_ins_id']),
+ update_model: {
+ ...pick(object, ['description', 'env', 'replicas', 'resource', 'image']),
+ },
+ };
+
+ let request = createModelDeploymentReq;
+ if (operationType === ModelDeploymentOperationType.Restart) {
+ request = restartModelDeploymentReq;
+ } else if (operationType === ModelDeploymentOperationType.Update) {
+ request = updateModelDeploymentReq;
+ }
+ const [res] = await to(request(params));
+ if (res) {
+ message.success('操作成功');
+ navgite(-1);
+ }
+ };
+
+ // 提交
+ const handleSubmit = (values: FormData) => {
+ createModelDeployment(values);
+ };
+
+ // 取消
+ const cancel = () => {
+ navgite(-1);
+ };
+
+ const disabled = operationType !== ModelDeploymentOperationType.Create;
+ let buttonText = '新建';
+ if (operationType === ModelDeploymentOperationType.Update) {
+ buttonText = '更新';
+ } else if (operationType === ModelDeploymentOperationType.Restart) {
+ buttonText = '重启';
+ }
+
+ return (
+ ('1');
+ const [modelDeployementInfo] = useSessionStorage(
+ modelDeploymentInfoKey,
+ true,
+ undefined,
+ );
+ const getResourceDescription = useComputingResource()[2];
+
+ useEffect(() => {}, []);
+
+ // 切换 Tab，重置数据
+ const hanleTabChange: TabsProps['onChange'] = (value) => {
+ setActiveTab(value);
+ };
+
+ const formatEnvText = () => {
+ if (!modelDeployementInfo?.env) {
+ return '--';
+ }
+ const env = modelDeployementInfo.env;
+ return Object.entries(env)
+ .map(([key, value]) => `${key}: ${value}`)
+ .join('\n');
+ };
+
+ return (
+ ([]);
+ const [total, setTotal] = useState(0);
+ const [pagination, setPagination] = useState(
+ cacheState?.pagination ?? {
+ current: 1,
+ pageSize: 10,
+ },
+ );
+
+ useEffect(() => {
+ getModelDeploymentList();
+ }, [pagination, searchText, searchStatus]);
+
+ // 获取模型部署列表
+ const getModelDeploymentList = async () => {
+ const params: Record = {
+ page: pagination.current!,
+ size: pagination.pageSize,
+ service_name: searchText,
+ status: searchStatus,
+ };
+ const [res] = await to(getModelDeploymentListReq(params));
+ if (res && res.data) {
+ const { service_list = [], total = 0 } = res.data;
+ setTableData(service_list);
+ setTotal(total);
+ }
+ };
+
+ // 删除模型部署
+ const deleteModelDeploy = async (record: ModelDeploymentData) => {
+ const params = pick(record, ['service_id', 'service_ins_id']);
+ const [res] = await to(deleteModelDeploymentReq(params));
+ if (res) {
+ message.success('删除成功');
+ // 如果是一页的唯一数据，删除时，请求第一页的数据
+ // 否则直接刷新这一页的数据
+ // 避免回到第一页
+ if (tableData.length > 1) {
+ setPagination((prev) => ({
+ ...prev,
+ current: 1,
+ }));
+ } else {
+ getModelDeploymentList();
+ }
+ }
+ };
+
+ // 停止模型部署
+ const stopModelDeploy = async (record: ModelDeploymentData) => {
+ const params = pick(record, ['service_id', 'service_ins_id']);
+ const [res] = await to(stopModelDeploymentReq(params));
+ if (res) {
+ message.success('操作成功');
+ getModelDeploymentList();
+ }
+ };
+
+ // 搜索
+ const onSearch: SearchProps['onSearch'] = (value) => {
+ setSearchText(value);
+ };
+
+ // 处理删除
+ const handleModelDeployDelete = (record: ModelDeploymentData) => {
+ modalConfirm({
+ title: '删除后，该模型部署将不可恢复',
+ content: '是否确认删除?',
+ onOk: () => {
+ deleteModelDeploy(record);
+ },
+ });
+ };
+
+ // 处理停止
+ const handleModelDeployStop = async (record: ModelDeploymentData) => {
+ modalConfirm({
+ content: '是否确认停止?',
+ onOk: () => {
+ stopModelDeploy(record);
+ },
+ });
+ };
+
+ // 创建、更新、重启模型部署
+ const createModelDeployment = (
+ type: ModelDeploymentOperationType,
+ record?: ModelDeploymentData,
+ ) => {
+ setSessionStorageItem(
+ modelDeploymentInfoKey,
+ {
+ ...record,
+ operationType: type,
+ },
+ true,
+ );
+
+ setCacheState({
+ pagination,
+ searchText,
+ searchStatus,
+ });
+
+ navigate(`/modelDeployment/create`);
+ };
+
+ // 查看详情
+ const toDetail = (record: ModelDeploymentData) => {
+ setSessionStorageItem(modelDeploymentInfoKey, record, true);
+
+ setCacheState({
+ pagination,
+ searchText,
+ searchStatus,
+ });
+
+ navigate(`/modelDeployment/${record.service_id}`);
+ };
+
+ // 分页切换
+ const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => {
+ if (action === 'paginate') {
+ setPagination(pagination);
+ }
+ // console.log(pagination, filters, sorter, action);
+ };
+
+ const columns: TableProps['columns'] = [
+ {
+ title: '序号',
+ dataIndex: 'index',
+ key: 'index',
+ width: '20%',
+ render(text, record, index) {
+ return {(pagination.current! - 1) * pagination.pageSize! + index + 1};
+ },
+ },
+ {
+ title: '服务名称',
+ dataIndex: 'service_name',
+ key: 'service_name',
+ width: '20%',
+ render: (text, record) => {
+ return toDetail(record)}>{text};
+ },
+ },
+ {
+ title: '模型',
+ dataIndex: ['model', 'show_value'],
+ key: 'model',
+ width: '20%',
+ render: CommonTableCell(),
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: '20%',
+ render: ModelDeploymentStatusCell,
+ },
+ {
+ title: '创建人',
+ dataIndex: 'created_by',
+ key: 'created_by',
+ render: CommonTableCell(),
+ width: '20%',
+ },
+ {
+ title: '更新时间',
+ dataIndex: 'update_time',
+ key: 'update_time',
+ width: '20%',
+ render: DateTableCell,
+ },
+ {
+ title: '操作',
+ dataIndex: 'operation',
+ width: 350,
+ key: 'operation',
+ render: (_: any, record: ModelDeploymentData) => (
+ = {
+ [ModelDeploymentStatus.Init]: {
+ text: '启动中',
+ classname: styles['model-deployment-status-cell'],
+ },
+ [ModelDeploymentStatus.Running]: {
+ classname: styles['model-deployment-status-cell--running'],
+ text: '运行中',
+ },
+ [ModelDeploymentStatus.Stopped]: {
+ classname: styles['model-deployment-status-cell--stopped'],
+ text: '已停止',
+ },
+ [ModelDeploymentStatus.Failed]: {
+ classname: styles['model-deployment-status-cell--error'],
+ text: '失败',
+ },
+ [ModelDeploymentStatus.Pending]: {
+ classname: styles['model-deployment-status-cell--pending'],
+ text: '挂起中',
+ },
+};
+
+function ModelDeploymentStatusCell(status?: ModelDeploymentStatus | null) {
+ if (status === null || status === undefined || !statusInfo[status]) {
+ return --;
+ }
+ return {statusInfo[status].text};
+}
+
+export default ModelDeploymentStatusCell;
diff --git a/react-ui/src/pages/ModelDeployment/types.ts b/react-ui/src/pages/ModelDeployment/types.ts
new file mode 100644
index 00000000..c8dfe808
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/types.ts
@@ -0,0 +1,32 @@
+import { ModelDeploymentStatus } from '@/enums';
+
+// 模型部署列表数据类型
+export type ModelDeploymentData = {
+ service_id: number;
+ service_ins_id: number;
+ service_name: string;
+ description: string;
+ status: ModelDeploymentStatus;
+ update_time: string;
+ create_time: string;
+ created_by: string;
+ model_path: string;
+ url: string;
+ image: string;
+ replicas: number;
+ resource: string;
+ model: {
+ id: number;
+ version: string;
+ path: string;
+ show_value: string;
+ };
+ env: Record;
+};
+
+// 操作类型
+export enum ModelDeploymentOperationType {
+ Create = 'Create',
+ Update = 'Update',
+ Restart = 'Restart',
+}
diff --git a/react-ui/src/pages/Monitor/Job/edit.tsx b/react-ui/src/pages/Monitor/Job/edit.tsx
index 58dc7785..7a7e5e24 100644
--- a/react-ui/src/pages/Monitor/Job/edit.tsx
+++ b/react-ui/src/pages/Monitor/Job/edit.tsx
@@ -1,4 +1,5 @@
import { DictOptionType, DictValueEnumObj } from '@/components/DictTag';
+import KFModal from '@/components/KFModal';
import {
ProForm,
ProFormCaptcha,
@@ -9,9 +10,8 @@ import {
ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
-import { Form, Modal } from 'antd';
+import { Form } from 'antd';
import React, { useEffect } from 'react';
-import KFModal from '@/components/KFModal';
/**
* 定时任务调度 Edit Form
*
diff --git a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less
new file mode 100644
index 00000000..cd10e0d8
--- /dev/null
+++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less
@@ -0,0 +1,29 @@
+.form-item {
+ position: relative;
+ padding-top: 40px;
+ border-bottom: 1px dashed rgba(20, 49, 179, 0.12);
+
+ &__delete-button {
+ position: absolute;
+ top: 5px;
+ right: 24px;
+ }
+
+ :global {
+ .anticon.anticon-question-circle {
+ margin-top: -14px;
+ }
+ }
+}
+
+.form-item-add {
+ margin-top: 15px;
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &__add-button {
+ padding: 0;
+ }
+}
diff --git a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
similarity index 87%
rename from react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx
rename to react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
index 7ab95f5d..7336b333 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx
+++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
@@ -1,15 +1,13 @@
-import {
- getParamComponent,
- getParamRules,
-} from '@/pages/Experiment/experimentText/addExperimentModal';
+import KFIcon from '@/components/KFIcon';
+import { getParamComponent, getParamRules } from '@/pages/Experiment/components/AddExperimentModal';
import { type PipelineGlobalParam } from '@/types';
import { to } from '@/utils/promise';
import { modalConfirm } from '@/utils/ui';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
import { Button, Drawer, Form, Input, Radio, Tooltip } from 'antd';
import { NamePath } from 'antd/es/form/interface';
import { forwardRef, useImperativeHandle } from 'react';
-import styles from './globalParamsDrawer.less';
+import styles from './index.less';
type GlobalParamsDrawerProps = {
open: boolean;
@@ -22,7 +20,7 @@ const GlobalParamsDrawer = forwardRef(
const [form] = Form.useForm();
useImperativeHandle(ref, () => ({
- getFieldsValue: async () => {
+ validateFields: async () => {
const [values, error] = await to(form.validateFields());
if (!error && values) {
return values;
@@ -30,6 +28,9 @@ const GlobalParamsDrawer = forwardRef(
return Promise.reject(error);
}
},
+ getFieldsValue: () => {
+ return form.getFieldsValue();
+ },
}));
// 处理参数类型变化
@@ -55,14 +56,14 @@ const GlobalParamsDrawer = forwardRef(
getContainer={false}
onClose={onClose}
open={open}
- width={420}
+ width={520}
>
- */}
+
-
+ 启动时间：{formatDate(message.create_time)}
+
+
+ 执行时长：
+ {elapsedTime(message.create_time, message.finish_time)}
+
+
+ 状态：
+
+
+ {experimentStatusInfo[message.status]?.label}
+
-
+
+
+
+ 任务名称：{experimentNodeData.label}
+
+
+ 执行状态：
+
+
+ {experimentStatusInfo[experimentNodeData.experimentStatus]?.label}
+
+
+
+ 启动时间：{formatDate(experimentNodeData.experimentStartTime)}
+
+
+ 耗时：
+ {elapsedTime(
+ experimentNodeData.experimentStartTime,
+ experimentNodeData.experimentEndTime,
+ )}
+
+
+
+ );
+}
+
+export default ModelDeploymentCreate;
diff --git a/react-ui/src/pages/ModelDeployment/Info/index.less b/react-ui/src/pages/ModelDeployment/Info/index.less
new file mode 100644
index 00000000..f1a0416c
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/Info/index.less
@@ -0,0 +1,56 @@
+.model-deployment-info {
+ height: 100%;
+
+ &__basic {
+ &__item {
+ display: flex;
+ align-items: flex-start;
+ font-size: 16px;
+ line-height: 1.6;
+
+ .label {
+ flex: none;
+ width: 80px;
+ color: @text-color-secondary;
+ }
+
+ .value {
+ flex: 1;
+ color: @text-color;
+ white-space: pre-line;
+ word-break: break-all;
+ }
+ }
+ }
+
+ &__content {
+ height: calc(100% - 60px);
+ margin-top: 10px;
+ padding: 30px 30px 0;
+ background-color: white;
+ border-radius: 10px;
+
+ &__title {
+ display: flex;
+ align-items: center;
+ }
+
+ &__table {
+ :global {
+ .ant-table-wrapper {
+ height: 100%;
+ .ant-spin-nested-loading {
+ height: 100%;
+ }
+ .ant-spin-container {
+ height: 100%;
+ }
+ .ant-table {
+ height: calc(100% - 74px);
+ overflow: auto;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/react-ui/src/pages/ModelDeployment/Info/index.tsx b/react-ui/src/pages/ModelDeployment/Info/index.tsx
new file mode 100644
index 00000000..bd809f68
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/Info/index.tsx
@@ -0,0 +1,194 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 镜像详情
+ */
+import KFIcon from '@/components/KFIcon';
+import PageTitle from '@/components/PageTitle';
+import SubAreaTitle from '@/components/SubAreaTitle';
+import { useComputingResource } from '@/hooks/resource';
+import { useSessionStorage } from '@/hooks/sessionStorage';
+import { formatDate } from '@/utils/date';
+import { modelDeploymentInfoKey } from '@/utils/sessionStorage';
+import { Col, Row, Tabs, type TabsProps } from 'antd';
+import { useEffect, useState } from 'react';
+import ModelDeploymentStatusCell from '../components/ModelDeployStatusCell';
+import { ModelDeploymentData } from '../types';
+import styles from './index.less';
+
+const tabItems = [
+ {
+ key: '1',
+ label: '预测',
+ icon:
+
+
+
+
+
+
+ );
+}
+
+export default ModelDeploymentInfo;
diff --git a/react-ui/src/pages/ModelDeployment/List/index.less b/react-ui/src/pages/ModelDeployment/List/index.less
new file mode 100644
index 00000000..9e521f70
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/List/index.less
@@ -0,0 +1,21 @@
+.model-deployment {
+ height: 100%;
+ &__content {
+ height: calc(100% - 60px);
+ margin-top: 10px;
+ padding: 20px 30px 0;
+ background-color: white;
+ border-radius: 10px;
+
+ &__filter {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ &__table {
+ height: calc(100% - 32px - 28px);
+ margin-top: 28px;
+ }
+ }
+}
diff --git a/react-ui/src/pages/ModelDeployment/List/index.tsx b/react-ui/src/pages/ModelDeployment/List/index.tsx
new file mode 100644
index 00000000..bc1f03dd
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/List/index.tsx
@@ -0,0 +1,349 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 模型部署列表
+ */
+import CommonTableCell from '@/components/CommonTableCell';
+import DateTableCell from '@/components/DateTableCell';
+import KFIcon from '@/components/KFIcon';
+import PageTitle from '@/components/PageTitle';
+import { ModelDeploymentStatus, modelDeploymentStatusOptions } from '@/enums';
+import { useCacheState } from '@/hooks/pageCacheState';
+import {
+ deleteModelDeploymentReq,
+ getModelDeploymentListReq,
+ stopModelDeploymentReq,
+} from '@/services/modelDeployment';
+import themes from '@/styles/theme.less';
+import { to } from '@/utils/promise';
+import { modelDeploymentInfoKey, setSessionStorageItem } from '@/utils/sessionStorage';
+import { modalConfirm } from '@/utils/ui';
+import { useNavigate } from '@umijs/max';
+import {
+ App,
+ Button,
+ ConfigProvider,
+ Input,
+ Select,
+ Table,
+ type TablePaginationConfig,
+ type TableProps,
+} from 'antd';
+import { type SearchProps } from 'antd/es/input';
+import classNames from 'classnames';
+import { pick } from 'lodash';
+import { useEffect, useState } from 'react';
+import ModelDeploymentStatusCell from '../components/ModelDeployStatusCell';
+import { ModelDeploymentData, ModelDeploymentOperationType } from '../types';
+import styles from './index.less';
+
+function ModelDeployment() {
+ const navigate = useNavigate();
+ const { message } = App.useApp();
+ const [cacheState, setCacheState] = useCacheState();
+ const [searchStatus, setSearchStatus] = useState(cacheState?.searchStatus ?? '');
+ const [searchText, setSearchText] = useState(cacheState?.searchText);
+ const [inputText, setInputText] = useState(cacheState?.searchText);
+ const [tableData, setTableData] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 服务名称：
+
+ {modelDeployementInfo?.service_name ?? '--'}
+
+
+
+
+ 镜 像：
+ {modelDeployementInfo?.image ?? '--'}
+
+
+
+ 状 态：
+
+ {ModelDeploymentStatusCell(modelDeployementInfo?.status)}
+
+
+
+
+ 模 型：
+
+ {modelDeployementInfo?.model?.show_value ?? '--'}
+
+
+
+
+ 创建人：
+ {modelDeployementInfo?.created_by ?? '--'}
+
+
+
+ 挂载路径：
+ {modelDeployementInfo?.model_path ?? '--'}
+
+
+
+ API URL：
+ {modelDeployementInfo?.url ?? '--'}
+
+
+
+ 副本数量：
+ {modelDeployementInfo?.replicas ?? '--'}
+
+
+
+ 创建时间：
+
+ {modelDeployementInfo?.create_time
+ ? formatDate(modelDeployementInfo.create_time)
+ : '--'}
+
+
+
+
+ 更新时间：
+
+ {modelDeployementInfo?.update_time
+ ? formatDate(modelDeployementInfo.update_time)
+ : '--'}
+
+
+
+
+ 环境变量：
+ {formatEnvText()}
+
+
+
+ 资源规格：
+
+ {modelDeployementInfo?.resource
+ ? getResourceDescription(modelDeployementInfo.resource)
+ : '--'}
+
+
+
+
+ 描 述：
+ {modelDeployementInfo?.description ?? '--'}
+
+
+
+ }
+ onClick={() => createModelDeployment(ModelDeploymentOperationType.Update, record)}
+ >
+ 更新
+
+ {(record.status === ModelDeploymentStatus.Failed ||
+ record.status === ModelDeploymentStatus.Stopped) && (
+ }
+ onClick={() => createModelDeployment(ModelDeploymentOperationType.Restart, record)}
+ >
+ 重启
+
+ )}
+ {(record.status === ModelDeploymentStatus.Running ||
+ record.status === ModelDeploymentStatus.Init ||
+ record.status === ModelDeploymentStatus.Pending) && (
+ }
+ onClick={() => handleModelDeployStop(record)}
+ >
+ 停止
+
+ )}
+
+ }
+ onClick={() => handleModelDeployDelete(record)}
+ >
+ 删除
+
+
+
+ ),
+ },
+ ];
+
+ return (
+
+
+ );
+}
+
+export default ModelDeployment;
diff --git a/react-ui/src/pages/ModelDeployment/components/ModelDeployStatusCell/index.less b/react-ui/src/pages/ModelDeployment/components/ModelDeployStatusCell/index.less
new file mode 100644
index 00000000..bd0b3e52
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/components/ModelDeployStatusCell/index.less
@@ -0,0 +1,19 @@
+.model-deployment-status-cell {
+ color: @text-color;
+
+ &--running {
+ color: @primary-color;
+ }
+
+ &--stopped {
+ color: @abort-color;
+ }
+
+ &--error {
+ color: @error-color;
+ }
+
+ &--pending {
+ color: @warning-color;
+ }
+}
diff --git a/react-ui/src/pages/ModelDeployment/components/ModelDeployStatusCell/index.tsx b/react-ui/src/pages/ModelDeployment/components/ModelDeployStatusCell/index.tsx
new file mode 100644
index 00000000..b8942237
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/components/ModelDeployStatusCell/index.tsx
@@ -0,0 +1,44 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-18 18:35:41
+ * @Description: 模型部署状态
+ */
+import { ModelDeploymentStatus } from '@/enums';
+import styles from './index.less';
+
+export type ModelDeploymentStatusInfo = {
+ text: string;
+ classname: string;
+};
+
+export const statusInfo: Record
+
+
+ setInputText(e.target.value)}
+ style={{ width: 300 }}
+ value={inputText}
+ allowClear
+ />
+
+
+ }
+ >
+ 刷新
+
+
+
+
+
+ 今日新增数量：5
- 今日新增数量：5
*/}
+ {item.title}
diff --git a/react-ui/src/pages/Workspace/components/ExperimentChart/index.less b/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
index 3891b3f4..a723c650 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
+++ b/react-ui/src/pages/Workspace/components/ExperimentChart/index.less
@@ -2,6 +2,6 @@
width: 295px;
min-width: 295px;
height: 140px;
- background-color: @workspace-background;
+ background: @workspace-background;
border-radius: 4px;
}
diff --git a/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx b/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
index f4d30fe1..89c1f34d 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
+++ b/react-ui/src/pages/Workspace/components/ExperimentChart/index.tsx
@@ -140,6 +140,7 @@ function ExperimentChart({ chartData, style }: ExperimentChartProps) {
itemStyle: {
borderRadius: 3,
},
+ minAngle: 5,
label: {
show: false,
},
@@ -152,11 +153,11 @@ function ExperimentChart({ chartData, style }: ExperimentChartProps) {
show: false,
},
data: [
- { value: chartData.Failed, name: '失败' },
- { value: chartData.Succeeded, name: '成功' },
- { value: chartData.Terminated, name: '中止' },
- { value: chartData.Pending, name: '等待' },
- { value: chartData.Running, name: '运行中' },
+ { value: chartData.Failed > 0 ? chartData.Failed : null, name: '失败' },
+ { value: chartData.Succeeded > 0 ? chartData.Succeeded : null, name: '成功' },
+ { value: chartData.Terminated > 0 ? chartData.Terminated : null, name: '中止' },
+ { value: chartData.Pending > 0 ? chartData.Pending : null, name: '等待' },
+ { value: chartData.Running > 0 ? chartData.Running : null, name: '运行中' },
],
},
{
diff --git a/react-ui/src/pages/Workspace/components/ExperimentTable/index.less b/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
index 85c5e42d..fc83b21d 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.less
@@ -3,7 +3,7 @@
min-width: 500px;
height: 140px;
padding: 12px 24px;
- background-color: @workspace-background;
+ background: @workspace-background;
border-radius: 4px;
&__header {
@@ -36,15 +36,15 @@
}
&__duration {
- width: 25%;
+ width: 30%;
}
&__date {
- width: 35%;
+ width: calc(50% - 60px);
}
&__operation {
- width: 20%;
+ width: 60px;
:global {
.ant-btn-link {
diff --git a/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
index 7a179a39..a0f33e9b 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
@@ -13,7 +13,7 @@ type ExperimentTableProps = {
function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
const navgite = useNavigate();
const gotoExperiment = (record: ExperimentInstance) => {
- navgite(`/pipeline/experimentPytorchtext/${record.workflow_id}/${record.id}`);
+ navgite(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
};
return (
@@ -34,10 +34,7 @@ function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
/>
- {elapsedTime(
- new Date(item.create_time),
- item.finish_time ? new Date(item.finish_time) : new Date(),
- )}
+ {elapsedTime(item.create_time, item.finish_time)}
{formatDate(item.create_time)}
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.less b/react-ui/src/pages/Workspace/components/QuickStart/index.less
index f5eb76f4..5932d971 100644
--- a/react-ui/src/pages/Workspace/components/QuickStart/index.less
+++ b/react-ui/src/pages/Workspace/components/QuickStart/index.less
@@ -1,5 +1,5 @@
.quick-start {
- width: calc(100% - 326px);
+ width: calc(100% - 326px - 15px);
padding: 20px 30px;
background-color: white;
border-radius: 4px;
@@ -25,25 +25,21 @@
&__canvas {
position: relative;
- width: 1223px;
height: 610px;
transform-origin: center left;
&__model {
position: absolute;
- top: 358px;
- left: 920px;
display: flex;
flex-direction: column;
align-items: center;
+ width: 60px;
color: @primary-color;
font-size: @font-size;
}
&__task {
position: absolute;
- top: 110px;
- left: 603px;
display: flex;
align-items: center;
justify-content: center;
diff --git a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
index d1995244..f070fcf0 100644
--- a/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
+++ b/react-ui/src/pages/Workspace/components/QuickStart/index.tsx
@@ -9,35 +9,54 @@ import styles from './index.less';
function QuickStart() {
const navgite = useNavigate();
const [scale, setScale] = useState(1);
+ const [space, setSpace] = useState(29);
+ const [canvasWidth, setCanvasWidth] = useState('100%');
useEffect(() => {
const changeScale = () => {
+ // body 的宽度 - 菜单的宽度 - 两个 padding - 右边用户管理的宽度 - 右边用户管理的 marginLeft - 滚动条的宽度,
const width = document.body.offsetWidth - 256 - 80 - 60 - 326 - 15 - 8;
- const ratio = width >= 1223 ? 1 : width / 1223;
- setScale(ratio);
+ if (width >= 1223) {
+ const spaceX = (width - 192 * 5 - 60) / 7;
+ setSpace(spaceX);
+ setCanvasWidth('100%');
+ setScale(1.0);
+ } else {
+ const ratio = width / 1223;
+ setCanvasWidth('1223px');
+ setSpace(29);
+ setScale(ratio);
+ }
};
+ changeScale();
+
const debounceFunc = debounce(changeScale, 16);
window.addEventListener('resize', debounceFunc);
-
return () => {
window.removeEventListener('resize', debounceFunc);
};
}, []);
+ const arrowWidth = space - 12;
+ const left = space;
+ const taskWholeWidth = 192 - 56 + 90 + space - 143;
+ const taskLeftArrowWidth = taskWholeWidth * (56 / (56 + 49));
+ const taskRightArrowWidth = taskWholeWidth * (49 / (56 + 49));
+
return (
navgite('/datasetPreparation/datasetAnnotation')}
/>
@@ -45,7 +64,7 @@ function QuickStart() {
content="为开发者提供定制化编辑器，开发者可根据自己需求选择配置，保存编译器中的调试环境为镜像供训练使用"
buttonText="开发环境"
buttonTop={20}
- x={248}
+ x={left + 192 + space}
y={301}
onClick={() => navgite('/developmentEnvironment')}
/>
@@ -54,87 +73,93 @@ function QuickStart() {
tips="可视化建模Designer"
buttonText="流水线"
buttonTop={20}
- x={476}
+ x={left + 2 * (192 + space)}
y={276}
- onClick={() => navgite('/pipeline/pipelineText')}
+ onClick={() => navgite('/pipeline/template')}
/>
navgite('/pipeline/experimentText')}
+ onClick={() => navgite('/pipeline/experiment')}
/>
navgite('/modelDseployment')}
/>
-
快速开始
+
+
工作空间管理
- 
+
{users?.map((item, index) => {
return (
- 
+ icon={
+ })
+ }
+ >
);
})}
diff --git a/react-ui/src/pages/Workspace/index.less b/react-ui/src/pages/Workspace/index.less
index 1a454f38..f7f95a24 100644
--- a/react-ui/src/pages/Workspace/index.less
+++ b/react-ui/src/pages/Workspace/index.less
@@ -2,9 +2,10 @@
height: 100%;
padding: 20px 30px 10px;
overflow-y: auto;
- background-color: linear-gradient(#ecf2fe, #f9fafb);
+ background: linear-gradient(#ecf2fe, #f9fafb);
&__overview {
+ gap: 15px;
margin-bottom: 16px;
padding: 20px 30px;
background-color: white;
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 2a9d6413..d2cd41b7 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -3,7 +3,7 @@
* @Date: 2024-03-25 13:52:54
* @Description: 网络请求配置，详情请参考 https://umijs.org/docs/max/request
*/
-import type { RequestConfig } from '@umijs/max';
+import type { AxiosRequestConfig, AxiosResponse, RequestConfig } from '@umijs/max';
import { message } from 'antd';
import { clearSessionToken, getAccessToken } from './access';
import { setRemoteMenu } from './services/session';
@@ -16,8 +16,8 @@ import { gotoLoginPage } from './utils/ui';
export const requestConfig: RequestConfig = {
errorConfig: {},
requestInterceptors: [
- (url: any, options: { headers: any }) => {
- const headers = options.headers ? options.headers : [];
+ (url: string, options: AxiosRequestConfig) => {
+ const headers = options.headers ?? {};
const authHeader = headers['Authorization'];
const isToken = headers['isToken'];
if (!authHeader && isToken !== false) {
@@ -25,29 +25,13 @@ export const requestConfig: RequestConfig = {
if (accessToken) {
headers['Authorization'] = `Bearer ${accessToken}`;
}
- // const expireTime = getTokenExpireTime();
- // if (expireTime) {
- // const left = Number(expireTime) - new Date().getTime();
- // const refreshToken = getRefreshToken();
- // if (left < 0 && refreshToken) {
- // clearSessionToken();
- // } else {
- // const accessToken = getAccessToken();
- // if (accessToken) {
- // headers['Authorization'] = `Bearer ${accessToken}`;
- // }
- // }
- // } else {
- // clearSessionToken();
- // }
}
return { url, options };
},
],
responseInterceptors: [
- (response: any) => {
+ (response: AxiosResponse) => {
const { status, data } = response || {};
- console.log('response2', response);
if (status >= 200 && status < 300) {
if (data && (data instanceof Blob || data.code === 200)) {
return response;
@@ -55,6 +39,8 @@ export const requestConfig: RequestConfig = {
clearSessionToken();
setRemoteMenu(null);
gotoLoginPage(false);
+ message.error('请重新登录');
+ return Promise.reject(response);
} else {
message.error(data?.msg ?? '请求失败');
return Promise.reject(response);
diff --git a/react-ui/src/services/mirror/index.ts b/react-ui/src/services/mirror/index.ts
index 5820f631..216ce32c 100644
--- a/react-ui/src/services/mirror/index.ts
+++ b/react-ui/src/services/mirror/index.ts
@@ -43,7 +43,7 @@ export function deleteMirrorReq(id: number) {
});
}
-// 删除镜像
+// 删除镜像版本
export function deleteMirrorVersionReq(id: number) {
return request(`/api/mmp/imageVersion/${id}`, {
method: 'DELETE',
diff --git a/react-ui/src/services/modelDeployment/index.ts b/react-ui/src/services/modelDeployment/index.ts
new file mode 100644
index 00000000..7416eeef
--- /dev/null
+++ b/react-ui/src/services/modelDeployment/index.ts
@@ -0,0 +1,61 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 14:29:44
+ * @Description: 模型部署接口
+ */
+import { request } from '@umijs/max';
+
+// 分页查询模型部署列表
+export function getModelDeploymentListReq(data: any) {
+ return request(`/api/v1/model/get`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 查询模型部署详情
+export function getModelDeploymentInfoReq(id: number) {
+ return request(`/api/mmp/image/${id}`, {
+ method: 'GET',
+ });
+}
+
+// 创建模型部署
+export function createModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/create`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 删除模型部署
+export function deleteModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/delete`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 重启模型部署
+export function restartModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/restart`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 停止模型部署
+export function stopModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/stop`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 更新模型部署
+export function updateModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/update`, {
+ method: 'POST',
+ data,
+ });
+}
diff --git a/react-ui/src/styles/menu.less b/react-ui/src/styles/menu.less
new file mode 100644
index 00000000..29e3ed61
--- /dev/null
+++ b/react-ui/src/styles/menu.less
@@ -0,0 +1,59 @@
+.ant-menu-item,
+.ant-menu-submenu {
+ .kf-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 16px;
+
+ .anticon.kf-menu-item__default-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: none !important;
+ margin-left: 0 !important;
+ }
+
+ &:hover {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+.ant-menu-item.ant-menu-item-selected,
+.ant-menu-submenu.ant-menu-submenu-selected {
+ .kf-menu-item {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+}
+
+.ant-pro-base-menu-vertical-collapsed {
+ .kf-menu-item {
+ justify-content: center;
+
+ .kf-menu-item__name {
+ display: none !important;
+ }
+ }
+}
+
+.ant-menu-submenu {
+ .ant-menu-submenu-title:hover {
+ color: #1664ff !important;
+ }
+}
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index c6514915..5d5ebccd 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -14,6 +14,7 @@
@success-color: #1ace62;
@error-color: #c73131;
@warning-color: #f98e1b;
+@abort-color: #8a8a8a;
@border-color: rgba(22, 100, 255, 0.3);
@border-color-secondary: rgba(22, 100, 255, 0.1);
@@ -36,16 +37,33 @@
@font-size: 15px;
@font-size-title: 18px;
@font-size-content: 16px;
+@font-size-input: 14px;
+@font-size-input-lg: 16px;
// 函数
.addAlpha(@color, @alpha) {
@red: red(@color);
@green: green(@color);
@blue: blue(@color);
-
@result: rgba(@red, @green, @blue, @alpha);
}
+// 混合
+.singleLine() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+.multiLine(@line) {
+ display: -webkit-box;
+ overflow: hidden;
+ word-break: break-all;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: @line;
+}
+
// 导出变量
:export {
primaryColor: @primary-color;
@@ -55,5 +73,9 @@
textColor: @text-color;
textColorSecondary: @text-color-secondary;
fontSize: @font-size;
+ fontSizeTitle: @font-size-title;
+ fontSizeContent: @font-size-content;
+ fontSizeInput: @font-size-input;
+ fontSizeInputLg: @font-size-input-lg;
siderBGColor: @sider-background-color;
}
diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts
index a0f53f2d..855584c6 100644
--- a/react-ui/src/types.ts
+++ b/react-ui/src/types.ts
@@ -4,6 +4,8 @@
* @Description: 定义全局类型，比如无关联的页面都需要要的类型
*/
+import { ExperimentStatus } from '@/pages/Experiment/status';
+
// 流水线全局参数
export type PipelineGlobalParam = {
param_name: string;
@@ -28,3 +30,50 @@ export type ExperimentInstance = {
nodes_status: string;
global_param: PipelineGlobalParam[];
};
+
+// 流水线节点
+export type PipelineNodeModel = {
+ id: string;
+ experimentStatus: ExperimentStatus;
+ label: string;
+ experimentStartTime: string;
+ experimentEndTime?: string | null;
+ control_strategy: string;
+ in_parameters: string;
+ out_parameters: string;
+};
+
+// 流水线
+export type PipelineNodeModelParameter = {
+ label: string;
+ value: any;
+ require: number;
+ type: string;
+ item_type: string;
+ placeholder?: string;
+ describe?: string;
+ fromSelect?: boolean;
+ showValue?: any;
+ editable: number;
+};
+
+// type ChangePropertyType = Omit & { [P in K]: NewType }
+
+// 序列化后的流水线节点
+export type PipelineNodeModelSerialize = Omit<
+ PipelineNodeModel,
+ 'control_strategy' | 'in_parameters' | 'out_parameters'
+> & {
+ control_strategy: Record;
+ in_parameters: Record;
+ out_parameters: Record;
+};
+
+// 资源规格
+export type ComputingResource = {
+ id: number;
+ computing_resource: string;
+ description: string;
+ standard: string;
+ create_by: string;
+};
diff --git a/react-ui/src/utils/date.ts b/react-ui/src/utils/date.ts
index eaab9f3f..50b9e7e7 100644
--- a/react-ui/src/utils/date.ts
+++ b/react-ui/src/utils/date.ts
@@ -1,9 +1,24 @@
import dayjs from 'dayjs';
-export const elapsedTime = (beginDate: Date, endDate: Date): string => {
- if (!isValidDate(beginDate) || !isValidDate(endDate)) {
+
+/**
+ * Calculates the elapsed time between two dates and returns a formatted string representing the duration.
+ *
+ * @param {string | null | undefined} begin - The starting date.
+ * @param {string | null | undefined} end - The ending date.
+ * @return {string} The formatted elapsed time string.
+ */
+export const elapsedTime = (begin?: string | null, end?: string | null): string => {
+ if (begin === undefined || begin === null) {
+ return '--';
+ }
+
+ const beginDate = dayjs(begin);
+ const endDate = end === undefined || end === null ? dayjs() : dayjs(end);
+ if (!beginDate.isValid() || !endDate.isValid()) {
return '--';
}
- const timestamp = endDate.getTime() - beginDate.getTime();
+
+ const timestamp = endDate.valueOf() - beginDate.valueOf();
if (timestamp < 0) {
return '时间有误';
}
@@ -29,7 +44,12 @@ export const elapsedTime = (beginDate: Date, endDate: Date): string => {
return `${minutes}分${seconds}秒`;
};
-// 是否是有效的日期
+/**
+ * 是否是有效的日期
+ *
+ * @param {Date} date - The date to check.
+ * @return {boolean} True if the date is valid, false otherwise.
+ */
export const isValidDate = (date: Date): boolean => {
if (date instanceof Date) {
return !Number.isNaN(date.getTime()); // valueOf() 也可以
@@ -37,14 +57,38 @@ export const isValidDate = (date: Date): boolean => {
return false;
};
-// 格式化日期
-export const formatDate = (text: Date | string, format = 'YYYY-MM-DD HH:mm:ss'): string => {
- if (text === undefined || text === null || text === '') {
+/**
+ * 能否使用 dayjs 转换成 Date
+ *
+ * @param {Date | string | number | null | undefined} date - The date to be checked.
+ * @return {boolean} Returns true if the date can be converted to a valid Date object, otherwise returns false.
+ */
+export const canBeConvertToDate = (date?: Date | string | number | null): boolean => {
+ if (date === undefined || date === null || date === '') {
+ return false;
+ }
+ const convertedDate = dayjs(date);
+ return convertedDate.isValid();
+};
+
+/**
+ * 转换日期
+ *
+ * @param {Date | string | number | null | undefined} date - The date to format.
+ * @param {string} [format='YYYY-MM-DD HH:mm:ss'] - The format string to use.
+ * @return {string} The formatted date string.
+ */
+export const formatDate = (
+ date?: Date | string | number | null,
+ format: string = 'YYYY-MM-DD HH:mm:ss',
+): string => {
+ if (date === undefined || date === null || date === '') {
return '--';
}
- if (!dayjs(text).isValid()) {
+ const convertedDate = dayjs(date);
+ if (!convertedDate.isValid()) {
return '--';
}
- return dayjs(text).format(format);
+ return convertedDate.format(format);
};
diff --git a/react-ui/src/utils/formRules.ts b/react-ui/src/utils/formRules.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/react-ui/src/utils/index.ts b/react-ui/src/utils/index.ts
index d7d2fc41..4672fd1a 100644
--- a/react-ui/src/utils/index.ts
+++ b/react-ui/src/utils/index.ts
@@ -1,8 +1,10 @@
/*
* @Author: 赵伟
* @Date: 2024-03-25 13:52:54
- * @Description:
+ * @Description: 工具类
*/
+
+// 生成 8 位随机数
export function s8() {
return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
}
@@ -14,3 +16,67 @@ export function getNameByCode(list: any[], code: any) {
});
return name;
}
+
+// 解析 json 字符串
+export function parseJsonText(text?: string | null): any | null {
+ if (!text) {
+ return null;
+ }
+ try {
+ return JSON.parse(text);
+ } catch (error) {
+ return null;
+ }
+}
+
+// underscore-to-camelCase
+export function underscoreToCamelCase(obj: Record) {
+ const newObj: Record = {};
+ for (const key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ const newKey = key.replace(/([-_][a-z])/gi, function ($1) {
+ return $1.toUpperCase().replace('[-_]', '').replace('_', '');
+ });
+ let value = obj[key];
+ if (typeof value === 'object' && value !== null) {
+ value = underscoreToCamelCase(value);
+ }
+ newObj[newKey] = value;
+ }
+ }
+ return newObj;
+}
+
+// camelCase-to-underscore
+export function camelCaseToUnderscore(obj: Record) {
+ const newObj: Record = {};
+ for (const key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ const newKey = key.replace(/([A-Z])/g, '_$1').toLowerCase();
+ let value = obj[key];
+ if (typeof value === 'object' && value !== null) {
+ value = camelCaseToUnderscore(value);
+ }
+ newObj[newKey] = value;
+ }
+ }
+ return newObj;
+}
+
+// null 转 undefined
+export function nullToUndefined(obj: Record) {
+ const newObj: Record = {};
+ for (const key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ const value = obj[key];
+ if (value === null) {
+ newObj[key] = undefined;
+ } else if (typeof value === 'object' && value !== null) {
+ newObj[key] = nullToUndefined(value);
+ } else {
+ newObj[key] = value;
+ }
+ }
+ }
+ return newObj;
+}
diff --git a/react-ui/src/utils/menuRender.tsx b/react-ui/src/utils/menuRender.tsx
new file mode 100644
index 00000000..9c05c6c7
--- /dev/null
+++ b/react-ui/src/utils/menuRender.tsx
@@ -0,0 +1,37 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-05-11 15:40:58
+ * @Description: 自定义菜单项
+ */
+
+import KFIcon from '@/components/KFIcon';
+import { MenuDataItem } from '@ant-design/pro-components';
+import { Link } from '@umijs/max';
+
+export const menuItemRender = (isSubMenu: boolean) => {
+ return (item: MenuDataItem) => {
+ const defaultIcon: string = item.icon as string;
+ const activeIcon = defaultIcon + '-active';
+ const hasParent = item.pro_layout_parentKeys?.length > 0;
+ const childen = (
+ <>
+ {!hasParent && defaultIcon && (
+ <>
+ (
+export const openAntdModal = >(
modal: (props: T) => React.ReactNode,
modalProps: T,
) => {
@@ -27,6 +30,11 @@ export const openAntdModal = (
let timeoutId: ReturnType;
function destroy() {
+ const index = destroyFns.indexOf(close);
+ if (index !== -1) {
+ destroyFns.splice(index, 1);
+ }
+
root.unmount();
}
@@ -59,7 +67,12 @@ export const openAntdModal = (
);
root.render(
-
+
{global.holderRender ? global.holderRender(dom) : dom}
,
);
@@ -72,6 +85,8 @@ export const openAntdModal = (
render({ ...modalProps, open: true });
+ destroyFns.push(close);
+
return {
close,
};
@@ -81,19 +96,23 @@ export const openAntdModal = (
* Generates a custom hook for managing an Ant Design modal.
*
* @param modal - The function that renders the modal content.
- * @param key - The key for the modal.
+ * @param defaultProps - The default modal properties.
* @return The modal component, open function, and close function.
*/
-export const useAntdModal = (
+
+export const useModal = (
modal: (props: T) => React.ReactNode,
- key: React.Key,
+ defaultProps?: T,
) => {
const [visible, setVisible] = useState(false);
- const [props, setProps] = useState({} as T);
+ const [props, setProps] = useState(defaultProps || ({} as T));
const CustomModel = modal;
const open = (props: T) => {
- setProps(props);
+ setProps((prev) => ({
+ ...prev,
+ ...props,
+ }));
setVisible(true);
};
@@ -101,5 +120,14 @@ export const useAntdModal = (
setVisible(false);
};
- return [ addModelAndVersion(@RequestBody ModelsVo modelsVo) throws Exception {
return genericsSuccess(this.modelsService.insertModelAndVersion(modelsVo));
+
+
+
}
/**
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Component.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Component.java
index 2e1d5de2..ba40459a 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Component.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Component.java
@@ -1,6 +1,7 @@
package com.ruoyi.platform.domain;
import com.fasterxml.jackson.annotation.JsonProperty;
+import com.fasterxml.jackson.annotation.JsonRawValue;
import com.fasterxml.jackson.databind.PropertyNamingStrategy;
import com.fasterxml.jackson.databind.annotation.JsonNaming;
import io.swagger.annotations.ApiModelProperty;
@@ -58,6 +59,7 @@ public class Component implements Serializable {
*/
@JsonProperty("env_variables")
@ApiModelProperty(name = "env_variables", value = "环境变量")
+ @JsonRawValue
private String envVirables;
/**
* 资源规格
@@ -78,12 +80,20 @@ public class Component implements Serializable {
* 输入参数
*/
@ApiModelProperty(name = "in_parameters" ,value = "输入参数")
+ @JsonRawValue
private String inParameters;
/**
* 输出参数
*/
@ApiModelProperty(name = "out_parameters" ,value = "输出参数")
+ @JsonRawValue
private String outParameters;
+
+ /**
+ * 可见范围
+ */
+ @ApiModelProperty(name = "available_range" ,value = "1公开0私有")
+ private int availableRange;
/**
* 描述
*/
@@ -94,6 +104,8 @@ public class Component implements Serializable {
* 图标路径
*/
@ApiModelProperty(name = "icon_path" ,value = "图标路径")
+
+
private String iconPath;
/**
* 创建者
@@ -124,6 +136,8 @@ public class Component implements Serializable {
@ApiModelProperty(name = "state" , value = "状态")
private Integer state;
+
+
public Integer getId() {
return id;
}
@@ -228,6 +242,14 @@ public class Component implements Serializable {
this.outParameters = outParameters;
}
+ public int getAvailableRange() {
+ return availableRange;
+ }
+
+ public void setAvailableRange(int availableRange) {
+ this.availableRange = availableRange;
+ }
+
public String getDescription() {
return description;
}
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Models.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Models.java
index f00f189d..449ae7f0 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Models.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/Models.java
@@ -32,7 +32,7 @@ public class Models implements Serializable {
@ApiModelProperty(value = "模型可见范围，1表示公开，0表示私有")
private int availableRange;
- @ApiModelProperty(value = "模型类型")
+ @ApiModelProperty(value = "模型类型(模型框架)")
private String modelType;
@ApiModelProperty(value = "模型标签")
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/ModelsVersion.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/ModelsVersion.java
index 8c54673a..b75dfbb7 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/ModelsVersion.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/domain/ModelsVersion.java
@@ -22,8 +22,8 @@ public class ModelsVersion implements Serializable {
/**
* 主键
*/
-@ApiModelProperty(value = "ID")
-private Integer id;
+ @ApiModelProperty(value = "ID")
+ private Integer id;
@ApiModelProperty(value = "模型ID")
private Integer modelsId;
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ComponentServiceImpl.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ComponentServiceImpl.java
index f5da44cc..47b05f0d 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ComponentServiceImpl.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ComponentServiceImpl.java
@@ -51,7 +51,7 @@ public class ComponentServiceImpl implements ComponentService {
throw new RuntimeException("组件不存在");
}
- return this.componentDao.queryById(id);
+ return component;
}
@Override
@@ -149,6 +149,7 @@ public class ComponentServiceImpl implements ComponentService {
String inParameters= gson.toJson(componentVo.getInParameters(), LinkedHashMap.class);
String outParameters = gson.toJson(componentVo.getOutParameters(), LinkedHashMap.class);
+
String envVariable = gson.toJson(componentVo.getEnvVirables(), LinkedHashMap.class);
component.setEnvVirables(envVariable);
component.setInParameters(inParameters);
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetServiceImpl.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetServiceImpl.java
index c21d7b64..6c2388cc 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetServiceImpl.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetServiceImpl.java
@@ -328,7 +328,7 @@ public class DatasetServiceImpl implements DatasetService {
throw new Exception("新增数据集失败");
}
- for (VersionVo datasetVersionVo :datasetVersionVos){
+ for (VersionVo datasetVersionVo : datasetVersionVos){
DatasetVersion datasetVersion = new DatasetVersion();
datasetVersion.setDatasetId(datasetInsert.getId());
datasetVersion.setVersion(datasetVo.getVersion());
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetVersionServiceImpl.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetVersionServiceImpl.java
index 1e0738cc..afbd96bf 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetVersionServiceImpl.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetVersionServiceImpl.java
@@ -81,7 +81,12 @@ public class DatasetVersionServiceImpl implements DatasetVersionService {
@Override
public DatasetVersion insert(DatasetVersion datasetVersion) throws Exception {
//插入预备
- insertPrepare(datasetVersion);
+ LoginUser loginUser = SecurityUtils.getLoginUser();
+ datasetVersion.setCreateBy(loginUser.getUsername());
+ datasetVersion.setUpdateBy(loginUser.getUsername());
+ datasetVersion.setUpdateTime(new Date());
+ datasetVersion.setCreateTime(new Date());
+ datasetVersion.setState(1);
this.datasetVersionDao.insert(datasetVersion);
return datasetVersion;
}
diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ModelsVersionServiceImpl.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ModelsVersionServiceImpl.java
index 1c9a3b35..be20b969 100644
--- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ModelsVersionServiceImpl.java
+++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ModelsVersionServiceImpl.java
@@ -73,8 +73,13 @@ public class ModelsVersionServiceImpl implements ModelsVersionService {
*/
@Override
public ModelsVersion insert(ModelsVersion modelsVersion) throws Exception {
- //插入预备
- insertPrepare(modelsVersion);
+ //插入预备，此时不需要判断版本重复
+ LoginUser loginUser = SecurityUtils.getLoginUser();
+ modelsVersion.setCreateBy(loginUser.getUsername());
+ modelsVersion.setUpdateBy(loginUser.getUsername());
+ modelsVersion.setUpdateTime(new Date());
+ modelsVersion.setCreateTime(new Date());
+ modelsVersion.setState(1);
this.modelsVersionDao.insert(modelsVersion);
return modelsVersion;
}
@@ -201,7 +206,7 @@ public class ModelsVersionServiceImpl implements ModelsVersionService {
@Override
public String addModelVersions(List modelsVersions) throws Exception {
try {
- // 遍历传入的 datasetVersions 列表
+ // 遍历传入的 modelsVersions 列表
for(ModelsVersion modelsVersion : modelsVersions) {
insertPrepare(modelsVersion);
}
diff --git a/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ComponentDaoMapper.xml b/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ComponentDaoMapper.xml
index d4af39d0..84b369ff 100644
--- a/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ComponentDaoMapper.xml
+++ b/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ComponentDaoMapper.xml
@@ -16,6 +16,7 @@
{currentUser?.nickName}
{currentUser?.roleNames?.[0]?.roleName}
+ icon={
+
+ }
+ >
);
})}
diff --git a/react-ui/src/pages/Workspace/index.less b/react-ui/src/pages/Workspace/index.less
index 1a454f38..f7f95a24 100644
--- a/react-ui/src/pages/Workspace/index.less
+++ b/react-ui/src/pages/Workspace/index.less
@@ -2,9 +2,10 @@
height: 100%;
padding: 20px 30px 10px;
overflow-y: auto;
- background-color: linear-gradient(#ecf2fe, #f9fafb);
+ background: linear-gradient(#ecf2fe, #f9fafb);
&__overview {
+ gap: 15px;
margin-bottom: 16px;
padding: 20px 30px;
background-color: white;
diff --git a/react-ui/src/requestConfig.ts b/react-ui/src/requestConfig.ts
index 2a9d6413..d2cd41b7 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -3,7 +3,7 @@
* @Date: 2024-03-25 13:52:54
* @Description: 网络请求配置，详情请参考 https://umijs.org/docs/max/request
*/
-import type { RequestConfig } from '@umijs/max';
+import type { AxiosRequestConfig, AxiosResponse, RequestConfig } from '@umijs/max';
import { message } from 'antd';
import { clearSessionToken, getAccessToken } from './access';
import { setRemoteMenu } from './services/session';
@@ -16,8 +16,8 @@ import { gotoLoginPage } from './utils/ui';
export const requestConfig: RequestConfig = {
errorConfig: {},
requestInterceptors: [
- (url: any, options: { headers: any }) => {
- const headers = options.headers ? options.headers : [];
+ (url: string, options: AxiosRequestConfig) => {
+ const headers = options.headers ?? {};
const authHeader = headers['Authorization'];
const isToken = headers['isToken'];
if (!authHeader && isToken !== false) {
@@ -25,29 +25,13 @@ export const requestConfig: RequestConfig = {
if (accessToken) {
headers['Authorization'] = `Bearer ${accessToken}`;
}
- // const expireTime = getTokenExpireTime();
- // if (expireTime) {
- // const left = Number(expireTime) - new Date().getTime();
- // const refreshToken = getRefreshToken();
- // if (left < 0 && refreshToken) {
- // clearSessionToken();
- // } else {
- // const accessToken = getAccessToken();
- // if (accessToken) {
- // headers['Authorization'] = `Bearer ${accessToken}`;
- // }
- // }
- // } else {
- // clearSessionToken();
- // }
}
return { url, options };
},
],
responseInterceptors: [
- (response: any) => {
+ (response: AxiosResponse) => {
const { status, data } = response || {};
- console.log('response2', response);
if (status >= 200 && status < 300) {
if (data && (data instanceof Blob || data.code === 200)) {
return response;
@@ -55,6 +39,8 @@ export const requestConfig: RequestConfig = {
clearSessionToken();
setRemoteMenu(null);
gotoLoginPage(false);
+ message.error('请重新登录');
+ return Promise.reject(response);
} else {
message.error(data?.msg ?? '请求失败');
return Promise.reject(response);
diff --git a/react-ui/src/services/mirror/index.ts b/react-ui/src/services/mirror/index.ts
index 5820f631..216ce32c 100644
--- a/react-ui/src/services/mirror/index.ts
+++ b/react-ui/src/services/mirror/index.ts
@@ -43,7 +43,7 @@ export function deleteMirrorReq(id: number) {
});
}
-// 删除镜像
+// 删除镜像版本
export function deleteMirrorVersionReq(id: number) {
return request(`/api/mmp/imageVersion/${id}`, {
method: 'DELETE',
diff --git a/react-ui/src/services/modelDeployment/index.ts b/react-ui/src/services/modelDeployment/index.ts
new file mode 100644
index 00000000..7416eeef
--- /dev/null
+++ b/react-ui/src/services/modelDeployment/index.ts
@@ -0,0 +1,61 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 14:29:44
+ * @Description: 模型部署接口
+ */
+import { request } from '@umijs/max';
+
+// 分页查询模型部署列表
+export function getModelDeploymentListReq(data: any) {
+ return request(`/api/v1/model/get`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 查询模型部署详情
+export function getModelDeploymentInfoReq(id: number) {
+ return request(`/api/mmp/image/${id}`, {
+ method: 'GET',
+ });
+}
+
+// 创建模型部署
+export function createModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/create`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 删除模型部署
+export function deleteModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/delete`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 重启模型部署
+export function restartModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/restart`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 停止模型部署
+export function stopModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/stop`, {
+ method: 'POST',
+ data,
+ });
+}
+
+// 更新模型部署
+export function updateModelDeploymentReq(data: any) {
+ return request(`/api/v1/model/update`, {
+ method: 'POST',
+ data,
+ });
+}
diff --git a/react-ui/src/styles/menu.less b/react-ui/src/styles/menu.less
new file mode 100644
index 00000000..29e3ed61
--- /dev/null
+++ b/react-ui/src/styles/menu.less
@@ -0,0 +1,59 @@
+.ant-menu-item,
+.ant-menu-submenu {
+ .kf-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 16px;
+
+ .anticon.kf-menu-item__default-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: none !important;
+ margin-left: 0 !important;
+ }
+
+ &:hover {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+.ant-menu-item.ant-menu-item-selected,
+.ant-menu-submenu.ant-menu-submenu-selected {
+ .kf-menu-item {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+}
+
+.ant-pro-base-menu-vertical-collapsed {
+ .kf-menu-item {
+ justify-content: center;
+
+ .kf-menu-item__name {
+ display: none !important;
+ }
+ }
+}
+
+.ant-menu-submenu {
+ .ant-menu-submenu-title:hover {
+ color: #1664ff !important;
+ }
+}
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index c6514915..5d5ebccd 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -14,6 +14,7 @@
@success-color: #1ace62;
@error-color: #c73131;
@warning-color: #f98e1b;
+@abort-color: #8a8a8a;
@border-color: rgba(22, 100, 255, 0.3);
@border-color-secondary: rgba(22, 100, 255, 0.1);
@@ -36,16 +37,33 @@
@font-size: 15px;
@font-size-title: 18px;
@font-size-content: 16px;
+@font-size-input: 14px;
+@font-size-input-lg: 16px;
// 函数
.addAlpha(@color, @alpha) {
@red: red(@color);
@green: green(@color);
@blue: blue(@color);
-
@result: rgba(@red, @green, @blue, @alpha);
}
+// 混合
+.singleLine() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+.multiLine(@line) {
+ display: -webkit-box;
+ overflow: hidden;
+ word-break: break-all;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: @line;
+}
+
// 导出变量
:export {
primaryColor: @primary-color;
@@ -55,5 +73,9 @@
textColor: @text-color;
textColorSecondary: @text-color-secondary;
fontSize: @font-size;
+ fontSizeTitle: @font-size-title;
+ fontSizeContent: @font-size-content;
+ fontSizeInput: @font-size-input;
+ fontSizeInputLg: @font-size-input-lg;
siderBGColor: @sider-background-color;
}
diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts
index a0f53f2d..855584c6 100644
--- a/react-ui/src/types.ts
+++ b/react-ui/src/types.ts
@@ -4,6 +4,8 @@
* @Description: 定义全局类型，比如无关联的页面都需要要的类型
*/
+import { ExperimentStatus } from '@/pages/Experiment/status';
+
// 流水线全局参数
export type PipelineGlobalParam = {
param_name: string;
@@ -28,3 +30,50 @@ export type ExperimentInstance = {
nodes_status: string;
global_param: PipelineGlobalParam[];
};
+
+// 流水线节点
+export type PipelineNodeModel = {
+ id: string;
+ experimentStatus: ExperimentStatus;
+ label: string;
+ experimentStartTime: string;
+ experimentEndTime?: string | null;
+ control_strategy: string;
+ in_parameters: string;
+ out_parameters: string;
+};
+
+// 流水线
+export type PipelineNodeModelParameter = {
+ label: string;
+ value: any;
+ require: number;
+ type: string;
+ item_type: string;
+ placeholder?: string;
+ describe?: string;
+ fromSelect?: boolean;
+ showValue?: any;
+ editable: number;
+};
+
+// type ChangePropertyType{childen}
;
+ } else {
+ return (
+
+ {childen}
+
+ );
+ }
+ };
+};
diff --git a/react-ui/src/utils/modal.tsx b/react-ui/src/utils/modal.tsx
index 4a3b765f..cb1cd6f6 100644
--- a/react-ui/src/utils/modal.tsx
+++ b/react-ui/src/utils/modal.tsx
@@ -1,13 +1,16 @@
/*
* @Author: 赵伟
* @Date: 2024-04-13 10:08:35
- * @Description:
+ * @Description: 以函数的方式打开 Modal
*/
import { ConfigProvider, type ModalProps } from 'antd';
import { globalConfig } from 'antd/es/config-provider';
+import zhCN from 'antd/locale/zh_CN';
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
+const destroyFns: (() => void)[] = [];
+
/**
* Function to open an Ant Design modal.
*
@@ -15,7 +18,7 @@ import { createRoot } from 'react-dom/client';
* @param modalProps - The modal properties.
* @return An object with a destroy method to close the modal.
*/
-export const openAntdModal =