@rancher/shell 2.0.0 → 2.0.1

package/assets/translations/en-us.yaml

@@ -572,7 +572,7 @@ authConfig:
         title: Are you sure? This update is irreversible.
         body: '<p><b>You may need to make some additional changes</b>. Please ensure the Azure AD app has the Directory.Read.All <b>Application</b> permission added to Microsoft Graph.<br> If any endpoints were customized while configuring Azure AD authentication in Rancher, they will not be automatically updated. </p>'
   oidc:
-    oidc: Configure an OIDC account
+    genericoidc: Configure an OIDC account
     keycloakoidc: Configure a Keycloak OIDC account
     rancherUrl: Rancher URL
     clientId: Client ID
@@ -2225,7 +2225,22 @@ drivers:
     refresh: Refresh Kubernetes Metadata
   deactivate:
     title: Are you sure?
-    warning: You will no longer be able to edit the configuration of clusters using {name} driver. Resources in the provider will not be automatically removed.
+    andOthers: |-
+      {count, plural,
+      =0 {}
+      =1 { and <b>one other </b>}
+      other { and <b>{count} other </b>}
+      }
+    warningDrivers: |-
+      {count, plural,
+      =1 { You will no longer be able to edit the configuration of clusters using {names} driver.}
+      other { You will no longer be able to edit the configuration of clusters using {names} drivers.}
+      }
+    warning: |-
+      {count, plural,
+      =1 { {warningDrivers} Resources in the corresponding provider will not be automatically removed.}
+      other { {warningDrivers} Resources in the corresponding providers will not be automatically removed.}
+      }
 
 detailText:
   collapse: Hide
@@ -6582,7 +6597,7 @@ model:
       okta: Okta
       freeipa: FreeIPA
       googleoauth: Google
-      oidc: Generic OIDC
+      genericoidc: Generic OIDC
       keycloakoidc: Keycloak
 
   cluster:

package/components/AlertTable.vue

