@rancher/shell 3.0.9-rc.1 → 3.0.9-rc.3

package/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -18,49 +18,67 @@ export default {
   },
 
   computed: {
-    names() {
-      const names = this.clusters.map(({ nameDisplay, name }) => nameDisplay || name);
-      const max = 10;
+    clustersRenderList() {
+      const clustersRenderList = this.clusters.map(({ nameDisplay, name, detailLocation }) => ({
+        name: nameDisplay || name,
+        detailLocation,
+      }));
 
-      const remaining = names.length - max;
-
-      if (remaining > 0) {
-        return [
-          ...names.filter((_, i) => i < max),
-          this.t('fleet.clusterTargets.rules.matching.plusMore', { n: remaining }, true),
-        ];
-      }
-
-      return names;
+      return clustersRenderList;
     }
   }
 };
 </script>
 
 <template>
-  <div class="targets-list">
-    <h3>{{ t('fleet.clusterTargets.rules.matching.title') }}</h3>
-    <span
-      v-for="(name, i) in names"
-      :key="i"
-      class="row mt-5"
-    >
-      {{ name }}
-    </span>
-    <span
-      v-if="!names.length"
-      class="text-label"
-    >
-      {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
-    </span>
+  <div class="targets-list-main">
+    <h3>{{ t('fleet.clusterTargets.rules.matching.title', { n: clustersRenderList.length }) }}</h3>
+    <div class="targets-list-list">
+      <span
+        v-for="(cluster, i) in clustersRenderList"
+        :key="i"
+        class="row mt-5"
+      >
+        <router-link
+          :to="cluster.detailLocation"
+          target="_blank"
+          class="link-main"
+        >
+          {{ cluster.name }}&nbsp;<i class="link-icon icon icon-external-link" />
+        </router-link>
+      </span>
+      <span
+        v-if="!clustersRenderList.length"
+        class="text-label"
+      >
+        {{ emptyLabel || t('fleet.clusterTargets.rules.matching.empty') }}
+      </span>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .targets-list {
+  .targets-list-main {
     height: 100%;
     border-radius: 4px;
     padding: 16px;
     background-color: var(--tabbed-sidebar-bg);
+    display: flex;
+    flex-direction: column;
+  }
+  .targets-list-list {
+    overflow-y: scroll;
+  }
+  .link-main{
+    word-spacing: 22px;
+  }
+  .link-icon {
+    position: absolute;
+    margin-left: -14px; // Remove the space of the icon to make it float to accomodate the underline
+    display: none; // Make the icon disappear by default
+  }
+
+  .link-main:hover .link-icon {
+    display: inline; // Only appear when hovered
   }
 </style>

package/components/fleet/FleetClusterTargets/index.vue

@@ -16,13 +16,16 @@ import TargetsList from '@shell/components/fleet/FleetClusterTargets/TargetsList
 
 export interface Cluster {
   name: string,
-  nameDisplay: string
+  nameDisplay: string,
+  detailLocation: object,
 }
 
 interface DataType {
   targetMode: TargetMode,
   allClusters: any[],
+  allClusterGroups: any[],
   selectedClusters: string[],
+  selectedClusterGroups: string[],
   clusterSelectors: Selector[],
   key: number,
 }
@@ -76,19 +79,26 @@ export default {
       allClusters: {
         inStoreType: 'management',
         type:        FLEET.CLUSTER
-      }
-    }, this.$store) as { allClusters: any[] };
+      },
+      allClusterGroups: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER_GROUP
+      },
+    }, this.$store) as { allClusters: any[], allClusterGroups: any[] };
 
     this.allClusters = hash.allClusters || [];
+    this.allClusterGroups = hash.allClusterGroups || [];
   },
 
   data(): DataType {
     return {
-      targetMode:       'all',
-      allClusters:      [],
-      selectedClusters: [],
-      clusterSelectors: [],
-      key:              0 // Generates a unique key to handle Targets
+      targetMode:            'all',
+      allClusters:           [],
+      allClusterGroups:      [],
+      selectedClusters:      [],
+      selectedClusterGroups: [],
+      clusterSelectors:      [],
+      key:                   0 // Generates a unique key to handle Targets
     };
   },
 
