From 3390b57878d6d250723eec0b2b1d947cc68740b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=B4=E6=99=96?= <2689991790@qq.com> Date: Thu, 13 Jun 2024 17:54:02 +0800 Subject: [PATCH 1/4] feat:obproxy --- ui/src/components/CustomFormItem/index.tsx | 27 ++++ ui/src/components/InputLabelComp/index.tsx | 10 +- ui/src/components/TooltipPretty/index.less | 5 + ui/src/components/TooltipPretty/index.tsx | 22 ++++ ui/src/constants/doc.ts | 3 +- ui/src/constants/index.ts | 20 +++ ui/src/pages/Cluster/New/BasicInfo.tsx | 12 +- ui/src/pages/Cluster/New/Observer.tsx | 64 +++------- ui/src/pages/OBProxy/ClusterList.tsx | 2 +- .../OBProxy/Detail/Overview/ConfigDrawer.tsx | 115 ++++++++++++++++++ .../OBProxy/Detail/Overview/DetailConfig.tsx | 25 ++-- ui/src/pages/OBProxy/New/BasicConfig.tsx | 50 +++++--- ui/src/pages/OBProxy/New/DetailConfig.tsx | 86 +++++++++++++ ui/src/pages/OBProxy/New/index.less | 4 + ui/src/pages/OBProxy/New/index.tsx | 33 ++++- 15 files changed, 395 insertions(+), 83 deletions(-) create mode 100644 ui/src/components/CustomFormItem/index.tsx create mode 100644 ui/src/components/TooltipPretty/index.less create mode 100644 ui/src/components/TooltipPretty/index.tsx create mode 100644 ui/src/pages/OBProxy/Detail/Overview/ConfigDrawer.tsx create mode 100644 ui/src/pages/OBProxy/New/DetailConfig.tsx create mode 100644 ui/src/pages/OBProxy/New/index.less diff --git a/ui/src/components/CustomFormItem/index.tsx b/ui/src/components/CustomFormItem/index.tsx new file mode 100644 index 000000000..ddf1a4811 --- /dev/null +++ b/ui/src/components/CustomFormItem/index.tsx @@ -0,0 +1,27 @@ +import { intl } from '@/utils/intl'; +import { Form } from 'antd'; + +export const CustomFormItem = (prop: any) => { + const { label, message } = prop; + return ( + + {prop.children} + + ); +}; diff --git a/ui/src/components/InputLabelComp/index.tsx b/ui/src/components/InputLabelComp/index.tsx index c922a5737..3823c9939 100644 --- a/ui/src/components/InputLabelComp/index.tsx +++ b/ui/src/components/InputLabelComp/index.tsx @@ -12,6 +12,7 @@ interface InputLabelCompPorps { maxLength?: number; defaulLabelName?: string; regex?: boolean; + disable?: boolean; } export default function InputLabelComp(props: InputLabelCompPorps) { @@ -22,6 +23,7 @@ export default function InputLabelComp(props: InputLabelCompPorps) { onBlur, defaulLabelName = 'key', regex, + disable = false, } = props; const labelNameInput = (value: string, index: number) => { @@ -53,16 +55,18 @@ export default function InputLabelComp(props: InputLabelCompPorps) { {labels?.map((label, index) => ( - + labelNameInput(e.target.value, index)} placeholder="请输入标签名" /> - + labelValueInput(e.target.value, index)} @@ -99,7 +103,7 @@ export default function InputLabelComp(props: InputLabelCompPorps) { ))} - {!maxLength || labels.length < maxLength ? ( + {(!maxLength || labels.length < maxLength) && !disable ? ( + + + + ); + }; + const titleStyle = { fontSize: 14, fontWeight: 600 }; + return ( + } + onSubmit={() => form.submit()} + destroyOnClose={true} + onClose={() => onClose()} + {...props} + > +
+

资源设置

+ + {intl.formatMessage({ + id: 'Dashboard.Cluster.New.Observer.Image', + defaultMessage: '镜像', + })}{' '} + + {intl.formatMessage({ + id: 'Dashboard.Cluster.New.Observer.ImageList', + defaultMessage: '（镜像列表）', + })} + + + } + name="image" + message={intl.formatMessage({ + id: 'Dashboard.Cluster.New.Observer.EnterAnImage', + defaultMessage: '请输入镜像', + })} + > + + + + - + + + + + @@ -51,7 +70,7 @@ export default function BasicConfig({ form }: BasicConfigProps) { rules={[ { required: true, - message: '请选择', + message: '请选择 OB 集群', }, ]} > @@ -60,13 +79,14 @@ export default function BasicConfig({ form }: BasicConfigProps) { } rules={[ { required: true, - message: '请输入', + message: '请输入 OBProxy root 密码', }, ]} > diff --git a/ui/src/pages/OBProxy/New/DetailConfig.tsx b/ui/src/pages/OBProxy/New/DetailConfig.tsx new file mode 100644 index 000000000..5630b07c7 --- /dev/null +++ b/ui/src/pages/OBProxy/New/DetailConfig.tsx @@ -0,0 +1,86 @@ +import { CustomFormItem } from '@/components/CustomFormItem'; +import InputLabelComp from '@/components/InputLabelComp'; +import { SERVICE_TYPE, SUFFIX_UNIT } from '@/constants'; +import { MIRROR_OBPROXY } from '@/constants/doc'; +import { intl } from '@/utils/intl'; +import { Card, Col, Input, InputNumber, Row, Select } from 'antd'; +import styles from './index.less'; + +const commonStyle = { width: 280 }; + +export default function DetailConfig() { + return ( + + +

资源设置

+ + + {intl.formatMessage({ + id: 'Dashboard.Cluster.New.Observer.Image', + defaultMessage: '镜像', + })}{' '} + + {intl.formatMessage({ + id: 'Dashboard.Cluster.New.Observer.ImageList', + defaultMessage: '（镜像列表）', + })} + + + } + name="image" + message={intl.formatMessage({ + id: 'Dashboard.Cluster.New.Observer.EnterAnImage', + defaultMessage: '请输入镜像', + })} + > + + + + + + labelChange(val, name)} + optionLabelProp="selectLabel" + options={listParametersOptions?.map((item) => ({ + value: item.value, + selectLabel: item.label, + label: ( +
+ {item.label} + + {item.info} + +
+ ), + }))} + /> + + + + + + + + + remove(name)} /> + + + ))} + + + + + )} +
); diff --git a/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx b/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx index a0691b31f..a29bf7042 100644 --- a/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx +++ b/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx @@ -30,7 +30,7 @@ export default function DetailConfig({ style, ...props }: DetailConfigProps) { } extra={ - , ]} + style={{ paddingBottom: 50 }} >
- - - - - - - - + + + +
); diff --git a/ui/src/type/obproxy.d.ts b/ui/src/type/obproxy.d.ts new file mode 100644 index 000000000..ec8355e1c --- /dev/null +++ b/ui/src/type/obproxy.d.ts @@ -0,0 +1,13 @@ +declare namespace OBProxy { + interface CommonProxyDetail { + name: string; + namespace: string; + image?: string; + parameters?: CommonKVPair[]; + resource?: CommonResourceSpec; + serviceType?: string; + replicas?: number; + } +} + +export { OBProxy }; diff --git a/ui/src/type/typings.d.ts b/ui/src/type/typings.d.ts index c1079c0c8..9f39b0d3c 100644 --- a/ui/src/type/typings.d.ts +++ b/ui/src/type/typings.d.ts @@ -849,4 +849,5 @@ declare namespace API { setVisible: (prop: boolean) => void; successCallback?: (val?: any) => void; }; + } From f0f1de5a043f3d3d759eca5cd680092d1994565d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=B4=E6=99=96?= <2689991790@qq.com> Date: Sun, 16 Jun 2024 00:15:37 +0800 Subject: [PATCH 4/4] isDifferentParams --- ui/src/pages/OBProxy/helper.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/ui/src/pages/OBProxy/helper.ts b/ui/src/pages/OBProxy/helper.ts index 297893d79..29f4e6ec7 100644 --- a/ui/src/pages/OBProxy/helper.ts +++ b/ui/src/pages/OBProxy/helper.ts @@ -1,17 +1,26 @@ import type { CommonKVPair } from '@/api/generated'; +const buildLabelsMap = (labels: CommonKVPair[]) => { + const labelsMap = new Map(); + for (const label of labels) { + labelsMap.set(label.key, label.value); + } + return labelsMap; +}; + /** - * + * * @description Determines whether two parameter lists are different */ export const isDifferentParams = ( newParams: CommonKVPair[], oldParams: CommonKVPair[], ) => { - if (newParams.length !== oldParams.length) return true; - for (const newParam of newParams) { - const oldParam = oldParams.find((item) => item.key === newParam.key); - if (!oldParam || oldParam.value !== newParam.value) return true; + const newParamsMap = buildLabelsMap(newParams), + oldParamsMap = buildLabelsMap(oldParams); + if (newParamsMap.size !== oldParamsMap.size) return true; + for (const key of newParamsMap.keys()) { + if (newParamsMap.get(key) !== oldParamsMap.get(key)) return true; } return false; };