Skip to content

Commit

Permalink
blank vm name
Browse files Browse the repository at this point in the history
  • Loading branch information
@upalatucci
upalatucci committed Nov 29, 2022
1 parent 3f7f88d commit 0de7339
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 168 deletions.
3 changes: 2 additions & 1 deletion src/views/catalog/customize/components/CustomizeForms/CustomizeForm.tsx
View file
@@ -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';
Expand All @@ -25,7 +26,7 @@ export const CustomizeForm: FC<CustomizeFormProps> = ({ 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]);

Expand Down
3 changes: 2 additions & 1 deletion src/views/catalog/customize/components/CustomizeForms/CustomizeFormWithStorage.tsx
View file
@@ -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';
Expand Down Expand Up @@ -37,7 +38,7 @@ const CustomizeFormWithStorage: FC<CustomizeFormWithStorageProps> = ({
}) => {
const methods = useForm();
const { params } = useURLParams();
const vmName = params.get('vmName');
const vmName = params.get('vmName') || getTemplateNameParameterValue(template);

const [diskSource, setDiskSource] = useState<V1beta1DataVolumeSpec>();
const [cdSource, setCDSource] = useState<V1beta1DataVolumeSpec>();
Expand Down
6 changes: 6 additions & 0 deletions src/views/catalog/customize/utils.ts
View file
Expand Up @@ -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,
Expand Down
275 changes: 136 additions & 139 deletions ...g/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx
View file
@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import { useHistory } from 'react-router-dom';
import produce from 'immer';

Expand Down Expand Up @@ -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<TemplatesCatalogDrawerCreateFormProps> =
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 (
<form className="template-catalog-drawer-form" id="quick-create-form">
<Stack hasGutter>
{canQuickCreate ? (
<>
<StackItem>
<Split hasGutter>
<SplitItem>
<FormGroup
label={t('VirtualMachine name')}
isRequired
className="template-catalog-drawer-form-name"
fieldId="vm-name-field"
>
<TextInput
return (
<form className="template-catalog-drawer-form" id="quick-create-form">
<Stack hasGutter>
{canQuickCreate ? (
<>
<StackItem>
<Split hasGutter>
<SplitItem>
<FormGroup
label={t('VirtualMachine name')}
isRequired
type="text"
data-test-id="vm-name-input"
name="vmname"
aria-label="virtualmachine name"
value={vmName}
onChange={setVMName}
/>
</FormGroup>
</SplitItem>
<SplitItem>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>{t('Project')}</DescriptionListTerm>
<DescriptionListDescription>{namespace}</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</SplitItem>
</Split>
className="template-catalog-drawer-form-name"
fieldId="vm-name-field"
>
<TextInput
isRequired
type="text"
data-test-id="vm-name-input"
name="vmname"
aria-label="virtualmachine name"
value={vmName}
onChange={setVMName}
/>
</FormGroup>
</SplitItem>
<SplitItem>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>{t('Project')}</DescriptionListTerm>
<DescriptionListDescription>{namespace}</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</SplitItem>
</Split>
</StackItem>
<StackItem />
<StackItem>
<Checkbox
id="start-after-create-checkbox"
isChecked={startVM}
onChange={(v) => setStartVM(v)}
label={t('Start this VirtualMachine after creation')}
/>
</StackItem>
</>
) : (
<StackItem>
{t(
'This Template requires some additional parameters. Click the Customize VirtualMachine button to complete the creation flow.',
)}
</StackItem>
<StackItem />
)}
<StackItem />
{quickCreateError && (
<StackItem>
<Checkbox
id="start-after-create-checkbox"
isChecked={startVM}
onChange={(v) => setStartVM(v)}
label={t('Start this VirtualMachine after creation')}
/>
<Alert variant="danger" title={t('Quick create error')} isInline>
{quickCreateError?.message}
</Alert>
</StackItem>
</>
) : (
<StackItem>
{t(
'This Template requires some additional parameters. Click the Customize VirtualMachine button to complete the creation flow.',
)}
</StackItem>
)}
<StackItem />
{quickCreateError && (
<StackItem>
<Alert variant="danger" title={t('Quick create error')} isInline>
{quickCreateError.message}
</Alert>
</StackItem>
)}
)}

<StackItem>
<Split hasGutter>
{canQuickCreate && (
<StackItem>
<Split hasGutter>
{canQuickCreate && (
<SplitItem>
<Button
data-test-id="quick-create-vm-btn"
type="submit"
form="quick-create-form"
isLoading={isQuickCreating || modelsLoading}
isDisabled={
!isBootSourceAvailable || isQuickCreating || !vmName || modelsLoading
}
onClick={(e) => {
e.preventDefault();
onQuickCreate();
}}
>
{t('Quick create VirtualMachine')}
</Button>
</SplitItem>
)}
<SplitItem>
<Button
data-test-id="quick-create-vm-btn"
type="submit"
form="quick-create-form"
isLoading={isQuickCreating || modelsLoading}
isDisabled={
!isBootSourceAvailable || isQuickCreating || !vmName || modelsLoading
}
onClick={(e) => {
e.preventDefault();
onQuickCreate();
}}
data-test-id="customize-vm-btn"
variant={canQuickCreate ? ButtonVariant.secondary : ButtonVariant.primary}
onClick={onCustomize}
isDisabled={!processedTemplateAccessReview}
>
{t('Quick create VirtualMachine')}
{t('Customize VirtualMachine')}
</Button>
</SplitItem>
)}
<SplitItem>
<Button
data-test-id="customize-vm-btn"
variant={canQuickCreate ? ButtonVariant.secondary : ButtonVariant.primary}
onClick={onCustomize}
isDisabled={!processedTemplateAccessReview}
>
{t('Customize VirtualMachine')}
<Button variant={ButtonVariant.link} onClick={() => onCancel()}>
{t('Cancel')}
</Button>
</SplitItem>
<Button variant={ButtonVariant.link} onClick={() => onCancel()}>
{t('Cancel')}
</Button>
</Split>
</StackItem>
</Stack>
</form>
);
});
</Split>
</StackItem>
</Stack>
</form>
);
},
);
TemplatesCatalogDrawerCreateForm.displayName = 'TemplatesCatalogDrawerCreateForm';
8 changes: 8 additions & 0 deletions ...talog/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerFooter.tsx
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -42,6 +46,9 @@ export const TemplatesCatalogDrawerFooter: React.FC<TemplateCatalogDrawerFooterP
return <TemplatesCatalogDrawerFooterSkeleton />;
}

const initialVMName =
getTemplateVirtualMachineObject(processedTemplate)?.metadata?.name || generateVMName(template);

return (
<Stack className="template-catalog-drawer-info">
<div className="template-catalog-drawer-footer-section">
Expand Down Expand Up @@ -71,6 +78,7 @@ export const TemplatesCatalogDrawerFooter: React.FC<TemplateCatalogDrawerFooterP
namespace={namespace}
template={template}
canQuickCreate={canQuickCreate}
initialVMName={initialVMName}
isBootSourceAvailable={isBootSourceAvailable}
onCancel={onCancel}
/>
Expand Down

0 comments on commit 0de7339

Please sign in to comment.