@rancher/shell 3.0.9-rc.4 → 3.0.9-rc.6

package/list/management.cattle.io.setting.vue

@@ -66,6 +66,17 @@ export default {
 
     this.settings = settings;
     this.provisioningSettings = provisioningSettings;
+
+    this.$nextTick(() => {
+      // Handle scrolling to hash anchor after data is loaded
+      if (this.$route.hash) {
+        const element = document.querySelector(this.$route.hash);
+
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }
+    });
   },
 
   data() {
@@ -89,6 +100,7 @@ export default {
     </Banner>
     <div
       v-for="(setting) in settings"
+      :id="setting.id"
       :key="setting.id"
     >
       <Setting
@@ -101,6 +113,7 @@ export default {
     </h2>
     <div
       v-for="(setting) in provisioningSettings"
+      :id="setting.id"
       :key="setting.id"
     >
       <Setting

package/list/management.cattle.io.user.vue

@@ -1,6 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import { NORMAN } from '@shell/config/types';
+import { EXT } from '@shell/config/types';
 import { NAME } from '@shell/config/product/auth';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
@@ -38,14 +38,10 @@ export default {
     }
   },
   async fetch() {
-    const store = this.$store;
-
-    await store.dispatch(`rancher/findAll`, { type: NORMAN.USER });
-
     await this.$fetchType(this.resource);
 
-    this.canRefreshAccess = await this.$store.dispatch('rancher/request', { url: '/v3/users?limit=0' })
-      .then((res) => !!res?.actions?.refreshauthprovideraccess);
+    this.membershipRefreshRequests = await this.$store.dispatch('management/create', { type: EXT.GROUP_MEMBERSHIP_REFRESH_REQUESTS });
+    this.canRefreshMemberships = !!this.membershipRefreshRequests?.canRefreshMemberships;
   },
 
   data() {
@@ -55,7 +51,8 @@ export default {
 
     return {
       schema,
-      canRefreshAccess: false,
+      membershipRefreshRequests: undefined,
+      canRefreshMemberships:     false
     };
   },
 
@@ -82,28 +79,21 @@ export default {
       // 1) Only show system users in explorer/users and not in auth/users
       // 2) Supplement user with info to enable/disable the refresh group membership action (this is not persisted on save)
       const params = { ...this.$route.params };
-      const requiredUsers = params.product === NAME ? this.rows.filter((a) => !a.isSystem) : this.rows;
-
-      requiredUsers.forEach((r) => {
-        r.canRefreshAccess = this.canRefreshAccess;
-      });
 
-      return requiredUsers;
+      return params.product === NAME ? this.rows.filter((a) => !a.isSystem) : this.rows;
     },
 
     isAdmin() {
       return isAdminUser(this.$store.getters);
-    },
+    }
   },
 
   methods: {
     async refreshGroupMemberships(buttonDone) {
       try {
-        await this.$store.dispatch('rancher/collectionAction', {
-          type:       NORMAN.USER,
-          actionName: 'refreshauthprovideraccess',
-        });
-
+        // userId specifies the user ID. Use '*' for all users. Check the schemaDefinition for more details.
+        this.membershipRefreshRequests.spec = { userId: '*' };
+        await this.membershipRefreshRequests.save();
         buttonDone(true);
       } catch (err) {
         this.$store.dispatch('growl/fromError', { title: this.t('user.list.errorRefreshingGroupMemberships'), err }, { root: true });
@@ -125,7 +115,7 @@ export default {
     >
       <template #extraActions>
         <AsyncButton
-          v-if="canRefreshAccess"
+          v-if="canRefreshMemberships"
           mode="refresh"
           :action-label="t('authGroups.actions.refresh')"
           :waiting-label="t('authGroups.actions.refresh')"

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

@@ -167,6 +167,12 @@ export default {
 
   },
 
+  methods: {
+    getCustomDetailLink(cluster) {
+      return cluster.isCapiHybrid ? null : cluster.detailLocation;
+    }
+  },
+
   $loadingResources() {
     // results are filtered so we wouldn't get the correct count on indicator...
     return { loadIndeterminate: true };
@@ -211,7 +217,6 @@ export default {
         </router-link>
       </template>
     </Masthead>
-
     <ResourceTable
       :headers="headers"
       :table-actions="true"
@@ -221,6 +226,8 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :get-custom-detail-link="getCustomDetailLink"
+      :sub-rows="true"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
@@ -266,6 +273,48 @@ export default {
           {{ t('cluster.explore') }}
         </button>
       </template>
+      <template #additional-sub-row="{row, fullColspan, tableActions}">
+        <tr
+          class="capi-unsupported"
+          :class="{'has-description': !!row.stateDescription}"
+        >
+          <td
+            v-if="row.isCapiHybrid"
+            class="row-check"
+          />
+          <td
+            v-if="row.isCapiHybrid"
+            :data-testid="`capi-unsupported-warning-${row?.metadata?.name}`"
+            :colspan="fullColspan - (tableActions ? 1: 0)"
+          >
+            <div
+              class="text-warning"
+              :class="{'mt-5': !!row.stateDescription.trim()}"
+            >
+              <i class="icon icon-warning" />{{ t('cluster.capi.notSupported') }}
+            </div>
+          </td>
+        </tr>
+      </template>
     </ResourceTable>
   </div>
 </template>
+
+<stye scoped lang="scss">
+  .capi-unsupported {
+    &.has-description {
+      border-bottom: none;
+      padding: 0px;
+      td {
+        padding-top: 0px;
+      }
+    }
+
+    & div {
+      & i {
+        margin-right: 0.1em;
+      }
+      display: flex;
+    }
+  }
+</stye>

package/list/secret.vue

@@ -7,8 +7,8 @@ import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 import { TableColumn } from '@shell/types/store/type-map';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { mapGetters } from 'vuex';
-import { SECRET_CLONE, SECRET_PROJECT_SCOPED } from '@shell/config/table-headers';
-import { STEVE_SECRET_CLONE } from '@shell/config/pagination-table-headers';
+import { SECRET_ORIGIN } from '@shell/config/table-headers';
+import { STEVE_SECRET_ORIGIN } from '@shell/config/pagination-table-headers';
 
 export default {
   name: 'ListSecret',
@@ -61,13 +61,8 @@ export default {
 
     if (this.canViewProjects) {
       // if the user can see projects, add a column to let them know if it's a secret from a project scoped secret
-      headers.push(SECRET_CLONE);
-      headersSSP.push(STEVE_SECRET_CLONE);
-      if (this.currentCluster.isLocal) {
-        // if the user is on the local cluster, add a column to let them know if it's a project scoped secret (from another cluster)
-        headers.push(SECRET_PROJECT_SCOPED);
-        headersSSP.push(SECRET_PROJECT_SCOPED);
-      }
+      headers.push(SECRET_ORIGIN);
+      headersSSP.push(STEVE_SECRET_ORIGIN);
     }
 
     headers.push(this.namespacedHeaders[this.namespacedHeaders.length - 1]);

package/list/service.vue

@@ -1,6 +1,6 @@
 <script>
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
-import { NODE } from '@shell/config/types';
+import { fetchNodesForServiceTargets } from '@shell/models/service';
 
 export default {
   name:       'ListService',
@@ -27,13 +27,11 @@ export default {
      * of type PagTableFetchSecondaryResources
      */
     async fetchSecondaryResources(opts) {
-      const inStore = this.$store.getters['currentStore']();
-
-      if (this.$store.getters[`${ inStore }/schemaFor`](NODE)) {
-        // fetch nodes before loading this page, as they may be referenced in the Target table column
-        // shell/components/formatter/ServiceTargets.vue --> shell/components/formatter/Endpoints.vue --> Picks the first one that has a model's externalIp
-        await this.$store.dispatch(`${ inStore }/findAll`, { type: NODE });
-      }
+      // Nodes should be fetched because they may be referenced in the target column of a service list item.
+      await fetchNodesForServiceTargets({
+        $store:  this.$store,
+        inStore: this.$store.getters['currentStore']()
+      });
     }
   }
 };

package/machine-config/amazonec2.vue

@@ -24,7 +24,7 @@ export default {
 
   mixins: [CreateEditView],
 
-  emits: ['validationChanged', 'update:hasIpv6'],
+  emits: ['validationChanged', 'update:isIpv6', 'update:isDualStack'],
 
   props: {
     uuid: {
@@ -47,7 +47,12 @@ export default {
       default: false
     },
 
-    hasIpv6: {
+    isIpv6: {
+      type:    Boolean,
+      default: false
+    },
+
+    isDualStack: {
       type:    Boolean,
       default: false
     },
@@ -386,10 +391,12 @@ export default {
           :zone="value.zone"
           :region="value.region"
           :machine-pools="machinePools"
-          :has-ipv6="hasIpv6"
+          :is-ipv6="isIpv6"
+          :is-dual-stack="isDualStack"
           :disabled="disabled"
           :is-new="poolCreateMode"
-          @update:has-ipv6="e=>$emit('update:hasIpv6', e)"
+          @update:is-ipv6="e=>$emit('update:isIpv6', e)"
+          @update:is-dual-stack="e=>$emit('update:isDualStack', e)"
           @validation-changed="e=>$emit('validationChanged',e)"
         />
 

package/machine-config/azure.vue

@@ -209,6 +209,10 @@ export default {
     }
   },
 
+  setup() {
+    return { _EDIT };
+  },
+
   data() {
     return {
       azureEnvironments,
@@ -518,6 +522,11 @@ export default {
     </div>
   </div>
   <div v-else>
+    <Banner
+      v-if="mode === _EDIT && !value.managedDisks"
+      color="warning"
+      :label="t('cluster.machineConfig.azure.managedDisks.deprecationWarning', {}, true)"
+    />
     <div class="row mt-20">
       <div class="col span-6">
         <LabeledSelect
@@ -843,6 +852,11 @@ export default {
             :label="t('cluster.machineConfig.azure.managedDisks.label')"
             :disabled="disabled"
           />
+          <Banner
+            v-if="!value.managedDisks"
+            color="warning"
+            :label="t('cluster.machineConfig.azure.managedDisks.deprecationWarning', {}, true)"
+          />
           <Banner
             v-if="value.availabilityZone && !value.managedDisks"
             color="error"

package/machine-config/components/EC2Networking.vue

@@ -9,6 +9,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { scrollToBottom } from '@shell/utils/scroll';
 import { _CREATE } from '@shell/config/query-params';
+import { getSubnetDisplayName, getVpcDisplayName, isIpv4Network, isIpv6Network } from '@shell/utils/aws';
 
 export default {
   name: 'Ec2MachinePoolNetworking',
@@ -17,7 +18,7 @@ export default {
     Checkbox, LabeledSelect, LabeledInput, Banner
   },
 
-  emits: ['update:enablePrimaryIpv6', 'update:ipv6AddressCount', 'update:ipv6AddressOnly', 'update:httpProtocolIpv6', 'update:vpcId', 'update:subnetId', 'update:hasIpv6', 'validationChanged'],
+  emits: ['update:enablePrimaryIpv6', 'update:ipv6AddressCount', 'update:ipv6AddressOnly', 'update:httpProtocolIpv6', 'update:vpcId', 'update:subnetId', 'update:isIpv6', 'update:isDualStack', 'validationChanged'],
 
   props: {
     mode: {
@@ -84,7 +85,12 @@ export default {
       default: ''
     },
 
-    hasIpv6: {
+    isIpv6: {
+      type:    Boolean,
+      default: false
+    },
+
+    isDualStack: {
       type:    Boolean,
       default: false
     },
@@ -113,7 +119,7 @@ export default {
       this.enableIpv6 = !!vpcs.find((vpc) => vpc.VpcId === this.vpcId && vpc.Ipv6CidrBlockAssociationSet && !isEmpty(vpc.Ipv6CidrBlockAssociationSet));
     }
 
-    if (this.isNew && this.somePoolHasIpv6OrDual) {
+    if (this.isNew && this.somePoolisIpv6OrDual) {
       this.enableIpv6 = true;
     }
   },
@@ -133,7 +139,7 @@ export default {
       if (this.isNew) {
         this.updateNetwork();
       }
-      this.$emit('update:hasIpv6', neu);
+      this.$emit('update:isDualStack', neu);
 
       if (neu) {
         this.$emit('update:ipv6AddressCount', '1');
@@ -154,7 +160,12 @@ export default {
     },
 
     ipv6AddressOnly(neu) {
-      this.$emit('update:hasIpv6', neu);
+      this.$emit('update:isIpv6', neu);
+      if (neu) {
+        this.$emit('update:isDualStack', false);
+      } else if (this.enableIpv6) {
+        this.$emit('update:isDualStack', true);
+      }
     },
 
     allValid: {
@@ -174,13 +185,13 @@ export default {
       const subnetsByVpc = {};
 
       for ( const obj of this.vpcInfo.Vpcs ) {
-        const name = obj.Tags && obj.Tags?.length ? obj.Tags.find((t) => t.Key === 'Name')?.Value : null;
-        const hasIpv6 = !!obj.Ipv6CidrBlockAssociationSet && !isEmpty(obj.Ipv6CidrBlockAssociationSet);
-        const hasIpv4 = !!obj.CidrBlock;
+        const name = getVpcDisplayName(obj);
+        const hasIpv6 = isIpv6Network(obj);
+        const hasIpv4 = isIpv4Network(obj);
 
         vpcs.push({
-          label:     name || obj.VpcId,
-          subLabel:  name ? obj.VpcId : obj.CidrBlock,
+          label:     name,
+          subLabel:  obj.CidrBlock,
           isDefault: obj.IsDefault || false,
           kind:      'vpc',
           value:     obj.VpcId,
@@ -197,8 +208,8 @@ export default {
           continue;
         }
 
-        const hasIpv6 = !!obj.Ipv6CidrBlockAssociationSet && !isEmpty(obj.Ipv6CidrBlockAssociationSet);
-        const hasIpv4 = !!obj.CidrBlock;
+        const hasIpv6 = isIpv6Network(obj);
+        const hasIpv4 = isIpv4Network(obj);
 
         if (this.enableIpv6 !== hasIpv6) {
           continue;
@@ -211,11 +222,11 @@ export default {
           subnetsByVpc[obj.VpcId] = entry;
         }
 
-        const name = obj.Tags && obj.Tags?.length ? obj.Tags.find((t) => t.Key === 'Name')?.Value : null;
+        const name = getSubnetDisplayName(obj);
 
         entry.push({
-          label:     name || obj.SubnetId,
-          subLabel:  name ? obj.SubnetId : obj.CidrBlock,
+          label:     name,
+          subLabel:  obj.CidrBlock,
           kind:      'subnet',
           isDefault: obj.DefaultForAz || false,
           value:     obj.SubnetId,
@@ -278,18 +289,18 @@ export default {
       return opt && opt.hasIpv6 && !opt.hasIpv4;
     },
 
-    somePoolHasIpv6OrDual() {
-      return !!this.machinePools.find((p) => p.hasIpv6);
+    somePoolisIpv6OrDual() {
+      return !!this.machinePools.find((p) => p.isIpv6 || p.isDualStack);
     },
 
     showIpv6Options() {
-      return this.mode === _CREATE || (this.isNew && this.somePoolHasIpv6OrDual) || this.enableIpv6;
+      return this.mode === _CREATE || (this.isNew && this.somePoolisIpv6OrDual) || this.enableIpv6;
     },
 
     poolsInvalid() {
-      const somePoolHasIpv4 = !!this.machinePools.find((p) => !p.hasIpv6);
+      const somePoolHasIpv4 = !!this.machinePools.find((p) => !p.isIpv6 && !p.isDualStack);
 
-      return this.somePoolHasIpv6OrDual && somePoolHasIpv4;
+      return this.somePoolisIpv6OrDual && somePoolHasIpv4;
     },
 
     addressCountInvalid() {
@@ -398,9 +409,14 @@ export default {
         </template>
       </LabeledSelect>
     </div>
+  </div>
+  <div
+    v-if="enableIpv6"
+    class="row mb-10 ipv6-row"
+  >
     <div
       v-if="enableIpv6"
-      class="col span-3"
+      class="col span-2"
     >
       <Checkbox
         :disabled="!isNew || !dualStackSelected"
@@ -411,17 +427,12 @@ export default {
         @update:value="e=>$emit('update:ipv6AddressOnly', e)"
       />
     </div>
-  </div>
-  <div
-    v-if="enableIpv6"
-    class="row mb-10 ipv6-row"
-  >
-    <div class="col span-6">
+    <div class="col span-4">
       <Checkbox
         :value="httpProtocolIpv6==='enabled'"
         :disabled="!isNew"
         :label="t('cluster.machineConfig.amazonEc2.httpProtocolIpv6.label')"
-        data-testid="amazonEc2__enableIpv6"
+        data-testid="amazonEc2__httpProtocolIpv6"
         :mode="mode"
         @update:value="e=>$emit('update:httpProtocolIpv6', e ? 'enabled' : 'disabled')"
       />
@@ -431,7 +442,7 @@ export default {
     v-if="enableIpv6"
     class="row mb-10 ipv6-row"
   >
-    <div class="col span-3">
+    <div class="col span-6">
       <LabeledInput
         :disabled="!isNew"
         min="1"
@@ -443,7 +454,12 @@ export default {
         @update:value="e=>$emit('update:ipv6AddressCount', e)"
       />
     </div>
-    <div class="col span-9">
+  </div>
+  <div
+    v-if="enableIpv6"
+    class="row mb-10 ipv6-row"
+  >
+    <div class="col span-6">
       <Checkbox
         :disabled="!isNew"
         :value="enablePrimaryIpv6"

package/machine-config/components/__tests__/EC2Networking.test.ts

@@ -82,9 +82,9 @@ describe('component: EC2Networking', () => {
   });
 
   it.each([
-    [[{ hasIpv6: true }, { hasIpv6: false }], true],
-    [[{ hasIpv6: false }, { hasIpv6: false }], false],
-    [[{ hasIpv6: true }, { hasIpv6: true }], false],
+    [[{ isIpv6: true }, { isIpv6: false }], true],
+    [[{ isIpv6: false }, { isIpv6: false }], false],
+    [[{ isIpv6: true }, { isIpv6: true }], false],
   ])('should show an error banner if pools do not either all have ipv6 or all have ipv4', (pools, shouldShowError) => {
     const wrapper = shallowMount(EC2Networking, { ...defaultCreateSetup, propsData: { ...defaultCreateSetup.propsData, machinePools: pools } });
     const ipv6Warning = wrapper.findComponent('[data-testid="amazonEc2__ipv6Warning"]');
@@ -97,7 +97,7 @@ describe('component: EC2Networking', () => {
       ...defaultCreateSetup,
       propsData: {
         ...defaultCreateSetup.propsData,
-        machinePools: [{ hasIpv6: true }],
+        machinePools: [{ isIpv6: true }],
       },
     });
 
@@ -112,7 +112,7 @@ describe('component: EC2Networking', () => {
       ...defaultCreateSetup,
       propsData: {
         ...defaultCreateSetup.propsData,
-        machinePools: [{ hasIpv6: false }],
+        machinePools: [{ isIpv6: false }],
       },
     });
 
@@ -127,7 +127,7 @@ describe('component: EC2Networking', () => {
       ...defaultCreateSetup,
       propsData: {
         ...defaultCreateSetup.propsData,
-        machinePools: [{ hasIpv6: true }, { hasIpv6: false }],
+        machinePools: [{ isIpv6: true }, { isIpv6: false }],
       },
     });
 
@@ -139,7 +139,7 @@ describe('component: EC2Networking', () => {
       ...defaultCreateSetup,
       propsData: {
         ...defaultCreateSetup.propsData,
-        machinePools: [{ hasIpv6: true }, { hasIpv6: true }],
+        machinePools: [{ isIpv6: true }, { isIpv6: true }],
       },
     });
 

package/machine-config/components/__tests__/utils/vpcSubnetMockData.js

@@ -25,10 +25,6 @@ export const vpcInfo = {
         {
           Key:   'displayName',
           Value: 'test'
-        },
-        {
-          Key:   'Name',
-          Value: 'test-eks-vpc-VPC'
         }
       ]
     },
@@ -107,11 +103,6 @@ export const subnetInfo = {
       OwnerId:                     '1234',
       AssignIpv6AddressOnCreation: false,
       Tags:                        [
-        {
-          Key:   'Name',
-          Value: 'aws-controltower-PrivateSubnet2A'
-        },
-
         {
           Key:   'Network',
           Value: 'Private'

package/machine-config/digitalocean.vue

@@ -16,7 +16,7 @@ export default {
 
   mixins: [CreateEditView],
 
-  emits: ['update:hasIpv6'],
+  emits: ['update:isDualStack'],
 
   props: {
     credentialId: {
@@ -29,7 +29,7 @@ export default {
       default: false
     },
 
-    hasIpv6: {
+    isDualStack: {
       type:    Boolean,
       default: false
     },
@@ -119,7 +119,7 @@ export default {
     'value.image': 'updateUsername',
 
     'value.ipv6'(neu) {
-      this.$emit('update:hasIpv6', neu);
+      this.$emit('update:isDualStack', neu);
     }
   },
 

package/mixins/browser-tab-visibility.js

@@ -1,4 +1,4 @@
-import { NORMAN } from '@shell/config/types';
+import { EXT } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -14,9 +14,10 @@ export default {
 
     async visibilityChange() {
       if (!document.hidden) {
-        await this.$store.dispatch('rancher/request', {
-          type: NORMAN.USER,
-          opt:  { url: '/v3/users?me=true' }
+        await this.$store.dispatch('management/request', {
+          url:    `/v1/${ EXT.SELFUSER }`,
+          method: 'POST',
+          data:   {}
         });
       }
     },

package/mixins/fetch.client.js

@@ -5,6 +5,12 @@ const hasFetch = (component) => component.$options && typeof component.$options.
 export const addLifecycleHook = (vm, hook, fn) => {
   if (!vm.$options[hook]) {
     vm.$options[hook] = [];
+  } else if (!Array.isArray(vm.$options[hook]) && typeof vm.$options[hook] === 'function' ) {
+    // This caters for when....
+    // - component has mixins, but they have no hooks of this type (vm.$options[hook] is then not an array)
+    // - component has the hook (vm.$options[hook] is then a function)
+    // - component has both fetch and beforeMount (the component beforeMount replaces this files beforeMount with $fetch call)
+    vm.$options[hook] = [vm.$options[hook]];
   }
 
   if (Array.isArray(vm.$options[hook]) && !vm.$options[hook].includes(fn)) {