Limit VM name length to max k8s label length

kubevirt-ui · Jan 21, 2025 · bbaf932 · bbaf932
1 parent 8dd30ca
commit bbaf932
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 21 deletions.
diff --git a/locales/en/plugin__kubevirt-plugin.json b/locales/en/plugin__kubevirt-plugin.json
@@ -721,6 +721,7 @@
   "Max. running migrations per cluster": "Max. running migrations per cluster",
   "Max. running migrations per node": "Max. running migrations per node",
   "Maximum latency": "Maximum latency",
+  "Maximum name length is {{ maxNameLength }} characters": "Maximum name length is {{ maxNameLength }} characters",
   "Measurement duration": "Measurement duration",
   "Mediated devices": "Mediated devices",
   "medium": "medium",

diff --git a/src/utils/resources/vm/utils/helpers.ts b/src/utils/resources/vm/utils/helpers.ts
@@ -0,0 +1,4 @@
+import { MAX_K8S_NAME_LENGTH } from '@kubevirt-utils/utils/constants';
+
+export const validateVMNameLength = (vmName: string): boolean =>
+  vmName.length <= MAX_K8S_NAME_LENGTH;
diff --git a/src/views/catalog/CreateFromInstanceTypes/components/CreateVMFooter/CreateVMFooter.tsx b/src/views/catalog/CreateFromInstanceTypes/components/CreateVMFooter/CreateVMFooter.tsx
@@ -36,6 +36,7 @@ import useKubevirtUserSettings from '@kubevirt-utils/hooks/useKubevirtUserSettin
 import useRHELAutomaticSubscription from '@kubevirt-utils/hooks/useRHELAutomaticSubscription/useRHELAutomaticSubscription';
 import { getResourceUrl } from '@kubevirt-utils/resources/shared';
 import useNamespaceUDN from '@kubevirt-utils/resources/udn/hooks/useNamespaceUDN';
