From c7d0d9bed9711a9f8b80bdd67ff8fd9e0babfcbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=B4=E6=99=96?= <2689991790@qq.com> Date: Fri, 14 Jun 2024 16:56:31 +0800 Subject: [PATCH] Support editing parameters --- ui/src/api/generated/api.ts | 199 +++++++++++++++--- ui/src/components/CustomFormItem/index.tsx | 20 +- ui/src/components/InputLabelComp/index.tsx | 4 +- .../OBProxy/Detail/Overview/ConfigDrawer.tsx | 135 ++++++++++-- .../OBProxy/Detail/Overview/DetailConfig.tsx | 20 +- ui/src/pages/OBProxy/helper.ts | 17 ++ 6 files changed, 321 insertions(+), 74 deletions(-) create mode 100644 ui/src/pages/OBProxy/helper.ts diff --git a/ui/src/api/generated/api.ts b/ui/src/api/generated/api.ts index b2830f146..e6329dba5 100644 --- a/ui/src/api/generated/api.ts +++ b/ui/src/api/generated/api.ts @@ -990,6 +990,31 @@ export interface ListOBProxies200Response { */ 'successful': boolean; } +/** + * + * @export + * @interface ListOBProxyParameters200Response + */ +export interface ListOBProxyParameters200Response { + /** + * + * @type {Array} + * @memberof ListOBProxyParameters200Response + */ + 'data': Array; + /** + * + * @type {string} + * @memberof ListOBProxyParameters200Response + */ + 'message': string; + /** + * + * @type {boolean} + * @memberof ListOBProxyParameters200Response + */ + 'successful': boolean; +} /** * * @export @@ -1796,6 +1821,43 @@ export interface ModelsStorageSpec { */ 'storageSize'?: number; } +/** + * + * @export + * @interface ObproxyConfigItem + */ +export interface ObproxyConfigItem { + /** + * + * @type {string} + * @memberof ObproxyConfigItem + */ + 'info'?: string; + /** + * + * @type {string} + * @memberof ObproxyConfigItem + */ + 'name'?: string; + /** + * + * @type {boolean} + * @memberof ObproxyConfigItem + */ + 'needReboot'?: boolean; + /** + * + * @type {string} + * @memberof ObproxyConfigItem + */ + 'value'?: string; + /** + * + * @type {string} + * @memberof ObproxyConfigItem + */ + 'visibleLevel'?: string; +} /** * * @export @@ -2052,22 +2114,16 @@ export interface ObproxyOBProxyOverview { export interface ObproxyPatchOBProxyParam { /** * - * @type {Array} - * @memberof ObproxyPatchOBProxyParam - */ - 'addedParameters'?: Array; - /** - * - * @type {Array} + * @type {string} * @memberof ObproxyPatchOBProxyParam */ - 'deletedParameters'?: Array; + 'image'?: string; /** * - * @type {string} + * @type {Array} * @memberof ObproxyPatchOBProxyParam */ - 'image'?: string; + 'parameters'?: Array; /** * * @type {number} @@ -5043,51 +5099,51 @@ export interface ResponseStorageSpec { /** * * @export - * @interface RouteRoute + * @interface RouteRouteParam */ -export interface RouteRoute { +export interface RouteRouteParam { /** * * @type {Array} - * @memberof RouteRoute + * @memberof RouteRouteParam */ 'aggregateLabels': Array; /** * * @type {number} - * @memberof RouteRoute + * @memberof RouteRouteParam */ 'groupInterval': number; /** * * @type {number} - * @memberof RouteRoute + * @memberof RouteRouteParam */ 'groupWait': number; + /** + * + * @type {string} + * @memberof RouteRouteParam + */ + 'id'?: string; /** * * @type {Array} - * @memberof RouteRoute + * @memberof RouteRouteParam */ 'matchers': Array; /** * * @type {string} - * @memberof RouteRoute + * @memberof RouteRouteParam */ 'receiver': string; /** * * @type {number} - * @memberof RouteRoute + * @memberof RouteRouteParam */ 'repeatInterval': number; - /** - * - * @type {string} - * @memberof RouteRoute - */ - 'id'?: string; } /** * @@ -5592,11 +5648,11 @@ export const AlarmApiAxiosParamCreator = function (configuration?: Configuration /** * Create or update alarm route. * @summary Create or update alarm route - * @param {RouteRoute} body route + * @param {RouteRouteParam} body route * @param {*} [options] Override http request option. * @throws {RequiredError} */ - createOrUpdateRoute: async (body: RouteRoute, options: RawAxiosRequestConfig = {}): Promise => { + createOrUpdateRoute: async (body: RouteRouteParam, options: RawAxiosRequestConfig = {}): Promise => { // verify required parameter 'body' is not null or undefined assertParamExists('createOrUpdateRoute', 'body', body) const localVarPath = `/api/v1/alarm/route/routes`; @@ -6275,11 +6331,11 @@ export const AlarmApiFp = function(configuration?: Configuration) { /** * Create or update alarm route. * @summary Create or update alarm route - * @param {RouteRoute} body route + * @param {RouteRouteParam} body route * @param {*} [options] Override http request option. * @throws {RequiredError} */ - async createOrUpdateRoute(body: RouteRoute, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { + async createOrUpdateRoute(body: RouteRouteParam, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { const localVarAxiosArgs = await localVarAxiosParamCreator.createOrUpdateRoute(body, options); const localVarOperationServerIndex = configuration?.serverIndex ?? 0; const localVarOperationServerBasePath = operationServerMap['AlarmApi.createOrUpdateRoute']?.[localVarOperationServerIndex]?.url; @@ -6526,11 +6582,11 @@ export const AlarmApiFactory = function (configuration?: Configuration, basePath /** * Create or update alarm route. * @summary Create or update alarm route - * @param {RouteRoute} body route + * @param {RouteRouteParam} body route * @param {*} [options] Override http request option. * @throws {RequiredError} */ - createOrUpdateRoute(body: RouteRoute, options?: any): AxiosPromise { + createOrUpdateRoute(body: RouteRouteParam, options?: any): AxiosPromise { return localVarFp.createOrUpdateRoute(body, options).then((request) => request(axios, basePath)); }, /** @@ -6725,12 +6781,12 @@ export class AlarmApi extends BaseAPI { /** * Create or update alarm route. * @summary Create or update alarm route - * @param {RouteRoute} body route + * @param {RouteRouteParam} body route * @param {*} [options] Override http request option. * @throws {RequiredError} * @memberof AlarmApi */ - public createOrUpdateRoute(body: RouteRoute, options?: RawAxiosRequestConfig) { + public createOrUpdateRoute(body: RouteRouteParam, options?: RawAxiosRequestConfig) { return AlarmApiFp(this.configuration).createOrUpdateRoute(body, options).then((request) => request(this.axios, this.basePath)); } @@ -7347,7 +7403,8 @@ export class ClusterApi extends BaseAPI { export const ListK8sEventsObjectTypeEnum = { OBCLUSTER: 'OBCLUSTER', OBTENANT: 'OBTENANT', - OBBACKUPPOLICY: 'OBBACKUPPOLICY' + OBBACKUPPOLICY: 'OBBACKUPPOLICY', + OBPROXY: 'OBPROXY' } as const; export type ListK8sEventsObjectTypeEnum = typeof ListK8sEventsObjectTypeEnum[keyof typeof ListK8sEventsObjectTypeEnum]; /** @@ -8791,6 +8848,44 @@ export const OBProxyApiAxiosParamCreator = function (configuration?: Configurati + setSearchParams(localVarUrlObj, localVarQueryParameter); + let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {}; + localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers}; + + return { + url: toPathString(localVarUrlObj), + options: localVarRequestOptions, + }; + }, + /** + * List OBProxy Parameters by namespace and name + * @summary List OBProxy Parameters + * @param {string} namespace namespace of obproxy deployment + * @param {string} name name of obproxy deployment + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + listOBProxyParameters: async (namespace: string, name: string, options: RawAxiosRequestConfig = {}): Promise => { + // verify required parameter 'namespace' is not null or undefined + assertParamExists('listOBProxyParameters', 'namespace', namespace) + // verify required parameter 'name' is not null or undefined + assertParamExists('listOBProxyParameters', 'name', name) + const localVarPath = `/api/v1/obproxies/{namespace}/{name}/parameters` + .replace(`{${"namespace"}}`, encodeURIComponent(String(namespace))) + .replace(`{${"name"}}`, encodeURIComponent(String(name))); + // use dummy base URL string because the URL constructor only accepts absolute URLs. + const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL); + let baseOptions; + if (configuration) { + baseOptions = configuration.baseOptions; + } + + const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options}; + const localVarHeaderParameter = {} as any; + const localVarQueryParameter = {} as any; + + + setSearchParams(localVarUrlObj, localVarQueryParameter); let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {}; localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers}; @@ -8911,6 +9006,20 @@ export const OBProxyApiFp = function(configuration?: Configuration) { const localVarOperationServerBasePath = operationServerMap['OBProxyApi.listOBProxies']?.[localVarOperationServerIndex]?.url; return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath); }, + /** + * List OBProxy Parameters by namespace and name + * @summary List OBProxy Parameters + * @param {string} namespace namespace of obproxy deployment + * @param {string} name name of obproxy deployment + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + async listOBProxyParameters(namespace: string, name: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { + const localVarAxiosArgs = await localVarAxiosParamCreator.listOBProxyParameters(namespace, name, options); + const localVarOperationServerIndex = configuration?.serverIndex ?? 0; + const localVarOperationServerBasePath = operationServerMap['OBProxyApi.listOBProxyParameters']?.[localVarOperationServerIndex]?.url; + return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath); + }, /** * Patch OBProxy with the specified parameters * @summary Patch OBProxy @@ -8978,6 +9087,17 @@ export const OBProxyApiFactory = function (configuration?: Configuration, basePa listOBProxies(ns?: string, options?: any): AxiosPromise { return localVarFp.listOBProxies(ns, options).then((request) => request(axios, basePath)); }, + /** + * List OBProxy Parameters by namespace and name + * @summary List OBProxy Parameters + * @param {string} namespace namespace of obproxy deployment + * @param {string} name name of obproxy deployment + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + listOBProxyParameters(namespace: string, name: string, options?: any): AxiosPromise { + return localVarFp.listOBProxyParameters(namespace, name, options).then((request) => request(axios, basePath)); + }, /** * Patch OBProxy with the specified parameters * @summary Patch OBProxy @@ -9050,6 +9170,19 @@ export class OBProxyApi extends BaseAPI { return OBProxyApiFp(this.configuration).listOBProxies(ns, options).then((request) => request(this.axios, this.basePath)); } + /** + * List OBProxy Parameters by namespace and name + * @summary List OBProxy Parameters + * @param {string} namespace namespace of obproxy deployment + * @param {string} name name of obproxy deployment + * @param {*} [options] Override http request option. + * @throws {RequiredError} + * @memberof OBProxyApi + */ + public listOBProxyParameters(namespace: string, name: string, options?: RawAxiosRequestConfig) { + return OBProxyApiFp(this.configuration).listOBProxyParameters(namespace, name, options).then((request) => request(this.axios, this.basePath)); + } + /** * Patch OBProxy with the specified parameters * @summary Patch OBProxy diff --git a/ui/src/components/CustomFormItem/index.tsx b/ui/src/components/CustomFormItem/index.tsx index ddf1a4811..e3799fd23 100644 --- a/ui/src/components/CustomFormItem/index.tsx +++ b/ui/src/components/CustomFormItem/index.tsx @@ -1,7 +1,8 @@ import { intl } from '@/utils/intl'; +import type { FormItemProps } from 'antd'; import { Form } from 'antd'; -export const CustomFormItem = (prop: any) => { +export const CustomFormItem = (prop: FormItemProps & { message: string }) => { const { label, message } = prop; return ( { { required: true, message: - message || - intl.formatMessage( - { - id: 'Dashboard.Cluster.New.Observer.EnterLabel', - defaultMessage: '请输入{{label}}', - }, - { label: label }, - ), + message || typeof label === 'string' + ? intl.formatMessage( + { + id: 'Dashboard.Cluster.New.Observer.EnterLabel', + defaultMessage: '请输入{{label}}', + }, + { label: label as string }, + ) + : '请输入', }, ]} > diff --git a/ui/src/components/InputLabelComp/index.tsx b/ui/src/components/InputLabelComp/index.tsx index e6b7eff06..9177e6516 100644 --- a/ui/src/components/InputLabelComp/index.tsx +++ b/ui/src/components/InputLabelComp/index.tsx @@ -14,6 +14,7 @@ interface InputLabelCompPorps { defaulLabelName?: string; regex?: boolean; disable?: boolean; + allowDelete?: boolean; } export default function InputLabelComp(props: InputLabelCompPorps) { @@ -25,6 +26,7 @@ export default function InputLabelComp(props: InputLabelCompPorps) { defaulLabelName = 'key', regex, disable = false, + allowDelete = true, } = props; const labelNameInput = (value: string, index: number) => { @@ -96,7 +98,7 @@ export default function InputLabelComp(props: InputLabelCompPorps) { )} - {labels.length > 1 && ( + {labels.length > 1 && allowDelete && ( void; - name?: string; - namespace?: string; + name: string; + namespace: string; image?: string; parameters?: CommonKVPair[]; resource?: CommonResourceSpec; @@ -22,9 +34,11 @@ interface ConfigDrawerProps extends DrawerProps { } type FormValue = { - parameters: { key: string; value: string }[]; + parameters?: { key: string; value: string }[]; } & ObproxyPatchOBProxyParam; +const { Text } = Typography; + export default function ConfigDrawer({ onClose, name, @@ -32,26 +46,40 @@ export default function ConfigDrawer({ ...props }: ConfigDrawerProps) { const [form] = Form.useForm(); + const preParameters = useRef(); + const { data: listParametersRes } = useRequest( + obproxy.listOBProxyParameters, + { + defaultParams: [namespace, name], + }, + ); + const listParametersOptions = listParametersRes?.data.map((item) => ({ + label: item.name, + value: item.name, + info: item.info, + })); + const submit = (values: FormValue) => { - if (namespace && name) obproxy.patchOBProxy(namespace, name, values); - }; - const Footer = () => { - return ( -
- - - - -
- ); + if ( + !isDifferentParams(values.parameters || [], preParameters.current || []) + ) { + delete values.parameters; + } }; const titleStyle = { fontSize: 14, fontWeight: 600 }; + + const labelChange = (label: string, name: number) => { + const value = listParametersRes?.data?.find( + (parameter) => parameter.name === label, + )?.value; + value && form.setFieldValue(['parameters', name, 'value'], value); + }; + useEffect(() => { + preParameters.current = props.parameters; + }, [props.parameters]); return ( } onSubmit={() => form.submit()} destroyOnClose={true} onClose={() => onClose()} @@ -106,9 +134,72 @@ export default function ConfigDrawer({

参数设置

- - - + + {(fields, { add, remove }) => ( + <> + {fields.map(({ name }) => ( + + + + + + + + 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={ -