@rancher/shell 0.3.5 → 0.3.6

package/{nuxt → initialize}/index.js

@@ -1,21 +1,20 @@
 import Vue from 'vue';
-import Vuex from 'vuex';
 import Meta from 'vue-meta';
 import ClientOnly from 'vue-client-only';
 import NoSsr from 'vue-no-ssr';
 import { createRouter } from '../config/router.js';
-import NuxtChild from './components/nuxt-child.js';
+import NuxtChild from '../components/nuxt/nuxt-child.js';
 import NuxtError from '../layouts/error.vue';
-import Nuxt from './components/nuxt.js';
+import Nuxt from '../components/nuxt/nuxt.js';
 import App from './App.js';
-import { setContext, getLocation, getRouteData, normalizeError } from './utils';
-import { createStore } from './store.js';
+import { setContext, getLocation, getRouteData, normalizeError } from '../utils/nuxt';
+import { createStore } from '../config/store.js';
 
 /* Plugins */
 
-import './portal-vue.js';
-import cookieUniversalNuxt from './cookie-universal-nuxt.js';
-import axios from './axios.js';
+import '../plugins/portal-vue.js';
+import cookieUniversalNuxt from '../utils/cookie-universal-nuxt.js';
+import axios from '../utils/axios.js';
 import plugins from '../core/plugins.js';
 import pluginsLoader from '../core/plugins-loader.js';
 import axiosShell from '../plugins/axios';
@@ -42,7 +41,7 @@ import backButton from '../plugins/back-button';
 import plugin from '../plugins/plugin';
 import codeMirror from '../plugins/codemirror-loader';
 import '../plugins/formatters';
-import version from  '../plugins/version';
+import version from '../plugins/version';
 import steveCreateWorker from '../plugins/steve-create-worker';
 
 // Component: <ClientOnly>
