@rancher/shell 0.1.1 → 0.1.2

package/models/provisioning.cattle.io.cluster.js

@@ -36,6 +36,17 @@ export default class ProvCluster extends SteveModel {
       },
     ].filter(x => !!x.content);
 
+    // RKE Template details
+    const rkeTemplate = this.rkeTemplate;
+
+    if (rkeTemplate) {
+      out.push({
+        label:     this.t('cluster.detail.rkeTemplate'),
+        formatter: 'RKETemplateName',
+        content:   rkeTemplate,
+      });
+    }
+
     if (!this.machineProvider) {
       out.splice(1, 1);
 
@@ -597,6 +608,62 @@ export default class ProvCluster extends SteveModel {
     return this._stateObj;
   }
 
+  get rkeTemplate() {
+    if (!this.isRke1 || !this.mgmt) {
+      // Not an RKE! cluster or no management cluster available
+      return false;
+    }
+
+    if (!this.mgmt.spec?.clusterTemplateRevisionName) {
+      // Cluster does not use an RKE template
+      return false;
+    }
+
+    const clusterTemplateName = this.mgmt.spec.clusterTemplateName.replace(':', '/');
+    const clusterTemplateRevisionName = this.mgmt.spec.clusterTemplateRevisionName.replace(':', '/');
+    const template = this.$rootGetters['management/all'](MANAGEMENT.RKE_TEMPLATE).find(t => t.id === clusterTemplateName);
+    const revision = this.$rootGetters['management/all'](MANAGEMENT.RKE_TEMPLATE_REVISION).find(t => t.spec.enabled && t.id === clusterTemplateRevisionName);
+
+    if (!template || !revision) {
+      return false;
+    }
+
+    return {
+      displayName: `${ template.spec?.displayName }/${ revision.spec?.displayName }`,
+      upgrade:     this.rkeTemplateUpgrade,
+      template,
+      revision,
+    };
+  }
+
+  get rkeTemplateUpgrade() {
+    if (!this.isRke1 || !this.mgmt) {
+      // Not an RKE! cluster or no management cluster available
+      return false;
+    }
+
+    if (!this.mgmt.spec?.clusterTemplateRevisionName) {
+      // Cluster does not use an RKE template
+      return false;
+    }
+
+    const clusterTemplateRevisionName = this.mgmt.spec.clusterTemplateRevisionName.replace(':', '/');
+
+    // Get all of the template revisions for this template
+    const revisions = this.$rootGetters['management/all'](MANAGEMENT.RKE_TEMPLATE_REVISION).filter(t => t.spec.enabled && t.spec.clusterTemplateName === this.mgmt.spec.clusterTemplateName);
+
+    if (revisions.length <= 1) {
+      // Only one template revision
+      return false;
+    }
+
+    revisions.sort((a, b) => {
+      return parseInt(a.metadata.resourceVersion, 10) - parseInt(b.metadata.resourceVersion, 10);
+    }).reverse();
+
+    return revisions[0].id !== clusterTemplateRevisionName ? revisions[0].spec?.displayName : false;
+  }
+
   get _stateObj() {
     if (!this.isRke2) {
       return this.mgmt?.stateObj || this.metadata?.state;

package/models/service.js

@@ -136,7 +136,11 @@ export default class extends SteveModel {
       let pods = [];
 
       if (podRelationship) {
-        pods = await this.$dispatch('cluster/findMatching', { type: POD, selector: podRelationship.selector }, { root: true });
+        pods = await this.$dispatch('cluster/findMatching', {
+          type:      POD,
+          selector:  podRelationship.selector,
+          namespace: this.namespace
+        }, { root: true });
       }
 
       return pods;

package/nuxt.config.js

@@ -305,8 +305,9 @@ export default function(dir, _appConfig) {
     },
 
     router: {
-      base:       routerBasePath,
-      middleware: ['i18n'],
+      base:          routerBasePath,
+      middleware:    ['i18n'],
+      prefetchLinks: false
     },
 
     alias: {
@@ -570,7 +571,6 @@ export default function(dir, _appConfig) {
       path.join(NUXT_SHELL, 'plugins/global-formatters'),
       path.join(NUXT_SHELL, 'plugins/trim-whitespace'),
       { src: path.join(NUXT_SHELL, 'plugins/extend-router') },
-      { src: path.join(NUXT_SHELL, 'plugins/lookup'), ssr: false },
       { src: path.join(NUXT_SHELL, 'plugins/console'), ssr: false },
       { src: path.join(NUXT_SHELL, 'plugins/int-number'), ssr: false },
       { src: path.join(NUXT_SHELL, 'plugins/nuxt-client-init'), ssr: false },

package/package.json

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

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

@@ -740,12 +740,6 @@ export default {
 
     window.scrollTop = 0;
 
-    // For easy access debugging...
-    if ( typeof window !== 'undefined' ) {
-      window.v = this.value;
-      window.c = this;
-    }
-
     this.preFormYamlOption = this.valuesComponent || this.hasQuestions ? VALUES_STATE.FORM : VALUES_STATE.YAML;
   },
 

package/plugins/console.js

@@ -1,12 +1,17 @@
 /* eslint-disable no-console */
-export default (context) => {
-  const logTypes = ['log', 'error', 'info', 'warn'];
+export default () => {
+  const logTypes = ['warn', 'error'];
   const MAX_LOGS_STORED = 400;
 
-  console.logLog = console.log.bind(console);
-  console.errorLog = console.error.bind(console);
-  console.infoLog = console.info.bind(console);
+  if (!process.env.dev) {
+    console.logLog = console.log.bind(console);
+    console.infoLog = console.info.bind(console);
+    logTypes.push('log');
+    logTypes.push('info');
+  }
+
   console.warnLog = console.warn.bind(console);
+  console.errorLog = console.error.bind(console);
   console.logs = [];
 
   logTypes.forEach((type) => {

package/plugins/dashboard-store/actions.js

@@ -319,7 +319,12 @@ export default {
     return all;
   },
 
-  async findMatching(ctx, { type, selector, opt }) {
+  async findMatching(ctx, {
+    type,
+    selector,
+    opt,
+    namespace
+  }) {
     const {
       getters, commit, dispatch, rootGetters
     } = ctx;
@@ -332,7 +337,7 @@ export default {
       commit('registerType', type);
     }
     if ( opt.force !== true && getters['haveSelector'](type, selector) ) {
-      return getters.matching( type, selector );
+      return getters.matching( type, selector, namespace );
     }
 
     const typeOptions = rootGetters['type-map/optionsFor'](type);
@@ -366,7 +371,7 @@ export default {
       });
     }
 
-    return getters.matching( type, selector );
+    return getters.matching( type, selector, namespace );
   },
 
   // opt:

package/plugins/dashboard-store/getters.js

@@ -25,8 +25,13 @@ export default {
     return state.types[type].list;
   },
 
-  matching: (state, getters) => (type, selector) => {
-    const all = getters['all'](type);
+  matching: (state, getters) => (type, selector, namespace) => {
+    let all = getters['all'](type);
+
+    // Filter first by namespace if one is provided, since this is efficient
+    if (namespace) {
+      all = all.filter(obj => obj.namespace === namespace);
+    }
 
     return all.filter((obj) => {
       return matches(obj, selector);

package/plugins/steve/steve-description-class.js

@@ -0,0 +1,32 @@
+import SteveModel from './steve-class';
+
+/**
+ * SteveModel that supports the description being in the root 'description' property.
+ */
+export default class SteveDescriptionModel extends SteveModel {
+  // Preserve description
+  constructor(data, ctx, rehydrateNamespace = null, setClone = false) {
+    const _description = data.description;
+
+    super(data, ctx, rehydrateNamespace, setClone);
+    this.description = _description;
+  }
+
+  get description() {
+    return this._description;
+  }
+
+  set description(value) {
+    this._description = value;
+  }
+
+  // Ensure when we clone that we preserve the desription
+  toJSON() {
+    const data = super.toJSON();
+
+    data.description = this.description;
+    delete data._description;
+
+    return data;
+  }
+}

package/rancher-components/Banner/Banner.vue

@@ -131,8 +131,8 @@ export default Vue.extend({
     }
 
     &.secondary {
-      background: var(--secondary-banner-bg);
-      border-left: solid $left-border-size var(--secondary);
+      background: var(--default-banner-bg);
+      border-left: solid $left-border-size var(--default);
       color: var(--body-text);
     }
 

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,8 +1,6 @@
 
 import { mount } from '@vue/test-utils';
 import { LabeledInput } from './index';
-import Vue from 'vue';
-import Vuex from 'vuex';
 
 describe('component: LabeledInput', () => {
   it('should emit input only once', () => {

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

@@ -126,6 +126,8 @@ export default (
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip
       }
+
+      return undefined;
     },
 
     /**

package/rancher-components/Form/Radio/RadioButton.vue

@@ -88,7 +88,14 @@ export default Vue.extend({
     muteLabel(): boolean {
       // Don't mute the label if the mode is view and the button is checked
       return this.disabled && !(this.mode === _VIEW && this.isChecked);
-    }
+    },
+
+    /**
+     * Determines if the description slot is in use.
+     */
+    hasDescriptionSlot(): boolean {
+      return !!this.$slots.description;
+    },
   },
 
   watch: {
@@ -155,6 +162,12 @@ export default Vue.extend({
           {{ description }}
         </template>
       </div>
+      <div
+        v-else-if="hasDescriptionSlot"
+        class="radio-button-outer-container-description"
+      >
+        <slot name="description" />
+      </div>
     </div>
   </label>
 </template>

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.test.ts

@@ -0,0 +1,107 @@
+import { shallowMount } from '@vue/test-utils';
+import { ToggleSwitch } from './index';
+
+describe('ToggleSwitch.vue', () => {
+  it('renders falsy by default', () => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    expect(toggleInput.checked).toBeFalsy();
+  });
+
+  it('renders a true value', () => {
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          value: true
+        }
+      });
+
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    expect(toggleInput.checked).toBe(true);
+  });
+
+  it('updates from falsy to truthy when props change', async () => {
+    const wrapper = shallowMount(ToggleSwitch);
+  
+    const toggleInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement
+
+    expect(toggleInput.checked).toBe(false);
+
+    await wrapper.setProps({ value: true });
+  
+    expect(toggleInput.checked).toBe(true);
+  });
+
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    (wrapper.vm as any).toggle(true);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+
+  });
+
+  it('emits an input event with a false value', async () => {
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          value: true
+        }
+      }
+    );
+
+    (wrapper.vm as any).toggle(false);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(false);
+  })
+
+  it('emits an input event with a custom onValue', async () => {
+    const onValue = 'THE TRUTH';
+
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          onValue,
+        }
+      });
+
+    (wrapper.vm as any).toggle(true);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(onValue);
+  });
+
+  it('emits an input event with a custom offValue', async () => {
+    const offValue = 'NOT THE TRUTH';
+
+    const wrapper = shallowMount(
+      ToggleSwitch,
+      {
+        propsData: {
+          value: true,
+          offValue,
+        }
+      });
+
+    (wrapper.vm as any).toggle(false);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(offValue);
+  })
+});

package/{components/form → rancher-components/Form/ToggleSwitch}/ToggleSwitch.vue

@@ -1,18 +1,19 @@
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
   props: {
     value: {
-      type:    null,
+      type:    [Boolean, String, Number],
       default: false
     },
 
     offValue: {
-      type:    null,
+      type:    [Boolean, String, Number],
       default: false,
     },
 
     onValue: {
-      type:    null,
+      type:    [Boolean, String, Number],
       default: true,
     },
 
@@ -27,16 +28,25 @@ export default {
     },
   },
   data() {
-    return { state: this.value === this.onValue };
+    return { state: false as boolean | string | number };
   },
 
   methods: {
-    toggle(neu) {
+    toggle(neu: boolean | string | number) {
       this.state = neu === null ? !this.state : neu;
       this.$emit('input', this.state ? this.onValue : this.offValue);
     }
+  },
+
+  watch: {
+    value: {
+      handler() {
+        this.state = this.value === this.onValue;
+      },
+      immediate: true
+    }
   }
-};
+});
 </script>
 
 <template>

package/rancher-components/Form/ToggleSwitch/index.ts

@@ -0,0 +1 @@
+export { default as ToggleSwitch } from './ToggleSwitch.vue';

package/rancher-components/Form/index.ts

@@ -2,3 +2,4 @@ export * from './Checkbox';
 export * from './LabeledInput';
 export * from './Radio';
 export * from './TextArea';
+export * from './ToggleSwitch';

package/scripts/test-plugins-build.sh

@@ -42,6 +42,12 @@ if [ $SKIP_SETUP == "false" ]; then
     sleep 10
 
     echo "Configuring Verdaccio user"
+
+    # Remove existing admin if already there
+    if [ -f ~/.config/verdaccio/htpasswd ]; then
+      sed -i '/^admin:/d' ~/.config/verdaccio/htpasswd
+    fi
+
     curl -XPUT -H "Content-type: application/json" -d '{ "name": "admin", "password": "admin" }' 'http://localhost:4873/-/user/admin' > login.json
     TOKEN=$(jq -r .token login.json)
     rm login.json
@@ -54,9 +60,20 @@ EOF
   fi
 fi
 
-rm -rf ~/.local/share/verdaccio/storage/@rancher/*
+if [ -d ~/.local/share/verdaccio/storage/@rancher ]; then 
+  rm -rf ~/.local/share/verdaccio/storage/@rancher/*
+else
+  rm -rf ~/.config/verdaccio/storage/@rancher/*
+fi
 
 export YARN_REGISTRY=http://localhost:4873
+export NEXT_TELEMETRY_DISABLED=1
+
+# We need to patch the version number of the shell, otherwise if we are running
+# with the currently published version, things will fail as those versions
+# are already published and Verdaccio will check, since it is a read-through cache
+sed -i.bak -e "s/\"version\": \"[0-9]*.[0-9]*.[0-9]*\",/\"version\": \"7.7.7\",/g" ${SHELL_DIR}/package.json
+rm ${SHELL_DIR}/package.json.bak
 
 # Publish shell
 echo "Publishing shell packages to local registry"

package/plugins/lookup.js

@@ -1,50 +0,0 @@
-import { get, set } from '@shell/utils/object';
-import $ from 'jquery';
-
-const DEFAULT_NS = 'cluster';
-
-export default (context) => {
-  window.$ = $;
-  window.get = get;
-  window.set = set;
-
-  window.s = context.store;
-
-  window.schemaName = (type, namespace = DEFAULT_NS) => {
-    return context.store.getters[`${ namespace }/schemaName`](type);
-  };
-
-  window.schemaFor = (type, namespace = DEFAULT_NS) => {
-    return context.store.getters[`${ namespace }/schemaFor`](type, true);
-  };
-
-  window.all = (type, namespace = DEFAULT_NS) => {
-    const realType = window.schemaName(type, namespace);
-
-    return context.store.getters[`${ namespace }/all`](realType);
-  };
-
-  window.byId = (type, id, namespace = DEFAULT_NS) => {
-    const realType = window.schemaName(type, namespace);
-
-    return context.store.getters[`${ namespace }/byId`](realType, id);
-  };
-
-  window.find = (type, id, namespace = DEFAULT_NS) => {
-    const realType = window.schemaName(type, namespace);
-
-    return context.store.dispatch(`${ namespace }/find`, {
-      type: realType,
-      id
-    });
-  };
-
-  window.findAll = (type, namespace = DEFAULT_NS) => {
-    const realType = window.schemaName(type, namespace);
-
-    return context.store.dispatch(`${ namespace }/findAll`, { type: realType });
-  };
-
-  console.log('# Welcome to warp zone'); // eslint-disable-line no-console
-  console.log("# Try schemaFor('pod'), schemaName('pod'), all('pod'), byId('pod','abc'), await find('pod','abc'), await findAll('pod')"); // eslint-disable-line no-console
-};