@rancher/shell 0.1.0 → 0.1.1

package/pages/prefs.vue

@@ -4,7 +4,7 @@ import { mapGetters } from 'vuex';
 import BackLink from '@shell/components/BackLink';
 import BackRoute from '@shell/mixins/back-link';
 import ButtonGroup from '@shell/components/ButtonGroup';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import LandingPagePreference from '@shell/components/LandingPagePreference';
 import {
   mapPref, THEME, KEYMAP, DEV, DATE_FORMAT, TIME_FORMAT, ROWS_PER_PAGE, HIDE_DESC, SHOW_PRE_RELEASE, MENU_MAX_CLUSTERS
@@ -203,14 +203,22 @@ export default {
 
     <hr />
     <div class="row">
-      <div class="col span-8">
-        <h4 v-t="'prefs.keymap.label'" />
-        <ButtonGroup v-model="keymap" :options="keymapOptions" />
-      </div>
-      <div class="col span-4">
+      <div class="col prefs-advanced">
         <h4 v-t="'prefs.advanced'" />
         <Checkbox v-model="dev" :label="t('prefs.dev.label', {}, true)" />
-        <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" />
+        <p class="wrap-text">
+          {{ t('prefs.advancedTooltip', {}, raw=true) }}
+        </p>
+        <br>
+        <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" class="mt-10" />
+      </div>
+    </div>
+
+    <hr />
+    <div class="row">
+      <div class="col span-12">
+        <h4 v-t="'prefs.keymap.label'" />
+        <ButtonGroup v-model="keymap" :options="keymapOptions" />
       </div>
     </div>
 
@@ -230,4 +238,9 @@ export default {
   hr {
     margin: 20px 0;
   }
+  .wrap-text {
+    overflow-wrap: break-word;
+    max-width: 80vw;
+    color: var(--input-label);
+  }
 </style>

package/pages/support/index.vue

@@ -3,11 +3,13 @@ import { options } from '@shell/config/footer';
 import BannerGraphic from '@shell/components/BannerGraphic';
 import AsyncButton from '@shell/components/AsyncButton';
 import IndentedPanel from '@shell/components/IndentedPanel';
-import Card from '@shell/components/Card';
+import { Card } from '@components/Card';
 import CommunityLinks from '@shell/components/CommunityLinks';
-import { MANAGEMENT } from '@shell/config/types';
+import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { getVendor, setBrand } from '@shell/config/private-label';
 import { SETTING } from '@shell/config/settings';
+import { findBy } from '@shell/utils/array';
+import { addParam } from '@shell/utils/url';
 
 const KEY_REGEX = /^[0-9a-fA-F]{16}$/;
 
@@ -45,21 +47,26 @@ export default {
       return setting;
     };
 
+    if ( this.$store.getters['management/canList'](CATALOG.APP) ) {
+      this.apps = await this.$store.dispatch('management/findAll', { type: CATALOG.APP });
+    }
     this.supportSetting = await fetchOrCreateSetting('has-support', 'false');
     this.brandSetting = await fetchOrCreateSetting(SETTING.BRAND, '');
     this.communitySetting = await fetchOrCreateSetting(SETTING.COMMUNITY_LINKS, 'true');
-
+    this.serverUrlSetting = await fetchOrCreateSetting(SETTING.SERVER_URL, '');
     this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
   },
 
   data() {
     return {
+      apps:                 [],
       vendor:               getVendor(),
       supportKey:           '',
       supportSetting:       null,
       brandSetting:         null,
       uiIssuesSetting:      null,
-      communitySetting: null,
+      communitySetting:     null,
+      serverSetting:        null,
       promos:               [
         'support.promos.one',
         'support.promos.two',
@@ -70,8 +77,34 @@ export default {
   },
 
   computed: {
+    cspAdapter() {
+      return findBy(this.apps, 'metadata.name', 'rancher-csp-adapter' );
+    },
+
+    hasAWSSupport() {
+      return !!this.cspAdapter;
+    },
+
+    serverUrl() {
+      if (process.client) {
+        // Client-side rendered: use the current window location
+        return window.location.origin;
+      }
+
+      // Server-side rendered
+      return this.serverSetting?.value || '';
+    },
+
+    supportConfigLink() {
+      if (!this.cspAdapter) {
+        return false;
+      }
+
+      return `${ this.serverUrl }/v1/generateSUSERancherSupportConfig`;
+    },
+
     hasSupport() {
-      return this.supportSetting?.value && this.supportSetting?.value !== 'false';
+      return (this.supportSetting?.value && this.supportSetting?.value !== 'false') || this.hasAWSSupport;
     },
 
     options() {
@@ -85,6 +118,10 @@ export default {
     validSupportKey() {
       return !!this.supportKey.match(KEY_REGEX);
     },
+
+    sccLink() {
+      return this.hasAWSSupport ? addParam('https://scc.suse.com', 'from_marketplace', '1') : 'https://scc.suse.com';
+    }
   },
 
   methods: {
@@ -126,7 +163,7 @@ export default {
       if (input) {
         input.focus();
       }
-    }
+    },
   }
 };
 </script>
@@ -141,9 +178,14 @@ export default {
             <h2>{{ t('support.suse.access.title') }}</h2>
             <div>
               <p class="pb-10">
-                {{ t('support.suse.access.text') }}
+                {{ hasAWSSupport ? t("support.suse.access.aws.text") : t("support.suse.access.text") }}
               </p>
-              <a href="https://scc.suse.com" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.suse.access.action') }} <i class="icon icon-external-link" /></a>
+              <a v-if="hasAWSSupport" class="mr-5 btn role-secondary btn-sm" :href="supportConfigLink">
+                {{ t('support.suse.access.aws.generateConfig') }}
+              </a>
+              <a :href="sccLink" target="_blank" rel="noopener noreferrer nofollow">
+                {{ t('support.suse.access.action') }} <i class="icon icon-external-link" />
+              </a>
             </div>
           </div>
           <div class="boxes">
@@ -165,7 +207,7 @@ export default {
               {{ t('support.subscription.addSubscription') }}
             </button>
           </div>
-          <div v-if="hasSupport" class="register row">
+          <div v-if="hasSupport && !hasAWSSupport" class="register row">
             <a class="remove-link" @click="showDialog(true)">
               {{ t('support.subscription.removeSubscription') }}
             </a>

package/pkg/auto-import.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 const path = require('path');
-const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents'];
+const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'formatters'];
 const contextMap = contextFolders.reduce((map, obj) => {
   map[obj] = true;
 

package/pkg/dynamic-importer.lib.js

@@ -60,3 +60,11 @@ export function resolveEdit(key) {
 export function resolveDetail(key) {
   return undefined;
 }
+
+export function importWindowComponent(name) {
+  return () => undefined;
+}
+
+export function resolveWindowComponent(key) {
+  return undefined;
+}

package/pkg/tsconfig.json

@@ -15,7 +15,10 @@
     "preserveSymlinks": true,
     "types": [
       "node",
-      "webpack-env"
+      "webpack-env",
+      "@types/node",
+      "@types/jest",
+      "@nuxt/types"
     ],
     "lib": [
       "esnext",
@@ -25,25 +28,39 @@
     ],
     "paths": {
       "@shell/core/*": [
-        "../../shell/core/*"
+        "../../node_modules/@rancher/shell/core/*"
       ],
       "@shell/config/*": [
-        "../../shell/config/*"
+        "../../node_modules/@rancher/shell/config/*"
       ],
       "@shell/store/*": [
-        "../../shell/store/*"
+        "../../node_modules/@rancher/shell/store/*"
+      ],
+      "@shell/plugins/*": [
+        "../../node_modules/@rancher/shell/plugins/*"
+      ],
+      "@shell/utils/*": [
+        "../../node_modules/@rancher/shell/utils/*"
+      ],
+      "@shell/models/*": [
+        "../../node_modules/@rancher/shell/models/*"
+      ],
+      "@shell/mixins/*": [
+        "../../node_modules/@rancher/shell/mixins/*"
+      ],
+      "@pkg/*": [
+        "./*"
       ]
-    },
+    }
   },
   "include": [
     "**/*.ts",
     "**/*.tsx",
     "**/*.vue",
-    "../../shell/types/*.d.ts",
-    "../../shell/core/*.ts",
-    "../../shell/config/**/*.js",
+    "../../node_modules/@rancher/shell/types/*.d.ts",
+    "../../node_modules/@rancher/shell/core/types.ts"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}

package/pkg/vue.config.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -8,6 +9,11 @@ module.exports = function(dir) {
   const maindir = path.resolve(dir, '..', '..');
   // The shell code must be sym-linked into the .shell folder
   const SHELL = path.join(dir, '.shell');
+  let COMPONENTS_DIR = path.join(SHELL, 'rancher-components');
+
+  if (fs.existsSync(path.join(maindir, 'shell'))) {
+    COMPONENTS_DIR = path.join(maindir, 'pkg', 'rancher-components', 'src', 'components');
+  }
 
   return {
     css: {
@@ -33,6 +39,8 @@ module.exports = function(dir) {
       // Alias updates
       config.resolve.alias['@shell'] = path.join(dir, '.shell');
       config.resolve.alias['~shell'] = path.join(dir, '.shell');
+      // This should be udpated once we move to rancher-components as a dependency
+      config.resolve.alias['@components'] = COMPONENTS_DIR;
       config.resolve.alias['./node_modules'] = path.join(maindir, 'node_modules');
       config.resolve.alias['@pkg'] = dir;
       config.resolve.alias['~pkg'] = dir;

package/plugins/console.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+export default (context) => {
+  const logTypes = ['log', 'error', 'info', 'warn'];
+  const MAX_LOGS_STORED = 400;
+
+  console.logLog = console.log.bind(console);
+  console.errorLog = console.error.bind(console);
+  console.infoLog = console.info.bind(console);
+  console.warnLog = console.warn.bind(console);
+  console.logs = [];
+
+  logTypes.forEach((type) => {
+    console[type] = function() {
+      const dataLogged = {
+        type,
+        dateTimeUtc: new Date().toUTCString(),
+        timestamp:   Date.now(),
+        data:        Array.from(arguments)
+      };
+
+      if (console.logs.length >= MAX_LOGS_STORED) {
+        console.logs.shift();
+      }
+
+      console.logs.push(dataLogged);
+      console[`${ type }Log`].apply(console, arguments);
+    };
+  });
+};

package/plugins/dashboard-store/actions.js

@@ -34,45 +34,97 @@ export async function handleSpoofedRequest(rootGetters, schemaStore, opt, produc
   }
 }
 
+export async function loadSchemas(ctx, watch = true) {
+  const {
+    getters, dispatch, commit, rootGetters
+  } = ctx;
+  const res = await dispatch('findAll', { type: SCHEMA, opt: { url: 'schemas', load: false } });
+  const spoofedTypes = rootGetters['type-map/allSpoofedSchemas'] ;
+
+  if (Array.isArray(res.data)) {
+    res.data = res.data.concat(spoofedTypes);
+  } else if (Array.isArray(res)) {
+    res.data = res.concat(spoofedTypes);
+  }
+
+  res.data.forEach((schema) => {
+    schema._id = normalizeType(schema.id);
+    schema._group = normalizeType(schema.attributes?.group);
+  });
+
+  commit('loadAll', {
+    ctx,
+    type: SCHEMA,
+    data: res.data
+  });
+
+  if ( watch !== false ) {
+    dispatch('watch', {
+      type:     SCHEMA,
+      revision: res.revision
+    });
+  }
+
+  const all = getters.all(SCHEMA);
+
+  return all;
+}
+
 export default {
   request() {
     throw new Error('Not Implemented');
   },
 
-  async loadSchemas(ctx, watch = true) {
-    const {
-      getters, dispatch, commit, rootGetters
-    } = ctx;
-    const res = await dispatch('findAll', { type: SCHEMA, opt: { url: 'schemas', load: false } });
-    const spoofedTypes = rootGetters['type-map/allSpoofedSchemas'] ;
+  loadSchemas,
 
-    if (Array.isArray(res.data)) {
-      res.data = res.data.concat(spoofedTypes);
-    } else if (Array.isArray(res)) {
-      res.data = res.concat(spoofedTypes);
-    }
+  // Load a page of data for a given type
+  // Used for incremental loading when enabled
+  async loadDataPage(ctx, { type, opt }) {
+    const { getters, commit, dispatch } = ctx;
 
-    res.data.forEach((schema) => {
-      schema._id = normalizeType(schema.id);
-      schema._group = normalizeType(schema.attributes?.group);
-    });
+    type = getters.normalizeType(type);
 
-    commit('loadAll', {
-      ctx,
-      type: SCHEMA,
-      data: res.data
-    });
+    const loadCount = getters['loadCounter'](type);
 
-    if ( watch !== false ) {
-      dispatch('watch', {
-        type:     SCHEMA,
-        revision: res.revision
+    try {
+      const res = await dispatch('request', { opt, type });
+
+      const newLoadCount = getters['loadCounter'](type);
+
+      // Load count changed, so we changed page or started a new load
+      // after this page load was started, so don't continue with incremental load
+      if (loadCount !== newLoadCount) {
+        return;
+      }
+
+      commit('loadAdd', {
+        ctx,
+        type,
+        data: res.data,
       });
-    }
 
-    const all = getters.all(SCHEMA);
+      if (res.pagination?.next) {
+        dispatch('loadDataPage', {
+          type,
+          opt: {
+            ...opt,
+            url: res.pagination?.next
+          }
+        });
+      } else {
+      // We have everything!
+        if (opt.hasManualRefresh) {
+          dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
+        }
+        commit('setHaveAll', { type });
+      }
+    } catch (e) {
+      if (opt.hasManualRefresh) {
+        dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
+      }
 
-    return all;
+      return Promise.reject(e);
+    }
   },
 
   async findAll(ctx, { type, opt }) {
@@ -88,6 +140,18 @@ export default {
     }
 
     if ( opt.force !== true && getters['haveAll'](type) ) {
+      const args = {
+        type,
+        revision:  '',
+        namespace: opt.watchNamespace
+      };
+
+      // if we are coming from a resource that wasn't watched
+      // but for which we have results already, just return the results but start watching it
+      if (opt.watch !== false && !getters.watchStarted(args)) {
+        dispatch('watch', args);
+      }
+
       return getters.all(type);
     }
 
@@ -113,6 +177,39 @@ export default {
     opt.stream = opt.stream !== false && load !== _NONE;
     opt.depaginate = typeOptions?.depaginate;
 
+    let skipHaveAll = false;
+
+    // if it's incremental loading, we do two parallel requests
+    // on for a limit of 100, to quickly show data
+    // another one with 1st page of the subset of the resource we are fetching
+    // the default is 4 pages, but it can be changed on mixin/resource-fetch.js
+    if (opt.incremental) {
+      commit('incrementLoadCounter', type);
+
+      if (opt.hasManualRefresh) {
+        dispatch('resource-fetch/updateManualRefreshIsLoading', true, { root: true });
+      }
+
+      const pageFetchOpts = {
+        ...opt,
+        url: `${ opt.url }?limit=${ opt.incremental }`
+      };
+
+      // this is where we "hijack" the limit for the dispatch('request') some lines below
+      // and therefore have 2 initial requests in parallel
+      opt.url = `${ opt.url }?limit=100`;
+      skipHaveAll = true;
+
+      // since we are forcing a request, clear the haveAll
+      // needed for the resource-fetch mixin, otherwise the incremental indicator
+      // won't pop-up again when manual refreshing
+      if (opt.force) {
+        commit('forgetType', type);
+      }
+
+      dispatch('loadDataPage', { type, opt: pageFetchOpts });
+    }
+
     let streamStarted = false;
     let out;
 
@@ -139,6 +236,10 @@ export default {
     };
 
     try {
+      if (!opt.incremental && opt.hasManualRefresh) {
+        dispatch('resource-fetch/updateManualRefreshIsLoading', true, { root: true });
+      }
+
       const res = await dispatch('request', { opt, type });
 
       if ( streamStarted ) {
@@ -156,10 +257,18 @@ export default {
         out = res;
       }
     } catch (e) {
+      if (!opt.incremental && opt.hasManualRefresh) {
+        dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
+      }
+
       return Promise.reject(e);
     }
 
     if ( load === _NONE ) {
+      if (!opt.incremental && opt.hasManualRefresh) {
+        dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
+      }
+
       return out;
     } else if ( out.data ) {
       if ( load === _MULTI ) {
@@ -187,7 +296,8 @@ export default {
         commit('loadAll', {
           ctx,
           type,
-          data: out.data
+          data: out.data,
+          skipHaveAll
         });
       }
     }
@@ -202,6 +312,10 @@ export default {
 
     const all = getters.all(type);
 
+    if (!opt.incremental && opt.hasManualRefresh) {
+      dispatch('resource-fetch/updateManualRefreshIsLoading', false, { root: true });
+    }
+
     return all;
   },
 
@@ -383,6 +497,27 @@ export default {
     return classify(ctx, resource.toJSON(), true);
   },
 
+  // Forget a type in the store
+  // Remove all entries for that type and stop watching it
+  forgetType({ commit, getters, dispatch }, type) {
+    const obj = {
+      type,
+      stop: true, // Stops the watch on a type
+    };
+
+    if (getters['schemaFor'](type) && getters['watchStarted'](obj)) {
+      // Set that we don't want to watch this type
+      // Otherwise, the dispatch to unwatch below will just cause a re-watch when we
+      // detect the stop message from the backend over the web socket
+      commit('setWatchStopped', obj);
+      dispatch('watch', obj); // Ask the backend to stop watching the type
+      // Make sure anything in the pending queue for the type is removed, since we've now removed the type
+      commit('clearFromQueue', type);
+    }
+
+    commit('forgetType', type);
+  },
+
   promptRemove({ commit, state }, resources ) {
     commit('action-menu/togglePromptRemove', resources, { root: true });
   },
@@ -407,6 +542,10 @@ export default {
     throw new Error('Not Implemented');
   },
 
+  createNamespace(ctx, resource) {
+    throw new Error('Not Implemented');
+  },
+
   cleanForDiff(ctx, resource) {
     throw new Error('Not Implemented');
   },
@@ -439,5 +578,9 @@ export default {
       console.warn(`Schema for ${ type } still unavailable... loading schemas again...`); // eslint-disable-line no-console
       await dispatch('loadSchemas', true);
     }
+  },
+
+  incrementLoadCounter({ commit }, resource) {
+    commit('incrementLoadCounter', resource);
   }
 };

package/plugins/dashboard-store/getters.js

@@ -282,6 +282,18 @@ export default {
 
   isClusterStore: (state) => {
     return state.config.isClusterStore;
-  }
+  },
+
+  // Increment the load counter for a resource type
+  // This is used for incremental loading do detect when a page changes occur of the a reload happend
+  // While a previous incremental loading operation is still in progress
+  loadCounter: (state, getters) => (type) => {
+    type = getters.normalizeType(type);
 
+    if (!!state.types[type]) {
+      return state.types[type].loadCounter;
+    }
+
+    return 0;
+  }
 };

package/plugins/dashboard-store/index.js

@@ -29,7 +29,7 @@ export const coreStoreState = (namespace, baseUrl, isClusterStore) => ({
   types: {},
 });
 
-export default (vuexModule, config) => {
+export default (vuexModule, config, init) => {
   const namespace = config.namespace || '';
 
   return function(store) {
@@ -61,6 +61,10 @@ export default (vuexModule, config) => {
       }
     });
 
+    if (init) {
+      init(store, ctx);
+    }
+
     // Turn all the objects in the store from the server into proxies
     const state = fromServer?.state?.[namespace];