kubevirt: Add VM dashboard

frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/index.ts

@@ -0,0 +1 @@
+export * from './vm-details-card';

frontend/packages/kubevirt-plugin/src/components/dashboards-page/vm-dashboard/vm-details-card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { DashboardItemProps } from '@console/internal/components/dashboards-page/with-dashboard-resources';
+import {
+  DashboardCard,
+  DashboardCardHeader,
+  DashboardCardTitle,
+  DashboardCardBody,
+  DashboardCardLink,
+} from '@console/internal/components/dashboard/dashboard-card';
+import { DetailsBody, DetailItem } from '@console/internal/components/dashboard/details-card';
+import { getName, getNamespace, getUID, getCreationTimestamp } from '@console/shared';
+import {
+  ResourceLink,
+  Timestamp,
+  NodeLink,
+  resourcePath,
+} from '@console/internal/components/utils';
+import { VMDashboardContext } from '../../vms/vm-dashboard-context';
+import { getNodeName } from '../../../selectors/pod/selectors';
+import { isVMRunning } from '../../../selectors/vm';
+import { getVMStatus } from '../../../statuses/vm/vm';
+import { VirtualMachineModel } from '../../../models';
+import { getVmiIpAddressesString } from '../../ip-addresses';
+import { VM_DETAIL_OVERVIEW_HREF } from '../../../constants';
+
+export const VMDetailsCard: React.FC<VMDetailsCardProps> = () => {
+  const vmDashboardContext = React.useContext(VMDashboardContext);
+  const { vm, vmi, pods, migrations } = vmDashboardContext;
+
+  const vmStatus = getVMStatus(vm, pods, migrations);
+  const { launcherPod } = vmStatus;
+
+  const ipAddrs = getVmiIpAddressesString(vmi, vmStatus);
+
+  const isNodeLoading = !vm || !pods || !vmStatus;
+  const name = getName(vm);
+  const namespace = getNamespace(vm);
+
+  const viewAllLink = `${resourcePath(
+    VirtualMachineModel.kind,
+    name,
+    namespace,
+  )}/${VM_DETAIL_OVERVIEW_HREF}`;
+
+  return (
+    <DashboardCard>
+      <DashboardCardHeader>
+        <DashboardCardTitle>Details</DashboardCardTitle>
+        <DashboardCardLink to={viewAllLink}>View all</DashboardCardLink>
+      </DashboardCardHeader>
+      <DashboardCardBody isLoading={false}>
+        <DetailsBody>
+          <DetailItem title="Name" error={false} isLoading={!vm}>
+            {name}
+          </DetailItem>
+          <DetailItem title="Namespace" error={false} isLoading={!vm}>
+            <ResourceLink kind="Namespace" name={namespace} title={getUID(vm)} namespace={null} />
+          </DetailItem>
+          <DetailItem title="Created" error={false} isLoading={!vm}>
+            <Timestamp timestamp={getCreationTimestamp(vm)} />
+          </DetailItem>
+          <DetailItem
+            title="Node"
+            error={!isNodeLoading && (!launcherPod || !isVMRunning(vm))}
+            isLoading={isNodeLoading}
+          >
+            {launcherPod && <NodeLink name={getNodeName(launcherPod)} />}
+          </DetailItem>
+          <DetailItem title="IP Address" error={!ipAddrs} isLoading={!vm}>
+            {ipAddrs}
+          </DetailItem>
+        </DetailsBody>
+      </DashboardCardBody>
+    </DashboardCard>
+  );
+};
+
+type VMDetailsCardProps = DashboardItemProps;

frontend/packages/kubevirt-plugin/src/components/ip-addresses.ts

@@ -0,0 +1,10 @@
+import { getVmiIpAddresses, isVmOff } from 'kubevirt-web-ui-components';
+import { VMIKind } from '../types';
+import { VMStatus } from '../statuses/vm/vm';
+
+// the vmStatus is precomputed by caller for optimization
+export const getVmiIpAddressesString = (vmi: VMIKind, vmStatus: VMStatus): string => {
+  const vmIsOff = vmStatus && isVmOff(vmStatus);
+  const ipAddresses = vmIsOff ? [] : getVmiIpAddresses(vmi);
+  return ipAddresses.length > 0 ? ipAddresses.join(', ') : null;
+};

