@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/auth/oidc.vue

@@ -174,7 +174,7 @@ export default {
           :disable="disable"
           :edit="goToEdit"
         >
-          <template slot="rows">
+          <template #rows>
             <tr><td>{{ t(`authConfig.oidc.rancherUrl`) }}: </td><td>{{ model.rancherUrl }}</td></tr>
             <tr><td>{{ t(`authConfig.oidc.clientId`) }}: </td><td>{{ model.clientId }}</td></tr>
             <tr><td>{{ t(`authConfig.oidc.issuer`) }}: </td><td>{{ model.issuer }}</td></tr>
@@ -202,7 +202,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.clientId"
+              v-model:value="model.clientId"
               :label="t(`authConfig.oidc.clientId`)"
               :mode="mode"
               required
@@ -211,7 +211,7 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.clientSecret"
+              v-model:value="model.clientSecret"
               :label="t(`authConfig.oidc.clientSecret`)"
               :mode="mode"
               required
@@ -223,7 +223,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.privateKey"
+              v-model:value="model.privateKey"
               :label="t(`authConfig.oidc.key.label`)"
               :placeholder="t(`authConfig.oidc.key.placeholder`)"
               :mode="mode"
@@ -238,7 +238,7 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.certificate"
+              v-model:value="model.certificate"
               :label="t(`authConfig.oidc.cert.label`)"
               :placeholder="t(`authConfig.oidc.cert.placeholder`)"
               :mode="mode"
@@ -256,12 +256,12 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <ArrayList
-              v-model="oidcScope"
+              v-model:value="oidcScope"
               :mode="mode"
               :title="t('authConfig.oidc.scope.label')"
               :value-placeholder="t('authConfig.oidc.scope.placeholder')"
               :protip="t('authConfig.oidc.scope.protip', {}, true)"
-              @input="updateScope"
+              @update:value="updateScope"
             />
           </div>
         </div>
@@ -269,7 +269,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <RadioGroup
-              v-model="customEndpoint.value"
+              v-model:value="customEndpoint.value"
               name="customEndpoint"
               label-key="authConfig.oidc.customEndpoint.label"
               :labels="customEndpoint.labels"
@@ -286,7 +286,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="oidcUrls.url"
+              v-model:value="oidcUrls.url"
               :label="t(`authConfig.oidc.url`)"
               :mode="mode"
               :required="!customEndpoint.value"
@@ -296,7 +296,7 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="oidcUrls.realm"
+              v-model:value="oidcUrls.realm"
               :label="t(`authConfig.oidc.realm`)"
               :mode="mode"
               :required="!customEndpoint.value"
@@ -309,7 +309,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.rancherUrl"
+              v-model:value="model.rancherUrl"
               :label="t(`authConfig.oidc.rancherUrl`)"
               :mode="mode"
               required
@@ -322,7 +322,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.issuer"
+              v-model:value="model.issuer"
               :label="t(`authConfig.oidc.issuer`)"
               :mode="mode"
               required
@@ -332,7 +332,7 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.authEndpoint"
+              v-model:value="model.authEndpoint"
               :label="t(`authConfig.oidc.authEndpoint`)"
               :mode="mode"
               :disabled="!customEndpoint.value"
@@ -346,7 +346,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model="model.jwksUrl"
+                v-model:value="model.jwksUrl"
                 :label="t(`authConfig.oidc.jwksUrl`)"
                 :mode="mode"
                 :disabled="!customEndpoint.value"
@@ -354,7 +354,7 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledInput
-                v-model="model.tokenEndpoint"
+                v-model:value="model.tokenEndpoint"
                 :label="t(`authConfig.oidc.tokenEndpoint`)"
                 :mode="mode"
                 :disabled="!customEndpoint.value"
@@ -365,7 +365,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model="model.userInfoEndpoint"
+                v-model:value="model.userInfoEndpoint"
                 :label="t(`authConfig.oidc.userInfoEndpoint`)"
                 :mode="mode"
                 :disabled="!customEndpoint.value"
@@ -373,7 +373,7 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledInput
-                v-model="model.acrValue"
+                v-model:value="model.acrValue"
                 :label="t(`authConfig.oidc.acrValue`)"
                 :mode="mode"
                 :disabled="!customEndpoint.value"
@@ -390,7 +390,7 @@ export default {
   .banner {
     display: block;
 
-    &::v-deep code {
+    &:deep() code {
       padding: 0 3px;
       margin: 0 3px;
     }

package/edit/auth/saml.vue

@@ -1,7 +1,7 @@
 <script>
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
-import AuthConfig from '@shell/mixins/auth-config';
+import AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
 import CruResource from '@shell/components/CruResource';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -11,6 +11,7 @@ import FileSelector from '@shell/components/form/FileSelector';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import config from '@shell/edit/auth/ldap/config';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 
 export const SHIBBOLETH = 'shibboleth';
 export const OKTA = 'okta';
@@ -45,6 +46,7 @@ export default {
     Banner,
     AllowedPrincipals,
     Checkbox,
+    RadioGroup,
     FileSelector,
     config,
     AuthBanner,
@@ -55,7 +57,7 @@ export default {
   data() {
     return {
       showLdap:        false,
-      showLdapDetails: false,
+      showLdapDetails: false
     };
   },
 
@@ -68,6 +70,24 @@ export default {
       };
     },
 
+    isLogoutAllSupported() {
+      return this.model?.logoutAllSupported;
+    },
+
+    sloOptions() {
+      return [
+        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.saml.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.saml.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.saml.sloOptions.choose') },
+      ];
+    },
+
+    sloTypeText() {
+      const sloOptionSelected = this.sloOptions.find((item) => item.value === this.sloType);
+
+      return sloOptionSelected?.label || '';
+    },
+
     toSave() {
       return { enabled: true, ...this.model };
     },
@@ -97,10 +117,32 @@ export default {
     showLdap(neu, old) {
       if (neu && !this.model.openLdapConfig) {
         // Use a spread of config, so that if don't make changes to the defaults if the user edits them
-        this.$set(this.model, 'openLdapConfig', { ...LDAP_DEFAULTS });
+        this.model['openLdapConfig'] = { ...LDAP_DEFAULTS };
+      }
+    },
+    // sloType is defined on shell/mixins/auth-config.js
+    sloType(neu) {
+      switch (neu) {
+      case SLO_OPTION_VALUES.rancher:
+        this.model.logoutAllEnabled = false;
+        this.model.logoutAllForced = false;
+        break;
+      case SLO_OPTION_VALUES.all:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = true;
+        break;
+      case SLO_OPTION_VALUES.both:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = false;
+        break;
       }
     }
-  }
+  },
+  methods: {
+    onSelected(val, key) {
+      this.model[key] = val;
+    }
+  },
 };
 </script>
 
@@ -128,20 +170,21 @@ export default {
           :disable="disable"
           :edit="goToEdit"
         >
-          <template
-            slot="rows"
-          >
+          <template #rows>
             <tr><td>{{ t(`authConfig.saml.displayName`) }}: </td><td>{{ model.displayNameField }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.userName`) }}: </td><td>{{ model.userNameField }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.UID`) }}: </td><td>{{ model.uidField }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.entityID`) }}: </td><td>{{ model.entityID }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.api`) }}: </td><td>{{ model.rancherApiHost }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.groups`) }}: </td><td>{{ model.groupsField }}</td></tr>
+            <tr v-if="isLogoutAllSupported">
+              <td>{{ t(`authConfig.saml.sloTitle`) }}: </td><td>{{ sloTypeText }}</td>
+            </tr>
           </template>
 
           <template
             v-if="supportsLDAPSearch"
-            slot="footer"
+            #footer
           >
             <Banner
               v-if="showLdap"
@@ -197,10 +240,11 @@ export default {
         />
 
         <h3>{{ t(`authConfig.saml.${NAME}`) }}</h3>
+
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.displayNameField"
+              v-model:value="model.displayNameField"
               :label="t(`authConfig.saml.displayName`)"
               :mode="mode"
               required
@@ -208,7 +252,7 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.userNameField"
+              v-model:value="model.userNameField"
               :label="t(`authConfig.saml.userName`)"
               :mode="mode"
               required
@@ -219,7 +263,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.uidField"
+              v-model:value="model.uidField"
               :label="t(`authConfig.saml.UID`)"
               :mode="mode"
               required
@@ -227,27 +271,28 @@ export default {
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.groupsField"
+              v-model:value="model.groupsField"
               :label="t(`authConfig.saml.groups`)"
               :mode="mode"
               required
             />
           </div>
         </div>
+
         <div class="row mb-20">
           <div
             v-if="NAME === 'keycloak' || NAME === 'ping'"
             class="col span-6"
           >
             <LabeledInput
-              v-model="model.entityID"
+              v-model:value="model.entityID"
               :label="t(`authConfig.saml.entityID`)"
               :mode="mode"
             />
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.rancherApiHost"
+              v-model:value="model.rancherApiHost"
               :label="t(`authConfig.saml.api`)"
               :mode="mode"
               required
@@ -258,7 +303,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-4">
             <LabeledInput
-              v-model="model.spKey"
+              v-model:value="model.spKey"
               :label="t(`authConfig.saml.key.label`)"
               :placeholder="t(`authConfig.saml.key.placeholder`)"
               :mode="mode"
@@ -269,12 +314,12 @@ export default {
               class="role-tertiary add mt-5"
               :label="t('generic.readFromFile')"
               :mode="mode"
-              @selected="$set(model, 'spKey', $event)"
+              @selected="onSelected($event, 'spKey')"
             />
           </div>
           <div class="col span-4">
             <LabeledInput
-              v-model="model.spCert"
+              v-model:value="model.spCert"
               :label="t(`authConfig.saml.cert.label`)"
               :placeholder="t(`authConfig.saml.cert.placeholder`)"
               :mode="mode"
@@ -285,12 +330,12 @@ export default {
               class="role-tertiary add mt-5"
               :label="t('generic.readFromFile')"
               :mode="mode"
-              @selected="$set(model, 'spCert', $event)"
+              @selected="onSelected($event, 'spCert')"
             />
           </div>
           <div class="col span-4">
             <LabeledInput
-              v-model="model.idpMetadataContent"
+              v-model:value="model.idpMetadataContent"
               :label="t(`authConfig.saml.metadata.label`)"
               :placeholder="t(`authConfig.saml.metadata.placeholder`)"
               :mode="mode"
@@ -301,13 +346,38 @@ export default {
               class="role-tertiary add mt-5"
               :label="t('generic.readFromFile')"
               :mode="mode"
-              @selected="$set(model, 'idpMetadataContent', $event)"
+              @selected="onSelected($event, 'idpMetadataContent')"
             />
           </div>
         </div>
+
+        <!-- SLO logout -->
+        <div
+          v-if="isLogoutAllSupported"
+          class="mt-10 mb-30"
+        >
+          <div class="row">
+            <div class="col span-12">
+              <h3>{{ t('authConfig.saml.sloTitle') }}</h3>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-4">
+              <RadioGroup
+                v-model:value="sloType"
+                :mode="mode"
+                :options="sloOptions"
+                :disabled="!model.logoutAllSupported"
+                name="sloTypeRadio"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- LDAP search -->
         <div v-if="supportsLDAPSearch">
           <div class="row">
-            <h2>{{ t('authConfig.saml.search.title') }}</h2>
+            <h3>{{ t('authConfig.saml.search.title') }}</h3>
           </div>
           <div class="row">
             <Banner
@@ -317,7 +387,7 @@ export default {
           </div>
           <div class="row">
             <Checkbox
-              v-model="showLdap"
+              v-model:value="showLdap"
               :mode="mode"
               :label="t('authConfig.saml.showLdap')"
             />
@@ -325,7 +395,7 @@ export default {
           <div class="row mt-20 mb-20">
             <config
               v-if="showLdap && model.openLdapConfig"
-              v-model="model.openLdapConfig"
+              v-model:value="model.openLdapConfig"
               :type="NAME"
               :mode="mode"
               :is-create="!model.enabled"
@@ -340,7 +410,7 @@ export default {
   .banner {
     display: block;
 
-    &::v-deep code {
+    &:deep() code {
       padding: 0 3px;
       margin: 0 3px;
     }

package/edit/autoscaling.horizontalpodautoscaler/external-metric.vue

@@ -43,14 +43,14 @@ export default {
   <div>
     <div class="row mb-20">
       <MetricTarget
-        v-model="value.target"
+        v-model:value="value.target"
         :mode="mode"
         metric-resource="external"
       />
     </div>
     <div class="row">
       <MetricIdentifier
-        v-model="value.metric"
+        v-model:value="value.metric"
         :mode="mode"
       />
     </div>

package/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue

@@ -28,17 +28,17 @@ export default {
   },
   data() {
     if (!this.value.spec.behavior[this.type].policies) {
-      this.$set(this.value.spec.behavior[this.type], 'policies', []);
+      this.value.spec.behavior[this.type]['policies'] = [];
     }
     if (!this.value.spec.behavior[this.type].selectPolicy) {
-      this.$set(this.value.spec.behavior[this.type], 'selectPolicy', 'Max');
+      this.value.spec.behavior[this.type]['selectPolicy'] = 'Max';
     }
     if (this.value.spec.behavior[this.type].stabilizationWindowSeconds === null || typeof this.value.spec.behavior[this.type].stabilizationWindowSeconds === 'undefined') {
       if (this.type === 'scaleUp') {
-        this.$set(this.value.spec.behavior[this.type], 'stabilizationWindowSeconds', 0);
+        this.value.spec.behavior[this.type]['stabilizationWindowSeconds'] = 0;
       }
       if (this.type === 'scaleDown') {
-        this.$set(this.value.spec.behavior[this.type], 'stabilizationWindowSeconds', 300);
+        this.value.spec.behavior[this.type]['stabilizationWindowSeconds'] = 300;
       }
     }
 
@@ -52,7 +52,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <ArrayListGrouped
-          v-model="value.spec.behavior[type].policies"
+          v-model:value="value.spec.behavior[type].policies"
           :add-label="t('hpa.scalingRule.addPolicy')"
           :default-add-value="{}"
           :mode="mode"
@@ -61,7 +61,7 @@ export default {
             <div class="row">
               <div class="col span-4">
                 <LabeledSelect
-                  v-model="props.row.value.type"
+                  v-model:value="props.row.value.type"
                   :mode="mode"
                   :options="policyTypeOptions"
                   :multiple="false"
@@ -103,7 +103,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.spec.behavior[type].selectPolicy"
+          v-model:value="value.spec.behavior[type].selectPolicy"
           :mode="mode"
           :options="selectPolicyOptions"
           :multiple="false"

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -118,13 +118,13 @@ export default {
       set(hasScaleDownRules) {
         if (hasScaleDownRules) {
           if (!this.value.spec.behavior) {
-            this.$set(this.value.spec, 'behavior', {});
+            this.value.spec['behavior'] = {};
           }
           if (!this.value.spec.behavior?.scaleDown) {
-            this.$set(this.value.spec.behavior, 'scaleDown', {});
+            this.value.spec.behavior['scaleDown'] = {};
           }
         } else {
-          this.$delete(this.value.spec.behavior, 'scaleDown');
+          delete this.value.spec.behavior['scaleDown'];
         }
       }
     },
@@ -135,13 +135,13 @@ export default {
       set(hasScaleUpRules) {
         if (hasScaleUpRules) {
           if (!this.value.spec.behavior) {
-            this.$set(this.value.spec, 'behavior', {});
+            this.value.spec['behavior'] = {};
           }
           if (!this.value.spec.behavior?.scaleUp) {
-            this.$set(this.value.spec.behavior, 'scaleUp', {});
+            this.value.spec.behavior['scaleUp'] = {};
           }
         } else {
-          this.$delete(this.value.spec.behavior, 'scaleUp');
+          delete this.value.spec.behavior['scaleUp'];
         }
       }
     },
@@ -157,7 +157,7 @@ export default {
 
   methods: {
     initSpec() {
-      this.$set(this.value, 'spec', {
+      this.value['spec'] = {
         type:           'io.k8s.api.autoscaling.v1.horizontalpodautoscalerspec',
         minReplicas:    1,
         maxReplicas:    10,
@@ -166,8 +166,8 @@ export default {
           kind:       '',
           name:       '',
         },
-        metrics: [{ ...this.defaultResourceMetric }],
-      });
+        metrics: [{ ...this.defaultResourceMetric }]
+      };
     },
     async loadWorkloads() {
       await Promise.all(
@@ -213,7 +213,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledSelect
-                v-model="value.spec.scaleTargetRef"
+                v-model:value="value.spec.scaleTargetRef"
                 :get-option-label="(opt) => opt.name"
                 :mode="mode"
                 :label="t('hpa.workloadTab.targetReference')"
@@ -254,7 +254,7 @@ export default {
           :label="t('hpa.tabs.metrics')"
         >
           <ArrayListGrouped
-            v-model="value.spec.metrics"
+            v-model:value="value.spec.metrics"
             :default-add-value="{ ...defaultResourceMetric }"
             :mode="mode"
             :initial-empty-row="true"
@@ -272,7 +272,7 @@ export default {
             </template>
             <template #default="props">
               <MetricsRow
-                v-model="props.row.value"
+                v-model:value="props.row.value"
                 :mode="mode"
                 :metrics-available="resourceMetricsAvailable"
                 :referent="selectedTargetRef"
@@ -290,16 +290,17 @@ export default {
             </h3>
             <div class="row mb-10">
               <Checkbox
-                v-model="hasScaleDownRules"
+                v-model:value="hasScaleDownRules"
                 :mode="mode"
                 :label="t('hpa.scaleDownRules.enable')"
               />
             </div>
             <HpaScalingRule
               v-if="hasScaleDownRules"
-              v-model="value"
+              :value="value"
               type="scaleDown"
               :mode="mode"
+              @update:value="$emit('input', $event)"
             />
           </div>
           <div class="col span-12">
@@ -308,16 +309,17 @@ export default {
             </h3>
             <div class="row mb-10">
               <Checkbox
-                v-model="hasScaleUpRules"
+                v-model:value="hasScaleUpRules"
                 :mode="mode"
                 :label="t('hpa.scaleUpRules.enable')"
               />
             </div>
             <HpaScalingRule
               v-if="hasScaleUpRules"
-              v-model="value"
+              :value="value"
               type="scaleUp"
               :mode="mode"
+              @update:value="$emit('input', $event)"
             />
           </div>
         </Tab>

package/edit/autoscaling.horizontalpodautoscaler/metric-identifier.vue

@@ -42,8 +42,8 @@ export default {
     matchChanged(expressions) {
       const { matchLabels, matchExpressions } = simplify(expressions);
 
-      this.$set(this.value.selector, 'matchLabels', matchLabels);
-      this.$set(this.value.selector, 'matchExpressions', matchExpressions);
+      this.value.selector['matchLabels'] = matchLabels;
+      this.value.selector['matchExpressions'] = matchExpressions;
     },
   },
 };
@@ -54,7 +54,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :mode="mode"
           :label="t('hpa.metricIdentifier.name.label')"
           :required="true"

package/edit/autoscaling.horizontalpodautoscaler/metric-object-reference.vue

@@ -25,7 +25,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.apiVersion"
+          v-model:value="value.apiVersion"
           :mode="mode"
           :label="t('hpa.objectReference.api.label')"
           :required="true"
@@ -35,7 +35,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.kind"
+          v-model:value="value.kind"
           :mode="mode"
           :label="t('hpa.objectReference.kind.label')"
           :required="true"
@@ -47,7 +47,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.name"
+          v-model:value="value.name"
           :mode="mode"
           :label="t('hpa.objectReference.name.label')"
           :required="true"