@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.3

package/components/Wizard.vue

@@ -2,6 +2,7 @@
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
+import { RcButton } from '@components/RcButton';
 import Loading from '@shell/components/Loading';
 import { stringify } from '@shell/utils/error';
 import LazyImage from '@shell/components/LazyImage';
@@ -28,6 +29,7 @@ export default {
   components: {
     AsyncButton,
     Banner,
+    RcButton,
     Loading,
     LazyImage,
   },
@@ -44,7 +46,6 @@ export default {
     loading: Wizard will block until all steps are not loading
     nextButton?: {
       labelKey?: default to `wizard.next`
-      style?:  defaults to `btn role-primary`
     },
     previousButton: {
       disable: defaults to false
@@ -185,9 +186,6 @@ export default {
       return this.steps.filter((step) => !step.hidden);
     },
 
-    nextButtonStyle() {
-      return this.activeStep.nextButton?.style || `btn role-primary`;
-    },
     nextButtonLabel() {
       return this.activeStep.nextButton?.labelKey || `wizard.next`;
     }
@@ -444,13 +442,14 @@ export default {
             name="cancel"
             :cancel="cancel"
           >
-            <button
+            <RcButton
               type="button"
-              class="btn role-secondary"
+              variant="secondary"
+              size="large"
               @click="cancel"
             >
               <t k="generic.cancel" />
-            </button>
+            </RcButton>
           </slot>
           <div class="controls-steps">
             <slot
@@ -458,14 +457,15 @@ export default {
               name="back"
               :back="back"
             >
-              <button
+              <RcButton
                 :disabled="!canPrevious || (!editFirstStep && activeStepIndex===1)"
                 type="button"
-                class="btn role-secondary"
+                variant="secondary"
+                size="large"
                 @click="back()"
               >
                 <t k="wizard.previous" />
-              </button>
+              </RcButton>
             </slot>
             <slot
               v-if="activeStepIndex === visibleSteps.length-1"
@@ -484,14 +484,15 @@ export default {
               name="next"
               :next="next"
             >
-              <button
+              <RcButton
                 :disabled="!canNext"
                 type="button"
-                :class="nextButtonStyle"
+                variant="primary"
+                size="large"
                 @click="next()"
               >
                 <t :k="nextButtonLabel" />
-              </button>
+              </RcButton>
             </slot>
           </div>
         </div>

package/components/fleet/FleetBundles.vue

@@ -3,13 +3,17 @@ import { FLEET } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 import {
+  AGE,
   CREATION_DATE,
   STATE,
   NAME,
   FLEET_BUNDLE_LAST_UPDATED,
 } from '@shell/config/table-headers';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 export default {
   name: 'FleetBundles',
@@ -18,36 +22,97 @@ export default {
     Banner, Loading, ResourceTable
   },
 
+  mixins: [ResourceFetch],
+
   props: {
     value: {
       type:     Object,
-      required: true,
+      required: false,
+      default:  null,
+    },
+
+    resource: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
+
+    schema: {
+      type:     Object,
+      required: false,
+      default:  null,
     },
+
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   async fetch() {
-    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
-      this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
+    let hash;
+
+    try {
+      const toFetch = {
+        cluster: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER
+        }
+      };
+
+      // Only fetch bundles if in list mode
+      if (this.isListMode) {
+        toFetch.bundle = {
+          inStoreType: 'management',
+          type:        this.resource
+        };
+      }
+
+      hash = await checkSchemasForFindAllHash(toFetch, this.$store);
+    } catch (e) {
+    }
+
+    // checkSchemasForFindAllHash already fetched the data, just get it from the store
+    if (this.isListMode && hash?.bundle) {
+      // Data is already in the store, no need to fetch again
+      this.rows = hash.bundle;
     }
+
+    this.allFleet = hash?.cluster || [];
   },
 
   data() {
-    return { allFleet: [] };
+    return {
+      allFleet: [],
+      rows:     []
+    };
+  },
+
+  mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
   },
 
   computed: {
+    isListMode() {
+      return !this.value;
+    },
 
     allBundlesInRepo() {
-      // gitrepo model has getter for its bundles.
+      // If in list mode, return all rows from ResourceFetch mixin
+      if (this.isListMode) {
+        return this.rows;
+      }
+
+      // Otherwise, get bundles from the gitrepo
       return this.value.bundles || [];
     },
 
-    schema() {
-      return this.$store.getters['management/schemaFor']( FLEET.BUNDLE );
+    bundleSchema() {
+      return this.schema || this.$store.getters['management/schemaFor']( FLEET.BUNDLE );
     },
 
     repoName() {
-      return this.value.metadata.name;
+      return this.value?.metadata?.name;
     },
 
     harvesterClusters() {
@@ -65,6 +130,10 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
+      if (this.areHarvesterHostsVisible) {
+        return this.allBundlesInRepo;
+      }
+
       return this.allBundlesInRepo.filter((bundle) => {
         const targets = bundle.spec?.targets || [];
 
@@ -92,10 +161,16 @@ export default {
           sort:     'status.display.readyClusters',
           search:   ['status.summary.ready', 'status.summary.desiredReady'],
         },
-        FLEET_BUNDLE_LAST_UPDATED,
-        CREATION_DATE,
       ];
 
+      // In list mode, show AGE. In component mode, show last updated and creation date
+      if (this.isListMode) {
+        out.push(AGE);
+      } else {
+        out.push(FLEET_BUNDLE_LAST_UPDATED);
+        out.push(CREATION_DATE);
+      }
+
       return out;
     },
   },
@@ -103,7 +178,17 @@ export default {
     displayWarning(row) {
       return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
     }
-  }
+  },
+
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    if (this.isListMode) {
+      // results are filtered so we wouldn't get the correct count on indicator...
+      return { loadIndeterminate: true };
+    }
+
+    return undefined;
+  },
 };
 </script>
 
@@ -117,9 +202,12 @@ export default {
         :label="t('fleet.bundles.harvester', {count: hidden} )"
       />
       <ResourceTable
-        :schema="schema"
+        :schema="bundleSchema"
         :headers="headers"
         :rows="bundles"
+        :loading="loading"
+        :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+        :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
       >
         <template #cell:deploymentsReady="{row}">
           <span

package/components/fleet/FleetClusterTargets/index.vue

@@ -3,6 +3,7 @@ import { PropType } from 'vue';
 import { isEmpty } from 'lodash';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
 import { FLEET } from '@shell/config/types';
 import FleetUtils from '@shell/utils/fleet';
 import { Expression, Selector, Target, TargetMode } from '@shell/types/fleet';
@@ -28,9 +29,11 @@ interface DataType {
   selectedClusterGroups: string[],
   clusterSelectors: Selector[],
   key: number,
+  areHarvesterHostsVisible: boolean,
 }
 
 const excludeHarvesterRule = FleetUtils.Application.excludeHarvesterRule;
+const includeAllWorkgroupRule = FleetUtils.Application.includeAllWorkgroupRule;
 
 export default {
 
@@ -92,17 +95,23 @@ export default {
 
   data(): DataType {
     return {
-      targetMode:            'all',
-      allClusters:           [],
-      allClusterGroups:      [],
-      selectedClusters:      [],
-      selectedClusterGroups: [],
-      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
+      /**
+       * Are host harvesters treated as normal clusters... or are they hidden
+       */
+      areHarvesterHostsVisible: false,
     };
   },
 
   mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
+
     this.fromTargets();
 
     if (this.mode === _CREATE) {
@@ -110,7 +119,11 @@ export default {
       this.targetMode = this.created || 'all';
       this.update();
     } else {
-      this.targetMode = FleetUtils.Application.getTargetMode(this.targets || [], this.namespace);
+      this.targetMode = FleetUtils.Application.getTargetMode(this.targets || [], this.namespace, this.areHarvesterHostsVisible);
+      // We only want to update the information from the new target mode if it is EDIT, if CREATE, if VIEW we want to keep as it is
+      if (this.mode === _EDIT) {
+        this.update();
+      }
     }
   },
 
@@ -167,8 +180,12 @@ export default {
 
     clustersOptions() {
       return this.allClusters
-        .filter((x) => x.metadata.namespace === this.namespace && !isHarvesterCluster(x))
-        .map((x) => ({ label: x.nameDisplay, value: x.nameDisplay }));
+        .filter((x) => x.metadata.namespace === this.namespace && (this.areHarvesterHostsVisible || !isHarvesterCluster(x) || this.selectedClusters.includes(x.name)))
+        .map((x) => ({
+          label:    x.nameDisplay,
+          value:    x.nameDisplay,
+          disabled: !this.areHarvesterHostsVisible && isHarvesterCluster(x)
+        }));
     },
 
     clusterGroupsOptions() {
@@ -285,14 +302,19 @@ export default {
 
     toTargets(): Target[] | undefined {
       switch (this.targetMode) {
-      case 'none':
+      case 'none': // No clusters
         return undefined;
-      case 'all':
+      case 'all': // All clusters in workspace
+        if (this.areHarvesterHostsVisible) {
+          // set it to empty to clear any previous and hidden harvester omission
+          return [includeAllWorkgroupRule];
+        }
+
         return [excludeHarvesterRule];
-      case 'clusters':
+      case 'clusters': // 'Manually selected clusters'
         return this.normalizeTargets(this.selectedClusters, this.clusterSelectors, this.selectedClusterGroups);
-      case 'advanced':
-      case 'local':
+      case 'advanced': // no longer in use?
+      case 'local': // only option for fleet-local workspace
         return this.targets;
       }
     },