frontend/packages/kubevirt-plugin/src/components/vms/vm-dashboard-context.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PodKind, K8sResourceKind } from '@console/internal/module/k8s';
+import { VMKind, VMIKind } from '../../types';
+
+export const VMDashboardContext = React.createContext<VMDashboardContext>({});
+
+type VMDashboardContext = {
+  vm?: VMKind;
+  pods?: PodKind[];
+  migrations?: K8sResourceKind[];
+  vmi?: VMIKind;
+};

frontend/packages/kubevirt-plugin/src/components/vms/vm-dashboard.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Dashboard, DashboardGrid } from '@console/internal/components/dashboard';
+import { K8sResourceKind, PodKind } from '@console/internal/module/k8s';
+import { VMKind, VMIKind } from '../../types';
+import { VMDetailsCard } from '../dashboards-page/vm-dashboard/vm-details-card';
+import { VMDashboardContext } from './vm-dashboard-context';
+
+const mainCards = [];
+const leftCards = [{ Card: VMDetailsCard }];
+const rightCards = [];
+
+export const VMDashboard: React.FC<VMDashboardProps> = (props) => {
+  const { obj: vm, vmi, pods, migrations } = props;
+
+  const context = {
+    vm,
+    vmi,
+    pods,
+    migrations,
+  };
+
+  return (
+    <div className="co-m-pane__body">
+      <VMDashboardContext.Provider value={context}>
+        <Dashboard>
+          <DashboardGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
+        </Dashboard>
+      </VMDashboardContext.Provider>
+    </div>
+  );
+};
+
+type VMDashboardProps = {
+  obj?: VMKind;
+  vmi?: VMIKind;
+  pods?: PodKind[];
+  migrations?: K8sResourceKind[];
+};

frontend/packages/kubevirt-plugin/src/components/vms/vm-details-page.tsx

@@ -7,10 +7,12 @@ import { VMDisksFirehose } from '../vm-disks';
 import { VMNics } from '../vm-nics';
 import { VirtualMachineInstanceMigrationModel, VirtualMachineInstanceModel } from '../../models';
 import { getResource } from '../../utils';
+import { VM_DETAIL_OVERVIEW_HREF } from '../../constants';
 import { VMEvents } from './vm-events';
 import { VMConsoleFirehose } from './vm-console';
 import { VMDetailsFirehose } from './vm-details';
 import { menuActionsCreator } from './menu-actions';
+import { VMDashboard } from './vm-dashboard';
 
 export const VirtualMachinesDetailsPage: React.FC<VirtualMachinesDetailsPageProps> = (props) => {
   const { name, namespace } = props;
@@ -27,6 +29,18 @@ export const VirtualMachinesDetailsPage: React.FC<VirtualMachinesDetailsPageProp
     getResource(VirtualMachineInstanceMigrationModel, { namespace, prop: 'migrations' }),
   ];
 