@@ -96,10 +106,9 @@ export default {
     this.fromTargets();
 
     if (this.mode === _CREATE) {
-      this.update();
-
       // Restore the targetMode from parent component; this is the case of edit targets in CREATE mode, go to YAML editor and come back to the form
       this.targetMode = this.created || 'all';
+      this.update();
     } else {
       this.targetMode = FleetUtils.Application.getTargetMode(this.targets || [], this.namespace);
     }
@@ -153,6 +162,14 @@ export default {
         .map((x) => ({ label: x.nameDisplay, value: x.metadata.name }));
     },
 
+    clusterGroupsOptions() {
+      return this.allClusterGroups
+        .filter((x) => x.metadata.namespace === this.namespace)
+        .map((x) => {
+          return { label: x.nameDisplay, value: x.metadata.name };
+        });
+    },
+
     isLocal() {
       return this.namespace === 'fleet-local';
     },
@@ -178,6 +195,12 @@ export default {
       this.update();
     },
 
+    selectClusterGroups(list: string[]) {
+      this.selectedClusterGroups = list;
+
+      this.update();
+    },
+
     addMatchExpressions() {
       const neu = { key: this.key++ };
 
@@ -224,11 +247,15 @@ export default {
           clusterGroupSelector,
         } = target;
 
-        // If clusterGroup or clusterGroupSelector are defined, targets are marked as complex and won't handle by the UI
-        if (clusterGroup || clusterGroupSelector) {
+        // If clusterGroupSelector are defined, targets are marked as complex and won't handle by the UI
+        if (clusterGroupSelector) {
           return;
         }
 
+        if (clusterGroup) {
+          this.selectedClusterGroups.push(clusterGroup);
+        }
+
         if (clusterName) {
           this.selectedClusters.push(clusterName);
         }
@@ -254,20 +281,22 @@ export default {
       case 'all':
         return [excludeHarvesterRule];
       case 'clusters':
-        return this.normalizeTargets(this.selectedClusters, this.clusterSelectors);
+        return this.normalizeTargets(this.selectedClusters, this.clusterSelectors, this.selectedClusterGroups);
       case 'advanced':
       case 'local':
         return this.targets;
       }
     },
 
-    normalizeTargets(selected: string[], clusterMatchExpressions: Selector[]) {
+    normalizeTargets(selected: string[], clusterMatchExpressions: Selector[], selectedClusterGroups: string[]): Target[] | undefined {
       const targets: Target[] = [];
 
+      // Select by name
       selected.forEach((clusterName) => {
         targets.push({ clusterName });
       });
 
+      // Select by labels
       clusterMatchExpressions.forEach((elem) => {
         const { matchLabels: labels, matchExpressions: expressions } = elem || {};
 
@@ -311,6 +340,11 @@ export default {
         }
       });
 
+      // Select by cluster group
+      selectedClusterGroups.forEach((clusterGroup) => {
+        targets.push({ clusterGroup });
+      });
+
       if (targets.length) {
         return targets;
       }
@@ -321,6 +355,7 @@ export default {
     reset() {
       this.targetMode = 'all';
       this.selectedClusters = [];
+      this.selectedClusterGroups = [];
       this.clusterSelectors = [];
     }
   },
@@ -356,25 +391,25 @@ export default {
   >
     <div class="col span-9">
       <h3 class="m-0">
-        {{ t('fleet.clusterTargets.title') }}
+        {{ t('fleet.clusterTargets.clusters.title') }}
       </h3>
       <LabeledSelect
         data-testid="fleet-target-cluster-name-selector"
         class="mmt-4"
         :value="selectedClusters"
-        :label="t('fleet.clusterTargets.label')"
+        :label="t('fleet.clusterTargets.clusters.byName.label')"
         :options="clustersOptions"
         :taggable="true"
         :close-on-select="false"
         :mode="mode"
         :multiple="true"
-        :placeholder="t('fleet.clusterTargets.placeholders.selectMultiple')"
+        :placeholder="t('fleet.clusterTargets.clusters.byName.placeholder')"
         @update:value="selectClusters"
       />
-      <div class="mmt-8">
-        <h3 class="m-0">
-          {{ t('fleet.clusterTargets.rules.title') }}
-        </h3>
+      <div class="mmt-6">
+        <h4 class="m-0">
+          {{ t('fleet.clusterTargets.clusters.byLabel.title') }}
+        </h4>
         <div
           v-for="(selector, i) in clusterSelectors"
           :key="selector.key"
@@ -386,29 +421,47 @@ export default {
             :value="selector"
             :mode="mode"
             :initial-empty-row="true"
-            :label-key="t('fleet.clusterTargets.rules.labelKey')"
+            :label-key="t('fleet.clusterTargets.clusters.byLabel.labelKey')"
             :add-icon="'icon-plus'"
             :add-class="'btn-sm'"
             @update:value="updateMatchExpressions(i, $event, selector.key)"
           />
           <RcButton
-            small
-            link
+            size="small"
+            variant="link"
             @click="removeMatchExpressions(selector.key)"
           >
             <i class="icon icon-x" />
           </RcButton>
         </div>
         <RcButton
-          small
-          secondary
-          class="mmt-6"
+          size="small"
+          variant="secondary"
+          class="mmt-4"
           @click="addMatchExpressions"
         >
           <i class="icon icon-plus" />
-          <span>{{ t('fleet.clusterTargets.rules.addSelector') }}</span>
+          <span>{{ t('fleet.clusterTargets.clusters.byLabel.addSelector') }}</span>
         </RcButton>
       </div>
+      <div class="mmt-8">
+        <h3 class="m-0">
+          {{ t('fleet.clusterTargets.clusterGroups.title') }}
+        </h3>
+        <LabeledSelect
+          data-testid="fleet-target-cluster-group-selector"
+          class="mmt-4"
+          :value="selectedClusterGroups"
+          :label="t('fleet.clusterTargets.clusterGroups.byName.label')"
+          :options="clusterGroupsOptions"
+          :taggable="true"
+          :close-on-select="false"
+          :mode="mode"
+          :multiple="true"
+          :placeholder="t('fleet.clusterTargets.clusterGroups.byName.placeholder')"
+          @update:value="selectClusterGroups"
+        />
+      </div>
     </div>
     <div class="col span-3">
       <TargetsList
@@ -450,6 +503,6 @@ export default {
   }
 
   .target-list {
-    max-height: 250px;
+    max-height: 320px;
   }
 </style>

package/components/fleet/FleetClusters.vue

@@ -25,6 +25,14 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
+    },
+    removeSubRows: {
+      type:    Boolean,
+      default: false,
+    },
+    ignoreFilter: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -99,9 +107,9 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
-    :sub-rows="true"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :ignore-filter="ignoreFilter"
     key-field="_key"
   >
     <template #cell:workspace="{row}">
@@ -151,18 +159,22 @@ export default {
       >{{ row.bundleInfo.total }}</span>
     </template>
 
-    <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">
+    <template
+      v-if="!removeSubRows"
+      #additional-sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave, showSubRow}"
+    >
       <tr
-        class="labels-row sub-row"
+        class="labels-row additional-sub-row"
+        :class="{ 'has-sub-row': showSubRow}"
         @mouseenter="onRowMouseEnter"
         @mouseleave="onRowMouseLeave"
       >
-        <template v-if="row.customLabels.length">
+        <template v-if="row.customLabels && row.customLabels.length">
           <td>&nbsp;</td>
           <td>&nbsp;</td>
           <td :colspan="fullColspan-2">
             <span
-              v-if="row.customLabels.length"
+              v-if="row.customLabels && row.customLabels.length"
               class="mt-5"
             > {{ t('fleet.cluster.labels') }}:
               <span
@@ -184,7 +196,7 @@ export default {
                 </Tag>
               </span>
               <a
-                v-if="row.customLabels.length > 7"
+                v-if="row.customLabels && row.customLabels.length > 7"
                 href="#"
                 @click.prevent="toggleCustomLabels(row)"
               >
@@ -193,14 +205,16 @@ export default {
             </span>
           </td>
         </template>
-        <td
-          v-else
-          :colspan="fullColspan"
-        >
-&nbsp;
-        </td>
       </tr>
     </template>
+    <template
+      v-else
+      #sub-row
+    >
+      <tr
+        class="sub-row"
+      />
+    </template>
   </ResourceTable>
 </template>
 

package/components/fleet/FleetGitRepoPaths.vue

@@ -335,8 +335,8 @@ export default {
             </h4>
             <RcButton
               v-if="!isView"
-              small
-              link
+              size="small"
+              variant="link"
               @click="removePaths(i)"
             >
               <i class="icon icon-x" />

package/components/fleet/FleetResources.vue

@@ -35,6 +35,19 @@ export default {
   },
 
   computed: {
+    groupOptions() {
+      return [{
+        tooltipKey: 'resourceTable.groupBy.none',
+        icon:       'icon-list-flat',
+        value:      'none',
+      }, {
+        tooltipKey: 'resourceTable.groupBy.cluster',
+        hideColumn: 'provider',
+        icon:       'icon-folder',
+        value:      'clusterId',
+        field:      'clusterId',
+      }];
+    },
     computedResources() {
       const resources = (this.rows || []).map((r) => ({
         tableKey: r.key,
@@ -107,6 +120,7 @@ export default {
     :table-actions="false"
     :row-actions="false"
     :search="search"
+    :group-options="groupOptions"
     key-field="tableKey"
     default-sort-by="state"
   >

package/components/fleet/FleetValuesFrom.vue

@@ -276,8 +276,8 @@ export default {
     <RcButton
       v-if="!isView"
       ref="add-button"
-      small
-      secondary
+      size="small"
+      variant="secondary"
       class="mmt-6"
       data-testid="fleet-values-from-add"
       @click="addValueFrom"