+import { validateVMNameLength } from '@kubevirt-utils/resources/vm/utils/helpers';
 import { vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
 import { createHeadlessService } from '@kubevirt-utils/utils/headless-service';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
@@ -204,7 +205,11 @@ const CreateVMFooter: FC = () => {
   };
 
   const isDisabled =
-    isSubmitting || isEmpty(selectedBootableVolume) || !canCreateVM || !hasNameAndInstanceType;
+    isSubmitting ||
+    isEmpty(selectedBootableVolume) ||
+    !canCreateVM ||
+    !hasNameAndInstanceType ||
+    !validateVMNameLength(vmName);
 
   return (
     <footer className="create-vm-instance-type-footer">

diff --git a/...atalog/CreateFromInstanceTypes/components/VMDetailsSection/components/DetailsLeftGrid.tsx b/...atalog/CreateFromInstanceTypes/components/VMDetailsSection/components/DetailsLeftGrid.tsx
@@ -6,13 +6,16 @@ import {
   UseInstanceTypeAndPreferencesValues,
 } from '@catalog/CreateFromInstanceTypes/state/utils/types';
 import FolderSelect from '@kubevirt-utils/components/FolderSelect/FolderSelect';
+import FormGroupHelperText from '@kubevirt-utils/components/FormGroupHelperText/FormGroupHelperText';
 import VirtualMachineDescriptionItem from '@kubevirt-utils/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem';
 import { TREE_VIEW, TREE_VIEW_FOLDERS } from '@kubevirt-utils/hooks/useFeatures/constants';
 import { useFeatures } from '@kubevirt-utils/hooks/useFeatures/useFeatures';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { convertResourceArrayToMap } from '@kubevirt-utils/resources/shared';
+import { validateVMNameLength } from '@kubevirt-utils/resources/vm/utils/helpers';
+import { MAX_K8S_NAME_LENGTH } from '@kubevirt-utils/utils/constants';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
-import { DescriptionList, TextInput } from '@patternfly/react-core';
+import { DescriptionList, TextInput, ValidatedOptions } from '@patternfly/react-core';
 
 import { getCPUAndMemoryFromDefaultInstanceType, getOSFromDefaultPreference } from '../utils/utils';
 
@@ -24,6 +27,10 @@ const DetailsLeftGrid: FC<DetailsLeftGridProps> = ({ instanceTypesAndPreferences
   const { t } = useKubevirtTranslation();
   const { featureEnabled: treeViewEnabled } = useFeatures(TREE_VIEW);
   const { featureEnabled: treeViewFoldersEnabled } = useFeatures(TREE_VIEW_FOLDERS);
+  // const [vmNameValidated, setVMNameValidated] = useState<ValidatedOptions>(
+  //   ValidatedOptions.default,
+  // );
+
   const { instanceTypeVMState, setInstanceTypeVMState, vmNamespaceTarget } =
     useInstanceTypeVMStore();
   const { folder, selectedBootableVolume, selectedInstanceType, vmName } = instanceTypeVMState;
@@ -35,6 +42,16 @@ const DetailsLeftGrid: FC<DetailsLeftGridProps> = ({ instanceTypesAndPreferences
     [clusterInstanceTypes],
   );
 
+  // useEffect(() => {
+  //   setVMNameValidated(
+  //     validateVMNameLength(vmName) ? ValidatedOptions.default : ValidatedOptions.error,
+  //   );
+  // }, [setVMNameValidated, vmName]);
+
+  const vmNameValidated = validateVMNameLength(vmName)
+    ? ValidatedOptions.default
+    : ValidatedOptions.error;
+
   const operatingSystem = getOSFromDefaultPreference(selectedBootableVolume, preferencesMap);
   const cpuMemoryString = !isEmpty(instanceTypesMap?.[selectedInstanceType?.name])
     ? getCPUAndMemoryFromDefaultInstanceType(instanceTypesMap[selectedInstanceType?.name])
@@ -44,17 +61,29 @@ const DetailsLeftGrid: FC<DetailsLeftGridProps> = ({ instanceTypesAndPreferences
     <DescriptionList className="pf-c-description-list" isHorizontal>
       <VirtualMachineDescriptionItem
         descriptionData={
-          <TextInput
-            onChange={(_event, newVMName) =>
-              setInstanceTypeVMState({ payload: newVMName, type: instanceTypeActionType.setVMName })
-            }
-            aria-label="instancetypes virtualmachine name"
-            data-test-id="instancetypes-vm-name-input"
-            isRequired
-            name="vmname"
-            type="text"
-            value={vmName}
-          />
+          <>
+            <TextInput
+              onChange={(_event, newVMName) =>
+                setInstanceTypeVMState({
+                  payload: newVMName,
+                  type: instanceTypeActionType.setVMName,
+                })
+              }
+              aria-label="instancetypes virtualmachine name"
+              data-test-id="instancetypes-vm-name-input"
+              isRequired
+              name="vmname"
+              type="text"
+              validated={vmNameValidated}
+              value={vmName}
+            />
+            <FormGroupHelperText validated={vmNameValidated}>
+              {vmNameValidated === ValidatedOptions.error &&
+                t('Maximum name length is {{ maxNameLength }} characters', {
+                  maxNameLength: MAX_K8S_NAME_LENGTH,
+                })}
+            </FormGroupHelperText>
+          </>
         }
         descriptionHeader={t('Name')}
       />

diff --git a/...g/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx b/...g/templatescatalog/components/TemplatesCatalogDrawer/TemplatesCatalogDrawerCreateForm.tsx
@@ -2,6 +2,7 @@ import React, { FC, memo } from 'react';
 
 import { DRAWER_FORM_ID } from '@catalog/templatescatalog/utils/consts';
 import FolderSelect from '@kubevirt-utils/components/FolderSelect/FolderSelect';
+import FormGroupHelperText from '@kubevirt-utils/components/FormGroupHelperText/FormGroupHelperText';
 import VirtualMachineDescriptionItem from '@kubevirt-utils/components/VirtualMachineDescriptionItem/VirtualMachineDescriptionItem';
 import {
   RUNSTRATEGY_ALWAYS,
@@ -11,6 +12,8 @@ import { TREE_VIEW, TREE_VIEW_FOLDERS } from '@kubevirt-utils/hooks/useFeatures/
 import { useFeatures } from '@kubevirt-utils/hooks/useFeatures/useFeatures';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { RHELAutomaticSubscriptionData } from '@kubevirt-utils/hooks/useRHELAutomaticSubscription/utils/types';
+import { validateVMNameLength } from '@kubevirt-utils/resources/vm/utils/helpers';
+import { MAX_K8S_NAME_LENGTH } from '@kubevirt-utils/utils/constants';
 import {
   Alert,
   AlertVariant,
@@ -25,6 +28,7 @@ import {
   StackItem,
   TextInput,
   Tooltip,
+  ValidatedOptions,
 } from '@patternfly/react-core';
 
 import useCreateDrawerForm from './hooks/useCreateDrawerForm';
@@ -64,6 +68,10 @@ export const TemplatesCatalogDrawerCreateForm: FC<TemplatesCatalogDrawerCreateFo
       startVM,
     } = useCreateDrawerForm(namespace, subscriptionData, authorizedSSHKey);
 
+    const vmNameValidated = validateVMNameLength(nameField)
+      ? ValidatedOptions.default
+      : ValidatedOptions.error;
+
     const error = templateLoadingError || createError;
     return (
       <form className="template-catalog-drawer-form" id="quick-create-form">
@@ -84,6 +92,12 @@ export const TemplatesCatalogDrawerCreateForm: FC<TemplatesCatalogDrawerCreateFo
                       value={nameField}
                     />
                   </FormGroup>
+                  <FormGroupHelperText validated={vmNameValidated}>
+                    {vmNameValidated === ValidatedOptions.error &&
+                      t('Maximum name length is {{ maxNameLength }} characters', {
+                        maxNameLength: MAX_K8S_NAME_LENGTH,
+                      })}
+                  </FormGroupHelperText>
                 </SplitItem>
                 {treeViewEnabled && treeViewFoldersEnabled && (
                   <SplitItem>

diff --git a/.../catalog/templatescatalog/components/TemplatesCatalogDrawer/hooks/useCreateDrawerForm.tsx b/.../catalog/templatescatalog/components/TemplatesCatalogDrawer/hooks/useCreateDrawerForm.tsx
@@ -52,6 +52,7 @@ import {
   DEFAULT_NETWORK_INTERFACE,
   UDN_BINDING_NAME,
 } from '@kubevirt-utils/resources/vm/utils/constants';
+import { validateVMNameLength } from '@kubevirt-utils/resources/vm/utils/helpers';
 import {
   HEADLESS_SERVICE_LABEL,
   HEADLESS_SERVICE_NAME,
@@ -98,6 +99,7 @@ const useCreateDrawerForm = (
   const { password, username } = registryCredentials;
 
   const { nameField, onVMNameChange } = useCreateVMName();
+  const isValidVMName = validateVMNameLength(nameField);
 
   const [isQuickCreating, setIsQuickCreating] = useState(false);
   const [isCustomizing, setIsCustomizing] = useState(false);
@@ -331,7 +333,7 @@ const useCreateDrawerForm = (
   return {
     createError,
     folder: getLabel(vm, VM_FOLDER_LABEL),
-    isCustomizeDisabled: !processedTemplateAccessReview || isCustomizing,
+    isCustomizeDisabled: !processedTemplateAccessReview || isCustomizing || !isValidVMName,
     isCustomizeLoading: isCustomizing || modelsLoading,
     isQuickCreateDisabled:
       !isBootSourceAvailable ||
@@ -340,7 +342,8 @@ const useCreateDrawerForm = (
       isEmpty(models) ||
       !allRequiredParametersAreFulfilled(template) ||
       !hasValidSource(template) ||
-      storageClassRequiredMissing,
+      storageClassRequiredMissing ||
+      !isValidVMName,
     isQuickCreateLoading: isQuickCreating || modelsLoading,
     nameField,
     onChangeFolder,

diff --git a/src/views/catalog/wizard/tabs/overview/components/VMNameModal/VMNameModal.tsx b/src/views/catalog/wizard/tabs/overview/components/VMNameModal/VMNameModal.tsx
@@ -1,12 +1,15 @@
 import React, { useMemo, useState } from 'react';
 import produce from 'immer';
 
+import {
+  getHelperTextMessage,
+  isValidVMName,
+} from '@catalog/wizard/tabs/overview/components/VMNameModal/utils/utils';
 import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import FormGroupHelperText from '@kubevirt-utils/components/FormGroupHelperText/FormGroupHelperText';
 import TabModal from '@kubevirt-utils/components/TabModal/TabModal';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { isEmpty } from '@kubevirt-utils/utils/utils';
-import { Form, FormGroup, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 
 type HostnameModalProps = {
   isOpen: boolean;
@@ -26,7 +29,7 @@ const VMNameModal: React.FC<HostnameModalProps> = ({ isOpen, onClose, onSubmit,
     return updatedVM;
   }, [vm, vmName]);
 
-  const validated = !isEmpty(vmName) ? ValidatedOptions.default : ValidatedOptions.error;
+  const validated = isValidVMName(vmName);
 
   return (
     <TabModal
@@ -45,9 +48,7 @@ const VMNameModal: React.FC<HostnameModalProps> = ({ isOpen, onClose, onSubmit,
             value={vmName}
           />
           <FormGroupHelperText validated={validated}>
-            {validated === ValidatedOptions.error
-              ? t('VirtualMachine name can not be empty.')
-              : t('Please provide name to VirtualMachine.')}
+            {getHelperTextMessage(vmName)}
           </FormGroupHelperText>
         </FormGroup>
       </Form>

diff --git a/src/views/catalog/wizard/tabs/overview/components/VMNameModal/utils/utils.ts b/src/views/catalog/wizard/tabs/overview/components/VMNameModal/utils/utils.ts
@@ -0,0 +1,25 @@
+import { t } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { validateVMNameLength } from '@kubevirt-utils/resources/vm/utils/helpers';
+import { MAX_K8S_NAME_LENGTH } from '@kubevirt-utils/utils/constants';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
+import { ValidatedOptions } from '@patternfly/react-core';
+
+export const isValidVMName = (vmName: string) => {
+  const nameMissing = isEmpty(vmName);
+  const nameTooLong = !validateVMNameLength(vmName);
+
+  return nameMissing || nameTooLong ? ValidatedOptions.error : ValidatedOptions.default;
+};
+
+export const getHelperTextMessage = (vmName: string): string => {
+  const nameMissing = isEmpty(vmName);
+  const nameTooLong = !validateVMNameLength(vmName);
+
+  if (nameMissing) return t('VirtualMachine name can not be empty.');
+  if (nameTooLong)
+    return t('Maximum name length is {{ maxNameLength }} characters', {
+      maxNameLength: MAX_K8S_NAME_LENGTH,
+    });
+
+  return t('Please provide name to VirtualMachine.');
+};