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

package/detail/fleet.cattle.io.bundle.vue

@@ -1,12 +1,15 @@
 <script>
-import { MANAGEMENT } from '@shell/config/types';
-import FleetBundleResources from '@shell/components/fleet/FleetBundleResources.vue';
+import { FLEET, MANAGEMENT } from '@shell/config/types';
+import FleetResources from '@shell/components/fleet/FleetResources';
 import FleetUtils from '@shell/utils/fleet';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import Loading from '@shell/components/Loading.vue';
+import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
 
 export default {
   name: 'FleetBundleDetail',
 
-  components: { FleetBundleResources },
+  components: { Loading, FleetResources },
   props:      {
     value: {
       type:     Object,
@@ -14,15 +17,74 @@ export default {
     }
   },
 
+  data() {
+    return { allBundleDeployments: [] };
+  },
+
   async fetch() {
+    const allDispatches = await checkSchemasForFindAllHash({
+      allBundleDeployments: {
+        inStoreType: 'management',
+        type:        FLEET.BUNDLE_DEPLOYMENT,
+      },
+
+      // must be loaded for bundle.targetClusters to work
+      allFleetClusters: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER
+      },
+      clusterGroups: {
+        inStoreType: 'management',
+        type:        FLEET.CLUSTER_GROUP
+      }
+    }, this.$store);
+
     if (this.value.authorId && this.$store.getters['management/schemaFor'](MANAGEMENT.USER)) {
       await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }, { root: true });
     }
