feat(topology): show vm node details in the sidepanel

plugins/topology/README.md

@@ -112,6 +112,7 @@ The following permission must be granted to the [`ClusterRole`](https://backstag
 
 ##### To view the Virtual Machines
 
+- OpenShift Virtualization Operator is [installed and configured](https://docs.openshift.com/container-platform/4.8/virt/install/installing-virt-web.html#virt-installing-virt-operator_installing-virt-web) on a Kubernetes cluster.
 - Ensure that read access is granted to the VirtualMachines resource in the [`ClusterRole`](https://backstage.io/docs/features/kubernetes/configuration#role-based-access-control). You can use the following code to do so:
 
   ```yaml
@@ -140,6 +141,9 @@ The following permission must be granted to the [`ClusterRole`](https://backstag
         - group: 'kubevirt.io'
           apiVersion: 'v1'
           plural: 'virtualmachines'
+        - group: 'kubevirt.io'
+          apiVersion: 'v1'
+          plural: 'virtualmachineinstances'
   ```
 
 ##### To enable the Source Code Editor

plugins/topology/src/components/Topology/TopologyComponent.tsx

@@ -45,6 +45,7 @@ export const TopologyComponent = () => {
     TektonModels.pipelines,
     ModelsPlural.checlusters,
     ModelsPlural.virtualmachines,
+    ModelsPlural.virtualmachineinstances,
   ];
 
   const k8sResourcesContextData = useK8sObjectsResponse(watchedResources);

plugins/topology/src/components/Topology/TopologySideBar/TopologyDetailsTabPanel.tsx

@@ -17,11 +17,14 @@ import {
   PodModel,
   StatefulSetModel,
 } from '../../../models';
+import { VMKind } from '../../../types/vm';
+import { VirtualMachineModel } from '../../../vm-models';
 import PodSet from '../../Pods/PodSet';
 import TopologyCronJobDetails from './TopologyCronJobDetails';
 import TopologyDaemonSetDetails from './TopologyDaemonSetDetails';
 import TopologyDeploymentDetails from './TopologyDeploymentDetails';
 import TopologyJobDetails from './TopologyJobDetails';
+import TopologyVirtualMachineDetails from './TopologyVirtualMachineDetails';
 import TopologyWorkloadDetails from './TopologyWorkloadDetails';
 
 import './TopologyDetailsTabPanel.css';
@@ -37,9 +40,10 @@ const TopologyDetailsTabPanel = ({ node }: TopologyDetailsTabPanelProps) => {
   const donutStatus = data.data?.podsData;
   const cx = width / 2;
   const cy = height / 2;
-
   const getWorkloadDetails = () => {
     switch (resourceKind) {
+      case VirtualMachineModel.kind:
+        return <TopologyVirtualMachineDetails vm={resource as VMKind} />;
       case DeploymentModel.kind:
         return (
           <TopologyDeploymentDetails resource={resource as V1Deployment} />
@@ -59,7 +63,7 @@ const TopologyDetailsTabPanel = ({ node }: TopologyDetailsTabPanelProps) => {
 
   return (
     <div className="topology-details-tab" data-testid="details-tab">
-      {donutStatus && (
+      {donutStatus && resourceKind !== VirtualMachineModel.kind && (
         <Split className="topology-side-bar-pod-ring">
           <SplitItem>
             <PodSet

plugins/topology/src/components/Topology/TopologySideBar/TopologyVirtualMachineDetails.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { ResourceIcon } from '../../../common/components/ResourceName';
+import { LABEL_USED_TEMPLATE_NAME } from '../../../const';
+import { K8sResourcesContext } from '../../../hooks/K8sResourcesContext';
+import { VMKind } from '../../../types/vm';
+import {
+  findPodFromVMI,
+  findVMI,
+  getDescription,
+  getGPUDevices,
+  getHostDevices,
+  getLabel,
+  getLabeledDevices,
+  getNodeName,
+  getOperatingSystem,
+  getOperatingSystemName,
+  getVmiIpAddresses,
+  getVMINodeName,
+  getWorkloadProfile,
+  isV1Pod,
+  isVMIKind,
+} from '../../../utils/vm-utils';
+import { BootOrderSummary } from '../boot-order/boot-order-summary';
+import TopologySideBarDetailsItem from './TopologySideBarDetailsItem';
+import TopologyWorkloadDetails from './TopologyWorkloadDetails';
+
+type TopologyVirtualMachineDetailsProps = {
+  vm: VMKind;
+};
+
+const TopologyVirtualMachineDetails = ({
+  vm,
+}: TopologyVirtualMachineDetailsProps) => {
+  const resources = React.useContext(K8sResourcesContext);
+  const allPods = resources?.watchResourcesData?.pods?.data?.filter(isV1Pod);
+  const allVMIs =
+    resources?.watchResourcesData?.virtualmachineinstances?.data?.filter(
+      isVMIKind,
+    );
+  const vmi = findVMI(vm, allVMIs);
+  const pods = findPodFromVMI(vmi, allPods);
+  const devices = getLabeledDevices(vm) || [];
+  const ipAddrs = getVmiIpAddresses(vmi); // Need data to test
+  const description = getDescription(vm);
+  const templateName = getLabel(vm, LABEL_USED_TEMPLATE_NAME);
+  const nodeName = getVMINodeName(vmi) || getNodeName(pods);
+  const os = getOperatingSystemName(vm) || getOperatingSystem(vm);
+  const workloadProfile = getWorkloadProfile(vm);
+
+  return (
+    <>
+      <div className="topology-workload-details">
+        <TopologyWorkloadDetails resource={vm}>
+          <TopologySideBarDetailsItem label="Status">
+            {vm?.status?.printableStatus}
+          </TopologySideBarDetailsItem>
+        </TopologyWorkloadDetails>
+      </div>
+      <div
+        className="topology-workload-details"
+        data-testid="virtualmachine-details"
+      >
+        <TopologySideBarDetailsItem
+          label="Description"
+          emptyText="Not available"
+        >
+          {description}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem
+          label="Operating System"
+          emptyText="Not available"
+        >
+          {os}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem label="Template">
+          <ResourceIcon kind="Template" />
+          {templateName}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem label="Pod">
+          {pods?.map(pod => (
+            <label key={pod?.metadata?.uid}>{pod?.metadata?.name}</label>
+          ))}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem label="Boot order">
+          <BootOrderSummary devices={devices} />
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem label="IP address">
+          {ipAddrs}
+        </TopologySideBarDetailsItem>
+        {/* <TopologySideBarDetailsItem label="Hostname">
+          {vm.spec?.strategy?.type}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem label="Time zone">
+          {vm.spec?.strategy?.type}
+        </TopologySideBarDetailsItem> */}
+        <TopologySideBarDetailsItem label="Node" emptyText="Not available">
+          {nodeName}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem
+          label="Workload profile"
+          emptyText="Not available"
+        >
+          {workloadProfile}
+        </TopologySideBarDetailsItem>
+        {/* <TopologySideBarDetailsItem label="User credentials">
+          {vm.spec?.strategy?.type}
+        </TopologySideBarDetailsItem>
+        <TopologySideBarDetailsItem label="SSH access">
+          <span data-test="details-item-ssh-access-port">
+          {vmiReady ?
+            sshServicesRunning ?  `Port: ${sshServicePort}`
+             : 'SSH service disabled'
+
+          :
+            'Virtual machine not running')
+          }
+        </span>
+        </TopologySideBarDetailsItem> */}
+        <TopologySideBarDetailsItem label="Hardware devices">
+          <div>GPU devices: {getGPUDevices(vm).length}</div>
+          <div>Host devices: {getHostDevices(vm).length}</div>
+        </TopologySideBarDetailsItem>
+      </div>
+    </>
+  );
+};
+
+export default TopologyVirtualMachineDetails;

plugins/topology/src/components/Topology/boot-order/boot-order-empty-summary.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { ExpandableSection, Text, TextVariants } from '@patternfly/react-core';
+
+import { BootableDeviceType } from '../../../types/vm';
+import { deviceKey, deviceLabel } from '../../../utils/vm-utils';
+
+import './boot-order.css';
+
+export const BootOrderEmptySummary: React.FC<BootOrderEmptySummaryProps> = ({
+  devices,
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const options = devices.filter(device => !device.value.bootOrder);
+  const onToggle = React.useCallback(
+    () => setIsExpanded(!isExpanded),
+    [isExpanded],
+  );
+
+  // Note(Yaacov):
+  // className='text-secondary' is a hack to fix TextVariants being overriden.
+  // Using <ol> because '@patternfly/react-core' <List> currently miss isOrder parameter.
+  return (
+    <>
+      <Text
+        component={TextVariants.p}
+        className="kubevirt-boot-order-summary__empty-text"
+      >
+        No resource selected
+      </Text>
+      <Text component={TextVariants.small} className="text-secondary">
+        VM will attempt to boot from disks by order of apearance in YAML file
+      </Text>
+      {options.length > 0 && (
+        <ExpandableSection
+          toggleText={
+            isExpanded ? 'Hide default boot disks' : 'Show default boot disks'
+          }
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          className="kubevirt-boot-order-summary__expandable"
+        >
+          <ol className="kubevirt-boot-order-summary__ol">
+            {options.map(option => (
+              <li key={deviceKey(option)}>{deviceLabel(option)}</li>
+            ))}
+          </ol>
+        </ExpandableSection>
+      )}
+    </>
+  );
+};
+
+export type BootOrderEmptySummaryProps = {
+  devices: BootableDeviceType[];
+};

plugins/topology/src/components/Topology/boot-order/boot-order-summary.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import * as _ from 'lodash';
+
+import { BootableDeviceType } from '../../../types/vm';
+import { deviceKey, deviceLabel } from '../../../utils/vm-utils';
+import { BootOrderEmptySummary } from './boot-order-empty-summary';
+
+// NOTE(yaacov): using <ol> because '@patternfly/react-core' <List> currently miss isOrder parameter.
+export const BootOrderSummary: React.FC<BootOrderSummaryProps> = ({
+  devices,
+}) => {
+  const sources = _.sortBy(
+    devices.filter(device => device.value.bootOrder),
+    'value.bootOrder',
+  );
+
+  return (
+    <>
+      {sources.length === 0 ? (
+        <BootOrderEmptySummary devices={devices} />
+      ) : (
+        <ol>
+          {sources.map(source => (
+            <li key={deviceKey(source)}>{deviceLabel(source)}</li>
+          ))}
+        </ol>
+      )}
+    </>
+  );
+};
+
+export type BootOrderSummaryProps = {
+  devices: BootableDeviceType[];
+};

plugins/topology/src/components/Topology/boot-order/boot-order.css

@@ -0,0 +1,10 @@
+.kubevirt-boot-order-summary__empty-text {
+  margin-bottom: 0;
+}
+.kubevirt-boot-order-summary__expandable {
+  margin-top: 0;
+}
+.kubevirt-boot-order-summary__ol {
+  margin-left: 1.5rem;
+  margin-top: -1rem;
+}

plugins/topology/src/const.ts

@@ -36,3 +36,8 @@ export const TOPOLOGY_FILTERS = [
     disabled: false,
   },
 ];
+
+export const LABEL_USED_TEMPLATE_NAME = 'vm.kubevirt.io/template';
+export const TEMPLATE_OS_LABEL = 'os.template.kubevirt.io';
+export const TEMPLATE_OS_NAME_ANNOTATION = 'name.os.template.kubevirt.io';
+export const TEMPLATE_WORKLOAD_LABEL = 'workload.template.kubevirt.io';

plugins/topology/src/data-transforms/data-transformer.ts

@@ -4,7 +4,7 @@ import { Model, NodeModel, NodeShape } from '@patternfly/react-topology';
 import { TYPE_APPLICATION_GROUP, TYPE_VM, TYPE_WORKLOAD } from '../const';
 import { CronJobModel } from '../models';
 import { K8sResponseData, K8sWorkloadResource } from '../types/types';
-import { VM_TYPE } from '../types/vms';
+import { VM_TYPE } from '../types/vm';
 import { getPipelinesDataForResource } from '../utils/pipeline-utils';
 import { getPodsDataForResource } from '../utils/pod-resource-utils';
 import {

plugins/topology/src/models.ts

@@ -8,7 +8,12 @@ import {
   TaskRunModel,
 } from './pipeline-models';
 import { GroupVersionKind, Model } from './types/types';
-import { VirtualMachineGVK, VirtualMachineModel } from './vm-models';
+import {
+  VirtualMachineGVK,
+  VirtualMachineInstanceGVK,
+  VirtualMachineInstanceModel,
+  VirtualMachineModel,
+} from './vm-models';
 
 export const ReplicaSetGVK: GroupVersionKind = {
   apiVersion: 'v1',
@@ -72,6 +77,12 @@ export const CheClusterGVK: GroupVersionKind = {
   apiGroup: 'org.eclipse.che',
   kind: 'CheCluster',
 };
+export const TemplateGVK: GroupVersionKind = {
+  apiVersion: 'v1',
+  apiGroup: 'template.openshift.io',
+  kind: 'Template',
+};
+
 export enum ModelsPlural {
   deployments = 'deployments',
   pods = 'pods',
@@ -87,6 +98,8 @@ export enum ModelsPlural {
   pipelineruns = 'pipelineruns',
   checlusters = 'checlusters',
   virtualmachines = 'virtualmachines',
+  virtualmachineinstances = 'virtualmachineinstances',
+  // replicationcontrollers = 'replicationcontrollers',
 }
 
 export const resourceGVKs: { [key: string]: GroupVersionKind } = {
@@ -105,6 +118,7 @@ export const resourceGVKs: { [key: string]: GroupVersionKind } = {
   [PipelineModelsPlural.taskruns]: TaskRunGVK,
   [ModelsPlural.checlusters]: CheClusterGVK,
   [ModelsPlural.virtualmachines]: VirtualMachineGVK,
+  [ModelsPlural.virtualmachineinstances]: VirtualMachineInstanceGVK,
 };
 
 export const DeploymentModel: Model = {
@@ -175,6 +189,14 @@ export const CheClusterModel: Model = {
   plural: 'checlusters',
 };
 
+export const TemplateModel: Model = {
+  ...TemplateGVK,
+  plural: 'templates',
+  abbr: 'T',
+  labelPlural: 'Templates',
+  color: '#2b9af3',
+};
+
 export const resourceModels = {
   [DeploymentModel.kind]: DeploymentModel,
   [PodModel.kind]: PodModel,
@@ -190,4 +212,6 @@ export const resourceModels = {
   [TaskRunModel.kind]: TaskRunModel,
   [CheClusterModel.kind]: CheClusterModel,
   [VirtualMachineModel.kind]: VirtualMachineModel,
+  [VirtualMachineInstanceModel.kind]: VirtualMachineInstanceModel,
+  [TemplateModel.kind]: TemplateModel,
 };