@rancher/shell 0.3.22 → 0.3.24

package/initialize/client.js

@@ -1,3 +1,5 @@
+// Taken from @nuxt/vue-app/template/client.js
+
 import Vue from 'vue';
 import fetch from 'unfetch';
 import middleware from '../config/middleware.js';
@@ -21,6 +23,10 @@ import { createApp, NuxtError } from './index.js';
 import fetchMixin from '../mixins/fetch.client';
 import NuxtLink from '../components/nuxt/nuxt-link.client.js'; // should be included after ./index.js
 
+// Mimic old @nuxt/vue-app/template/client.js
+const isDev = process.env.dev;
+const debug = isDev;
+
 // Fetch mixin
 if (!Vue.__nuxt__fetch__mixin__) {
   Vue.mixin(fetchMixin);
@@ -51,69 +57,71 @@ if ($config._app) {
 
 Object.assign(Vue.config, { silent: false, performance: true });
 
-const logs = NUXT.logs || [];
+if (debug) {
+  const logs = NUXT.logs || [];
 
-if (logs.length > 0) {
-  const ssrLogStyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;';
+  if (logs.length > 0) {
+    const ssrLogStyle = 'background: #2E495E;border-radius: 0.5em;color: white;font-weight: bold;padding: 2px 0.5em;';
 
-  console.group && console.group('%cNuxt SSR', ssrLogStyle); // eslint-disable-line no-console
-  logs.forEach((logObj) => (console[logObj.type] || console.log)(...logObj.args)); // eslint-disable-line no-console
-  delete NUXT.logs;
-  console.groupEnd && console.groupEnd(); // eslint-disable-line no-console
-}
+    console.group && console.group('%cNuxt SSR', ssrLogStyle); // eslint-disable-line no-console
+    logs.forEach((logObj) => (console[logObj.type] || console.log)(...logObj.args)); // eslint-disable-line no-console
+    delete NUXT.logs;
+    console.groupEnd && console.groupEnd(); // eslint-disable-line no-console
+  }
 
-// Setup global Vue error handler
-if (!Vue.config.$nuxt) {
-  const defaultErrorHandler = Vue.config.errorHandler;
+  // Setup global Vue error handler
+  if (!Vue.config.$nuxt) {
+    const defaultErrorHandler = Vue.config.errorHandler;
 
-  Vue.config.errorHandler = async(err, vm, info, ...rest) => {
+    Vue.config.errorHandler = async(err, vm, info, ...rest) => {
     // Call other handler if exist
-    let handled = null;
+      let handled = null;
 
-    if (typeof defaultErrorHandler === 'function') {
-      handled = defaultErrorHandler(err, vm, info, ...rest);
-    }
-    if (handled === true) {
-      return handled;
-    }
+      if (typeof defaultErrorHandler === 'function') {
+        handled = defaultErrorHandler(err, vm, info, ...rest);
+      }
+      if (handled === true) {
+        return handled;
+      }
 
-    if (vm && vm.$root) {
-      const nuxtApp = Object.keys(Vue.config.$nuxt)
-        .find((nuxtInstance) => vm.$root[nuxtInstance]);
+      if (vm && vm.$root) {
+        const nuxtApp = Object.keys(Vue.config.$nuxt)
+          .find((nuxtInstance) => vm.$root[nuxtInstance]);
 
-      // Show Nuxt Error Page
-      if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
-        const currentApp = vm.$root[nuxtApp];
+        // Show Nuxt Error Page
+        if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
+          const currentApp = vm.$root[nuxtApp];
 
-        // Load error layout
-        let layout = (NuxtError.options || NuxtError).layout;
+          // Load error layout
+          let layout = (NuxtError.options || NuxtError).layout;
 
-        if (typeof layout === 'function') {
-          layout = layout(currentApp.context);
-        }
-        if (layout) {
-          await currentApp.loadLayout(layout).catch(() => {});
-        }
-        currentApp.setLayout(layout);
+          if (typeof layout === 'function') {
+            layout = layout(currentApp.context);
+          }
+          if (layout) {
+            await currentApp.loadLayout(layout).catch(() => {});
+          }
+          currentApp.setLayout(layout);
 
-        currentApp.error(err);
+          currentApp.error(err);
+        }
       }
-    }
 
-    if (typeof defaultErrorHandler === 'function') {
-      return handled;
-    }
+      if (typeof defaultErrorHandler === 'function') {
+        return handled;
+      }
 
-    // Log to console
-    if (process.env.NODE_ENV !== 'production') {
-      console.error(err); // eslint-disable-line no-console
-    } else {
-      console.error(err.message || err); // eslint-disable-line no-console
-    }
-  };
-  Vue.config.$nuxt = {};
+      // Log to console
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(err); // eslint-disable-line no-console
+      } else {
+        console.error(err.message || err); // eslint-disable-line no-console
+      }
+    };
+    Vue.config.$nuxt = {};
+  }
+  Vue.config.$nuxt.$nuxt = true;
 }
-Vue.config.$nuxt.$nuxt = true;
 
 const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable-line no-console
 
@@ -623,7 +631,9 @@ function fixPrepatch(to, ___) {
     checkForErrors(this);
 
     // Hot reloading
-    setTimeout(() => hotReloadAPI(this), 100);
+    if (isDev) {
+      setTimeout(() => hotReloadAPI(this), 100);
+    }
   });
 }
 