+
+    this.allBundleDeployments = allDispatches.allBundleDeployments || [];
   },
 
   computed: {
     bundleResources() {
-      return FleetUtils.resourcesFromBundleStatus(this.value?.status);
+      if (!this.allBundleDeployments) {
+        return [];
+      }
+
+      const bundleDeploymentsByClusterId = this.allBundleDeployments
+        .reduce((res, bd) => {
+          if (this.value.id === FleetUtils.bundleIdFromBundleDeploymentLabels(bd.metadata?.labels)) {
+            res[FleetUtils.clusterIdFromBundleDeploymentLabels(bd.metadata?.labels)] = bd;
+          }
+
+          return res;
+        }, {});
+
+      return this.value.targetClusters.reduce((res, cluster) => {
+        const bd = bundleDeploymentsByClusterId[cluster.id];
+
+        if (bd) {
+          FleetUtils.resourcesFromBundleDeploymentStatus(bd.status)
+            .forEach((r) => {
+              const type = FleetUtils.resourceType(r);
+              const key = `${ cluster.id }-${ type }-${ r.namespace }-${ r.name }`;
+
+              res.push({
+                ...r,
+                key,
+                type,
+                id:          FleetUtils.resourceId(r),
+                clusterId:   cluster.id,
+                clusterName: cluster.nameDisplay,
+
+                detailLocation: FleetUtils.detailLocation(r, cluster.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME]),
+              });
+            });
+        }
+
+        return res;
+      }, []);
     },
     resourceCount() {
       return this.bundleResources.length;
@@ -38,8 +100,10 @@ export default {
       <h2>{{ t('fleet.bundles.resources') }}</h2>
       <span>{{ resourceCount }}</span>
     </div>
-    <FleetBundleResources
-      :value="bundleResources"
+    <Loading v-if="$fetchState.pending" />
+    <FleetResources
+      v-else
+      :rows="bundleResources"
     />
   </div>
 </template>

package/detail/fleet.cattle.io.gitrepo.vue

@@ -141,7 +141,7 @@ export default {
         name="resources"
         :weight="20"
       >
-        <FleetResources :value="value" />
+        <FleetResources :rows="value.resourcesStatuses" />
       </Tab>
     </ResourceTabs>
   </div>

package/detail/namespace.vue

@@ -5,7 +5,6 @@ import ResourceTabs from '@shell/components/form/ResourceTabs';
 import { COUNT, WORKLOAD_TYPES } from '@shell/config/types';
 import { WORKLOAD_SCHEMA } from '@shell/config/schema';
 import { getStatesByType } from '@shell/plugins/dashboard-store/resource-class';
-import MoveModal from '@shell/components/MoveModal';
 import Tab from '@shell/components/Tabbed/Tab';
 import ResourceTable from '@shell/components/ResourceTable';
 import SortableTable from '@shell/components/SortableTable';
@@ -20,7 +19,6 @@ export default {
     ResourceTable,
     ResourceTabs,
     Loading,
-    MoveModal,
     Tab,
     SortableTable
   },
@@ -264,6 +262,5 @@ export default {
         />
       </Tab>
     </ResourceTabs>
-    <MoveModal />
   </div>
 </template>

package/detail/node.vue

@@ -49,23 +49,25 @@ export default {
   },
 
   async fetch() {
-    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
+    if (this.podSchema) {
+      this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](POD);
 
-    if (this.filterByApi) {
+      if (this.filterByApi) {
       // Only get pods associated with this node. The actual values used are from a get all in node model `pods` getter (this works as it just gets all...)
-      const opt = { // Of type ActionFindPageArgs
-        pagination: new FilterArgs({
-          sort:    [{ field: 'metadata.name', asc: true }],
-          filters: PaginationParamFilter.createSingleField({
-            field: 'spec.nodeName',
-            value: this.value.id,
+        const opt = { // Of type ActionFindPageArgs
+          pagination: new FilterArgs({
+            sort:    [{ field: 'metadata.name', asc: true }],
+            filters: PaginationParamFilter.createSingleField({
+              field: 'spec.nodeName',
+              value: this.value.id,
+            })
           })
-        })
-      };
+        };
 
-      this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
-    } else {
-      this.$store.dispatch('cluster/findAll', { type: POD });
+        this.$store.dispatch(`cluster/findPage`, { type: POD, opt });
+      } else {
+        this.$store.dispatch('cluster/findAll', { type: POD });
+      }
     }
 
     this.showMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [NODE_METRICS_DETAIL_URL, NODE_METRICS_SUMMARY_URL]);
@@ -97,6 +99,7 @@ export default {
         VALUE,
         EFFECT
       ],
+      podSchema,
       podTableHeaders: this.$store.getters['type-map/headersFor'](podSchema),
       NODE_METRICS_DETAIL_URL,
       NODE_METRICS_SUMMARY_URL,
@@ -241,6 +244,7 @@ export default {
       @update:value="$emit('input', $event)"
     >
       <Tab
+        v-if="podSchema"
         name="pods"
         :label="t('node.detail.tab.pods')"
         :weight="4"

package/detail/provisioning.cattle.io.cluster.vue

@@ -215,6 +215,41 @@ export default {
   },
 
   data() {
+    const noneGroupOption = {
+      tooltipKey: 'resourceTable.groupBy.none',
+      icon:       'icon-list-flat',
+      value:      'none',
+    };
+    const poolColumn = {
+      name:     'pool',
+      labelKey: 'cluster.machinePool.name.label',
+      value:    'spec.nodePoolName',
+      getValue: (row) => row.spec.nodePoolName,
+      sort:     ['spec.nodePoolName'],
+    };
+    const poolGroupOption = {
+      tooltipKey: 'resourceTable.groupBy.pool',
+      icon:       'icon-cluster',
+      hideColumn: poolColumn.name,
+      value:      'spec.nodePoolName',
+      field:      'spec.nodePoolName'
+    };
+
+    const machineColumn = {
+      name:     'pool',
+      labelKey: 'cluster.machinePool.name.label',
+      value:    'pool.nameDisplay',
+      getValue: (row) => row.pool.nameDisplay,
+      sort:     ['pool.nameDisplay'],
+    };
+    const machineGroupOption = {
+      tooltipKey: 'resourceTable.groupBy.pool',
+      icon:       'icon-cluster',
+      hideColumn: machineColumn.name,
+      value:      'poolId',
+      field:      'poolId'
+    };
+
     return {
 
       allMachines:           [],
@@ -250,7 +285,25 @@ export default {
         conditions:   true, // in ResourceTabs
       },
 
-      showWindowsWarning: false
+      showWindowsWarning: false,
+
+      machineColumn,
+      poolColumn,
+
+      noneGroupOption,
+
+      machineGroupOption,
+      machineGroupOptions: [
+        noneGroupOption,
+        machineGroupOption
+      ],
+
+      poolGroupOption,
+      poolGroupOptions: [
+        noneGroupOption,
+        poolGroupOption,
+      ]
+
     };
   },
 
@@ -395,7 +448,7 @@ export default {
 
     showSnapshots() {
       if (this.value.isRke1) {
-        return this.$store.getters['rancher/canList'](NORMAN.ETCD_BACKUP) && this.extDetailTabs.snapshots;
+        return false;
       } else if (this.value.isRke2) {
         return this.$store.getters['management/canList'](SNAPSHOT) && this.extDetailTabs.snapshots;
       }
@@ -403,6 +456,10 @@ export default {
       return false;
     },
 
+    isRke1() {
+      return this.value.isRke1;
+    },
+
     showEksNodeGroupWarning() {
       if ( this.value.provisioner === 'EKS' && this.value.state !== STATES_ENUM.ACTIVE) {
         const desiredTotal = this.value.eksNodeGroups.filter((g) => g.desiredSize === 0);
@@ -416,7 +473,7 @@ export default {
     },
 
     machineHeaders() {
-      return [
+      const headers = [
         STATE,
         NAME_COL,
         {
@@ -433,11 +490,23 @@ export default {
         ROLES,
         AGE,
       ];
+
+      if (!this.value.isCustom) {
+        headers.splice(3, 0, this.machineColumn);
+      }
+
+      return headers;
     },
 
     mgmtNodeSchemaHeaders() {
-      return [
-        STATE, NAME_COL,
+      // Remove Cluster name being a link
+      const RKE1_NAME_COL = {
+        ...NAME_COL,
+        formatter: undefined
+      };
+
+      const headers = [
+        STATE, RKE1_NAME_COL,
         {
           name:          'node-name',
           labelKey:      'tableHeaders.machineNodeName',
@@ -452,6 +521,12 @@ export default {
         ROLES,
         AGE
       ];
+
+      if (!this.value.isCustom) {
+        headers.splice(3, 0, this.poolColumn);
+      }
+
+      return headers;
     },
 
     rke1Snapshots() {
@@ -772,11 +847,11 @@ export default {
           :schema="machineSchema"
           :headers="machineHeaders"
           default-sort-by="name"
-          :group-by="value.isCustom ? null : 'poolId'"
           group-ref="pool"
+          :group-default="machineGroupOption.value"
           :group-sort="['pool.nameDisplay']"
+          :group-options="value.isCustom ? [noneGroupOption] : machineGroupOptions"
           :sort-generation-fn="machineSortGenerationFn"
-          :hide-grouping-controls="true"
         >
           <template #main-row:isFake="{fullColspan}">
             <tr class="main-row">
@@ -859,9 +934,10 @@ export default {
           :schema="mgmtNodeSchema"
           :headers="mgmtNodeSchemaHeaders"
           :rows="nodes"
-          :group-by="value.isCustom ? null : 'spec.nodePoolName'"
           group-ref="pool"
+          :group-default="poolGroupOption.value"
           :group-sort="['pool.nameDisplay']"
+          :group-options="value.isCustom ? [noneGroupOption] : poolGroupOptions"
           :sort-generation-fn="nodeSortGenerationFn"
           :hide-grouping-controls="true"
         >
@@ -901,7 +977,7 @@ export default {
                 </div>
               </div>
               <div
-                v-if="group.ref"
+                v-if="group.ref && !isRke1"
                 class="right group-header-buttons"
               >
                 <MachineSummaryGraph

package/detail/service.vue

@@ -83,7 +83,6 @@ export default {
 
     return {
       servicePortInfoHeaders,
-      pods:            [],
       podTableHeaders: this.$store.getters['type-map/headersFor'](
         this.$store.getters['cluster/schemaFor'](POD)
       ),

package/detail/workload/index.vue

@@ -47,16 +47,20 @@ export default {
     } catch {}
 
     const hash = {
-      // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-      allPods:      this.$store.dispatch('cluster/findAll', { type: POD }),
-      // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
-      allServices:  this.$store.dispatch('cluster/findAll', { type: SERVICE }),
       allIngresses: this.$store.dispatch('cluster/findAll', { type: INGRESS }),
       // Nodes should be fetched because they may be referenced in the target
       // column of a service list item.
       allNodes:     hasNodes ? this.$store.dispatch('cluster/findAll', { type: NODE }) : []
     };
 
+    if (this.podSchema) {
+      hash.pods = this.value.fetchPods();
+    }
+
+    if (this.serviceSchema) {
+      hash.servicesInNamespace = this.$store.dispatch('cluster/findAll', { type: SERVICE, opt: { namespaced: this.value.metadata.namespace } });
+    }
+
     if (this.value.type === WORKLOAD_TYPES.CRON_JOB) {
       hash.jobs = this.value.matchingJobs();
     }
@@ -87,8 +91,7 @@ export default {
 
   data() {
     return {
-      allPods:                         [],
-      allServices:                     [],
+      servicesInNamespace:             [],
       allIngresses:                    [],
       matchingServices:                [],
       matchingIngresses:               [],
@@ -180,22 +183,6 @@ export default {
       }, 0);
     },
 
-    podRestarts() {
-      return this.value.pods.reduce((total, pod) => {
-        const { status:{ containerStatuses = [] } } = pod;
-
-        if (containerStatuses.length) {
-          total += containerStatuses.reduce((tot, container) => {
-            tot += container.restartCount;
-
-            return tot;
-          }, 0);
-        }
-
-        return total;
-      }, 0);
-    },
-
     podHeaders() {
       return this.$store.getters['type-map/headersFor'](this.podSchema).filter((h) => !h.name || h.name !== NAMESPACE_COL.name);
     },
@@ -213,12 +200,16 @@ export default {
     },
 
     showPodGaugeCircles() {
-      const podGauges = Object.values(this.value.podGauges);
+      const podGauges = Object.values(this.podGauges);
       const total = this.value.pods.length;
 
       return !podGauges.find((pg) => pg.count === total);
     },
 
+    podGauges() {
+      return this.value.calcPodGauges(this.value.pods);
+    },
+
     showJobGaugeCircles() {
       const jobGauges = Object.values(this.value.jobGauges);
       const total = this.isCronJob ? this.totalRuns : this.value.pods.length;
@@ -230,6 +221,7 @@ export default {
       return !!SCALABLE_TYPES.includes(this.value.type) && this.value.canUpdate;
     },
   },
+
   methods: {
     async scale(isUp) {
       try {
@@ -256,15 +248,13 @@ export default {
       if (!this.serviceSchema) {
         return [];
       }
-      const matchingPods = this.value.pods;
 
-      // Find Services that have selectors that match this
-      // workload's Pod(s).
-      const matchingServices = this.allServices.filter((service) => {
+      // Find Services that have selectors that match this workload's Pod(s).
+      this.matchingServices = this.servicesInNamespace.filter((service) => {
         const selector = service.spec.selector;
 
-        for (let i = 0; i < matchingPods.length; i++) {
-          const pod = matchingPods[i];
+        for (let i = 0; i < this.value.pods.length; i++) {
+          const pod = this.value.pods[i];
 
           if (service.metadata?.namespace === this.value.metadata?.namespace && matches(pod, selector)) {
             return true;
@@ -273,8 +263,6 @@ export default {
 
         return false;
       });
-
-      this.matchingServices = matchingServices;
     },
     findMatchingIngresses() {
       if (!this.ingressSchema) {
@@ -358,7 +346,7 @@ export default {
       </template>
       <template v-else>
         <CountGauge
-          v-for="(group, key) in value.podGauges"
+          v-for="(group, key) in podGauges"
           :key="key"
           :total="value.pods.length"
           :useful="group.count || 0"
@@ -387,13 +375,12 @@ export default {
         />
       </Tab>
       <Tab
-        v-else
+        v-else-if="value.podMatchExpression"
         name="pods"
         :label="t('tableHeaders.pods')"
         :weight="4"
       >
         <ResourceTable
-          v-if="value.pods"
           :rows="value.pods"
           :headers="podHeaders"
           key-field="id"

package/dialog/AddCustomBadgeDialog.vue

@@ -213,7 +213,6 @@ export default {
   <Card
     class="prompt-badge"
     :show-highlight-border="false"
-    :trigger-focus-trap="true"
   >
     <template #title>
       <h4 class="text-default-text">

package/{pages/c/_cluster/uiplugins/AddExtensionRepos.vue → dialog/AddExtensionReposDialog.vue}

@@ -1,22 +1,32 @@
 <script>
-import { CATALOG } from '@shell/config/types';
-import Dialog from '@shell/components/Dialog.vue';
+import AsyncButton from '@shell/components/AsyncButton';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { CATALOG } from '@shell/config/types';
 import { UI_PLUGINS_REPOS } from '@shell/config/uiplugins';
 import { isRancherPrime } from '@shell/config/version';
 
 export default {
-  emits: ['done'],
+  emits: ['close'],
+
+  components: { AsyncButton, Checkbox },
 
-  components: {
-    Checkbox,
-    Dialog,
+  props: {
+    /**
+     * Callback to update install status on extensions main screen
+     */
+    done: {
+      type:    Function,
+      default: () => {}
+    },
   },
 
   async fetch() {
     if (this.$store.getters['management/schemaFor'](CATALOG.CLUSTER_REPO)) {
       this.repos = await this.$store.dispatch('management/findAll', { type: CATALOG.CLUSTER_REPO, opt: { force: true } });
     }
+
+    this.addRepos.official = isRancherPrime() && !this.hasRancherUIPluginsRepo;
+    this.addRepos.partners = !this.hasRancherUIPartnersPluginsRepo;
   },
 
   data() {
@@ -25,8 +35,8 @@ export default {
       repos:    [],
       prime:    isRancherPrime(),
       addRepos: {
-        official: true,
-        partners: true
+        official: false,
+        partners: false
       },
       reposInfo: {
         official: {
@@ -57,14 +67,6 @@ export default {
   },
 
   methods: {
-    showDialog() {
-      this.addRepos = {
-        official: isRancherPrime() && !this.hasRancherUIPluginsRepo,
-        partners: !this.hasRancherUIPartnersPluginsRepo,
-      };
-      this.isDialogActive = true;
-    },
-
     async doAddRepos(btnCb) {
       this.errors = [];
       const promises = [];
@@ -96,24 +98,20 @@ export default {
         });
       }
 
-      this.$emit('done');
+      this.done();
+      this.$emit('close');
 
       btnCb(true);
     },
   }
 };
 </script>
+
 <template>
-  <Dialog
-    v-if="isDialogActive"
-    name="add-extensions-repos"
-    :title="t('plugins.addRepos.title')"
-    mode="add"
-    data-testid="add-extensions-repos-modal"
-    :return-focus-selector="returnFocusSelector"
-    @okay="doAddRepos"
-    @closed="isDialogActive = false"
-  >
+  <div class="modal-dialog">
+    <h4>
+      {{ t('plugins.addRepos.title') }}
+    </h4>
     <p class="mb-20">
       {{ t('plugins.addRepos.prompt', {}, true) }}
     </p>
@@ -124,7 +122,7 @@ export default {
     >
       <Checkbox
         v-model:value="addRepos.official"
-        :disabled="hasRancherUIPluginsRepo"
+        :disabled="$fetchState.pending || hasRancherUIPluginsRepo"
         :primary="true"
         label-key="plugins.setup.install.addRancherRepo"
         data-testid="add-extensions-repos-modal-add-official-repo"
@@ -142,7 +140,7 @@ export default {
     >
       <Checkbox
         v-model:value="addRepos.partners"
-        :disabled="hasRancherUIPartnersPluginsRepo"
+        :disabled="$fetchState.pending || hasRancherUIPartnersPluginsRepo"
         :primary="true"
         label-key="plugins.setup.install.addPartnersRancherRepo"
         data-testid="add-extensions-repos-modal-add-partners-repo"
@@ -154,22 +152,54 @@ export default {
         ({{ t('plugins.setup.installed') }})
       </div>
     </div>
-  </Dialog>
+    <div class="dialog-buttons mt-20">
+      <button
+        class="btn role-secondary"
+        @click="$emit('close')"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton
+        mode="add"
+        class="ml-10"
+        @click="doAddRepos"
+      />
+    </div>
+  </div>
 </template>
+
 <style lang="scss" scoped>
-  .enable-plugin-support {
-    font-size: 14px;
-    margin-top: 20px;
-  }
+  .modal-dialog {
+    padding: 10px;
 
-  .plugin-setup-error {
-    font-size: 14px;
-    color: var(--error);
-    margin: 10px 0 0 0;
-  }
+    h4 {
+      font-weight: bold;
+    }
+
+    .enable-plugin-support {
+      font-size: 14px;
+      margin-top: 20px;
+    }
+
+    .plugin-setup-error {
+      font-size: 14px;
+      color: var(--error);
+      margin: 10px 0 0 0;
+    }
+
+    .checkbox-info {
+      margin-left: 20px;
+      opacity: 0.7;
+    }
 
-  .checkbox-info {
-    margin-left: 20px;
-    opacity: 0.7;
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
   }
 </style>