diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts index 3a58d07b..e89d5d60 100644 --- a/react-ui/config/routes.ts +++ b/react-ui/config/routes.ts @@ -94,7 +94,7 @@ export default [ { name: '实验训练', path: ':workflowId/:id', - component: './Experiment/training/index', + component: './Experiment/Info/index', }, { name: '实验对比', @@ -112,18 +112,18 @@ export default [ { name: '开发环境', path: '', + component: './DevelopmentEnvironment/List', + }, + { + name: '创建编辑器', + path: 'create', + component: './DevelopmentEnvironment/Create', + }, + { + name: '编辑器', + path: 'editor', component: './DevelopmentEnvironment/Editor', }, - // { - // name: '创建编辑器', - // path: 'create', - // component: './DevelopmentEnvironment/Create', - // }, - // { - // name: '编辑器', - // path: 'editor', - // component: './DevelopmentEnvironment/Editor', - // }, ], }, { diff --git a/react-ui/src/components/ArrayTableCell/index.tsx b/react-ui/src/components/ArrayTableCell/index.tsx new file mode 100644 index 00000000..de109ff4 --- /dev/null +++ b/react-ui/src/components/ArrayTableCell/index.tsx @@ -0,0 +1,37 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-28 14:18:11 + * @Description: 自定义 Table 数组类单元格 + */ + +import { Tooltip } from 'antd'; + +function ArrayTableCell(ellipsis: boolean = false, property?: string) { + return (value?: any | null) => { + if ( + value === undefined || + value === null || + Array.isArray(value) === false || + value.length === 0 + ) { + return --; + } + + let list = value; + if (property && typeof value[0] === 'object') { + list = value.map((item) => item[property]); + } + const text = list.join(','); + if (ellipsis) { + return ( + + {text}; + + ); + } else { + return {text}; + } + }; +} + +export default ArrayTableCell; diff --git a/react-ui/src/components/CommonTableCell/index.tsx b/react-ui/src/components/CommonTableCell/index.tsx index afa5d8d3..c86ef9a9 100644 --- a/react-ui/src/components/CommonTableCell/index.tsx +++ b/react-ui/src/components/CommonTableCell/index.tsx @@ -6,13 +6,13 @@ import { Tooltip } from 'antd'; -function renderCell(text?: string | null) { +function renderCell(text?: any | null) { return {text ?? '--'}; } function CommonTableCell(ellipsis: boolean = false) { if (ellipsis) { - return (text?: string | null) => ( + return (text?: any | null) => ( {renderCell(text)} diff --git a/react-ui/src/enums/index.ts b/react-ui/src/enums/index.ts index b31aee3a..b75eeca4 100644 --- a/react-ui/src/enums/index.ts +++ b/react-ui/src/enums/index.ts @@ -1,9 +1,36 @@ +/* + * @Author: 赵伟 + * @Date: 2024-06-07 11:22:28 + * @Description: 接口返回的枚举值和共用的枚举值定义在这里 + */ + // 公开还是私有 TabKey export enum CommonTabKeys { Private = 'Private', // 私有 Public = 'Public', // 公开 } +// 实验状态 +export enum ExperimentStatus { + Running = 'Running', // 运行中 + Succeeded = 'Succeeded', // 成功 + Pending = 'Pending', // 启动中 + Failed = 'Failed', // 失败 + Error = 'Error', // 错误 + Terminated = 'Terminated', // 终止 + Skipped = 'Skipped', // 跳过 + Omitted = 'Omitted', // 忽略 +} + +// TensorBoard 状态 +export enum TensorBoardStatus { + Unknown = 'Unknown', // 未知 + Pending = 'Pending', // 启动中 + Running = 'Running', // 运行中 + Terminated = 'Terminated', // 未启动或者已终止 + Failed = 'Failed', // 失败 +} + // 镜像版本状态 export enum MirrorVersionStatus { Available = 'available', // 可用 diff --git a/react-ui/src/overrides.less b/react-ui/src/overrides.less index 61102f12..0f84889d 100644 --- a/react-ui/src/overrides.less +++ b/react-ui/src/overrides.less @@ -4,7 +4,7 @@ * @Description: 覆盖 antd 样式 */ -// 设置 Table 可以滑动 +// 设置 Table 可以滑动，带分页 .vertical-scroll-table { .ant-table-wrapper { height: 100%; @@ -30,6 +30,32 @@ } } +// 设置 Table 可以滑动，没有分页 +.vertical-scroll-table-no-page { + .ant-table-wrapper { + height: 100%; + .ant-spin-nested-loading { + height: 100%; + + .ant-spin-container { + height: 100%; + + .ant-table { + height: 100%; + + .ant-table-container { + height: 100%; + + .ant-table-body { + overflow-y: auto !important; + } + } + } + } + } + } +} + // Tabs 样式 // 删除底部白色横线 .ant-tabs { diff --git a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx index e8bed08c..27908de7 100644 --- a/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx +++ b/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx @@ -8,10 +8,11 @@ import { ResourceData, ResourceType, resourceConfig } from '../../config'; import ResourceVersion from '../ResourceVersion'; import styles from './index.less'; +// 这里值小写是因为值会写在 url 中 export enum ResourceInfoTabKeys { - Introduction = 'introduction', - Version = 'version', - Evolution = 'evolution', + Introduction = 'introduction', // 简介 + Version = 'version', // 版本 + Evolution = 'evolution', // 演化 } type ResourceIntroProps = { diff --git a/react-ui/src/pages/Experiment/Comparison/index.less b/react-ui/src/pages/Experiment/Comparison/index.less index 288ce2ed..a491c621 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.less +++ b/react-ui/src/pages/Experiment/Comparison/index.less @@ -17,5 +17,17 @@ padding: 20px 30px 0; background-color: white; border-radius: 10px; + + :global { + .ant-table-container { + border: none !important; + } + .ant-table-tbody { + .ant-table-cell { + border-right: none !important; + border-left: none !important; + } + } + } } } diff --git a/react-ui/src/pages/Experiment/Comparison/index.tsx b/react-ui/src/pages/Experiment/Comparison/index.tsx index c53a0a94..59cd3f8b 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.tsx +++ b/react-ui/src/pages/Experiment/Comparison/index.tsx @@ -1,32 +1,50 @@ -import CommonTableCell from '@/components/CommonTableCell'; -import { useCacheState } from '@/hooks/pageCacheState'; -import { getExpEvaluateInfosReq, getExpTrainInfosReq } from '@/services/experiment'; +// import { useCacheState } from '@/hooks/pageCacheState'; +import { + getExpEvaluateInfosReq, + getExpMetricsReq, + getExpTrainInfosReq, +} from '@/services/experiment'; import { to } from '@/utils/promise'; +import tableCellRender, { arrayFormatter, dateFormatter } from '@/utils/table'; import { useSearchParams } from '@umijs/max'; -import { Button, Table, TablePaginationConfig, TableProps } from 'antd'; +import { App, Button, Table, /*TablePaginationConfig,*/ TableProps } from 'antd'; import classNames from 'classnames'; -import { useEffect, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; +import ExperimentStatusCell from '../components/ExperimentStatusCell'; import styles from './index.less'; export enum ComparisonType { - Train = 'train', // 训练 - Evaluate = 'evaluate', // 评估 + Train = 'Train', // 训练 + Evaluate = 'Evaluate', // 评估 } +type TableData = { + experiment_ins_id: number; + run_id: string; + dataset: string[]; + start_time: string; + status: string; + metrics_names: string[]; + metrics: Record; + params_names: string[]; + params: Record; +}; + function ExperimentComparison() { const [searchParams] = useSearchParams(); const comparisonType = searchParams.get('type'); - const experimentId = searchParams.get('experimentId'); - const [tableData, setTableData] = useState([]); - const [cacheState, setCacheState] = useCacheState(); - const [total, setTotal] = useState(0); + const experimentId = searchParams.get('id'); + const [tableData, setTableData] = useState([]); + // const [cacheState, setCacheState] = useCacheState(); + // const [total, setTotal] = useState(0); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [pagination, setPagination] = useState( - cacheState?.pagination ?? { - current: 1, - pageSize: 10, - }, - ); + const { message } = App.useApp(); + // const [pagination, setPagination] = useState( + // cacheState?.pagination ?? { + // current: 1, + // pageSize: 10, + // }, + // ); useEffect(() => { getComparisonData(); @@ -38,20 +56,39 @@ function ExperimentComparison() { comparisonType === ComparisonType.Train ? getExpTrainInfosReq : getExpEvaluateInfosReq; const [res] = await to(request(experimentId)); if (res && res.data) { - const { content = [], totalElements = 0 } = res.data; - setTableData(content); - setTotal(totalElements); + // const { content = [], totalElements = 0 } = res.data; + setTableData(res.data); + // setTotal(totalElements); } }; - // 分页切换 - const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => { - if (action === 'paginate') { - setPagination(pagination); + // 获取对比 url + const getExpMetrics = async () => { + const [res] = await to(getExpMetricsReq(selectedRowKeys)); + if (res && res.data) { + const url = res.data; + window.open(url, '_blank'); } - // console.log(pagination, filters, sorter, action); }; + // 对比按钮 click + const hanldeComparisonClick = () => { + if (selectedRowKeys.length < 2) { + message.error('请至少选择两项进行对比'); + return; + } + getExpMetrics(); + }; + + // 分页切换 + // const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => { + // if (action === 'paginate') { + // setPagination(pagination); + // } + // // console.log(pagination, filters, sorter, action); + // }; + + // 选择行 const rowSelection: TableProps['rowSelection'] = { type: 'checkbox', selectedRowKeys, @@ -61,148 +98,96 @@ function ExperimentComparison() { }, }; - const columns: TableProps['columns'] = [ - { - title: '基本信息', - children: [ - { - title: '实例ID', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: '运行时间', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: '运行状态', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: '训练数据集', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: '增量训练', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - ], - }, - { - title: '训练参数', - children: [ - { - title: 'batchsize', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'config', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'epoch', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'lr', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'warmup_iters', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - ], - }, - { - title: '训练指标', - children: [ - { - title: 'metrc_name', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'test_1', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'test_2', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'test_3', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - { - title: 'test_4', - dataIndex: 'name', - key: 'name', - width: '30%', - render: CommonTableCell(), - }, - ], - }, - ]; + const columns: TableProps['columns'] = useMemo(() => { + const first: TableData | undefined = tableData[0]; + return [ + { + title: '基本信息', + children: [ + { + title: '实例 ID', + dataIndex: 'experiment_ins_id', + key: 'experiment_ins_id', + width: '20%', + render: tableCellRender(), + }, + { + title: '运行时间', + dataIndex: 'start_time', + key: 'start_time', + width: 180, + render: tableCellRender(false, dateFormatter), + }, + { + title: '运行状态', + dataIndex: 'status', + key: 'status', + width: '20%', + render: ExperimentStatusCell, + }, + { + title: '训练数据集', + dataIndex: 'dataset', + key: 'dataset', + width: '20%', + render: tableCellRender(true, arrayFormatter()), + ellipsis: { showTitle: false }, + }, + ], + }, + { + title: '训练参数', + children: first?.params_names.map((name) => ({ + title: name, + dataIndex: ['params', name], + key: name, + width: '20%', + render: tableCellRender(true), + ellipsis: { showTitle: false }, + })), + }, + { + title: '训练指标', + children: first?.metrics_names.map((name) => ({ + title: name, + dataIndex: ['metrics', name], + key: name, + width: '20%', + render: tableCellRender(true), + ellipsis: { showTitle: false }, + })), + }, + ]; + }, [tableData]); return (
- +
-
+
diff --git a/react-ui/src/pages/Experiment/training/index.jsx b/react-ui/src/pages/Experiment/Info/index.jsx similarity index 100% rename from react-ui/src/pages/Experiment/training/index.jsx rename to react-ui/src/pages/Experiment/Info/index.jsx diff --git a/react-ui/src/pages/Experiment/training/index.less b/react-ui/src/pages/Experiment/Info/index.less similarity index 100% rename from react-ui/src/pages/Experiment/training/index.less rename to react-ui/src/pages/Experiment/Info/index.less diff --git a/react-ui/src/pages/Experiment/training/props.less b/react-ui/src/pages/Experiment/Info/props.less similarity index 100% rename from react-ui/src/pages/Experiment/training/props.less rename to react-ui/src/pages/Experiment/Info/props.less diff --git a/react-ui/src/pages/Experiment/training/props.tsx b/react-ui/src/pages/Experiment/Info/props.tsx similarity index 100% rename from react-ui/src/pages/Experiment/training/props.tsx rename to react-ui/src/pages/Experiment/Info/props.tsx diff --git a/react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.less b/react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.less new file mode 100644 index 00000000..a5df71aa --- /dev/null +++ b/react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.less @@ -0,0 +1,12 @@ +.experiment-status-cell { + height: 100%; + &__label { + display: none; + } +} + +.experiment-status-cell:hover { + .experiment-status-cell__label { + display: inline; + } +} diff --git a/react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.tsx new file mode 100644 index 00000000..373b6ffa --- /dev/null +++ b/react-ui/src/pages/Experiment/components/ExperimentStatusCell/index.tsx @@ -0,0 +1,28 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-18 18:35:41 + * @Description: 实验状态 + */ + +import { ExperimentStatus } from '@/enums'; +import { experimentStatusInfo as statusInfo } from '@/pages/Experiment/status'; +import styles from './index.less'; + +function ExperimentStatusCell(status?: ExperimentStatus | null) { + if (status === null || status === undefined || !statusInfo[status]) { + return --; + } + return ( +
+ + + {statusInfo[status]?.label} + +
+ ); +} + +export default ExperimentStatusCell; diff --git a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx index a3da3044..cd84406d 100644 --- a/react-ui/src/pages/Experiment/components/LogGroup/index.tsx +++ b/react-ui/src/pages/Experiment/components/LogGroup/index.tsx @@ -4,9 +4,9 @@ * @Description: 日志组件 */ +import { ExperimentStatus } from '@/enums'; import { useStateRef } from '@/hooks'; -import { ExperimentStatus } from '@/pages/Experiment/status'; -import { ExperimentLog } from '@/pages/Experiment/training/props'; +import { ExperimentLog } from '@/pages/Experiment/Info/props'; import { getExperimentPodsLog } from '@/services/experiment/index.js'; import { DoubleRightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons'; import { Button } from 'antd'; @@ -47,7 +47,7 @@ function LogGroup({ const [logList, setLogList, logListRef] = useStateRef([]); const [completed, setCompleted] = useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [isMouseDown, setIsMouseDown, isMouseDownRef] = useStateRef(false); + const [_isMouseDown, setIsMouseDown, isMouseDownRef] = useStateRef(false); useEffect(() => { scrollToBottom(false); diff --git a/react-ui/src/pages/Experiment/components/LogList/index.tsx b/react-ui/src/pages/Experiment/components/LogList/index.tsx index 8a2ade14..0d833107 100644 --- a/react-ui/src/pages/Experiment/components/LogList/index.tsx +++ b/react-ui/src/pages/Experiment/components/LogList/index.tsx @@ -1,5 +1,5 @@ -import { ExperimentStatus } from '@/pages/Experiment/status'; -import { ExperimentLog } from '@/pages/Experiment/training/props'; +import { ExperimentStatus } from '@/enums'; +import { ExperimentLog } from '@/pages/Experiment/Info/props'; import LogGroup from '../LogGroup'; import styles from './index.less'; diff --git a/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.tsx b/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.tsx index d8dad901..8a6f5b7c 100644 --- a/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.tsx +++ b/react-ui/src/pages/Experiment/components/TensorBoardStatus/index.tsx @@ -5,16 +5,15 @@ import classNames from 'classnames'; import styles from './index.less'; // import stopImg from '@/assets/img/tensor-board-stop.png'; import terminatedImg from '@/assets/img/tensor-board-terminated.png'; +import { TensorBoardStatus } from '@/enums'; -export enum TensorBoardStatusEnum { - Unknown = 'Unknown', // 未知 - Pending = 'Pending', // 启动中 - Running = 'Running', // 运行中 - Terminated = 'Terminated', // 未启动或者已终止 - Failed = 'Failed', // 失败 -} +type TensorBoardStatusInfo = { + label: string; + icon: string; + classname: string; +}; -const statusConfig = { +const statusConfig: Record = { Unknown: { label: '未知', icon: terminatedImg, @@ -43,12 +42,12 @@ const statusConfig = { }; type TensorBoardStatusProps = { - status: TensorBoardStatusEnum; + status: TensorBoardStatus; onClick: () => void; }; -function TensorBoardStatus({ - status = TensorBoardStatusEnum.Unknown, +function TensorBoardStatusCell({ + status = TensorBoardStatus.Unknown, onClick, }: TensorBoardStatusProps) { return ( @@ -64,7 +63,7 @@ function TensorBoardStatus({ {statusConfig[status].icon ? ( <>
|
- {status === TensorBoardStatusEnum.Pending ? ( + {status === TensorBoardStatus.Pending ? ( ) : ( { if ( - experimentIn.tensorBoardStatus === TensorBoardStatusEnum.Terminated || - experimentIn.tensorBoardStatus === TensorBoardStatusEnum.Failed + experimentIn.tensorBoardStatus === TensorBoardStatus.Terminated || + experimentIn.tensorBoardStatus === TensorBoardStatus.Failed ) { await runTensorBoard(experimentIn); } else if ( - experimentIn.tensorBoardStatus === TensorBoardStatusEnum.Running && + experimentIn.tensorBoardStatus === TensorBoardStatus.Running && experimentIn.tensorboardUrl ) { window.open(experimentIn.tensorboardUrl, '_blank'); @@ -457,12 +458,12 @@ function Experiment() {
{item.nodes_result?.tensorboard_log ? ( - handleTensorboard(item)} - > + > ) : ( - '-' + '--' )}
diff --git a/react-ui/src/pages/Experiment/status.ts b/react-ui/src/pages/Experiment/status.ts index b9c45af6..02b68f53 100644 --- a/react-ui/src/pages/Experiment/status.ts +++ b/react-ui/src/pages/Experiment/status.ts @@ -1,23 +1,13 @@ +import { ExperimentStatus } from '@/enums'; import themes from '@/styles/theme.less'; -export interface StatusInfo { +export interface ExperimentStatusInfo { label: string; color: string; icon: string; } -export enum ExperimentStatus { - Running = 'Running', - Succeeded = 'Succeeded', - Pending = 'Pending', - Failed = 'Failed', - Error = 'Error', - Terminated = 'Terminated', - Skipped = 'Skipped', - Omitted = 'Omitted', -} - -export const experimentStatusInfo: Record = { +export const experimentStatusInfo: Record = { Running: { label: '运行中', color: themes.primaryColor, diff --git a/react-ui/src/pages/ModelDeployment/Info/index.tsx b/react-ui/src/pages/ModelDeployment/Info/index.tsx index a548e93a..4f73f46f 100644 --- a/react-ui/src/pages/ModelDeployment/Info/index.tsx +++ b/react-ui/src/pages/ModelDeployment/Info/index.tsx @@ -17,9 +17,9 @@ import { ModelDeploymentData } from '../types'; import styles from './index.less'; export enum ModelDeploymentTabKey { - Predict = 'Predict', - Guide = 'Guide', - Log = 'Log', + Predict = 'Predict', // 预测 + Guide = 'Guide', // 调用指南 + Log = 'Log', // 服务日志 } function ModelDeploymentInfo() { diff --git a/react-ui/src/pages/ModelDeployment/List/index.tsx b/react-ui/src/pages/ModelDeployment/List/index.tsx index bc1f03dd..934b4cbd 100644 --- a/react-ui/src/pages/ModelDeployment/List/index.tsx +++ b/react-ui/src/pages/ModelDeployment/List/index.tsx @@ -166,7 +166,7 @@ function ModelDeployment() { }; // 分页切换 - const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => { + const handleTableChange: TableProps['onChange'] = (pagination, _filters, _sorter, { action }) => { if (action === 'paginate') { setPagination(pagination); } @@ -179,7 +179,7 @@ function ModelDeployment() { dataIndex: 'index', key: 'index', width: '20%', - render(text, record, index) { + render(_text, _record, index) { return {(pagination.current! - 1) * pagination.pageSize! + index + 1}; }, }, diff --git a/react-ui/src/pages/ModelDeployment/types.ts b/react-ui/src/pages/ModelDeployment/types.ts index c8dfe808..4bdf28c8 100644 --- a/react-ui/src/pages/ModelDeployment/types.ts +++ b/react-ui/src/pages/ModelDeployment/types.ts @@ -26,7 +26,7 @@ export type ModelDeploymentData = { // 操作类型 export enum ModelDeploymentOperationType { - Create = 'Create', - Update = 'Update', - Restart = 'Restart', + Create = 'Create', // 创建 + Update = 'Update', // 更新 + Restart = 'Restart', // 重启 } diff --git a/react-ui/src/services/experiment/index.js b/react-ui/src/services/experiment/index.js index 89028b24..66d27eb6 100644 --- a/react-ui/src/services/experiment/index.js +++ b/react-ui/src/services/experiment/index.js @@ -126,7 +126,15 @@ export function getExpEvaluateInfosReq(experimentId) { // 获取当前实验的模型训练指标信息 export function getExpTrainInfosReq(experimentId) { - return request(`/api/mmp//aim/getExpTrainInfos/${experimentId}`, { + return request(`/api/mmp/aim/getExpTrainInfos/${experimentId}`, { method: 'GET', }); } + +// 获取当前实验的指标对比地址 +export function getExpMetricsReq(data) { + return request(`/api/mmp/aim/getExpMetrics`, { + method: 'POST', + data + }); +} diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts index 57dc3856..aa9b0e5e 100644 --- a/react-ui/src/types.ts +++ b/react-ui/src/types.ts @@ -4,7 +4,7 @@ * @Description: 定义全局类型，比如无关联的页面都需要要的类型 */ -import { ExperimentStatus } from '@/pages/Experiment/status'; +import { ExperimentStatus } from '@/enums'; // 流水线全局参数 export type PipelineGlobalParam = { diff --git a/react-ui/src/utils/table.tsx b/react-ui/src/utils/table.tsx new file mode 100644 index 00000000..3058284a --- /dev/null +++ b/react-ui/src/utils/table.tsx @@ -0,0 +1,68 @@ +/* + * @Author: 赵伟 + * @Date: 2024-06-26 10:05:52 + * @Description: 列表自定义 render + */ + +import { formatDate } from '@/utils/date'; +import { Tooltip } from 'antd'; +import dayjs from 'dayjs'; + +type TableCellFormatter = (value?: any | null) => string | undefined | null; + +// 字符串转换函数 +export const stringFormatter: TableCellFormatter = (value?: any | null) => { + return value; +}; + +// 日期转换函数 +export const dateFormatter: TableCellFormatter = (value?: any | null) => { + if (value === undefined || value === null || value === '') { + return null; + } + if (!dayjs(value).isValid()) { + return null; + } + return formatDate(value); +}; + +// 数组转换函数 +export function arrayFormatter(property?: string) { + return (value?: any | null): ReturnType => { + if ( + value === undefined || + value === null || + Array.isArray(value) === false || + value.length === 0 + ) { + return null; + } + + let list = value; + if (property && typeof value[0] === 'object') { + list = value.map((item) => item[property]); + } + return list.join(','); + }; +} + +function tableCellRender(ellipsis: boolean = false, format: TableCellFormatter = stringFormatter) { + return (value?: any | null) => { + const text = format(value); + if (ellipsis && text) { + return ( + + {renderCell(text)} + + ); + } else { + return renderCell(text); + } + }; +} + +function renderCell(text?: any | null) { + return {text ?? '--'}; +} + +export default tableCellRender; diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/AimServiceImpl.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/AimServiceImpl.java index 6ec8f43c..fdd7b5c9 100644 --- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/AimServiceImpl.java +++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/AimServiceImpl.java @@ -23,8 +23,6 @@ import java.util.stream.Collectors; public class AimServiceImpl implements AimService { @Resource private ExperimentInsService experimentInsService; - @Resource - private ModelDependencyService modelDependencyService; @Value("${aim.url}") private String aimUrl; @@ -44,7 +42,7 @@ public class AimServiceImpl implements AimService { @Override public String getExpMetrics(List runIds) throws Exception { String decode = AIM64EncoderUtil.decode(runIds); - return aimUrl+"/api/runs/search/run?query="+decode; + return aimUrl+"/metrics?select="+decode; } private List getAimRunInfos(boolean isTrain,Integer experimentId) throws Exception { @@ -56,6 +54,7 @@ public class AimServiceImpl implements AimService { String url = aimProxyUrl+"/api/runs/search/run?query="+encodedUrlString; String s = HttpUtils.sendGetRequest(url); List> response = JacksonUtil.parseJSONStr2MapList(s); + System.out.println("response: "+JacksonUtil.toJSONString(response)); if (response == null || response.size() == 0){ return new ArrayList<>(); } @@ -103,20 +102,15 @@ public class AimServiceImpl implements AimService { aimRunInfo.setStatus(ins.getStatus()); aimRunInfo.setStartTime(ins.getCreateTime()); Map metricRecordMap = JacksonUtil.parseJSONStr2Map(metricRecordString); - - //metricRecord 格式为{"train":[{"task_id":"model-train-35303690","run_id":"5560d78f54314672b60304c8d6ba03b8","experiment_name":"experiment-30-train"}],"evaluate":[{"task_id":"model-train-35303690","run_id":"5560d78f54314672b60304c8d6ba03b8","experiment_name":"experiment-30-train"}]} - //遍历metricRecord，找到当前task_id对应的ModelDependency - if (isTrain){ - List> trainList = (List>) metricRecordMap.get("train"); - List trainDateSet = getTrainDateSet(trainList, ins.getId(), isTrain); - aimRunInfo.setDataset(trainDateSet); + List> records = (List>) metricRecordMap.get("train"); + List datasetList = getTrainDateSet(records, aimrunId); + aimRunInfo.setDataset(datasetList); }else { - List> trainList = (List>) metricRecordMap.get("evaluate"); - List trainDateSet = getTrainDateSet(trainList, ins.getId(), isTrain); - aimRunInfo.setDataset(trainDateSet); + List> records = (List>) metricRecordMap.get("evaluate"); + List datasetList = getTrainDateSet(records, aimrunId); + aimRunInfo.setDataset(datasetList); } - } } aimRunInfoList.add(aimRunInfo); @@ -143,33 +137,21 @@ public class AimServiceImpl implements AimService { } - private List getTrainDateSet(List> trainList,Integer expInsId,boolean isTrain){ - if (trainList == null || trainList.size() == 0){ - return new ArrayList<>(); - } + private List getTrainDateSet(List> records, String aimrunId){ List datasetList = new ArrayList<>(); - for (Map trainMap : trainList) { - String task_id = (String) trainMap.get("task_id"); - //modelDependency取到数据集文件 - ModelDependency modelDependency = modelDependencyService.queryByInsAndTrainTaskId(expInsId, task_id); - //把数据集文件组装成String后放进List - String datasetString = ""; - if (isTrain){ - datasetString = modelDependency.getTrainDataset(); - }else { - datasetString = modelDependency.getTestDataset(); - } - List> datasetListMap = JacksonUtil.parseJSONStr2MapList(datasetString); - - if (datasetListMap != null && datasetListMap.size() > 0){ - for (Map datasetMap : datasetListMap) { - //[{"dataset_id":20,"dataset_version":"v0.1.0","dataset_name":"手写体识别模型依赖测试训练数据集"}] - String datasetName = (String) datasetMap.get("dataset_name")+":"+(String) datasetMap.get("dataset_version"); + for (Map record : records) { + if (StringUtils.equals(aimrunId, (String)record.get("run_id"))) { + List> datasets = (List>) record.get("datasets"); + if (datasets == null || datasets.size() == 0){ + continue; + } + for (Map dataset : datasets){ + String datasetName = (String) dataset.get("dataset_name")+":"+(String) dataset.get("dataset_version"); datasetList.add(datasetName); } + break; } } return datasetList; } - } diff --git a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ExperimentServiceImpl.java b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ExperimentServiceImpl.java index d1ae81c4..388155d6 100644 --- a/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ExperimentServiceImpl.java +++ b/ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ExperimentServiceImpl.java @@ -251,16 +251,14 @@ public class ExperimentServiceImpl implements ExperimentService { if (data == null || MapUtils.isEmpty(data)) { throw new RuntimeException("Failed to run workflow."); } - //获取训练参数 - Map metricRecord = (Map) runResMap.get("metric_record"); + Map metadata = (Map) data.get("metadata"); // 插入记录到实验实例表 ExperimentIns experimentIns = new ExperimentIns(); - if (metricRecord != null){ - experimentIns.setMetricRecord(JacksonUtil.toJSONString(metricRecord)); - } + //获取训练参数 + experimentIns.setExperimentId(experiment.getId()); experimentIns.setArgoInsNs((String) metadata.get("namespace")); experimentIns.setArgoInsName((String) metadata.get("name")); @@ -271,14 +269,22 @@ public class ExperimentServiceImpl implements ExperimentService { //替换argoInsName String outputString = JsonUtils.mapToJson(output); experimentIns.setNodesResult(outputString.replace("{{workflow.name}}", (String) metadata.get("name"))); - //插入ExperimentIns表中 - ExperimentIns insert = experimentInsService.insert(experimentIns); - //插入到模型依赖关系表 + //得到dependendcy Map converMap2 = JsonUtils.jsonToMap(JacksonUtil.replaceInAarry(convertRes, params)); Map dependendcy = (Map)converMap2.get("model_dependency"); Map trainInfo = (Map)converMap2.get("component_info"); + + Map metricRecord = (Map) runResMap.get("metric_record"); + if (metricRecord != null){ + //把训练用的数据集也放进去 + addDatesetToMetric(metricRecord, trainInfo); + experimentIns.setMetricRecord(JacksonUtil.toJSONString(metricRecord)); + } + //插入ExperimentIns表中 + ExperimentIns insert = experimentInsService.insert(experimentIns); + //插入到模型依赖关系表 if (dependendcy != null && trainInfo != null){ insertModelDependency(dependendcy,trainInfo,insert.getId(),experiment.getName()); } @@ -289,6 +295,37 @@ public class ExperimentServiceImpl implements ExperimentService { experiment.setExperimentInsList(updatedExperimentInsList); return experiment; } + private void addDatesetToMetric(Map metricRecord, Map trainInfo) { + processMetricPart(metricRecord, trainInfo, "train", "model_train"); + processMetricPart(metricRecord, trainInfo, "evaluate", "model_evaluate"); + } + + private void processMetricPart(Map metricRecord, Map trainInfo, String metricKey, String trainInfoKey) { + List> metricList = (List>) metricRecord.get(metricKey); + if (metricList != null) { + for (Map metricRecordItem : metricList) { + String taskId = (String) metricRecordItem.get("task_id"); + Map trainInfoPart = (Map) trainInfo.get(trainInfoKey); + if (trainInfoPart != null) { + Map trainInfoDetails = (Map) trainInfoPart.get(taskId); + if (trainInfoDetails != null) { + List> datasets = (List>) trainInfoDetails.get("datasets"); + if (datasets != null) { + //查询名字再回填 + for (int i = 0; i < datasets.size(); i++) { + Dataset dataset = datasetService.queryById((Integer) datasets.get(i).get("dataset_id")); + datasets.get(i).put("dataset_name", dataset.getName()); + } + metricRecordItem.put("datasets", datasets); + } + } + } + } + } + } + + + private void insertModelDependency(Map dependendcy,Map trainInfo, Integer experimentInsId, String experimentName) throws Exception { Iterator> dependendcyIterator = dependendcy.entrySet().iterator(); Map modelTrain = (Map) trainInfo.get("model_train"); diff --git a/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ExperimentInsDaoMapper.xml b/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ExperimentInsDaoMapper.xml index e5faba38..d33201f6 100644 --- a/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ExperimentInsDaoMapper.xml +++ b/ruoyi-modules/management-platform/src/main/resources/mapper/managementPlatform/ExperimentInsDaoMapper.xml @@ -306,7 +306,7 @@ global_param = #{experimentIns.globalParam}, - and metric_record = #{experimentIns.metricRecord} + metric_record = #{experimentIns.metricRecord}, start_time = #{experimentIns.startTime},