From 5e9bbc5f150581c9541a00ff7272b9bad689c4a3 Mon Sep 17 00:00:00 2001 From: yangon <2689991790@qq.com> Date: Mon, 17 Jun 2024 14:18:20 +0800 Subject: [PATCH] obproxy management (#451) --- ui/src/api/generated/api.ts | 199 ++++++++++--- ui/src/components/CustomFormItem/index.tsx | 33 +++ ui/src/components/InputLabelComp/index.tsx | 14 +- 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/i18n/strings/zh-CN.json | 38 ++- ui/src/pages/Cluster/New/BasicInfo.tsx | 12 +- ui/src/pages/Cluster/New/Observer.tsx | 64 ++--- ui/src/pages/OBProxy/ClusterList.tsx | 4 +- .../OBProxy/Detail/Overview/ConfigDrawer.tsx | 266 ++++++++++++++++++ .../OBProxy/Detail/Overview/DetailConfig.tsx | 45 +-- ui/src/pages/OBProxy/New/BasicConfig.tsx | 83 ++++-- ui/src/pages/OBProxy/New/DetailConfig.tsx | 147 ++++++++++ ui/src/pages/OBProxy/New/index.less | 4 + ui/src/pages/OBProxy/New/index.tsx | 44 ++- ui/src/pages/OBProxy/helper.ts | 26 ++ ui/src/type/obproxy.d.ts | 13 + ui/src/type/typings.d.ts | 1 + 20 files changed, 893 insertions(+), 150 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 create mode 100644 ui/src/pages/OBProxy/helper.ts create mode 100644 ui/src/type/obproxy.d.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 new file mode 100644 index 000000000..f70223428 --- /dev/null +++ b/ui/src/components/CustomFormItem/index.tsx @@ -0,0 +1,33 @@ +import { intl } from '@/utils/intl'; +import type { FormItemProps } from 'antd'; +import { Form } from 'antd'; + +export const CustomFormItem = (prop: FormItemProps & { message?: string }) => { + const { label, message } = prop; + return ( + + {prop.children} + + ); +}; diff --git a/ui/src/components/InputLabelComp/index.tsx b/ui/src/components/InputLabelComp/index.tsx index ba6949ea3..9177e6516 100644 --- a/ui/src/components/InputLabelComp/index.tsx +++ b/ui/src/components/InputLabelComp/index.tsx @@ -13,6 +13,8 @@ interface InputLabelCompPorps { maxLength?: number; defaulLabelName?: string; regex?: boolean; + disable?: boolean; + allowDelete?: boolean; } export default function InputLabelComp(props: InputLabelCompPorps) { @@ -23,6 +25,8 @@ export default function InputLabelComp(props: InputLabelCompPorps) { onBlur, defaulLabelName = 'key', regex, + disable = false, + allowDelete = true, } = props; const labelNameInput = (value: string, index: number) => { @@ -54,8 +58,9 @@ export default function InputLabelComp(props: InputLabelCompPorps) { {labels?.map((label, index) => ( - + labelNameInput(e.target.value, index)} @@ -65,8 +70,9 @@ export default function InputLabelComp(props: InputLabelCompPorps) { })} /> - + labelValueInput(e.target.value, index)} @@ -92,7 +98,7 @@ export default function InputLabelComp(props: InputLabelCompPorps) { )} - {labels.length > 1 && ( + {labels.length > 1 && allowDelete && ( - {!maxLength || labels.length < maxLength ? ( + {(!maxLength || labels.length < maxLength) && !disable ? ( + + + )} + + + + ); +} diff --git a/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx b/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx index a58af682e..7c83c0d38 100644 --- a/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx +++ b/ui/src/pages/OBProxy/Detail/Overview/DetailConfig.tsx @@ -1,26 +1,17 @@ -import type { CommonKVPair, CommonResourceSpec } from '@/api/generated'; +import InputLabelComp from '@/components/InputLabelComp'; +import { OBProxy } from '@/type/obproxy'; import { intl } from '@/utils/intl'; import { Button, Card, Col, Row } from 'antd'; - -interface DetailConfigProps { - name?: string; - namespace?: string; - image?: string; - parameters?: CommonKVPair[]; - resource?: CommonResourceSpec; - serviceType?: string; - replicas?: number; +import { useState } from 'react'; +import ConfigDrawer from './ConfigDrawer'; +interface DetailConfigProps extends OBProxy.CommonProxyDetail { style?: React.CSSProperties; } -export default function DetailConfig({ - image, - parameters, - resource, - serviceType, - replicas, - style, -}: DetailConfigProps) { +export default function DetailConfig({ style, ...props }: DetailConfigProps) { + const { image, serviceType, replicas, resource, parameters } = props; + + const [drawerOpen, setDrawerOpen] = useState(false); return ( } extra={ -