diff --git a/react-ui/config/config.ts b/react-ui/config/config.ts index c10b23b6..04ab330d 100644 --- a/react-ui/config/config.ts +++ b/react-ui/config/config.ts @@ -156,4 +156,5 @@ export default defineConfig({ }, javascriptEnabled: true, }, + valtio: {}, }); diff --git a/react-ui/mock/listTableList.ts b/react-ui/mock/listTableList.ts deleted file mode 100644 index 35ec3cec..00000000 --- a/react-ui/mock/listTableList.ts +++ /dev/null @@ -1,176 +0,0 @@ -import { Request, Response } from 'express'; -import moment from 'moment'; -import { parse } from 'url'; - -// mock tableListDataSource -const genList = (current: number, pageSize: number) => { - const tableListDataSource: API.RuleListItem[] = []; - - for (let i = 0; i < pageSize; i += 1) { - const index = (current - 1) * 10 + i; - tableListDataSource.push({ - key: index, - disabled: i % 6 === 0, - href: 'https://ant.design', - avatar: [ - 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', - 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', - ][i % 2], - name: `TradeCode ${index}`, - owner: '曲丽丽', - desc: '这是一段描述', - callNo: Math.floor(Math.random() * 1000), - status: Math.floor(Math.random() * 10) % 4, - updatedAt: moment().format('YYYY-MM-DD'), - createdAt: moment().format('YYYY-MM-DD'), - progress: Math.ceil(Math.random() * 100), - }); - } - tableListDataSource.reverse(); - return tableListDataSource; -}; - -let tableListDataSource = genList(1, 100); - -function getRule(req: Request, res: Response, u: string) { - let realUrl = u; - if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') { - realUrl = req.url; - } - const { current = 1, pageSize = 10 } = req.query; - const params = parse(realUrl, true).query as unknown as API.PageParams & - API.RuleListItem & { - sorter: any; - filter: any; - }; - - let dataSource = [...tableListDataSource].slice( - ((current as number) - 1) * (pageSize as number), - (current as number) * (pageSize as number), - ); - if (params.sorter) { - const sorter = JSON.parse(params.sorter); - dataSource = dataSource.sort((prev, next) => { - let sortNumber = 0; - (Object.keys(sorter) as Array).forEach((key) => { - let nextSort = next?.[key] as number; - let preSort = prev?.[key] as number; - if (sorter[key] === 'descend') { - if (preSort - nextSort > 0) { - sortNumber += -1; - } else { - sortNumber += 1; - } - return; - } - if (preSort - nextSort > 0) { - sortNumber += 1; - } else { - sortNumber += -1; - } - }); - return sortNumber; - }); - } - if (params.filter) { - const filter = JSON.parse(params.filter as any) as { - [key: string]: string[]; - }; - if (Object.keys(filter).length > 0) { - dataSource = dataSource.filter((item) => { - return (Object.keys(filter) as Array).some((key) => { - if (!filter[key]) { - return true; - } - if (filter[key].includes(`${item[key]}`)) { - return true; - } - return false; - }); - }); - } - } - - if (params.name) { - dataSource = dataSource.filter((data) => data?.name?.includes(params.name || '')); - } - const result = { - data: dataSource, - total: tableListDataSource.length, - success: true, - pageSize, - current: parseInt(`${params.current}`, 10) || 1, - }; - - return res.json(result); -} - -function postRule(req: Request, res: Response, u: string, b: Request) { - let realUrl = u; - if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') { - realUrl = req.url; - } - - const body = (b && b.body) || req.body; - const { method, name, desc, key } = body; - - switch (method) { - /* eslint no-case-declarations:0 */ - case 'delete': - tableListDataSource = tableListDataSource.filter((item) => key.indexOf(item.key) === -1); - break; - case 'post': - (() => { - const i = Math.ceil(Math.random() * 10000); - const newRule: API.RuleListItem = { - key: tableListDataSource.length, - href: 'https://ant.design', - avatar: [ - 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', - 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', - ][i % 2], - name, - owner: '曲丽丽', - desc, - callNo: Math.floor(Math.random() * 1000), - status: Math.floor(Math.random() * 10) % 2, - updatedAt: moment().format('YYYY-MM-DD'), - createdAt: moment().format('YYYY-MM-DD'), - progress: Math.ceil(Math.random() * 100), - }; - tableListDataSource.unshift(newRule); - return res.json(newRule); - })(); - return; - - case 'update': - (() => { - let newRule = {}; - tableListDataSource = tableListDataSource.map((item) => { - if (item.key === key) { - newRule = { ...item, desc, name }; - return { ...item, desc, name }; - } - return item; - }); - return res.json(newRule); - })(); - return; - default: - break; - } - - const result = { - list: tableListDataSource, - pagination: { - total: tableListDataSource.length, - }, - }; - - res.json(result); -} - -export default { - 'GET /api/rule': getRule, - 'POST /api/rule': postRule, -}; diff --git a/react-ui/package.json b/react-ui/package.json index aebf21ca..dc5be1c5 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -67,7 +67,6 @@ "fabric": "^5.3.0", "highlight.js": "^11.7.0", "lodash": "^4.17.21", - "moment": "^2.30.1", "omit.js": "^2.0.2", "pnpm": "^8.9.0", "query-string": "^8.1.0", diff --git a/react-ui/src/components/InfoGroup/index.less b/react-ui/src/components/InfoGroup/index.less index cf05c8b2..4dccf4c7 100644 --- a/react-ui/src/components/InfoGroup/index.less +++ b/react-ui/src/components/InfoGroup/index.less @@ -5,10 +5,7 @@ padding: 20px @content-padding; background-color: white; border: 1px solid @border-color-base; + border-top: none; border-radius: 0 0 4px 4px; - - &&--scroll { - padding: 0; - } } } diff --git a/react-ui/src/components/InfoGroup/index.tsx b/react-ui/src/components/InfoGroup/index.tsx index 4e3359c0..8cf4b4e8 100644 --- a/react-ui/src/components/InfoGroup/index.tsx +++ b/react-ui/src/components/InfoGroup/index.tsx @@ -4,21 +4,27 @@ import './index.less'; type InfoGroupProps = { title: string; - contentScroll?: boolean; // 内容是否需要滚动，如果可以滚动，则取消 padding + height?: string | number; // 如果要纵向滚动，需要设置高度 + width?: string | number; // 如果要横向滚动，需要设置宽度 className?: string; style?: React.CSSProperties; children?: React.ReactNode; }; -function InfoGroup({ title, contentScroll = false, className, style, children }: InfoGroupProps) { +function InfoGroup({ title, height, width, className, style, children }: InfoGroupProps) { + const contentStyle: React.CSSProperties = {}; + if (height) { + contentStyle.height = height; + contentStyle.overflowY = 'auto'; + } + if (width) { + contentStyle.width = width; + contentStyle.overflowX = 'auto'; + } return (
-
+
{children}
diff --git a/react-ui/src/hooks/resource.ts b/react-ui/src/hooks/resource.ts index d3957bb7..0b491aeb 100644 --- a/react-ui/src/hooks/resource.ts +++ b/react-ui/src/hooks/resource.ts @@ -1,15 +1,28 @@ +/* + * @Author: 赵伟 + * @Date: 2024-10-10 08:51:41 + * @Description: 资源规格 hook + */ + import { getComputingResourceReq } from '@/services/pipeline'; +import computingResourceState, { setComputingResource } from '@/state/computingResourceStore'; import { ComputingResource } from '@/types'; import { to } from '@/utils/promise'; import { type SelectProps } from 'antd'; import { useCallback, useEffect, useState } from 'react'; +import { useSnapshot } from 'umi'; // 获取资源规格 export function useComputingResource() { const [resourceStandardList, setResourceStandardList] = useState([]); + const computingResourceSnap = useSnapshot(computingResourceState); useEffect(() => { - getComputingResource(); + if (computingResourceSnap.computingResource.length > 0) { + setResourceStandardList(computingResourceSnap.computingResource as ComputingResource[]); + } else { + getComputingResource(); + } }, []); // 获取资源规格列表数据 @@ -22,6 +35,7 @@ export function useComputingResource() { const [res] = await to(getComputingResourceReq(params)); if (res && res.data && res.data.content) { setResourceStandardList(res.data.content); + setComputingResource(res.data.content); } }, []); diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less index c36da152..342817c3 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.less +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.less @@ -7,10 +7,9 @@ border-radius: 10px; &__download { - display: flex; - align-items: center; - height: 34px; - margin-bottom: 16px; + padding-top: 16px; + padding-bottom: 16px; + padding-left: @content-padding; color: @text-color; font-size: 13px; @@ -18,15 +17,14 @@ border-radius: 4px; &__btn { - margin-left: 22px; + display: block; + height: 36px; + margin-top: 15px; + font-size: 14px; } } &__text { - width: 100%; - height: 420px; - padding: 20px @content-padding; - overflow: auto; white-space: pre-wrap; } diff --git a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx index c5522834..a826155d 100644 --- a/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx +++ b/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx @@ -1,5 +1,4 @@ import InfoGroup from '@/components/InfoGroup'; -import KFIcon from '@/components/KFIcon'; import { getFileReq } from '@/services/file'; import { to } from '@/utils/promise'; import { Button, Image } from 'antd'; @@ -38,28 +37,10 @@ function ExperimentResult({ fileUrl, imageUrl, modelPath }: ExperimentResultProp return (
- {modelPath && ( -
- 文件名 - save_model.joblib - -
- )} - +
{result}
 - +
