Get correct VM icons

openshift · Apr 14, 2020 · f358b18 · f358b18
1 parent e00b863
commit f358b18
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git a/frontend/packages/dev-console/src/components/topology/topology-types.ts b/frontend/packages/dev-console/src/components/topology/topology-types.ts
@@ -38,6 +38,7 @@ export interface TopologyDataResources {
   serviceBindingRequests?: FirehoseResult;
   virtualmachines?: FirehoseResult;
   virtualmachineinstances?: FirehoseResult;
+  virtualmachinetemplates?: FirehoseResult;
   migrations?: FirehoseResult;
 }
 

diff --git a/frontend/packages/kubevirt-plugin/src/plugin.tsx b/frontend/packages/kubevirt-plugin/src/plugin.tsx
@@ -67,6 +67,14 @@ export const virtualMachineConfigurations = (namespace: string): FirehoseResourc
       namespace,
       prop: 'virtualmachineinstances',
     },
+    {
+      isList: true,
+      kind: TemplateModel.kind,
+      prop: 'virtualmachinetemplates',
+      selector: {
+        matchLabels: { 'template.kubevirt.io/type': 'base' },
+      },
+    },
     {
       isList: true,
       kind: models.VirtualMachineInstanceMigrationModel.kind,

diff --git a/frontend/packages/kubevirt-plugin/src/topology/components/nodes/VmNode.tsx b/frontend/packages/kubevirt-plugin/src/topology/components/nodes/VmNode.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { Tooltip } from '@patternfly/react-core';
+import { VirtualMachineIcon } from '@patternfly/react-icons';
 import {
   Node,
   observer,
@@ -160,6 +161,18 @@ const ObservedVmNode: React.FC<VmNodeProps> = ({
     />
   );
 
+  const imageProps = {
+    x: width / 2 - iconRadius,
+    y: height / 2 - iconRadius,
+    width: iconRadius * 2,
+    height: iconRadius * 2,
+  };
+  const imageComponent = osImage ? (
+    <image {...imageProps} xlinkHref={osImage} />
+  ) : (
+    <VirtualMachineIcon {...imageProps} />
+  );
+
   return (
     <g>
       <Tooltip
@@ -208,15 +221,7 @@ const ObservedVmNode: React.FC<VmNodeProps> = ({
               width={width - (VM_STATUS_GAP + VM_STATUS_WIDTH) * 2}
               height={height - (VM_STATUS_GAP + VM_STATUS_WIDTH) * 2}
             />
-            {osImage && (
-              <image
-                x={width / 2 - iconRadius}
-                y={height / 2 - iconRadius}
-                width={iconRadius * 2}
-                height={iconRadius * 2}
-                xlinkHref={osImage}
-              />
-            )}
+            {imageComponent}
             {showLabels && (vmData.kind || element.getLabel()) && (
               <SvgBoxedText
                 className="odc-base-node__label"

diff --git a/frontend/packages/kubevirt-plugin/src/topology/kubevirt-data-transformer.ts b/frontend/packages/kubevirt-plugin/src/topology/kubevirt-data-transformer.ts
@@ -21,26 +21,19 @@ import {
 import { VMIKind, VMKind } from '../types';
 import { VirtualMachineModel } from '../models';
 import { getVMStatus } from '../statuses/vm/vm';
-import { getOperatingSystem, getOperatingSystemName } from '../selectors/vm';
 import { TYPE_VIRTUAL_MACHINE } from './components/const';
 import { getPodsForVMI } from '../selectors/pod/selectors';
 
 export const kubevirtAllowedResources = ['virtualmachines'];
 
-const getOperatingSystemImage = (vm: VMKind): string => {
-  const os = getOperatingSystemName(vm) || getOperatingSystem(vm);
-
-  // TODO: Fix this to correctly identify images per OS name.
-  let iconName = 'other-unknown';
-  if (os?.toLowerCase().startsWith('fedora')) {
-    iconName = 'fedora';
-  } else if (os?.toLowerCase().startsWith('red hat')) {
-    iconName = 'redhat';
-  } else if (os?.toLowerCase().startsWith('microsoft')) {
-    iconName = 'windows';
+export const getOperatingSystemImage = (vm: VMKind, templates: K8sResourceKind[]): string => {
+  const templateName = vm.metadata.labels['vm.kubevirt.io/template'];
+  const template = templates.find((t) => t.metadata.name === templateName);
+  if (!template) {
+    return '';
   }
 
-  return getImageForIconClass(`icon-${iconName}`);
+  return getImageForIconClass(template.metadata.annotations.iconClass);
 };
 
 export const createVMOverviewItem = (vm: VMKind, vmi: VMIKind, resources: any): OverviewItem => {
@@ -106,7 +99,7 @@ const createTopologyVMNodeData = (
       vmi,
       migrations,
       statusDetail,
-      osImage: getOperatingSystemImage(vm as VMKind),
+      osImage: getOperatingSystemImage(vm as VMKind, resources.virtualmachinetemplates.data),
     },
   };
 };