@@ -55,7 +54,7 @@ Vue.component(NoSsr.name, {
     if (process.client && !NoSsr._warned) {
       NoSsr._warned = true;
 
-      console.warn('<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead');
+      console.warn('<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead'); // eslint-disable-line no-console
     }
 
     return NoSsr.render(h, ctx);
@@ -92,16 +91,6 @@ const defaultTransition = {
   name: 'page', mode: 'out-in', appear: true, appearClass: 'appear', appearActiveClass: 'appear-active', appearToClass: 'appear-to'
 };
 
-const originalRegisterModule = Vuex.Store.prototype.registerModule;
-
-function registerModule(path, rawModule, options = {}) {
-  const preserveState = process.client && (
-    Array.isArray(path) ? !!path.reduce((namespacedState, path) => namespacedState && namespacedState[path], this.state) : path in this.state
-  );
-
-  return originalRegisterModule.call(this, path, rawModule, { preserveState, ...options });
-}
-
 async function createApp(ssrContext, config = {}) {
   const router = await createRouter(ssrContext, config);
 
@@ -115,7 +104,17 @@ async function createApp(ssrContext, config = {}) {
   // here we inject the router and store to all child components,
   // making them available everywhere as `this.$router` and `this.$store`.
   const app = {
-    head: {"title":"dashboard","meta":[{"charset":"utf-8"},{"name":"viewport","content":"width=device-width, initial-scale=1"},{"hid":"description","name":"description","content":"Rancher Dashboard"}],"link":[{"hid":"icon","rel":"icon","type":"image\u002Fx-icon","href":"\u002Ffavicon.png"}],"style":[],"script":[]},
+    head: {
+      title: 'dashboard',
+      meta:  [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, {
+        hid: 'description', name: 'description', content: 'Rancher Dashboard'
+      }],
+      link: [{
+        hid: 'icon', rel: 'icon', type: 'image\u002Fx-icon', href: '\u002Ffavicon.png'
+      }],
+      style:  [],
+      script: []
+    },
 
     store,
     router,
@@ -318,7 +317,7 @@ async function createApp(ssrContext, config = {}) {
   // Lock enablePreview in context
   if (process.static && process.client) {
     app.context.enablePreview = function() {
-      console.warn('You cannot call enablePreview() outside a plugin.');
+      console.warn('You cannot call enablePreview() outside a plugin.'); // eslint-disable-line no-console
     };
   }
 

package/layouts/standalone.vue

@@ -0,0 +1,13 @@
+<script>
+export default { middleware: ['unauthenticated'] };
+</script>
+
+<template>
+  <nuxt />
+</template>
+
+<style lang="scss">
+body, #__nuxt, #__layout {
+  height: 100%;
+}
+</style>

package/list/catalog.cattle.io.clusterrepo.vue

@@ -35,6 +35,7 @@ export default {
       :rows="rows"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      data-testid="app-cluster-repo-list"
     />
   </div>
 </template>

package/list/rbac.authorization.k8s.io.clusterrolebinding.vue

@@ -0,0 +1,48 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+
+export default {
+  name:       'ListNamespace',
+  components: { ResourceTable },
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+    schema: {
+      type:     Object,
+      required: true,
+    },
+    rows: {
+      type:     Array,
+      required: true,
+    },
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  $loadingResources() {
+    return { loadIndeterminate: true };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ResourceTable
+      v-bind="$attrs"
+      :rows="rows"
+      :groupable="false"
+      :schema="schema"
+      :loading="loading"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      v-on="$listeners"
+    />
+  </div>
+</template>

package/list/workload.vue

@@ -1,6 +1,8 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import { WORKLOAD_TYPES, SCHEMA, NODE, POD } from '@shell/config/types';
+import {
+  WORKLOAD_TYPES, SCHEMA, NODE, POD, LIST_WORKLOAD_TYPES
+} from '@shell/config/types';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 
 const schema = {
@@ -16,7 +18,7 @@ const schema = {
 const $loadingResources = ($route, $store) => {
   const allowedResources = [];
 
-  Object.values(WORKLOAD_TYPES).forEach((type) => {
+  Object.values(LIST_WORKLOAD_TYPES).forEach((type) => {
     // You may not have RBAC to see some of the types
     if ($store.getters['cluster/schemaFor'](type) ) {
       allowedResources.push(type);
@@ -134,8 +136,8 @@ export default {
       } else {
         const type = this.$route.params.resource;
 
-        if (type === WORKLOAD_TYPES.JOB) {
-          // Ignore job (we're fetching this anyway, plus they contain their own state)
+        if (type === WORKLOAD_TYPES.JOB || type === POD) {
+          // Ignore job and pods (we're fetching this anyway, plus they contain their own state)
           return;
         }
 

package/mixins/chart.js

@@ -14,6 +14,8 @@ import { CAPI, CATALOG } from '@shell/config/types';
 import { isPrerelease } from '@shell/utils/version';
 import difference from 'lodash/difference';
 import { LINUX } from '@shell/store/catalog';
+import { clone } from 'utils/object';
+import { merge } from 'lodash';
 
 export default {
   data() {
@@ -391,7 +393,6 @@ export default {
           */
 
         if ( provider ) {
-          // more.push(provider);
           try {
             const crdVersionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
               repoType:    provider.repoType,
@@ -399,6 +400,33 @@ export default {
               chartName:   provider.name,
               versionName: provider.version
             });
+            let existingCRDApp;
+
+            // search for an existing crd app to track any non-default values used on the previous install/upgrade
+            if (this.mode === _EDIT) {
+              const targetNamespace = crdVersionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE];
+              const targetName = crdVersionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.RELEASE_NAME];
+
+              if (targetName && targetNamespace) {
+                existingCRDApp = await this.$store.dispatch('cluster/find', {
+                  type: CATALOG.APP,
+                  id:   `${ targetNamespace }/${ targetName }`,
+                });
+              }
+            }
+            if (existingCRDApp) {
+              // spec.values are any non-default values the user configured
+              // the installation form should show these, as well as any default values from the chart
+              const existingValues = clone(existingCRDApp.spec?.values || {});
+              const defaultValues = clone(existingCRDApp.spec?.chart?.values || {});
+
+              crdVersionInfo.existingValues = existingValues;
+              crdVersionInfo.allValues = merge(defaultValues, existingValues);
+            } else {
+              // allValues will potentially be updated in the UI - we want to track this separately from values to avoid mutating the chart object in the store
+              // this is similar to userValues for the main chart
+              crdVersionInfo.allValues = clone(crdVersionInfo.values);
+            }
 
             out.push(crdVersionInfo);
           } catch (e) {

package/mixins/fetch.client.js

@@ -0,0 +1,95 @@
+import Vue from 'vue';
+import { hasFetch, normalizeError, addLifecycleHook } from '../utils/nuxt';
+
+const isSsrHydration = vm => vm.$vnode && vm.$vnode.elm && vm.$vnode.elm.dataset && vm.$vnode.elm.dataset.fetchKey;
+const nuxtState = window.__NUXT__;
+
+export default {
+  beforeCreate() {
+    if (!hasFetch(this)) {
+      return;
+    }
+
+    this._fetchDelay = typeof this.$options.fetchDelay === 'number' ? this.$options.fetchDelay : 200;
+
+    Vue.util.defineReactive(this, '$fetchState', {
+      pending:   false,
+      error:     null,
+      timestamp: Date.now()
+    });
+
+    this.$fetch = $fetch.bind(this);
+    addLifecycleHook(this, 'created', created);
+    addLifecycleHook(this, 'beforeMount', beforeMount);
+  }
+};
+
+function beforeMount() {
+  if (!this._hydrated) {
+    return this.$fetch();
+  }
+}
+
+function created() {
+  if (!isSsrHydration(this)) {
+    return;
+  }
+
+  // Hydrate component
+  this._hydrated = true;
+  this._fetchKey = this.$vnode.elm.dataset.fetchKey;
+  const data = nuxtState.fetch[this._fetchKey];
+
+  // If fetch error
+  if (data && data._error) {
+    this.$fetchState.error = data._error;
+
+    return;
+  }
+
+  // Merge data
+  for (const key in data) {
+    Vue.set(this.$data, key, data[key]);
+  }
+}
+
+function $fetch() {
+  if (!this._fetchPromise) {
+    this._fetchPromise = $_fetch.call(this)
+      .then(() => {
+        delete this._fetchPromise;
+      });
+  }
+
+  return this._fetchPromise;
+}
+
+async function $_fetch() { // eslint-disable-line camelcase
+  this.$nuxt.nbFetching++;
+  this.$fetchState.pending = true;
+  this.$fetchState.error = null;
+  this._hydrated = false;
+  let error = null;
+  const startTime = Date.now();
+
+  try {
+    await this.$options.fetch.call(this);
+  } catch (err) {
+    if (process.dev) {
+      console.error('Error in fetch():', err); // eslint-disable-line no-console
+    }
+    error = normalizeError(err);
+  }
+
+  const delayLeft = this._fetchDelay - (Date.now() - startTime);
+
+  if (delayLeft > 0) {
+    await new Promise(resolve => setTimeout(resolve, delayLeft));
+  }
+
+  this.$fetchState.error = error;
+  this.$fetchState.pending = false;
+  this.$fetchState.timestamp = Date.now();
+
+  this.$nextTick(() => this.$nuxt.nbFetching--);
+}

package/{nuxt/mixins → mixins}/fetch.server.js

@@ -1,69 +1,73 @@
-import Vue from 'vue'
-import { hasFetch, normalizeError, addLifecycleHook, purifyData, createGetCounter } from '../utils'
+import Vue from 'vue';
+import {
+  hasFetch, normalizeError, addLifecycleHook, purifyData, createGetCounter
+} from '../../utils/nuxt';
 
 async function serverPrefetch() {
   if (!this._fetchOnServer) {
-    return
+    return;
   }
 
   // Call and await on $fetch
   try {
-    await this.$options.fetch.call(this)
+    await this.$options.fetch.call(this);
   } catch (err) {
     if (process.dev) {
-      console.error('Error in fetch():', err)
+      console.error('Error in fetch():', err); // eslint-disable-line no-console
     }
-    this.$fetchState.error = normalizeError(err)
+    this.$fetchState.error = normalizeError(err);
   }
-  this.$fetchState.pending = false
+  this.$fetchState.pending = false;
 
   // Define an ssrKey for hydration
-  this._fetchKey = this._fetchKey || this.$ssrContext.fetchCounters['']++
+  this._fetchKey = this._fetchKey || this.$ssrContext.fetchCounters['']++;
 
   // Add data-fetch-key on parent element of Component
-  const attrs = this.$vnode.data.attrs = this.$vnode.data.attrs || {}
-  attrs['data-fetch-key'] = this._fetchKey
+  const attrs = this.$vnode.data.attrs = this.$vnode.data.attrs || {};
+
+  attrs['data-fetch-key'] = this._fetchKey;
 
   // Add to ssrContext for window.__NUXT__.fetch
 
   if (this.$ssrContext.nuxt.fetch[this._fetchKey] !== undefined) {
-    console.warn(`Duplicate fetch key detected (${this._fetchKey}). This may lead to unexpected results.`)
+    console.warn(`Duplicate fetch key detected (${ this._fetchKey }). This may lead to unexpected results.`); // eslint-disable-line no-console
   }
 
   this.$ssrContext.nuxt.fetch[this._fetchKey] =
-    this.$fetchState.error ? { _error: this.$fetchState.error } : purifyData(this._data)
+    this.$fetchState.error ? { _error: this.$fetchState.error } : purifyData(this._data);
 }
 
 export default {
   created() {
     if (!hasFetch(this)) {
-      return
+      return;
     }
 
     if (typeof this.$options.fetchOnServer === 'function') {
-      this._fetchOnServer = this.$options.fetchOnServer.call(this) !== false
+      this._fetchOnServer = this.$options.fetchOnServer.call(this) !== false;
     } else {
-      this._fetchOnServer = this.$options.fetchOnServer !== false
+      this._fetchOnServer = this.$options.fetchOnServer !== false;
     }
 
-    const defaultKey = this.$options._scopeId || this.$options.name || ''
-    const getCounter = createGetCounter(this.$ssrContext.fetchCounters, defaultKey)
+    const defaultKey = this.$options._scopeId || this.$options.name || '';
+    const getCounter = createGetCounter(this.$ssrContext.fetchCounters, defaultKey);
 
     if (typeof this.$options.fetchKey === 'function') {
-      this._fetchKey = this.$options.fetchKey.call(this, getCounter)
+      this._fetchKey = this.$options.fetchKey.call(this, getCounter);
     } else {
-      const key = 'string' === typeof this.$options.fetchKey ? this.$options.fetchKey : defaultKey
-      this._fetchKey = key ? key + ':' + getCounter(key) : String(getCounter(key))
+      const key = typeof this.$options.fetchKey === 'string' ? this.$options.fetchKey : defaultKey;
+
+      this._fetchKey = key ? `${ key }:${ getCounter(key) }` : String(getCounter(key));
     }
 
     // Added for remove vue undefined warning while ssr
-    this.$fetch = () => {} // issue #8043
+    this.$fetch = () => {}; // issue #8043
     Vue.util.defineReactive(this, '$fetchState', {
-      pending: true,
-      error: null,
+      pending:   true,
+      error:     null,
       timestamp: Date.now()
-    })
+    });
 
-    addLifecycleHook(this, 'serverPrefetch', serverPrefetch)
+    addLifecycleHook(this, 'serverPrefetch', serverPrefetch);
   }
-}
+};

package/mixins/labeled-form-element.ts

@@ -122,7 +122,7 @@ export default Vue.extend({
     },
     validationMessage(): string | undefined {
       // we want to grab the required rule passed in if we can but if it's not there then we can just grab it from the formRulesGenerator
-      const requiredRule = this.rules.find((rule: any) => rule?.name === 'required');
+      const requiredRule = this.rules.find((rule: any) => rule?.name === 'required') as Function;
       const ruleMessages = [];
       const value = this?.value;
 
@@ -134,7 +134,7 @@ export default Vue.extend({
         }
       }
 
-      for (const rule of this.rules) {
+      for (const rule of this.rules as Function[]) {
         const message = rule(value);
 
         if (!!message && rule.name !== 'required') { // we're catching 'required' above so we can ignore it here

package/models/constraints.gatekeeper.sh.constraint.js

@@ -1,5 +1,6 @@
 import jsyaml from 'js-yaml';
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { downloadFile } from '@shell/utils/download';
 
 export const ENFORCEMENT_ACTION_VALUES = {
   DENY:   'deny',
@@ -7,6 +8,23 @@ export const ENFORCEMENT_ACTION_VALUES = {
 };
 
 export default class GateKeeperConstraint extends SteveModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    const t = this.$rootGetters['i18n/t'];
+
+    const downloadViolations = {
+      action: 'downloadViolations',
+      icon:   'icon icon-fw icon-download',
+      label:  t('gatekeeperConstraint.downloadViolations'),
+      total:  1,
+    };
+
+    out.unshift(downloadViolations);
+
+    return out;
+  }
+
   async save() {
     let constraint;
     let resourceVersion;
@@ -27,6 +45,25 @@ export default class GateKeeperConstraint extends SteveModel {
     await constraint.save();
   }
 
+  async downloadViolations() {
+    const Papa = await import(/* webpackChunkName: "csv" */'papaparse');
+
+    try {
+      const violations = (this.violations || []).map((violation) => {
+        delete violation.resourceLink;
+        delete violation.constraintLink;
+
+        return violation;
+      });
+
+      const csv = Papa.unparse(violations);
+
+      downloadFile(`violations-${ this.name }.csv`, csv, 'application/csv');
+    } catch (err) {
+      this.$dispatch('growl/fromError', { title: 'Error downloading file', err }, { root: true });
+    }
+  }
+
   cleanForNew() {
     this.$dispatch(`cleanForNew`, this);
 

package/models/pod.js

@@ -129,6 +129,10 @@ export default class Pod extends WorkloadService {
     return workloads[0];
   }
 
+  get ownedByWorkload() {
+    return !!this.workloadRef;
+  }
+
   get details() {
     const out = [
       {

package/models/rbac.authorization.k8s.io.clusterrolebinding.js

@@ -0,0 +1,16 @@
+import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { GROUP, SERVICE_ACCOUNT, USER } from '@shell/config/types';
+
+export default class ClusterRoleBinding extends HybridModel {
+  get users() {
+    return this.subjects?.filter(({ kind }) => kind?.toLowerCase() === USER);
+  }
+
+  get serviceAccounts() {
+    return this.subjects?.filter(({ kind }) => kind?.toLowerCase() === SERVICE_ACCOUNT);
+  }
+
+  get groups() {
+    return this.subjects?.filter(({ kind }) => kind?.toLowerCase() === GROUP);
+  }
+}

package/models/rbac.authorization.k8s.io.rolebinding.js

@@ -0,0 +1,16 @@
+import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { GROUP, SERVICE_ACCOUNT, USER } from '@shell/config/types';
+
+export default class RoleBinding extends HybridModel {
+  get users() {
+    return this.subjects.filter(({ kind }) => kind?.toLowerCase() === USER);
+  }
+
+  get serviceAccounts() {
+    return this.subjects.filter(({ kind }) => kind?.toLowerCase() === SERVICE_ACCOUNT);
+  }
+
+  get groups() {
+    return this.subjects.filter(({ kind }) => kind?.toLowerCase() === GROUP);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -36,21 +36,17 @@
     "@babel/preset-typescript": "7.16.7",
     "@innologica/vue-dropdown-menu": "0.1.3",
     "@novnc/novnc": "1.2.0",
-    "@nuxt/types": "2.14.6",
     "@nuxt/typescript-build": "2.1.0",
     "@nuxtjs/axios": "5.12.0",
     "@nuxtjs/eslint-config-typescript": "6.0.1",
-    "@nuxtjs/eslint-module": "1.2.0",
-    "@nuxtjs/proxy": "1.3.3",
-    "@nuxtjs/style-resources": "1.2.1",
     "@nuxtjs/webpack-profile": "0.1.0",
     "@popperjs/core": "2.4.4",
     "@types/node": "16.4.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vue/cli-plugin-babel": "4.5.15",
-    "@vue/cli-plugin-typescript": "4.5.15",
-    "@vue/cli-service": "4.5.15",
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18",
+    "@vue/cli-service": "4.5.18",
     "@vue/test-utils": "1.2.1",
     "@vue/vue2-jest": "27.0.0",
     "add": "2.0.6",
@@ -82,7 +78,7 @@
     "eslint-plugin-import": "2.23.4",
     "eslint-plugin-jest": "24.4.0",
     "eslint-plugin-n": "15.2.0",
-    "eslint-plugin-vue": "7.14.0",
+    "eslint-plugin-vue": "9.10.0",
     "event-target-shim": "5.0.1",
     "express": "4.17.1",
     "file-saver": "2.0.2",
@@ -109,7 +105,7 @@
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
     "portal-vue": "2.1.7",
-    "rancher-icons": "rancher/icons#v2.0.13",
+    "rancher-icons": "rancher/icons#v2.0.14",
     "require-extension-hooks": "0.3.3",
     "require-extension-hooks-babel": "1.0.0",
     "require-extension-hooks-vue": "3.0.0",
@@ -125,15 +121,15 @@
     "typescript": "4.1.6",
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
-    "vue": "2.6.14",
+    "vue": "2.7.14",
     "vue-clipboard2": "0.3.1",
     "vue-codemirror": "4.0.6",
     "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",
     "vue-select": "3.18.3",
-    "vue-server-renderer": "2.6.14",
+    "vue-server-renderer": "2.7.14",
     "vue-shortkey": "3.1.7",
-    "vue-template-compiler": "2.6.14",
+    "vue-template-compiler": "2.7.14",
     "vue-virtual-scroll-list": "^2.3.4",
     "vue2-transitions": "0.3.0",
     "vuedraggable": "2.24.3",