@rancher/shell 3.0.4 → 3.0.5-rc.2

package/detail/catalog.cattle.io.app.vue

@@ -11,6 +11,7 @@ import merge from 'lodash/merge';
 import { CATALOG } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { allHash } from '@shell/utils/promise';
+import { mergeWithReplace } from '@shell/utils/object';
 
 export default {
   name: 'DetailRelease',
@@ -52,7 +53,11 @@ export default {
     },
 
     valuesYaml() {
-      const combined = merge(merge({}, this.value?.chartValues || {}), this.value?.values || {});
+      const combined = mergeWithReplace(
+        merge({}, this.value?.chartValues || {}),
+        this.value?.values || {},
+        { replaceObjectProps: true }
+      );
 
       return jsyaml.dump(combined);
     },

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,
+      ]
+
     };
   },
 
@@ -416,7 +469,7 @@ export default {
     },
 
     machineHeaders() {
-      return [
+      const headers = [
         STATE,
         NAME_COL,
         {
@@ -433,10 +486,16 @@ export default {
         ROLES,
         AGE,
       ];
+
+      if (!this.value.isCustom) {
+        headers.splice(3, 0, this.machineColumn);
+      }
+
+      return headers;
     },
 
     mgmtNodeSchemaHeaders() {
-      return [
+      const headers = [
         STATE, NAME_COL,
         {
           name:          'node-name',
@@ -452,6 +511,12 @@ export default {
         ROLES,
         AGE
       ];
+
+      if (!this.value.isCustom) {
+        headers.splice(3, 0, this.poolColumn);
+      }
+
+      return headers;
     },
 
     rke1Snapshots() {
@@ -772,11 +837,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 +924,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"
         >

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">
@@ -296,6 +295,7 @@ export default {
               v-model:value="badgeBgColor"
               :disabled="!badgeColorPicker"
               :default-value="badgeBgColor"
+              :aria-label="t('clusterBadge.modal.badgeBgColorInput')"
             />
           </div>
         </div>

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>