From 1d887406854d1ca6de4a06d8d4c16fdd2fcea458 Mon Sep 17 00:00:00 2001 From: Piyush Kumar <52462496+nxtCoder19@users.noreply.github.com> Date: Fri, 20 Dec 2024 14:03:24 +0530 Subject: [PATCH] update resource type of managed resource and default avatar in msvc listing (#340) --- .../backend-services-resources-V2.tsx | 19 +- .../handle-managed-resource.tsx | 38 +-- .../$msv+/new-managed-resource/_index.tsx | 223 +++++++++++++++--- 3 files changed, 221 insertions(+), 59 deletions(-) diff --git a/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx b/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx index ea2e58147..665ab2924 100644 --- a/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx +++ b/src/apps/console/routes/_main+/$account+/managed-services/backend-services-resources-V2.tsx @@ -3,6 +3,7 @@ import { toast } from '@kloudlite/design-system/molecule/toast'; import { generateKey, titleCase } from '@kloudlite/design-system/utils'; import { Link, useOutletContext, useParams } from '@remix-run/react'; import { useState } from 'react'; +import ConsoleAvatar from '~/console/components/console-avatar'; import { listClass, ListItem, @@ -235,13 +236,17 @@ const ListView = ({ items, templates, plugins, onAction }: IResource) => { title={name} subtitle={id} avatar={ -
- {name} -
+ logo || logoUrl ? ( +
+ {name} +
+ ) : ( + + ) } /> ), diff --git a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx index c485309f6..d07f6f4ff 100644 --- a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx +++ b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/managed-resources/handle-managed-resource.tsx @@ -1,34 +1,34 @@ /* eslint-disable guard-for-in */ /* eslint-disable react/destructuring-assignment */ -import { useOutletContext, useParams } from '@remix-run/react'; -import { useEffect, useRef, useState } from 'react'; import { NumberInput, TextInput } from '@kloudlite/design-system/atoms/input'; +import { Switch } from '@kloudlite/design-system/atoms/switch'; import Popup from '@kloudlite/design-system/molecule/popup'; +import { toast } from '@kloudlite/design-system/molecule/toast'; +import { useOutletContext, useParams } from '@remix-run/react'; +import { useEffect, useRef, useState } from 'react'; +import { CopyContentToClipboard } from '~/console/components/common-console-components'; +import { ListItem } from '~/console/components/console-list-components'; +import ListV2 from '~/console/components/listV2'; +import { LoadingPlaceHolder } from '~/console/components/loading'; +import MultiStep, { useMultiStep } from '~/console/components/multi-step'; +import { NameIdView } from '~/console/components/name-id-view'; import { IDialogBase } from '~/console/components/types.d'; +import { IEnvironmentContext } from '~/console/routes/_main+/$account+/env+/$environment+/_layout'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { ExtractNodeType, parseName } from '~/console/server/r-utils/common'; -import { useReload } from '~/lib/client/helpers/reloader'; -import useForm, { dummyEvent } from '~/lib/client/hooks/use-form'; -import Yup from '~/lib/server/helpers/yup'; -import { NN } from '~/lib/types/common'; -import { handleError } from '~/lib/utils/common'; +import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries'; import { IMSvTemplate, IMSvTemplates, } from '~/console/server/gql/queries/managed-templates-queries'; -import { Switch } from '@kloudlite/design-system/atoms/switch'; +import { ExtractNodeType, parseName } from '~/console/server/r-utils/common'; +import { ensureAccountClientSide } from '~/console/server/utils/auth-utils'; import { getManagedTemplate } from '~/console/utils/commons'; -import { NameIdView } from '~/console/components/name-id-view'; -import { IManagedResources } from '~/console/server/gql/queries/managed-resources-queries'; +import { useReload } from '~/lib/client/helpers/reloader'; import useCustomSwr from '~/lib/client/hooks/use-custom-swr'; -import { toast } from '@kloudlite/design-system/molecule/toast'; -import MultiStep, { useMultiStep } from '~/console/components/multi-step'; -import ListV2 from '~/console/components/listV2'; -import { ListItem } from '~/console/components/console-list-components'; -import { CopyContentToClipboard } from '~/console/components/common-console-components'; -import { LoadingPlaceHolder } from '~/console/components/loading'; -import { IEnvironmentContext } from '~/console/routes/_main+/$account+/env+/$environment+/_layout'; -import { ensureAccountClientSide } from '~/console/server/utils/auth-utils'; +import useForm, { dummyEvent } from '~/lib/client/hooks/use-form'; +import Yup from '~/lib/server/helpers/yup'; +import { NN } from '~/lib/types/common'; +import { handleError } from '~/lib/utils/common'; type BaseType = ExtractNodeType; type IDialog = IDialogBase & { diff --git a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/new-managed-resource/_index.tsx b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/new-managed-resource/_index.tsx index 284cac093..80f115ae0 100644 --- a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/new-managed-resource/_index.tsx +++ b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/new-managed-resource/_index.tsx @@ -24,14 +24,17 @@ import { IAccountContext } from '~/console/routes/_main+/$account+/_layout'; import { IManagedServiceContext } from '~/console/routes/_main+/$account+/msvc+/$msv+/_layout'; import { useConsoleApi } from '~/console/server/gql/api-provider'; import { IClusterMSvs } from '~/console/server/gql/queries/cluster-managed-services-queries'; -import { IMSvTemplate } from '~/console/server/gql/queries/managed-templates-queries'; +import { + IMSvPlugin, + IMSvTemplate, +} from '~/console/server/gql/queries/managed-templates-queries'; import { GQLServerHandler } from '~/console/server/gql/saved-queries'; import { ExtractNodeType, parseName, parseNodes, } from '~/console/server/r-utils/common'; -import { getManagedTemplate } from '~/console/utils/commons'; +import { getManagedPlugin, getManagedTemplate } from '~/console/utils/commons'; import useForm, { dummyEvent } from '~/lib/client/hooks/use-form'; import Yup from '~/lib/server/helpers/yup'; import { IRemixCtx } from '~/lib/types/common'; @@ -57,6 +60,21 @@ export const loader = (ctx: IRemixCtx) => { return defer({ promise }); }; +// const valueEditorProps = { +// height: '200px', +// options: { +// fontSize: 14, +// padding: { +// top: 20, +// bottom: 20, +// }, +// tabSize: 2, +// minimap: { +// enabled: false, +// }, +// }, +// }; + const RenderField = ({ field, value, @@ -64,14 +82,15 @@ const RenderField = ({ error, message, }: { - field: IMSvTemplate['fields'][number]; + // field: IMSvTemplate['fields'][number]; + field: IMSvPlugin['spec']['services'][0]['inputs'][number]; onChange: (e: string) => (e: { target: { value: any } }) => void; value: any; error: boolean; message?: string; }) => { const [qos, setQos] = useState(false); - if (field.inputType === 'Number') { + if (field.type === 'Number') { return ( { - onChange(`res.${field.name}`)( + onChange(`res.${field.input}`)( dummyEvent( `${parseFloat(target.value) * (field.multiplier || 1)}${ field.unit @@ -95,17 +114,102 @@ const RenderField = ({ ); } - if (field.inputType === 'String') { + if (field.type === 'String') { return ( ); } - if (field.inputType === 'Resource') { + + // if (field.type === 'text/yaml') { + // const v = typeof value === 'string' ? value : JSON.stringify(value); + // return ( + //
+ //
{field.label}
+ // { + // onChange(`res.${field.input}`)(dummyEvent(e)); + // }} + // path={field.input} + // /> + //
+ // ); + // } + + // if (field.type === 'int-range') { + // return ( + //
+ //
{`${field.label}${ + // field.required ? ' *' : '' + // }`}
+ //
+ //
+ //
+ // { + // onChange(`res.${field.input}.min`)( + // dummyEvent( + // `${parseFloat(target.value) * (field.multiplier || 1)}${ + // field.unit + // }` + // ) + // ); + // if (qos) { + // onChange(`res.${field.input}.max`)( + // dummyEvent( + // `${parseFloat(target.value) * (field.multiplier || 1)}${ + // field.unit + // }` + // ) + // ); + // } + // }} + // suffix={field.displayUnit} + // /> + //
+ + //
+ // { + // onChange(`res.${field.input}.max`)( + // dummyEvent( + // `${parseFloat(target.value) * (field.multiplier || 1)}${ + // field.unit + // }` + // ) + // ); + // }} + // suffix={field.displayUnit} + // /> + //
+ //
+ //
+ //
+ // ); + // } + + if (field.type === 'Resource') { return (
{`${field.label}${ @@ -122,7 +226,7 @@ const RenderField = ({ placeholder={qos ? field.label : `${field.label} min`} value={parseFloat(value.min) / (field.multiplier || 1) || ''} onChange={({ target }) => { - onChange(`res.${field.name}.min`)( + onChange(`res.${field.input}.min`)( dummyEvent( `${parseFloat(target.value) * (field.multiplier || 1)}${ field.unit @@ -130,7 +234,7 @@ const RenderField = ({ ) ); if (qos) { - onChange(`res.${field.name}.max`)( + onChange(`res.${field.input}.max`)( dummyEvent( `${parseFloat(target.value) * (field.multiplier || 1)}${ field.unit @@ -152,7 +256,7 @@ const RenderField = ({ placeholder={`${field.label} max`} value={parseFloat(value.max) / (field.multiplier || 1)} onChange={({ target }) => { - onChange(`res.${field.name}.max`)( + onChange(`res.${field.input}.max`)( dummyEvent( `${parseFloat(target.value) * (field.multiplier || 1)}${ field.unit @@ -172,7 +276,9 @@ const RenderField = ({ onChange={(_value) => { setQos(_value); if (_value) { - onChange(`res.${field.name}.max`)(dummyEvent(`${value.min}`)); + onChange(`res.${field.input}.max`)( + dummyEvent(`${value.min}`) + ); } }} /> @@ -181,7 +287,8 @@ const RenderField = ({
); } - return
unknown input type {field.inputType}
; + // return
unknown input type {field.type}
; + return null; }; const flatM = (obj: Record) => { @@ -215,18 +322,24 @@ const flatM = (obj: Record) => { type ISelectedResource = { label: string; value: string; - resource: IMSvTemplate['resources'][number]; + // resource: IMSvTemplate['resources'][number]; + pluginService: IMSvPlugin['spec']; }; interface ITemplateView { handleSubmit: FormEventHandler; values: Record; errors: Record; - resources: { + resources1?: { label: string; value: string; resource: ExtractNodeType['resources'][number]; }[]; + resources: { + label: string; + value: string; + pluginService: ExtractNodeType['spec']['services'][0]['resources'][number]; + }[]; services: ExtractNodeType[]; isLoading: boolean; handleChange: (key: string) => (e: { target: { value: any } }) => void; @@ -303,8 +416,8 @@ const FieldView = ({ handleChange={handleChange} nameErrorLabel="isNameError" /> - {selectedResource?.resource?.fields?.map((field) => { - const k = field.name; + {selectedResource?.pluginService?.services[0].inputs?.map((field) => { + const k = field.input; const x = k.split('.').reduce((acc, curr) => { if (!acc) { return values.res?.[curr]; @@ -315,7 +428,7 @@ const FieldView = ({ return (
- {selectedResource?.resource?.name} + {/* {selectedResource?.resource?.name} */} + {selectedResource?.pluginService.services[0].kind}
)} - {renderFieldView()} + {/* {renderFieldView()} */} [] }) => { - const { msvtemplates } = useOutletContext(); + const { msvtemplates, msvPlugins } = useOutletContext(); const navigate = useNavigate(); const api = useConsoleApi(); @@ -464,20 +578,49 @@ const App = ({ services }: { services: ExtractNodeType[] }) => { }); }, [managedService, msvtemplates]); + const commonPlugin = useCallback(() => { + return getManagedPlugin({ + plugins: msvPlugins || [], + kind: managedService?.spec?.msvcSpec.serviceTemplate?.kind || '', + apiVersion: + managedService?.spec?.msvcSpec.serviceTemplate?.apiVersion || '', + }); + }, [managedService, msvPlugins]); + const { values, errors, handleSubmit, handleChange, isLoading, setValues } = useForm({ initialValues: { name: '', displayName: '', + // selectedResource: (() => { + // const ct = commonTemplates()?.resources; + // if (ct && ct.length === 1) { + // return { + // label: ct[0].displayName || '', + // value: ct[0].name || '', + // resource: ct[0], + // }; + // } + // return null; + // })(), selectedResource: (() => { - const ct = commonTemplates()?.resources; - if (ct && ct.length === 1) { + const ct = commonPlugin()?.spec; + console.log('ct', ct); + if (ct) { + console.log('ct+++', ct); return { - label: ct[0].displayName || '', - value: ct[0].name || '', - resource: ct[0], + label: ct.services[0].resources[0].kind || '', + value: ct.services[0].resources[0].kind || '', + pluginService: ct, }; } + // if (ct && ct.length === 1) { + // return { + // label: ct[0].label || '', + // value: ct[0].input || '', + // pluginService: ct[0], + // }; + // } return null; })(), res: {}, @@ -517,8 +660,10 @@ const App = ({ services }: { services: ExtractNodeType[] }) => { spec: { resourceTemplate: { - apiVersion: selectedResource.resource.apiVersion || '', - kind: selectedResource.resource.kind || '', + // apiVersion: selectedResource.resource.apiVersion || '', + // kind: selectedResource.resource.kind || '', + apiVersion: selectedResource.pluginService.apiVersion || '', + kind: selectedResource.pluginService.services[0].kind || '', spec: { ...val.res, }, @@ -564,21 +709,24 @@ const App = ({ services }: { services: ExtractNodeType[] }) => { useEffect(() => { const selectedResource = values?.selectedResource as unknown as ISelectedResource; - if (selectedResource?.resource?.fields) { + if (selectedResource?.pluginService.services[0].inputs) { setValues({ ...values, res: { ...flatM( - selectedResource?.resource?.fields.reduce((acc, curr) => { - return { ...acc, [curr.name]: curr.defaultValue }; - }, {}) + selectedResource?.pluginService.services[0].inputs.reduce( + (acc, curr) => { + return { ...acc, [curr.input]: curr.defaultValue }; + }, + {} + ) ), }, }); } }, [values.selectedResource]); - const resources = useMapper( + const resources1 = useMapper( [...(commonTemplates()?.resources || [])], (res) => ({ label: res.displayName, @@ -587,6 +735,15 @@ const App = ({ services }: { services: ExtractNodeType[] }) => { }) ); + const resources = useMapper( + commonPlugin()?.spec?.services[0].resources || [], + (res) => ({ + label: res.kind, + value: res.kind, + pluginService: res, + }) + ); + return (