From 5ac61d2cd674038cbeb7f161c0381af6ef617cc0 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Thu, 20 Jun 2024 11:09:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E7=8E=AF=E5=A2=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/assets/img/editor-parameter.png | Bin 0 -> 1264 bytes .../src/components/ParameterInput/index.tsx | 2 +- .../DevelopmentEnvironment/Create/index.less | 17 + .../DevelopmentEnvironment/Create/index.tsx | 344 ++++++++++++++++++ .../DevelopmentEnvironment/List/index.less | 22 ++ .../DevelopmentEnvironment/List/index.tsx | 263 +++++++++++++ .../components/EditorStatusCell/index.less | 19 + .../components/EditorStatusCell/index.tsx | 44 +++ react-ui/src/pages/Mirror/Info/index.less | 18 - react-ui/src/pages/Mirror/Info/index.tsx | 3 +- .../pages/ModelDeployment/Create/index.tsx | 36 +- .../services/developmentEnvironment/index.js | 16 - .../services/developmentEnvironment/index.ts | 59 +++ 13 files changed, 792 insertions(+), 51 deletions(-) create mode 100644 react-ui/src/assets/img/editor-parameter.png create mode 100644 react-ui/src/pages/DevelopmentEnvironment/Create/index.less create mode 100644 react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx create mode 100644 react-ui/src/pages/DevelopmentEnvironment/List/index.less create mode 100644 react-ui/src/pages/DevelopmentEnvironment/List/index.tsx create mode 100644 react-ui/src/pages/DevelopmentEnvironment/components/EditorStatusCell/index.less create mode 100644 react-ui/src/pages/DevelopmentEnvironment/components/EditorStatusCell/index.tsx delete mode 100644 react-ui/src/services/developmentEnvironment/index.js create mode 100644 react-ui/src/services/developmentEnvironment/index.ts diff --git a/react-ui/src/assets/img/editor-parameter.png b/react-ui/src/assets/img/editor-parameter.png new file mode 100644 index 0000000000000000000000000000000000000000..b5fd9f41a4a8abcc2174182549f408e41f6d3995 GIT binary patch literal 1264 zcmVDys!z_2rRaCs4zR)UzctzPhLfkv)cRxNqN;tvG}JVQ+xfg$0XkTYy4CA zeh9|Taw`GZ`P8FIJ~?D(fx^;1NzyVaHhh_lVOSa#Fj!zl_8H7XEpto>LO5um^*35w z+;3y@dR)FSfbiHL>_U}EQo?;$?#M;@4$I87PP?lV?#wSzK9Q~A@5TQk1{2*zD84p8 zP2m}_jE{=#gR+w(wb%ur`w3b~oD;J)#xVUH3Txv~`3!*Ne&Gp9pQ@5#W74vVRwONT zUR<>?hVz8;qQ~&PX)t2VkJ8@i0-{kNH7@=)*#^KE5L;|LpUn=94bn<3da}Blw0pe~ zxw%O<|8qUiTh@iFwGxsd1&9m-jzI%md%={Sm&=5VYg1bpnJAkg5KqBxqORPN5(Yp8S zw&!O))(^c)${R$*lXhmU!zXP5@nUe$G68?HD)Pb94~xNA66vihfH_i<{O)HM?T4;6*$Pj$q)BPmHRtnS$ zF=U1-+D1TXtx@xT`^z#Y9CSfSVkRR(&@qXyu4+1%D)*6^Q`&cEJ1PS>xQ<9cUhL9` zh0|Er$1JoTm7_Ws304L23=FLnXoNvEl#%TN((fSRTN&2Cg-Fr_77AHI!7P!3f>^jz zrSO>#i~fcJG4lb}%Kl_na8Bv1@ZvmXpa!O*_>F@Z+|8yFb| zBcI43y%aw$#(C;(&&@2Wp1m%9hfvDpYhN7C{yM}(K^bXj-S5_te@y2S(}CQd@A8$AHa%InBoQ7i-KlCSY6x8im>UKYX=}39 z8@cxW{jdQg1)FJ^_v331f-X<0x1{NVfL*RJF|aNf$$<+9bh8F;V4QPwJNSP auKxkknaVEgf$&QJ0000 diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.less b/react-ui/src/pages/DevelopmentEnvironment/Create/index.less new file mode 100644 index 00000000..cd1dcb27 --- /dev/null +++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.less @@ -0,0 +1,17 @@ +.editor-create { + height: 100%; + + &__content { + height: calc(100% - 60px); + margin-top: 10px; + padding: 30px 30px 10px; + overflow: auto; + background-color: white; + border-radius: 10px; + + &__type { + color: @text-color; + font-size: @font-size-input-lg; + } + } +} diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx new file mode 100644 index 00000000..036fc12c --- /dev/null +++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx @@ -0,0 +1,344 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-16 13:58:08 + * @Description: 创建镜像 + */ +import KFIcon from '@/components/KFIcon'; +import KFRadio, { type KFRadioItem } from '@/components/KFRadio'; +import PageTitle from '@/components/PageTitle'; +import ParameterInput from '@/components/ParameterInput'; +import SubAreaTitle from '@/components/SubAreaTitle'; +import { useComputingResource } from '@/hooks/resource'; +import ResourceSelectorModal, { + ResourceSelectorResponse, + ResourceSelectorType, + selectorTypeConfig, +} from '@/pages/Pipeline/components/ResourceSelectorModal'; +import { createEditorReq } from '@/services/developmentEnvironment'; +import { openAntdModal } from '@/utils/modal'; +import { to } from '@/utils/promise'; +import { useNavigate } from '@umijs/max'; +import { App, Button, Col, Form, Input, Row, Select } from 'antd'; +import { pick } from 'lodash'; +import { useState } from 'react'; +import styles from './index.less'; + +type FormData = { + name: string; + computing_resource: string; + standard: string; + image: string; + model: ResourceSelectorResponse; + dataset: ResourceSelectorResponse; +}; + +enum ComputingResourceType { + GPU = 'GPU', + NPU = 'NPU', +} + +const EditorRadioItems: KFRadioItem[] = [ + { + key: ComputingResourceType.GPU, + title: '英伟达GPU', + icon: , + }, + { + key: ComputingResourceType.NPU, + title: '昇腾NPU', + icon: , + }, +]; + +function EditorCreate() { + const navgite = useNavigate(); + const [form] = Form.useForm(); + const { message } = App.useApp(); + const [resourceStandardList, filterResourceStandard] = useComputingResource(); + const [selectedModel, setSelectedModel] = useState( + undefined, + ); // 选择的模型，为了再次打开时恢复原来的选择 + const [selectedDataset, setSelectedDataset] = useState( + undefined, + ); // 选择的数据集，为了再次打开时恢复原来的选择 + const [selectedMirror, setSelectedMirror] = useState( + undefined, + ); // 选择的镜像，为了再次打开时恢复原来的选择 + + // 创建编辑器 + const createEditor = async (formData: FormData) => { + // const { model, dataset } = formData; + // const params = { + // ...formData, + // model: JSON.stringify(omit(model, ['showValue'])), + // dataset: JSON.stringify(dataset, ['showValue']), + // }; + const [res] = await to(createEditorReq(formData)); + if (res) { + message.success('创建成功'); + navgite(-1); + } + }; + + // 提交 + const handleSubmit = (values: FormData) => { + createEditor(values); + }; + + // 取消 + const cancel = () => { + navgite(-1); + }; + // 获取选择数据集、模型后面按钮 icon + const getSelectBtnIcon = (type: ResourceSelectorType) => { + return ; + }; + + // 选择模型、镜像、数据集 + const selectResource = (name: string, type: ResourceSelectorType) => { + let resource: ResourceSelectorResponse | undefined; + switch (type) { + case ResourceSelectorType.Model: + resource = selectedModel; + break; + case ResourceSelectorType.Dataset: + resource = selectedDataset; + break; + default: + resource = selectedMirror; + break; + } + const { close } = openAntdModal(ResourceSelectorModal, { + type, + defaultExpandedKeys: resource ? [resource.id] : [], + defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [], + defaultActiveTab: resource?.activeTab, + onOk: (res) => { + if (res) { + if (type === ResourceSelectorType.Mirror) { + form.setFieldValue(name, res.path); + setSelectedMirror(res); + } else { + const showValue = `${res.name}:${res.version}`; + form.setFieldValue(name, { + ...pick(res, ['id', 'version', 'path']), + showValue, + }); + if (type === ResourceSelectorType.Model) { + setSelectedModel(res); + } else if (type === ResourceSelectorType.Dataset) { + setSelectedDataset(res); + } + } + } else { + if (type === ResourceSelectorType.Model) { + setSelectedModel(undefined); + } else if (type === ResourceSelectorType.Dataset) { + setSelectedDataset(undefined); + } else if (type === ResourceSelectorType.Mirror) { + setSelectedMirror(undefined); + } + form.setFieldValue(name, ''); + } + close(); + }, + }); + }; + + return ( +
+ +
+
+
+ + + + + + + + + + + + + + + + + + +