+ {modelPath && ( +
+ 文件名 + save_model.joblib + +
+ )}
); } diff --git a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.less b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.less index 83a91180..c1f1b7ef 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.less +++ b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.less @@ -3,6 +3,12 @@ .ant-drawer-body { overflow-y: hidden; } + + .ant-drawer-close { + position: absolute; + top: 16px; + right: 16px; + } } &__tabs { diff --git a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx index 26da1c07..cdcaea19 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx @@ -2,7 +2,7 @@ import { ExperimentStatus } from '@/enums'; import { experimentStatusInfo } from '@/pages/Experiment/status'; import { PipelineNodeModelSerialize } from '@/types'; import { elapsedTime, formatDate } from '@/utils/date'; -import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons'; +import { CloseOutlined, DatabaseOutlined, ProfileOutlined } from '@ant-design/icons'; import { Drawer, Tabs } from 'antd'; import { useMemo } from 'react'; import ExperimentParameter from '../ExperimentParameter'; @@ -95,10 +95,11 @@ const ExperimentDrawer = ({ return ( } onClose={onClose} open={open} width={520} diff --git a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx index 7fe6440a..e54894ea 100644 --- a/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx +++ b/react-ui/src/pages/Pipeline/components/GlobalParamsDrawer/index.tsx @@ -49,7 +49,7 @@ const GlobalParamsDrawer = forwardRef( return ( { const columns: ProColumns[] = [ { title: , - dataIndex: 'deptId', + dataIndex: 'userId', valueType: 'text', }, { diff --git a/react-ui/src/state/computingResourceStore.ts b/react-ui/src/state/computingResourceStore.ts new file mode 100644 index 00000000..23d1455b --- /dev/null +++ b/react-ui/src/state/computingResourceStore.ts @@ -0,0 +1,16 @@ +import { ComputingResource } from '@/types'; +import { proxy } from 'umi'; + +type ComputingResourceStore = { + computingResource: ComputingResource[]; +}; + +const state = proxy({ + computingResource: [], +}); + +export const setComputingResource = (computingResource: ComputingResource[]) => { + state.computingResource = computingResource; +}; + +export default state;