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..cb37f435
--- /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 '../../type';
+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..59ff87f6
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourceList/index.tsx
@@ -0,0 +1,210 @@
+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 { Button, Input, Pagination, PaginationProps, message } from 'antd';
+import { Ref, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { CategoryData, ResourceData, ResourceType, resourceConfig } from '../../type';
+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..2288dbe6
--- /dev/null
+++ b/react-ui/src/pages/Dataset/components/ResourcePage/index.less
@@ -0,0 +1,8 @@
+.resource-page {
+ height: 100%;
+ &__tabs-container {
+ height: 50px;
+ padding-left: 27px;
+ background-image: url(@/assets/img/page-title-bg.png);
+ }
+}
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..c956e4be
--- /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 '../../type';
+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..3a261a48
--- /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 '../../type';
+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..d567cb5c 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 './type';
-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 +85,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 +114,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 +146,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 +223,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/type.tsx b/react-ui/src/pages/Dataset/type.tsx
new file mode 100644
index 00000000..3bc7f2fe
--- /dev/null
+++ b/react-ui/src/pages/Dataset/type.tsx
@@ -0,0 +1,132 @@
+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 ResourceTypeKeys = keyof typeof ResourceType;
+export type ResourceTypeValues = (typeof ResourceType)[ResourceTypeKeys];
+
+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')}
-
-
+
+
+ );
+}
+
+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..0a89050c 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 { ExperimentLog } from '@/pages/Experiment/experimentText/props';
+import { ExperimentStatus } from '@/pages/Experiment/status';
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 &&
+ {/*
{assetCounts.map((item, index) => (
{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 (
-
);
};
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() {
]}
/>
-
-
- {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.jsx b/react-ui/src/pages/Experiment/experimentText/index.jsx
index a5ed2ffc..08603e3c 100644
--- a/react-ui/src/pages/Experiment/experimentText/index.jsx
+++ b/react-ui/src/pages/Experiment/experimentText/index.jsx
@@ -1,51 +1,26 @@
-import { useVisible } from '@/hooks';
+import { useStateRef, useVisible } from '@/hooks';
import { getExperimentIns } from '@/services/experiment/index.js';
import { getWorkflowById } from '@/services/pipeline/index.js';
-import { elapsedTime } from '@/utils/date';
-import { useEmotionCss } from '@ant-design/use-emotion-css';
+import { elapsedTime, formatDate } from '@/utils/date';
import G6 from '@antv/g6';
import { Button } from 'antd';
-import momnet from 'moment';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { s8 } from '../../../utils';
+import ParamsModal from '../components/ViewParamsModal';
import { experimentStatusInfo } from '../status';
import styles from './index.less';
-import ParamsModal from './paramsModal';
import Props from './props';
+let graph = null;
+
function ExperimentText() {
- const [message, setMessage] = useState({});
- const messageRef = useRef(message);
+ const [message, setMessage, messageRef] = useStateRef({});
const propsRef = useRef();
const navgite = useNavigate();
const locationParams = useParams(); //新版本获取路由参数接口
- let graph = null;
const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
- 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 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 (
-
-
- */}
-
-
- {intl.formatMessage({
- id: 'menu.login',
- defaultMessage: '登录页',
- })}
- - {Settings.title}
-
-
-
-
![]()
{
const fileList = form.getFieldValue('fileList');
if (Array.isArray(fileList) && fileList.length >= 1) {
@@ -134,12 +121,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/components/MirrorStatusCell/index.less b/react-ui/src/pages/ModelDeployment/components/MirrorStatusCell/index.less
new file mode 100644
index 00000000..043bf411
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/components/MirrorStatusCell/index.less
@@ -0,0 +1,11 @@
+.mirror-status-cell {
+ color: @text-color;
+
+ &--success {
+ color: @success-color;
+ }
+
+ &--error {
+ color: @error-color;
+ }
+}
diff --git a/react-ui/src/pages/ModelDeployment/components/MirrorStatusCell/index.tsx b/react-ui/src/pages/ModelDeployment/components/MirrorStatusCell/index.tsx
new file mode 100644
index 00000000..3702825f
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/components/MirrorStatusCell/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-18 18:35:41
+ * @Description:
+ */
+import { MirrorVersionStatus } from '@/enums';
+import styles from './index.less';
+
+type MirrorVersionStatusKeys = keyof typeof MirrorVersionStatus;
+type MirrorVersionStatusValues = (typeof MirrorVersionStatus)[MirrorVersionStatusKeys];
+
+export type MirrorVersionStatusInfo = {
+ text: string;
+ classname: string;
+};
+
+const statusInfo: Record = {
+ [MirrorVersionStatus.Building]: {
+ text: '构建中',
+ classname: styles['mirror-status-cell'],
+ },
+ [MirrorVersionStatus.Available]: {
+ classname: styles['mirror-status-cell--success'],
+ text: '可用',
+ },
+ [MirrorVersionStatus.Failed]: {
+ classname: styles['mirror-status-cell--error'],
+ text: '构建失败',
+ },
+};
+
+function MirrorStatusCell(status: MirrorVersionStatus) {
+ if (status === null || status === undefined || !statusInfo[status]) {
+ return --;
+ }
+ return {statusInfo[status].text};
+}
+
+export default MirrorStatusCell;
diff --git a/react-ui/src/pages/ModelDeployment/create.less b/react-ui/src/pages/ModelDeployment/create.less
new file mode 100644
index 00000000..63c00764
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/create.less
@@ -0,0 +1,17 @@
+.model-deployment-create {
+ height: 100%;
+
+ &__content {
+ height: calc(100% - 60px);
+ margin-top: 10px;
+ padding: 30px 30px 10px;
+ overflow: auto;
+ 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.tsx b/react-ui/src/pages/ModelDeployment/create.tsx
new file mode 100644
index 00000000..cc2c43ff
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/create.tsx
@@ -0,0 +1,297 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 创建模型部署
+ */
+import PageTitle from '@/components/PageTitle';
+import SubAreaTitle from '@/components/SubAreaTitle';
+import { CommonTabKeys } from '@/enums';
+import { createMirrorReq } from '@/services/mirror';
+import { getComputingResourceReq } from '@/services/pipeline';
+import { to } from '@/utils/promise';
+import { getSessionItemThenRemove, mirrorNameKey } from '@/utils/sessionStorage';
+import { validateUploadFiles } from '@/utils/ui';
+import { useNavigate } from '@umijs/max';
+import { Button, Col, Form, Input, Row, Select, UploadFile, message, type SelectProps } from 'antd';
+import { omit } from 'lodash';
+import { useEffect, useState } from 'react';
+import styles from './create.less';
+
+type FormData = {
+ name: string;
+ tag: string;
+ description: string;
+ path?: string;
+ upload_type: string;
+ fileList?: UploadFile[];
+};
+
+function ModelDeploymentCreate() {
+ const navgite = useNavigate();
+ const [form] = Form.useForm();
+ const [nameDisabled, setNameDisabled] = useState(false);
+ const [resourceStandardList, setResourceStandardList] = useState([]);
+
+ useEffect(() => {
+ const name = getSessionItemThenRemove(mirrorNameKey);
+ if (name) {
+ form.setFieldValue('name', name);
+ setNameDisabled(true);
+ }
+ getComputingResource();
+ }, []);
+
+ const getComputingResource = async () => {
+ const params = {
+ page: 0,
+ size: 1000,
+ resource_type: '',
+ };
+ const [res] = await to(getComputingResourceReq(params));
+ if (res && res.data && res.data.content) {
+ setResourceStandardList(res.data.content);
+ }
+ };
+
+ const filterResourceStandard: SelectProps['filterOption'] = (
+ input: string,
+ { computing_resource = '' },
+ ) => {
+ return computing_resource.toLocaleLowerCase().includes(input.toLocaleLowerCase());
+ };
+
+ // 创建公网、本地镜像
+ const createPublicMirror = async (formData: FormData) => {
+ const upload_type = formData['upload_type'];
+ let params;
+ if (upload_type === CommonTabKeys.Public) {
+ params = {
+ ...omit(formData, ['upload_type']),
+ upload_type: 0,
+ image_type: 0,
+ };
+ } else {
+ const fileList = formData['fileList'] ?? [];
+ 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 [res] = await to(createMirrorReq(params));
+ if (res) {
+ message.success('创建成功');
+ navgite(-1);
+ }
+ };
+
+ // 提交
+ const handleSubmit = (values: FormData) => {
+ createPublicMirror(values);
+ };
+
+ // 取消
+ const cancel = () => {
+ navgite(-1);
+ };
+
+ return (
+ ({});
+
+ const [activeTab, setActiveTab] = useState('1');
+ useEffect(() => {
+ getMirrorInfo();
+ }, []);
+
+ // 获取镜像详情
+ const getMirrorInfo = async () => {
+ const id = Number(urlParams.id);
+ const [res] = await to(getMirrorInfoReq(id));
+ if (res && res.data) {
+ const { name = '', description = '', version_count = '', create_time: time } = res.data;
+ const create_time = formatDate(time);
+ setMirrorInfo({
+ name,
+ description,
+ version_count,
+ create_time,
+ });
+ }
+ };
+
+ // 切换 Tab，重置数据
+ const hanleTabChange: TabsProps['onChange'] = (value) => {
+ setActiveTab(value);
+ };
+
+ return (
+ ([]);
+ const [total, setTotal] = useState(0);
+ const [pagination, setPagination] = useState>(
+ cacheState?.pagination ?? {
+ current: 1,
+ pageSize: 10,
+ },
+ );
+
+ useEffect(() => {
+ getMirrorList();
+ }, [pagination, searchText]);
+
+ // 获取镜像列表
+ const getMirrorList = async () => {
+ const params: Record = {
+ page: pagination.current - 1,
+ size: pagination.pageSize,
+ name: searchText,
+ image_type: 1,
+ };
+ const [res] = await to(getMirrorListReq(params));
+ if (res && res.data) {
+ const { content = [], totalElements = 0 } = res.data;
+ setTableData(content);
+ setTotal(totalElements);
+ }
+ };
+
+ // 删除镜像
+ const deleteMirror = async (id: number) => {
+ const [res] = await to(deleteMirrorReq(id));
+ if (res) {
+ message.success('删除成功');
+ // 如果是一页的唯一数据，删除时，请求第一页的数据
+ // 否则直接刷新这一页的数据
+ // 避免回到第一页
+ if (tableData.length > 1) {
+ setPagination((prev) => ({
+ ...prev,
+ current: 1,
+ }));
+ } else {
+ getMirrorList();
+ }
+ }
+ };
+
+ // 搜索
+ const onSearch: SearchProps['onSearch'] = (value) => {
+ setSearchText(value);
+ };
+
+ // 查看详情
+ const toDetail = (record: MirrorData) => {
+ navigate(`/modelDeployment/${record.id}`);
+ setCacheState({
+ pagination,
+ searchText,
+ });
+ };
+
+ // 处理删除
+ const handleMirrorDelete = (record: MirrorData) => {
+ modalConfirm({
+ title: '删除后，该镜像将不可恢复',
+ content: '是否确认删除?',
+ onOk: () => {
+ deleteMirror(record.id);
+ },
+ });
+ };
+
+ // 创建镜像
+ const createMirror = () => {
+ navigate(`/modelDeployment/create`);
+ setCacheState({
+ pagination,
+ searchText,
+ });
+ };
+
+ // 分页切换
+ 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: 100,
+ align: 'center',
+ render(text, record, index) {
+ return {(pagination.current - 1) * pagination.pageSize + index + 1};
+ },
+ },
+ {
+ title: '服务名称',
+ dataIndex: 'name',
+ key: 'name',
+ width: '30%',
+ render: CommonTableCell(),
+ },
+ {
+ title: '模型',
+ dataIndex: 'version_count',
+ key: 'version_count',
+ width: '20%',
+ render: CommonTableCell(),
+ },
+ {
+ title: '状态',
+ dataIndex: 'version_count',
+ key: 'version_count',
+ width: '10%',
+ render: CommonTableCell(),
+ },
+ {
+ title: '创建人',
+ dataIndex: 'description',
+ key: 'description',
+ render: CommonTableCell(true),
+ width: '20%',
+ ellipsis: { showTitle: false },
+ },
+ {
+ title: '更新时间',
+ dataIndex: 'create_time',
+ key: 'create_time',
+ width: '20%',
+ render: DateTableCell,
+ },
+ {
+ title: '操作',
+ dataIndex: 'operation',
+ width: 350,
+ key: 'operation',
+ render: (_: any, record: MirrorData) => (
+ ;
handleVersionResponse: (res: any) => any[];
modalIcon: string;
- buttonIcon: string;
name: string;
litReqParamKey: 'available_range' | 'image_type';
fileReqParamKey: 'models_id' | 'dataset_id';
@@ -71,7 +70,6 @@ export const selectorTypeData: Record res.data || [],
name: '模型',
modalIcon: modelImg,
- buttonIcon: 'local:model-select-button',
litReqParamKey: 'available_range',
fileReqParamKey: 'models_id',
tabItems: [
@@ -92,7 +90,6 @@ export const selectorTypeData: Record res.data || [],
name: '数据集',
modalIcon: datasetImg,
- buttonIcon: 'local:dataset-select-button',
litReqParamKey: 'available_range',
fileReqParamKey: 'dataset_id',
tabItems: [
@@ -115,7 +112,6 @@ export const selectorTypeData: Record {
- const propsRef = useRef();
const navgite = useNavigate();
- // const [contextMenu,setContextMenu]=useState({})
let contextMenu = {};
const locationParams = useParams(); //新版本获取路由参数接口
- let sourceAnchorIdx, targetAnchorIdx;
+
const pipelineContainer = useEmotionCss(() => {
return {
display: 'flex',
@@ -59,8 +58,11 @@ const EditPipeline = () => {
});
const graphRef = useRef();
const paramsDrawerRef = useRef();
+ const propsRef = useRef();
const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useVisible(false);
- const [globalParam, setGlobalParam] = useState([]);
+ const [globalParam, setGlobalParam, globalParamRef] = useStateRef([]);
+
+ let sourceAnchorIdx, targetAnchorIdx;
const onDragEnd = (val) => {
console.log(val, 'eee');
@@ -93,17 +95,24 @@ const EditPipeline = () => {
}
};
const savePipeline = async (val) => {
- const [res, error] = await to(paramsDrawerRef.current.getFieldsValue());
+ const [res, error] = await to(paramsDrawerRef.current.validateFields());
if (error) {
message.error('全局参数配置有误');
openParamsDrawer();
return;
}
+
+ const duplicateName = findFirstDuplicate(res.global_param || []);
+ if (duplicateName) {
+ message.error('全局参数配置有重复的参数名称：' + duplicateName);
+ openParamsDrawer();
+ return;
+ }
+
const [propsRes, propsError] = await to(propsRef.current.getFieldsValue());
console.log(await to(propsRef.current.getFieldsValue()));
if (propsError) {
message.error('基本信息必填项需配置');
- // handlerClick();
return;
}
propsRef.current.propClose();
@@ -128,12 +137,19 @@ const EditPipeline = () => {
};
const handlerClick = (e) => {
e.stopPropagation();
- // console.log(propsRef, graph);
- propsRef.current.showDrawer(e);
+ if (e.target.get('name') !== 'anchor-point' && e.item) {
+ graph.setItemState(e.item, 'nodeClicked', true);
+ const parentNodes = findAllParentNodes(graph, e.item);
+ // 如果没有打开过全局参数抽屉，获取不到全局参数
+ const globalParams =
+ paramsDrawerRef.current.getFieldsValue().global_param || globalParamRef.current;
+ propsRef.current.showDrawer(e, globalParams, parentNodes);
+ }
};
const getGraphData = (data) => {
+ console.log('graph', graph);
if (graph) {
- console.log(graph);
+ console.log(data);
graph.data(data);
graph.render();
} else {
@@ -275,14 +291,13 @@ const EditPipeline = () => {
if (graph && ret.data && ret.data.dag) {
getGraphData(JSON.parse(ret.data.dag));
}
- // graph&&graph.data(JSON.parse(ret.dag))
- // graph.render()
});
};
const handlerContextMenu = (e) => {
e.stopPropagation();
// this.menuType = e.item._cfg.type;
};
+ // 上下文菜单
const initMenu = () => {
// const selectedNodes = this.selectedNodes;
contextMenu = new G6.Menu({
@@ -330,8 +345,8 @@ const EditPipeline = () => {
initGraph();
};
useEffect(() => {
- getFirstWorkflow(locationParams.id);
initMenu();
+ getFirstWorkflow(locationParams.id);
return () => {
graph.off('node:mouseenter', (e) => {
@@ -449,7 +464,7 @@ const EditPipeline = () => {
},
'rect',
);
- console.log(graphRef, 'graphRef');
+
graph = new G6.Graph({
container: graphRef.current,
grid: true,
@@ -591,6 +606,8 @@ const EditPipeline = () => {
},
// linkCenter: true,
fitView: true,
+ minZoom: 0.5,
+ maxZoom: 3,
fitViewPadding: [320, 320, 220, 320],
});
// graph.on('dblclick', (e) => {
@@ -600,13 +617,7 @@ const EditPipeline = () => {
// handlerClick(e);
// }
// });
- graph.on('node:click', (e) => {
- console.log(e.target.get('name'));
- if (e.target.get('name') !== 'anchor-point' && e.item) {
- graph.setItemState(e.item, 'nodeClicked', true);
- handlerClick(e);
- }
- });
+ graph.on('node:click', handlerClick);
graph.on('aftercreateedge', (e) => {
// update the sourceAnchor and targetAnchor for the newly added edge
graph.updateItem(e.edge, {
diff --git a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx
index deb3846a..59a5bba1 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx
+++ b/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx
@@ -2,23 +2,6 @@ import { getComponentAll } from '@/services/pipeline/index.js';
import { Collapse } from 'antd';
import { useEffect, useState } from 'react';
import Styles from './modelMenus.less';
-const items = [
- {
- key: '1',
- label: 'This is panel header 1',
- children: [1, 2, 3, 4, 5],
- },
- {
- key: '2',
- label: 'This is panel header 2',
- children: [1, 2, 3, 4, 5],
- },
- {
- key: '3',
- label: 'This is panel header 3',
- children: [1, 2, 3, 4, 5],
- },
-];
const ModelMenus = ({ onParDragEnd }) => {
const [modelMenusList, setModelMenusList] = useState([]);
useEffect(() => {
@@ -62,11 +45,13 @@ const ModelMenus = ({ onParDragEnd }) => {
}}
className={Styles.collapseItem}
>
- 
+ {ele.icon_path && (
+
+ )}
{ele.component_label}
))
diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx
index 58127381..179cd152 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx
+++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx
@@ -1,26 +1,31 @@
import KFIcon from '@/components/KFIcon';
+import SubAreaTitle from '@/components/SubAreaTitle';
import { getComputingResourceReq } from '@/services/pipeline';
import { openAntdModal } from '@/utils/modal';
import { to } from '@/utils/promise';
import { Button, Drawer, Form, Input, Select } from 'antd';
import { pick } from 'lodash';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import PropsLabel from '../components/PropsLabel';
import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal';
-import Styles from './editPipeline.less';
+import styles from './editPipeline.less';
+import { createMenuItems } from './utils';
const { TextArea } = Input;
+
const Props = forwardRef(({ onParentChange }, ref) => {
const [form] = Form.useForm();
-
const [stagingItem, setStagingItem] = useState({});
const [open, setOpen] = useState(false);
- const [selectedModel, setSelectedModel] = useState(undefined);
- const [selectedDataset, setSelectedDataset] = useState(undefined);
- const [resourceStandardList, setResourceStandardList] = useState([]);
+ const [selectedModel, setSelectedModel] = useState(undefined); // 选择的模型，为了再次打开时恢复原来的选择
+ const [selectedDataset, setSelectedDataset] = useState(undefined); // 选择的数据集，为了再次打开时恢复原来的选择
+ const [resourceStandardList, setResourceStandardList] = useState([]); // 资源规模列表
+ const [menuItems, setMenuItems] = useState([]);
useEffect(() => {
getComputingResource();
}, []);
+ // 获取资源规格列表数据
const getComputingResource = async () => {
const params = {
page: 0,
@@ -35,49 +40,22 @@ const Props = forwardRef(({ onParentChange }, ref) => {
const afterOpenChange = () => {
if (!open) {
- console.log(stagingItem, form.getFieldsValue());
- // 禁止校验 guard-for-in
- /* eslint-disable */
- for (let i in form.getFieldsValue()) {
- for (let j in stagingItem.in_parameters) {
- if (i == j) {
- console.log(j, i);
- stagingItem.in_parameters[j].value = form.getFieldsValue()[i];
- }
- }
- for (let p in stagingItem.out_parameters) {
- if (i == p) {
- stagingItem.out_parameters[p].value = form.getFieldsValue()[i];
- }
- }
- for (let k in stagingItem.control_strategy) {
- if (i == k) {
- stagingItem.control_strategy[k].value = form.getFieldsValue()[i];
- }
- }
- }
- /* eslint-enable */
- // setStagingItem({...stagingItem,})
- console.log(stagingItem.control_strategy);
+ console.log('zzzz', form.getFieldsValue());
+ const control_strategy = form.getFieldValue('control_strategy');
+ const in_parameters = form.getFieldValue('in_parameters');
+ const out_parameters = form.getFieldValue('out_parameters');
onParentChange({
...stagingItem,
- control_strategy: JSON.stringify(stagingItem.control_strategy),
- in_parameters: JSON.stringify(stagingItem.in_parameters),
- out_parameters: JSON.stringify(stagingItem.out_parameters),
...form.getFieldsValue(),
+ control_strategy: JSON.stringify(control_strategy),
+ in_parameters: JSON.stringify(in_parameters),
+ out_parameters: JSON.stringify(out_parameters),
});
- // onParentChange({...stagingItem,...form.getFieldsValue()})
}
};
const onClose = () => {
setOpen(false);
};
- const onFinish = (values) => {
- console.log('Success:', values);
- };
- const onFinishFailed = (errorInfo) => {
- console.log('Failed:', errorInfo);
- };
useImperativeHandle(ref, () => ({
getFieldsValue: async () => {
const [propsRes, propsError] = await to(form.validateFields());
@@ -88,47 +66,43 @@ const Props = forwardRef(({ onParentChange }, ref) => {
return Promise.reject(propsError);
}
},
- showDrawer(e) {
+ showDrawer(e, params, parentNodes) {
if (e.item && e.item.getModel()) {
- // console.log(e.item.getModel().in_parameters);
form.resetFields();
- form.setFieldsValue({
- ...e.item.getModel(),
- in_parameters: JSON.parse(e.item.getModel().in_parameters),
- out_parameters: JSON.parse(e.item.getModel().out_parameters),
- control_strategy: JSON.parse(e.item.getModel().control_strategy),
- });
- setStagingItem({
- ...e.item.getModel(),
- in_parameters: JSON.parse(e.item.getModel().in_parameters),
- out_parameters: JSON.parse(e.item.getModel().out_parameters),
- control_strategy: JSON.parse(e.item.getModel().control_strategy),
- });
- // form.setFieldsValue({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)})
- // setStagingItem({...e.item.getModel(),in_parameters:JSON.parse(e.item.getModel().in_parameters),out_parameters:JSON.parse(e.item.getModel().out_parameters)})
- // setTimeout(() => {
- // console.log(stagingItem);
- // }, (500));
+ const model = e.item.getModel();
+ try {
+ const nodeData = {
+ ...model,
+ in_parameters: JSON.parse(model.in_parameters),
+ out_parameters: JSON.parse(model.out_parameters),
+ control_strategy: JSON.parse(model.control_strategy),
+ };
+ setStagingItem({
+ ...nodeData,
+ });
+ form.setFieldsValue({
+ ...nodeData,
+ });
+ } catch (error) {
+ console.log(error);
+ }
setSelectedModel(undefined);
setSelectedDataset(undefined);
setOpen(true);
+
+ // 参数下拉菜单
+ setMenuItems(createMenuItems(params, parentNodes));
}
},
- propClose: async () => {
- setOpen(false);
- const [openRes, propsError] = await to(setOpen(false));
- console.log(setOpen(false));
+ propClose: () => {
+ close();
},
- // propClose() {
-
- // setOpen(false);
- // },
}));
// 选择数据集、模型
const selectResource = (name, item) => {
let type;
- let resource = undefined;
+ let resource;
switch (item.item_type) {
case 'dataset':
type = ResourceSelectorType.Dataset;
@@ -142,41 +116,37 @@ const Props = forwardRef(({ onParentChange }, ref) => {
type = ResourceSelectorType.Mirror;
break;
}
- const { close } = openAntdModal(
- ResourceSelectorModal,
- {
- type,
- defaultExpandedKeys: resource ? [resource.id] : [],
- defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
- defaultActiveTab: resource?.activeTab,
- onOk: (res) => {
- if (res) {
- if (type === ResourceSelectorType.Mirror) {
- form.setFieldValue(name, res);
- } else {
- const jsonObj = pick(res, ['id', 'version', 'path']);
- const value = JSON.stringify(jsonObj);
- form.setFieldValue(name, value);
- }
-
- if (type === ResourceSelectorType.Dataset) {
- setSelectedDataset(res);
- } else if (type === ResourceSelectorType.Model) {
- setSelectedModel(res);
- }
+ const { close } = openAntdModal(ResourceSelectorModal, {
+ type,
+ defaultExpandedKeys: resource ? [resource.id] : [],
+ defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
+ defaultActiveTab: resource?.activeTab,
+ onOk: (res) => {
+ if (res) {
+ if (type === ResourceSelectorType.Mirror) {
+ form.setFieldValue(name, res);
} else {
- if (type === ResourceSelectorType.Dataset) {
- setSelectedDataset(null);
- } else if (type === ResourceSelectorType.Model) {
- setSelectedModel(null);
- }
- form.setFieldValue(name, '');
+ const jsonObj = pick(res, ['id', 'version', 'path']);
+ const value = JSON.stringify(jsonObj);
+ form.setFieldValue(name, { ...item, value });
}
- close();
- },
+
+ if (type === ResourceSelectorType.Dataset) {
+ setSelectedDataset(res);
+ } else if (type === ResourceSelectorType.Model) {
+ setSelectedModel(res);
+ }
+ } else {
+ if (type === ResourceSelectorType.Dataset) {
+ setSelectedDataset(null);
+ } else if (type === ResourceSelectorType.Model) {
+ setSelectedModel(null);
+ }
+ form.setFieldValue(name, '');
+ }
+ close();
},
- true,
- );
+ });
};
// 获取选择数据集、模型后面按钮 icon
@@ -191,16 +161,31 @@ const Props = forwardRef(({ onParentChange }, ref) => {
}
};
+ // 筛选资源规格
const filterResourceStandard = (input, { computing_resource = '' }) => {
return computing_resource.toLocaleLowerCase().includes(input.toLocaleLowerCase());
};
+ // 参数回填
+ const handleParameterClick = (name, value) => {
+ form.setFieldValue(name, value);
+ };
+
// 控制策略
- const controlStrategy = stagingItem.control_strategy;
+ const controlStrategyList = Object.entries(stagingItem.control_strategy ?? {}).map(
+ ([key, value]) => ({ key, value }),
+ );
+
// 输入参数
- const inParameters = stagingItem.in_parameters;
+ const inParametersList = Object.entries(stagingItem.in_parameters ?? {}).map(([key, value]) => ({
+ key,
+ value,
+ }));
+
// 输出参数
- const outParameters = stagingItem.out_parameters;
+ const outParametersList = Object.entries(stagingItem.out_parameters ?? {}).map(
+ ([key, value]) => ({ key, value }),
+ );
return (
<>
@@ -213,15 +198,15 @@ const Props = forwardRef(({ onParentChange }, ref) => {
onClose={onClose}
afterOpenChange={afterOpenChange}
open={open}
- width={420}
+ width={520}
+ className={styles.editPipelineProps}
>
- {/*
- 启动时间：{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}
-
-
-
+
+ .ant-tabs-nav .ant-tabs-nav-list{
- margin-left: 24px;
- }
- .ant-drawer .ant-drawer-body{
- overflow-y: hidden;
+ background-color: #fff;
+
+ &__top {
+ 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);
+
+ &__info {
+ display: flex;
+ align-items: center;
+ margin-right: 30px;
+ color: rgba(29, 29, 32, 0.8);
+ font-size: 15px;
}
- .ant-tabs {
- height: calc(100% - 160px);
- overflow-y: auto;
+ &__param-button {
+ margin-right: 0;
+ margin-left: 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;
+ &__graph {
+ width: 100%;
+ height: calc(100% - 56px);
+ background-color: @background-color;
+ }
}
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: (
+ {} 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/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx
index 611c18c6..56548d6e 100644
--- a/react-ui/src/pages/Experiment/index.jsx
+++ b/react-ui/src/pages/Experiment/index.jsx
@@ -14,16 +14,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 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';
@@ -438,13 +437,9 @@ function Experiment() {
+
-
+ 启动时间：{formatDate(message.create_time)}
+
+
+ 执行时长：
+ {elapsedTime(message.create_time, message.finish_time)}
+
+
+ 状态：
+
+
+ {experimentStatusInfo[message.status]?.label}
+
-
+
- {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/experimentText/props.less b/react-ui/src/pages/Experiment/experimentText/props.less
new file mode 100644
index 00000000..b3294d55
--- /dev/null
+++ b/react-ui/src/pages/Experiment/experimentText/props.less
@@ -0,0 +1,37 @@
+.experiment-drawer {
+ :global {
+ .ant-drawer-body {
+ overflow-y: hidden;
+ }
+ }
+
+ &__tabs {
+ height: calc(100% - 170px);
+ :global {
+ .ant-tabs-nav {
+ padding-left: 24px;
+ background-color: #f8fbff;
+ border: 1px solid #e0eaff;
+ }
+ .ant-tabs-content-holder {
+ overflow-y: auto;
+ }
+ }
+ }
+
+ &__info {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ padding-left: 24px;
+ color: @text-color;
+ font-size: 15px;
+ }
+
+ &__status-dot {
+ width: 8px;
+ height: 8px;
+ margin-right: 6px;
+ border-radius: 50%;
+ }
+}
diff --git a/react-ui/src/pages/Experiment/experimentText/props.tsx b/react-ui/src/pages/Experiment/experimentText/props.tsx
new file mode 100644
index 00000000..ccd51997
--- /dev/null
+++ b/react-ui/src/pages/Experiment/experimentText/props.tsx
@@ -0,0 +1,171 @@
+import { getNodeResult, getQueryByExperimentLog } from '@/services/experiment/index.js';
+import { PipelineNodeModelSerialize } from '@/types';
+import { elapsedTime, formatDate } from '@/utils/date';
+import { to } from '@/utils/promise';
+import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
+import { Drawer, Form, Tabs } from 'antd';
+import dayjs from 'dayjs';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import ExperimentParameter from '../components/ExperimentParameter';
+import ExperimentResult from '../components/ExperimentResult';
+import LogList from '../components/LogList';
+import { experimentStatusInfo } from '../status';
+import styles from './props.less';
+
+export type ExperimentLog = {
+ log_type: 'normal' | 'resource'; // 日志类型
+ pod_name?: string; // 分布式名称
+ log_content?: string; // 日志内容
+ start_time?: string; // 日志开始时间
+};
+
+const Props = forwardRef((_, ref) => {
+ const [form] = Form.useForm();
+ const [experimentNodeData, setExperimentNodeData] = useState
- 任务名称：{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())}
-
-
+
+
+ 任务名称：{experimentNodeData.label}
+
+
+ 执行状态：
+
+
+ {experimentStatusInfo[experimentNodeData.experimentStatus]?.label}
+
+
+
+ 启动时间：{formatDate(experimentNodeData.experimentStartTime)}
+
+
+ 耗时：
+ {elapsedTime(
+ experimentNodeData.experimentStartTime,
+ experimentNodeData.experimentEndTime,
+ )}
+
+
- {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)}
+
+ );
+}
+
+export default ModelDeploymentCreate;
diff --git a/react-ui/src/pages/ModelDeployment/info.less b/react-ui/src/pages/ModelDeployment/info.less
new file mode 100644
index 00000000..c77a7070
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/info.less
@@ -0,0 +1,53 @@
+.model-deployment-info {
+ height: 100%;
+
+ &__basic {
+ &__item {
+ display: flex;
+ align-items: flex-start;
+ font-size: 16px;
+ line-height: 1.6;
+
+ .label {
+ width: 80px;
+ color: @text-color-secondary;
+ }
+
+ .value {
+ flex: 1;
+ color: @text-color;
+ }
+ }
+ }
+
+ &__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.tsx b/react-ui/src/pages/ModelDeployment/info.tsx
new file mode 100644
index 00000000..3e4e8a81
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/info.tsx
@@ -0,0 +1,148 @@
+/*
+ * @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 { getMirrorInfoReq } from '@/services/mirror';
+import { formatDate } from '@/utils/date';
+import { to } from '@/utils/promise';
+import { useNavigate, useParams } from '@umijs/max';
+import { Col, Row, Tabs, type TabsProps } from 'antd';
+import { useEffect, useState } from 'react';
+import styles from './info.less';
+
+type MirrorInfoData = {
+ name?: string;
+ description?: string;
+ version_count?: string;
+ create_time?: string;
+};
+
+type MirrorVersionData = {
+ id: number;
+ version: string;
+ url: string;
+ status: string;
+ file_size: string;
+ create_time: string;
+};
+
+const tabItems = [
+ {
+ key: '1',
+ label: '预测',
+ icon:
+
+
+
+
+
+
+ );
+}
+
+export default ModelDeploymentInfo;
diff --git a/react-ui/src/pages/ModelDeployment/list.less b/react-ui/src/pages/ModelDeployment/list.less
new file mode 100644
index 00000000..9e521f70
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/list.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.tsx b/react-ui/src/pages/ModelDeployment/list.tsx
new file mode 100644
index 00000000..bfad5a22
--- /dev/null
+++ b/react-ui/src/pages/ModelDeployment/list.tsx
@@ -0,0 +1,283 @@
+/*
+ * @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 { useCacheState } from '@/hooks/pageCacheState';
+import { deleteMirrorReq, getMirrorListReq } from '@/services/mirror';
+import themes from '@/styles/theme.less';
+import { to } from '@/utils/promise';
+import { modalConfirm } from '@/utils/ui';
+import { useNavigate } from '@umijs/max';
+import {
+ App,
+ Button,
+ ConfigProvider,
+ Input,
+ Table,
+ type TablePaginationConfig,
+ type TableProps,
+} from 'antd';
+import { type SearchProps } from 'antd/es/input';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import styles from './list.less';
+
+export type MirrorData = {
+ id: number;
+ name: string;
+ description: string;
+ create_time: string;
+};
+
+function ModelDeployment() {
+ const navigate = useNavigate();
+ const { message } = App.useApp();
+ const [cacheState, setCacheState] = useCacheState();
+ const [searchText, setSearchText] = useState(cacheState?.searchText);
+ const [inputText, setInputText] = useState(cacheState?.searchText);
+ const [tableData, setTableData] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 服务名称：
+ {mirrorInfo.name}
+
+
+
+ 镜像：
+ {mirrorInfo.version_count ?? '--'}
+
+
+
+ 状态：
+ {mirrorInfo.name}
+
+
+
+ 模型：
+ {mirrorInfo.version_count ?? '--'}
+
+
+
+ 环境变量：
+ {mirrorInfo.name}
+
+
+
+ 描述：
+ {mirrorInfo.description}
+
+
+
+ }
+ onClick={() => toDetail(record)}
+ >
+ 编辑
+
+ }
+ onClick={() => toDetail(record)}
+ >
+ 启动
+
+ }
+ onClick={() => toDetail(record)}
+ >
+ 停止
+
+
+ }
+ onClick={() => handleMirrorDelete(record)}
+ >
+ 删除
+
+
+
+ ),
+ },
+ ];
+
+ return (
+
+
+ );
+}
+
+export default ModelDeployment;
diff --git a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less
similarity index 100%
rename from react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less
rename to react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.less
diff --git a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
similarity index 95%
rename from react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx
rename to react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
index 7ab95f5d..e61423fd 100644
--- a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx
+++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx
@@ -1,7 +1,4 @@
-import {
- getParamComponent,
- getParamRules,
-} from '@/pages/Experiment/experimentText/addExperimentModal';
+import { getParamComponent, getParamRules } from '@/pages/Experiment/components/AddExperimentModal';
import { type PipelineGlobalParam } from '@/types';
import { to } from '@/utils/promise';
import { modalConfirm } from '@/utils/ui';
@@ -9,7 +6,7 @@ import { DeleteOutlined, 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 +19,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 +27,9 @@ const GlobalParamsDrawer = forwardRef(
return Promise.reject(error);
}
},
+ getFieldsValue: () => {
+ return form.getFieldsValue();
+ },
}));
// 处理参数类型变化
@@ -162,7 +162,6 @@ const GlobalParamsDrawer = forwardRef(
)}
- {/* //{contextHolder} */}
);
},
diff --git a/react-ui/src/pages/Pipeline/components/PropsLabel/index.less b/react-ui/src/pages/Pipeline/components/PropsLabel/index.less
new file mode 100644
index 00000000..2df39c02
--- /dev/null
+++ b/react-ui/src/pages/Pipeline/components/PropsLabel/index.less
@@ -0,0 +1,6 @@
+.props-label {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
diff --git a/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx b/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx
new file mode 100644
index 00000000..04197b75
--- /dev/null
+++ b/react-ui/src/pages/Pipeline/components/PropsLabel/index.tsx
@@ -0,0 +1,44 @@
+import { Button, Dropdown, type MenuProps } from 'antd';
+import { useEffect } from 'react';
+import styles from './index.less';
+
+type PropsLabelProps = {
+ title: string;
+ menuItems: MenuProps['items'];
+ onClick?: (key: string) => void;
+};
+
+function PropsLabel({ title, menuItems, onClick }: PropsLabelProps) {
+ useEffect(() => {}, []);
+
+ const handleItemClick: MenuProps['onClick'] = (e) => {
+ const keyPath = e.keyPath.reverse();
+ if (keyPath[0] === 'global') {
+ onClick?.(`\${${e.key}}`);
+ } else {
+ onClick?.(`{{${keyPath.join('.')}}}`);
+ }
+ };
+
+ return (
+
+
+
+ setInputText(e.target.value)}
+ style={{ width: 300 }}
+ value={inputText}
+ />
+ }
+ >
+ 创建推理服务
+
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+}
+
+export default PropsLabel;
diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx
index e073a449..20c265f2 100644
--- a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx
+++ b/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx
@@ -40,7 +40,6 @@ export type SelectorTypeInfo = {
getFiles: (params: any) => Promise
+ {ele.icon_path && (
+
+ )}
{ele.component_label}
-
-
-
- )}
-
- {code !== 200 && loginType === 'mobile' &&
+
+ getCaptchaCode()}
/>
- ),
- },
- ]}
- onGetCaptcha={async (phone) => {
- const result = await getFakeCaptcha({
- phone,
- });
- if (!result) {
- return;
- }
- message.success('获取验证码成功！验证码为：1234');
+
+
+
+ )}
+
+ {code !== 200 && loginType === 'mobile' &&
-
+ 今日新增数量：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..535f9b49 100644
--- a/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
+++ b/react-ui/src/pages/Workspace/components/ExperimentTable/index.tsx
@@ -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..c992c84a 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,7 +73,7 @@ function QuickStart() {
tips="可视化建模Designer"
buttonText="流水线"
buttonTop={20}
- x={476}
+ x={left + 2 * (192 + space)}
y={276}
onClick={() => navgite('/pipeline/pipelineText')}
/>
@@ -62,7 +81,7 @@ function QuickStart() {
content="开发者可以在这里运行流水线模板，产生实验实例，对比实验训练过程与产生的实验训练数据"
buttonText="实验"
buttonTop={40}
- x={699}
+ x={left + 3 * (192 + space)}
y={295}
onClick={() => navgite('/pipeline/experimentText')}
/>
@@ -71,70 +90,76 @@ function QuickStart() {
tips="模型在线服务"
buttonText="模型在线部署"
buttonTop={20}
- x={1010}
+ x={left + 4 * (192 + space) + 60 + space}
y={263}
onClick={() => 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..3c067e88 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -25,21 +25,6 @@ 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 };
},
@@ -47,7 +32,6 @@ export const requestConfig: RequestConfig = {
responseInterceptors: [
(response: any) => {
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/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..65a5a32e 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -36,16 +36,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 +72,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..7a069dbc 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,34 @@ 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;
+ placeholder?: string;
+ describe?: string;
+};
+
+export type PipelineNodeModelSerialize = Omit<
+ PipelineNodeModel,
+ 'control_strategy' | 'in_parameters' | 'out_parameters'
+> & {
+ control_strategy: Record;
+ in_parameters: Record;
+ out_parameters: Record;
+};
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..15e8082c 100644
--- a/react-ui/src/utils/index.ts
+++ b/react-ui/src/utils/index.ts
@@ -1,7 +1,7 @@
/*
* @Author: 赵伟
* @Date: 2024-03-25 13:52:54
- * @Description:
+ * @Description: 工具类
*/
export function s8() {
return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
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 && (
+ <>
+ (
);
root.render(
-
+
{global.holderRender ? global.holderRender(dom) : dom}
,
);
diff --git a/react-ui/src/utils/ui.tsx b/react-ui/src/utils/ui.tsx
index 108bc8c0..9a1ff626 100644
--- a/react-ui/src/utils/ui.tsx
+++ b/react-ui/src/utils/ui.tsx
@@ -6,7 +6,7 @@
import { PageEnum } from '@/enums/pagesEnums';
import themes from '@/styles/theme.less';
import { history } from '@umijs/max';
-import { Modal, type ModalFuncProps, type UploadFile } from 'antd';
+import { Modal, message, type ModalFuncProps, type UploadFile } from 'antd';
// 自定义 Confirm 弹框
export function modalConfirm({ title, content, onOk, ...rest }: ModalFuncProps) {
@@ -53,7 +53,10 @@ export const gotoLoginPage = (toHome: boolean = true) => {
const { pathname, search } = window.location;
const urlParams = new URLSearchParams();
urlParams.append('redirect', pathname + search);
- const newSearch = toHome && pathname && pathname !== PageEnum.LOGIN ? '' : urlParams.toString();
+ const newSearch =
+ toHome && pathname !== PageEnum.LOGIN && pathname !== '/' ? '' : urlParams.toString();
+ console.log('pathname', pathname);
+ console.log('search', search);
if (window.location.pathname !== PageEnum.LOGIN) {
history.replace({
pathname: PageEnum.LOGIN,
@@ -61,3 +64,28 @@ export const gotoLoginPage = (toHome: boolean = true) => {
});
}
};
+
+// 上传文件校验
+export const validateUploadFiles = (files: UploadFile[], required: boolean = true): boolean => {
+ if (required && files.length === 0) {
+ message.error('请上传文件');
+ return false;
+ }
+
+ const hasError = files.some((file) => {
+ if (file.status === 'uploading') {
+ message.error('请等待文件上传完成');
+ return true;
+ }
+ if (file.status === 'error') {
+ message.error('存在上传失败的文件，请删除后重新上传');
+ return true;
+ }
+ if (!file.response || file.response.code !== 200 || !file.response.data) {
+ message.error('存在上传失败的文件，请删除后重新上传');
+ return true;
+ }
+ return false;
+ });
+ return !hasError;
+};
{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..3c067e88 100644
--- a/react-ui/src/requestConfig.ts
+++ b/react-ui/src/requestConfig.ts
@@ -25,21 +25,6 @@ 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 };
},
@@ -47,7 +32,6 @@ export const requestConfig: RequestConfig = {
responseInterceptors: [
(response: any) => {
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/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..65a5a32e 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -36,16 +36,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 +72,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..7a069dbc 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,34 @@ 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;
+ placeholder?: string;
+ describe?: string;
+};
+
+export type PipelineNodeModelSerialize = Omit<
+ PipelineNodeModel,
+ 'control_strategy' | 'in_parameters' | 'out_parameters'
+> & {
+ control_strategy: Record{childen}
;
+ } else {
+ return (
+
+ {childen}
+
+ );
+ }
+ };
+};
diff --git a/react-ui/src/utils/modal.tsx b/react-ui/src/utils/modal.tsx
index 4a3b765f..577c1ec3 100644
--- a/react-ui/src/utils/modal.tsx
+++ b/react-ui/src/utils/modal.tsx
@@ -1,10 +1,11 @@
/*
* @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';
@@ -59,7 +60,12 @@ export const openAntdModal =