+  const dashboardPage = {
+    href: '', // default landing page
+    name: 'Dashboard',
+    component: VMDashboard,
+  };
+
+  const overviewPage = {
+    href: VM_DETAIL_OVERVIEW_HREF,
+    name: 'Overview',
+    component: VMDetailsFirehose,
+  };
+
   const consolePage = {
     href: 'consoles',
     name: 'Consoles',
@@ -46,7 +60,8 @@ export const VirtualMachinesDetailsPage: React.FC<VirtualMachinesDetailsPageProp
   };
 
   const pages = [
-    navFactory.details(VMDetailsFirehose),
+    dashboardPage,
+    overviewPage,
     navFactory.editYaml(),
     consolePage,
     navFactory.events(VMEvents),

frontend/packages/kubevirt-plugin/src/components/vms/vm-resource.tsx

@@ -2,13 +2,11 @@ import * as React from 'react';
 import {
   getOperatingSystemName,
   getOperatingSystem,
-  getVmiIpAddresses,
   getWorkloadProfile,
   getVmTemplate,
   getNodeName,
   VmStatuses,
   BootOrder,
-  isVmOff,
   getBootableDevicesInOrder,
 } from 'kubevirt-web-ui-components';
 import { ResourceSummary, NodeLink, ResourceLink } from '@console/internal/components/utils';
@@ -23,6 +21,7 @@ import { getDescription } from '../../selectors/selectors';
 import { getVMStatus } from '../../statuses/vm/vm';
 import { FlavorText } from '../flavor-text';
 import { EditButton } from '../edit-button';
+import { getVmiIpAddressesString } from '../ip-addresses';
 
 import './_vm-resource.scss';
 
@@ -64,8 +63,6 @@ export const VMDetailsList: React.FC<VMResourceListProps> = ({
   const { launcherPod } = vmStatus;
   const sortedBootableDevices = getBootableDevicesInOrder(vm);
   const nodeName = getNodeName(launcherPod);
-  const vmIsOff = isVmOff(vmStatus);
-  const ipAddresses = vmIsOff ? [] : getVmiIpAddresses(vmi);
 
   return (
     <dl className="co-m-pane__details">
@@ -94,9 +91,7 @@ export const VMDetailsList: React.FC<VMResourceListProps> = ({
         )}
       </dd>
       <dt>IP Address</dt>
-      <dd id={prefixedID(id, 'ip-addresses')}>
-        {ipAddresses.length > 0 ? ipAddresses.join(', ') : DASH}
-      </dd>
+      <dd id={prefixedID(id, 'ip-addresses')}>{getVmiIpAddressesString(vmi, vmStatus) || DASH}</dd>
       <dt>Node</dt>
       <dd id={prefixedID(id, 'node')}>{<NodeLink name={nodeName} />}</dd>
       <dt>Flavor</dt>

frontend/packages/kubevirt-plugin/src/constants/vm/constants.ts

@@ -19,3 +19,5 @@ export const TEMPLATE_VM_NAME_LABEL = 'vm.kubevirt.io/name';
 export const TEMPLATE_OS_NAME_ANNOTATION = 'name.os.template.kubevirt.io';
 
 export const DEFAULT_RDP_PORT = 3389;
+
+export const VM_DETAIL_OVERVIEW_HREF = 'overview';

frontend/packages/kubevirt-plugin/src/statuses/vm/vm.ts

@@ -188,7 +188,11 @@ const isWaitingForVMI = (vm: VMKind): VMStatus => {
   return NOT_HANDLED;
 };
 
-export const getVMStatus = (vm: VMKind, pods: PodKind[], migrations: K8sResourceKind[]) => {
+export const getVMStatus = (
+  vm: VMKind,
+  pods: PodKind[],
+  migrations: K8sResourceKind[],
+): VMStatus => {
   const launcherPod = findVMPod(pods, vm, VIRT_LAUNCHER_POD_PREFIX);
   return (
     isV2VConversion(vm, pods) || // these statuses must precede isRunning() because they do not rely on ready vms
@@ -209,7 +213,7 @@ export const getSimpleVMStatus = (vm: VMKind, pods: PodKind[], migrations: K8sRe
     : VM_SIMPLE_STATUS_OTHER;
 };
 
-type VMStatus = Status & {
+export type VMStatus = Status & {
   pod?: PodKind;
   launcherPod?: PodKind;
   progress?: number;

frontend/public/components/dashboard/details-card/detail-item.tsx

@@ -5,7 +5,7 @@ export const DetailItem: React.FC<DetailItemProps> = React.memo(
   ({ title, isLoading = false, children, error = false }) => {
     let status: React.ReactNode;
     if (error) {
-      status = <span className="text-secondary">Unavailable</span>;
+      status = <span className="text-secondary">Not available</span>;
     } else if (isLoading) {
       status = <LoadingInline />;
     } else {