@@ -49,6 +49,7 @@ export default {
     ];
 
     return {
+      inStore:            this.$store.getters['currentProduct'].inStore,
       alertManagerPoller: new Poller(
         this.loadAlertManagerEvents,
         ALERTMANAGER_POLL_RATE_MS,
@@ -69,15 +70,24 @@ export default {
   },
 
   methods: {
-    async loadAlertManagerEvents() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const alertsEvents = await this.$store.dispatch(
-        `${ inStore }/request`,
-        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/v1/alerts` }
+    async fetchAlertManagerEvents(version) {
+      return await this.$store.dispatch(
+        `${ this.inStore }/request`,
+        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/${ version }/alerts` }
       );
+    },
+
+    async loadAlertManagerEvents() {
+      let alertEvents;
+
+      try {
+        alertEvents = await this.fetchAlertManagerEvents('v2');
+      } catch (err) {
+        alertEvents = await this.fetchAlertManagerEvents('v1').then((res) => res?.data);
+      }
 
-      if (alertsEvents.data) {
-        this.allAlerts = alertsEvents.data;
+      if (alertEvents) {
+        this.allAlerts = alertEvents;
       }
     },
 

package/components/GrafanaDashboard.vue

@@ -114,10 +114,12 @@ export default {
       this.interval = setInterval(() => {
         try {
           const graphWindow = this.$refs.frame?.contentWindow;
-          const errorElements = graphWindow.document.getElementsByClassName('alert-error');
-          const errorCornerElements = graphWindow.document.getElementsByClassName('panel-info-corner--error');
-          const panelInFullScreenElements = graphWindow.document.getElementsByClassName('panel-in-fullscreen');
-          const panelContainerElements = graphWindow.document.getElementsByClassName('panel-container');
+
+          // Note. getElementsByClassName won't work, following a grafana bump class names are now unique - for example css-2qng6u-panel-container
+          const errorElements = graphWindow.document.querySelectorAll('[class$="alert-error');
+          const errorCornerElements = graphWindow.document.querySelectorAll('[class$="panel-info-corner--error');
+          const panelInFullScreenElements = graphWindow.document.querySelectorAll('[class$="panel-in-fullscreen');
+          const panelContainerElements = graphWindow.document.querySelectorAll('[class$="panel-container');
           const error = errorElements.length > 0 || errorCornerElements.length > 0;
           const loaded = panelInFullScreenElements.length > 0 || panelContainerElements.length > 0;
           const errorMessageElms = graphWindow.document.getElementsByTagName('pre');

package/components/PromptRemove.vue

@@ -376,6 +376,7 @@ export default {
               :value="toRemove"
               :names="names"
               :type="type"
+              :done-location="doneLocation"
               @errors="e => error = e"
               @done="done"
             />

package/components/form/KeyValue.vue

@@ -758,6 +758,7 @@ export default {
             :name="'col:' + c"
             :row="row"
             :queue-update="queueUpdate"
+            :i="i"
           />
         </div>
         <div

package/components/form/Taints.vue

@@ -3,10 +3,10 @@ import KeyValue from '@shell/components/form/KeyValue';
 import { _VIEW } from '@shell/config/query-params';
 import Select from '@shell/components/form/Select';
 
-const EFFECT_VALUES = {
-  NO_SCHEDULE:        'NoSchedule',
-  PREFER_NO_SCHEDULE: 'PreferNoSchedule',
-  NO_EXECUTE:         'NoExecute',
+const DEFAULT_EFFECT_VALUES = {
+  NoSchedule:       'NoSchedule',
+  PreferNoSchedule: 'PreferNoSchedule',
+  NoExecute:        'NoExecute',
 };
 
 export default {
@@ -24,11 +24,15 @@ export default {
     disabled: {
       default: false,
       type:    Boolean
+    },
+    effectValues: {
+      type:    Object,
+      default: () => DEFAULT_EFFECT_VALUES
     }
   },
 
   data() {
-    return { effectOptions: Object.values(EFFECT_VALUES).map((v) => ({ label: v, value: v })) };
+    return { effectOptions: Object.keys(this.effectValues).map((k) => ({ label: this.effectValues[k], value: k })) };
   },
 
   computed: {
@@ -43,7 +47,7 @@ export default {
     },
 
     defaultAddData() {
-      return { effect: EFFECT_VALUES.NO_SCHEDULE };
+      return { effect: this.effectOptions[0].value };
     }
   }
 };
@@ -53,6 +57,7 @@ export default {
   <div class="taints">
     <KeyValue
       v-model="localValue"
+      data-testid="taints-keyvalue"
       :title="t('tableHeaders.taints')"
       :mode="mode"
       :as-map="false"
@@ -69,9 +74,10 @@ export default {
         {{ t('tableHeaders.effect') }}
       </template>
 
-      <template #col:effect="{row, queueUpdate}">
+      <template #col:effect="{row, queueUpdate, i}">
         <Select
           v-model="row.effect"
+          :data-testid="`taints-effect-row-${i}`"
           :options="effectOptions"
           :disabled="disabled"
           class="compact-select"

package/components/form/__tests__/Taints.test.ts

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import Taints from '@shell/components/form/Taints.vue';
+
+describe('component: Taints', () => {
+  it('should accept custom effect values', async() => {
+    const customEffects = { FOO_EFFECT: 'foo', BAR_EFFECT: 'bar' };
+
+    const wrapper = mount(Taints, {
+      propsData: {
+        value:        [{ effect: 'FOO_EFFECT', value: 'abc' }],
+        effectValues: customEffects
+      }
+    });
+
+    const firstEffectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
+
+    expect(firstEffectInput.exists()).toBe(true);
+
+    expect(firstEffectInput.props().value).toBe('FOO_EFFECT');
+    expect(firstEffectInput.props().options).toStrictEqual([{ value: 'FOO_EFFECT', label: 'foo' }, { value: 'BAR_EFFECT', label: 'bar' }]);
+
+    const taintKV = wrapper.find('[data-testid="taints-keyvalue"]');
+
+    taintKV.vm.add();
+    await wrapper.vm.$nextTick();
+
+    const secondEffectInput = wrapper.find('[data-testid="taints-effect-row-1"]');
+
+    expect(secondEffectInput.exists()).toBe(true);
+
+    expect(secondEffectInput.props().value).toStrictEqual('FOO_EFFECT');
+    expect(wrapper.vm.defaultAddData).toStrictEqual({ effect: 'FOO_EFFECT' });
+  });
+
+  it('should use default effect values of NoSchedule, PreferNoSchedule, and PreferNoExecute', async() => {
+    const expectedEffectOptions = [
+      { label: 'NoSchedule', value: 'NoSchedule' },
+      { label: 'PreferNoSchedule', value: 'PreferNoSchedule' },
+
+      { label: 'NoExecute', value: 'NoExecute' },
+
+    ];
+
+    const wrapper = mount(Taints, { propsData: { value: [{ effect: '', value: 'abc' }] } });
+
+    const firstEffectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
+
+    expect(firstEffectInput.exists()).toBe(true);
+
+    expect(firstEffectInput.props().value).toBe('');
+    expect(firstEffectInput.props().options).toStrictEqual(expectedEffectOptions);
+  });
+
+  it('should set the effect value to NoSchedule by default', async() => {
+    const wrapper = mount(Taints, { propsData: { value: [] } });
+
+    const taintKV = wrapper.find('[data-testid="taints-keyvalue"]');
+
+    taintKV.vm.add();
+    await wrapper.vm.$nextTick();
+
+    const effectInput = wrapper.find('[data-testid="taints-effect-row-0"]');
+
+    expect(effectInput.exists()).toBe(true);
+
+    expect(effectInput.props().value).toStrictEqual('NoSchedule');
+
+    expect(wrapper.vm.defaultAddData).toStrictEqual({ effect: 'NoSchedule' });
+  });
+});

package/components/nav/Header.vue

@@ -133,7 +133,7 @@ export default {
       // Don't show if the header is in 'simple' mode
       const notSimple = !this.simple;
       // One of these must be enabled, otherwise t here's no component to show
-      const validFilterSettings = this.currentProduct.showNamespaceFilter || this.currentProduct.showWorkspaceSwitcher;
+      const validFilterSettings = this.currentProduct?.showNamespaceFilter || this.currentProduct?.showWorkspaceSwitcher;
 
       return validClusterOrProduct && notSimple && validFilterSettings;
     },

package/components/nav/TopLevelMenu.vue

@@ -1090,7 +1090,7 @@ export default {
           }
         }
 
-        > i {
+        > i, > img {
           display: block;
           width: 42px;
           font-size: $icon-size;
@@ -1102,9 +1102,6 @@ export default {
           margin-right: 16px;
           fill: var(--link);
         }
-        img {
-          margin-right: 16px;
-        }
 
         &.router-link-active, &.active-menu-link {
           background: var(--primary-hover-bg);

package/config/product/auth.js

@@ -174,7 +174,7 @@ export function init(store) {
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/googleoauth`, 'auth/googleoauth');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/azuread`, 'auth/azuread');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/keycloakoidc`, 'auth/oidc');
-  componentForType(`${ MANAGEMENT.AUTH_CONFIG }/oidc`, 'auth/oidc');
+  componentForType(`${ MANAGEMENT.AUTH_CONFIG }/genericoidc`, 'auth/oidc');
 
   basicType([
     'config',

package/config/router/navigation-guards/i18n.js

@@ -0,0 +1,13 @@
+export function install(router, context) {
+  router.beforeEach((to, from, next) => loadI18n(to, from, next, context));
+}
+
+export async function loadI18n(to, from, next, { store }) {
+  try {
+    await store.dispatch('i18n/init');
+  } catch (e) {
+    console.error('Failed to initialize i18n', e); // eslint-disable-line no-console
+  }
+
+  next();
+}

package/config/router/navigation-guards/index.js

@@ -1,6 +1,7 @@
 import { install as installLoadInitialSettings } from '@shell/config/router/navigation-guards/load-initial-settings';
 import { install as installAttemptFirstLogin } from '@shell/config/router/navigation-guards/attempt-first-login';
 import { install as installAuthentication } from '@shell/config/router/navigation-guards/authentication';
+import { install as installI18N } from '@shell/config/router/navigation-guards/i18n';
 
 /**
  * Install our router navigation guards. i.e. router.beforeEach(), router.afterEach()
@@ -9,7 +10,7 @@ export function installNavigationGuards(router, context) {
   // NOTE: the order of the installation matters.
   // Be intentional when adding, removing or modifying the guards that are installed.
 
-  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication];
+  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication, installI18N];
 
   navigationGuardInstallers.forEach((installer) => installer(router, context));
 }

package/creators/app/app.package.json

@@ -8,6 +8,7 @@
   "dependencies": {},
   "resolutions": {
     "**/webpack": "4",
-    "@types/node": "^16"
+    "@types/node": "^16",
+    "glob": "7.2.3"
   }  
 }

package/detail/__tests__/provisioning.cattle.io.cluster.test.ts

@@ -73,5 +73,47 @@ describe('view: provisioning.cattle.io.cluster', () => {
 
       expect(wrapper.vm.showRegistration).toStrictEqual(false);
     });
+
+    it('should SHOW if custom/imported cluster and the cluster is active', async() => {
+      const value = {
+        isCustom:   true,
+        isImported: true,
+        mgmt:       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: true
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(true);
+    });
+
+    it('should NOT show if imported cluster and the cluster is active', async() => {
+      const value = {
+        isCustom:   false,
+        isImported: true,
+        mgmt:       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: true
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(false);
+    });
   });
 });

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

@@ -512,14 +512,14 @@ export default {
         return false;
       }
 
-      if ( this.value.isImported ) {
-        return !this.value.mgmt?.isReady && this.extDetailTabs.registration;
-      }
-
       if ( this.value.isCustom ) {
         return this.extDetailTabs.registration;
       }
 
+      if ( this.value.isImported ) {
+        return !this.value.mgmt?.isReady && this.extDetailTabs.registration;
+      }
+
       // Hosted kubernetes providers with private endpoints need the registration tab
       // https://github.com/rancher/dashboard/issues/6036
       // https://github.com/rancher/dashboard/issues/4545

package/dialog/DeactivateDriverDialog.vue

@@ -3,6 +3,8 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
 import { exceptionToErrorsArray } from '@shell/utils/error';
+import { resourceNames } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -12,20 +14,35 @@ export default {
   },
 
   props: {
-    url: {
-      type:    String,
-      default: null,
+    drivers: {
+      type:     Array,
+      required: true
     },
-    name: {
-      type:    String,
-      default: null,
+    driverType: {
+      type:     String,
+      required: true
     }
   },
 
   data() {
     return { errors: [] };
   },
+  computed: {
+    formattedText() {
+      const namesSliced = this.drivers.map((obj) => obj.nameDisplay).slice(0, 5);
+      const remaining = this.drivers.length - namesSliced.length;
+
+      const plusMore = this.t('drivers.deactivate.andOthers', { count: remaining });
+      const names = resourceNames(namesSliced, plusMore, this.t);
+      const count = remaining || namesSliced.length;
+      const warningDrivers = this.t('drivers.deactivate.warningDrivers', { names, count });
+
+      return this.t('drivers.deactivate.warning', { warningDrivers, count: namesSliced.length });
+    },
+    ...mapGetters({ t: 'i18n/t' }),
+  },
   methods: {
+    resourceNames,
     close(buttonDone) {
       if (buttonDone && typeof buttonDone === 'function') {
         buttonDone(true);
@@ -34,10 +51,12 @@ export default {
     },
     async apply(buttonDone) {
       try {
-        await this.$store.dispatch('rancher/request', {
-          url:    this.url,
-          method: 'post'
-        });
+        await Promise.all(this.drivers.map(
+          (driver) => this.$store.dispatch('rancher/request', {
+            url:    `v3/${ this.driverType }/${ escape(driver.id) }?action=deactivate`,
+            method: 'POST'
+          })
+        ));
 
         this.close(buttonDone);
       } catch (err) {
@@ -64,7 +83,7 @@ export default {
     <template #body>
       <div class="pl-10 pr-10">
         <div class="text info mb-10 mt-20">
-          <span v-clean-html="t('drivers.deactivate.warning', {name})" />
+          <span v-clean-html="formattedText" />
         </div>
         <Banner
           v-for="(err, i) in errors"

package/edit/auth/__tests__/oidc.test.ts

@@ -19,14 +19,14 @@ const validScope = 'openid profile email';
 
 const mockModel = {
   enabled:      false,
-  id:           'oidc',
+  id:           'genericoidc',
   rancherUrl:   validRancherUrl,
   issuer:       validIssuer,
   authEndpoint: validAuthEndpoint,
   scope:        validScope,
   clientId:     validClientId,
   clientSecret: validClientSecret,
-  type:         'oidcConfig',
+  type:         'genericOIDCConfig',
 };
 
 const mockedAuthConfigMixin = {

package/edit/token.vue

@@ -13,6 +13,7 @@ import Select from '@shell/components/form/Select';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { diffFrom } from '@shell/utils/time';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters } from '@shell/utils/cluster';
+import { SETTING } from '@shell/config/settings';
 
 export default {
   components: {
@@ -29,7 +30,7 @@ export default {
 
   data() {
     // Get the setting that defines the max token TTL allowed (in minutes)
-    const maxTTLSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, 'auth-token-max-ttl-minutes');
+    const maxTTLSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.AUTH_TOKEN_MAX_TTL_MINUTES);
     let maxTTL = 0;
 
     try {

package/initialize/entry-helpers.js

@@ -3,6 +3,7 @@ import { updatePageTitle } from '@shell/utils/title';
 import { getVendor } from '@shell/config/private-label';
 import middleware from '@shell/config/middleware.js';
 import { withQuery } from 'ufo';
+import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
 
 // Global variable used on mount, updated on route change and used in the render function
 let app;
@@ -196,23 +197,19 @@ async function render(to, from, next) {
 
   // If no Components matched, generate 404
   if (!Components.length) {
-    // Call the authenticated middleware. This used to attempt to load the error layout but because it was missing it would:
-    // 1. load the default layout instead
-    // 2. then call the authenticated middleware
-    // 3. Authenticated middleware would then load plugins and check to see if there was a valid route and navigate to that if it existed
-    // 4. This would allow harvester cluster pages to load on page reload
-    // We should really make authenticated middleware do less...
-    await callMiddleware.call(this, [{ options: { middleware: ['authenticated'] } }], app.context);
+    // Handle the loading of dynamic plugins (Harvester) because we only want to attempt to load those plugins and routes if we first couldn't find a page.
+    // We should probably get rid of this concept entirely and just load plugins at the start.
+    await app.context.store.dispatch('loadManagement');
+    const newLocation = await dynamicPluginLoader.check({ route: { path: window.location.pathname }, store: app.context.store });
 
-    // We used to have i18n middleware which was called each time we called middleware. This is also needed to support harvester because of the way harvester loads as outlined in the comment above
-    await this.$store.dispatch('i18n/init');
+    // If we have a new location, double check that it's actually valid
+    const resolvedRoute = newLocation?.path ? app.context.store.app.router.resolve({ path: newLocation.path.replace(/^\/{0,1}dashboard/, '') }) : null;
 
-    if (nextCalled) {
-      return;
+    if (resolvedRoute?.route.matched.length) {
+      // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
+      return next(resolvedRoute.resolved.path);
     }
 
-    // Show error page
-    // this.error({ statusCode: 404, message: 'This page could not be found' });
     errorRedirect(this, new Error('404: This page could not be found'));
 
     return next();

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

@@ -163,14 +163,16 @@ export default {
           const response = await this.$axios.get(url, { timeout: 5000 });
 
           if (response?.status === 200) {
-            this.rows = await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
+            await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
             btnCB(true);
             this.close();
             this.waiting = false;
           }
         } catch (e) {}
 
-        this.waitForBackend(btnCB, id);
+        if (this.waiting) {
+          this.waitForBackend(btnCB, id);
+        }
       }, 5000);
     },
 

package/middleware/authenticated.js

@@ -2,7 +2,6 @@ import { DEFAULT_WORKSPACE } from '@shell/config/types';
 import { applyProducts } from '@shell/store/type-map';
 import { ClusterNotFoundError, RedirectToError } from '@shell/utils/error';
 import { get } from '@shell/utils/object';
-import dynamicPluginLoader from '@shell/pkg/dynamic-plugin-loader';
 import { AFTER_LOGIN_ROUTE, WORKSPACE } from '@shell/store/prefs';
 import { BACK_TO } from '@shell/config/local-storage';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet.js';
@@ -107,24 +106,6 @@ export default async function({
       });
     }
 
-    if (!route.matched?.length) {
-      // If there are no matching routes we could be trying to nav to a page belonging to a dynamic plugin which needs loading
-      await Promise.all([
-        ...always,
-      ]);
-
-      // If a plugin claims the route and is loaded correctly we'll get a route back
-      const newLocation = await dynamicPluginLoader.check({ route, store });
-
-      // If we have a new location, double check that it's actually valid
-      const resolvedRoute = newLocation ? store.app.router.resolve(newLocation) : null;
-
-      if (resolvedRoute?.route.matched.length) {
-        // Note - don't use `redirect` or `store.app.route` (breaks feature by failing to run middleware in default layout)
-        return next(newLocation);
-      }
-    }
-
     // Ensure that the activeNamespaceCache is updated given the change of context either from or to a place where it uses workspaces
     // When fleet moves to it's own package this should be moved to pkg onEnter/onLeave
     if ((oldProduct === FLEET_NAME || product === FLEET_NAME) && oldProduct !== product) {

package/mixins/auth-config.js

@@ -273,7 +273,7 @@ export default {
 
         // KeyCloakOIDCConfig --> OIDCConfig
         set(this.model, 'rancherUrl', `${ serverUrl }/verify-auth`);
-        set(this.model, 'scope', BASE_SCOPES.oidc[0]);
+        set(this.model, 'scope', this.model.id === 'keycloakoidc' ? BASE_SCOPES.keycloakoidc[0] : BASE_SCOPES.genericoidc[0]);
         break;
       }
 

package/models/driver.js

@@ -1,6 +1,7 @@
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import NormanModel from '@shell/plugins/steve/norman-class';
 import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
+import capitalize from 'lodash/capitalize';
 
 export default class Driver extends NormanModel {
   get canViewYaml() {
@@ -20,12 +21,12 @@ export default class Driver extends NormanModel {
       }
     }
 
-    return KONTAINER_TO_DRIVER[this.id] || this.id;
+    return KONTAINER_TO_DRIVER[this.id] || this.name || this.id;
   }
 
   get nameDisplay() {
     const path = `cluster.provider.${ this.driverName }`;
-    const label = this.driverName || this.name || this.id;
+    const label = capitalize(this.driverName);
 
     return this.$rootGetters['i18n/withFallback'](path, label);
   }