From cfae5dbc9f9a4182c8e6cb8f8492d5dc2bbbcb49 Mon Sep 17 00:00:00 2001 From: jin-sir <942725119@qq.com> Date: Mon, 20 Nov 2023 11:05:59 +0800 Subject: [PATCH 1/3] feat: add custom parameters --- .../src/components/customParameter/index.scss | 23 +++ .../src/components/customParameter/index.tsx | 148 ++++++++++++++++++ .../pages/console/cluster/detail/detail.tsx | 22 ++- .../pages/console/cluster/detail/index.tsx | 22 ++- 4 files changed, 212 insertions(+), 3 deletions(-) create mode 100644 taier-ui/src/components/customParameter/index.scss create mode 100644 taier-ui/src/components/customParameter/index.tsx diff --git a/taier-ui/src/components/customParameter/index.scss b/taier-ui/src/components/customParameter/index.scss new file mode 100644 index 0000000000..86efb2edc1 --- /dev/null +++ b/taier-ui/src/components/customParameter/index.scss @@ -0,0 +1,23 @@ +.dtc-custom-parameter { + &__item { + margin-bottom: 24px; + } + &__gap { + margin-left: 2px; + margin-right: 6px; + } + &__add { + color: #3f87ff; + cursor: pointer; + } + &__delete { + margin-left: 8px; + color: #3f87ff; + font-size: 0; + cursor: pointer; + } + &__exist { + font-size: 12px; + color: #ff4d4f; + } +} diff --git a/taier-ui/src/components/customParameter/index.tsx b/taier-ui/src/components/customParameter/index.tsx new file mode 100644 index 0000000000..1922203729 --- /dev/null +++ b/taier-ui/src/components/customParameter/index.tsx @@ -0,0 +1,148 @@ +import React, { useEffect, useState } from 'react'; +import { PlusSquareOutlined, DeleteOutlined } from '@ant-design/icons'; +import { Input, Row, Col, Space } from 'antd'; + +import './index.scss'; + +interface IComponentType { + type: string; + Component: React.ComponentClass | React.FC; +} + +interface ICustomItem extends IComponentType { + label: string; + value: string; + status: boolean; +} + +export type ICustomValue = Omit; + +interface ICustomParameterProps { + existingKeys: string[]; + value?: Omit[]; + onChange?: (value: ICustomValue[]) => void; +} + +const DEFAULT_FORM_ITEM: IComponentType = { + type: 'INPUT', + Component: Input, +}; + +export default function CustomParameter({ existingKeys, value, onChange }: ICustomParameterProps) { + const [customParamRows, setCustomParamRows] = useState([]); + + const handleCustomParameterAdd = () => { + const customItem: ICustomItem = { + type: DEFAULT_FORM_ITEM.type, + Component: DEFAULT_FORM_ITEM.Component, + label: '', + value: '', + status: false, + }; + + setCustomParamRows([...customParamRows, customItem]); + }; + + const handleCustomParameterDelete = (index: number) => { + const paramRows = customParamRows.filter((_, i) => i !== index); + setCustomParamRows(paramRows); + onChange?.( + paramRows?.map((item) => ({ + label: item.label, + value: item.value, + type: item.type, + status: item.status, + })) + ); + }; + + const handleIsSame = (item: ICustomItem) => + existingKeys.includes(item.label) || customParamRows.filter((cIt) => cIt.label === item.label).length > 1; + + console.log(existingKeys) + + useEffect(() => { + setCustomParamRows( + value?.map((item) => { + return { + ...item, + Component: DEFAULT_FORM_ITEM.Component, + }; + }) || [] + ); + }, []); + + return ( +
+ {customParamRows.map((item, index) => ( + + + { + const params = customParamRows.map((item, i) => { + if (i === index) item.label = e.target.value; + return item; + }); + setCustomParamRows(params); + onChange?.( + params?.map((item) => ({ + label: item.label, + value: item.value, + type: item.type, + status: Boolean(item.label && item.value && !handleIsSame(item)), + })) + ); + }} + /> + : + + + { + const params = customParamRows.map((item, i) => { + if (i === index) item.value = e.target.value; + return item; + }); + setCustomParamRows(params); + onChange?.( + params?.map((item) => ({ + label: item.label, + value: item.value, + type: item.type, + status: Boolean(item.label && item.value && !handleIsSame(item)), + })) + ); + }} + /> + + +
+ + handleCustomParameterDelete(index)} + /> + {handleIsSame(item) ? ( + 已存在 + ) : null} + +
+ + + ))} + + + + {'添加自定义参数'} + + +
+ ); +} diff --git a/taier-ui/src/pages/console/cluster/detail/detail.tsx b/taier-ui/src/pages/console/cluster/detail/detail.tsx index 4a02770e43..4f4c19d252 100644 --- a/taier-ui/src/pages/console/cluster/detail/detail.tsx +++ b/taier-ui/src/pages/console/cluster/detail/detail.tsx @@ -28,6 +28,7 @@ import { RightOutlined, UploadOutlined, } from '@ant-design/icons'; +import CustomParameter, { ICustomValue } from '@/components/customParameter'; import { COMPONENT_TYPE_VALUE } from '@/constant'; import type { RcFile } from 'antd/lib/upload'; import type { IComponentProps } from '.'; @@ -37,6 +38,7 @@ const { Sider, Content } = Layout; const { Panel } = Collapse; interface IDetailProps { + form: any; templateData: ILayoutData[]; currentTreeNode?: IComponentProps; loading?: boolean; @@ -79,11 +81,12 @@ export interface ITemplateData { /** * XML 表示该值作为 config 渲染 */ - type: 'INPUT' | 'RADIO_LINKAGE' | 'CHECKBOX' | 'XML' | 'GROUP'; + type: 'INPUT' | 'RADIO_LINKAGE' | 'CHECKBOX' | 'XML' | 'GROUP' | 'CUSTOM'; value: string; } export default function Detail({ + form, loading, currentTreeNode, templateData = [], @@ -370,6 +373,23 @@ export default function Detail({ ); } )} + item.status) + ? Promise.resolve() + : Promise.reject('自定义字段名重复'); + }, + }, + ]} + > + + ); diff --git a/taier-ui/src/pages/console/cluster/detail/index.tsx b/taier-ui/src/pages/console/cluster/detail/index.tsx index e6aa983247..36db966213 100644 --- a/taier-ui/src/pages/console/cluster/detail/index.tsx +++ b/taier-ui/src/pages/console/cluster/detail/index.tsx @@ -399,8 +399,24 @@ export default function ClusterDetail() { // 上传配置文件所解析出来的配置项会放在 config 字段中，不存在于 values 里 const xmlConfig = form.getFieldValue('config'); - - const componentConfig = xmlConfig ? JSON.stringify(xmlConfig) : JSON.stringify(restValues); + let componentConfig: string; + const customParameters: Record = {}; + if (xmlConfig) { + componentConfig = JSON.stringify(xmlConfig); + } else { + const deploymode = restValues.deploymode; + deploymode?.forEach((item: string) => { + const key = [item, 'customParameters'].join('$'); + customParameters[item] = restValues[key]; + restValues[key]?.forEach((it: any) => { + restValues[item][it.key] = it.value; + }); + return {}; + }); + console.log(customParameters); + console.log(restValues); + componentConfig = JSON.stringify(restValues); + } try { setDetailLoading(true); @@ -415,6 +431,7 @@ export default function ClusterDetail() { principals, versionName: Array.isArray(versionName) ? versionName[versionName.length - 1] : versionName, componentConfig, + customParameters, deployType: currentComponent.deployType, clusterId: currentComponent.clusterId, componentCode: currentComponent.componentTypeCode, @@ -629,6 +646,7 @@ export default function ClusterDetail() { {selectedKey ? ( Date: Mon, 20 Nov 2023 13:51:10 +0800 Subject: [PATCH 2/3] ci: eslint import sort --- taier-ui/src/components/customParameter/index.scss | 4 ++++ taier-ui/src/components/customParameter/index.tsx | 6 +++--- taier-ui/src/pages/console/cluster/detail/detail.tsx | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/taier-ui/src/components/customParameter/index.scss b/taier-ui/src/components/customParameter/index.scss index 86efb2edc1..a664b61ca3 100644 --- a/taier-ui/src/components/customParameter/index.scss +++ b/taier-ui/src/components/customParameter/index.scss @@ -2,20 +2,24 @@ &__item { margin-bottom: 24px; } + &__gap { margin-left: 2px; margin-right: 6px; } + &__add { color: #3f87ff; cursor: pointer; } + &__delete { margin-left: 8px; color: #3f87ff; font-size: 0; cursor: pointer; } + &__exist { font-size: 12px; color: #ff4d4f; diff --git a/taier-ui/src/components/customParameter/index.tsx b/taier-ui/src/components/customParameter/index.tsx index 1922203729..80828ff2d7 100644 --- a/taier-ui/src/components/customParameter/index.tsx +++ b/taier-ui/src/components/customParameter/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import { PlusSquareOutlined, DeleteOutlined } from '@ant-design/icons'; -import { Input, Row, Col, Space } from 'antd'; +import { DeleteOutlined,PlusSquareOutlined } from '@ant-design/icons'; +import { Col, Input, Row, Space } from 'antd'; import './index.scss'; @@ -59,7 +59,7 @@ export default function CustomParameter({ existingKeys, value, onChange }: ICust const handleIsSame = (item: ICustomItem) => existingKeys.includes(item.label) || customParamRows.filter((cIt) => cIt.label === item.label).length > 1; - console.log(existingKeys) + console.log(existingKeys); useEffect(() => { setCustomParamRows( diff --git a/taier-ui/src/pages/console/cluster/detail/detail.tsx b/taier-ui/src/pages/console/cluster/detail/detail.tsx index 766db700ca..0c782a5a72 100644 --- a/taier-ui/src/pages/console/cluster/detail/detail.tsx +++ b/taier-ui/src/pages/console/cluster/detail/detail.tsx @@ -8,7 +8,6 @@ import { RightOutlined, UploadOutlined, } from '@ant-design/icons'; -import CustomParameter, { ICustomValue } from '@/components/customParameter'; import type { FormItemProps } from 'antd'; import { Button, @@ -30,6 +29,7 @@ import { import type { RcFile } from 'antd/lib/upload'; import api from '@/api'; +import CustomParameter, { ICustomValue } from '@/components/customParameter'; import { COMPONENT_TYPE_VALUE } from '@/constant'; import context from '@/context/cluster'; import type { IComponentProps } from '.'; From 5acc131f5a3c254572a3d3ab4c454b6eddb2aca7 Mon Sep 17 00:00:00 2001 From: jin-sir <942725119@qq.com> Date: Thu, 23 Nov 2023 20:36:19 +0800 Subject: [PATCH 3/3] fix: improve type && add comment && add custom label/value key --- .../src/components/customParameter/index.tsx | 51 +++++++++++++++++-- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/taier-ui/src/components/customParameter/index.tsx b/taier-ui/src/components/customParameter/index.tsx index 80828ff2d7..aa960fdd47 100644 --- a/taier-ui/src/components/customParameter/index.tsx +++ b/taier-ui/src/components/customParameter/index.tsx @@ -1,25 +1,59 @@ import React, { useEffect, useState } from 'react'; -import { DeleteOutlined,PlusSquareOutlined } from '@ant-design/icons'; +import { DeleteOutlined, PlusSquareOutlined } from '@ant-design/icons'; import { Col, Input, Row, Space } from 'antd'; import './index.scss'; interface IComponentType { + /** + * 自定义组件类型 + */ type: string; + /** + * 组件 + */ Component: React.ComponentClass | React.FC; } interface ICustomItem extends IComponentType { + /** + * 自定义参数名 + */ label: string; + /** + * 自定义参数值 + */ value: string; + /** + * 自定义参数是否合法 + */ status: boolean; } export type ICustomValue = Omit; interface ICustomParameterProps { + /** + * 自定义参数名-value对应的key名 + */ + labelKey?: string; + /** + * 自定义参数值-value对应的key名 + */ + valueKey?: string; + /** + * 已存在的keys + */ existingKeys: string[]; - value?: Omit[]; + /** + * 自定义参数列表 + */ + value?: Record[]; + /** + * 自定义参数改变触发函数 + * @param value + * @returns + */ onChange?: (value: ICustomValue[]) => void; } @@ -28,7 +62,13 @@ const DEFAULT_FORM_ITEM: IComponentType = { Component: Input, }; -export default function CustomParameter({ existingKeys, value, onChange }: ICustomParameterProps) { +export default function CustomParameter({ + labelKey = 'label', + valueKey = 'value', + existingKeys, + value, + onChange, +}: ICustomParameterProps) { const [customParamRows, setCustomParamRows] = useState([]); const handleCustomParameterAdd = () => { @@ -65,8 +105,11 @@ export default function CustomParameter({ existingKeys, value, onChange }: ICust setCustomParamRows( value?.map((item) => { return { - ...item, + type: item.type || DEFAULT_FORM_ITEM.type, + label: item[labelKey], + value: item[valueKey], Component: DEFAULT_FORM_ITEM.Component, + status: false, }; }) || [] );