From 0de7339e88b572e8cea8ef15b3368493859fdfcd Mon Sep 17 00:00:00 2001 From: Ugo Palatucci Date: Mon, 28 Nov 2022 10:52:12 +0100 Subject: [PATCH] blank vm name --- .../CustomizeForms/CustomizeForm.tsx | 3 +- .../CustomizeFormWithStorage.tsx | 3 +- src/views/catalog/customize/utils.ts | 6 + .../TemplatesCatalogDrawerCreateForm.tsx | 275 +++++++++--------- .../TemplatesCatalogDrawerFooter.tsx | 8 + .../TemplatesCatalogDrawer/utils.ts | 27 -- 6 files changed, 154 insertions(+), 168 deletions(-) delete mode 100644 src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/utils.ts diff --git a/src/views/catalog/customize/components/CustomizeForms/CustomizeForm.tsx b/src/views/catalog/customize/components/CustomizeForms/CustomizeForm.tsx index b8c9cdef5d..dc0ad9220a 100644 --- a/src/views/catalog/customize/components/CustomizeForms/CustomizeForm.tsx +++ b/src/views/catalog/customize/components/CustomizeForms/CustomizeForm.tsx @@ -1,6 +1,7 @@ import React, { FC, useMemo } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { getTemplateNameParameterValue } from '@catalog/customize/utils'; import { V1Template } from '@kubevirt-ui/kubevirt-api/console'; import { useURLParams } from '@kubevirt-utils/hooks/useURLParams'; import { Form } from '@patternfly/react-core'; @@ -25,7 +26,7 @@ export const CustomizeForm: FC = ({ template }) => { const [requiredFields, optionalFields] = buildFields(template); const { params } = useURLParams(); - const vmName = params.get('vmName'); + const vmName = params.get('vmName') || getTemplateNameParameterValue(template); const nameField = useMemo(() => getVirtualMachineNameField(vmName), [vmName]); diff --git a/src/views/catalog/customize/components/CustomizeForms/CustomizeFormWithStorage.tsx b/src/views/catalog/customize/components/CustomizeForms/CustomizeFormWithStorage.tsx index 18943a81e1..39489c26c7 100644 --- a/src/views/catalog/customize/components/CustomizeForms/CustomizeFormWithStorage.tsx +++ b/src/views/catalog/customize/components/CustomizeForms/CustomizeFormWithStorage.tsx @@ -1,6 +1,7 @@ import React, { FC, useMemo, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { getTemplateNameParameterValue } from '@catalog/customize/utils'; import { V1Template } from '@kubevirt-ui/kubevirt-api/console'; import { V1beta1DataVolumeSpec } from '@kubevirt-ui/kubevirt-api/kubevirt'; import { useURLParams } from '@kubevirt-utils/hooks/useURLParams'; @@ -37,7 +38,7 @@ const CustomizeFormWithStorage: FC = ({ }) => { const methods = useForm(); const { params } = useURLParams(); - const vmName = params.get('vmName'); + const vmName = params.get('vmName') || getTemplateNameParameterValue(template); const [diskSource, setDiskSource] = useState(); const [cdSource, setCDSource] = useState(); diff --git a/src/views/catalog/customize/utils.ts b/src/views/catalog/customize/utils.ts index f952b2d93a..ab9dafc47a 100644 --- a/src/views/catalog/customize/utils.ts +++ b/src/views/catalog/customize/utils.ts @@ -82,6 +82,12 @@ export const extractParameterNameFromMetadataName = (template: V1Template): stri return virtualMachineObject?.metadata.name?.replace(/[${}"]+/g, ''); }; +export const getTemplateNameParameterValue = (template: V1Template): string => { + const nameParameter = extractParameterNameFromMetadataName(template) || 'NAME'; + + return template?.parameters?.find((parameter) => parameter.name === nameParameter)?.value; +}; + export const processTemplate = async ({ template, namespace = DEFAULT_NAMESPACE, diff --git a/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx b/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx index 9721955ffe..dc4affef54 100644 --- a/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx +++ b/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { useHistory } from 'react-router-dom'; import produce from 'immer'; @@ -29,173 +29,170 @@ import { TextInput, } from '@patternfly/react-core'; -import { getVMName } from './utils'; - type TemplatesCatalogDrawerCreateFormProps = { namespace: string; template: V1Template; canQuickCreate: boolean; isBootSourceAvailable: boolean; onCancel: () => void; + initialVMName?: string; }; export const TemplatesCatalogDrawerCreateForm: React.FC = - React.memo(({ namespace, template, canQuickCreate, isBootSourceAvailable, onCancel }) => { - const history = useHistory(); - const { t } = useKubevirtTranslation(); + React.memo( + ({ namespace, template, canQuickCreate, isBootSourceAvailable, onCancel, initialVMName }) => { + const history = useHistory(); + const { t } = useKubevirtTranslation(); - const [vmName, setVMName] = React.useState(''); - const [startVM, setStartVM] = React.useState(true); - const [isQuickCreating, setIsQuickCreating] = React.useState(false); - const [quickCreateError, setQuickCreateError] = React.useState(undefined); - const [models, modelsLoading] = useK8sModels(); + const [vmName, setVMName] = React.useState(initialVMName || ''); + const [startVM, setStartVM] = React.useState(true); + const [isQuickCreating, setIsQuickCreating] = React.useState(false); + const [quickCreateError, setQuickCreateError] = React.useState(undefined); + const [models, modelsLoading] = useK8sModels(); - const [processedTemplateAccessReview] = useAccessReview({ - namespace, - resource: ProcessedTemplatesModel.plural, - verb: 'create', - }); - useEffect(() => { - getVMName(template, namespace).then(setVMName); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); // run only once when it's initially rendering + const [processedTemplateAccessReview] = useAccessReview({ + namespace, + resource: ProcessedTemplatesModel.plural, + verb: 'create', + }); - const onQuickCreate = () => { - setIsQuickCreating(true); - setQuickCreateError(undefined); + const onQuickCreate = () => { + setIsQuickCreating(true); + setQuickCreateError(undefined); - const parameterForName = extractParameterNameFromMetadataName(template); + const parameterForName = extractParameterNameFromMetadataName(template) || 'NAME'; - const templateToProcess = produce(template, (draftTemplate) => { - if (parameterForName) - replaceTemplateParameterValue(draftTemplate, parameterForName, vmName); - }); + const templateToProcess = produce(template, (draftTemplate) => { + if (parameterForName) + replaceTemplateParameterValue(draftTemplate, parameterForName, vmName); + }); - quickCreateVM({ - template: templateToProcess, - models, - overrides: { name: vmName, namespace, startVM }, - }) - .then((vm) => { - setIsQuickCreating(false); - history.push(getResourceUrl({ model: VirtualMachineModel, resource: vm })); + quickCreateVM({ + template: templateToProcess, + models, + overrides: { name: vmName, namespace, startVM }, }) - .catch((err) => { - setIsQuickCreating(false); - setQuickCreateError(err); - }); - }; + .then((vm) => { + setIsQuickCreating(false); + history.push(getResourceUrl({ model: VirtualMachineModel, resource: vm })); + }) + .catch((err) => { + setIsQuickCreating(false); + setQuickCreateError(err); + }); + }; - const onCustomize = (e) => { - e.preventDefault(); - let catalogUrl = `templatescatalog/customize?name=${template.metadata.name}&namespace=${template.metadata.namespace}&defaultSourceExists=${canQuickCreate}`; + const onCustomize = (e) => { + e.preventDefault(); + let catalogUrl = `templatescatalog/customize?name=${template.metadata.name}&namespace=${template.metadata.namespace}&defaultSourceExists=${canQuickCreate}`; - if (vmName) { - catalogUrl += `&vmName=${vmName}`; - } + if (vmName) { + catalogUrl += `&vmName=${vmName}`; + } - history.push(catalogUrl); - }; + history.push(catalogUrl); + }; - return ( -
- - {canQuickCreate ? ( - <> - - - - - + + {canQuickCreate ? ( + <> + + + + - - - - - - {t('Project')} - {namespace} - - - - + className="template-catalog-drawer-form-name" + fieldId="vm-name-field" + > + + + + + + + {t('Project')} + {namespace} + + + + + + + + setStartVM(v)} + label={t('Start this VirtualMachine after creation')} + /> + + + ) : ( + + {t( + 'This Template requires some additional parameters. Click the Customize VirtualMachine button to complete the creation flow.', + )} - + )} + + {quickCreateError && ( - setStartVM(v)} - label={t('Start this VirtualMachine after creation')} - /> + + {quickCreateError?.message} + - - ) : ( - - {t( - 'This Template requires some additional parameters. Click the Customize VirtualMachine button to complete the creation flow.', - )} - - )} - - {quickCreateError && ( - - - {quickCreateError.message} - - - )} + )} - - - {canQuickCreate && ( + + + {canQuickCreate && ( + + + + )} - )} - - - - - - - -
- ); - }); + + + + + ); + }, + ); TemplatesCatalogDrawerCreateForm.displayName = 'TemplatesCatalogDrawerCreateForm'; diff --git a/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerFooter.tsx b/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerFooter.tsx index 0635022511..78a2e03bfc 100644 --- a/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerFooter.tsx +++ b/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerFooter.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { V1Template } from '@kubevirt-ui/kubevirt-api/console'; import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation'; +import { + generateVMName, + getTemplateVirtualMachineObject, +} from '@kubevirt-utils/resources/template'; import { useProcessedTemplate, useVmTemplateSource, @@ -42,6 +46,9 @@ export const TemplatesCatalogDrawerFooter: React.FC; } + const initialVMName = + getTemplateVirtualMachineObject(processedTemplate)?.metadata?.name || generateVMName(template); + return (
@@ -71,6 +78,7 @@ export const TemplatesCatalogDrawerFooter: React.FC diff --git a/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/utils.ts b/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/utils.ts deleted file mode 100644 index 6b3dee7627..0000000000 --- a/src/views/catalog/templatescatalog/components/TemplatesCatalogDrawer/utils.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ProcessedTemplatesModel, V1Template } from '@kubevirt-ui/kubevirt-api/console'; -import { DEFAULT_NAMESPACE } from '@kubevirt-utils/constants/constants'; -import { generateVMName } from '@kubevirt-utils/resources/template'; -import { k8sCreate } from '@openshift-console/dynamic-plugin-sdk'; - -export const getVMName = async ( - template: V1Template, - namespace = DEFAULT_NAMESPACE, -): Promise => { - const templateToProcess: V1Template = { - ...template, - parameters: template.parameters.filter((parameter) => !parameter.required), - }; - - return await k8sCreate({ - model: ProcessedTemplatesModel, - data: { ...templateToProcess, metadata: { ...template?.metadata, namespace } }, - ns: namespace, - queryParams: { - dryRun: 'All', - }, - }).then( - (simpleProcessedTemplate) => - simpleProcessedTemplate?.parameters?.find((obj: { name: string }) => obj?.name === 'NAME') - ?.value || generateVMName(template), - ); -};