@rancher/shell 3.0.8 → 3.0.9-rc.2

package/components/ResourceDetail/Masthead/legacy.vue

@@ -559,7 +559,7 @@ export default {
             <template v-if="featureDropdownMenu">
               <ActionMenu
                 v-if="isView"
-                button-role="multiAction"
+                button-variant="multiAction"
                 button-size="compact"
                 :resource="value"
                 data-testid="masthead-action-menu"

package/components/Setting.vue

@@ -45,7 +45,7 @@ export default {
           :resource="value.data"
           :button-aria-label="t('advancedSettings.edit.label')"
           data-testid="action-button"
-          button-role="tertiary"
+          button-variant="tertiary"
         />
       </div>
     </div>

package/components/SortableTable/index.vue

@@ -1590,6 +1590,18 @@ export default {
             :onRowMouseEnter="onRowMouseEnter"
             :onRowMouseLeave="onRowMouseLeave"
           >
+            <slot
+              :full-colspan="fullColspan"
+              :row="row.row"
+              :show-sub-row="row.row.stateDescription"
+              :sub-matches="subMatches"
+              :keyField="keyField"
+              :componentTestid="componentTestid"
+              :i="i"
+              :onRowMouseEnter="onRowMouseEnter"
+              :onRowMouseLeave="onRowMouseLeave"
+              name="additional-sub-row"
+            />
             <tr
               v-if="row.row.stateDescription"
               :key="row.row[keyField] + '-description'"
@@ -1924,12 +1936,25 @@ export default {
         &.main-row.has-sub-row {
           border-bottom: 0;
         }
+        &.additional-sub-row.has-sub-row {
+          border-bottom: 0;
+        }
 
         // if a main-row is hovered also hover it's sibling sub row. note - the reverse is handled in selection.js
         &.main-row:not(.row-selected):hover + .sub-row {
           background-color: var(--sortable-table-hover-bg);
         }
 
+        // Case with only additional-sub-row
+        &.main-row:not(.row-selected):hover + .additional-sub-row {
+          background-color: var(--sortable-table-hover-bg);
+        }
+
+        // Case with both additional-sub-row and sub-row
+        &.main-row:not(.row-selected):hover + .additional-sub-row + .sub-row{
+          background-color: var(--sortable-table-hover-bg);
+        }
+
         &:last-of-type {
           border-bottom: 0;
         }

package/components/SortableTable/selection.js

@@ -177,24 +177,32 @@ export default {
       }
     },
 
-    onRowMouseEnter(e) {
+    removeOrAddHover(option, e) {
+      // Hardcoded logic to not overcomplicate just adding the conditions of next and previous
       const tr = e.target.closest('TR');
 
-      if (tr.classList.contains('sub-row')) {
-        const trMainRow = tr.previousElementSibling;
+      if (tr.classList.contains('sub-row') || tr.classList.contains('additional-sub-row')) {
+        const trPreviousRow = tr.previousElementSibling;
+        const trNextRow = tr.nextElementSibling;
+
+        trPreviousRow.classList[option]('sub-row-hovered');
 
-        trMainRow.classList.add('sub-row-hovered');
+        if (!trPreviousRow.classList.contains('main-row')) {
+          const trMainRow = trPreviousRow.previousElementSibling;
+
+          trMainRow.classList[option]('sub-row-hovered');
+        }
+        if (trNextRow?.classList.contains('sub-row')) {
+          trNextRow.classList[option]('sub-row-hovered');
+        }
       }
     },
+    onRowMouseEnter(e) {
+      this.removeOrAddHover('add', e);
+    },
 
     onRowMouseLeave(e) {
-      const tr = e.target.closest('TR');
-
-      if (tr.classList.contains('sub-row')) {
-        const trMainRow = tr.previousElementSibling;
-
-        trMainRow.classList.remove('sub-row-hovered');
-      }
+      this.removeOrAddHover('remove', e);
     },
 
     nodeForEvent(e) {
@@ -486,6 +494,11 @@ export default {
 
       this.$nextTick(() => {
         this.$emit('selection', this.selectedRows);
+        if (this.selectedRows && this.selectedRows.length) {
+          for ( let i = 0 ; i < this.selectedRows.length ; i++ ) {
+            this.updateInput(this.selectedRows[i], true, this.keyField);
+          }
+        }
       });
     },
 
@@ -505,7 +518,7 @@ export default {
           let tr = input.closest('tr');
           let first = true;
 
-          while ( tr && (first || tr.classList.contains('sub-row') ) ) {
+          while ( tr && (first || tr.classList.contains('sub-row') || tr.classList.contains('additional-sub-row')) ) {
             if (on) {
               tr.classList.add('row-selected');
             } else {

package/components/SortableTable/sorting.js

@@ -79,7 +79,7 @@ export default {
 
       if ( markedColumn ) {
         this._defaultSortBy = markedColumn.name;
-        descending = markedColumn.defaultSortDescending;
+        descending = markedColumn.defaultSortDescending || false;
       } else if ( nameColumn ) {
         // Use the name column if there is one
         this._defaultSortBy = nameColumn.name;

package/components/Tabbed/Tab.vue

@@ -137,6 +137,7 @@ export default {
     :id="name"
     :aria-hidden="!active"
     role="tabpanel"
+    :aria-labelledby="`tab-${name}`"
   >
     <div
       v-if="shouldShowHeader"

package/components/Tabbed/index.vue

@@ -83,6 +83,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'tabbed'
+    },
+
+    removeBorders: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -128,7 +133,8 @@ export default {
     return {
       tabs:          [...parsedExtTabs],
       extensionTabs: parsedExtTabs,
-      activeTabName: null
+      activeTabName: null,
+      tabRefs:       {}
     };
   },
 
@@ -263,7 +269,10 @@ export default {
       this.select(nextName);
 
       this.$nextTick(() => {
-        this.$refs.tablist.focus();
+        this.$refs.tablist.removeAttribute('tabindex');
+        if (this.tabRefs[nextName]) {
+          this.tabRefs[nextName].focus();
+        }
       });
 
       function getCyclicalIdx(currentIdx, direction, tabsLength) {
@@ -299,7 +308,8 @@ export default {
     class="tabbed-container"
     :class="{
       'side-tabs': !!sideTabs,
-      'tabs-only': tabsOnly
+      'tabs-only': tabsOnly,
+      'remove-borders': removeBorders
     }"
     :data-testid="componentTestid"
   >
@@ -308,7 +318,7 @@ export default {
       ref="tablist"
       role="tablist"
       class="tabs"
-      :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
+      :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs, 'remove-borders': removeBorders}"
       :data-testid="`${componentTestid}-block`"
       tabindex="0"
       @keydown.right.prevent="selectNext(1)"
@@ -323,14 +333,16 @@ export default {
         :key="tab.name"
         :data-testid="tab.name"
         :class="{tab: true, active: tab.active, disabled: tab.disabled, error: (tab.error)}"
-        role="presentation"
       >
         <a
+          :id="`tab-${tab.name}`"
+          :ref="(el) => { if (el) tabRefs[tab.name] = el; }"
           :data-testid="`btn-${tab.name}`"
           :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
           role="tab"
+          :tabindex="tab.active ? '0' : '-1'"
           @click.prevent="select(tab.name, $event)"
           @keyup.enter.space="select(tab.name, $event)"
         >
@@ -442,6 +454,17 @@ export default {
     display: flex;
     flex-direction: row;
 
+    &.remove-borders {
+      border: none;
+
+      + .tab-container {
+        border: none;
+        border-top: 1px solid var(--border);
+        padding: 0;
+        padding-top: 24px;
+      }
+    }
+
     + .tab-container {
       border: solid thin var(--border);
     }
@@ -458,7 +481,7 @@ export default {
   .tab {
     position: relative;
     float: left;
-    padding: 0 8px 0 0;
+    padding: 0 4px 0 4px;
     cursor: pointer;
 
     A {

package/components/Window/ContainerShell.vue

@@ -172,8 +172,11 @@ export default {
         await this.$store.dispatch('cluster/find', { type: NODE, id: nodeId });
       }
     } catch {}
-
-    await this.setupTerminal();
+    try {
+      await this.setupTerminal();
+    } catch (e) {
+      this.errorMsg = e;
+    }
     await this.connect();
 
     clearInterval(this.keepAliveTimer);
@@ -234,26 +237,20 @@ export default {
 
       this.fitAddon = new addons.fit.FitAddon();
       this.searchAddon = new addons.search.SearchAddon();
+      terminal.loadAddon(this.fitAddon);
+      terminal.loadAddon(this.searchAddon);
+      terminal.loadAddon(new addons.weblinks.WebLinksAddon());
+      terminal.open(this.$refs.xterm);
 
       try {
         this.webglAddon = new addons.webgl.WebglAddon();
+        terminal.loadAddon(this.webglAddon);
       } catch (e) {
         // Some browsers (Safari) don't support the webgl renderer, so don't use it.
         this.webglAddon = null;
         this.canvasAddon = new addons.canvas.CanvasAddon();
-      }
-
-      terminal.loadAddon(this.fitAddon);
-      terminal.loadAddon(this.searchAddon);
-      terminal.loadAddon(new addons.weblinks.WebLinksAddon());
-      terminal.open(this.$refs.xterm);
-
-      if (this.webglAddon) {
-        terminal.loadAddon(this.webglAddon);
-      } else {
         terminal.loadAddon(this.canvasAddon);
       }
-
       this.fit();
       this.flush();
 

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>