Add details page

openshift · Jun 19, 2019 · 47c2cae · 47c2cae
1 parent 96afb78
commit 47c2cae
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/frontend/packages/kubevirt-plugin/src/components/vmtemplates/vm-template.tsx b/frontend/packages/kubevirt-plugin/src/components/vmtemplates/vm-template.tsx
@@ -7,10 +7,28 @@ import {
   TemplateSource,
   getTemplateOperatingSystems,
   getTemplateFlavors,
+  VmTemplateDetails,
+  getNamespace,
 } 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 {
+  ListPage,
+  Table,
+  TableRow,
+  TableData,
+  DetailsPage,
+} from '@console/internal/components/factory';
+import {
+  Kebab,
+  ResourceLink,
+  ResourceKebab,
+  ResourceIcon,
+  detailsPage,
+  navFactory,
+  LoadingInline,
+} from '@console/internal/components/utils';
+import { Link } from 'react-router-dom';
+import { k8sPatch, k8sGet } from '@console/internal/module/k8s';
 import { VmTemplateModel } from '../../models';
 
 export const menuActions = Kebab.factory.common;
@@ -69,12 +87,10 @@ const VmTemplateTableRow = ({ obj: template, index, key, style }) => {
   return (
     <TableRow id={template.metadata.uid} index={index} trKey={key} style={style}>
       <TableData className={tableColumnClasses[0]}>
-        <ResourceLink
-          kind={kind}
-          name={template.metadata.name}
-          namespace={template.metadata.namespace}
-          title={template.metadata.uid}
-        />
+        <ResourceIcon kind={kind} />
+        <Link to={`/k8s/ns/${template.metadata.namespace}/vmtemplates/${template.metadata.name}`}>
+          {template.metadata.name}
+        </Link>
       </TableData>
       <TableData className={tableColumnClasses[0]}>
         <ResourceLink
@@ -99,6 +115,8 @@ const VmTemplateTableRow = ({ obj: template, index, key, style }) => {
 };
 VmTemplateTableRow.displayName = 'VmTemplateTableRow';
 
+const { details, editYaml } = navFactory;
+
 const VirtualMachineTemplates = (props) => (
   <Table
     {...props}
@@ -120,4 +138,31 @@ const VirtualMachineTemplatesPage = (props) => (
   />
 );
 
-export { VirtualMachineTemplates, VirtualMachineTemplatesPage };
+const Details = ({ obj: template }) => {
+  const namespaceResourceLink = () => (
+    <ResourceLink kind="Namespace" name={getNamespace(template)} title={getNamespace(template)} />
+  );
+
+  return (
+    <VmTemplateDetails
+      vmTemplate={template}
+      NamespaceResourceLink={namespaceResourceLink}
+      k8sPatch={k8sPatch}
+      k8sGet={k8sGet}
+      LoadingComponent={LoadingInline}
+    />
+  );
+};
+
+const VirtualMachineTemplatesDetailsPage = (props) => (
+  <DetailsPage
+    {...props}
+    kind={kind}
+    name={props.match.params.name}
+    namespace={props.match.params.ns}
+    menuActions={menuActions}
+    pages={[details(detailsPage(Details)), editYaml()]}
+  />
+);
+
+export { VirtualMachineTemplates, VirtualMachineTemplatesPage, VirtualMachineTemplatesDetailsPage };
diff --git a/frontend/packages/kubevirt-plugin/src/plugin.ts b/frontend/packages/kubevirt-plugin/src/plugin.ts
@@ -82,10 +82,20 @@ const plugin: Plugin<ConsumedExtensions> = [
   {
     type: 'YAMLTemplate',
     properties: {
-      model: models.VmTemplateModel, // NOTE(yaacov): this actually overides the TemplateModel empty template
+      model: models.VmTemplateModel, // NOTE(yaacov): this actually overides Template model.
       template: yamlTemplates.getIn([models.VmTemplateModel, 'default']),
     },
   },
+  {
+    type: 'Page/Route',
+    properties: {
+      path: `/k8s/ns/:ns/${models.VmTemplateModel.plural}/:name`,
+      loader: () =>
+        import('./components/vm-template' /* webpackChunkName: "kubevirt-vm-template" */).then(
+          (m) => m.VirtualMachineTemplatesDetailsPage,
+        ),
+    },
+  },
   {
     type: 'Page/Route',
     properties: {