Merge pull request #9367 from avivtur/cnv_8975_enable_online_snapshots

cnv-8975: Enable online VM snapshots in the UI

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

@@ -569,7 +569,7 @@
   "The following disk will not be included in the snapshot_plural": "The following disk will not be included in the snapshots",
   "Edit the disk or contact your cluster admin for further details.": "Edit the disk or contact your cluster admin for further details.",
   "Edit the disk or contact your cluster admin for further details._plural": "Edit the disks or contact your cluster admin for further details.",
-  "The VM {{vmName}} is still running. It will be powered off.": "The VM {{vmName}} is still running. It will be powered off.",
+  "Taking snapshot of running virtual machine.": "Taking snapshot of running virtual machine.",
   "Restore Snapshot": "Restore Snapshot",
   "Are you sure you want to restore <1>{snapshotName}</1> snapshot?": "Are you sure you want to restore <1>{snapshotName}</1> snapshot?",
   "Restore": "Restore",
@@ -640,9 +640,13 @@
   "Snapshot Details": "Snapshot Details",
   "Last Restored": "Last Restored",
   "Conditions": "Conditions",
+  "Restore is enabled only for offline virtual machine.": "Restore is enabled only for offline virtual machine.",
   "VM Snapshots List": "VM Snapshots List",
   "Snapshots": "Snapshots",
   "Last restored": "Last restored",
+  "Online Created": "Online Created",
+  "This snapshot was created while vm is running": "This snapshot was created while vm is running",
+  "Online snapshot": "Online snapshot",
   "RHV": "RHV",
   "VMware": "VMware",
   "This virtual machine has some pending changes that will apply after it is restarted.": "This virtual machine has some pending changes that will apply after it is restarted.",

frontend/packages/kubevirt-plugin/src/components/modals/snapshot-modal/SnapshotsModal.tsx

