From 92d4e5e9af718fdc929ace15a2b50ba390cb06ef Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Wed, 23 Jun 2021 15:15:11 +0100
Subject: [PATCH 1/4] Add grouping and more info to the explorer kube node list

- Add POD stat to kube nodes table
- Group kube nodes by management node pools, describe pools as per old norman node pools
- Add Drain Node
- Add ability to hide table columns depending on window width
  - hide certain stats at certain widths
- Fixed an issue where RAM & CPU stats were reported strangely (multiplied over an above normal % only to be reduced to working % in formatter)
---
 assets/styles/base/_variables.scss            |   8 +-
 assets/translations/en-us.yaml                |  33 +++
 components/SortableTable/THead.vue            |  22 +-
 components/SortableTable/index.vue            |  37 ++-
 components/SortableTable/selection.js         |   4 +-
 components/dialog/DrainNode.vue               | 219 +++++++++++++++++
 components/form/RadioGroup.vue                |   2 +-
 components/formatter/PercentageBar.vue        |   2 +-
 config/product/explorer.js                    |   3 +-
 config/table-headers.js                       |   6 +-
 config/types.js                               |   2 +
 edit/node.vue                                 |   1 -
 list/node.vue                                 | 223 +++++++++++++++++-
 models/management.cattle.io.node.js           |  14 ++
 models/management.cattle.io.nodepool.js       |  13 +
 models/management.cattle.io.nodetemplate.js   | 117 +++++++++
 models/{node.js => node/kube-node.js}         | 125 +++++++++-
 .../_cluster/_product/projectsnamespaces.vue  |  61 +++--
 pages/home.vue                                |   2 +-
 plugins/steve/model-loader.js                 |  21 ++
 plugins/steve/resource-instance.js            |   2 +
 21 files changed, 849 insertions(+), 68 deletions(-)
 create mode 100644 components/dialog/DrainNode.vue
 create mode 100644 models/management.cattle.io.node.js
 rename models/{node.js => node/kube-node.js} (69%)

diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss
index 39e043e5f0..ec34622c78 100644
--- a/assets/styles/base/_variables.scss
+++ b/assets/styles/base/_variables.scss
@@ -41,8 +41,8 @@ $z-indexes: (
 // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) {
 // }
 $breakpoints: (
-  '--viewport-4':  480px,
-  '--viewport-7':  768px,
-  '--viewport-9':  992px,
-  '--viewport-12': 1281px,
+  '--viewport-4':  480px, // Phone
+  '--viewport-7':  768px, // Tablet
+  '--viewport-9':  992px, // Laptop/Desktop
+  '--viewport-12': 1281px, // Desktop
 );
diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index e89103dde1..b1f2aaabaa 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -475,6 +475,10 @@ asyncButton:
     action: Download
     success: Saving
     waiting: Downloading&hellip;
+  drain:
+    action: Drain
+    success: Drained
+    waiting: Draining&hellip;
   edit:
     action: Save
     success: Saved
@@ -1136,6 +1140,7 @@ cluster:
     cluster: Cluster Configuration
     etcd: etcd
     networking: Networking
+    nodePools: Node Pools
     machinePools: Machine Pools
     registry: Private Registry
     upgrade: Upgrade Strategy
@@ -1145,6 +1150,9 @@ cluster:
     services: Services
     allServices: Rotate all service certificates
     selectService: Rotate an individual service
+  nodePool:
+    scaleDown: Scale Pool Down
+    scaleUp: Scale Pool Up
 
 clusterIndexPage:
   hardwareResourceGauge:
@@ -1223,6 +1231,27 @@ detailText:
       other {+ {n, number} more chars}
     }
 
+drainNode:
+  action: 'Drain'
+  actionStop: 'Stop Drain'
+  titleOne: Drain {name}
+  titleMultiple: 'Drain {count} Nodes'
+  deleteLocalData: Delete Empty Dir Data
+  force: Force
+  safe:
+    label: Safe
+    helpText: If a node has standalone pods or ephemeral data it will be cordoned but not drained.
+  gracePeriod:
+    title: Grace period for pods to terminate themselves
+    default: Honor the default from each pod
+    placeholder: e.g. 30
+    custom: "Ignore the defaults and give each pod:"
+  timeout:
+    title: "Drain timeout"
+    default: Keep trying forever
+    placeholder: e.g. 60
+    custom: "Give up after:"
+
 etcdInfoBanner:
   hasLeader: "Etcd has a leader:"
   leaderChanges: "Number of leader changes:"
@@ -2110,6 +2139,9 @@ namespaceList:
   addLabel: Add Namespace
 
 node:
+  list:
+    pool: Pool
+    nodeTaint: Taints
   detail:
     detailTop:
       containerRuntime: Container Runtime
@@ -3542,6 +3574,7 @@ tableHeaders:
   subType: Kind
   success: Success
   summary: Summary
+  taints: Taints
   target: Target
   targetKind: Target Type
   targetPort: Target
diff --git a/components/SortableTable/THead.vue b/components/SortableTable/THead.vue
index b1fa52c37e..fe4a354f8f 100644
--- a/components/SortableTable/THead.vue
+++ b/components/SortableTable/THead.vue
@@ -132,7 +132,7 @@ export default {
         :key="col.name"
         :align="col.align || 'left'"
         :width="col.width"
-        :class="{ sortable: col.sort }"
+        :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
         @click.prevent="changeSort($event, col)"
       >
         <span v-if="col.sort" @click="$router.applyQuery(queryFor(col))">
@@ -180,6 +180,26 @@ export default {
     & A {
       color: var(--body-text);
     }
+
+    // Aligns with COLUMN_BREAKPOINTS
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) {
+      // HIDE column on sizes below 480px
+      &.tablet, &.laptop, &.desktop {
+        display: none;
+      }
+    }
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+      // HIDE column on sizes below 992px
+      &.laptop, &.desktop {
+        display: none;
+      }
+    }
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+      // HIDE column on sizes below 1281px
+      &.desktop {
+        display: none;
+      }
+    }
   }
 
   .icon-stack {
diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue
index 7143eb5ef0..d656320ab7 100644
--- a/components/SortableTable/index.vue
+++ b/components/SortableTable/index.vue
@@ -13,6 +13,21 @@ import sorting from './sorting';
 import paging from './paging';
 import grouping from './grouping';
 
+export const COLUMN_BREAKPOINTS = {
+  /**
+   * Only show column if at tablet width or wider
+   */
+  TABLET:  'tablet',
+  /**
+   * Only show column if at laptop width or wider
+   */
+  LAPTOP:  'laptop',
+  /**
+   * Only show column if at desktop width or wider
+   */
+  DESKTOP: 'desktop'
+};
+
 // @TODO:
 // Fixed header/scrolling
 
@@ -598,7 +613,7 @@ export default {
                       :key="col.name"
                       :data-title="labelFor(col)"
                       :align="col.align || 'left'"
-                      :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter}"
+                      :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter, [col.breakpoint]: !!col.breakpoint}"
                       :width="col.width"
                     >
                       <slot :name="'cell:' + col.name" :row="row" :col="col" :value="valueFor(row,col)">
@@ -708,6 +723,26 @@ export default {
         box-shadow: none;
       }
     }
+
+    // Aligns with COLUMN_BREAKPOINTS
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) {
+      // HIDE column on sizes below 480px
+      &.tablet, &.laptop, &.desktop {
+        display: none;
+      }
+    }
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+      // HIDE column on sizes below 992px
+      &.laptop, &.desktop {
+        display: none;
+      }
+    }
+    @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
+      // HIDE column on sizes below 1281px
+      &.desktop {
+        display: none;
+      }
+    }
   }
 </style>
 