@@ -794,8 +804,10 @@ async function mountApp(__app) {
       // Call window.{{globals.readyCallback}} callbacks
       nuxtReady(_app);
 
-      // Enable hot reloading
-      hotReloadAPI(_app);
+      if (isDev) {
+        // Enable hot reloading
+        hotReloadAPI(_app);
+      }
     });
   };
 

package/initialize/index.js

@@ -1,3 +1,5 @@
+// Taken from @nuxt/vue-app/template/index.js
+
 import Vue from 'vue';
 import Meta from 'vue-meta';
 import ClientOnly from 'vue-client-only';

package/layouts/default.vue

@@ -318,6 +318,14 @@ export default {
     overflow-y: auto;
     min-height: 0px;
 
+    &:has(.side-menu) {
+    padding-left: $app-bar-collapsed-width;
+
+    .overlay-content-mode {
+      left: calc(var(--nav-width) + $app-bar-collapsed-width);
+    }
+   }
+
     &.pin-right {
       grid-template-areas:
         "header  header  header"

package/machine-config/amazonec2.vue

@@ -303,6 +303,7 @@ export default {
     },
 
     'value.region'() {
+      this.updateNetwork();
       this.$fetch();
     },
 

package/mixins/fetch.client.js

@@ -75,9 +75,9 @@ async function $_fetch() { // eslint-disable-line camelcase
   try {
     await this.$options.fetch.call(this);
   } catch (err) {
-    if (process.dev) {
-      console.error('Error in fetch():', err); // eslint-disable-line no-console
-    }
+    // In most cases we don't handle errors at all in `fetch`es. Lets always log to help in production
+    console.error('Error in fetch():', err); // eslint-disable-line no-console
+
     error = normalizeError(err);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.22",
+  "version": "0.3.24",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/__tests__/prefs.test.ts

@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import Preferences from '@shell/pages/prefs.vue';
+import { shallowMount } from '@vue/test-utils';
 
 describe('page: prefs should', () => {
   it.each([

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

@@ -27,6 +27,7 @@ export default {
     <div>
       <a
         class="badge-install"
+        data-testid="add-custom-cluster-badge"
         @click="customBadgeDialog"
       >
         <i class="icon icon-cluster" />

package/pages/prefs.vue

@@ -8,9 +8,11 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import { Checkbox } from '@components/Form/Checkbox';
 import LandingPagePreference from '@shell/components/LandingPagePreference';
 import {
-  mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS,
+  mapPref, THEME, KEYMAP, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE,
   VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT, PLUGIN_DEVELOPER, SCALE_POOL_PROMPT
+  , MENU_MAX_CLUSTERS
 } from '@shell/store/prefs';
+
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { addObject } from '@shell/utils/array';
 import LocaleSelector from '@shell/components/LocaleSelector';
@@ -34,7 +36,6 @@ export default {
     perPage:           mapPref(ROWS_PER_PAGE),
     hideDesc:          mapPref(HIDE_DESC),
     showPreRelease:    mapPref(SHOW_PRE_RELEASE),
-    menuMaxClusters:   mapPref(MENU_MAX_CLUSTERS),
     pluginDeveloper:   mapPref(PLUGIN_DEVELOPER),
     scalingDownPrompt: mapPref(SCALE_POOL_PROMPT),
 
@@ -254,17 +255,6 @@ export default {
             placeholder="Select a row count"
           />
         </div>
-        <div class="col span-4">
-          <LabeledSelect
-            v-model.number="menuMaxClusters"
-            data-testid="prefs__displaySetting__menuMaxClusters"
-            :label="t('prefs.clusterToShow.label')"
-            :options="menuClusterOptions"
-            option-key="value"
-            option-label="label"
-            placeholder="Select a row count"
-          />
-        </div>
       </div>
     </div>
     <!-- Confirmation setting -->

package/plugins/dashboard-store/resource-class.js

@@ -1464,7 +1464,7 @@ export default class Resource {
   }
 
   async saveYaml(yaml) {
-    this._saveYaml(yaml);
+    await this._saveYaml(yaml);
   }
 
   async _saveYaml(yaml) {

package/public/index.html

@@ -13,8 +13,10 @@
     <div id="app">
         <script>
             (() => {
-                const isDark = document.cookie.includes('R_THEME=auto') ?
-                    // User selected automatic theme, so use pcs (set when ui previously loaded and is either os theme or time of day based
+                // Has the user chosen to auto detect the theme.... or if they haven't chosen anything.. --> check the auto-detected theme via R_PCS
+                // Otherwise check if they've specifically selected a theme --> R_THEME
+                const isDark = document.cookie.includes('R_THEME=auto') || !document.cookie.includes('R_THEME') ?
+                    // User selected automatic theme, so use PCS (set when ui previously loaded and is either os theme or time of day based)
                     document.cookie.includes('R_PCS=dark') :
                     // Otherwise user selected light/dark theme directly
                     document.cookie.includes('R_THEME=dark');

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -206,6 +206,13 @@ export default (
       }
     },
 
+    /**
+     * Emit on input change
+     */
+    onChange(event: Event): void {
+      this.$emit('change', event);
+    },
+
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
@@ -299,6 +306,7 @@ export default (
         @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
+        @change="onChange"
       >
     </slot>
 

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -4,7 +4,7 @@ import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
-    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
+    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' }, propsData: { val: {}, value: {} } });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
   });
@@ -14,7 +14,9 @@ describe('radioButton.vue', () => {
       RadioButton,
       {
         directives: { cleanHtmlDirective },
-        propsData:  { label: 'Test Label' }
+        propsData:  {
+          label: 'Test Label', val: {}, value: {}
+        }
       });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
@@ -23,7 +25,9 @@ describe('radioButton.vue', () => {
   it('renders slot contents when both slot and label prop are provided', () => {
     const wrapper = shallowMount(RadioButton, {
       slots:     { label: 'Test Label - Slot' },
-      propsData: { label: 'Test Label - Props' },
+      propsData: {
+        label: 'Test Label - Props', val: {}, value: {}
+      },
     });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');

package/store/prefs.js

@@ -1,7 +1,7 @@
-import Vue from 'vue';
+import { SETTING } from '@shell/config/settings';
 import { MANAGEMENT, STEVE } from '@shell/config/types';
 import { clone } from '@shell/utils/object';
-import { SETTING } from '@shell/config/settings';
+import Vue from 'vue';
 
 const definitions = {};
 /**
@@ -115,8 +115,7 @@ export const PROVISIONER = create('provisioner', _RKE2, { options: [_RKE1, _RKE2
 export const PSP_DEPRECATION_BANNER = create('hide-psp-deprecation-banner', false, { parseJSON });
 
 // Maximum number of clusters to show in the slide-in menu
-export const MENU_MAX_CLUSTERS = create('menu-max-clusters', 4, { options: [2, 3, 4, 5, 6, 7, 8, 9, 10], parseJSON });
-
+export const MENU_MAX_CLUSTERS = 10;
 // Prompt for confirm when scaling down node pool in GUI and save the pref
 export const SCALE_POOL_PROMPT = create('scale-pool-prompt', null, { parseJSON });
 // --------------------

package/store/type-map.js

@@ -593,18 +593,8 @@ export const getters = {
         }
 
         const label = typeObj.labelKey ? rootGetters['i18n/t'](typeObj.labelKey) || typeObj.label : typeObj.label;
-        const virtual = !!typeObj.virtual;
-        let icon = typeObj.icon;
 
-        if ( (!virtual || typeObj.isSpoofed ) && !icon ) {
-          if ( namespaced ) {
-            icon = 'folder';
-          } else {
-            icon = 'globe';
-          }
-        }
-
-        const labelDisplay = highlightLabel(label, icon, typeObj.count, typeObj.schema);
+        const labelDisplay = highlightLabel(label, typeObj.count, typeObj.schema);
 
         if ( !labelDisplay ) {
           // Search happens in highlight and returns null if not found
@@ -711,7 +701,7 @@ export const getters = {
         return group;
       }
 
-      function highlightLabel(original, icon, count, schema) {
+      function highlightLabel(original, count, schema) {
         let label = escapeHtml(original);
 
         if ( searchRegex ) {
@@ -735,10 +725,6 @@ export const getters = {
           }
         }
 
-        if ( icon ) {
-          label = `<i class="icon icon-fw icon-${ icon }"></i>${ label }`;
-        }
-
         return label;
       }
     };

package/types/shell/index.d.ts

@@ -2868,7 +2868,7 @@ export const _RKE1: "rke1";
 export const _RKE2: "rke2";
 export const PROVISIONER: any;
 export const PSP_DEPRECATION_BANNER: any;
-export const MENU_MAX_CLUSTERS: any;
+export const MENU_MAX_CLUSTERS: 10;
 export const SCALE_POOL_PROMPT: any;
 export function state(): {
     cookiesLoaded: boolean;
@@ -3376,6 +3376,12 @@ export function haveSetFavIcon(): boolean;
 export function setFavIcon(store: any): void;
 }
 
+// @shell/utils/formatter
+
+declare module '@shell/utils/formatter' {
+export function formatEncryptionSecretNames(secrets: any, chartNamespace: any): any;
+}
+
 // @shell/utils/grafana
 
 declare module '@shell/utils/grafana' {
@@ -3902,6 +3908,9 @@ export function splitObjectPath(path: any): any;
 export function joinObjectPath(ary: any): string;
 export function shortenedImage(image: any): any;
 export function isIpv4(ip: any): boolean;
+export function sanitizeKey(k: any): any;
+export function sanitizeValue(v: any): any;
+export function sanitizeIP(v: any): any;
 export namespace CHARSET {
     export { num as NUMERIC };
     export const NO_VOWELS: string;

package/utils/__tests__/formatter.test.ts

@@ -0,0 +1,77 @@
+import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+
+describe('formatter', () => {
+  const secrets = [
+    {
+      id:       'test5',
+      _type:    'Opaque',
+      data:     { hash: 'test5', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test5',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        }
+      }
+    },
+    {
+      id:       'test2',
+      _type:    'Opaque',
+      data:     { hash: 'test', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test2',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        }
+      }
+    },
+    {
+      id:       'test4',
+      _type:    'Opaque',
+      data:     { hash: 'test4' },
+      metadata: {
+        name:      'test4',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        }
+      }
+    },
+    {
+      id:       'test1',
+      _type:    'Custom',
+      data:     { hash: 'test1', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test1',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        },
+      }
+    },
+    {
+      id:       'test6',
+      _type:    'Opaque',
+      data:     { hash: 'test5', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test5',
+        namespace: 'test',
+        state:     {
+          error: true, message: 'Failed', name: 'active', transitioning: true
+        }
+      }
+    }];
+  const chart = 'test';
+
+  it.each([[chart, 2], ['test1', 0]])('should show correct number of secrets', (chartVal: string, result: number) => {
+    const res = formatEncryptionSecretNames(secrets, chartVal);
+
+    expect(res).toHaveLength(result);
+  });
+  it('should return correct results in a correct order', () => {
+    const res = formatEncryptionSecretNames(secrets, chart);
+
+    expect(res).toStrictEqual(['test2', 'test5']);
+  });
+});

package/utils/__tests__/sort.test.ts

@@ -0,0 +1,61 @@
+import { sortBy } from '@shell/utils/sort';
+
+describe('fx: sort', () => {
+  describe('sortBy', () => {
+    const testSortBy = <T = object[]>(ary: T[], key: string[], expected: T[], desc?: boolean) => {
+      const result = sortBy(ary, key, desc);
+
+      expect(result).toStrictEqual(expected);
+    };
+
+    it.each([
+      [[{ a: 1 }, { a: 9 }], ['a'], [{ a: 1 }, { a: 9 }]],
+      [[{ a: 2 }, { a: 1 }], ['a'], [{ a: 1 }, { a: 2 }]],
+    ])('should sort by single property', (ary, key, expected) => {
+      testSortBy(ary, key, expected);
+    });
+
+    it.each([
+      [[{ a: 1, b: 1 }, { a: 9, b: 9 }], ['a', 'b'], [{ a: 1, b: 1 }, { a: 9, b: 9 }]],
+      [[{ a: 2, b: 2 }, { a: 1, b: 1 }], ['a', 'b'], [{ a: 1, b: 1 }, { a: 2, b: 2 }]],
+      [[{ a: 2, b: 1 }, { a: 1, b: 9 }], ['a', 'b'], [{ a: 1, b: 9 }, { a: 2, b: 1 }]],
+      [[{ a: 1, b: 2 }, { a: 9, b: 1 }], ['a', 'b'], [{ a: 1, b: 2 }, { a: 9, b: 1 }]],
+      [[{ a: 1, b: 1 }, { a: 9, b: 9 }], ['a', 'b'], [{ a: 1, b: 1 }, { a: 9, b: 9 }]],
+    ])('should sort by two properties (primary property always first)', (ary, key, expected) => {
+      testSortBy(ary, key, expected);
+    });
+
+    it.each([
+      [[{ a: 1, b: 1 }, { a: 1, b: 9 }], ['a', 'b'], [{ a: 1, b: 1 }, { a: 1, b: 9 }]],
+      [[{ a: 1, b: 2 }, { a: 1, b: 1 }], ['a', 'b'], [{ a: 1, b: 1 }, { a: 1, b: 2 }]],
+    ])('should sort by two properties (primary property the same)', (ary, key, expected) => {
+      testSortBy(ary, key, expected);
+    });
+
+    describe('descending', () => {
+      it.each([
+        [[{ a: 1 }, { a: 9 }], ['a'], [{ a: 9 }, { a: 1 }]],
+        [[{ a: 2 }, { a: 1 }], ['a'], [{ a: 2 }, { a: 1 }]],
+      ])('should sort by single property', (ary, key, expected) => {
+        testSortBy(ary, key, expected, true);
+      });
+
+      it.each([
+        [[{ a: 1, b: 1 }, { a: 9, b: 9 }], ['a', 'b'], [{ a: 9, b: 9 }, { a: 1, b: 1 }]],
+        [[{ a: 2, b: 2 }, { a: 1, b: 1 }], ['a', 'b'], [{ a: 2, b: 2 }, { a: 1, b: 1 }]],
+        [[{ a: 2, b: 1 }, { a: 1, b: 9 }], ['a', 'b'], [{ a: 2, b: 1 }, { a: 1, b: 9 }]],
+        [[{ a: 1, b: 2 }, { a: 9, b: 1 }], ['a', 'b'], [{ a: 9, b: 1 }, { a: 1, b: 2 }]],
+        [[{ a: 1, b: 1 }, { a: 9, b: 9 }], ['a', 'b'], [{ a: 9, b: 9 }, { a: 1, b: 1 }]],
+      ])('should sort by two properties', (ary, key, expected) => {
+        testSortBy(ary, key, expected, true);
+      });
+
+      it.each([
+        [[{ a: 1, b: 1 }, { a: 1, b: 9 }], ['a', 'b'], [{ a: 1, b: 9 }, { a: 1, b: 1 }]],
+        [[{ a: 1, b: 2 }, { a: 1, b: 1 }], ['a', 'b'], [{ a: 1, b: 2 }, { a: 1, b: 1 }]],
+      ])('should sort by two properties (primary property the same)', (ary, key, expected) => {
+        testSortBy(ary, key, expected, true);
+      });
+    });
+  });
+});

package/utils/formatter.js

@@ -0,0 +1,11 @@
+
+import { SECRET_TYPES } from '@shell/config/secret';
+
+export function formatEncryptionSecretNames(secrets, chartNamespace) {
+  return secrets.filter(
+    (secret) => (secret.data || {})['encryption-provider-config.yaml'] &&
+      secret.metadata.namespace === chartNamespace &&
+      !secret.metadata?.state?.error &&
+      secret._type === SECRET_TYPES.OPAQUE
+  ).map((secret) => secret.metadata.name).sort();
+}

package/utils/string.js

@@ -309,3 +309,15 @@ export function isIpv4(ip) {
 
   return reg.test(ip);
 }
+
+export function sanitizeKey(k) {
+  return (k || '').replace(/[^a-z0-9./_-]/ig, '');
+}
+
+export function sanitizeValue(v) {
+  return (v || '').replace(/[^a-z0-9._-]/ig, '');
+}
+
+export function sanitizeIP(v) {
+  return (v || '').replace(/[^a-z0-9.:_-]/ig, '');
+}

package/vue.config.js

@@ -72,7 +72,9 @@ module.exports = function(dir, _appConfig) {
   ];
 
   if (instrumentCode) {
-    babelPlugins.push('babel-plugin-istanbul');
+    babelPlugins.push([
+      'babel-plugin-istanbul', { extension: ['.js', '.vue'] }, 'add-vue'
+    ]);
 
     console.warn('Instrumenting code for coverage'); // eslint-disable-line no-console
   }
@@ -248,10 +250,6 @@ module.exports = function(dir, _appConfig) {
     console.log(`Version: ${ dashboardVersion }`); // eslint-disable-line no-console
   }
 
-  if ( !dev ) {
-    console.log(`Version: ${ dashboardVersion }`); // eslint-disable-line no-console
-  }
-
   if ( resourceBase ) {
     console.log(`Resource Base URL: ${ resourceBase }`); // eslint-disable-line no-console
   }
@@ -408,6 +406,7 @@ module.exports = function(dir, _appConfig) {
           rancherEnv,
           dashboardVersion
         }),
+
       }));
 
       // The static assets need to be in the built assets directory in order to get served (primarily the favicon)
@@ -451,7 +450,9 @@ module.exports = function(dir, _appConfig) {
       ];
 
       if (instrumentCode) {
-        babelPlugins.push('babel-plugin-istanbul');
+        babelPlugins.push([
+          'babel-plugin-istanbul', { extension: ['.js', '.vue'] }, 'add-vue'
+        ]);
 
         console.warn('Instrumenting code for coverage'); // eslint-disable-line no-console
       }