+ {logGroups.length > 0 ? (
+ logGroups.map((v) =>
)
) : (
暂无日志
)}
diff --git a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
index a2b0ded5..06c5a4f0 100644
--- a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
+++ b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.less
@@ -1,31 +1,14 @@
-.params_container {
- max-height: 230px;
- padding: 15px 15px 0;
+.params-container {
+ max-height: calc(100vh - 300px);
+ padding: 24px 24px 0;
overflow-y: auto;
border: 1px solid #e6e6e6;
border-radius: 8px;
-
- &_line {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
-
- &_label {
- width: 180px;
- color: @text-color;
- font-size: 15px;
- }
- &_value {
- flex: 1;
- width: 100px;
- margin-left: 15px;
- padding: 10px 20px;
- color: @text-color;
- font-size: @font-size;
- line-height: 20px;
- background: #f6f6f6;
- border: 1px solid #e0e0e1;
- border-radius: 4px;
+}
+.params-empty {
+ :global {
+ .kf-empty__image {
+ width: 300px;
}
}
}
diff --git a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
index f860135a..8bd49817 100644
--- a/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
+++ b/react-ui/src/pages/Experiment/components/ViewParamsModal/index.tsx
@@ -4,9 +4,11 @@
* @Description: 查看实验使用的参数
*/
import parameterImg from '@/assets/img/modal-parameter.png';
+import KFEmpty, { EmptyType } from '@/components/KFEmpty';
import KFModal from '@/components/KFModal';
import { type PipelineGlobalParam } from '@/types';
-import { getParamType } from '../AddExperimentModal';
+import { Form } from 'antd';
+import { getParamComponent, getParamLabel } from '../AddExperimentModal';
import styles from './index.less';
type ParamsModalProps = {
@@ -26,14 +28,44 @@ function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
cancelButtonProps={{ style: { display: 'none' } }}
width={825}
>
-
- {globalParam?.map((item) => (
-
- {getParamType(item)}
- {item.param_value}
-
- ))}
-
+ {Array.isArray(globalParam) && globalParam.length > 0 ? (
+
+
+
+ ) : (
+
+ )}
);
}
diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx
index de8504f5..1ecc7df1 100644
--- a/react-ui/src/pages/Experiment/index.jsx
+++ b/react-ui/src/pages/Experiment/index.jsx
@@ -1,7 +1,7 @@
import KFIcon from '@/components/KFIcon';
import PageTitle from '@/components/PageTitle';
import { ExperimentStatus, TensorBoardStatus } from '@/enums';
-import { useCacheState } from '@/hooks/pageCacheState';
+import { useCacheState } from '@/hooks/useCacheState';
import {
deleteExperimentById,
getExperiment,
@@ -15,18 +15,20 @@ import {
} from '@/services/experiment/index.js';
import { getWorkflow } from '@/services/pipeline/index.js';
import themes from '@/styles/theme.less';
+import { ExperimentCompleted } from '@/utils/constant';
import { to } from '@/utils/promise';
import tableCellRender, { TableCellValueType } from '@/utils/table';
import { modalConfirm } from '@/utils/ui';
import { App, Button, ConfigProvider, Dropdown, Input, Space, Table, Tooltip } from 'antd';
import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ComparisonType } from './Comparison/config';
import AddExperimentModal from './components/AddExperimentModal';
-import ExperimentInstance from './components/ExperimentInstance';
+import ExperimentInstanceList from './components/ExperimentInstanceList';
import styles from './index.less';
import { experimentStatusInfo } from './status';
+import { useServerTime } from '@/hooks/useServerTime';
// 定时器
const timerIds = new Map();
@@ -35,14 +37,8 @@ function Experiment() {
const navigate = useNavigate();
const [experimentList, setExperimentList] = useState([]);
const [workflowList, setWorkflowList] = useState([]);
- const [queryFlow, setQueryFlow] = useState({
- offset: 1,
- page: 0,
- size: 10000,
- name: null,
- });
const [experimentId, setExperimentId] = useState(null);
- const [experimentInList, setExperimentInList] = useState([]);
+ const [experimentInsList, setExperimentInsList] = useState([]);
const [expandedRowKeys, setExpandedRowKeys] = useState(null);
const [total, setTotal] = useState(0);
const [isAdd, setIsAdd] = useState(true);
@@ -52,6 +48,7 @@ function Experiment() {
const [cacheState, setCacheState] = useCacheState();
const [searchText, setSearchText] = useState(cacheState?.searchText);
const [inputText, setInputText] = useState(cacheState?.searchText);
+ const [now] = useServerTime();
const [pagination, setPagination] = useState(
cacheState?.pagination ?? {
current: 1,
@@ -59,20 +56,10 @@ function Experiment() {
},
);
const { message } = App.useApp();
-
- useEffect(() => {
- getWorkflowList();
- return () => {
- clearExperimentInTimers();
- };
- }, []);
-
- useEffect(() => {
- getExperimentList();
- }, [pagination, searchText]);
+ const timerRef = useRef();
// 获取实验列表
- const getExperimentList = async () => {
+ const getExperimentList = useCallback(async () => {
const params = {
page: pagination.current - 1,
size: pagination.pageSize,
@@ -88,15 +75,81 @@ function Experiment() {
setTotal(res.data.totalElements);
}
- };
+ }, [pagination, searchText]);
+
+ // 刷新实验列表状态，
+ // 目前是直接刷新实验列表，后续需要优化，只刷新状态
+ const refreshExperimentList = useCallback(() => {
+ getExperimentList();
+ }, [getExperimentList]);
// 获取流水线列表
- const getWorkflowList = async () => {
- const [res] = await to(getWorkflow(queryFlow));
- if (res && res.data && res.data.content) {
- setWorkflowList(res.data.content);
- }
- };
+ useEffect(() => {
+ // 获取流水线列表
+ const getWorkflowList = async () => {
+ const queryFlow = {
+ offset: 1,
+ page: 0,
+ size: 10000,
+ name: null,
+ };
+ const [res] = await to(getWorkflow(queryFlow));
+ if (res && res.data && res.data.content) {
+ setWorkflowList(res.data.content);
+ }
+ };
+
+ getWorkflowList();
+ return () => {
+ clearExperimentInTimers();
+ };
+ }, []);
+
+ // 获取实验列表
+ useEffect(() => {
+ getExperimentList();
+ }, [getExperimentList]);
+
+ // 新增，删除版本时，重置分页，然后刷新版本列表
+ useEffect(() => {
+ const handleMessage = (e) => {
+ const { type, payload } = e.data;
+ if (type === ExperimentCompleted) {
+ const { id, status, finish_time } = payload;
+
+ // 修改实例的状态和结束时间
+ setExperimentInsList((prev) =>
+ prev.map((v) =>
+ v.id === id
+ ? {
+ ...v,
+ status: status,
+ finish_time: finish_time,
+ }
+ : v,
+ ),
+ );
+
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ timerRef.current = undefined;
+ }
+
+ timerRef.current = setTimeout(() => {
+ refreshExperimentList();
+ }, 10000);
+ }
+ };
+
+ window.addEventListener('message', handleMessage);
+ return () => {
+ window.removeEventListener('message', handleMessage);
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ timerRef.current = undefined;
+ }
+ };
+ }, [refreshExperimentList]);
// 搜索
const onSearch = (value) => {
@@ -108,11 +161,11 @@ function Experiment() {
};
// 获取实验实例列表
- const getQueryByExperiment = async (experimentId, page) => {
+ const getQueryByExperiment = async (experimentId, page, size = 5) => {
const params = {
experimentId: experimentId,
page: page,
- size: 5,
+ size: size,
};
const [res, error] = await to(getQueryByExperimentId(params));
if (res && res.data) {
@@ -127,10 +180,10 @@ function Experiment() {
};
});
if (page === 0) {
- setExperimentInList(list);
+ setExperimentInsList(list);
clearExperimentInTimers();
} else {
- setExperimentInList((prev) => [...prev, ...list]);
+ setExperimentInsList((prev) => [...prev, ...list]);
}
setExperimentInsTotal(totalElements);
// 获取 TensorBoard 状态
@@ -173,7 +226,7 @@ function Experiment() {
};
const [res] = await to(getTensorBoardStatusReq(params));
if (res && res.data) {
- setExperimentInList((prevList) => {
+ setExperimentInsList((prevList) => {
return prevList.map((item) => {
if (item.id === experimentIn.id) {
return {
@@ -201,11 +254,12 @@ function Experiment() {
// 展开实例
const expandChange = (e, record) => {
clearExperimentInTimers();
- setExperimentInList([]);
+ setExperimentInsList([]);
if (record.id === expandedRowKeys) {
setExpandedRowKeys(null);
} else {
- getQueryByExperiment(record.id, 0);
+ getQueryByExperiment(record.id, 0, 5);
+ refreshExperimentList();
}
};
@@ -277,7 +331,6 @@ function Experiment() {
current,
pageSize,
});
- getExperimentList();
};
// 运行实验
const runExperiment = async (id) => {
@@ -285,9 +338,7 @@ function Experiment() {
if (res) {
message.success('运行成功');
refreshExperimentList();
- refreshExperimentIns(id);
- } else {
- message.error('运行失败');
+ getQueryByExperiment(id, 0, 5);
}
};
@@ -325,22 +376,17 @@ function Experiment() {
}
};
- // 刷新实验列表状态，
- // 目前是直接刷新实验列表，后续需要优化，只刷新状态
- const refreshExperimentList = () => {
- getExperimentList();
- };
-
// 实验实例终止
const handleInstanceTerminate = async (experimentIn) => {
// 刷新实验列表
refreshExperimentList();
- setExperimentInList((prevList) => {
+ setExperimentInsList((prevList) => {
return prevList.map((item) => {
if (item.id === experimentIn.id) {
return {
...item,
status: ExperimentStatus.Terminated,
+ finish_time: now().toISOString(),
};
}
return item;
@@ -369,13 +415,39 @@ function Experiment() {
// 刷新实验实例列表
const refreshExperimentIns = (experimentId) => {
- getQueryByExperiment(experimentId, 0);
+ const length = experimentInsList.length;
+ getQueryByExperiment(experimentId, 0, length);
};
// 加载更多实验实例
const loadMoreExperimentIns = () => {
- const page = Math.round(experimentInList.length / 5);
- getQueryByExperiment(expandedRowKeys, page);
+ const page = Math.round(experimentInsList.length / 5);
+ getQueryByExperiment(expandedRowKeys, page, 5);
+ };
+
+ // 处理删除
+ const handleExperimentDelete = (record) => {
+ modalConfirm({
+ title: '删除后，该实验将不可恢复',
+ content: '是否确认删除?',
+ onOk: () => {
+ deleteExperimentById(record.id).then((ret) => {
+ if (ret.code === 200) {
+ message.success('删除成功');
+ // 如果是一页的唯一数据，删除后，请求第一页的数据
+ // 否则直接刷新这一页的数据
+ setPagination((prev) => {
+ return {
+ ...prev,
+ current: experimentList.length === 1 ? Math.max(1, prev.current - 1) : prev.current,
+ };
+ });
+ } else {
+ message.error(ret.msg);
+ }
+ });
+ },
+ });
};
const columns = [
@@ -383,7 +455,7 @@ function Experiment() {
title: '实验名称',
dataIndex: 'name',
key: 'name',
- render: tableCellRender(),
+ render: tableCellRender(false),
width: '16%',
},
{
@@ -400,7 +472,6 @@ function Experiment() {
dataIndex: 'description',
key: 'description',
render: tableCellRender(true),
- ellipsis: { showTitle: false },
},
{
title: '最近五次运行状态',
@@ -477,22 +548,7 @@ function Experiment() {
size="small"
key="batchRemove"
icon={
}
- onClick={() => {
- modalConfirm({
- title: '删除后，该实验将不可恢复',
- content: '是否确认删除?',
- onOk: () => {
- deleteExperimentById(record.id).then((ret) => {
- if (ret.code === 200) {
- message.success('删除成功');
- getExperimentList();
- } else {
- message.error(ret.msg);
- }
- });
- },
- });
- }}
+ onClick={() => handleExperimentDelete(record)}
>
删除
@@ -501,6 +557,7 @@ function Experiment() {
),
},
];
+
return (
@@ -536,8 +593,8 @@ function Experiment() {
scroll={{ y: 'calc(100% - 55px)' }}
expandable={{
expandedRowRender: (record) => (
-
gotoInstanceInfo(item, record)}
onClickTensorBoard={handleTensorboard}
@@ -547,13 +604,10 @@ function Experiment() {
}}
onTerminate={handleInstanceTerminate}
onLoadMore={() => loadMoreExperimentIns()}
- >
+ >
),
- onExpand: (e, a) => {
- expandChange(e, a);
- },
+ onExpand: expandChange,
expandedRowKeys: [expandedRowKeys],
- rowExpandable: (record) => true,
}}
/>
diff --git a/react-ui/src/pages/HyperParameter/Create/index.less b/react-ui/src/pages/HyperParameter/Create/index.less
new file mode 100644
index 00000000..ae065195
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/Create/index.less
@@ -0,0 +1,50 @@
+.create-hyper-parameter {
+ height: 100%;
+
+ &__content {
+ height: calc(100% - 60px);
+ margin-top: 10px;
+ padding: 30px 30px 10px;
+ overflow: auto;
+ color: @text-color;
+ font-size: @font-size-content;
+ background-color: white;
+ border-radius: 10px;
+
+ :global {
+ .ant-input-number {
+ width: 100%;
+ }
+
+ .ant-form-item {
+ margin-bottom: 20px;
+ }
+
+ .image-url {
+ margin-top: -15px;
+ .ant-form-item-label > label::after {
+ content: '';
+ }
+ }
+
+ .ant-btn-variant-text:disabled {
+ color: @text-disabled-color;
+ }
+
+ .ant-btn-variant-text {
+ color: #565658;
+ }
+
+ .ant-btn.ant-btn-icon-only .anticon {
+ font-size: 20px;
+ }
+
+ .anticon-question-circle {
+ margin-top: -12px;
+ margin-left: 1px !important;
+ color: @text-color-tertiary !important;
+ font-size: 12px !important;
+ }
+ }
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/Create/index.tsx b/react-ui/src/pages/HyperParameter/Create/index.tsx
new file mode 100644
index 00000000..3276a94e
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/Create/index.tsx
@@ -0,0 +1,167 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 创建实验
+ */
+import PageTitle from '@/components/PageTitle';
+import { addRayReq, getRayInfoReq, updateRayReq } from '@/services/hyperParameter';
+import { safeInvoke } from '@/utils/functional';
+import { to } from '@/utils/promise';
+import { useLocation, useNavigate, useParams } from '@umijs/max';
+import { App, Button, Form } from 'antd';
+import { useEffect } from 'react';
+import BasicConfig from '../components/CreateForm/BasicConfig';
+import ExecuteConfig from '../components/CreateForm/ExecuteConfig';
+import { getReqParamName } from '../components/CreateForm/utils';
+import { FormData, HyperParameterData } from '../types';
+import styles from './index.less';
+
+function CreateHyperParameter() {
+ const navigate = useNavigate();
+ const [form] = Form.useForm();
+ const { message } = App.useApp();
+ const params = useParams();
+ const id = safeInvoke(Number)(params.id);
+ const { pathname } = useLocation();
+ const isCopy = pathname.includes('copy');
+
+ useEffect(() => {
+ // 获取服务详情
+ const getHyperParameterInfo = async (id: number) => {
+ const [res] = await to(getRayInfoReq({ id }));
+ if (res && res.data) {
+ const info: HyperParameterData = res.data;
+ const { name: name_str, parameters, points_to_evaluate, ...rest } = info;
+ const name = isCopy ? `${name_str}-copy` : name_str;
+ if (parameters && Array.isArray(parameters)) {
+ parameters.forEach((item) => {
+ const paramName = getReqParamName(item.type);
+ item.range = item[paramName];
+ item[paramName] = undefined;
+ });
+ }
+
+ const formData = {
+ ...rest,
+ name,
+ parameters,
+ points_to_evaluate: points_to_evaluate ?? [],
+ };
+
+ form.setFieldsValue(formData);
+ }
+ };
+
+ // 编辑，复制
+ if (id && !Number.isNaN(id)) {
+ getHyperParameterInfo(id);
+ }
+ }, [id, form, isCopy]);
+
+ // 创建、更新、复制实验
+ const createExperiment = async (formData: FormData) => {
+ // 按后台接口要求，修改参数表单数据结构，将 "value" 参数改为 "bounds"/"values"/"value"
+ const formParameters = formData['parameters'];
+
+ const parameters = formParameters.map((item) => {
+ const paramName = getReqParamName(item.type);
+ const range = item.range;
+ return {
+ ...item,
+ [paramName]: range,
+ range: undefined,
+ };
+ });
+
+ // 根据后台要求，修改表单数据
+ const object = {
+ ...formData,
+ parameters: parameters,
+ };
+
+ const params =
+ id && !isCopy
+ ? {
+ id: id,
+ ...object,
+ }
+ : object;
+
+ const request = id && !isCopy ? updateRayReq : addRayReq;
+ const [res] = await to(request(params));
+ if (res) {
+ message.success('操作成功');
+ navigate(-1);
+ }
+ };
+
+ // 提交
+ const handleSubmit = (values: FormData) => {
+ createExperiment(values);
+ };
+
+ // 取消
+ const cancel = () => {
+ navigate(-1);
+ };
+
+ let buttonText = '新建';
+ let title = '新建实验';
+ if (id) {
+ if (isCopy) {
+ title = '复制实验';
+ buttonText = '确定';
+ } else {
+ title = '编辑实验';
+ buttonText = '更新';
+ }
+ }
+
+ return (
+
+ );
+}
+
+export default CreateHyperParameter;
diff --git a/react-ui/src/pages/HyperParameter/Info/index.less b/react-ui/src/pages/HyperParameter/Info/index.less
new file mode 100644
index 00000000..d0c2398a
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/Info/index.less
@@ -0,0 +1,40 @@
+.hyper-parameter-info {
+ position: relative;
+ height: 100%;
+ &__tabs {
+ height: 50px;
+ padding-left: 25px;
+ background-image: url(@/assets/img/page-title-bg.png);
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: 100% 100%;
+ }
+
+ &__content {
+ height: calc(100% - 60px);
+ margin-top: 10px;
+ }
+
+ &__tips {
+ position: absolute;
+ top: 11px;
+ left: 256px;
+ padding: 3px 12px;
+ color: #565658;
+ font-size: @font-size-content;
+ background: .addAlpha(@primary-color, 0.09) [];
+ border-radius: 4px;
+
+ &::before {
+ position: absolute;
+ top: 10px;
+ left: -6px;
+ width: 0;
+ height: 0;
+ border-top: 4px solid transparent;
+ border-right: 6px solid .addAlpha(@primary-color, 0.09) [];
+ border-bottom: 4px solid transparent;
+ content: '';
+ }
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/Info/index.tsx b/react-ui/src/pages/HyperParameter/Info/index.tsx
new file mode 100644
index 00000000..6c5cdbf8
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/Info/index.tsx
@@ -0,0 +1,47 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 自主机器学习详情
+ */
+import PageTitle from '@/components/PageTitle';
+import { getRayInfoReq } from '@/services/hyperParameter';
+import { safeInvoke } from '@/utils/functional';
+import { to } from '@/utils/promise';
+import { useParams } from '@umijs/max';
+import { useCallback, useEffect, useState } from 'react';
+import HyperParameterBasic from '../components/HyperParameterBasic';
+import { HyperParameterData } from '../types';
+import styles from './index.less';
+
+function HyperparameterInfo() {
+ const params = useParams();
+ const hyperparameterId = safeInvoke(Number)(params.id);
+ const [hyperparameterInfo, setHyperparameterInfo] = useState
(
+ undefined,
+ );
+
+ // 获取详情
+ const getHyperparameterInfo = useCallback(async () => {
+ const [res] = await to(getRayInfoReq({ id: hyperparameterId }));
+ if (res && res.data) {
+ setHyperparameterInfo(res.data);
+ }
+ }, [hyperparameterId]);
+
+ useEffect(() => {
+ if (hyperparameterId) {
+ getHyperparameterInfo();
+ }
+ }, [hyperparameterId, getHyperparameterInfo]);
+
+ return (
+
+ );
+}
+
+export default HyperparameterInfo;
diff --git a/react-ui/src/pages/HyperParameter/Instance/index.less b/react-ui/src/pages/HyperParameter/Instance/index.less
new file mode 100644
index 00000000..9a2f8bfb
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/Instance/index.less
@@ -0,0 +1,42 @@
+.hyper-parameter-instance {
+ height: 100%;
+
+ &__tabs {
+ height: 100%;
+ :global {
+ .ant-tabs-nav-list {
+ width: 100%;
+ height: 50px;
+ padding-left: 15px;
+ background-image: url(@/assets/img/page-title-bg.png);
+ background-repeat: no-repeat;
+ background-position: top center;
+ background-size: 100% 100%;
+ }
+
+ .ant-tabs-content-holder {
+ height: calc(100% - 50px);
+ .ant-tabs-content {
+ height: 100%;
+ .ant-tabs-tabpane {
+ height: 100%;
+ }
+ }
+ }
+ }
+ }
+
+ &__basic {
+ height: calc(100% - 10px);
+ margin-top: 10px;
+ }
+
+ &__log {
+ height: calc(100% - 10px);
+ margin-top: 10px;
+ padding: 8px calc(@content-padding - 8px) 20px;
+ overflow-y: visible;
+ background-color: white;
+ border-radius: 10px;
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/Instance/index.tsx b/react-ui/src/pages/HyperParameter/Instance/index.tsx
new file mode 100644
index 00000000..79905c36
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/Instance/index.tsx
@@ -0,0 +1,215 @@
+import KFIcon from '@/components/KFIcon';
+import { ExperimentStatus } from '@/enums';
+import { getRayInsReq } from '@/services/hyperParameter';
+import { NodeStatus } from '@/types';
+import { parseJsonText } from '@/utils';
+import { safeInvoke } from '@/utils/functional';
+import { to } from '@/utils/promise';
+import { useParams } from '@umijs/max';
+import { Tabs } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import ExperimentHistory from '../components/ExperimentHistory';
+import ExperimentLog from '../components/ExperimentLog';
+import ExperimentResult from '../components/ExperimentResult';
+import HyperParameterBasic from '../components/HyperParameterBasic';
+import { HyperParameterData, HyperParameterInstanceData } from '../types';
+import styles from './index.less';
+
+enum TabKeys {
+ Params = 'params',
+ Log = 'log',
+ Result = 'result',
+ History = 'history',
+}
+
+const NodePrefix = 'workflow';
+
+function HyperParameterInstance() {
+ const [experimentInfo, setExperimentInfo] = useState(undefined);
+ const [instanceInfo, setInstanceInfo] = useState(
+ undefined,
+ );
+ // 超参数寻优运行有3个节点，运行状态取工作流状态，而不是 auto-hpo 节点状态
+ const [workflowStatus, setWorkflowStatus] = useState(undefined);
+ const [nodes, setNodes] = useState | undefined>(undefined);
+ const params = useParams();
+ const instanceId = safeInvoke(Number)(params.id);
+ const evtSourceRef = useRef(null);
+
+ useEffect(() => {
+ if (instanceId) {
+ getExperimentInsInfo(false);
+ }
+ return () => {
+ closeSSE();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [instanceId]);
+
+ // 获取实验实例详情
+ const getExperimentInsInfo = async (isStatusDetermined: boolean) => {
+ const [res] = await to(getRayInsReq(instanceId));
+ if (res && res.data) {
+ const info = res.data as HyperParameterInstanceData;
+ const { param, node_status, argo_ins_name, argo_ins_ns, status, create_time } = info;
+ // 解析配置参数
+ const paramJson = parseJsonText(param).data;
+ if (paramJson) {
+ // 实例详情返回的参数是字符串，需要转换
+ if (typeof paramJson.parameters === 'string') {
+ paramJson.parameters = parseJsonText(paramJson.parameters);
+ }
+ if (!Array.isArray(paramJson.parameters)) {
+ paramJson.parameters = [];
+ }
+
+ // 实例详情返回的运行参数是字符串，需要转换
+ if (typeof paramJson.points_to_evaluate === 'string') {
+ paramJson.points_to_evaluate = parseJsonText(paramJson.points_to_evaluate);
+ }
+ if (!Array.isArray(paramJson.points_to_evaluate)) {
+ paramJson.points_to_evaluate = [];
+ }
+ setExperimentInfo({
+ ...paramJson,
+ create_time,
+ });
+ }
+
+ setInstanceInfo(info);
+
+ // 这个接口返回的状态有延时，SSE 返回的状态是最新的
+ // SSE 调用时，不需要解析 node_status，也不要重新建立 SSE
+ if (isStatusDetermined) {
+ return;
+ }
+
+ // 进行节点状态
+ const nodeStatusJson = parseJsonText(node_status);
+ if (nodeStatusJson) {
+ setNodes(nodeStatusJson);
+ Object.keys(nodeStatusJson).some((key) => {
+ if (key.startsWith(NodePrefix)) {
+ const workflowStatus = nodeStatusJson[key];
+ setWorkflowStatus(workflowStatus);
+ return true;
+ }
+ return false;
+ });
+ }
+
+ // 运行中或者等待中，开启 SSE
+ if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) {
+ setupSSE(argo_ins_name, argo_ins_ns);
+ }
+ }
+ };
+
+ const setupSSE = (name: string, namespace: string) => {
+ const { origin } = location;
+ const params = encodeURIComponent(`metadata.namespace=${namespace},metadata.name=${name}`);
+ const evtSource = new EventSource(
+ `${origin}/api/v1/realtimeStatus?listOptions.fieldSelector=${params}`,
+ { withCredentials: false },
+ );
+ evtSource.onmessage = (event) => {
+ const data = event?.data;
+ if (!data) {
+ return;
+ }
+ const dataJson = parseJsonText(data);
+ if (dataJson) {
+ const nodes = dataJson?.result?.object?.status?.nodes;
+ if (nodes) {
+ // 节点
+ setNodes(nodes);
+
+ const workflowStatus = Object.values(nodes).find((node: any) =>
+ node.displayName.startsWith(NodePrefix),
+ ) as NodeStatus;
+
+ // 设置工作流状态
+ if (workflowStatus) {
+ setWorkflowStatus(workflowStatus);
+
+ // 实验结束，关闭 SSE
+ if (
+ workflowStatus.phase !== ExperimentStatus.Pending &&
+ workflowStatus.phase !== ExperimentStatus.Running
+ ) {
+ closeSSE();
+ getExperimentInsInfo(true);
+ }
+ }
+ }
+ }
+ };
+ evtSource.onerror = (error) => {
+ console.error('SSE error: ', error);
+ };
+
+ evtSourceRef.current = evtSource;
+ };
+
+ const closeSSE = () => {
+ if (evtSourceRef.current) {
+ evtSourceRef.current.close();
+ evtSourceRef.current = null;
+ }
+ };
+
+ const basicTabItems = [
+ {
+ key: TabKeys.Params,
+ label: '基本信息',
+ icon: ,
+ children: (
+
+ ),
+ },
+ {
+ key: TabKeys.Log,
+ label: '日志',
+ icon: ,
+ children: (
+
+ {instanceInfo && nodes && }
+
+ ),
+ },
+ ];
+
+ const resultTabItems = [
+ {
+ key: TabKeys.Result,
+ label: '实验结果',
+ icon: ,
+ children: ,
+ },
+ {
+ key: TabKeys.History,
+ label: '寻优列表',
+ icon: ,
+ children: ,
+ },
+ ];
+
+ const tabItems =
+ instanceInfo?.status === ExperimentStatus.Succeeded
+ ? [...basicTabItems, ...resultTabItems]
+ : basicTabItems;
+
+ return (
+
+
+
+ );
+}
+
+export default HyperParameterInstance;
diff --git a/react-ui/src/pages/HyperParameter/List/index.tsx b/react-ui/src/pages/HyperParameter/List/index.tsx
new file mode 100644
index 00000000..5ebfcde9
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/List/index.tsx
@@ -0,0 +1,13 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 超参数自动寻优
+ */
+
+import ExperimentList, { ExperimentListType } from '@/pages/AutoML/components/ExperimentList';
+
+function HyperParameter() {
+ return ;
+}
+
+export default HyperParameter;
diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/BasicConfig.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/BasicConfig.tsx
new file mode 100644
index 00000000..9d06fd10
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/CreateForm/BasicConfig.tsx
@@ -0,0 +1,58 @@
+import SubAreaTitle from '@/components/SubAreaTitle';
+import { Col, Form, Input, Row } from 'antd';
+
+function BasicConfig() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default BasicConfig;
diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx
new file mode 100644
index 00000000..01bc4001
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx
@@ -0,0 +1,611 @@
+import CodeSelect from '@/components/CodeSelect';
+import KFIcon from '@/components/KFIcon';
+import ParameterSelect from '@/components/ParameterSelect';
+import ResourceSelect, {
+ ResourceSelectorType,
+ requiredValidator,
+} from '@/components/ResourceSelect';
+import SubAreaTitle from '@/components/SubAreaTitle';
+import { hyperParameterOptimizedModeOptions } from '@/enums';
+import { isEmpty } from '@/utils';
+import { modalConfirm, removeFormListItem } from '@/utils/ui';
+import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import {
+ Button,
+ Col,
+ Flex,
+ Form,
+ Input,
+ InputNumber,
+ Radio,
+ Row,
+ Select,
+ Tooltip,
+ Typography,
+} from 'antd';
+import { isEqual } from 'lodash';
+import PopParameterRange from './PopParameterRange';
+import styles from './index.less';
+import {
+ axParameterOptions,
+ parameterOptions,
+ schedulerAlgorithms,
+ searchAlgorithms,
+ type FormParameter,
+} from './utils';
+
+const parameterTooltip = `uniform(low, high)
+ 在 low 和 high 之间均匀采样浮点数
+
+ quniform(low, high, q)
+ 在 low 和 high 之间均匀采样浮点数，四舍五入到 q 的倍数
+
+ loguniform(low, high)
+ 在 low 和 high 之间均匀采样浮点数，对数空间采样
+
+ qloguniform(low, high, q)
+ 在 low 和 high 之间均匀采样浮点数，对数空间采样并四舍五入到 q 的倍数
+
+ randn(m, s)
+ 在均值为 m，方差为 s 的正态分布中进行随机浮点数抽样
+
+ qrandn(m, s, q)
+ 在均值为 m，方差为 s 的正态分布中进行随机浮点数抽样，四舍五入到 q 的倍数
+
+ randint(low, high)
+ 在 low（包括）到 high（不包括）之间均匀采样整数
+
+ qrandint(low, high, q)
+ 在 low（包括）到 high（不包括）之间均匀采样整数，四舍五入到 q 的倍数（包括 high）
+
+ lograndint(low, high)
+ 在 low（包括）到 high（不包括）之间对数空间上均匀采样整数
+
+ qlograndint(low, high, q)
+ 在 low（包括）到 high（不包括）之间对数空间上均匀采样整数,并四舍五入到 q 的倍数
+
+ choice
+ 从指定的选项中采样一个选项
+
+ grid
+ 对选项进行网格搜索，每个值都将被采样
+`;
+
+const axParameterTooltip = `fixed
+ 固定取值
+
+ range(low, high)
+ 在 low 和 high 范围内采样取值
+
+ choice
+ 从指定的选项中采样一个选项
+ `;
+
+function ExecuteConfig() {
+ const form = Form.useFormInstance();
+ const searchAlgorithm = Form.useWatch('search_alg', form);
+ const paramsTypeOptions = searchAlgorithm === 'Ax' ? axParameterOptions : parameterOptions;
+ const paramsTypeTooltip = searchAlgorithm === 'Ax' ? axParameterTooltip : parameterTooltip;
+
+ const handleSearchAlgorithmChange = (value: string) => {
+ if (
+ (value === 'Ax' && searchAlgorithm !== 'Ax') ||
+ (value !== 'Ax' && searchAlgorithm === 'Ax')
+ ) {
+ form.setFieldValue('parameters', [{ name: '' }]);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {({ getFieldValue }) => {
+ const schedulerAlgorithm = getFieldValue('scheduler');
+ if (schedulerAlgorithm === 'ASHA' || schedulerAlgorithm === 'HyperBand') {
+ return (
+
+
+
+
+
+
+
+ );
+ } else if (schedulerAlgorithm === 'MedianStopping') {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+ return null;
+ }}
+
+
+
+ {(fields, { add, remove }) => (
+ <>
+
+
+
+
+
+
+
+ 参数名称
+
+ 参数类型
+
+
+
+
+ 取值范围
+ 操作
+
+
+ {fields.map(({ key, name, ...restField }, index) => (
+
+ {
+ if (!value) {
+ return Promise.reject(new Error('请输入参数名称'));
+ }
+ // 判断不能重名
+ const list = form
+ .getFieldValue('parameters')
+ .filter(
+ (item: FormParameter | undefined) =>
+ item !== undefined && item !== null,
+ );
+
+ const names = list.map((item: FormParameter) => item.name);
+ if (new Set(names).size !== names.length) {
+ return Promise.reject(new Error('名称不能重复'));
+ }
+ return Promise.resolve();
+ },
+ },
+ ]}
+ >
+
+
+
+
+
+ {({ getFieldValue }) => {
+ const type = getFieldValue(['parameters', name, 'type']);
+ return (
+
+
+
+ );
+ }}
+
+
+
+
}
+ onClick={() => {
+ removeFormListItem(
+ form,
+ 'parameters',
+ name,
+ remove,
+ ['name', 'type'],
+ '删除后，该参数将不可恢复',
+ );
+ }}
+ >
+ {index === fields.length - 1 && (
+
+ )}
+
+ ))}
+ {fields.length === 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+ {fields.map(({ key, name, ...restField }, index) => (
+
+
+ {parameters.map((item: FormParameter) => (
+
+ {item.name}
+
+ }
+ {...restField}
+ labelCol={{ flex: '140px' }}
+ name={[name, item.name]}
+ preserve={false}
+ >
+ form.validateFields(['points_to_evaluate'])}
+ />
+
+ ))}
+
+
+
}
+ onClick={() => {
+ modalConfirm({
+ title: '删除后，该运行参数将不可恢复',
+ content: '是否确认删除?',
+ onOk: () => {
+ remove(name);
+ },
+ });
+ }}
+ >
+ {index === fields.length - 1 && (
+
+ )}
+
+ ))}
+ {fields.length === 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ExecuteConfig;
diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less
new file mode 100644
index 00000000..25edd4bc
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less
@@ -0,0 +1,47 @@
+.parameter-range {
+ width: 360px;
+ &__type {
+ margin-bottom: 10px;
+ color: @text-color-secondary;
+ font-size: @font-size-input;
+ &::before {
+ display: inline-block;
+ color: @error-color;
+ font-size: 14px;
+ font-family: SimSun, sans-serif;
+ line-height: 1;
+ content: '*';
+ margin-inline-end: 4px;
+ }
+ }
+ &__desc {
+ margin-bottom: 15px;
+ padding: 4px 8px;
+ color: @text-color-tertiary;
+ font-size: 13px;
+ background: rgba(62, 96, 163, 0.05);
+ border-radius: 6px;
+ }
+ &__form {
+ width: 100%;
+ &__list {
+ width: 100%;
+ max-height: 300px;
+ overflow-x: visible;
+ overflow-y: auto;
+ }
+ &__space {
+ flex: none;
+ width: 22px;
+ color: @text-color-tertiary;
+ font-size: @font-size-input;
+ line-height: 32px;
+ text-align: center;
+ }
+ &__button {
+ width: 100%;
+ margin-bottom: 0;
+ text-align: center;
+ }
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx
new file mode 100644
index 00000000..d33fcf13
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.tsx
@@ -0,0 +1,152 @@
+import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { Button, Flex, Form, Input, InputNumber } from 'antd';
+import React from 'react';
+import { ParameterType, getFormOptions, parameterTooltip } from '../utils';
+import styles from './index.less';
+
+type ParameterRangeProps = {
+ type: ParameterType;
+ value?: any[];
+ onCancel?: () => void;
+ onConfirm?: (value: any[]) => void;
+};
+
+function ParameterRange({ type, value, onConfirm }: ParameterRangeProps) {
+ const [form] = Form.useForm();
+ const isList = type === ParameterType.Choice || type === ParameterType.Grid;
+ const formOptions = getFormOptions(type, value);
+
+ const initialValues = isList
+ ? { list: value && value.length > 0 ? value.map((item) => ({ value: item })) : [{ value: '' }] }
+ : formOptions.reduce((prev, item) => {
+ prev[item.name] = item.value;
+ return prev;
+ }, {} as Record);
+
+ const handleFinish = (values: any) => {
+ if (type === ParameterType.Choice || type === ParameterType.Grid) {
+ const array = values.list.map((item: any) => item.value);
+ onConfirm?.(array);
+ } else {
+ const numbers = Object.values(values).map((item: any) => Number(item));
+ onConfirm?.(numbers);
+ }
+ };
+
+ return (
+
+
{type}
+
{parameterTooltip[type]}
+
+
+
}
+ disabled={disabled}
+ description={
+
+ }
+ overlayClassName={styles['parameter-range']}
+ icon={null}
+ open={open}
+ destroyTooltipOnHide
+ >
+
+
+ {jsonText ?? '请选择'}
+
+
+
+
+
+ {index + 1}
+ {record.is_best && 最佳}
+
+ );
+ },
+ },
+ {
+ title: '基本信息',
+ align: 'center',
+ children: [
+ {
+ title: '运行次数',
+ dataIndex: 'training_iteration',
+ key: 'training_iteration',
+ width: 120,
+ fixed: 'left',
+ render: tableCellRender(false),
+ },
+ {
+ title: '平均时长（秒）',
+ dataIndex: 'time_avg',
+ key: 'time_avg',
+ width: 150,
+ fixed: 'left',
+ render: tableCellRender(false, TableCellValueType.Custom, {
+ format: (value = 0) => Number(value).toFixed(2),
+ }),
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status',
+ width: 120,
+ fixed: 'left',
+ render: TrialStatusCell,
+ },
+ ],
+ },
+ ];
+
+ if (paramsNames.length) {
+ trialColumns.push({
+ title: '运行参数',
+ dataIndex: 'config',
+ key: 'config',
+ align: 'center',
+ children: paramsNames.map((name) => ({
+ title: ,
+ dataIndex: ['config', name],
+ key: name,
+ width: 120,
+ align: 'center',
+ render: tableCellRender(true),
+ })),
+ });
+ }
+
+ if (metricNames.length) {
+ trialColumns.push({
+ title: `指标分析（${first?.metric ?? ''}）`,
+ dataIndex: 'metrics',
+ key: 'metrics',
+ align: 'center',
+ children: metricNames.map((name) => ({
+ title: ,
+ dataIndex: ['metric_analysis', name],
+ key: name,
+ width: 120,
+ align: 'center',
+ render: tableCellRender(true),
+ })),
+ });
+ }
+
+ // 自定义展开视图
+ const expandedRowRender = (record: HyperParameterTrial) => {
+ return ;
+ };
+
+ // 展开实例
+ const handleExpandChange = (expanded: boolean, record: HyperParameterTrial) => {
+ if (expanded) {
+ setExpandedRowKeys([record.trial_id]);
+ } else {
+ setExpandedRowKeys([]);
+ }
+ };
+
+ // 选择行
+ const rowSelection: TableProps['rowSelection'] = {
+ type: 'checkbox',
+ columnWidth: 48,
+ fixed: 'left',
+ selectedRowKeys,
+ onChange: (selectedRowKeys: React.Key[]) => {
+ setSelectedRowKeys(selectedRowKeys);
+ },
+ };
+
+ // 对比
+ const handleComparisonClick = () => {
+ if (selectedRowKeys.length < 1) {
+ message.error('请至少选择一项');
+ return;
+ }
+ getExpMetrics();
+ };
+
+ // 获取对比 url
+ const getExpMetrics = async () => {
+ const [res] = await to(getExpMetricsReq(selectedRowKeys));
+ if (res && res.data) {
+ const url = res.data;
+ window.open(url, '_blank');
+ }
+ };
+
+ return (
+
+
+
+
+
(record.is_best ? styles['table-best-row'] : '')}
+ dataSource={tableData}
+ columns={trialColumns}
+ pagination={false}
+ bordered={true}
+ scroll={{ y: 'calc(100% - 110px)', x: '100%' }}
+ rowKey="trial_id"
+ expandable={{
+ expandedRowRender: expandedRowRender,
+ onExpand: handleExpandChange,
+ expandedRowKeys: expandedRowKeys,
+ rowExpandable: (record: HyperParameterTrial) => !!record.file,
+ }}
+ rowSelection={rowSelection}
+ />
+
+
+
+ );
+}
+
+export default ExperimentHistory;
diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentLog/index.less b/react-ui/src/pages/HyperParameter/components/ExperimentLog/index.less
new file mode 100644
index 00000000..6eb6f074
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/ExperimentLog/index.less
@@ -0,0 +1,16 @@
+.experiment-log {
+ height: 100%;
+ &__tabs {
+ height: 100%;
+ :global {
+ .ant-tabs-nav-list {
+ padding-left: 0 !important;
+ background: none !important;
+ }
+ }
+
+ &__log {
+ height: 100%;
+ }
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentLog/index.tsx b/react-ui/src/pages/HyperParameter/components/ExperimentLog/index.tsx
new file mode 100644
index 00000000..d7639094
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/ExperimentLog/index.tsx
@@ -0,0 +1,108 @@
+import { ExperimentStatus } from '@/enums';
+import LogList from '@/pages/Experiment/components/LogList';
+import { HyperParameterInstanceData } from '@/pages/HyperParameter/types';
+import { NodeStatus } from '@/types';
+import { Tabs } from 'antd';
+import styles from './index.less';
+
+const NodePrefix = 'auto-hpo';
+
+type ExperimentLogProps = {
+ instanceInfo: HyperParameterInstanceData;
+ nodes: Record;
+};
+
+function ExperimentLog({ instanceInfo, nodes }: ExperimentLogProps) {
+ let hpoNodeStatus: NodeStatus | undefined;
+ let frameworkCloneNodeStatus: NodeStatus | undefined;
+ let trainCloneNodeStatus: NodeStatus | undefined;
+
+ Object.keys(nodes)
+ .sort((key1, key2) => {
+ const node1 = nodes[key1];
+ const node2 = nodes[key2];
+ return new Date(node1.startedAt).getTime() - new Date(node2.startedAt).getTime();
+ })
+ .forEach((key) => {
+ const node = nodes[key];
+ if (node.displayName.startsWith(NodePrefix)) {
+ hpoNodeStatus = node;
+ } else if (node.displayName.startsWith('git-clone') && !frameworkCloneNodeStatus) {
+ frameworkCloneNodeStatus = node;
+ } else if (
+ node.displayName.startsWith('git-clone') &&
+ frameworkCloneNodeStatus &&
+ node.displayName !== frameworkCloneNodeStatus?.displayName
+ ) {
+ trainCloneNodeStatus = node;
+ }
+ });
+
+ const tabItems = [
+ // {
+ // key: 'git-clone-framework',
+ // label: '框架代码日志',
+ // // icon: ,
+ // children: (
+ //
+ // {frameworkCloneNodeStatus && (
+ //
+ // )}
+ //
+ // ),
+ // },
+ {
+ key: 'git-clone-train',
+ label: '系统日志',
+ // icon: ,
+ children: (
+
+ {trainCloneNodeStatus && (
+
+ )}
+
+ ),
+ },
+ {
+ key: 'auto-hpo',
+ label: '超参寻优日志',
+ // icon: ,
+ children: (
+
+ {hpoNodeStatus && (
+
+ )}
+
+ ),
+ },
+ ];
+
+ return (
+
+
+
+ );
+}
+
+export default ExperimentLog;
diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentResult/index.less b/react-ui/src/pages/HyperParameter/components/ExperimentResult/index.less
new file mode 100644
index 00000000..239a3abf
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/ExperimentResult/index.less
@@ -0,0 +1,17 @@
+.experiment-result {
+ height: calc(100% - 10px);
+ margin-top: 10px;
+ padding: 20px @content-padding;
+ overflow-y: auto;
+ background-color: white;
+ border-radius: 10px;
+
+ &__table {
+ height: 400px;
+ }
+
+ &__text {
+ font-family: 'Roboto Mono', 'Menlo', 'Consolas', 'Monaco', monospace;
+ white-space: pre;
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/components/ExperimentResult/index.tsx b/react-ui/src/pages/HyperParameter/components/ExperimentResult/index.tsx
new file mode 100644
index 00000000..4a7d3dcc
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/ExperimentResult/index.tsx
@@ -0,0 +1,37 @@
+import InfoGroup from '@/components/InfoGroup';
+import { getFileReq } from '@/services/file';
+import { to } from '@/utils/promise';
+import { useEffect, useState } from 'react';
+import styles from './index.less';
+
+type ExperimentResultProps = {
+ fileUrl?: string;
+};
+
+function ExperimentResult({ fileUrl }: ExperimentResultProps) {
+ const [result, setResult] = useState('');
+
+ useEffect(() => {
+ // 获取实验运行历史记录
+ const getResultFile = async () => {
+ const [res] = await to(getFileReq(fileUrl));
+ if (res) {
+ setResult(res as any as string);
+ }
+ };
+
+ if (fileUrl) {
+ getResultFile();
+ }
+ }, [fileUrl]);
+
+ return (
+
+ );
+}
+
+export default ExperimentResult;
diff --git a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.less b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.less
new file mode 100644
index 00000000..f365aa66
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.less
@@ -0,0 +1,13 @@
+.hyper-parameter-basic {
+ height: 100%;
+ padding: 20px @content-padding;
+ overflow-y: auto;
+ background-color: white;
+ border-radius: 10px;
+
+ :global {
+ .kf-basic-info__item__value__text {
+ white-space: pre;
+ }
+ }
+}
diff --git a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx
new file mode 100644
index 00000000..f4b9852b
--- /dev/null
+++ b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx
@@ -0,0 +1,219 @@
+import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
+import RunDuration from '@/components/RunDuration';
+import { ExperimentStatus, hyperParameterOptimizedMode } from '@/enums';
+import { useComputingResource } from '@/hooks/useComputingResource';
+import ExperimentRunBasic from '@/pages/AutoML/components/ExperimentRunBasic';
+import { experimentStatusInfo } from '@/pages/Experiment/status';
+import {
+ schedulerAlgorithms,
+ searchAlgorithms,
+} from '@/pages/HyperParameter/components/CreateForm/utils';
+import { HyperParameterData } from '@/pages/HyperParameter/types';
+import { type NodeStatus } from '@/types';
+import {
+ formatCodeConfig,
+ formatDataset,
+ formatDate,
+ formatEnum,
+ formatMirror,
+ formatModel,
+} from '@/utils/format';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import ParameterInfo from '../ParameterInfo';
+import styles from './index.less';
+
+// 格式化优化方向
+const formatOptimizeMode = (value: string) => {
+ return value === hyperParameterOptimizedMode.Max ? '越大越好' : '越小越好';
+};
+
+type HyperParameterBasicProps = {
+ info?: HyperParameterData;
+ className?: string;
+ isInstance?: boolean;
+ runStatus?: NodeStatus;
+ instanceStatus?: ExperimentStatus;
+};
+
+function HyperParameterBasic({
+ info,
+ className,
+ runStatus,
+ instanceStatus,
+ isInstance = false,
+}: HyperParameterBasicProps) {
+ const getResourceDescription = useComputingResource()[1];
+
+ const basicDatas: BasicInfoData[] = useMemo(() => {
+ if (!info) {
+ return [];
+ }
+
+ return [
+ {
+ label: '实验名称',
+ value: info.name,
+ },
+ {
+ label: '实验描述',
+ value: info.description,
+ },
+ {
+ label: '创建人',
+ value: info.create_by,
+ },
+ {
+ label: '创建时间',
+ value: info.create_time,
+ format: formatDate,
+ },
+ {
+ label: '更新时间',
+ value: info.update_time,
+ format: formatDate,
+ },
+ ];
+ }, [info]);
+
+ const configDatas: BasicInfoData[] = useMemo(() => {
+ if (!info) {
+ return [];
+ }
+ return [
+ {
+ label: '代码',
+ value: info.code_config,
+ format: formatCodeConfig,
+ },
+ {
+ label: '主函数代码文件',
+ value: info.main_py,
+ },
+ {
+ label: '镜像',
+ value: info.image,
+ format: formatMirror,
+ },
+ {
+ label: '数据集',
+ value: info.dataset,
+ format: formatDataset,
+ },
+ {
+ label: '模型',
+ value: info.model,
+ format: formatModel,
+ },
+ {
+ label: '总试验次数',
+ value: info.num_samples,
+ },
+ {
+ label: '搜索算法',
+ value: info.search_alg,
+ format: formatEnum(searchAlgorithms),
+ },
+ {
+ label: '调度算法',
+ value: info.scheduler,
+ format: formatEnum(schedulerAlgorithms),
+ },
+ {
+ label: '单次试验最大时间',
+ value: info.max_t,
+ },
+ {
+ label: '最小试验数',
+ value: info.min_samples_required,
+ },
+ {
+ label: '指标优化方向',
+ value: info.mode,
+ format: formatOptimizeMode,
+ },
+ {
+ label: '指标',
+ value: info.metric,
+ },
+ {
+ label: '资源规格',
+ value: info.computing_resource_id,
+ format: getResourceDescription,
+ },
+ ];
+ }, [info, getResourceDescription]);
+
+ const instanceDatas = useMemo(() => {
+ if (!info || !runStatus) {
+ return [];
+ }
+
+ return [
+ {
+ label: '启动时间',
+ value: formatDate(info.create_time),
+ ellipsis: true,
+ },
+ {
+ label: '执行时长',
+ value: ,
+ ellipsis: true,
+ },
+ {
+ label: '状态',
+ value: (
+
+ 
+
+ {experimentStatusInfo[runStatus?.phase]?.label}
+
+
+ ),
+ ellipsis: true,
+ },
+ ];
+ }, [runStatus, info]);
+
+ return (
+
+ {isInstance && runStatus && (
+
+ )}
+ {!isInstance && (
+
+ )}
+
+ {info && }
+
+
+ {/*
*/}
+
+ {statusInfo[status] ? statusInfo[status].label : status}
+
+
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
-| --- | --- | --- | --- | --- |
-| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
-
-## Contributing
-
-Any type of contribution is welcome, here are some examples of how you may contribute to this project:
-
-- Use Ant Design Pro in your daily work.
-- Submit [issues](http://github.com/ant-design/ant-design-pro/issues) to report bugs or ask questions.
-- Propose [pull requests](http://github.com/ant-design/ant-design-pro/pulls) to improve our code.
+# Documentation
diff --git a/react-ui/config/config.ts b/react-ui/config/config.ts
index f64c8c77..04ab330d 100644
--- a/react-ui/config/config.ts
+++ b/react-ui/config/config.ts
@@ -75,7 +75,7 @@ export default defineConfig({
* @name layout 插件
* @doc https://umijs.org/docs/max/layout-menu
*/
- title: '复杂智能软件',
+ title: '智能材料科研平台',
layout: {
...defaultSettings,
},
diff --git a/react-ui/config/defaultSettings.ts b/react-ui/config/defaultSettings.ts
index 306c89db..c4c59d2f 100644
--- a/react-ui/config/defaultSettings.ts
+++ b/react-ui/config/defaultSettings.ts
@@ -17,7 +17,7 @@ const Settings: ProLayoutProps & {
fixSiderbar: false,
splitMenus: false,
colorWeak: false,
- title: '复杂智能软件',
+ title: '智能材料科研平台',
pwa: true,
token: {
// 参见ts声明，demo 见文档，通过token 修改样式
diff --git a/react-ui/config/proxy.ts b/react-ui/config/proxy.ts
index 35232b47..0739ab9f 100644
--- a/react-ui/config/proxy.ts
+++ b/react-ui/config/proxy.ts
@@ -26,10 +26,10 @@ export default {
// 配置了这个可以从 http 代理到 https
// 依赖 origin 的功能可能需要这个，比如 cookie
changeOrigin: true,
- // pathRewrite: { '^/api': '' },
+ pathRewrite: { '^/api': '' },
},
'/profile/avatar/': {
- target: 'http://172.20.32.185:31213',
+ target: 'http://172.20.32.235:31213',
changeOrigin: true,
},
},
diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts
index eaddb001..e64318e0 100644
--- a/react-ui/config/routes.ts
+++ b/react-ui/config/routes.ts
@@ -44,7 +44,7 @@ export default [
{
name: 'login',
path: '/user/login',
- component: './User/Login/login',
+ component: process.env.NO_SSO ? './User/Login/login' : './User/Login',
},
],
},
@@ -143,6 +143,11 @@ export default [
path: 'compare',
component: './Experiment/Comparison/index',
},
+ {
+ name: '实验可视化对比',
+ path: 'compare-visual',
+ component: './Experiment/Aim/index',
+ },
],
},
{
@@ -176,11 +181,83 @@ export default [
},
{
name: '实验实例详情',
- path: 'instance/:autoMLId/:id',
+ path: 'instance/:experimentId/:id',
component: './AutoML/Instance/index',
},
],
},
+ {
+ name: '超参数自动寻优',
+ path: 'hyperparameter',
+ routes: [
+ {
+ name: '超参数寻优',
+ path: '',
+ component: './HyperParameter/List/index',
+ },
+ {
+ name: '实验详情',
+ path: 'info/:id',
+ component: './HyperParameter/Info/index',
+ },
+ {
+ name: '创建实验',
+ path: 'create',
+ component: './HyperParameter/Create/index',
+ },
+ {
+ name: '编辑实验',
+ path: 'edit/:id',
+ component: './HyperParameter/Create/index',
+ },
+ {
+ name: '复制实验',
+ path: 'copy/:id',
+ component: './HyperParameter/Create/index',
+ },
+ {
+ name: '实验实例详情',
+ path: 'instance/:experimentId/:id',
+ component: './HyperParameter/Instance/index',
+ },
+ ],
+ },
+ {
+ name: '主动学习',
+ path: 'active-learn',
+ routes: [
+ {
+ name: '超参数寻优',
+ path: '',
+ component: './ActiveLearn/List/index',
+ },
+ {
+ name: '实验详情',
+ path: 'info/:id',
+ component: './ActiveLearn/Info/index',
+ },
+ {
+ name: '创建实验',
+ path: 'create',
+ component: './ActiveLearn/Create/index',
+ },
+ {
+ name: '编辑实验',
+ path: 'edit/:id',
+ component: './ActiveLearn/Create/index',
+ },
+ {
+ name: '复制实验',
+ path: 'copy/:id',
+ component: './ActiveLearn/Create/index',
+ },
+ {
+ name: '实验实例详情',
+ path: 'instance/:experimentId/:id',
+ component: './ActiveLearn/Instance/index',
+ },
+ ],
+ },
],
},
{
@@ -235,7 +312,18 @@ export default [
{
name: '镜像详情',
path: 'info/:id',
- component: './Mirror/Info',
+ routes: [
+ {
+ name: '镜像详情',
+ path: '',
+ component: './Mirror/Info',
+ },
+ {
+ name: '新增镜像版本',
+ path: 'add-version',
+ component: './Mirror/Create',
+ },
+ ],
},
{
name: '创建镜像',
@@ -255,55 +343,55 @@ export default [
},
],
},
- ],
- },
- {
- name: '模型部署',
- path: '/modelDeployment',
- routes: [
{
name: '模型部署',
- path: '',
- component: './ModelDeployment/List',
- },
- {
- name: '创建推理服务',
- path: 'createService',
- component: './ModelDeployment/CreateService',
- },
- {
- name: '编辑推理服务',
- path: 'editService/:serviceId',
- component: './ModelDeployment/CreateService',
- },
- {
- name: '服务详情',
- path: 'serviceInfo/:serviceId',
+ path: 'modelDeployment',
routes: [
{
- name: '服务详情',
+ name: '模型部署',
path: '',
- component: './ModelDeployment/ServiceInfo',
- },
- {
- name: '新增服务版本',
- path: 'createVersion',
- component: './ModelDeployment/CreateVersion',
+ component: './ModelDeployment/List',
},
{
- name: '更新服务版本',
- path: 'updateVersion',
- component: './ModelDeployment/CreateVersion',
+ name: '创建推理服务',
+ path: 'createService',
+ component: './ModelDeployment/CreateService',
},
{
- name: '重启服务版本',
- path: 'restartVersion',
- component: './ModelDeployment/CreateVersion',
+ name: '编辑推理服务',
+ path: 'editService/:serviceId',
+ component: './ModelDeployment/CreateService',
},
{
- name: '服务版本详情',
- path: 'versionInfo/:id',
- component: './ModelDeployment/VersionInfo',
+ name: '服务详情',
+ path: 'serviceInfo/:serviceId',
+ routes: [
+ {
+ name: '服务详情',
+ path: '',
+ component: './ModelDeployment/ServiceInfo',
+ },
+ {
+ name: '新增服务版本',
+ path: 'createVersion',
+ component: './ModelDeployment/CreateVersion',
+ },
+ {
+ name: '更新服务版本',
+ path: 'updateVersion',
+ component: './ModelDeployment/CreateVersion',
+ },
+ {
+ name: '重启服务版本',
+ path: 'restartVersion',
+ component: './ModelDeployment/CreateVersion',
+ },
+ {
+ name: '服务版本详情',
+ path: 'versionInfo/:id',
+ component: './ModelDeployment/VersionInfo',
+ },
+ ],
},
],
},
@@ -461,6 +549,30 @@ export default [
},
],
},
+ {
+ name: '算力积分',
+ path: '/points',
+ routes: [
+ {
+ name: '算力积分',
+ path: '',
+ key: 'points',
+ component: './Points/index',
+ },
+ ],
+ },
+ {
+ name: '知识图谱',
+ path: '/knowledge',
+ routes: [
+ {
+ name: '知识图谱',
+ path: '',
+ key: 'knowledge',
+ component: './Knowledge/index',
+ },
+ ],
+ },
{
path: '*',
layout: false,
diff --git a/react-ui/package.json b/react-ui/package.json
index dc5be1c5..21710bca 100644
--- a/react-ui/package.json
+++ b/react-ui/package.json
@@ -1,13 +1,14 @@
{
- "name": "ant-design-pro",
- "version": "6.0.0",
+ "name": "cl-model",
+ "version": "1.0.0",
"private": true,
- "description": "An out-of-box UI solution for enterprise applications",
+ "description": "",
"scripts": {
"analyze": "cross-env ANALYZE=1 max build",
"build": "max build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
+ "dev-no-sso": "cross-env NO_SSO=true npm run start:dev",
"docker-hub:build": "docker build -f Dockerfile.hub -t ant-design-pro ./",
"docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build",
"docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
@@ -15,6 +16,7 @@
"docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
"docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro",
"docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro",
+ "docs": "typedoc",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
"postinstall": "max setup",
@@ -36,6 +38,11 @@
"start:mock": "cross-env REACT_APP_ENV=dev UMI_ENV=dev max dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
+ "storybook": "storybook dev -p 6006",
+ "storybook-build": "storybook build",
+ "storybook-deploy": "./.storybook/scripts/upload-deploy.sh",
+ "storybook-docs": "storybook dev --docs",
+ "storybook-docs-build": "storybook build --docs",
"test": "jest",
"test:coverage": "npm run jest -- --coverage",
"test:update": "npm run jest -- -u",
@@ -61,6 +68,7 @@
"@types/crypto-js": "^4.2.2",
"@umijs/route-utils": "^4.0.1",
"antd": "~5.21.4",
+ "caniuse-lite": "~1.0.30001707",
"classnames": "^2.3.2",
"crypto-js": "^4.2.0",
"echarts": "^5.5.0",
@@ -83,6 +91,19 @@
},
"devDependencies": {
"@ant-design/pro-cli": "^3.1.0",
+ "@chromatic-com/storybook": "~3.2.4",
+ "@storybook/addon-essentials": "~8.5.3",
+ "@storybook/addon-interactions": "~8.5.3",
+ "@storybook/addon-onboarding": "~8.5.3",
+ "@storybook/addon-styling-webpack": "~1.0.1",
+ "@storybook/addon-webpack5-compiler-babel": "~3.0.5",
+ "@storybook/addon-webpack5-compiler-swc": "~2.0.0",
+ "@storybook/blocks": "~8.5.3",
+ "@storybook/manager-api": "~8.6.0",
+ "@storybook/react": "~8.5.3",
+ "@storybook/react-webpack5": "~8.5.3",
+ "@storybook/test": "~8.5.3",
+ "@storybook/theming": "~8.6.0",
"@testing-library/react": "^14.0.0",
"@types/antd": "^1.0.0",
"@types/express": "^4.17.14",
@@ -96,21 +117,30 @@
"@umijs/max": "^4.0.66",
"cross-env": "^7.0.3",
"eslint": "^8.39.0",
+ "eslint-plugin-react-hooks": "~5.2.0",
+ "eslint-plugin-storybook": "~0.11.2",
"express": "^4.18.2",
"gh-pages": "^5.0.0",
"husky": "^8.0.3",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
+ "less": "~4.2.2",
+ "less-loader": "~12.2.0",
"lint-staged": "^13.2.0",
"mockjs": "^1.1.0",
+ "msw": "~2.7.0",
+ "msw-storybook-addon": "~2.0.4",
"prettier": "^2.8.1",
+ "storybook": "~8.5.3",
"swagger-ui-dist": "^4.18.2",
+ "ts-loader": "~9.5.2",
"ts-node": "^10.9.1",
+ "typedoc": "~0.28.1",
"typescript": "^5.0.4",
"umi-presets-pro": "^2.0.0"
},
"engines": {
- "node": ">=16.14.0"
+ "node": ">=18.18.0"
},
"create-umi": {
"ignoreScript": [
@@ -140,5 +170,10 @@
"CNAME",
"create-umi"
]
+ },
+ "msw": {
+ "workerDirectory": [
+ "public"
+ ]
}
}
diff --git a/react-ui/public/favicon-cc.ico b/react-ui/public/favicon-cc.ico
new file mode 100644
index 00000000..4d544cb1
Binary files /dev/null and b/react-ui/public/favicon-cc.ico differ
diff --git a/react-ui/public/favicon-cl.ico b/react-ui/public/favicon-cl.ico
deleted file mode 100644
index 408b8a23..00000000
Binary files a/react-ui/public/favicon-cl.ico and /dev/null differ
diff --git a/react-ui/public/favicon.ico b/react-ui/public/favicon.ico
index 4d544cb1..408b8a23 100644
Binary files a/react-ui/public/favicon.ico and b/react-ui/public/favicon.ico differ
diff --git a/react-ui/public/fonts/DingTalk-JinBuTi.ttf b/react-ui/public/fonts/DingTalk-JinBuTi.ttf
new file mode 100644
index 00000000..c4efa55a
Binary files /dev/null and b/react-ui/public/fonts/DingTalk-JinBuTi.ttf differ
diff --git a/react-ui/public/fonts/DingTalk-JinBuTi.woff b/react-ui/public/fonts/DingTalk-JinBuTi.woff
new file mode 100644
index 00000000..5a8efa8e
Binary files /dev/null and b/react-ui/public/fonts/DingTalk-JinBuTi.woff differ
diff --git a/react-ui/public/fonts/DingTalk-JinBuTi.woff2 b/react-ui/public/fonts/DingTalk-JinBuTi.woff2
new file mode 100644
index 00000000..c8d272a5
Binary files /dev/null and b/react-ui/public/fonts/DingTalk-JinBuTi.woff2 differ
diff --git a/react-ui/public/fonts/font.css b/react-ui/public/fonts/font.css
index ea5ffc5c..012b9f59 100644
--- a/react-ui/public/fonts/font.css
+++ b/react-ui/public/fonts/font.css
@@ -1,5 +1,13 @@
@font-face {
- font-family: Alibaba;
- src: url('./ALIBABA-PUHUITI-MEDIUM.TTF');
- font-display: swap;
- }
\ No newline at end of file
+ font-family: Alibaba;
+ src: url('./ALIBABA-PUHUITI-MEDIUM.TTF');
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'DingTalk-JinBuTi';
+ src: url('./DingTalk-JinBuTi.woff2') format('woff2'), /* 最优先使用 woff2 */
+ url('./DingTalk-JinBuTi.woff') format('woff'), /* 兼容性较好的 woff */
+ url('./DingTalk-JinBuTi.ttf') format('truetype'); /* ttf 作为备选 */
+ font-display: swap; /* 优化页面加载时的字体显示 */
+}
\ No newline at end of file
diff --git a/react-ui/public/mockServiceWorker.js b/react-ui/public/mockServiceWorker.js
new file mode 100644
index 00000000..ec47a9a5
--- /dev/null
+++ b/react-ui/public/mockServiceWorker.js
@@ -0,0 +1,307 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.7.0'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+ self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+ event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+ const clientId = event.source.id
+
+ if (!clientId || !self.clients) {
+ return
+ }
+
+ const client = await self.clients.get(clientId)
+
+ if (!client) {
+ return
+ }
+
+ const allClients = await self.clients.matchAll({
+ type: 'window',
+ })
+
+ switch (event.data) {
+ case 'KEEPALIVE_REQUEST': {
+ sendToClient(client, {
+ type: 'KEEPALIVE_RESPONSE',
+ })
+ break
+ }
+
+ case 'INTEGRITY_CHECK_REQUEST': {
+ sendToClient(client, {
+ type: 'INTEGRITY_CHECK_RESPONSE',
+ payload: {
+ packageVersion: PACKAGE_VERSION,
+ checksum: INTEGRITY_CHECKSUM,
+ },
+ })
+ break
+ }
+
+ case 'MOCK_ACTIVATE': {
+ activeClientIds.add(clientId)
+
+ sendToClient(client, {
+ type: 'MOCKING_ENABLED',
+ payload: {
+ client: {
+ id: client.id,
+ frameType: client.frameType,
+ },
+ },
+ })
+ break
+ }
+
+ case 'MOCK_DEACTIVATE': {
+ activeClientIds.delete(clientId)
+ break
+ }
+
+ case 'CLIENT_CLOSED': {
+ activeClientIds.delete(clientId)
+
+ const remainingClients = allClients.filter((client) => {
+ return client.id !== clientId
+ })
+
+ // Unregister itself when there are no more clients
+ if (remainingClients.length === 0) {
+ self.registration.unregister()
+ }
+
+ break
+ }
+ }
+})
+
+self.addEventListener('fetch', function (event) {
+ const { request } = event
+
+ // Bypass navigation requests.
+ if (request.mode === 'navigate') {
+ return
+ }
+
+ // Opening the DevTools triggers the "only-if-cached" request
+ // that cannot be handled by the worker. Bypass such requests.
+ if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+ return
+ }
+
+ // Bypass all requests when there are no active clients.
+ // Prevents the self-unregistered worked from handling requests
+ // after it's been deleted (still remains active until the next reload).
+ if (activeClientIds.size === 0) {
+ return
+ }
+
+ // Generate unique request ID.
+ const requestId = crypto.randomUUID()
+ event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+ const client = await resolveMainClient(event)
+ const response = await getResponse(event, client, requestId)
+
+ // Send back the response clone for the "response:*" life-cycle events.
+ // Ensure MSW is active and ready to handle the message, otherwise
+ // this message will pend indefinitely.
+ if (client && activeClientIds.has(client.id)) {
+ ;(async function () {
+ const responseClone = response.clone()
+
+ sendToClient(
+ client,
+ {
+ type: 'RESPONSE',
+ payload: {
+ requestId,
+ isMockedResponse: IS_MOCKED_RESPONSE in response,
+ type: responseClone.type,
+ status: responseClone.status,
+ statusText: responseClone.statusText,
+ body: responseClone.body,
+ headers: Object.fromEntries(responseClone.headers.entries()),
+ },
+ },
+ [responseClone.body],
+ )
+ })()
+ }
+
+ return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+ const client = await self.clients.get(event.clientId)
+
+ if (activeClientIds.has(event.clientId)) {
+ return client
+ }
+
+ if (client?.frameType === 'top-level') {
+ return client
+ }
+
+ const allClients = await self.clients.matchAll({
+ type: 'window',
+ })
+
+ return allClients
+ .filter((client) => {
+ // Get only those clients that are currently visible.
+ return client.visibilityState === 'visible'
+ })
+ .find((client) => {
+ // Find the client ID that's recorded in the
+ // set of clients that have registered the worker.
+ return activeClientIds.has(client.id)
+ })
+}
+
+async function getResponse(event, client, requestId) {
+ const { request } = event
+
+ // Clone the request because it might've been already used
+ // (i.e. its body has been read and sent to the client).
+ const requestClone = request.clone()
+
+ function passthrough() {
+ // Cast the request headers to a new Headers instance
+ // so the headers can be manipulated with.
+ const headers = new Headers(requestClone.headers)
+
+ // Remove the "accept" header value that marked this request as passthrough.
+ // This prevents request alteration and also keeps it compliant with the
+ // user-defined CORS policies.
+ const acceptHeader = headers.get('accept')
+ if (acceptHeader) {
+ const values = acceptHeader.split(',').map((value) => value.trim())
+ const filteredValues = values.filter(
+ (value) => value !== 'msw/passthrough',
+ )
+
+ if (filteredValues.length > 0) {
+ headers.set('accept', filteredValues.join(', '))
+ } else {
+ headers.delete('accept')
+ }
+ }
+
+ return fetch(requestClone, { headers })
+ }
+
+ // Bypass mocking when the client is not active.
+ if (!client) {
+ return passthrough()
+ }
+
+ // Bypass initial page load requests (i.e. static assets).
+ // The absence of the immediate/parent client in the map of the active clients
+ // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+ // and is not ready to handle requests.
+ if (!activeClientIds.has(client.id)) {
+ return passthrough()
+ }
+
+ // Notify the client that a request has been intercepted.
+ const requestBuffer = await request.arrayBuffer()
+ const clientMessage = await sendToClient(
+ client,
+ {
+ type: 'REQUEST',
+ payload: {
+ id: requestId,
+ url: request.url,
+ mode: request.mode,
+ method: request.method,
+ headers: Object.fromEntries(request.headers.entries()),
+ cache: request.cache,
+ credentials: request.credentials,
+ destination: request.destination,
+ integrity: request.integrity,
+ redirect: request.redirect,
+ referrer: request.referrer,
+ referrerPolicy: request.referrerPolicy,
+ body: requestBuffer,
+ keepalive: request.keepalive,
+ },
+ },
+ [requestBuffer],
+ )
+
+ switch (clientMessage.type) {
+ case 'MOCK_RESPONSE': {
+ return respondWithMock(clientMessage.data)
+ }
+
+ case 'PASSTHROUGH': {
+ return passthrough()
+ }
+ }
+
+ return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+ return new Promise((resolve, reject) => {
+ const channel = new MessageChannel()
+
+ channel.port1.onmessage = (event) => {
+ if (event.data && event.data.error) {
+ return reject(event.data.error)
+ }
+
+ resolve(event.data)
+ }
+
+ client.postMessage(
+ message,
+ [channel.port2].concat(transferrables.filter(Boolean)),
+ )
+ })
+}
+
+async function respondWithMock(response) {
+ // Setting response status code to 0 is a no-op.
+ // However, when responding with a "Response.error()", the produced Response
+ // instance will have status code set to 0. Since it's not possible to create
+ // a Response instance with status code 0, handle that use-case separately.
+ if (response.status === 0) {
+ return Response.error()
+ }
+
+ const mockedResponse = new Response(response.body, response)
+
+ Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+ value: true,
+ enumerable: true,
+ })
+
+ return mockedResponse
+}
diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx
index d08ca129..686c495d 100644
--- a/react-ui/src/app.tsx
+++ b/react-ui/src/app.tsx
@@ -1,14 +1,17 @@
import RightContent from '@/components/RightContent';
import themes from '@/styles/theme.less';
+import { type GlobalInitialState } from '@/types';
+import { menuItemRender } from '@/utils/menuRender';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { RuntimeConfig, history } from '@umijs/max';
import { RuntimeAntdConfig } from 'umi';
import defaultSettings from '../config/defaultSettings';
import '../public/fonts/font.css';
import { getAccessToken } from './access';
+import ErrorBoundary from './components/ErrorBoundary';
import './dayjsConfig';
-import './global.less';
-import { removeAllPageCacheState } from './hooks/pageCacheState';
+import { removeAllPageCacheState } from './hooks/useCacheState';
+import { globalGetSeverTime } from './hooks/useServerTime';
import {
getRemoteMenu,
getRoutersInfo,
@@ -17,21 +20,17 @@ import {
setRemoteMenu,
} from './services/session';
import './styles/menu.less';
-export { requestConfig as request } from './requestConfig';
-// const isDev = process.env.NODE_ENV === 'development';
-import { type GlobalInitialState } from '@/types';
-// import '@/utils/clipboard';
-import { menuItemRender } from '@/utils/menuRender';
-import ErrorBoundary from './components/ErrorBoundary';
import { needAuth } from './utils';
import { gotoLoginPage } from './utils/ui';
+export { requestConfig as request } from './requestConfig';
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
- * */
+ */
export async function getInitialState(): Promise