From 32c7ba1401c9f5b325d59d827c37f38a5e868f1b Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Fri, 19 Nov 2021 17:43:31 +0000
Subject: [PATCH 1/3] Add Health (Pod/Job) and Scaling column to Workload
 table/s - Show a new column in workload table which indicates pod/job state
 and allows user to scale if possible - Pod/job state matches that shown in
 the workload type detail pages - Pod/job state requires we fetch these
 resources, in order to show the list quickly we don't block on these - Also
 show tooltip for columns supplied by kube schemas (this makes it easier to
 understand some of the workload columns)

Generic changes added to support drop down
- Allow columns to block selection of row
- Added generic PlusMinus component (this will eventually make it on to the workload detail page)
- In order to make room for the new column some columns (image + endpoint) will be removed as the screen shrinks
---
 assets/translations/en-us.yaml               |   1 +
 components/SortableTable/THead.vue           |   4 +-
 components/SortableTable/index.vue           |   4 +-
 components/SortableTable/selection.js        |   5 +
 components/form/PlusMinus.vue                |  71 ++++++
 components/formatter/WorkloadHealthScale.vue | 225 +++++++++++++++++++
 config/product/explorer.js                   |  18 +-
 config/table-headers.js                      |  16 +-
 detail/workload/index.vue                    | 111 +--------
 list/workload.vue                            |  22 +-
 models/catalog.cattle.io.clusterrepo.js      |   2 +-
 models/workload.js                           | 105 ++++++++-
 store/type-map.js                            |   9 +-
 13 files changed, 474 insertions(+), 119 deletions(-)
 create mode 100644 components/form/PlusMinus.vue
 create mode 100644 components/formatter/WorkloadHealthScale.vue

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 948470f752..dd7b2cd5c4 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -4183,6 +4183,7 @@ tableHeaders:
       one { Host }
       other { Hosts }
     }
+  health: Health
   id: ID
   image: Image
   imageSize: Size
