Add details

frontend/packages/console-app/package.json

@@ -11,6 +11,7 @@
     "@console/dev-console": "0.0.0-fixed",
     "@console/internal": "0.0.0-fixed",
     "@console/plugin-sdk": "0.0.0-fixed",
+    "@console/kubevirt-plugin": "0.0.0-fixed",
     "@console/shared": "0.0.0-fixed"
   },
   "consolePlugin": {

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { navFactory } from '@console/internal/components/utils';
+
+import { DetailsPage } from '@console/internal/components/factory';
+import { K8sResourceKindReference } from '@console/internal/module/k8s';
+
+import { TemplateModel } from '@console/internal/models';
+import { VmTemplateDetailsFirehose } from './vm-template-details';
+
+export const VmTemplateDetailsPage = (props: VmTemplateDetailsPageProps) => {
+  const pages = [navFactory.details(VmTemplateDetailsFirehose), navFactory.editYaml()];
+
+  const menuActions = undefined; // TODO(mlibra): menuActions
+
+  return (
+    <DetailsPage
+      {...props}
+      name={props.match.params.name}
+      namespace={props.match.params.ns}
+      kind={TemplateModel.kind}
+      kindObj={TemplateModel}
+      menuActions={menuActions}
+      pages={pages}
+    />
+  );
+};
+
+type VmTemplateDetailsPageProps = {
+  name: string;
+  namespace: string;
+  kind: K8sResourceKindReference;
+  match: any;
+};

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/components/vm-templates/vm-template.tsx

@@ -11,9 +11,15 @@ import {
 } from 'kubevirt-web-ui-components';
 
 import { ListPage, Table, TableRow, TableData } from '@console/internal/components/factory';
-import { Kebab, ResourceLink, ResourceKebab } from '@console/internal/components/utils';
+import {
+  Kebab,
+  ResourceLink,
+  ResourceKebab,
+  ResourceIcon,
+} from '@console/internal/components/utils';
 import { getName, getNamespace, DASH } from '@console/shared';
 import { TemplateModel } from '@console/internal/models';
+import { Link } from 'react-router-dom';
 
 export const menuActions = Kebab.factory.common;
 
@@ -78,16 +84,17 @@ VmTempleateTableHeader.displayName = 'VmTemplateTableHeader';
 
 const VmTemplateTableRow = ({ obj: template, index, key, style }) => {
   const os = getTemplateOperatingSystems([template])[0];
+  const name = getName(template);
+  const namespace = getNamespace(template);
+  const path = `/k8s/ns/${namespace}/vmtemplates/${name}`;
 
   return (
     <TableRow id={template.metadata.uid} index={index} trKey={key} style={style}>
       <TableData className={tableColumnClasses[0]}>
-        <ResourceLink
-          kind={kind}
-          name={getName(template)}
-          namespace={getNamespace(template)}
-          title={template.metadata.uid}
-        />
+        <ResourceIcon kind={kind} />
+        <Link to={path} title={template.metadata.uid} className="co-resource-item__resource-name">
+          {getName(template)}
+        </Link>
       </TableData>
       <TableData className={tableColumnClasses[1]}>
         <ResourceLink

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

@@ -9,12 +9,12 @@ import {
   ModelDefinition,
   RoutePage,
 } from '@console/plugin-sdk';
+import { TemplateModel } from '@console/internal/models';
 
 import * as models from './models';
 import { yamlTemplates } from './yaml-templates';
 
 import './style.scss';
-import { TemplateModel } from '@console/internal/models';
 
 type ConsumedExtensions =
   | ResourceNSNavItem
@@ -106,13 +106,25 @@ const plugin: Plugin<ConsumedExtensions> = [
   {
     type: 'Page/Route',
     properties: {
+      exact: true,
       path: [`/k8s/ns/:ns/vmtemplates`, '/k8s/all-namespaces/vmtemplates'],
       loader: () =>
         import(
           './components/vm-templates/vm-template' /* webpackChunkName: "kubevirt-vmtemplates" */
         ).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;