Use page route instead of resource for vmtemplates

openshift · Jun 11, 2019 · f1beb77 · f1beb77
1 parent 3cd29c6
commit f1beb77
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 5 deletions.
diff --git a/frontend/packages/console-app/package.json b/frontend/packages/console-app/package.json
@@ -7,7 +7,8 @@
   "dependencies": {
     "@console/internal": "0.0.0-fixed",
     "@console/plugin-sdk": "0.0.0-fixed",
-    "@console/shared": "0.0.0-fixed"
+    "@console/shared": "0.0.0-fixed",
+    "@console/kubevirt-plugin": "0.0.0-fixed"
   },
   "consolePlugin": {
     "entry": "src/plugin.tsx"

diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-template.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-template.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import * as _ from 'lodash-es';
+
+import {
+  getTemplateOperatingSystems,
+  DASHES,
+  getTemplateFlavors,
+  TemplateSource,
+} from 'kubevirt-web-ui-components';
+
+import { NamespaceModel } from '@console/internal/models';
+import {
+  ListHeader,
+  ColHead,
+  List,
+  ListPage,
+  ResourceRow,
+} from '@console/internal/components/factory';
+import { ResourceLink, resourcePath } from '@console/internal/components/utils';
+
+import { VmTemplateModel } from '../models';
+
+const mainRowStyle = 'col-lg-2 col-sm-4 col-xs-4';
+const otherRowStyle = 'col-lg-2 hidden-sm hidden-xs';
+
+const VmTemplateHeader = (props) => (
+  <ListHeader>
+    <ColHead {...props} className={mainRowStyle} sortField="metadata.name">
+      Name
+    </ColHead>
+    <ColHead {...props} className={mainRowStyle} sortField="metadata.namespace">
+      Namespace
+    </ColHead>
+    <ColHead {...props} className={mainRowStyle} sortField="metadata.annotations.description">
+      Description
+    </ColHead>
+    <ColHead {...props} className={otherRowStyle}>
+      Source
+    </ColHead>
+    <ColHead {...props} className={otherRowStyle}>
+      OS
+    </ColHead>
+    <ColHead {...props} className={otherRowStyle}>
+      Flavor
+    </ColHead>
+  </ListHeader>
+);
+const VmTemplateRow = ({ obj: template }: React.ComponentProps<typeof ResourceRow>) => {
+  const os = getTemplateOperatingSystems([template])[0];
+
+  return (
+    <ResourceRow obj={template}>
+      <div className={mainRowStyle}>
+        <ResourceLink
+          kind={VmTemplateModel.kind}
+          name={template.metadata.name}
+          namespace={template.metadata.namespace}
+          title={template.metadata.uid}
+        />
+      </div>
+      <div className={mainRowStyle}>
+        <ResourceLink
+          kind={NamespaceModel.kind}
+          name={template.metadata.namespace}
+          title={template.metadata.namespace}
+        />
+      </div>
+      <div className={mainRowStyle}>
+        {_.get(template.metadata, 'annotations.description', DASHES)}
+      </div>
+      <div className={otherRowStyle}>
+        <div className="co-resource-list__item--templateSource">
+          <TemplateSource template={template} />
+        </div>
+      </div>
+      <div className={otherRowStyle}>{os ? os.name || os.id : DASHES}</div>
+      <div className={otherRowStyle}>{getTemplateFlavors([template])[0]}</div>
+    </ResourceRow>
+  );
+};
+const VmTemplateList = (props) => <List {...props} Header={VmTemplateHeader} Row={VmTemplateRow} />;
+
+export const VmTemplatesPageTitle = 'Virtual Machine Templates';
+
+const createItems = {
+  wizard: 'Create with Wizard',
+  yaml: 'Create from YAML',
+};
+
+const createProps = (namespace) => ({
+  items: createItems,
+  createLink: (type) => {
+    switch (type) {
+      case 'wizard':
+        return () => '';
+      default:
+        return `${resourcePath(VmTemplateModel.kind, null, namespace)}/~new`;
+    }
+  },
+});
+
+export const VirtualMachineTemplatesPage = (props) => (
+  <ListPage
+    {...props}
+    title={VmTemplatesPageTitle}
+    selector={VmTemplateModel.selector}
+    kind={VmTemplateModel.kind}
+    ListComponent={VmTemplateList}
+    createProps={createProps(_.get(props, 'match.params.ns'))}
+    canCreate
+  />
+);
diff --git a/frontend/packages/kubevirt-plugin/src/models.ts b/frontend/packages/kubevirt-plugin/src/models.ts
@@ -1,4 +1,5 @@
 import { K8sKind } from '@console/internal/module/k8s';
+import { TEMPLATE_TYPE_LABEL } from 'kubevirt-web-ui-components';
 
 export const VirtualMachineModel: K8sKind = {
   label: 'Virtual Machine',
@@ -52,7 +53,6 @@ export const VirtualMachineInstanceReplicaSetModel: K8sKind = {
   id: 'virtualmachineinstancereplicaset',
 };
 
-/* TODO(mlibra): migrate templates
 export const VmTemplateModel: K8sKind = {
   label: 'Template',
   labelPlural: 'Templates',
@@ -65,10 +65,9 @@ export const VmTemplateModel: K8sKind = {
   kind: 'Template',
   id: 'vmtemplate',
   selector: {
-    matchLabels: {[TEMPLATE_TYPE_LABEL]: 'vm'},
+    matchLabels: { [TEMPLATE_TYPE_LABEL]: 'vm' },
   },
 };
-*/
 
 export const NetworkAttachmentDefinitionModel: K8sKind = {
   label: 'Network Attachment Definition',

diff --git a/frontend/packages/kubevirt-plugin/src/plugin.ts b/frontend/packages/kubevirt-plugin/src/plugin.ts
@@ -7,6 +7,7 @@ import {
   ModelFeatureFlag,
   YAMLTemplate,
   ModelDefinition,
+  RoutePage,
 } from '@console/plugin-sdk';
 
 import * as models from './models';
@@ -18,7 +19,8 @@ type ConsumedExtensions =
   | ResourceDetailsPage
   | ModelFeatureFlag
   | YAMLTemplate
-  | ModelDefinition;
+  | ModelDefinition
+  | RoutePage;
 
 const FLAG_KUBEVIRT = 'KUBEVIRT';
 
@@ -48,6 +50,18 @@ const plugin: Plugin<ConsumedExtensions> = [
       mergeAfter: 'Pods',
     },
   },
+  {
+    type: 'NavItem/ResourceNS',
+    properties: {
+      section: 'Workloads',
+      componentProps: {
+        name: 'Virtual Machine Templates',
+        resource: models.VmTemplateModel.plural,
+        required: FLAG_KUBEVIRT,
+      },
+      mergeAfter: 'Virtual Machines',
+    },
+  },
   {
     type: 'Page/Resource/List',
     properties: {
@@ -65,6 +79,26 @@ const plugin: Plugin<ConsumedExtensions> = [
       template: yamlTemplates.getIn([models.VirtualMachineModel, 'default']),
     },
   },
+  {
+    type: 'Page/Route',
+    properties: {
+      path: `/k8s/ns/:ns/${models.VmTemplateModel.plural}`,
+      loader: () =>
+        import('./components/vm-template' /* webpackChunkName: "kubevirt-vm-template" */).then(
+          (m) => m.VirtualMachineTemplatesPage,
+        ),
+    },
+  },
+  {
+    type: 'Page/Route',
+    properties: {
+      path: `/k8s/all-namespaces/${models.VmTemplateModel.plural}`,
+      loader: () =>
+        import('./components/vm-template' /* webpackChunkName: "kubevirt-vm-template" */).then(
+          (m) => m.VirtualMachineTemplatesPage,
+        ),
+    },
+  },
   // {
   //   type: 'Page/Resource/Details',
   //   properties: {