@rancher/shell 0.2.4 → 0.3.0

package/pages/auth/login.vue

@@ -116,8 +116,8 @@ export default {
       product: getProduct(),
 
       username,
-      remember:  !!username,
-      password:  '',
+      remember: !!username,
+      password: '',
 
       timedOut:  this.$route.query[TIMED_OUT] === _FLAGGED,
       loggedOut: this.$route.query[LOGGED_OUT] === _FLAGGED,
@@ -125,7 +125,7 @@ export default {
 
       providers:          [],
       providerComponents: [],
-      customLoginError:    {}
+      customLoginError:   {}
     };
   },
 
@@ -168,6 +168,10 @@ export default {
       return "kubectl get secret --namespace cattle-system bootstrap-secret -o go-template='{{.data.bootstrapPassword|base64decode}}{{\"\\n\"}}'";
     },
 
+    hasLoginMessage() {
+      return this.errorToDisplay || this.loggedOut || this.timedOut;
+    }
+
   },
 
   created() {
@@ -225,6 +229,10 @@ export default {
       }
     },
 
+    handleProviderError(err) {
+      this.err = err;
+    },
+
     async loginLocal(buttonCb) {
       try {
         await this.$store.dispatch('auth/login', {
@@ -290,10 +298,13 @@ export default {
         <p class="text-center">
           {{ t('login.howdy') }}
         </p>
-        <h1 class="text-center">
+        <h1 class="text-center login-welcome">
           {{ t('login.welcome', {vendor}) }}
         </h1>
-        <div class="login-messages">
+        <div
+          class="login-messages"
+          :class="{'login-messages--hasContent': hasLoginMessage}"
+        >
           <Banner
             v-if="errorToDisplay"
             :label="errorToDisplay"
@@ -372,7 +383,7 @@ export default {
 
         <div
           v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length"
-          class="mt-30"
+          :class="{'mt-30': !hasLoginMessage}"
         >
           <component
             :is="providerComponents[idx]"
@@ -383,12 +394,13 @@ export default {
             :name="name"
             :open="!showLocal"
             @showInputs="showLocal = false"
+            @error="handleProviderError"
           />
         </div>
         <template v-if="hasLocal">
           <form
             v-if="showLocal"
-            class="mt-40"
+            :class="{'mt-30': !hasLoginMessage}"
           >
             <div class="span-6 offset-3">
               <div class="mb-20">
@@ -490,6 +502,24 @@ export default {
       object-fit: cover;
     }
 
+    .login-welcome {
+      margin: 0
+    }
+
+    .login-messages {
+      align-items: center;
+
+      .banner {
+        margin: 5px;
+      }
+      h4 {
+        margin: 0;
+      }
+      &--hasContent {
+        min-height: 70px;
+      }
+    }
+
     .login-messages, .first-login-message {
       display: flex;
       justify-content: center;

package/pages/auth/setup.vue

@@ -144,18 +144,18 @@ export default {
 
     return {
       productName,
-      vendor:            getVendor(),
-      product:           getProduct(),
-      step:              parseInt(route.query.step, 10) || 1,
+      vendor:  getVendor(),
+      product: getProduct(),
+      step:    parseInt(route.query.step, 10) || 1,
 
-      useRandom:          true,
-      haveCurrent:        !!current,
-      username:           me?.loginName || 'admin',
+      useRandom:   true,
+      haveCurrent: !!current,
+      username:    me?.loginName || 'admin',
       isFirstLogin,
       mustChangePassword,
       current,
-      password:           randomStr(),
-      confirm:            '',
+      password:    randomStr(),
+      confirm:     '',
 
       v3User,
 
@@ -222,9 +222,9 @@ export default {
 
         if ( this.mustChangePassword ) {
           await this.$store.dispatch('rancher/request', {
-            url:           '/v3/users?action=changepassword',
-            method:        'post',
-            data:          {
+            url:    '/v3/users?action=changepassword',
+            method: 'post',
+            data:   {
               currentPassword: this.current,
               newPassword:     this.password
             },

package/pages/c/_cluster/_product/_resource/_id.vue

@@ -2,8 +2,8 @@
 import ResourceDetail from '@shell/components/ResourceDetail';
 
 export default {
-  name:        'ClusterResourcedId',
-  components:  { ResourceDetail },
+  name:       'ClusterResourcedId',
+  components: { ResourceDetail },
 };
 </script>
 

package/pages/c/_cluster/apps/charts/chart.vue

@@ -30,8 +30,8 @@ export default {
 
   data() {
     return {
-      showLastVersions:  10,
-      showMoreVersions:  false,
+      showLastVersions: 10,
+      showMoreVersions: false,
     };
   },
 
@@ -96,8 +96,8 @@ export default {
       this.$router.push({
         name:   'c-cluster-apps-charts-install',
         params: {
-          cluster:  this.$route.params.cluster,
-          product:  this.$store.getters['productId'],
+          cluster: this.$route.params.cluster,
+          product: this.$store.getters['productId'],
         },
         query: {
           [REPO_TYPE]: this.query.repoType,

package/pages/c/_cluster/apps/charts/index.vue

@@ -47,17 +47,17 @@ export default {
 
   data() {
     return {
-      allRepos:            null,
-      category:            null,
-      operatingSystem:     null,
-      searchQuery:         null,
-      showDeprecated:      null,
-      showHidden:          null,
-      chartMode:           this.$store.getters['prefs/get'](SHOW_CHART_MODE),
+      allRepos:        null,
+      category:        null,
+      operatingSystem: null,
+      searchQuery:     null,
+      showDeprecated:  null,
+      showHidden:      null,
+      chartMode:       this.$store.getters['prefs/get'](SHOW_CHART_MODE),
       chartOptions:    [
         {
-          label:       'Browse',
-          value:       'browse',
+          label: 'Browse',
+          value: 'browse',
         },
         {
           label: 'Featured',
@@ -164,13 +164,13 @@ export default {
 
       return filterAndArrangeCharts(enabledCharts, {
         clusterProvider,
-        category:         this.category,
-        searchQuery:      this.searchQuery,
-        showDeprecated:   this.showDeprecated,
-        showHidden:       this.showHidden,
-        hideRepos:        this.hideRepos,
-        hideTypes:        [CATALOG._CLUSTER_TPL],
-        showPrerelease:   this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
+        category:       this.category,
+        searchQuery:    this.searchQuery,
+        showDeprecated: this.showDeprecated,
+        showHidden:     this.showHidden,
+        hideRepos:      this.hideRepos,
+        hideTypes:      [CATALOG._CLUSTER_TPL],
+        showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
       });
     },
 
@@ -304,8 +304,8 @@ export default {
       this.$router.push({
         name:   'c-cluster-apps-charts-chart',
         params: {
-          cluster:  this.$route.params.cluster,
-          product:  this.$store.getters['productId'],
+          cluster: this.$route.params.cluster,
+          product: this.$store.getters['productId'],
         },
         query: {
           [REPO_TYPE]: chart.repoType,

package/pages/c/_cluster/apps/charts/install.vue

@@ -315,13 +315,13 @@ export default {
     /* Helm CLI options that are not persisted on the back end,
     but are used for the final install/upgrade operation. */
     const defaultCmdOpts = {
-      cleanupOnFail:       false,
-      crds:                true,
-      hooks:               true,
-      force:               false,
-      resetValues:         false,
-      openApi:             true,
-      wait:                true,
+      cleanupOnFail: false,
+      crds:          true,
+      hooks:         true,
+      force:         false,
+      resetValues:   false,
+      openApi:       true,
+      wait:          true,
       timeout:       600,
       historyMax:    5,
     };
@@ -856,13 +856,13 @@ export default {
       const withFallBack = this.$store.getters['i18n/withFallback'];
 
       return {
-        name:        customStep.name,
-        label:       withFallBack(loaded?.default?.label, null, customStep.name),
-        subtext:     withFallBack(loaded?.default?.subtext, null, ''),
-        weight:      loaded?.default?.weight,
-        ready:       false,
-        hidden:      true,
-        loading:    true,
+        name:      customStep.name,
+        label:     withFallBack(loaded?.default?.label, null, customStep.name),
+        subtext:   withFallBack(loaded?.default?.subtext, null, ''),
+        weight:    loaded?.default?.weight,
+        ready:     false,
+        hidden:    true,
+        loading:   true,
         component: customStep.component,
       };
     },

package/pages/c/_cluster/auth/config/_id.vue

@@ -4,8 +4,8 @@ import { MANAGEMENT } from '@shell/config/types';
 import { authProvidersInfo } from '@shell/utils/auth';
 
 export default {
-  name:        'AuthConfigDetail',
-  components:  { ResourceDetail },
+  name:       'AuthConfigDetail',
+  components: { ResourceDetail },
   computed:   {
     AUTH_CONFIG() {
       return MANAGEMENT.AUTH_CONFIG;

package/pages/c/_cluster/auth/roles/_resource/_id.vue

@@ -2,8 +2,8 @@
 import ResourceDetail from '@shell/components/ResourceDetail';
 
 export default {
-  name:        'RolesResourcedId',
-  components:  { ResourceDetail },
+  name:       'RolesResourcedId',
+  components: { ResourceDetail },
 };
 </script>
 

package/pages/c/_cluster/auth/roles/index.vue

@@ -4,7 +4,7 @@ import Tabbed from '@shell/components/Tabbed';
 import { MANAGEMENT } from '@shell/config/types';
 import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
-import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
+import { SUBTYPE_MAPPING, CREATE_VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import { NAME } from '@shell/config/product/auth';
 import { BLANK_CLUSTER } from '@shell/store';
 
@@ -27,8 +27,6 @@ const createRoleTemplate = {
   }
 };
 
-const createVerbs = new Set(['PUT', 'blocked-PUT']);
-
 export default {
   name: 'Roles',
 
@@ -57,7 +55,7 @@ export default {
       tabs: {
         [GLOBAL]: {
           canFetch:       globalRoleSchema?.collectionMethods.find(verb => verb === 'GET'),
-          canCreate:      globalRoleSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          canCreate:      globalRoleSchema?.resourceMethods.find(verb => CREATE_VERBS.has(verb)),
           weight:         3,
           labelKey:       SUBTYPE_MAPPING.GLOBAL.labelKey,
           schema:         globalRoleSchema,
@@ -68,7 +66,7 @@ export default {
         },
         [CLUSTER]: {
           canFetch:       roleTemplatesSchema?.collectionMethods.find(verb => verb === 'GET'),
-          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => CREATE_VERBS.has(verb)),
           labelKey:       SUBTYPE_MAPPING.CLUSTER.labelKey,
           weight:         2,
           schema:         roleTemplatesSchema,
@@ -80,7 +78,7 @@ export default {
         },
         [PROJECT]: {
           canFetch:       roleTemplatesSchema?.collectionMethods.find(verb => verb === 'GET'),
-          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => createVerbs.has(verb)),
+          canCreate:      roleTemplatesSchema?.resourceMethods.find(verb => CREATE_VERBS.has(verb)),
           labelKey:       SUBTYPE_MAPPING.NAMESPACE.labelKey,
           weight:         1,
           schema:         roleTemplatesSchema,

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -30,14 +30,14 @@ export default {
         canBeVariable: true,
       },
       {
-        name:          'date',
-        label:         'Date',
-        labelKey:      'clusterIndexPage.sections.events.date.label',
-        value:         'timestamp',
-        sort:          'timestamp:desc',
-        formatter:     'Date',
-        width:         220,
-        defaultSort:   true,
+        name:        'date',
+        label:       'Date',
+        labelKey:    'clusterIndexPage.sections.events.date.label',
+        value:       'timestamp',
+        sort:        'timestamp:desc',
+        formatter:   'Date',
+        width:       220,
+        defaultSort: true,
       },
     ];
 

package/pages/c/_cluster/explorer/index.vue

@@ -112,12 +112,12 @@ export default {
 
     return {
       nodeHeaders,
-      constraints:                 [],
-      events:                      [],
-      nodeMetrics:                 [],
-      showClusterMetrics:          false,
-      showK8sMetrics:              false,
-      showEtcdMetrics:             false,
+      constraints:        [],
+      events:             [],
+      nodeMetrics:        [],
+      showClusterMetrics: false,
+      showK8sMetrics:     false,
+      showEtcdMetrics:    false,
       CLUSTER_METRICS_DETAIL_URL,
       CLUSTER_METRICS_SUMMARY_URL,
       K8S_METRICS_DETAIL_URL,
@@ -125,7 +125,7 @@ export default {
       ETCD_METRICS_DETAIL_URL,
       ETCD_METRICS_SUMMARY_URL,
       clusterCounts,
-      selectedTab:                 'cluster-events',
+      selectedTab:        'cluster-events',
     };
   },
 
@@ -213,8 +213,8 @@ export default {
 
       COMPONENT_STATUS.forEach((cs) => {
         status.push({
-          name:      cs,
-          healthy:   this.isComponentStatusHealthy(cs),
+          name:     cs,
+          healthy:  this.isComponentStatusHealthy(cs),
           labelKey: `clusterIndexPage.sections.componentStatus.${ cs }`,
         });
       });
@@ -224,11 +224,11 @@ export default {
 
     totalCountGaugeInput() {
       const totalInput = {
-        name:            this.t('clusterIndexPage.resourceGauge.totalResources'),
-        total:           0,
-        useful:          0,
-        warningCount:    0,
-        errorCount:      0
+        name:         this.t('clusterIndexPage.resourceGauge.totalResources'),
+        total:        0,
+        useful:       0,
+        warningCount: 0,
+        errorCount:   0
       };
 
       this.accessibleResources.forEach((resource) => {

package/pages/c/_cluster/explorer/tools/index.vue

@@ -115,10 +115,10 @@ export default {
 
       let charts = filterAndArrangeCharts(enabledCharts, {
         clusterProvider,
-        showDeprecated:   this.showDeprecated,
-        showHidden:       this.showHidden,
-        showRepos:        [this.rancherCatalog?._key],
-        showTypes:        [CATALOG_ANNOTATIONS._CLUSTER_TOOL],
+        showDeprecated: this.showDeprecated,
+        showHidden:     this.showHidden,
+        showRepos:      [this.rancherCatalog?._key],
+        showTypes:      [CATALOG_ANNOTATIONS._CLUSTER_TOOL],
       });
 
       charts = charts.filter(c => c.sideLabel !== 'Experimental');

package/pages/c/_cluster/fleet/GitRepoGraphConfig.js

@@ -203,7 +203,7 @@ export const gitRepoGraphConfig = {
 
     const moreInfo = [
       {
-        labelKey:  'fleet.fdc.type',
+        labelKey: 'fleet.fdc.type',
         value:    dataType
       },
       {
@@ -230,7 +230,7 @@ export const gitRepoGraphConfig = {
     moreInfo.push({
       type:     'state-badge',
       labelKey: 'fleet.fdc.state',
-      valueObj:    {
+      valueObj: {
         stateColor: data.stateColor,
         stateLabel: data.stateLabel
       }

package/pages/c/_cluster/fleet/index.vue

@@ -51,18 +51,18 @@ export default {
           canBeVariable: true,
         },
         {
-          name:      'clustersReady',
-          labelKey:  'tableHeaders.clustersReady',
-          value:     'status.readyClusters',
-          sort:      'status.readyClusters',
-          search:    false,
+          name:     'clustersReady',
+          labelKey: 'tableHeaders.clustersReady',
+          value:    'status.readyClusters',
+          sort:     'status.readyClusters',
+          search:   false,
         },
         {
-          name:      'bundlesReady',
-          labelKey:  'tableHeaders.bundlesReady',
-          value:     'status.readyClusters',
-          sort:      'status.readyClusters',
-          search:    false,
+          name:     'bundlesReady',
+          labelKey: 'tableHeaders.bundlesReady',
+          value:    'status.readyClusters',
+          sort:     'status.readyClusters',
+          search:   false,
         },
         {
           name:     'resourcesReady',

package/pages/c/_cluster/gatekeeper/index.vue

@@ -18,7 +18,7 @@ export default {
           text: constraint.nameDisplay,
           to:   constraint.detailLocation
         },
-        templateLink:  {
+        templateLink: {
           text: constraint.kind,
           to:   {
             name:   'c-cluster-product-resource-id',

package/pages/c/_cluster/legacy/index.vue

@@ -8,7 +8,7 @@ export default {
       params: {
         ...route.params,
         cluster: 'local',
-        product:  NAME,
+        product: NAME,
         page:    'alerts'
       }
     });

package/pages/c/_cluster/longhorn/index.vue

@@ -27,7 +27,7 @@ export default {
         enabled:     true,
         iconSrc:     this.longhornImgSrc,
         label:       'longhorn.overview.linkedList.longhorn.label',
-        description:   'longhorn.overview.linkedList.longhorn.description',
+        description: 'longhorn.overview.linkedList.longhorn.description',
         link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/longhorn-system/services/http:longhorn-frontend:80/proxy/`
       },
     ];

package/pages/c/_cluster/mcapps/index.vue

@@ -7,7 +7,7 @@ export default {
       name:   'c-cluster-mcapps-pages-page',
       params: {
         ...route.params,
-        product:  NAME,
+        product: NAME,
         page:    'catalogs'
       }
     });

package/pages/c/_cluster/navlinks/_group.vue

@@ -6,7 +6,7 @@ import SelectIconGrid from '@shell/components/SelectIconGrid';
 export default {
   components: { SelectIconGrid },
 
-  computed:   {
+  computed: {
     groupSlug() {
       return this.$route.params.group;
     },

package/pages/c/_cluster/neuvector/index.vue

@@ -27,7 +27,7 @@ export default {
         enabled:     true,
         iconSrc:     this.neuvectorImgSrc,
         label:       'neuvector.overview.linkedList.neuvector.label',
-        description:   'neuvector.overview.linkedList.neuvector.description',
+        description: 'neuvector.overview.linkedList.neuvector.description',
         link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ NEU_VECTOR_NAMESPACE }/services/https:neuvector-service-webui:8443/proxy`
       },
     ];

package/pages/c/_cluster/settings/banners.vue

@@ -16,40 +16,40 @@ import NotificationSettings from '@shell/components/form/NotificationSettings.vu
 
 const DEFAULT_BANNER_SETTING = {
   loginError:   { message: '', showMessage: 'false' },
-  bannerHeader:    {
-    background:      null,
-    color:           null,
-    textAlignment:   'center',
-    fontWeight:      null,
-    fontStyle:       null,
-    fontSize:        '14px',
-    textDecoration:  null,
-    text:            null,
+  bannerHeader: {
+    background:     null,
+    color:          null,
+    textAlignment:  'center',
+    fontWeight:     null,
+    fontStyle:      null,
+    fontSize:       '14px',
+    textDecoration: null,
+    text:           null,
   },
   bannerFooter: {
-    background:      null,
-    color:           null,
-    textAlignment:   'center',
-    fontWeight:      null,
-    fontStyle:       null,
-    fontSize:        '14px',
-    textDecoration:  null,
-    text:            null
+    background:     null,
+    color:          null,
+    textAlignment:  'center',
+    fontWeight:     null,
+    fontStyle:      null,
+    fontSize:       '14px',
+    textDecoration: null,
+    text:           null
   },
-  bannerConsent:  {
-    background:      null,
-    color:           null,
-    textAlignment:   'center',
-    fontWeight:      null,
-    fontStyle:       null,
-    fontSize:        '14px',
-    textDecoration:  null,
-    text:            null,
-    button:          null,
+  bannerConsent: {
+    background:     null,
+    color:          null,
+    textAlignment:  'center',
+    fontWeight:     null,
+    fontStyle:      null,
+    fontSize:       '14px',
+    textDecoration: null,
+    text:           null,
+    button:         null,
   },
-  showHeader:   'false',
-  showFooter:   'false',
-  showConsent:  'false'
+  showHeader:  'false',
+  showFooter:  'false',
+  showConsent: 'false'
 };
 
 export default {

package/pages/c/_cluster/settings/brand.vue

@@ -28,12 +28,12 @@ export default {
 
   async fetch() {
     const hash = await allHash({
-      uiPLSetting:            this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
-      uiLogoDarkSetting:      fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
-      uiLogoLightSetting:     fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
-      uiColorSetting:         fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
-      uiLinkColorSetting:     fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
-      uiFaviconSetting:       fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
+      uiPLSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
+      uiLogoDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
+      uiLogoLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
+      uiColorSetting:     fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
+      uiLinkColorSetting: fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
+      uiFaviconSetting:   fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
     Object.assign(this, hash);
@@ -79,9 +79,9 @@ export default {
       uiLogoLight:        '',
       customizeLogo:      false,
 
-      uiFaviconSetting:   {},
-      uiFavicon:          '',
-      customizeFavicon:   false,
+      uiFaviconSetting: {},
+      uiFavicon:        '',
+      customizeFavicon: false,
 
       uiColorSetting:     {},
       uiColor:            null,