New VM from template flow

frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json

@@ -3,14 +3,18 @@
   "Virtualization": "Virtualization",
   "Virtual Machines Templates": "Virtual Machines Templates",
   "{{name}} Details": "{{name}} Details",
-  "Network Interfaces": "Network Interfaces",
-  "Disks": "Disks",
+  "Red Hat provided templates can not be edited": "Red Hat provided templates can not be edited",
+  "Create a new custom template": "Create a new custom template",
+  "{{ name }} can not be edited because it is provided by the Red Hat OpenShift Virtualization Operator.": "{{ name }} can not be edited because it is provided by the Red Hat OpenShift Virtualization Operator.",
+  "We suggest you create a custom Template from this Red Hat template.": "We suggest you create a custom Template from this Red Hat template.",
   "VM Template Details": "VM Template Details",
   "Scheduling and resources requirements": "Scheduling and resources requirements",
   "Virtual Machines": "Virtual Machines",
   "Overview": "Overview",
   "Details": "Details",
   "Console": "Console",
+  "Network Interfaces": "Network Interfaces",
+  "Disks": "Disks",
   "Environment": "Environment",
   "Snapshots": "Snapshots",
   "Operating system mismatch": "Operating system mismatch",

frontend/packages/kubevirt-plugin/package.json

@@ -11,7 +11,8 @@
     "@console/plugin-sdk": "0.0.0-fixed",
     "@console/shared": "0.0.0-fixed",
     "@console/dev-console": "0.0.0-fixed",