@@ -19,7 +19,6 @@ import {
 import { HandlePromiseProps, withHandlePromise } from '@console/internal/components/utils';
 import { k8sCreate } from '@console/internal/module/k8s';
 import { getName, getNamespace } from '@console/shared';
-import { stopVM } from '../../../k8s/requests/vm/actions';
 import { VMSnapshotWrapper } from '../../../k8s/wrapper/vm/vm-snapshot-wrapper';
 import { asVM, getVolumeSnapshotStatuses } from '../../../selectors/vm';
 import { VMSnapshot } from '../../../types';
@@ -76,11 +75,9 @@ const SnapshotsModal = withHandlePromise((props: SnapshotsModalProps) => {
       })
       .addOwnerReferences(buildOwnerReference(vmLikeEntity, { blockOwnerDeletion: false }));
     const isValidName = isEmpty(snapshots.filter(({ metadata }) => metadata?.name === name));
-    snapshotWrapper &&
-      isVMRunningOrExpectedRunning &&
-      isValidName &&
-      (await stopVM(asVM(vmLikeEntity)));
-    handlePromise(k8sCreate(snapshotWrapper.getModel(), snapshotWrapper.asResource()), close);
+    if (snapshotWrapper && isValidName) {
+      handlePromise(k8sCreate(snapshotWrapper.getModel(), snapshotWrapper.asResource()), close);
+    }
   };
 
   return (
@@ -122,7 +119,6 @@ const SnapshotsModal = withHandlePromise((props: SnapshotsModalProps) => {
                   <SupportedSnapshotVolumesList supportedVolumes={supportedVolumes} />
                   <UnsupportedVolumesSnapshotAlert unsupportedVolumes={unsupportedVolumes} />
                   <VmRunningSnapshotAlert
-                    vmName={vmName}
                     isVMRunningOrExpectedRunning={isVMRunningOrExpectedRunning}
                   />
                 </Stack>

frontend/packages/kubevirt-plugin/src/components/modals/snapshot-modal/VmRunningSnapshotAlert.tsx

@@ -3,7 +3,7 @@ import { Alert, AlertVariant, StackItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 
 const VmRunningSnapshotAlert = (props: VmRunningSnapshotAlertProps) => {
-  const { vmName, isVMRunningOrExpectedRunning } = props;
+  const { isVMRunningOrExpectedRunning } = props;
   const { t } = useTranslation();
 
   if (!isVMRunningOrExpectedRunning) {
@@ -13,18 +13,15 @@ const VmRunningSnapshotAlert = (props: VmRunningSnapshotAlertProps) => {
   return (
     <StackItem>
       <Alert
-        variant={AlertVariant.warning}
+        variant={AlertVariant.info}
         isInline
-        title={t('kubevirt-plugin~The VM {{vmName}} is still running. It will be powered off.', {
-          vmName,
-        })}
+        title={t('kubevirt-plugin~Taking snapshot of running virtual machine.')}
       />
     </StackItem>
   );
 };
 
 export type VmRunningSnapshotAlertProps = {
-  vmName: string;
   isVMRunningOrExpectedRunning: boolean;
 };
 

frontend/packages/kubevirt-plugin/src/components/vm-snapshots/VMRunningSnapshotLabel.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Label, Tooltip } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+
+type VMTemplateLabelProps = {
+  isOnlineSnapshot: boolean;
+  className?: string;
+};
+
+export const VMRunningSnapshotLabel: React.FC<VMTemplateLabelProps> = ({
+  isOnlineSnapshot,
+  className,
+}) => {
+  const { t } = useTranslation();
+
+  if (!isOnlineSnapshot) {
+    return null;
+  }
+
+  return (
+    <Tooltip content={t('kubevirt-plugin~This snapshot was created while vm is running')}>
+      <Label color="green" className={className} isTruncated>
+        {t('kubevirt-plugin~Online snapshot')}
+      </Label>
+    </Tooltip>
+  );
+};

frontend/packages/kubevirt-plugin/src/components/vm-snapshots/types.ts

@@ -10,6 +10,7 @@ export type VMSnapshotRowCustomData = {
   vmLikeEntity: VMLikeEntityKind;
   columnClasses: string[];
   isDisabled: boolean;
+  isVMRunning: boolean;
   restores: { [key: string]: VMRestore };
   withProgress: (promise: Promise<any>) => void;
 } & VMSnapshotRowActionOpts;

frontend/packages/kubevirt-plugin/src/components/vm-snapshots/utils.ts

@@ -1,3 +1,3 @@
 import { Kebab } from '@console/internal/components/utils';
 
-export const snapshotsTableColumnClasses = ['', '', '', '', '', Kebab.columnClass];
+export const snapshotsTableColumnClasses = ['', '', '', '', '', '', Kebab.columnClass];

frontend/packages/kubevirt-plugin/src/components/vm-snapshots/vm-snapshot-row.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
 import { RowFunction, TableData, TableRow } from '@console/internal/components/factory';
 import { Kebab, ResourceKebab, ResourceLink, Timestamp } from '@console/internal/components/utils';
 import { DASH, dimensifyRow, getCreationTimestamp, getName, getNamespace } from '@console/shared';
@@ -14,6 +15,7 @@ import { VMRestore, VMSnapshot } from '../../types';
 import snapshotRestoreModal from '../modals/snapshot-restore-modal/snapshot-restore-modal';
 import { VMSnapshotRowCustomData } from './types';
 import { VMSnapshotStatus } from './vm-snapshot-status';
+import { VMRunningSnapshotLabel } from './VMRunningSnapshotLabel';
 
 const { Delete } = Kebab.factory;
 
@@ -25,6 +27,7 @@ export type VMSnapshotSimpleRowProps = {
   actionsComponent: React.ReactNode;
   index: number;
   style: object;
+  isVMRunning: boolean;
 };
 
 export const VMSnapshotSimpleRow: React.FC<VMSnapshotSimpleRowProps> = ({
@@ -35,11 +38,14 @@ export const VMSnapshotSimpleRow: React.FC<VMSnapshotSimpleRowProps> = ({
   actionsComponent,
   index,
   style,
+  isVMRunning,
 }) => {
+  const { t } = useTranslation();
   const dimensify = dimensifyRow(columnClasses);
   const snapshotName = getName(snapshot);
   const namespace = getNamespace(snapshot);
   const relevantRestore = restores[snapshotName];
+  const isOnlineSnapshot = snapshot?.status?.indications?.[0];
 
   return (
     <TableRow id={snapshot?.metadata?.uid} index={index} trKey={snapshotName} style={style}>
@@ -59,17 +65,27 @@ export const VMSnapshotSimpleRow: React.FC<VMSnapshotSimpleRowProps> = ({
       <TableData id={`${snapshotName}-restore-time`} className={dimensify()}>
         {relevantRestore ? <Timestamp timestamp={getVmRestoreTime(relevantRestore)} /> : DASH}
       </TableData>
+      <TableData id={`${snapshotName}-online-snapshot`} className={dimensify()}>
+        {isOnlineSnapshot ? <VMRunningSnapshotLabel isOnlineSnapshot={isOnlineSnapshot} /> : DASH}
+      </TableData>
       <TableData className={dimensify()}>
-        <Button
-          id={`${snapshotName}-restore-btn`}
-          variant="secondary"
-          onClick={() => snapshotRestoreModal({ snapshot })}
-          isDisabled={
-            isDisabled || !isVMSnapshotReady(snapshot) || isVmRestoreProgressing(relevantRestore)
-          }
+        <Tooltip
+          content={t('kubevirt-plugin~Restore is enabled only for offline virtual machine.')}
         >
-          Restore
-        </Button>
+          <Button
+            id={`${snapshotName}-restore-btn`}
+            variant="secondary"
+            onClick={() => snapshotRestoreModal({ snapshot })}
+            isDisabled={
+              isDisabled ||
+              !isVMSnapshotReady(snapshot) ||
+              isVmRestoreProgressing(relevantRestore) ||
+              isVMRunning
+            }
+          >
+            {t('kubevirt-plugin~Restore')}
+          </Button>
+        </Tooltip>
       </TableData>
       <TableData className={dimensify(true)}>{actionsComponent}</TableData>
     </TableRow>
@@ -78,7 +94,7 @@ export const VMSnapshotSimpleRow: React.FC<VMSnapshotSimpleRowProps> = ({
 
 export const VMSnapshotRow: RowFunction<VMSnapshot, VMSnapshotRowCustomData> = ({
   obj: snapshot,
-  customData: { restores, columnClasses, isDisabled },
+  customData: { restores, columnClasses, isDisabled, isVMRunning },
   index,
   style,
 }) => (
@@ -89,6 +105,7 @@ export const VMSnapshotRow: RowFunction<VMSnapshot, VMSnapshotRowCustomData> = (
     index={index}
     style={style}
     isDisabled={isDisabled}
+    isVMRunning={isVMRunning}
     actionsComponent={
       <ResourceKebab
         resource={snapshot}

frontend/packages/kubevirt-plugin/src/components/vm-snapshots/vm-snapshots.tsx

@@ -70,6 +70,9 @@ export const VMSnapshotsTable: React.FC<VMSnapshotsTableProps> = ({
               sortFunc: 'snapshotLastRestore',
               transforms: [sortable],
             },
+            {
+              title: t('kubevirt-plugin~Online Created'),
+            },
             {
               title: '',
             },
@@ -108,7 +111,7 @@ export const VMSnapshotsPage: React.FC<VMTabProps> = ({ obj: vmLikeEntity, vmis:
   const [isLocked, setIsLocked] = useSafetyFirst(false);
   const withProgress = wrapWithProgress(setIsLocked);
   const filteredSnapshots = snapshots.filter((snap) => getVmSnapshotVmName(snap) === vmName);
-  const isDisabled = isLocked || isVMRunningOrExpectedRunning(asVM(vmLikeEntity), vmi);
+  const isDisabled = isLocked;
 
   return (
     <div className="co-m-list">
@@ -147,6 +150,7 @@ export const VMSnapshotsPage: React.FC<VMTabProps> = ({ obj: vmLikeEntity, vmis:
             withProgress,
             restores: mappedRelevantRestores,
             isDisabled,
+            isVMRunning: isVMRunningOrExpectedRunning(asVM(vmLikeEntity), vmi),
           }}
           row={VMSnapshotRow}
           columnClasses={snapshotsTableColumnClasses}