Render VmDetails with deleted template curreclty.

kubevirt · Mar 24, 2019 · f243916 · f243916
1 parent 6937cc0
commit f243916
Show file tree

Hide file tree

Showing 6 changed files with 261 additions and 3 deletions.
diff --git a/src/components/Details/Flavor/Flavor.js b/src/components/Details/Flavor/Flavor.js
@@ -32,6 +32,16 @@ export class Flavor extends React.Component {
   };
 
   componentDidMount() {
+    // If not in edit mode, just init state and exit.
+    if (!this.props.editing) {
+      this.setState({
+        loadingTemplate: false,
+        template: null,
+      });
+
+      return;
+    }
+
     this.setState({
       loadingTemplate: true,
     });

diff --git a/src/components/Details/VmDetails/VmDetails.js b/src/components/Details/VmDetails/VmDetails.js
@@ -28,7 +28,7 @@ import {
   prefixedId,
 } from '../../../utils';
 import { VirtualMachineModel } from '../../../models';
-import { CUSTOM_FLAVOR, DASHES } from '../../../constants';
+import { CUSTOM_FLAVOR, DASHES, MISSING_STR, PENDING_STR } from '../../../constants';
 import { settingsValue, selectVm } from '../../../k8s/selectors';
 import { Flavor } from '../Flavor';
 import { Description } from '../Description';
@@ -45,6 +45,7 @@ export class VmDetails extends React.Component {
       updating: false,
       k8sError: null,
       form: {},
+      templateError: PENDING_STR,
     };
   }
 
@@ -53,6 +54,11 @@ export class VmDetails extends React.Component {
       editing,
     });
 
