add vm template details page

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template-details.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { getResource } from 'kubevirt-web-ui-components';
+
+import {
+  Firehose,
+  StatusBox,
+  ScrollToTopOnMount,
+  SectionHeading,
+} from '@console/internal/components/utils';
+
+import { TemplateKind } from '@console/internal/module/k8s';
+import { VmTemplateResourceSummary } from './vm-template-resource';
+import { TemplateModel } from '../../../../../public/models/index';
+
+export const VmTemplateDetailsFirehose = ({ obj: template }: { obj: TemplateKind }) => {
+  const { name, namespace } = template.metadata;
+
+  const vmtRes = getResource(TemplateModel, {
+    name,
+    namespace,
+    isList: false,
+    prop: 'vmt',
+    optional: true,
+  });
+
+  const resources = [vmtRes];
+
+  return (
+    <div className="co-m-pane__body">
+      <Firehose resources={resources}>
+        <VmTemplateDetails template={template} />
+      </Firehose>
+    </div>
+  );
+};
+
+const VmTemplateDetails = (props: VmTemplateDetailsProps) => {
+  const { template, ...restProps } = props;
+  const flatResources = {
+    template,
+  };
+
+  return (
+    <StatusBox data={template} {...restProps}>
+      <ScrollToTopOnMount />
+      <div className="co-m-pane__body">
+        <SectionHeading text="VM Template Overview" />
+        <div className="row">
+          <div className="col-sm-6">
+            <VmTemplateResourceSummary {...flatResources} />
+          </div>
+        </div>
+      </div>
+    </StatusBox>
+  );
+};
+
+type VmTemplateDetailsProps = {
+  template: TemplateKind;
+};

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import {
+  getVmTemplate,
+  getTemplateDisplayName,
+  getOperatingSystemName,
+  getOperatingSystem,
+  getDescription,
+} from 'kubevirt-web-ui-components';
+
+import { ResourceSummary } from '@console/internal/components/utils';
+
+import { DASH } from '@console/shared';
+import { TemplateKind } from '@console/internal/module/k8s';
+
+export const VmTemplateResourceSummary = ({ template }: VmTemplateResourceSummaryProps) => {
+  const base = getVmTemplate(template);
+  const baseLink = base && getTemplateDisplayName(base); // TODO(mlibra): link to a template detail, once implemented
+
+  return (
+    <ResourceSummary resource={template}>
+      <dt>Description</dt>
+      <dd>{getDescription(template)}</dd>
+      <dt>Operating System</dt>
+      <dd>{getOperatingSystemName(template) || getOperatingSystem(template) || DASH}</dd>
+      <dt>Template</dt>
+      <dd>{baseLink || DASH}</dd>
+    </ResourceSummary>
+  );
+};
+
+type VmTemplateResourceSummaryProps = {
+  template: TemplateKind;
+};

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

@@ -114,6 +114,17 @@ const plugin: Plugin<ConsumedExtensions> = [
         ).then((m) => m.VirtualMachineTemplatesPage),
     },
   },
+  {
+    type: 'Page/Route',
+    properties: {
+      exact: true,
+      path: `/k8s/ns/:ns/vmtemplates/:name`,
+      loader: () =>
+        import(
+          './components/vm-templates/vm-template-details-page' /* webpackChunkName: "kubevirt-virtual-machine-details" */
+        ).then((m) => m.VmTemplateDetailsPage),
+    },
+  },
 ];
 
 export default plugin;