diff --git a/components/SortableTable/selection.js b/components/SortableTable/selection.js
index 2be65acd49..4df8fc8bfe 100644
--- a/components/SortableTable/selection.js
+++ b/components/SortableTable/selection.js
@@ -111,7 +111,7 @@ export default {
     onRowMouseEnter(e) {
       const tr = $(e.target).closest('TR');
 
-      if (tr.hasClass('state-description')) {
+      if (tr.hasClass('sub-row')) {
         const trMainRow = tr.prev('TR');
 
         trMainRow.toggleClass('sub-row-hovered', true);
@@ -121,7 +121,7 @@ export default {
     onRowMouseLeave(e) {
       const tr = $(e.target).closest('TR');
 
-      if (tr.hasClass('state-description')) {
+      if (tr.hasClass('sub-row')) {
         const trMainRow = tr.prev('TR');
 
         trMainRow.toggleClass('sub-row-hovered', false);
diff --git a/components/dialog/DrainNode.vue b/components/dialog/DrainNode.vue
new file mode 100644
index 0000000000..fa538240b0
--- /dev/null
+++ b/components/dialog/DrainNode.vue
@@ -0,0 +1,219 @@
+<script>
+import Vue from 'vue';
+import AsyncButton from '@/components/AsyncButton';
+import Banner from '@/components/Banner';
+import Card from '@/components/Card';
+import RadioGroup from '@/components/form/RadioGroup';
+import UnitInput from '@/components/form/UnitInput';
+import { _EDIT, _VIEW } from '@/config/query-params';
+
+import { exceptionToErrorsArray } from '@/utils/error';
+
+export default {
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+    RadioGroup,
+    UnitInput
+  },
+
+  props:      {
+    resources: {
+      type:     Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      radioOptions: [{
+        label:   this.t('generic.yes'),
+        value: true,
+      }, {
+        label:   this.t('generic.no'),
+        value: false,
+      }],
+      gracePeriodOptions: [{
+        label:   this.t('drainNode.gracePeriod.default'),
+        value: false,
+      }, {
+        label:   this.t('drainNode.gracePeriod.custom'),
+        value: true,
+      }],
+      timeoutOptions: [{
+        label:   this.t('drainNode.timeout.default'),
+        value: false,
+      }, {
+        label:   this.t('drainNode.timeout.custom'),
+        value: true,
+      }],
+
+      gracePeriod: false,
+      timeout:     false,
+
+      body:        {
+        deleteLocalData:  false,
+        force:            false,
+        gracePeriod:      null,
+        timeout:          null
+      },
+
+      EDIT: _EDIT,
+      VIEW: _VIEW,
+
+      errors: [],
+    };
+  },
+
+  computed: {
+    kubeNodes() {
+      return this.resources[0];
+    },
+    normanNodeId() {
+      return this.resources[1];
+    },
+  },
+
+  watch: {
+    gracePeriod(neu) {
+      if (neu && !this.body.gracePeriod) {
+        this.body.gracePeriod = 30;
+      }
+    },
+    'body.gracePeriod'(neu) {
+      if (neu && neu < 1) {
+        Vue.set(this.body, 'gracePeriod', 1);
+      }
+    },
+    timeout(neu) {
+      if (neu && !this.body.timeout) {
+        this.body.timeout = 60;
+      }
+    },
+    'body.timeout'(neu) {
+      if (neu) {
+        if (neu < 1) {
+          Vue.set(this.body, 'timeout', 1);
+        } else if (neu > 10800) {
+          Vue.set(this.body, 'timeout', 10800);
+        }
+      }
+    },
+  },
+
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      const { gracePeriod, timeout, ...parsedBody } = this.body;
+
+      if (this.gracePeriod) {
+        parsedBody.gracePeriod = gracePeriod;
+      }
+      if (this.timeout) {
+        parsedBody.timeout = timeout;
+      }
+
+      try {
+        await Promise.all(this.kubeNodes.map(node => node.normanNode.doAction('drain', parsedBody)));
+        this.close();
+      } catch (e) {
+        this.errors = exceptionToErrorsArray(e);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <!-- TODO: RC huh - clusterTemplateCreate ClusterTemplateOverrideToggle -->
+  <Card class="prompt-rotate" :show-highlight-border="false">
+    <h4 slot="title" class="text-default-text">
+      <template v-if="kubeNodes.length > 1">
+        {{ t('drainNode.titleMultiple', { count: kubeNodes.length }) }}
+      </template>
+      <template v-else>
+        {{ t('drainNode.titleOne', { name: kubeNodes[0].name }, true) }}
+      </template>
+    </h4>
+
+    <div slot="body" class="pl-10 pr-10">
+      <div>
+        <RadioGroup
+          v-model="body.deleteLocalData"
+          name="deleteLocalData"
+          :options="radioOptions"
+          :row="true"
+          class="mb-15"
+        >
+          <template #label>
+            <h5>{{ t('drainNode.deleteLocalData') }}</h5>
+          </template>
+        </RadioGroup>
+        <RadioGroup v-model="body.force" name="force" :options="radioOptions" :row="true" class="mb-15">
+          <template #label>
+            <h5>{{ t('drainNode.force') }}</h5>
+          </template>
+        </RadioGroup>
+        <RadioGroup v-model="gracePeriod" name="gracePeriod" :options="gracePeriodOptions" class="mb-15">
+          <template #label>
+            <h5>{{ t('drainNode.gracePeriod.title') }}</h5>
+          </template>
+        </RadioGroup>
+        <UnitInput
+          v-model="body.gracePeriod"
+          :mode="gracePeriod ? EDIT : VIEW"
+          type="number"
+          min="1"
+          :suffix="t('suffix.sec')"
+          :placeholder="t('drainNode.gracePeriod.placeholder')"
+          class="mb-10"
+        />
+        <RadioGroup v-model="timeout" name="timeout" :options="timeoutOptions" class="mb-15">
+          <template #label>
+            <h5>{{ t('drainNode.timeout.title') }}</h5>
+          </template>
+        </RadioGroup>
+        <UnitInput
+          v-model="body.timeout"
+          :mode="timeout ? EDIT : VIEW"
+          type="number"
+          min="1"
+          max="10800"
+          :suffix="t('suffix.sec')"
+          :placeholder="t('drainNode.timeout.placeholder')"
+        />
+      </div>
+      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+    </div>
+
+    <div slot="actions" class="buttons">
+      <button class="btn role-secondary mr-10" @click="close">
+        {{ t('generic.cancel') }}
+      </button>
+
+      <AsyncButton
+        mode="drain"
+        @click="apply"
+      >
+      </AsyncButton>
+    </div>
+  </Card>
+</template>
+<style lang='scss' scoped>
+  .prompt-rotate {
+    margin: 0;
+  }
+  .card-title h4 {
+    margin-bottom: 0;
+  }
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+</style>
diff --git a/components/form/RadioGroup.vue b/components/form/RadioGroup.vue
index 7b9936aabd..f9eea92318 100644
--- a/components/form/RadioGroup.vue
+++ b/components/form/RadioGroup.vue
@@ -121,7 +121,7 @@ export default {
 
 <template>
   <div>
-    <div v-if="label || labelKey || tooltip || tooltipKey" class="radio-group label">
+    <div v-if="label || labelKey || tooltip || tooltipKey || $slots.label" class="radio-group label">
       <slot name="label">
         <h3>
           <t v-if="labelKey" :k="labelKey" />
diff --git a/components/formatter/PercentageBar.vue b/components/formatter/PercentageBar.vue
index 7975792de8..1daca76cca 100644
--- a/components/formatter/PercentageBar.vue
+++ b/components/formatter/PercentageBar.vue
@@ -23,7 +23,7 @@ export default {
   },
   computed: {
     percentage() {
-      return Number.parseFloat(this.value) / 100;
+      return Number.parseFloat(this.value);
     }
   }
 };
diff --git a/config/product/explorer.js b/config/product/explorer.js
index f160ce000b..9d97c387b2 100644
--- a/config/product/explorer.js
+++ b/config/product/explorer.js
@@ -11,7 +11,7 @@ import {
 
 import {
   STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, KEYS,
-  INGRESS_DEFAULT_BACKEND, INGRESS_TARGET, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM,
+  INGRESS_DEFAULT_BACKEND, INGRESS_TARGET,
   SPEC_TYPE, TARGET_PORT, SELECTOR, NODE as NODE_COL, TYPE, WORKLOAD_IMAGES, POD_IMAGES,
   USER_ID, USERNAME, USER_DISPLAY_NAME, USER_PROVIDER, WORKLOAD_ENDPOINTS, STORAGE_CLASS_DEFAULT,
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
@@ -167,7 +167,6 @@ export function init(store) {
     AGE
   ]);
   headers(INGRESS, [STATE, NAME_COL, NAMESPACE_COL, INGRESS_TARGET, INGRESS_DEFAULT_BACKEND, AGE]);
-  headers(NODE, [STATE, NAME_COL, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM, AGE]);
   headers(SERVICE, [STATE, NAME_COL, NAMESPACE_COL, TARGET_PORT, SELECTOR, SPEC_TYPE, AGE]);
   headers(HPA, [STATE, NAME_COL, HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA, AGE]);
 
diff --git a/config/table-headers.js b/config/table-headers.js
index 383aa7f36c..38c13c886f 100644
--- a/config/table-headers.js
+++ b/config/table-headers.js
@@ -198,8 +198,10 @@ export const PODS = {
   name:      'pods',
   labelKey:  'tableHeaders.pods',
   sort:      'pods',
-  value:     'podUsage',
-  formatter: 'PercentageBar'
+  search:    false,
+  value:     'podConsumedUsage',
+  formatter: 'PercentageBar',
+  width:     120,
 };
 
 export const AGE = {
diff --git a/config/types.js b/config/types.js
index 1eb9818a6a..d0debd4882 100644
--- a/config/types.js
+++ b/config/types.js
@@ -17,6 +17,7 @@ export const NORMAN = {
   CLUSTER_TOKEN:                 'clusterregistrationtoken',
   CLUSTER_ROLE_TEMPLATE_BINDING: 'clusterRoleTemplateBinding',
   GROUP:                         'group',
+  NODE:                          'node',
   PRINCIPAL:                     'principal',
   PROJECT:                       'project',
   PROJECT_ROLE_TEMPLATE_BINDING: 'projectRoleTemplateBinding',
@@ -137,6 +138,7 @@ export const MANAGEMENT = {
   FEATURE:                       'management.cattle.io.feature',
   GROUP:                         'management.cattle.io.group',
   KONTANIER_DRIVER:              'management.cattle.io.kontainerdriver',
+  NODE:                          'management.cattle.io.node',
   NODE_DRIVER:                   'management.cattle.io.nodedriver',
   NODE_POOL:                     'management.cattle.io.nodepool',
   NODE_TEMPLATE:                 'management.cattle.io.nodetemplate',
diff --git a/edit/node.vue b/edit/node.vue
index da6b507738..fa001db33d 100644
--- a/edit/node.vue
+++ b/edit/node.vue
@@ -44,7 +44,6 @@ export default {
       :value="value"
       :namespaced="false"
       :mode="mode"
-      :extra-columns="extraColumns"
     />
     <ResourceTabs v-model="value" :mode="mode">
       <Tab name="taints" :label="t('node.detail.tab.taints')" :weight="0">
diff --git a/list/node.vue b/list/node.vue
index ea0557f8de..66b0067d42 100644
--- a/list/node.vue
+++ b/list/node.vue
@@ -1,17 +1,28 @@
 <script>
 import ResourceTable from '@/components/ResourceTable';
 import Loading from '@/components/Loading';
+import Tag from '@/components/Tag';
 import {
-  STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM
+  STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM, PODS, AGE
 } from '@/config/table-headers';
 import metricPoller from '@/mixins/metric-poller';
 
-import { CAPI, METRIC, NODE } from '@/config/types';
+import {
+  CAPI,
+  MANAGEMENT, METRIC, NODE, NORMAN, POD
+} from '@/config/types';
+import { mapGetters } from 'vuex';
+import { allHash } from '@/utils/promise';
+import { get } from '@/utils/object';
+import { GROUP_RESOURCES, mapPref } from '@/store/prefs';
+import { COLUMN_BREAKPOINTS } from '@/components/SortableTable/index.vue';
 
 export default {
   name:       'ListNode',
-  components: { Loading, ResourceTable },
-  mixins:     [metricPoller],
+  components: {
+    Loading, ResourceTable, Tag
+  },
+  mixins: [metricPoller],
 
   props: {
     schema: {
@@ -21,21 +32,102 @@ export default {
   },
 
   async fetch() {
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: NODE });
+    const hash = {
+      kubeNodes: this.$store.dispatch('cluster/findAll', { type: NODE }),
+      // Used by kube node model to determine if SSH action
+      machines:           this.$store.dispatch('management/findAll', { type: CAPI.MACHINE })
+    };
 
-    if ( this.$store.getters['management/schemaFor'](CAPI.MACHINE) ) {
-      await this.$store.dispatch('management/findAll', { type: CAPI.MACHINE });
+    const canViewNodePools = this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE_POOL);
+    const canViewNodeTemplates = this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE_TEMPLATE);
+    const canViewPods = this.$store.getters[`cluster/schemaFor`](POD);
+
+    const canViewNormanNodes = this.$store.getters[`rancher/schemaFor`](NORMAN.NODE);
+
+    if (canViewNormanNodes) {
+      // Required for Drain action
+      hash.normanNodes = this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE });
     }
+
+    if (canViewNodePools && canViewNodeTemplates) {
+      // Managemnet Node's required for kube role and some reousrce states
+      hash.mNodes = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+      hash.nodePools = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
+      hash.nodeTemplates = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
+    }
+
+    if (canViewPods) {
+      // Used for running pods metrics
+      hash.pods = this.$store.dispatch('cluster/findAll', { type: POD });
+    }
+
+    const res = await allHash(hash);
+
+    this.kubeNodes = res.kubeNodes;
+    this.nodePools = res.nodePools || [];
+    this.nodeTemplates = res.nodeTemplates || [];
+
+    await this.updateNodePools(res.kubeNodes);
   },
 
   data() {
     return {
-      rows:         null,
-      headers:      [STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, CPU, RAM],
+      kubeNodes:     null,
+      nodeTemplates: null,
+      nodePools:     null,
+      headers:          [STATE, NAME, ROLES, VERSION, INTERNAL_EXTERNAL_IP, {
+        ...CPU,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP
+      }, {
+        ...RAM,
+        breakpoint: COLUMN_BREAKPOINTS.LAPTOP
+      }, {
+        ...PODS,
+        breakpoint: COLUMN_BREAKPOINTS.DESKTOP
+      }, AGE],
     };
   },
 
-  methods: {
+  computed: {
+    ...mapGetters(['currentCluster']),
+    tableGroup: mapPref(GROUP_RESOURCES),
+
+    clusterNodePools() {
+      return this.nodePools?.filter(pool => pool?.spec?.clusterName === this.currentCluster.id) || [];
+    },
+
+    clusterNodePoolsMap() {
+      return this.clusterNodePools.reduce((res, node) => {
+        res[node.id] = node;
+
+        return res;
+      }, {});
+    },
+
+    hasPools() {
+      return !!this.clusterNodePools.length;
+    },
+
+    groupBy() {
+      if (!this.hasPools) {
+        return null;
+      }
+
+      return this.tableGroup === 'none' ? '' : 'nodePoolId';
+    }
+
+  },
+
+  watch: {
+    kubeNodes: {
+      deep: true,
+      handler(neu, old) {
+        this.updateNodePools(neu);
+      }
+    },
+  },
+
+  methods:  {
     async loadMetrics() {
       const schema = this.$store.getters['cluster/schemaFor'](METRIC.NODE);
 
@@ -47,7 +139,31 @@ export default {
 
         this.$forceUpdate();
       }
-    }
+    },
+
+    updateNodePools(nodes = []) {
+      nodes.forEach((node) => {
+        // const sNode = this.clustermNodes.find(sn => sn.status.nodeName === node.id);
+        const sNode = node.managementNode;
+
+        if (sNode) {
+          node.nodePoolId = sNode.spec.nodePoolName?.replace(':', '/') || '' ;
+        }
+      });
+    },
+
+    getNodePoolFromTableGroup(group) {
+      return this.getNodePool(group.key);
+    },
+
+    getNodeTemplate(nodeTemplateName) {
+      const parsedName = nodeTemplateName.replace(':', '/');
+
+      return this.nodeTemplates.find(nt => nt.id === parsedName);
+    },
+
+    get,
+
   }
 
 };
@@ -60,9 +176,90 @@ export default {
     v-bind="$attrs"
     :schema="schema"
     :headers="headers"
-    :rows="[...rows]"
-    key-field="_key"
+    :rows="[...kubeNodes]"
+    :groupable="hasPools"
+    :group-by="groupBy"
+    group-tooltip="node.list.pool"
+    :sub-rows="true"
     v-on="$listeners"
   >
+    <template #group-by="{group}">
+      <div class="pool-row" :class="{'has-description':clusterNodePoolsMap[group.key] && clusterNodePoolsMap[group.key].nodeTemplate}">
+        <div v-trim-whitespace class="group-tab">
+          <div v-if="clusterNodePoolsMap[group.key]" class="project-name">
+            {{ t('node.list.pool') }}: {{ clusterNodePoolsMap[group.key].spec.hostnamePrefix }} ({{ group.rows.length }})
+          </div>
+          <div v-else class="project-name">
+            {{ t('node.list.pool') }}: {{ t('generic.none') }}
+          </div>
+          <div v-if="clusterNodePoolsMap[group.key] && clusterNodePoolsMap[group.key].nodeTemplate" class="description text-muted text-small">
+            {{ clusterNodePoolsMap[group.key].providerDisplay }} &ndash;  {{ clusterNodePoolsMap[group.key].providerLocation }} / {{ clusterNodePoolsMap[group.key].providerSize }} ({{ clusterNodePoolsMap[group.key].providerName }})
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #sub-row="{fullColspan, row}">
+      <tr class="taints sub-row" :class="{'empty-taints': !row.spec.taints || !row.spec.taints.length}">
+        <template v-if="row.spec.taints && row.spec.taints.length">
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td :colspan="fullColspan-2">
+            <div class="taints">
+              {{ t('node.list.nodeTaint') }}:
+              <Tag v-for="taint in row.spec.taints" :key="taint.key + taint.value + taint.effect">
+                {{ taint.key }}={{ taint.value }}:{{ taint.effect }}
+              </Tag>
+            </div>
+          </td>
+        </template>
+      </tr>
+    </template>
   </ResourceTable>
 </template>
+
+<style lang='scss' scoped>
+.pool-row {
+  display: flex;
+  justify-content: space-between;
+
+  .project-name {
+    line-height: 30px;
+  }
+
+  &.has-description {
+    .right {
+      margin-top: 5px;
+    }
+    .group-tab {
+      &, &::after {
+          height: 50px;
+      }
+
+      &::after {
+          right: -20px;
+      }
+
+      .description {
+          margin-top: -20px;
+      }
+    }
+  }
+
+  BUTTON {
+     line-height: 1em;
+  }
+}
+
+.taints {
+  td {
+    padding-top:0;
+  }
+  &.empty-taints {
+   td {
+      padding: 0;
+    }
+  }
+}
+
+</style>
diff --git a/models/management.cattle.io.node.js b/models/management.cattle.io.node.js
new file mode 100644
index 0000000000..21fd2330f9
--- /dev/null
+++ b/models/management.cattle.io.node.js
@@ -0,0 +1,14 @@
+
+export default {
+  isWorker() {
+    return this.spec.worker;
+  },
+
+  isControlPlane() {
+    return this.spec.controlPlane;
+  },
+
+  isEtcd() {
+    return this.spec.etcd;
+  },
+};
diff --git a/models/management.cattle.io.nodepool.js b/models/management.cattle.io.nodepool.js
index bc9972562b..792e9df907 100644
--- a/models/management.cattle.io.nodepool.js
+++ b/models/management.cattle.io.nodepool.js
@@ -12,7 +12,20 @@ export default {
     return this.nodeTemplate?.provider;
   },
 
+  providerName() {
+    return this.nodeTemplate?.nameDisplay;
+  },
+
   providerDisplay() {
     return this.nodeTemplate?.providerDisplay;
   },
+
+  providerLocation() {
+    return this.nodeTemplate?.providerLocation;
+  },
+
+  providerSize() {
+    return this.nodeTemplate?.providerSize;
+  },
+
 };
diff --git a/models/management.cattle.io.nodetemplate.js b/models/management.cattle.io.nodetemplate.js
index 0226b98598..cbc9cf680f 100644
--- a/models/management.cattle.io.nodetemplate.js
+++ b/models/management.cattle.io.nodetemplate.js
@@ -1,3 +1,78 @@
+import { formatSi } from '@/utils/units';
+
+const CONFIG_KEYS = [
+  {
+    driver:           'aliyunecs',
+    size:      { key: 'config.instanceType' },
+    location: {
+      getDisplayProperty(that) {
+        return `${ that.config.region }${ that.config.zone }`;
+      }
+    }
+  },
+  {
+    driver:           'amazonec2',
+    size:      { key: 'config.instanceType' },
+    location: {
+      getDisplayProperty(that) {
+        return `${ that.config.region }${ that.config.zone }`;
+      }
+    }
+  },
+  {
+    driver:           'azure',
+    size:      { key: 'config.size' },
+    location: { key: 'config.location' }
+  },
+  {
+    driver:           'digitalocean',
+    size:      { key: 'config.size' },
+    location: { key: 'config.region' }
+  },
+  {
+    driver:           'exoscale',
+    size:      { key: 'config.instanceProfile' },
+    location: { key: 'config.availabilityZone' }
+  },
+  {
+    driver:           'linode',
+    size:      { key: 'config.instanceType' },
+    location: { key: 'config.region' }
+  },
+  {
+    driver:           'oci',
+    size:      { key: 'config.nodeShape' },
+    location: {}
+  },
+  {
+    driver:           'packet',
+    size:      { key: 'config.plan' },
+    location: { key: 'config.facilityCode' }
+  },
+  {
+    driver:           'pnap',
+    size:      { key: 'config.serverType' },
+    location: { key: 'config.serverLocation' }
+  },
+  {
+    driver:           'rackspace',
+    size:      { key: 'config.flavorId' },
+    location: { key: 'config.region' }
+  },
+  {
+    driver:           'vmwarevsphere',
+    size:   {
+      getDisplayProperty(that) {
+        const size = formatSi(that.config.memorySize * 1048576, 1024, 'iB');
+
+        return `${ size }, ${ that.config.cpuCount } Core`;
+      }
+    },
+    location: { key: null }
+
+  },
+];
+
 export default {
   provider() {
     const allKeys = Object.keys(this);
@@ -8,9 +83,51 @@ export default {
     }
   },
 
+  providerConfig() {
+    return this[`${ this.provider }Config`];
+  },
+
   providerDisplay() {
     const provider = (this.provider || '').toLowerCase();
 
     return this.$rootGetters['i18n/withFallback'](`cluster.provider."${ provider }"`, null, 'generic.unknown', true);
   },
+
+  providerLocation() {
+    if (this.provider) {
+      const config = CONFIG_KEYS.find(k => k.driver === this.provider);
+
+      if (config?.location) {
+        if (config.location.getDisplayProperty) {
+          return config.location.getDisplayProperty(this);
+        }
+        const value = this.providerConfig[config.location.key];
+
+        if (value) {
+          return value;
+        }
+      }
+    }
+
+    return this.providerConfig?.region || 'No Region';
+  },
+
+  providerSize() {
+    if (this.provider) {
+      const config = CONFIG_KEYS.find(k => k.driver === this.provider);
+
+      if (config?.size) {
+        if (config.size.getDisplayProperty) {
+          return config.size.getDisplayProperty(this);
+        }
+        const value = this.providerConfig[config.size.key];
+
+        if (value) {
+          return value;
+        }
+      }
+    }
+
+    return this.providerConfig?.size || 'No Size';
+  }
 };
diff --git a/models/node.js b/models/node/kube-node.js
similarity index 69%
rename from models/node.js
rename to models/node/kube-node.js
index 15ebe62bbc..03e4ef3a7a 100644
--- a/models/node.js
+++ b/models/node/kube-node.js
@@ -1,10 +1,13 @@
 import Vue from 'vue';
 import { formatPercent } from '@/utils/string';
 import { CAPI as CAPI_ANNOTATIONS, NODE_ROLES, RKE } from '@/config/labels-annotations.js';
-import { CAPI, METRIC, POD } from '@/config/types';
+import {
+  CAPI, MANAGEMENT, METRIC, NORMAN, POD
+} from '@/config/types';
 import { parseSi } from '@/utils/units';
 import { PRIVATE } from '@/plugins/steve/resource-proxy';
 import findLast from 'lodash/findLast';
+import { isObject } from 'lodash';
 
 export default {
   _availableActions() {
@@ -26,6 +29,26 @@ export default {
       bulkable:   true
     };
 
+    const normanAction = this.normanNode?.actions || {};
+
+    const drain = {
+      action:     'drain',
+      enabled:     !!normanAction.drain,
+      icon:       'icon icon-fw icon-dot-open',
+      label:      this.t('drainNode.action'),
+      bulkable:   true,
+      bulkAction: 'drain'
+    };
+
+    const stopDrain = {
+      action:     'stopDrain',
+      enabled:    !!normanAction.stopDrain,
+      icon:       'icon icon-fw icon-x',
+      label:      this.t('drainNode.actionStop'),
+      bulkable:   true,
+      bulkAction: 'stopDrain'
+    };
+
     const openSsh = {
       action:     'openSsh',
       enabled:    !!this.provisionedMachine?.links?.shell,
@@ -46,6 +69,8 @@ export default {
       { divider: true },
       cordon,
       uncordon,
+      drain,
+      stopDrain,
       { divider: true },
       ...this._standardActions
     ];
@@ -90,11 +115,13 @@ export default {
   },
 
   isWorker() {
-    return `${ this.labels[NODE_ROLES.WORKER] }` === 'true';
+    return this.managementNode ? this.managementNode.isWorker : `${ this.labels[NODE_ROLES.WORKER] }` === 'true';
   },
 
   isControlPlane() {
-    if (
+    if (this.managementNode) {
+      return this.managementNode.isControlPlane;
+    } else if (
       `${ this.labels[NODE_ROLES.CONTROL_PLANE] }` === 'true' ||
       `${ this.labels[NODE_ROLES.CONTROL_PLANE_OLD] }` === 'true'
     ) {
@@ -105,9 +132,7 @@ export default {
   },
 
   isEtcd() {
-    const { ETCD: etcd } = NODE_ROLES;
-
-    return `${ this.labels[etcd] }` === 'true';
+    return this.managementNode ? this.managementNode.isEtcd : `${ this.labels[NODE_ROLES.ETCD] }` === 'true';
   },
 
   hasARole() {
@@ -170,7 +195,7 @@ export default {
   },
 
   cpuUsagePercentage() {
-    return ((this.cpuUsage * 10000) / this.cpuCapacity).toString();
+    return ((this.cpuUsage * 100) / this.cpuCapacity).toString();
   },
 
   ramUsage() {
@@ -182,13 +207,17 @@ export default {
   },
 
   ramUsagePercentage() {
-    return ((this.ramUsage * 10000) / this.ramCapacity).toString();
+    return ((this.ramUsage * 100) / this.ramCapacity).toString();
   },
 
   podUsage() {
     return calculatePercentage(this.status.allocatable.pods, this.status.capacity.pods);
   },
 
+  podConsumedUsage() {
+    return ((this.podConsumed / this.podCapacity) * 100).toString();
+  },
+
   podCapacity() {
     return Number.parseInt(this.status.capacity.pods);
   },
@@ -217,6 +246,21 @@ export default {
     return !!this.spec.unschedulable;
   },
 
+  drainedState() {
+    const sNodeCondition = this.managementNode?.status.conditions.find(c => c.type === 'Drained');
+
+    if (sNodeCondition) {
+      if (sNodeCondition.status === 'True') {
+        return 'drained';
+      }
+      if (sNodeCondition.transitioning) {
+        return 'draining';
+      }
+    }
+
+    return null;
+  },
+
   containerRuntimeVersion() {
     return this.status.nodeInfo.containerRuntimeVersion.replace('docker://', '');
   },
@@ -243,7 +287,71 @@ export default {
     };
   },
 
+  clusterId() {
+    // k8s/clusters/<cluster id>/v1/nodes/</cluster name>
+    const parts = this.links.self.split('/');
+
+    return parts[parts.length - 4];
+  },
+
+  normanNodeId() {
+    const managementNode = (this.$rootGetters['management/all'](MANAGEMENT.NODE) || []).find((n) => {
+      return n.id.startsWith(this.clusterId) && n.status.nodeName === this.name;
+    });
+
+    if (managementNode) {
+      return managementNode.id.replace('/', ':');
+    }
+
+    // kube node
+    // id: node-worker2
+
+    // management Node
+    // "id": "c-b5mpr/m-67bzt",
+    // "type": "management.cattle.io.node",
+    // status.nodeName
+
+    // v3/nodes
+    // "nodeName": "node-worker2",
+    // "id": "c-b5mpr:m-67bzt",
+
+    // v3/schema/node
+  },
+
+  normanNode() {
+    return this.$rootGetters['rancher/byId'](NORMAN.NODE, this.normanNodeId);
+  },
+
+  // managementNodeId() {
+
+  // },
+
+  managementNode() {
+    return this.$rootGetters['management/all'](MANAGEMENT.NODE).find((mNode) => {
+      return mNode.id.startsWith(this.clusterId) && mNode.status.nodeName === this.id;
+    });
+  },
+
+  drain() {
+    return (resources) => {
+      this.$dispatch('promptModal', { component: 'DrainNode', resources: [resources || [this], this.normanNodeId] });
+    };
+  },
+
+  stopDrain() {
+    return async(resources) => {
+      const safeResources = Array.isArray(resources) ? resources : [this];
+
+      await Promise.all(safeResources.map((node) => {
+        return node.normanNode.doAction('stopDrain');
+      }));
+    };
+  },
+
   state() {
+    if (this.drainedState) {
+      return this.drainedState;
+    }
     if ( !this[PRIVATE].isDetailPage && this.isCordoned ) {
       return 'cordoned';
     }
@@ -310,6 +418,7 @@ export default {
       return this.$rootGetters['management/byId'](CAPI.MACHINE, `${ namespace }/${ name }`);
     }
   },
+
 };
 
 function calculatePercentage(allocatable, capacity) {
diff --git a/pages/c/_cluster/_product/projectsnamespaces.vue b/pages/c/_cluster/_product/projectsnamespaces.vue
index 8f54684340..e07bb8b359 100644
--- a/pages/c/_cluster/_product/projectsnamespaces.vue
+++ b/pages/c/_cluster/_product/projectsnamespaces.vue
@@ -175,8 +175,7 @@ export default {
     />
     <ResourceTable
       ref="table"
-      class="
-      table"
+      class="table"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
@@ -224,35 +223,35 @@ export default {
 </template>
 <style lang="scss" scoped>
 .project-namespaces {
-    & ::v-deep {
-        .project-name {
-          line-height: 30px;
-        }
-
-        .project-bar {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            &.has-description {
-              .right {
-                margin-top: 5px;
-              }
-              .group-tab {
-                &, &::after {
-                    height: 50px;
-                }
-
-                &::after {
-                    right: -20px;
-                }
-
-                .description {
-                    margin-top: -20px;
-                }
-              }
-            }
-        }
+  & ::v-deep {
+    .project-name {
+      line-height: 30px;
     }
+
+    .project-bar {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      &.has-description {
+        .right {
+          margin-top: 5px;
+        }
+        .group-tab {
+          &, &::after {
+              height: 50px;
+          }
+
+          &::after {
+              right: -20px;
+          }
+
+          .description {
+              margin-top: -20px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/pages/home.vue b/pages/home.vue
index 02f88ca3ed..1093aaecd0 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -372,7 +372,7 @@ export default {
                   </td>
                 </template>
                 <template #col:pods="{row}">
-                  <td v-if="row.status.allocatable.pods && row.status.allocatable.pods!== '0'">
+                  <td v-if="row.status.allocatable && row.status.allocatable.pods && row.status.allocatable.pods!== '0'">
                     {{ `${row.status.requested.pods}/${row.status.allocatable.pods}` }}
                   </td>
                   <td v-else>
diff --git a/plugins/steve/model-loader.js b/plugins/steve/model-loader.js
index 18fb52f602..8b4f6cc7b3 100644
--- a/plugins/steve/model-loader.js
+++ b/plugins/steve/model-loader.js
@@ -16,6 +16,16 @@ const cache = {};
 export function lookup(type, appSpecializationName) {
   type = normalizeType(type).replace(/\//g, '');
 
+  // TODO: RC hack
+  if (type === 'node') {
+    console.log(type);
+    if (typeof appSpecializationName === 'undefined') {
+      type = 'norman-node';
+    } else {
+      type = 'kube-node';
+    }
+  }
+
   const impl = cache[type];
 
   if ( impl ) {
@@ -25,6 +35,17 @@ export function lookup(type, appSpecializationName) {
   }
 
   try {
+    // TODO: RC hack
+    if (type === 'norman-node' || type === 'kube-node') {
+      // appSpecializationName will be undefined for norman nodes
+      const base = require(`@/models/node/${ type }`);
+      const model = { ...base.default };
+
+      cache[type] = model;
+
+      return model;
+    }
+
     const base = require(`@/models/${ type }`);
     const model = { ...base.default };
 
diff --git a/plugins/steve/resource-instance.js b/plugins/steve/resource-instance.js
index 7da0316a9e..1a0876d6f8 100644
--- a/plugins/steve/resource-instance.js
+++ b/plugins/steve/resource-instance.js
@@ -92,6 +92,8 @@ export const STATES = {
   deployed:           { color: 'success', icon: 'dot-open' },
   disabled:           { color: 'warning', icon: 'error' },
   disconnected:       { color: 'warning', icon: 'error' },
+  drained:            { color: 'info', icon: 'tag' },
+  draining:           { color: 'warning', icon: 'tag' },
   errapplied:         { color: 'error', icon: 'error' },
   error:              { color: 'error', icon: 'error' },
   erroring:           { color: 'error', icon: 'error' },

From dfe4b1693fb59cf057319da9ea889971127d6ba7 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 24 Jun 2021 16:23:45 +0100
Subject: [PATCH 2/4] Minor Tweaks

---
 assets/translations/en-us.yaml | 3 ++-
 list/node.vue                  | 9 +++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index b1f2aaabaa..e55b0d7ebe 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -2140,7 +2140,6 @@ namespaceList:
 
 node:
   list:
-    pool: Pool
     nodeTaint: Taints
   detail:
     detailTop:
@@ -2920,6 +2919,8 @@ resourceTable:
     project: "<span>Project:</span> {name}"
     notInAWorkspace: Not in a Workspace
     workspace: "<span>Workspace:</span> {name}"
+    notInANodePool: "Not in a Pool"
+    nodePool: "<span>Node Pool:</span> {name} ({count})"
 
 resourceTabs:
   conditions:
diff --git a/list/node.vue b/list/node.vue
index 66b0067d42..9bf25b9248 100644
--- a/list/node.vue
+++ b/list/node.vue
@@ -51,7 +51,7 @@ export default {
 
     if (canViewNodePools && canViewNodeTemplates) {
       // Managemnet Node's required for kube role and some reousrce states
-      hash.mNodes = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
+      hash.mgmtNodes = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
       hash.nodePools = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
       hash.nodeTemplates = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
     }
@@ -143,7 +143,6 @@ export default {
 
     updateNodePools(nodes = []) {
       nodes.forEach((node) => {
-        // const sNode = this.clustermNodes.find(sn => sn.status.nodeName === node.id);
         const sNode = node.managementNode;
 
         if (sNode) {
@@ -186,11 +185,9 @@ export default {
     <template #group-by="{group}">
       <div class="pool-row" :class="{'has-description':clusterNodePoolsMap[group.key] && clusterNodePoolsMap[group.key].nodeTemplate}">
         <div v-trim-whitespace class="group-tab">
-          <div v-if="clusterNodePoolsMap[group.key]" class="project-name">
-            {{ t('node.list.pool') }}: {{ clusterNodePoolsMap[group.key].spec.hostnamePrefix }} ({{ group.rows.length }})
+          <div v-if="clusterNodePoolsMap[group.key]" class="project-name" v-html="t('resourceTable.groupLabel.nodePool', { name: clusterNodePoolsMap[group.key].spec.hostnamePrefix, count: group.rows.length})">
           </div>
-          <div v-else class="project-name">
-            {{ t('node.list.pool') }}: {{ t('generic.none') }}
+          <div v-else class="project-name" v-html="t('resourceTable.groupLabel.notInANodePool')">
           </div>
           <div v-if="clusterNodePoolsMap[group.key] && clusterNodePoolsMap[group.key].nodeTemplate" class="description text-muted text-small">
             {{ clusterNodePoolsMap[group.key].providerDisplay }} &ndash;  {{ clusterNodePoolsMap[group.key].providerLocation }} / {{ clusterNodePoolsMap[group.key].providerSize }} ({{ clusterNodePoolsMap[group.key].providerName }})

From f960597e2c30e120f881c7851180e78af0b150c8 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 25 Jun 2021 12:10:02 +0100
Subject: [PATCH 3/4] Multiple fixes and changes following Vince sync

Functional
- Attempt to load resource model file with store prefix ('cluster/node') before attempting just type ('node). Fixes kube / norman node clash
UI
- Fixed node list group/ungroup button label
- Fixed node list group label
- Fixed bottom border of row without taints
---
 assets/translations/en-us.yaml                |  1 +
 config/types.js                               |  1 +
 list/node.vue                                 | 23 +++++---
 models/{node/kube-node.js => cluster/node.js} | 48 ++++++-----------
 plugins/steve/model-loader.js                 | 54 +++++++------------
 plugins/steve/resource-proxy.js               |  3 +-
 6 files changed, 53 insertions(+), 77 deletions(-)
 rename models/{node/kube-node.js => cluster/node.js} (92%)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index e55b0d7ebe..806282a1be 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -2140,6 +2140,7 @@ namespaceList:
 
 node:
   list:
+    pool: Pool
     nodeTaint: Taints
   detail:
     detailTop:
diff --git a/config/types.js b/config/types.js
index d0debd4882..e6a8a6a1fe 100644
--- a/config/types.js
+++ b/config/types.js
@@ -17,6 +17,7 @@ export const NORMAN = {
   CLUSTER_TOKEN:                 'clusterregistrationtoken',
   CLUSTER_ROLE_TEMPLATE_BINDING: 'clusterRoleTemplateBinding',
   GROUP:                         'group',
+  // Note - This allows access to node resources, not schema's or custom components (both are accessed via 'type' which clashes with kube node)
   NODE:                          'node',
   PRINCIPAL:                     'principal',
   PROJECT:                       'project',
diff --git a/list/node.vue b/list/node.vue
index 9bf25b9248..ac69b7d8fe 100644
--- a/list/node.vue
+++ b/list/node.vue
@@ -185,7 +185,7 @@ export default {
     <template #group-by="{group}">
       <div class="pool-row" :class="{'has-description':clusterNodePoolsMap[group.key] && clusterNodePoolsMap[group.key].nodeTemplate}">
         <div v-trim-whitespace class="group-tab">
-          <div v-if="clusterNodePoolsMap[group.key]" class="project-name" v-html="t('resourceTable.groupLabel.nodePool', { name: clusterNodePoolsMap[group.key].spec.hostnamePrefix, count: group.rows.length})">
+          <div v-if="clusterNodePoolsMap[group.key]" class="project-name" v-html="t('resourceTable.groupLabel.nodePool', { name: clusterNodePoolsMap[group.key].spec.hostnamePrefix, count: group.rows.length}, true)">
           </div>
           <div v-else class="project-name" v-html="t('resourceTable.groupLabel.notInANodePool')">
           </div>
@@ -202,14 +202,15 @@ export default {
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td :colspan="fullColspan-2">
-            <div class="taints">
-              {{ t('node.list.nodeTaint') }}:
-              <Tag v-for="taint in row.spec.taints" :key="taint.key + taint.value + taint.effect">
-                {{ taint.key }}={{ taint.value }}:{{ taint.effect }}
-              </Tag>
-            </div>
+            {{ t('node.list.nodeTaint') }}:
+            <Tag v-for="taint in row.spec.taints" :key="taint.key + taint.value + taint.effect" class="mr-5">
+              {{ taint.key }}={{ taint.value }}:{{ taint.effect }}
+            </Tag>
           </td>
         </template>
+        <td v-else :colspan="fullColspan">
+&nbsp;
+        </td>
       </tr>
     </template>
   </ResourceTable>
@@ -251,9 +252,15 @@ export default {
 .taints {
   td {
     padding-top:0;
+    .tag {
+      margin-right: 5px
+    }
   }
   &.empty-taints {
-   td {
+    // No taints... so hide sub-row (but not bottom-border)
+    height: 0;
+    line-height: 0;
+    td {
       padding: 0;
     }
   }
diff --git a/models/node/kube-node.js b/models/cluster/node.js
similarity index 92%
rename from models/node/kube-node.js
rename to models/cluster/node.js
index 03e4ef3a7a..63895e3053 100644
--- a/models/node/kube-node.js
+++ b/models/cluster/node.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { formatPercent } from '@/utils/string';
 import { CAPI as CAPI_ANNOTATIONS, NODE_ROLES, RKE } from '@/config/labels-annotations.js';
 import {
@@ -7,13 +6,14 @@ import {
 import { parseSi } from '@/utils/units';
 import { PRIVATE } from '@/plugins/steve/resource-proxy';
 import findLast from 'lodash/findLast';
-import { isObject } from 'lodash';
 
 export default {
   _availableActions() {
+    const normanAction = this.normanNode?.actions || {};
+
     const cordon = {
       action:     'cordon',
-      enabled:    this.hasLink('update') && this.isWorker && !this.isCordoned,
+      enabled:    !!normanAction.cordon,
       icon:       'icon icon-fw icon-pause',
       label:      'Cordon',
       total:      1,
@@ -22,15 +22,13 @@ export default {
 
     const uncordon = {
       action:     'uncordon',
-      enabled:    this.hasLink('update') && this.isWorker && this.isCordoned,
+      enabled:    !!normanAction.uncordon,
       icon:       'icon icon-fw icon-play',
       label:      'Uncordon',
       total:      1,
       bulkable:   true
     };
 
-    const normanAction = this.normanNode?.actions || {};
-
     const drain = {
       action:     'drain',
       enabled:     !!normanAction.drain,
@@ -46,7 +44,6 @@ export default {
       icon:       'icon icon-fw icon-x',
       label:      this.t('drainNode.actionStop'),
       bulkable:   true,
-      bulkAction: 'stopDrain'
     };
 
     const openSsh = {
@@ -274,21 +271,26 @@ export default {
   },
 
   cordon() {
-    return async() => {
-      Vue.set(this.spec, 'unschedulable', true);
-      await this.save();
+    return async(resources) => {
+      const safeResources = Array.isArray(resources) ? resources : [this];
+
+      await Promise.all(safeResources.map((node) => {
+        return node.normanNode.doAction('cordon');
+      }));
     };
   },
 
   uncordon() {
-    return async() => {
-      Vue.set(this.spec, 'unschedulable', false);
-      await this.save();
+    return async(resources) => {
+      const safeResources = Array.isArray(resources) ? resources : [this];
+
+      await Promise.all(safeResources.map((node) => {
+        return node.normanNode.doAction('uncordon');
+      }));
     };
   },
 
   clusterId() {
-    // k8s/clusters/<cluster id>/v1/nodes/</cluster name>
     const parts = this.links.self.split('/');
 
     return parts[parts.length - 4];
@@ -302,30 +304,12 @@ export default {
     if (managementNode) {
       return managementNode.id.replace('/', ':');
     }
-
-    // kube node
-    // id: node-worker2
-
-    // management Node
-    // "id": "c-b5mpr/m-67bzt",
-    // "type": "management.cattle.io.node",
-    // status.nodeName
-
-    // v3/nodes
-    // "nodeName": "node-worker2",
-    // "id": "c-b5mpr:m-67bzt",
-
-    // v3/schema/node
   },
 
   normanNode() {
     return this.$rootGetters['rancher/byId'](NORMAN.NODE, this.normanNodeId);
   },
 
-  // managementNodeId() {
-
-  // },
-
   managementNode() {
     return this.$rootGetters['management/all'](MANAGEMENT.NODE).find((mNode) => {
       return mNode.id.startsWith(this.clusterId) && mNode.status.nodeName === this.id;
diff --git a/plugins/steve/model-loader.js b/plugins/steve/model-loader.js
index 8b4f6cc7b3..882d7be144 100644
--- a/plugins/steve/model-loader.js
+++ b/plugins/steve/model-loader.js
@@ -2,30 +2,7 @@ import { normalizeType } from './normalize';
 
 const cache = {};
 
-/**
- * This will lookup and load a model based on the type and appSpecializationName if specified.
- *
- * We want to have the ability to treat chart apps as if they were native resources.
- * As part of this desire to treat apps as a native resource we also want to be able to customize their models.
- * If we attempt to load an 'app' type with an 'appSpecializationName' we will first
- * load the 'app' type and then merge that with a model found in '@/models/apps/${appSpecializationName}'
- * if the file exists.
- * @param {*} type the type we'd like to lookup
- * @param {*} appSpecializationName the name of the app so we can lookup a model with the given name and merge that with the app base type.
- */
-export function lookup(type, appSpecializationName) {
-  type = normalizeType(type).replace(/\//g, '');
-
-  // TODO: RC hack
-  if (type === 'node') {
-    console.log(type);
-    if (typeof appSpecializationName === 'undefined') {
-      type = 'norman-node';
-    } else {
-      type = 'kube-node';
-    }
-  }
-
+function find(cache, type, appSpecializationName) {
   const impl = cache[type];
 
   if ( impl ) {
@@ -35,17 +12,6 @@ export function lookup(type, appSpecializationName) {
   }
 
   try {
-    // TODO: RC hack
-    if (type === 'norman-node' || type === 'kube-node') {
-      // appSpecializationName will be undefined for norman nodes
-      const base = require(`@/models/node/${ type }`);
-      const model = { ...base.default };
-
-      cache[type] = model;
-
-      return model;
-    }
-
     const base = require(`@/models/${ type }`);
     const model = { ...base.default };
 
@@ -68,3 +34,21 @@ export function lookup(type, appSpecializationName) {
 
   return null;
 }
+
+/**
+ * This will lookup and load a model based on the type and appSpecializationName if specified.
+ *
+ * We want to have the ability to treat chart apps as if they were native resources.
+ * As part of this desire to treat apps as a native resource we also want to be able to customize their models.
+ * If we attempt to load an 'app' type with an 'appSpecializationName' we will first
+ * load the 'app' type and then merge that with a model found in '@/models/apps/${appSpecializationName}'
+ * if the file exists.
+ * @param {*} store the name of the store that the type comes from
+ * @param {*} type the type we'd like to lookup
+ * @param {*} appSpecializationName the name of the app so we can lookup a model with the given name and merge that with the app base type.
+ */
+export function lookup(store, type, appSpecializationName) {
+  type = normalizeType(type).replace(/\//g, '');
+
+  return find(cache, `${ store }/${ type }`, appSpecializationName) || find(cache, type, appSpecializationName) || null;
+}
diff --git a/plugins/steve/resource-proxy.js b/plugins/steve/resource-proxy.js
index 5b7d90c516..2479228859 100644
--- a/plugins/steve/resource-proxy.js
+++ b/plugins/steve/resource-proxy.js
@@ -37,9 +37,8 @@ export function proxyFor(ctx, obj, isClone = false) {
       });
     }
   }
-
   const mappedType = ctx.rootGetters['type-map/componentFor'](obj.type);
-  const customModel = lookup(mappedType, obj?.metadata?.name);
+  const customModel = lookup(ctx.state.config.namespace, mappedType, obj?.metadata?.name);
   const model = customModel || ResourceInstance;
 
   remapSpecialKeys(obj);

From 1fb24c323cd52b43ab7984e376abcfe309b56a08 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 28 Jun 2021 11:51:51 +0100
Subject: [PATCH 4/4] Fixes after review - Fixed display of pool template
 size/location - Added i10n for missing pool template description - Fixed some
 comments

---
 assets/translations/en-us.yaml              |  3 ++
 components/dialog/DrainNode.vue             |  1 -
 list/node.vue                               | 13 ++----
 models/management.cattle.io.nodetemplate.js | 46 ++++++++++-----------
 pages/home.vue                              |  2 +-
 5 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 806282a1be..bcfa44b912 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -2142,6 +2142,9 @@ node:
   list:
     pool: Pool
     nodeTaint: Taints
+    poolDescription:
+      noSize: No Size
+      noLocation: No Location
   detail:
     detailTop:
       containerRuntime: Container Runtime
diff --git a/components/dialog/DrainNode.vue b/components/dialog/DrainNode.vue
index fa538240b0..7d78bf5a79 100644
--- a/components/dialog/DrainNode.vue
+++ b/components/dialog/DrainNode.vue
@@ -130,7 +130,6 @@ export default {
 </script>
 
 <template>
-  <!-- TODO: RC huh - clusterTemplateCreate ClusterTemplateOverrideToggle -->
   <Card class="prompt-rotate" :show-highlight-border="false">
     <h4 slot="title" class="text-default-text">
       <template v-if="kubeNodes.length > 1">
diff --git a/list/node.vue b/list/node.vue
index ac69b7d8fe..f95e5c2083 100644
--- a/list/node.vue
+++ b/list/node.vue
@@ -8,7 +8,6 @@ import {
 import metricPoller from '@/mixins/metric-poller';
 
 import {
-  CAPI,
   MANAGEMENT, METRIC, NODE, NORMAN, POD
 } from '@/config/types';
 import { mapGetters } from 'vuex';
@@ -32,11 +31,7 @@ export default {
   },
 
   async fetch() {
-    const hash = {
-      kubeNodes: this.$store.dispatch('cluster/findAll', { type: NODE }),
-      // Used by kube node model to determine if SSH action
-      machines:           this.$store.dispatch('management/findAll', { type: CAPI.MACHINE })
-    };
+    const hash = { kubeNodes: this.$store.dispatch('cluster/findAll', { type: NODE }) };
 
     const canViewNodePools = this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE_POOL);
     const canViewNodeTemplates = this.$store.getters[`management/schemaFor`](MANAGEMENT.NODE_TEMPLATE);
@@ -231,15 +226,15 @@ export default {
     }
     .group-tab {
       &, &::after {
-          height: 50px;
+        height: 50px;
       }
 
       &::after {
-          right: -20px;
+        right: -20px;
       }
 
       .description {
-          margin-top: -20px;
+        margin-top: -20px;
       }
     }
   }
diff --git a/models/management.cattle.io.nodetemplate.js b/models/management.cattle.io.nodetemplate.js
index cbc9cf680f..f2080a964b 100644
--- a/models/management.cattle.io.nodetemplate.js
+++ b/models/management.cattle.io.nodetemplate.js
@@ -3,69 +3,69 @@ import { formatSi } from '@/utils/units';
 const CONFIG_KEYS = [
   {
     driver:           'aliyunecs',
-    size:      { key: 'config.instanceType' },
+    size:      { key: 'instanceType' },
     location: {
       getDisplayProperty(that) {
-        return `${ that.config.region }${ that.config.zone }`;
+        return `${ that.providerConfig.region }${ that.providerConfig.zone }`;
       }
     }
   },
   {
     driver:           'amazonec2',
-    size:      { key: 'config.instanceType' },
+    size:      { key: 'instanceType' },
     location: {
       getDisplayProperty(that) {
-        return `${ that.config.region }${ that.config.zone }`;
+        return `${ that.providerConfig.region }${ that.providerConfig.zone }`;
       }
     }
   },
   {
     driver:           'azure',
-    size:      { key: 'config.size' },
-    location: { key: 'config.location' }
+    size:      { key: 'size' },
+    location: { key: 'location' }
   },
   {
     driver:           'digitalocean',
-    size:      { key: 'config.size' },
-    location: { key: 'config.region' }
+    size:      { key: 'size' },
+    location: { key: 'region' }
   },
   {
     driver:           'exoscale',
-    size:      { key: 'config.instanceProfile' },
-    location: { key: 'config.availabilityZone' }
+    size:      { key: 'instanceProfile' },
+    location: { key: 'availabilityZone' }
   },
   {
     driver:           'linode',
-    size:      { key: 'config.instanceType' },
-    location: { key: 'config.region' }
+    size:      { key: 'instanceType' },
+    location: { key: 'region' }
   },
   {
     driver:           'oci',
-    size:      { key: 'config.nodeShape' },
+    size:      { key: 'nodeShape' },
     location: {}
   },
   {
     driver:           'packet',
-    size:      { key: 'config.plan' },
-    location: { key: 'config.facilityCode' }
+    size:      { key: 'plan' },
+    location: { key: 'facilityCode' }
   },
   {
     driver:           'pnap',
-    size:      { key: 'config.serverType' },
-    location: { key: 'config.serverLocation' }
+    size:      { key: 'serverType' },
+    location: { key: 'serverLocation' }
   },
   {
     driver:           'rackspace',
-    size:      { key: 'config.flavorId' },
-    location: { key: 'config.region' }
+    size:      { key: 'flavorId' },
+    location: { key: 'region' }
   },
   {
     driver:           'vmwarevsphere',
     size:   {
       getDisplayProperty(that) {
-        const size = formatSi(that.config.memorySize * 1048576, 1024, 'iB');
+        const size = formatSi(that.providerConfig.memorySize * 1048576, 1024, 'iB');
 
-        return `${ size }, ${ that.config.cpuCount } Core`;
+        return `${ size }, ${ that.providerConfig.cpuCount } Core`;
       }
     },
     location: { key: null }
@@ -109,7 +109,7 @@ export default {
       }
     }
 
-    return this.providerConfig?.region || 'No Region';
+    return this.providerConfig?.region || this.t('node.list.poolDescription.noLocation');
   },
 
   providerSize() {
@@ -128,6 +128,6 @@ export default {
       }
     }
 
-    return this.providerConfig?.size || 'No Size';
+    return this.providerConfig?.size || this.t('node.list.poolDescription.noSize');
   }
 };
diff --git a/pages/home.vue b/pages/home.vue
index 1093aaecd0..903faf4791 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -372,7 +372,7 @@ export default {
                   </td>
                 </template>
                 <template #col:pods="{row}">
-                  <td v-if="row.status.allocatable && row.status.allocatable.pods && row.status.allocatable.pods!== '0'">
+                  <td v-if="row.status.allocatable && row.status.allocatable.pods!== '0'">
                     {{ `${row.status.requested.pods}/${row.status.allocatable.pods}` }}
                   </td>
                   <td v-else>