-    "@patternfly/react-console": "1.x"
+    "@patternfly/react-console": "1.x",
+    "unique-names-generator": "4.3.1"
   },
   "consolePlugin": {
     "entry": "src/plugin.tsx",

frontend/packages/kubevirt-plugin/src/components/cdi-upload-provider/cdi-upload-provider.tsx

@@ -120,7 +120,7 @@ export type DataUpload = {
   cancelUpload?: Canceler;
 };
 
-type CDIUploadContextProps = {
+export type CDIUploadContextProps = {
   uploads: DataUpload[];
   uploadData: ({ file, token, pvcName, namespace }: UploadDataProps) => void;
   uploadProxyURL?: string;

frontend/packages/kubevirt-plugin/src/components/cdi-upload-provider/pvc-delete-extension.tsx

@@ -11,7 +11,7 @@ import {
   TEMPLATE_TYPE_LABEL,
   TEMPLATE_VM_COMMON_NAMESPACE,
 } from '../../constants';
-import { usePVCBaseImages } from '../../hooks/use-pvc-base-images';
+import { useBaseImages } from '../../hooks/use-base-images';
 
 export const killCDIBoundPVC = (pvc: PersistentVolumeClaimKind) =>
   k8sKill(DataVolumeModel, {
@@ -34,7 +34,7 @@ export const PVCDeleteAlertExtension: React.FC<{ pvc: PersistentVolumeClaimKind
   const [commonTemplates, loadedTemplates, errorTemplates] = useK8sWatchResource<TemplateKind[]>(
     templatesResource,
   );
-  const [goldenPvcs, loadedPvcs, errorPvcs] = usePVCBaseImages(commonTemplates);
+  const [goldenPvcs, loadedPvcs, errorPvcs] = useBaseImages(commonTemplates);
 
   const isGolden = goldenPvcs.find(
     (goldenPvc) => goldenPvc?.metadata?.name === pvc?.metadata?.name,

frontend/packages/kubevirt-plugin/src/components/cdi-upload-provider/upload-pvc-form/upload-pvc-form-status.tsx

@@ -28,7 +28,7 @@ export const UploadPVCFormStatus: React.FC<UploadPVCFormStatusProps> = ({
   allocateError,
   onErrorClick,
   onSuccessClick,
-  onCancelFinish,
+  onCancelClick,
 }) => {
   const [error, setError] = React.useState(allocateError || upload?.uploadError?.message);
 
@@ -37,10 +37,10 @@ export const UploadPVCFormStatus: React.FC<UploadPVCFormStatusProps> = ({
     setError(newError);
   }, [allocateError, upload]);
 
-  const onCancelClick = () => {
+  const onCancelFinish = () => {
     upload.cancelUpload();
     killUploadPVC(upload?.pvcName, upload?.namespace)
-      .then(onCancelFinish)
+      .then(onCancelClick)
       .catch((err) => setError(err?.message));
   };
 
@@ -57,7 +57,7 @@ export const UploadPVCFormStatus: React.FC<UploadPVCFormStatusProps> = ({
           isAllocating={isAllocating}
           onErrorClick={onErrorClick}
           onSuccessClick={onSuccessClick}
-          onCancelClick={onCancelClick}
+          onCancelClick={onCancelFinish}
         />
       </EmptyState>
     </Bullseye>
@@ -72,7 +72,7 @@ const DataUploadStatus: React.FC<DataUploadStatus> = ({
   onSuccessClick,
   onCancelClick,
 }) => {
-  if (error) return <ErrorStatus error={error} onErrorPrimaryClick={onErrorClick} />;
+  if (error) return <ErrorStatus error={error} onErrorClick={onErrorClick} />;
   if (isAllocating) return <AllocatingStatus />;
   if (upload?.uploadStatus === UPLOAD_STATUS.CANCELED) return <CancellingStatus />;
   return (
@@ -107,14 +107,14 @@ const CancellingStatus: React.FC = () => (
   </>
 );
 
-const ErrorStatus: React.FC<ErrorStatusProps> = ({ error, onErrorPrimaryClick }) => (
+const ErrorStatus: React.FC<ErrorStatusProps> = ({ error, onErrorClick }) => (
   <>
     <EmptyStateIcon icon={ErrorCircleOIcon} color="#cf1010" />
     <Title headingLevel="h4" size="lg">
       Error Uploading Data
     </Title>
     <EmptyStateBody>{error}</EmptyStateBody>
-    <Button id="cdi-upload-error-btn" variant="primary" onClick={onErrorPrimaryClick}>
+    <Button id="cdi-upload-error-btn" variant="primary" onClick={onErrorClick}>
       {error ? 'Back to Form' : 'View Persistent Volume Claim details'}
     </Button>
   </>
@@ -146,17 +146,19 @@ const UploadingStatus: React.FC<UploadingStatusProps> = ({
         )}
         <StackItem>
           Persistent Volume Claim has been created and your data source is now being uploaded to it.
-          Once the uploading is completed the Persisten Volume Claim will become available
+          Once the uploading is completed the Persistent Volume Claim will become available
         </StackItem>
         <StackItem>
           <Progress value={upload?.progress} variant={getProgressVariant(upload?.uploadStatus)} />
         </StackItem>
       </Stack>
     </EmptyStateBody>
-    <Button id="cdi-upload-primary-pvc" variant="primary" onClick={onSuccessClick}>
-      View Persistent Volume Claim details
-    </Button>
-    {upload?.uploadStatus === UPLOAD_STATUS.UPLOADING && (
+    {onSuccessClick && (
+      <Button id="cdi-upload-primary-pvc" variant="primary" onClick={onSuccessClick}>
+        View Persistent Volume Claim details
+      </Button>
+    )}
+    {onCancelClick && upload?.uploadStatus === UPLOAD_STATUS.UPLOADING && (
       <EmptyStateSecondaryActions>
         <Button id="cdi-upload-cancel-btn" onClick={onCancelClick} variant="link">
           Cancel Upload
@@ -166,42 +168,25 @@ const UploadingStatus: React.FC<UploadingStatusProps> = ({
   </>
 );
 
-export type UploadPVCStatusProps = {
+type UploadingStatusProps = {
   upload: DataUpload;
-  isSubmitting: boolean;
-  isAllocating: boolean;
-  allocateError: React.ReactNode;
-  onErrorClick: () => void;
-  onSuccessClick: () => void;
-  onCancelFinish: () => void;
+  onSuccessClick?: () => void;
+  onCancelClick?: () => void;
 };
 
-export type UploadPVCFormStatusProps = {
-  upload: DataUpload;
+export type UploadPVCFormStatusProps = UploadingStatusProps & {
   isSubmitting: boolean;
   isAllocating: boolean;
   allocateError: React.ReactNode;
   onErrorClick: () => void;
-  onSuccessClick: () => void;
-  onCancelFinish: () => void;
 };
 
-export type DataUploadStatus = {
+type ErrorStatusProps = {
   error: any;
-  upload: DataUpload;
-  isAllocating: boolean;
   onErrorClick: () => void;
-  onSuccessClick: () => void;
-  onCancelClick: () => void;
-};
-
-type UploadingStatusProps = {
-  upload: DataUpload;
-  onSuccessClick: () => void;
-  onCancelClick: () => void;
 };
 
-type ErrorStatusProps = {
-  error: any;
-  onErrorPrimaryClick: () => void;
-};
+export type DataUploadStatus = UploadingStatusProps &
+  ErrorStatusProps & {
+    isAllocating: boolean;
+  };

frontend/packages/kubevirt-plugin/src/components/cdi-upload-provider/upload-pvc-form/upload-pvc-form.tsx

@@ -45,7 +45,7 @@ import {
   useK8sWatchResource,
   WatchK8sResource,
 } from '@console/internal/components/utils/k8s-watch-hook';
-import { usePVCBaseImages } from '../../../hooks/use-pvc-base-images';
+import { useBaseImages } from '../../../hooks/use-base-images';
 import { DataVolumeModel } from '../../../models';
 import { createUploadPVC } from '../../../k8s/requests/cdi-upload/cdi-upload-requests';
 import { CDIUploadContext } from '../cdi-upload-provider';
@@ -113,7 +113,7 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
 }) => {
   const operatingSystems = getTemplateOperatingSystems(commonTemplates);
   const operatingSystemHaveDV = operatingSystems.find(
-    (os) => os?.dataVolumeName && os?.dataVolumeNamespace,
+    (os) => os?.baseImageName && os?.baseImageNamespace,
   );
   const [accessModeHelp, setAccessModeHelp] = React.useState('Permissions to the mounted drive.');
   const [allowedAccessModes, setAllowedAccessModes] = React.useState(initialAccessModes);
@@ -213,11 +213,11 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
   const handleGoldenCheckbox = (checked) => {
     setIsGolden(checked);
     if (checked) {
-      setNamespace(os?.dataVolumeNamespace);
+      setNamespace(os?.baseImageNamespace);
       if (pvcName && !os) {
         setPvcName('');
       } else {
-        setPvcName(os?.dataVolumeName);
+        setPvcName(os?.baseImageName);
       }
     }
     if (!checked) {
@@ -228,9 +228,9 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
   const handleOs = (newOs: string) => {
     const operatingSystem = operatingSystems.find((o) => o.id === newOs);
     setOs(operatingSystem);
-    setPvcName(operatingSystem?.dataVolumeName);
-    if (operatingSystem?.dataVolumeNamespace) {
-      setNamespace(operatingSystem.dataVolumeNamespace);
+    setPvcName(operatingSystem?.baseImageName);
+    if (operatingSystem?.baseImageNamespace) {
+      setNamespace(operatingSystem.baseImageNamespace);
     }
   };
 
@@ -245,7 +245,7 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
 
   React.useEffect(() => {
     const goldenImagePVC = goldenPvcs?.find(
-      (pvc) => getName(pvc) === os?.dataVolumeName && getNamespace(pvc) === os?.dataVolumeNamespace,
+      (pvc) => getName(pvc) === os?.baseImageName && getNamespace(pvc) === os?.baseImageNamespace,
     );
     if (goldenImagePVC) {
       setOsImageExists(true);
@@ -311,17 +311,17 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
                 placeholder="--- Pick an Operating system ---"
                 isDisabled={!!os}
               />
-              {operatingSystems.map(({ id, name, dataVolumeName, dataVolumeNamespace }) =>
+              {operatingSystems.map(({ id, name, baseImageName, baseImageNamespace }) =>
                 goldenPvcs?.find(
                   (pvc) =>
-                    getName(pvc) === dataVolumeName && getNamespace(pvc) === dataVolumeNamespace,
+                    getName(pvc) === baseImageName && getNamespace(pvc) === baseImageNamespace,
                 ) ? (
                   <FormSelectOption
                     key={id}
                     value={id}
                     label={`${name || id} - Default data image already exists`}
                   />
-                ) : !dataVolumeName ? (
+                ) : !baseImageName ? (
                   <FormSelectOption
                     isDisabled
                     key={id}
@@ -343,8 +343,8 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
                   hideIcon
                   inline
                   kind={PersistentVolumeClaimModel.kind}
-                  name={os?.dataVolumeName}
-                  namespace={os?.dataVolumeNamespace}
+                  name={os?.baseImageName}
+                  namespace={os?.baseImageNamespace}
                 />
               </Alert>
             </div>
@@ -416,7 +416,7 @@ export const UploadPVCForm: React.FC<UploadPVCFormProps> = ({
             />
             <p className="help-block" id="request-size-help">
               Ensure your PVC size covers the requirements of the uncompressed image and any other
-              space requirements
+              space requirements.
             </p>
           </SplitItem>
         </Split>
@@ -469,7 +469,7 @@ export const UploadPVCPage: React.FC<UploadPVCPageProps> = (props) => {
   const [commonTemplates, loadedTemplates, errorTemplates] = useK8sWatchResource<TemplateKind[]>(
     templatesResource,
   );
-  const [goldenPvcs, loadedPvcs, errorPvcs] = usePVCBaseImages(commonTemplates);
+  const [goldenPvcs, loadedPvcs, errorPvcs] = useBaseImages(commonTemplates);
   const { uploads, uploadData, uploadProxyURL } = React.useContext(CDIUploadContext);
   const initialNamespace = props?.match?.params?.ns;
   const namespace = getNamespace(dvObj) || initialNamespace;
@@ -614,7 +614,7 @@ export const UploadPVCPage: React.FC<UploadPVCPageProps> = (props) => {
         onSuccessClick={() =>
           history.push(resourcePath(PersistentVolumeClaimModel.kind, getName(dvObj), namespace))
         }
-        onCancelFinish={() => history.push(resourcePath(PersistentVolumeClaimModel.kind))}
+        onCancelClick={() => history.push(resourcePath(PersistentVolumeClaimModel.kind))}
       />
     </>
   );

frontend/packages/kubevirt-plugin/src/components/cdi-upload-provider/upload-pvc-popover.tsx

@@ -28,7 +28,7 @@ export const getProgressVariant = (status: UPLOAD_STATUS) => {
   }
 };
 
-export const UploadPVCPopover: React.FC<PVCUploadStatusProps> = ({ pvc }) => {
+export const UploadPVCPopover: React.FC<PVCUploadStatusProps> = ({ pvc, title = 'Uploading' }) => {
   const pvcName = getName(pvc);
   const namespace = getNamespace(pvc);
 
@@ -37,7 +37,7 @@ export const UploadPVCPopover: React.FC<PVCUploadStatusProps> = ({ pvc }) => {
   const [error, setError] = React.useState(upload?.uploadError);
 
   const onCancelClick = () => {
-    upload.cancelUpload();
+    upload && upload.cancelUpload();
     killUploadPVC(pvcName, namespace).catch(setError);
   };
 
@@ -120,10 +120,22 @@ export const UploadPVCPopover: React.FC<PVCUploadStatusProps> = ({ pvc }) => {
       </Popover>
     );
   }
-  // no context data, upload is from another session
-  return <ProgressStatus title="Uploading" />;
+  // no context data, upload is from another sessionc
+  return (
+    <ProgressStatus title={title}>
+      <Button
+        id="cdi-upload-cancel-btn"
+        className="pf-m-link--align-left"
+        variant="link"
+        onMouseUp={onCancelClick}
+      >
+        Cancel upload
+      </Button>
+    </ProgressStatus>
+  );
 };
 
 type PVCUploadStatusProps = {
   pvc: K8sResourceKind;
+  title?: string;
 };