diff --git a/components/SortableTable/THead.vue b/components/SortableTable/THead.vue
index fe4a354f8f..c41a6f51da 100644
--- a/components/SortableTable/THead.vue
+++ b/components/SortableTable/THead.vue
@@ -135,7 +135,7 @@ export default {
         :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
         @click.prevent="changeSort($event, col)"
       >
-        <span v-if="col.sort" @click="$router.applyQuery(queryFor(col))">
+        <span v-if="col.sort" v-tooltip="col.tooltip" @click="$router.applyQuery(queryFor(col))">
           <span v-html="labelFor(col)" />
           <span class="icon-stack">
             <i class="icon icon-sort icon-stack-1x faded" />
@@ -143,7 +143,7 @@ export default {
             <i v-if="isCurrent(col) && descending" class="icon icon-sort-up icon-stack-1x" />
           </span>
         </span>
-        <span v-else>{{ labelFor(col) }}</span>
+        <span v-else v-tooltip="col.tooltip">{{ labelFor(col) }}</span>
       </th>
       <th v-if="rowActions" :width="rowActionsWidth">
       </th>
diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue
index d11f189dfc..cdad2cf206 100644
--- a/components/SortableTable/index.vue
+++ b/components/SortableTable/index.vue
@@ -397,6 +397,7 @@ export default {
   },
 
   methods: {
+
     get,
     dasherize,
 
@@ -675,7 +676,7 @@ export default {
                       :key="col.name"
                       :data-title="labelFor(col)"
                       :align="col.align || 'left'"
-                      :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter, [col.breakpoint]: !!col.breakpoint}"
+                      :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter, [col.breakpoint]: !!col.breakpoint, ['skip-select']: col.skipSelect}"
                       :width="col.width"
                     >
                       <slot :name="'cell:' + col.name" :row="row" :col="col" :value="valueFor(row,col)">
@@ -686,6 +687,7 @@ export default {
                           :row="row"
                           :col="col"
                           v-bind="col.formatterOpts"
+                          :row-key="get(row,keyField)"
                         />
                         <template v-else-if="valueFor(row,col) !== ''">
                           {{ formatValue(row,col) }}
diff --git a/components/SortableTable/selection.js b/components/SortableTable/selection.js
index 4df8fc8bfe..0ad3ec7140 100644
--- a/components/SortableTable/selection.js
+++ b/components/SortableTable/selection.js
@@ -179,6 +179,11 @@ export default {
     async onRowClick(e) {
       const node = this.nodeForEvent(e);
       const td = $(e.target).closest('TD');
+      const skipSelect = td.hasClass('skip-select');
+
+      if (skipSelect) {
+        return;
+      }
       const selection = this.selectedNodes;
       const isCheckbox = this.isSelectionCheckbox(e.target) || td.hasClass('row-check');
       const isExpand = td.hasClass('row-expand');
diff --git a/components/form/PlusMinus.vue b/components/form/PlusMinus.vue
new file mode 100644
index 0000000000..a87ccd9372
--- /dev/null
+++ b/components/form/PlusMinus.vue
@@ -0,0 +1,71 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     Number,
+      required: true,
+    },
+    minusTooltip: {
+      type:    String,
+      default: null,
+    },
+    plusTooltip: {
+      type:    String,
+      default: null,
+    },
+    min: {
+      type:    Number,
+      default: 0
+    },
+    max: {
+      type:    Number,
+      default: null,
+    },
+    disabled: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  computed: {
+    canMinus() {
+      return (this.min !== undefined && this.min !== null) ? this.value > this.min : true;
+    },
+    canPlus() {
+      return (this.max !== undefined && this.max !== null) ? this.value < this.max : true;
+    }
+  }
+};
+
+</script>
+
+<template>
+  <div class="plus-minus">
+    <button v-tooltip="minusTooltip" :disabled="disabled || !canMinus" type="button" class="btn btn-sm role-secondary" @click="$emit('minus')">
+      <i class="icon icon-sm icon-minus" />
+    </button>
+    <div class="value">
+      {{ value }}
+    </div>
+    <button v-tooltip="plusTooltip" :disabled="disabled || !canPlus" type="button" class="btn btn-sm role-secondary" @click="$emit('plus')">
+      <i class="icon icon-sm icon-plus" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.plus-minus {
+  min-width: 70px;
+  display: flex;
+  align-items: center;
+  button:hover {
+    background-color: var(--accent-btn);
+  }
+  .value {
+    width: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/components/formatter/WorkloadHealthScale.vue b/components/formatter/WorkloadHealthScale.vue
new file mode 100644
index 0000000000..dcd20e83fb
--- /dev/null
+++ b/components/formatter/WorkloadHealthScale.vue
@@ -0,0 +1,225 @@
+<script>
+import Vue from 'vue';
+import ProgressBarMulti from '@/components/ProgressBarMulti';
+import PlusMinus from '@/components/form/PlusMinus';
+import { SCALABLE_WORKLOAD_TYPES } from '~/config/types';
+import { ucFirst } from '~/utils/string';
+
+const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
+
+export default {
+  components: { PlusMinus, ProgressBarMulti },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      required: true
+    },
+    rowKey: {
+      type:     String,
+      required: true
+    },
+  },
+
+  mounted() {
+    document.addEventListener('click', this.onClickOutside);
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('click', this.onClickOutside);
+  },
+
+  data() {
+    return { disabled: false, expanded: false };
+  },
+
+  computed: {
+    id() {
+      return `${ this.rowKey }-workload-health-scale`.replaceAll('-', '');
+    },
+
+    canScale() {
+      return !!SCALABLE_TYPES.includes(this.row.type) && this.row.canUpdate;
+    },
+
+    parts() {
+      return Object.entries(this.row.jobGauges || this.row.podGauges || [])
+        .map(([name, value]) => ({
+          color: `bg-${ value.color }`,
+          value: value.count || 0,
+          label: ucFirst(name)
+        })).filter(x => x.value > 0);
+    },
+  },
+
+  methods:  {
+    onClickOutside(event) {
+      const { [`root-${ this.id }`]: component } = this.$refs;
+
+      if (!component || component.contains(event.target)) {
+        return;
+      }
+      this.expanded = false;
+    },
+
+    async scaleDown() {
+      Vue.set(this, 'disabled', true);
+      await this.row.scaleDown();
+      Vue.set(this, 'disabled', false);
+    },
+    async scaleUp() {
+      Vue.set(this, 'disabled', true);
+      await this.row.scaleUp();
+      Vue.set(this, 'disabled', false);
+    },
+
+    insideBounds(bounding, bounds) {
+      return bounding.top >= bounds.top &&
+        bounding.left >= bounds.left &&
+        bounding.right <= bounds.right &&
+        bounding.bottom <= bounds.bottom;
+    },
+
+  },
+
+  watch: {
+    expanded(neu) {
+      setTimeout(() => { // There be beasts without this (classes don't get applied... so drop down never gets shown)
+        const dropdown = document.getElementById(this.id);
+
+        if (!neu) {
+          dropdown.classList.remove('viewported');
+
+          return;
+        }
+
+        // Ensire drop down will be inside of the window, otherwise show above the trigger
+        const bounding = dropdown.getBoundingClientRect();
+        const insideWindow = this.insideBounds(bounding, {
+          top:    0,
+          left:   0,
+          right:  window.innerWidth || document.documentElement.clientWidth,
+          bottom:  window.innerHeight || document.documentElement.clientHeight,
+        });
+
+        // Ensure drop down will be inside the table, otherwise the table will overflow:hidden it
+        const table = document.getElementsByClassName('sortable-table')[0];
+        const insideTable = this.insideBounds(bounding, table.getBoundingClientRect());
+
+        if (insideWindow && insideTable) {
+          dropdown.classList.remove('out-of-view-port');
+        } else {
+          dropdown.classList.add('out-of-view-port');
+        }
+
+        // This will trigger the actual display of the drop down (after we've calculated if it goes below or above trigger)
+        dropdown.classList.add('viewported');
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <div :id="`root-${id}`" :ref="`root-${id}`" class="hs-popover">
+    <div id="trigger" class="hs-popover__trigger" :class="{expanded}" @click="expanded = !expanded">
+      <ProgressBarMulti v-if="parts" class="health" :values="parts" :show-zeros="true" />
+      <i :class="{icon: true, 'icon-chevron-up': expanded, 'icon-chevron-down': !expanded}" />
+    </div>
+    <div :id="id" class="hs-popover__content" :class="{expanded, [id]:true}">
+      <div>
+        <div v-for="obj in parts" :key="obj.label" class="counts">
+          <span>{{ obj.label }}</span>
+          <span>{{ obj.value }}</span>
+        </div>
+        <div v-if="canScale" class="text-center scale">
+          <span>{{ t('tableHeaders.scale') }} </span>
+          <PlusMinus :value="row.spec.replicas" :disabled="disabled" @minus="scaleDown" @plus="scaleUp" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+
+$height: 30px;
+$width: 150px;
+
+.hs-popover {
+  position: relative;
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+
+    width: $width;
+    height: $height;
+
+    border: solid thin var(--sortable-table-top-divider);
+
+    &.expanded {
+      background-color: var(--sortable-table-row-bg);
+    }
+    &:not(.expanded):hover {
+      background-color: var(--accent-btn);
+      .icon {
+        color: unset;
+      }
+    }
+
+    .health {
+      width: $width - $height; // height is width of icon;
+      margin-left: 5px;
+    }
+    .icon {
+      font-size: $height;
+      width: $height;
+      color: var(--primary);
+      margin-top: 1px;
+    }
+  }
+
+  &__content {
+    z-index: 20;
+    width: $width;
+
+    border: solid thin var(--sortable-table-top-divider);
+    background-color: var(--sortable-table-row-bg);
+
+    position: absolute;
+    margin-top: -1px;
+
+    visibility: hidden;
+    &.viewported {
+      visibility: visible;
+    }
+
+    &.out-of-view-port {
+      // Flip to show drop down above trigger
+      bottom: 0;
+      margin-bottom: $height;
+    }
+
+    & > div {
+      padding: 10px;
+    }
+
+    .counts {
+      display: flex;
+      justify-content: space-between;
+    }
+    .scale {
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+    }
+  }
+}
+
+</style>
diff --git a/config/product/explorer.js b/config/product/explorer.js
index fd2dca969f..d184baae64 100644
--- a/config/product/explorer.js
+++ b/config/product/explorer.js
@@ -16,7 +16,7 @@ import {
   USER_ID, USERNAME, USER_DISPLAY_NAME, USER_PROVIDER, WORKLOAD_ENDPOINTS, STORAGE_CLASS_DEFAULT,
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
-  ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON
+  ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE
 } from '@/config/table-headers';
 
 import { DSL } from '@/store/type-map';
@@ -168,14 +168,14 @@ export function init(store) {
   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]);
 
-  headers(WORKLOAD, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, TYPE, 'Ready', AGE]);
-  headers(WORKLOAD_TYPES.DEPLOYMENT, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', AGE]);
-  headers(WORKLOAD_TYPES.DAEMON_SET, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', AGE]);
-  headers(WORKLOAD_TYPES.REPLICA_SET, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', AGE]);
-  headers(WORKLOAD_TYPES.STATEFUL_SET, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', AGE]);
-  headers(WORKLOAD_TYPES.JOB, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Completions', 'Duration', AGE]);
-  headers(WORKLOAD_TYPES.CRON_JOB, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Schedule', 'Last Schedule', AGE]);
-  headers(WORKLOAD_TYPES.REPLICATION_CONTROLLER, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', AGE]);
+  headers(WORKLOAD, [STATE, NAME_COL, NAMESPACE_COL, TYPE, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.DEPLOYMENT, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.DAEMON_SET, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.REPLICA_SET, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.STATEFUL_SET, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.JOB, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Completions', 'Duration', AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.CRON_JOB, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Schedule', 'Last Schedule', AGE, WORKLOAD_HEALTH_SCALE]);
+  headers(WORKLOAD_TYPES.REPLICATION_CONTROLLER, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', AGE, WORKLOAD_HEALTH_SCALE]);
   headers(POD, [STATE, NAME_COL, NAMESPACE_COL, POD_IMAGES, 'Ready', 'Restarts', 'IP', NODE_COL, AGE]);
   headers(STORAGE_CLASS, [STATE, NAME_COL, STORAGE_CLASS_PROVISIONER, STORAGE_CLASS_DEFAULT, AGE]);
 
diff --git a/config/table-headers.js b/config/table-headers.js
index 844c126ff5..86e5b8ff24 100644
--- a/config/table-headers.js
+++ b/config/table-headers.js
@@ -1,5 +1,6 @@
 import { CATTLE_PUBLIC_ENDPOINTS } from '@/config/labels-annotations';
 import { NODE as NODE_TYPE } from '@/config/types';
+import { COLUMN_BREAKPOINTS } from '@/components/SortableTable/index.vue';
 
 // Note: 'id' is always the last sort, so you don't have to specify it here.
 
@@ -602,7 +603,11 @@ export const WORKSPACE = {
   sort:  ['metadata.namespace', 'nameSort'],
 };
 
-export const WORKLOAD_IMAGES = { ...POD_IMAGES, value: '' };
+export const WORKLOAD_IMAGES = {
+  ...POD_IMAGES,
+  value:      '',
+  breakpoint: COLUMN_BREAKPOINTS.LAPTOP
+};
 
 export const WORKLOAD_ENDPOINTS = {
   name:        'workloadEndpoints',
@@ -610,6 +615,15 @@ export const WORKLOAD_ENDPOINTS = {
   value:       `$['metadata']['annotations']['${ CATTLE_PUBLIC_ENDPOINTS }']`,
   formatter:   'Endpoints',
   dashIfEmpty: true,
+  breakpoint:  COLUMN_BREAKPOINTS.DESKTOP
+};
+
+export const WORKLOAD_HEALTH_SCALE = {
+  name:        'workloadHealthScale',
+  labelKey:    'tableHeaders.health',
+  formatter:   'WorkloadHealthScale',
+  width:       150,
+  skipSelect:  true
 };
 
 export const FLEET_SUMMARY = {
diff --git a/detail/workload/index.vue b/detail/workload/index.vue
index 12386655f3..353c9aa4d8 100644
--- a/detail/workload/index.vue
+++ b/detail/workload/index.vue
@@ -8,7 +8,6 @@ import Loading from '@/components/Loading';
 import ResourceTabs from '@/components/form/ResourceTabs';
 import CountGauge from '@/components/CountGauge';
 import { allHash } from '@/utils/promise';
-import { get } from '@/utils/object';
 import DashboardMetrics from '@/components/DashboardMetrics';
 import V1WorkloadMetrics from '@/mixins/v1-workload-metrics';
 import { mapGetters } from 'vuex';
@@ -72,16 +71,7 @@ export default {
 
   computed:   {
     ...mapGetters(['currentCluster']),
-    pods() {
-      const relationships = get(this.value, 'metadata.relationships') || [];
-      const podRelationship = relationships.filter(relationship => relationship.toType === POD)[0];
 
-      if (podRelationship) {
-        return this.$store.getters['cluster/matching'](POD, podRelationship.selector).filter(pod => pod?.metadata?.namespace === this.value.metadata.namespace);
-      } else {
-        return [];
-      }
-    },
     isJob() {
       return this.value.type === WORKLOAD_TYPES.JOB;
     },
@@ -108,24 +98,6 @@ export default {
       return this.podTemplateSpec?.containers[0];
     },
 
-    jobRelationships() {
-      if (!this.isCronJob) {
-        return;
-      }
-
-      return (get(this.value, 'metadata.relationships') || []).filter(relationship => relationship.toType === WORKLOAD_TYPES.JOB);
-    },
-
-    jobs() {
-      if (!this.isCronJob) {
-        return;
-      }
-
-      return this.jobRelationships.map((obj) => {
-        return this.$store.getters['cluster/byId'](WORKLOAD_TYPES.JOB, obj.toId );
-      }).filter(x => !!x);
-    },
-
     jobSchema() {
       return this.$store.getters['cluster/schemaFor'](WORKLOAD_TYPES.JOB);
     },
@@ -134,38 +106,12 @@ export default {
       return this.$store.getters['type-map/headersFor'](this.jobSchema);
     },
 
-    jobGauges() {
-      const out = {
-        succeeded: { color: 'success', count: 0 }, running: { color: 'info', count: 0 }, failed: { color: 'error', count: 0 }
-      };
-
-      if (this.value.type === WORKLOAD_TYPES.CRON_JOB) {
-        this.jobs.forEach((job) => {
-          const { status = {} } = job;
-
-          out.running.count += status.active || 0;
-          out.succeeded.count += status.succeeded || 0;
-          out.failed.count += status.failed || 0;
-        });
-      } else if (this.value.type === WORKLOAD_TYPES.JOB) {
-        const { status = {} } = this.value;
-
-        out.running.count = status.active || 0;
-        out.succeeded.count = status.succeeded || 0;
-        out.failed.count = status.failed || 0;
-      } else {
-        return null;
-      }
-
-      return out;
-    },
-
     totalRuns() {
-      if (!this.jobs) {
+      if (!this.value.jobs) {
         return;
       }
 
-      return this.jobs.reduce((total, job) => {
+      return this.value.jobs.reduce((total, job) => {
         const { status = {} } = job;
 
         total += (status.active || 0);
@@ -177,7 +123,7 @@ export default {
     },
 
     podRestarts() {
-      return this.pods.reduce((total, pod) => {
+      return this.value.pods.reduce((total, pod) => {
         const { status:{ containerStatuses = [] } } = pod;
 
         if (containerStatuses.length) {
@@ -192,39 +138,6 @@ export default {
       }, 0);
     },
 
-    podGauges() {
-      const out = {
-        active: { color: 'success' }, transitioning: { color: 'info' }, warning: { color: 'warning' }, error: { color: 'error' }
-      };
-
-      if (!this.pods) {
-        return out;
-      }
-
-      this.pods.map((pod) => {
-        const { status:{ phase } } = pod;
-        let group;
-
-        switch (phase) {
-        case 'Running':
-          group = 'active';
-          break;
-        case 'Pending':
-          group = 'transitioning';
-          break;
-        case 'Failed':
-          group = 'error';
-          break;
-        default:
-          group = 'warning';
-        }
-
-        out[group].count ? out[group].count++ : out[group].count = 1;
-      });
-
-      return out;
-    },
-
     podHeaders() {
       return [
         STATE,
@@ -255,12 +168,12 @@ export default {
     <h3>
       {{ isJob || isCronJob ? t('workload.detailTop.runs') :t('workload.detailTop.pods') }}
     </h3>
-    <div v-if="pods || jobGauges" class="gauges mb-20">
-      <template v-if="jobGauges">
+    <div v-if="value.pods || value.jobGauges" class="gauges mb-20">
+      <template v-if="value.jobGauges">
         <CountGauge
-          v-for="(group, key) in jobGauges"
+          v-for="(group, key) in value.jobGauges"
           :key="key"
-          :total="isCronJob? totalRuns : pods.length"
+          :total="isCronJob? totalRuns : value.pods.length"
           :useful="group.count || 0"
           :primary-color-var="`--sizzle-${group.color}`"
           :name="t(`workload.gaugeStates.${key}`)"
@@ -268,9 +181,9 @@ export default {
       </template>
       <template v-else>
         <CountGauge
-          v-for="(group, key) in podGauges"
+          v-for="(group, key) in value.podGauges"
           :key="key"
-          :total="pods.length"
+          :total="value.pods.length"
           :useful="group.count || 0"
           :primary-color-var="`--sizzle-${group.color}`"
           :name="t(`workload.gaugeStates.${key}`)"
@@ -280,7 +193,7 @@ export default {
     <ResourceTabs :value="value">
       <Tab v-if="isCronJob" name="jobs" :label="t('tableHeaders.jobs')" :weight="4">
         <SortableTable
-          :rows="jobs"
+          :rows="value.jobs"
           :headers="jobHeaders"
           key-field="id"
           :schema="jobSchema"
@@ -290,8 +203,8 @@ export default {
       </Tab>
       <Tab v-else name="pods" :label="t('tableHeaders.pods')" :weight="4">
         <SortableTable
-          v-if="pods"
-          :rows="pods"
+          v-if="value.pods"
+          :rows="value.pods"
           :headers="podHeaders"
           key-field="id"
           :table-actions="false"
diff --git a/list/workload.vue b/list/workload.vue
index ea28369d7d..908d3933aa 100644
--- a/list/workload.vue
+++ b/list/workload.vue
@@ -1,6 +1,6 @@
 <script>
 import ResourceTable from '@/components/ResourceTable';
-import { WORKLOAD_TYPES, SCHEMA, NODE } from '@/config/types';
+import { WORKLOAD_TYPES, SCHEMA, NODE, POD } from '@/config/types';
 import Loading from '@/components/Loading';
 
 const schema = {
@@ -28,6 +28,8 @@ export default {
 
     let resources;
 
+    this.loadHeathResources();
+
     if ( this.allTypes ) {
       resources = await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => {
       // You may not have RBAC to see some of the types
@@ -88,6 +90,24 @@ export default {
     },
   },
 
+  methods: {
+    loadHeathResources() {
+      // Fetch these in the background to populate workload health
+      if ( this.allTypes ) {
+        this.$store.dispatch('cluster/findAll', { type: POD });
+        this.$store.dispatch('cluster/findAll', { type: WORKLOAD_TYPES.JOB });
+      } else {
+        const type = this.$route.params.resource;
+
+        if (type === WORKLOAD_TYPES.CRON_JOB) {
+          this.$store.dispatch('cluster/findAll', { type: WORKLOAD_TYPES.JOB });
+        } else {
+          this.$store.dispatch('cluster/findAll', { type: POD });
+        }
+      }
+    }
+  },
+
   typeDisplay() {
     const { params:{ resource:type } } = this.$route;
     let paramSchema = schema;
diff --git a/models/catalog.cattle.io.clusterrepo.js b/models/catalog.cattle.io.clusterrepo.js
index a0bcef849e..a12a2be618 100644
--- a/models/catalog.cattle.io.clusterrepo.js
+++ b/models/catalog.cattle.io.clusterrepo.js
@@ -142,7 +142,7 @@ export default class ClusterRepo extends SteveModel {
   get stateObj() {
     return this.metadata?.state ? {
       ...this.metadata.state,
-      transitioning: this.metadata.generation > this.status.observedGeneration ? false : this.metadata.state.transitioning
+      transitioning: this.metadata.generation > this.status?.observedGeneration ? false : this.metadata.state.transitioning
     } : undefined;
   }
 
diff --git a/models/workload.js b/models/workload.js
index 62fcac965c..f34a973ca1 100644
--- a/models/workload.js
+++ b/models/workload.js
@@ -1,6 +1,6 @@
 import { findBy, insertAt } from '@/utils/array';
 import { TARGET_WORKLOADS, TIMESTAMP, UI_MANAGED } from '@/config/labels-annotations';
-import { WORKLOAD_TYPES, SERVICE } from '@/config/types';
+import { POD, WORKLOAD_TYPES, SERVICE } from '@/config/types';
 import { clone, get, set } from '@/utils/object';
 import day from 'dayjs';
 import SteveModel from '@/plugins/steve/steve-class';
@@ -127,6 +127,20 @@ export default class Workload extends SteveModel {
     this.save();
   }
 
+  async scaleDown() {
+    const newScale = this.spec.replicas - 1;
+
+    if (newScale >= 0) {
+      set(this.spec, 'replicas', newScale);
+      await this.save();
+    }
+  }
+
+  async scaleUp() {
+    set(this.spec, 'replicas', this.spec.replicas + 1);
+    await this.save();
+  }
+
   get state() {
     if ( this.spec?.paused === true ) {
       return 'paused';
@@ -612,4 +626,93 @@ export default class Workload extends SteveModel {
       return null;
     }
   }
+
+  get pods() {
+    const relationships = get(this, 'metadata.relationships') || [];
+    const podRelationship = relationships.filter(relationship => relationship.toType === POD)[0];
+
+    if (podRelationship) {
+      return this.$getters['matching'](POD, podRelationship.selector).filter(pod => pod?.metadata?.namespace === this.metadata.namespace);
+    } else {
+      return [];
+    }
+  }
+
+  get podGauges() {
+    const out = {
+      active: { color: 'success' }, transitioning: { color: 'info' }, warning: { color: 'warning' }, error: { color: 'error' }
+    };
+
+    if (!this.pods) {
+      return out;
+    }
+
+    this.pods.map((pod) => {
+      const { status:{ phase } } = pod;
+      let group;
+
+      switch (phase) {
+      case 'Running':
+        group = 'active';
+        break;
+      case 'Pending':
+        group = 'transitioning';
+        break;
+      case 'Failed':
+        group = 'error';
+        break;
+      default:
+        group = 'warning';
+      }
+
+      out[group].count ? out[group].count++ : out[group].count = 1;
+    });
+
+    return out;
+  }
+
+  // Job Specific
+  get jobRelationships() {
+    if (this.type !== WORKLOAD_TYPES.CRON_JOB) {
+      return undefined;
+    }
+
+    return (get(this, 'metadata.relationships') || []).filter(relationship => relationship.toType === WORKLOAD_TYPES.JOB);
+  }
+
+  get jobs() {
+    if (this.type !== WORKLOAD_TYPES.CRON_JOB) {
+      return undefined;
+    }
+
+    return this.jobRelationships.map((obj) => {
+      return this.$getters['byId'](WORKLOAD_TYPES.JOB, obj.toId );
+    }).filter(x => !!x);
+  }
+
+  get jobGauges() {
+    const out = {
+      succeeded: { color: 'success', count: 0 }, running: { color: 'info', count: 0 }, failed: { color: 'error', count: 0 }
+    };
+
+    if (this.type === WORKLOAD_TYPES.CRON_JOB) {
+      this.jobs.forEach((job) => {
+        const { status = {} } = job;
+
+        out.running.count += status.active || 0;
+        out.succeeded.count += status.succeeded || 0;
+        out.failed.count += status.failed || 0;
+      });
+    } else if (this.type === WORKLOAD_TYPES.JOB) {
+      const { status = {} } = this;
+
+      out.running.count = status.active || 0;
+      out.succeeded.count = status.succeeded || 0;
+      out.failed.count = status.failed || 0;
+    } else {
+      return null;
+    }
+
+    return out;
+  }
 }
diff --git a/store/type-map.js b/store/type-map.js
index a4e1344753..4fc27d3112 100644
--- a/store/type-map.js
+++ b/store/type-map.js
@@ -934,13 +934,14 @@ export const getters = {
         const labelKey = `tableHeaders.${ col.name }`;
 
         return {
-          name:  col.name.toLowerCase(),
-          label: exists(labelKey) ? t(labelKey) : col.name,
-          value: col.field.startsWith('.') ? `$${ col.field }` : col.field,
-          sort:  [col.field],
+          name:    col.name.toLowerCase(),
+          label:   exists(labelKey) ? t(labelKey) : col.name,
+          value:   col.field.startsWith('.') ? `$${ col.field }` : col.field,
+          sort:    [col.field],
           formatter,
           formatterOpts,
           width,
+          tooltip: col.description
         };
       }
     };

From bfa03e9b223d2c732d9fb65d9ff419f4f1315502 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 23 Nov 2021 13:20:57 +0000
Subject: [PATCH 2/3] Changes following review - Added error handling - Don't
 pre-load jobs or pods for job lists (they have their own data) - trim tooltip
 for schema based table columns

Investigated
- 'Ready' column is ignored on workloads table, so didn't re-add
- didn't revert type-map, as had schema based table column tooltip plumbing

Also
- Ensure growls appear above list components
---
 assets/translations/en-us.yaml               |  2 ++
 components/GrowlManager.vue                  |  1 +
 components/formatter/WorkloadHealthScale.vue | 21 ++++++++++++++++----
 list/workload.vue                            |  5 +++++
 store/type-map.js                            |  4 +++-
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index dd7b2cd5c4..a86bf29835 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -4721,6 +4721,8 @@ workload:
       label: Successful Job History Limit
       tip: The number of successful finished jobs to retain.
     suspend: Suspend
+  list:
+    errorCannotScale: Failed to scale {workloadName} {direction, select, up { up } down { down } }
   metrics:
     pod: Pod Metrics
     metricsView: Metrics View
diff --git a/components/GrowlManager.vue b/components/GrowlManager.vue
index db0d9bf6ea..4b24d3d108 100644
--- a/components/GrowlManager.vue
+++ b/components/GrowlManager.vue
@@ -97,6 +97,7 @@ export default {
 
 <style lang="scss" scoped>
   .growl-container {
+    z-index: 15;
     position: absolute;
     top: 0;
     right: 0;
diff --git a/components/formatter/WorkloadHealthScale.vue b/components/formatter/WorkloadHealthScale.vue
index dcd20e83fb..f53c964998 100644
--- a/components/formatter/WorkloadHealthScale.vue
+++ b/components/formatter/WorkloadHealthScale.vue
@@ -67,13 +67,26 @@ export default {
     },
 
     async scaleDown() {
-      Vue.set(this, 'disabled', true);
-      await this.row.scaleDown();
-      Vue.set(this, 'disabled', false);
+      await this.scale(false);
     },
     async scaleUp() {
+      await this.scale(true);
+    },
+    async scale(isUp) {
       Vue.set(this, 'disabled', true);
-      await this.row.scaleUp();
+      try {
+        if (isUp) {
+          await this.row.scaleUp();
+        } else {
+          await this.row.scaleDown();
+        }
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', {
+          title: this.t('workload.list.errorCannotScale', { direction: isUp ? 'up' : 'down', workloadName: this.row.name }),
+          err
+        },
+        { root: true });
+      }
       Vue.set(this, 'disabled', false);
     },
 
diff --git a/list/workload.vue b/list/workload.vue
index 908d3933aa..201f9ab52f 100644
--- a/list/workload.vue
+++ b/list/workload.vue
@@ -99,6 +99,11 @@ export default {
       } else {
         const type = this.$route.params.resource;
 
+        if (type === WORKLOAD_TYPES.JOB) {
+          // Ignore job (we're fetching this anyway, plus they contain their own state)
+          return;
+        }
+
         if (type === WORKLOAD_TYPES.CRON_JOB) {
           this.$store.dispatch('cluster/findAll', { type: WORKLOAD_TYPES.JOB });
         } else {
diff --git a/store/type-map.js b/store/type-map.js
index 4fc27d3112..4f4a4dc7ec 100644
--- a/store/type-map.js
+++ b/store/type-map.js
@@ -932,6 +932,8 @@ export const getters = {
         const exists = rootGetters['i18n/exists'];
         const t = rootGetters['i18n/t'];
         const labelKey = `tableHeaders.${ col.name }`;
+        const description = col.description || '';
+        const tooltip = description && description[description.length - 1] === '.' ? description.slice(0, -1) : description;
 
         return {
           name:    col.name.toLowerCase(),
@@ -941,7 +943,7 @@ export const getters = {
           formatter,
           formatterOpts,
           width,
-          tooltip: col.description
+          tooltip
         };
       }
     };

From dc3e88a5daa1849944bb8cc8c28ce2128c6d5116 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 23 Nov 2021 14:09:27 +0000
Subject: [PATCH 3/3] Fix display of health drop downs in tiny tables of one
 entry - Drop down was deemed to exceed bounds to switch to show above row -
 Drop down was clipped due to sortable-table being overflow:hidden - So allow
 overflow to be overriden - Also ensure there's no funnies for the bottom
 element at the bottom of the window

---
 components/ResourceTable.vue                 | 11 +++++++
 components/SortableTable/index.vue           | 20 +++++++++++-
 components/formatter/WorkloadHealthScale.vue | 33 +++++++++++---------
 list/workload.vue                            |  2 +-
 4 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/components/ResourceTable.vue b/components/ResourceTable.vue
index ae1361f229..b6fea174d9 100644
--- a/components/ResourceTable.vue
+++ b/components/ResourceTable.vue
@@ -63,6 +63,15 @@ export default {
       type:    String,
       default: 'resourceTable.groupBy.namespace',
     },
+
+    overflowX: {
+      type:    Boolean,
+      default: false
+    },
+    overflowY: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   computed: {
@@ -263,6 +272,8 @@ export default {
     :paging-params="pagingParams"
     :paging-label="pagingLabel"
     :table-actions="_showBulkActions"
+    :overflow-x="overflowX"
+    :overflow-y="overflowY"
     key-field="_key"
     :sort-generation-fn="sortGenerationFn"
     v-on="$listeners"
diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue
index cdad2cf206..7765f9b3c5 100644
--- a/components/SortableTable/index.vue
+++ b/components/SortableTable/index.vue
@@ -173,6 +173,15 @@ export default {
       default: false
     },
 
+    overflowX: {
+      type:    Boolean,
+      default: false
+    },
+    overflowY: {
+      type:    Boolean,
+      default: false
+    },
+
     /**
      * If pagination of the data is enabled or not
      */
@@ -391,7 +400,9 @@ export default {
     classObject() {
       return {
         'top-divider':     this.topDivider,
-        'body-dividers':   this.bodyDividers
+        'body-dividers':   this.bodyDividers,
+        'overflow-y':      this.overflowY,
+        'overflow-x':      this.overflowX,
       };
     }
   },
@@ -833,6 +844,13 @@ $spacing: 10px;
   background: var(--sortable-table-bg);
   border-radius: 4px;
 
+  &.overflow-x {
+    overflow-x: visible;
+  }
+  &.overflow-y {
+    overflow-y: visible;
+  }
+
   td {
     padding: 8px 5px;
     border: 0;
diff --git a/components/formatter/WorkloadHealthScale.vue b/components/formatter/WorkloadHealthScale.vue
index f53c964998..ad9cd490d8 100644
--- a/components/formatter/WorkloadHealthScale.vue
+++ b/components/formatter/WorkloadHealthScale.vue
@@ -101,11 +101,16 @@ export default {
 
   watch: {
     expanded(neu) {
+      // If the drop down content appears outside of the window then move it to be above the trigger
+      // Do this is three steps
+      // expanded: false & expanded-checked = false - Content does not appear in DOM
+      // expanded: true & expanded-checked = false - Content appears in DOM (so it's location can be calcualated to be in or out of an area) but isn't visible (user doesn't see content blip from below to above trigger)
+      // expanded: true & expanded-checked = true - Content appears in DOM and is visible (it's final location is known so user can see)
       setTimeout(() => { // There be beasts without this (classes don't get applied... so drop down never gets shown)
         const dropdown = document.getElementById(this.id);
 
         if (!neu) {
-          dropdown.classList.remove('viewported');
+          dropdown.classList.remove('expanded-checked');
 
           return;
         }
@@ -119,18 +124,14 @@ export default {
           bottom:  window.innerHeight || document.documentElement.clientHeight,
         });
 
-        // Ensure drop down will be inside the table, otherwise the table will overflow:hidden it
-        const table = document.getElementsByClassName('sortable-table')[0];
-        const insideTable = this.insideBounds(bounding, table.getBoundingClientRect());
-
-        if (insideWindow && insideTable) {
-          dropdown.classList.remove('out-of-view-port');
+        if (insideWindow) {
+          dropdown.classList.remove('out-of-view');
         } else {
-          dropdown.classList.add('out-of-view-port');
+          dropdown.classList.add('out-of-view');
         }
 
         // This will trigger the actual display of the drop down (after we've calculated if it goes below or above trigger)
-        dropdown.classList.add('viewported');
+        dropdown.classList.add('expanded-checked');
       });
     }
   }
@@ -158,7 +159,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 $height: 30px;
 $width: 150px;
@@ -198,7 +199,7 @@ $width: 150px;
   }
 
   &__content {
-    z-index: 20;
+    z-index: 14;
     width: $width;
 
     border: solid thin var(--sortable-table-top-divider);
@@ -207,15 +208,19 @@ $width: 150px;
     position: absolute;
     margin-top: -1px;
 
+    display: none;
     visibility: hidden;
-    &.viewported {
+    &.expanded {
+      display: inline;
+    }
+    &.expanded-checked {
       visibility: visible;
     }
 
-    &.out-of-view-port {
+    &.out-of-view {
       // Flip to show drop down above trigger
       bottom: 0;
-      margin-bottom: $height;
+      margin-bottom: $height - 1px;
     }
 
     & > div {
diff --git a/list/workload.vue b/list/workload.vue
index 201f9ab52f..a23c370a1d 100644
--- a/list/workload.vue
+++ b/list/workload.vue
@@ -128,5 +128,5 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <ResourceTable v-else :schema="schema" :rows="rows" />
+  <ResourceTable v-else :schema="schema" :rows="rows" :overflow-y="true" />
 </template>