diff --git a/react-ui/src/components/ParameterInput/index.less b/react-ui/src/components/ParameterInput/index.less new file mode 100644 index 00000000..e69de29b diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx index 06fa87e9..e0a8daf3 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx @@ -1,6 +1,9 @@ import SubAreaTitle from '@/components/SubAreaTitle'; +import { getComputingResourceReq } from '@/services/pipeline'; import { PipelineNodeModelSerialize } from '@/types'; -import { Form, Input, type FormProps } from 'antd'; +import { to } from '@/utils/promise'; +import { Form, Input, Select, type FormProps } from 'antd'; +import { useEffect, useState } from 'react'; import styles from './index.less'; const { TextArea } = Input; @@ -10,6 +13,25 @@ type ExperimentParameterProps = { }; function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { + const [resourceStandardList, setResourceStandardList] = useState([]); // 资源规模列表 + + useEffect(() => { + getComputingResource(); + }, []); + + // 获取资源规格列表数据 + const getComputingResource = async () => { + const params = { + page: 0, + size: 1000, + resource_type: '', + }; + const [res] = await to(getComputingResourceReq(params)); + if (res && res.data && res.data.content) { + setResourceStandardList(res.data.content); + } + }; + // 控制策略 const controlStrategyList = Object.entries(nodeData.control_strategy ?? {}).map( ([key, value]) => ({ key, value }), @@ -103,7 +125,14 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) { }, ]} > - + diff --git a/react-ui/src/pages/Experiment/experimentText/index.less b/react-ui/src/pages/Experiment/experimentText/index.less index 8c341aa5..f2f5510d 100644 --- a/react-ui/src/pages/Experiment/experimentText/index.less +++ b/react-ui/src/pages/Experiment/experimentText/index.less @@ -27,5 +27,7 @@ width: 100%; height: calc(100% - 56px); background-color: @background-color; + background-image: url(/assets/images/pipeline-canvas-back.png); + background-size: 100% 100%; } } diff --git a/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less b/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less deleted file mode 100644 index 382cc587..00000000 --- a/react-ui/src/pages/Pipeline/editPipeline/editPipeline.less +++ /dev/null @@ -1,80 +0,0 @@ -#graph { - position: relative; - width: 100%; - height: 100%; -} -.editPipelineProps { - :global { - label { - width: 100%; - - &::after { - display: none; - } - } - } -} -.editPipelinePropsContent { - display: flex; - align-items: center; - width: 100%; - height: 43px; - margin-bottom: 20px; - padding: 0 24px; - color: #1d1d20; - font-size: 15px; - font-family: 'Alibaba'; - background: #f8fbff; -} -.centerContainer { - display: flex; - flex: 1; - flex-direction: column; -} -.buttonList { - display: flex; - align-items: center; - justify-content: end; - width: 100%; - height: 45px; - padding: 0 30px; - background: #ffffff; - box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09); -} -.rightmenu { - position: absolute; - top: 0px; - left: 0px; - width: 120px; - height: 146px; - overflow-y: auto; - color: #333333; - font-size: 12px; - - background-color: #ffffff; -} - -.rightmenuItem { - padding: 10px 20px; - cursor: pointer; -} -.rightmenuItem:hover { - color: #ffffff; - background-color: rgba(24, 144, 255, 0.3); -} - -.ref-row { - display: flex; - align-items: center; - - .select-button { - display: flex; - flex: none; - align-items: center; - justify-content: flex-start; - width: 100px; - margin-left: 10px; - padding-right: 0; - padding-left: 0; - } -} diff --git a/react-ui/src/pages/Pipeline/editPipeline/index.jsx b/react-ui/src/pages/Pipeline/editPipeline/index.jsx index fe421514..b367523a 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/index.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/index.jsx @@ -2,14 +2,13 @@ import KFIcon from '@/components/KFIcon'; import { useStateRef, useVisible } from '@/hooks'; import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js'; import { to } from '@/utils/promise'; -import { useEmotionCss } from '@ant-design/use-emotion-css'; import G6 from '@antv/g6'; import { Button, message } from 'antd'; import { useEffect, useRef } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { s8 } from '../../../utils'; import GlobalParamsDrawer from '../components/GlobalParamsDrawer'; -import Styles from './editPipeline.less'; +import styles from './index.less'; import ModelMenus from './modelMenus'; import Props from './props'; import { findAllParentNodes, findFirstDuplicate } from './utils'; @@ -20,42 +19,6 @@ const EditPipeline = () => { const navgite = useNavigate(); let contextMenu = {}; const locationParams = useParams(); //新版本获取路由参数接口 - - const pipelineContainer = useEmotionCss(() => { - return { - display: 'flex', - backgroundColor: '#fff', - height: '98vh', - position: 'relative', - }; - }); - const rightmenu = useEmotionCss(() => { - return { - position: 'absolute', - width: '120px', - height: '146px', - left: '0px', - top: '0px', - - color: '#333333', - overflowY: 'auto', - }; - }); - const rightmenuItem = useEmotionCss(() => { - return { - padding: '10px 20px', - cursor: 'pointer', - fontSize: '12px', - }; - }); - const graphStyle = useEmotionCss(() => { - return { - width: '100%', - backgroundSize: '100% 100%', - backgroundImage: 'url(/assets/images/pipeline-canvas-back.png)', - flex: 1, - }; - }); const graphRef = useRef(); const paramsDrawerRef = useRef(); const propsRef = useRef(); @@ -730,10 +693,10 @@ const EditPipeline = () => { }; }; return ( -
+
-
-
+
+
-
+
{ }; const { Panel } = Collapse; return ( -
+
组件库
{modelMenusList && modelMenusList.length > 0 ? ( .ant-collapse-item > .ant-collapse-header { margin-bottom: 5px; + padding: 20px 16px 15px 16px; background-color: #fff; border-color: transparent; - padding: 20px 16px 15px 16px; } .ant-collapse > .ant-collapse-item { margin: 0 10px; - border-bottom:0.5px dashed rgba(20, 49, 179, 0.12); + border-bottom: 0.5px dashed rgba(20, 49, 179, 0.12); border-radius: 0px; } .ant-collapse .ant-collapse-content { @@ -41,10 +30,23 @@ } } } -.modelMenusTitle{ - padding: 12px 25px; +.collapseItem { + display: flex; + align-items: center; + height: 40px; + padding: 0 16px; + color: #575757; + font-size: 14px; + border-radius: 4px; + cursor: pointer; +} +.collapseItem:hover { + color: #1664ff; + background: rgba(22, 100, 255, 0.08); +} +.modelMenusTitle { margin-bottom: 10px; - color:#111111; -font-size:16px; -font-family: 'Alibaba'; -} \ No newline at end of file + padding: 12px 25px; + color: #111111; + font-size: 16px; +} diff --git a/react-ui/src/pages/Pipeline/editPipeline/props.jsx b/react-ui/src/pages/Pipeline/editPipeline/props.jsx index 179cd152..613007bc 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/props.jsx +++ b/react-ui/src/pages/Pipeline/editPipeline/props.jsx @@ -8,7 +8,7 @@ import { pick } from 'lodash'; import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'; import PropsLabel from '../components/PropsLabel'; import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal'; -import styles from './editPipeline.less'; +import styles from './props.less'; import { createMenuItems } from './utils'; const { TextArea } = Input; @@ -188,275 +188,273 @@ const Props = forwardRef(({ onParentChange }, ref) => { ); return ( - <> - +
- + +
+ -
- -
- - - - - - -
- + + + + + +
+ +
+ +
+ + + + + +
- -
- - - - - - -
- + + { + handleParameterClick('working_directory', value); + }} + /> + } + > + + + { + handleParameterClick('command', value); + }} + /> + } + > +