From 053b7a138ef405c6094efabfe0db0be8dd041b67 Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@rancher.com>
Date: Sun, 4 Oct 2020 01:21:29 -0700
Subject: [PATCH] Fleet fixes (#1612)

---
 assets/translations/en-us.yaml                | 12 +++----
 components/ActionMenu.vue                     |  2 +-
 components/AssignTo.vue                       | 35 +++++++++++--------
 components/Card.vue                           |  2 +-
 components/FleetClusters.vue                  |  2 ++
 components/SortableTable/index.vue            |  2 +-
 components/form/KeyValue.vue                  |  2 +-
 config/labels-annotations.js                  |  5 ++-
 detail/fleet.cattle.io.clustergroup.vue       |  1 -
 .../management.cattle.io.fleetworkspace.vue   |  2 +-
 edit/fleet.cattle.io.clustergroup.vue         |  6 ++--
 list/fleet.cattle.io.clustergroup.vue         | 20 ++++-------
 models/fleet.cattle.io.cluster.js             |  4 +--
 models/fleet.cattle.io.clustergroup.js        |  2 +-
 models/fleet.cattle.io.gitrepo.js             | 27 ++++++++------
 15 files changed, 66 insertions(+), 58 deletions(-)

diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
index 80449ec3151..4b8c85838bf 100644
--- a/assets/translations/en-us.yaml
+++ b/assets/translations/en-us.yaml
@@ -82,13 +82,13 @@ suffix:
 assignTo:
   title: |-
     {count, plural,
-      =1 { Assign Cluster To... }
-      other { Assign {count} Clusters To... }
+      =1 { Assign Cluster To&hellip; }
+      other { Assign {count} Clusters To&hellip; }
     }
   labelsTitle: |-
     {count, plural,
-      =1 { Assign Cluster To... }
-      other { Assign {count} Clusters To... }
+      =1 { Assign Cluster To&hellip; }
+      other { Assign {count} Clusters To&hellip; }
     }
 
 asyncButton:
@@ -450,8 +450,8 @@ fleet:
       label: Deploy To
     targetDisplay:
       advanced: Advanced
-      cluster: "Cluster: {name}"
-      clusterGroup: "Group: {name}"
+      cluster: "Cluster"
+      clusterGroup: "Group"
       all: All
       local: Local
     workspace:
diff --git a/components/ActionMenu.vue b/components/ActionMenu.vue
index 2c72410bdaf..1b9c643e313 100644
--- a/components/ActionMenu.vue
+++ b/components/ActionMenu.vue
@@ -92,7 +92,7 @@ export default {
     <ul class="list-unstyled menu" :style="style">
       <li v-for="opt in options" :key="opt.action" :class="{divider: opt.divider}" @click="execute(opt, $event)">
         <i v-if="opt.icon" :class="{icon: true, [opt.icon]: true}" />
-        {{ opt.label }}
+        <span v-html="opt.label" />
       </li>
     </ul>
   </div>
diff --git a/components/AssignTo.vue b/components/AssignTo.vue
index bb284e4e41a..634689b4a58 100644
--- a/components/AssignTo.vue
+++ b/components/AssignTo.vue
@@ -115,23 +115,28 @@ export default {
     :scrollable="true"
   >
     <Card v-if="loaded">
-      <h4 slot="title" class="text-default-text">
-        {{ t('assignTo.title', {count: resourceCount}) }}
-      </h4>
+      <h4 slot="title" class="text-default-text" v-html="t('assignTo.title', {count: resourceCount}, true)" />
 
       <div slot="body" class="pl-10 pr-10">
-        <LabeledSelect v-model="moveTo" label="Workspace" :options="workspaceOptions" />
-
-        <KeyValue
-          key="labels"
-          v-model="labels"
-          class="mt-20"
-          :add-label="t('labels.addSetLabel')"
-          :pad-left="false"
-          :read-allowed="false"
-        />
-
-        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        <form>
+          <LabeledSelect
+            v-model="moveTo"
+            label="Workspace"
+            :options="workspaceOptions"
+            placement="bottom"
+          />
+
+          <KeyValue
+            key="labels"
+            v-model="labels"
+            class="mt-20"
+            :add-label="t('labels.addSetLabel')"
+            :pad-left="false"
+            :read-allowed="false"
+          />
+
+          <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+        </form>
       </div>
 
       <div slot="actions">
diff --git a/components/Card.vue b/components/Card.vue
index dd6982b30e1..35d3f65ae49 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -49,7 +49,7 @@ export default {
    background: var(--nav-bg);
    display: grid;
    & .card-body {
-     overflow: hidden;
+     overflow: auto;
      padding: 20px;
    }
    & .card-actions {
diff --git a/components/FleetClusters.vue b/components/FleetClusters.vue
index 63d41a39001..02d47cea0b4 100644
--- a/components/FleetClusters.vue
+++ b/components/FleetClusters.vue
@@ -33,6 +33,7 @@ export default {
           value:     'status.display.readyBundles',
           sort:      'status.summary.ready',
           search:    false,
+          align:    'center',
         },
         {
           name:      'reposReady',
@@ -40,6 +41,7 @@ export default {
           value:     'status.display.readyBundles',
           sort:      'status.summary.ready',
           search:    false,
+          align:    'center',
         },
         FLEET_SUMMARY,
         {
diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue
index 1844a90826e..fa0c8948ae7 100644
--- a/components/SortableTable/index.vue
+++ b/components/SortableTable/index.vue
@@ -464,7 +464,7 @@ export default {
             @mouseleave="setBulkActionOfInterest(null)"
           >
             <i v-if="act.icon" :class="act.icon" />
-            {{ act.label }}
+            <span v-html="act.label" />
           </button>
           <span />
           <label v-if="actionAvailability" class="action-availability">
diff --git a/components/form/KeyValue.vue b/components/form/KeyValue.vue
index 8500cd170a1..f3ed8ebd987 100644
--- a/components/form/KeyValue.vue
+++ b/components/form/KeyValue.vue
@@ -498,7 +498,7 @@ export default {
     column-gap: $column-gutter;
 
     &.extra-column {
-      grid-template-columns: 1fr 1fr min-content;
+      grid-template-columns: 1fr 1fr 100px;
     }
 
     & > .col {
diff --git a/config/labels-annotations.js b/config/labels-annotations.js
index 886df3f18d1..db408fcfaef 100644
--- a/config/labels-annotations.js
+++ b/config/labels-annotations.js
@@ -52,7 +52,10 @@ export const CATALOG = {
 
 const CATTLE_REGEX = /cattle\.io\//;
 
-export const FLEET = { CLUSTER_NAME: 'management.cattle.io/cluster-name' };
+export const FLEET = {
+  CLUSTER_DISPLAY_NAME: 'management.cattle.io/cluster-display-name',
+  CLUSTER_NAME:         'management.cattle.io/cluster-name'
+};
 
 export const RKE = { EXTERNAL_IP: 'rke.cattle.io/external-ip' };
 
diff --git a/detail/fleet.cattle.io.clustergroup.vue b/detail/fleet.cattle.io.clustergroup.vue
index eb6f8a7faf6..8c4db911004 100644
--- a/detail/fleet.cattle.io.clustergroup.vue
+++ b/detail/fleet.cattle.io.clustergroup.vue
@@ -25,7 +25,6 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
     await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
   },
 
diff --git a/detail/management.cattle.io.fleetworkspace.vue b/detail/management.cattle.io.fleetworkspace.vue
index f0b66fbc5f8..bf571367639 100644
--- a/detail/management.cattle.io.fleetworkspace.vue
+++ b/detail/management.cattle.io.fleetworkspace.vue
@@ -29,7 +29,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="mt-20">
     <div class="row">
       <div class="col span-4">
         <CountBox :count="value.counts.gitRepos" :name="gitRepoLabel" :primary-color-var="'--sizzle-3'" />
diff --git a/edit/fleet.cattle.io.clustergroup.vue b/edit/fleet.cattle.io.clustergroup.vue
index 979633e1e3f..062c7c72aa2 100644
--- a/edit/fleet.cattle.io.clustergroup.vue
+++ b/edit/fleet.cattle.io.clustergroup.vue
@@ -59,13 +59,13 @@ export default {
     },
 
     clustersForWorkspace() {
-      const namespace = this.metadata?.namespace;
+      const namespace = this.value.metadata?.namespace;
 
       if ( !namespace ) {
         return [];
       }
 
-      const workspace = this.$store.getters['management/byId'](FLEET.WORKSPACE, this.namespace);
+      const workspace = this.$store.getters['management/byId'](FLEET.WORKSPACE, namespace);
 
       if ( workspace ) {
         return workspace.clusters;
@@ -126,7 +126,7 @@ export default {
       v-if="!isView"
       v-model="value"
       :mode="mode"
-      :namespaced="true"
+      :namespaced="false"
       namespace-label="nameNsDescription.workspace.label"
       :namespace-type="FLEET_WORKSPACE"
     />
diff --git a/list/fleet.cattle.io.clustergroup.vue b/list/fleet.cattle.io.clustergroup.vue
index 303611c29ab..ef9ecddc36c 100644
--- a/list/fleet.cattle.io.clustergroup.vue
+++ b/list/fleet.cattle.io.clustergroup.vue
@@ -6,9 +6,8 @@ import {
   AGE,
   STATE,
   NAME,
-  WORKSPACE, FLEET_SUMMARY
+  FLEET_SUMMARY
 } from '@/config/table-headers';
-import { removeObject } from '@/utils/array';
 
 export default {
   name:       'ListClusterGroup',
@@ -31,23 +30,19 @@ export default {
       const out = [
         STATE,
         NAME,
-        WORKSPACE,
         {
           name:     'clusters',
           labelKey: 'tableHeaders.clustersReady',
           value:    'status.display.readyClusters',
           sort:     'status.display.readyClusters',
           search:   ['status.nonReadyClusterCount', 'status.clusterCount'],
+          align:    'center',
           width:    100,
         },
         FLEET_SUMMARY,
         AGE
       ];
 
-      if ( this.groupBy || !this.groupable ) {
-        removeObject(out, WORKSPACE);
-      }
-
       return out;
     },
   },
@@ -62,16 +57,15 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
-    :group-by="groupBy"
-    :paging="true"
-    paging-label="sortableTable.paging.resource"
-    :paging-params="pagingParams"
     key-field="_key"
     v-on="$listeners"
   >
     <template #cell:clusters="{row}">
-      <span v-if="row.status.nonReadyClusterCount" class="text-warning">{{ row.status.clusterCount - row.status.nonReadyClusterCount }}/{{ row.status.clusterCount }}</span>
-      <span v-else>{{ row.status.clusterCount }}</span>
+      <template v-if="row.status">
+        <span v-if="row.status.nonReadyClusterCount" class="text-warning">{{ row.status.clusterCount - row.status.nonReadyClusterCount }}/{{ row.status.clusterCount }}</span>
+        <span v-else>{{ row.status.clusterCount }}</span>
+      </template>
+      <span v-else class="text-muted">&mdash;</span>
     </template>
   </ResourceTable>
 </template>
diff --git a/models/fleet.cattle.io.cluster.js b/models/fleet.cattle.io.cluster.js
index 6edc616fe20..3332e2a3625 100644
--- a/models/fleet.cattle.io.cluster.js
+++ b/models/fleet.cattle.io.cluster.js
@@ -33,7 +33,7 @@ export default {
 
     insertAt(out, 3, {
       action:     'assignTo',
-      label:      'Assign to...',
+      label:      'Assign to&hellip;',
       icon:       'icon icon-copy',
       bulkable:   true,
       bulkAction: 'assignToBulk',
@@ -75,7 +75,7 @@ export default {
   },
 
   nameDisplay() {
-    return this.metadata?.labels?.[FLEET_LABELS.CLUSTER_NAME] || this.metadata?.name || this.id;
+    return this.metadata?.labels?.[FLEET_LABELS.CLUSTER_DISPLAY_NAME] || this.metadata?.name || this.id;
   },
 
   state() {
diff --git a/models/fleet.cattle.io.clustergroup.js b/models/fleet.cattle.io.clustergroup.js
index ad845e6f261..53e581d250e 100644
--- a/models/fleet.cattle.io.clustergroup.js
+++ b/models/fleet.cattle.io.clustergroup.js
@@ -17,7 +17,7 @@ export default {
 
   targetClusters() {
     const workspace = this.$getters['byId'](FLEET.WORKSPACE, this.metadata.namespace);
-    const expressions = convert(this.spec?.matchLabels || {}, this.spec?.matchExpressions || []);
+    const expressions = convert(this.spec?.selector?.matchLabels || {}, this.spec?.selector?.matchExpressions || []);
 
     if ( !expressions.length ) {
       return workspace.clusters;
diff --git a/models/fleet.cattle.io.gitrepo.js b/models/fleet.cattle.io.gitrepo.js
index 66f33b12e62..d451207fa61 100644
--- a/models/fleet.cattle.io.gitrepo.js
+++ b/models/fleet.cattle.io.gitrepo.js
@@ -2,6 +2,7 @@ import { convert, matching, convertSelectorObj } from '@/utils/selector';
 import jsyaml from 'js-yaml';
 import { escapeHtml } from '@/utils/string';
 import { FLEET } from '@/config/types';
+import { FLEET as FLEET_ANNOTATIONS } from '@/config/labels-annotations';
 import { addObjects, findBy, insertAt } from '@/utils/array';
 import { set } from '@/utils/object';
 
@@ -245,16 +246,20 @@ export default {
       }
 
       if ( target.clusterSelector ) {
-        const expressions = convert(target.clusterSelector.matchLabels, target.clusterSelector.matchExpressions);
-
-        if ( expressions.length === 1 &&
-             expressions[0].key === 'name' &&
-             expressions[0].operation === 'In' &&
-             expressions[0].values.length === 1
-        ) {
-          cluster = expressions[0].values[0];
-          if ( !mode ) {
-            mode = 'cluster';
+        if ( Object.keys(target.clusterSelector).length === 0 ) {
+          mode = 'all';
+        } else {
+          const expressions = convert(target.clusterSelector.matchLabels, target.clusterSelector.matchExpressions);
+
+          if ( expressions.length === 1 &&
+              expressions[0].key === FLEET_ANNOTATIONS.CLUSTER_NAME &&
+              expressions[0].operator === 'In' &&
+              expressions[0].values.length === 1
+          ) {
+            cluster = expressions[0].values[0];
+            if ( !mode ) {
+              mode = 'cluster';
+            }
           }
         }
       }
@@ -266,7 +271,7 @@ export default {
 
     return {
       mode,
-      modeDisplay: this.t(`fleet.gitRepo.targetDisplay."${ mode }"`, { name: cluster || clusterGroup || '?' }),
+      modeDisplay: this.t(`fleet.gitRepo.targetDisplay."${ mode }"`),
       cluster,
       clusterGroup,
       advanced