+  setTemplateError = error =>
+    this.setState({
+      templateError: error,
+    });
+
   onFormChange = (formKey, newValue, key, valid) =>
     this.setState(state => ({
       form: {
@@ -123,10 +129,17 @@ export class VmDetails extends React.Component {
   isFormValid = () => Object.keys(this.state.form).every(key => this.state.form[key].valid);
 
   componentDidUpdate() {
-    const { launcherPod, importerPods, migration, vm } = this.props;
+    const { launcherPod, importerPods, migration, k8sGet, vm } = this.props;
     if (this.state.editing && !this.isVmOff(vm, launcherPod, importerPods, migration)) {
       this.setEditing(false);
     }
+
+    // Check template, if template is missing, update view.
+    if (getVmTemplate(vm) != null && this.state.templateError === PENDING_STR) {
+      retrieveVmTemplate(k8sGet, vm)
+        .then(() => this.setTemplateError(''))
+        .catch(() => this.setTemplateError(MISSING_STR));
+    }
   }
 
   isVmOff = (vm, launcherPod, importerPods, migration) => {
@@ -155,6 +168,8 @@ export class VmDetails extends React.Component {
     const hostName = getHostName(launcherPod);
     const fqdn = vmIsOff || !hostName ? DASHES : hostName;
     const template = getVmTemplate(vm);
+    const templateIsMissing = this.state.templateError === MISSING_STR ? ` ${MISSING_STR}` : '';
+    const templateLabel = template ? `${template.namespace}/${template.name}${templateIsMissing}` : DASHES;
     const id = getId(vm);
     const sortedBootableDevices = getBootableDevicesInOrder(vm);
     const editButton = (
@@ -238,7 +253,7 @@ export class VmDetails extends React.Component {
               <dd id={prefixedId(id, 'workload-profile')}>{getWorkloadProfile(vm) || DASHES}</dd>
 
               <dt>Template</dt>
-              <dd id={prefixedId(id, 'template')}>{template ? `${template.namespace}/${template.name}` : DASHES}</dd>
+              <dd id={prefixedId(id, 'template')}>{templateLabel}</dd>
             </dl>
             <div className="kubevirt-vm-details__other-details">
               <dl className="kubevirt-vm-details__details-list">

diff --git a/src/components/Details/VmDetails/fixtures/VmDetails.fixture.js b/src/components/Details/VmDetails/fixtures/VmDetails.fixture.js
@@ -87,6 +87,35 @@ export const vmFixtures = {
       running: false,
     },
   },
+  vmWithDeletedTemplate: {
+    metadata: {
+      ...metadata,
+      labels: {
+        'flavor.template.cnv.io/small': 'true',
+        'os.template.cnv.io/fedora29': 'true',
+        [LABEL_USED_TEMPLATE_NAME]: 'deleted-template',
+        [LABEL_USED_TEMPLATE_NAMESPACE]: 'default',
+        'workload.template.cnv.io/generic': 'true',
+      },
+    },
+    spec: {
+      template: {
+        spec: {
+          domain: {
+            cpu: {
+              cores: 2,
+            },
+            resources: {
+              requests: {
+                memory: '2G',
+              },
+            },
+          },
+        },
+      },
+      running: false,
+    },
+  },
   customVm: {
     metadata: {
       ...metadata,
@@ -204,4 +233,14 @@ export default [
       overview: true,
     },
   },
+  {
+    component: VmDetails,
+    name: 'VM detail with deleted template',
+    props: {
+      vm: vmFixtures.vmWithDeletedTemplate,
+      k8sPatch,
+      k8sGet,
+      NodeLink: () => true,
+    },
+  },
 ];
diff --git a/src/components/Details/VmDetails/tests/VmDetails.test.js b/src/components/Details/VmDetails/tests/VmDetails.test.js
@@ -15,6 +15,8 @@ import { getId } from '../../../../selectors';
 
 const testVmDetails = (vm, otherProps) => <VmDetails {...VmDetailsFixture[0].props} vm={vm} {...otherProps} />;
 
+const flushAllPromises = () => new Promise(resolve => setImmediate(resolve));
+
 describe('<VmDetails />', () => {
   it('renders correctly', () => {
     const component = render(testVmDetails(vmFixtures.downVm));
@@ -73,6 +75,19 @@ describe('<VmDetails /> enzyme', () => {
     return disablesEditOnCancel(component);
   });
 
+  it('renders deleted template correctly', async () => {
+    const component = mount(testVmDetails(vmFixtures.vmWithDeletedTemplate));
+
+    // Wait for all promisses to terminate.
+    //
+    // Testing for deleted template is done using a promise
+    // we need to wait for.
+    await flushAllPromises();
+    component.update();
+
+    expect(component.render()).toMatchSnapshot();
+  });
+
   it('updates VM description after clicking save button', () => {
     const k8sPatchMock = jest.fn().mockReturnValue(
       new Promise(resolve => {

diff --git a/src/components/Details/VmDetails/tests/__snapshots__/VmDetails.test.js.snap b/src/components/Details/VmDetails/tests/__snapshots__/VmDetails.test.js.snap
@@ -175,6 +175,183 @@ Array [
 ]
 `;
 
+exports[`<VmDetails /> enzyme renders deleted template correctly 1`] = `
+Array [
+  <h1
+    class="co-m-pane__heading"
+  >
+    Virtual Machine Overview
+    <div>
+      <button
+        class="btn btn-default"
+        type="button"
+      >
+        Edit
+      </button>
+    </div>
+  </h1>,
+  <div
+    class="kubevirt-vm-details__content"
+  >
+    <dl
+      class="kubevirt-vm-details__name-list"
+    >
+      <dt
+        class=""
+      >
+        Name
+      </dt>
+      <dd
+        class=""
+        id="my-namespace-my-vm-name"
+      >
+        my-vm
+      </dd>
+      <dt
+        class=""
+      >
+        Description
+      </dt>
+      <dd>
+        <div
+          class="kubevirt-vm-details__description"
+        >
+          <div
+            id="my-namespace-my-vm-description"
+          >
+            ---
+          </div>
+        </div>
+      </dd>
+    </dl>
+    <div
+      class="kubevirt-vm-details__details"
+    >
+      <dl
+        class="kubevirt-vm-details__details-list"
+      >
+        <dt>
+          Status
+        </dt>
+        <dd>
+          <div>
+            <span
+              aria-hidden="true"
+              class="kubevirt-vm-status__icon pficon pficon-off"
+            />
+            Off
+          </div>
+        </dd>
+        <dt>
+          Operating System
+        </dt>
+        <dd
+          id="my-namespace-my-vm-os"
+        >
+          fedora29
+        </dd>
+        <dt>
+          IP Addresses
+        </dt>
+        <dd
+          id="my-namespace-my-vm-ip-addresses"
+        >
+          ---
+        </dd>
+        <dt>
+          Workload Profile
+        </dt>
+        <dd
+          id="my-namespace-my-vm-workload-profile"
+        >
+          generic
+        </dd>
+        <dt>
+          Template
+        </dt>
+        <dd
+          id="my-namespace-my-vm-template"
+        >
+          default/deleted-template (Missing)
+        </dd>
+      </dl>
+      <div
+        class="kubevirt-vm-details__other-details"
+      >
+        <dl
+          class="kubevirt-vm-details__details-list"
+        >
+          <dt>
+            FQDN
+          </dt>
+          <dd
+            id="my-namespace-my-vm-fqdn"
+          >
+            ---
+          </dd>
+          <dt>
+            Namespace
+          </dt>
+          <dd
+            id="my-namespace-my-vm-namespace"
+          >
+            ---
+          </dd>
+          <dt>
+            Pod
+          </dt>
+          <dd
+            id="my-namespace-my-vm-pod"
+          >
+            ---
+          </dd>
+          <dd>
+            ---
+          </dd>
+          <dt>
+            Boot Order
+          </dt>
+          <dd
+            id="my-namespace-my-vm-boot-order"
+          >
+            ---
+          </dd>
+        </dl>
+        <dl
+          class="kubevirt-vm-details__details-list"
+        >
+          <dt>
+            Node
+          </dt>
+          <dd
+            id="my-namespace-my-vm-node"
+          >
+            ---
+          </dd>
+          <dt>
+            Flavor
+          </dt>
+          <dd>
+            <div>
+              <div
+                id="my-namespace-my-vm-flavor"
+              >
+                small
+              </div>
+              <div
+                id="my-namespace-my-vm-flavor-description"
+              >
+                2 CPU, 2G Memory
+              </div>
+            </div>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`<VmDetails /> renders CPU and Memory settings for VM with custom flavor 1`] = `
 Array [
   <h1

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -59,6 +59,8 @@ export const OS_WINDOWS_PREFIX = 'win';
 
 export const DEFAULT_RDP_PORT = 3389;
 export const DASHES = '---';
+export const MISSING_STR = '(Missing)';
+export const PENDING_STR = '(Pending)';
 
 export const CDI_KUBEVIRT_IO = 'cdi.kubevirt.io';
 export const STORAGE_IMPORT_PVC_NAME = 'storage.import.importPvcName';