@rancher/shell 0.1.4 → 0.1.21

package/core/plugins.js

@@ -17,9 +17,9 @@ export default function({
   let _lastLoaded = 0;
 
   // Track which plugin loaded what, so we can unload stuff
-  const plugins = {};
+  let plugins = {};
 
-  const pluginRoutes = new PluginRoutes(app.router);
+  let pluginRoutes = new PluginRoutes(app.router);
 
   inject('plugin', {
     // Plugins should not use these - but we will pass them in for now as a 2nd argument
@@ -37,11 +37,18 @@ export default function({
     },
 
     // Load a plugin from a UI package
-    loadAsyncByNameAndVersion(name, version, url) {
+    loadPluginAsync(plugin) {
+      const { name, version } = plugin;
       const id = `${ name }-${ version }`;
+      let url;
 
-      if (!url) {
-        url = `${ UI_PLUGIN_BASE_URL }/${ name }/${ version }/plugin/${ id }.umd.min.js`;
+      if (plugin?.metadata?.direct === 'true') {
+        url = plugin.endpoint;
+      } else {
+        // See if the plugin has a main metadata property set
+        const main = plugin?.metadata?.main || `${ id }.umd.min.js`;
+
+        url = `${ UI_PLUGIN_BASE_URL }/${ name }/${ version }/plugin/${ main }`;
       }
 
       return this.loadAsync(id, url);
@@ -152,6 +159,23 @@ export default function({
       }
     },
 
+    async logout() {
+      const all = Object.keys(plugins);
+
+      for (let i = 0; i < all.length; i++) {
+        const name = all[i];
+
+        try {
+          await this.removePlugin(name);
+        } catch (e) {
+          console.error('Error removing plugin', e); // eslint-disable-line no-console
+        }
+      }
+
+      plugins = {};
+      pluginRoutes = new PluginRoutes(app.router);
+    },
+
     // Remove the plugin
     async removePlugin(name) {
       const plugin = Object.values(plugins).find(p => p.name === name);

package/core/types.ts

@@ -73,6 +73,12 @@ export interface IPlugin {
   addRoute(route: RouteConfig): void;
   addRoute(parent: string, route: RouteConfig): void;
 
+  /**
+   * Set the component to use for the landing home page
+   * @param component Home page component
+   */
+  setHomePage(component: any): void;
+
   /**
    * Add routes to the Vue Router
    */

package/creators/app/{tsconfig.json → files/tsconfig.json}

@@ -33,7 +33,8 @@
       "@types/node",
       "@nuxt/types",
       "cypress",
-      "rancher"
+      "rancher",
+      "shell"
     ]
   },
   "exclude": [

package/creators/app/init

@@ -1,13 +1,12 @@
 #!/usr/bin/env node
 
-const fs = require('fs-extra');
 const path = require('path');
-const exec = require('child_process').exec;
+const fs = require('fs-extra');
 
 const targets = {
-  'dev': './node_modules/.bin/nuxt dev',
-  'nuxt': './node_modules/.bin/nuxt',
-  'build': './node_modules/.bin/nuxt build'
+  dev:   './node_modules/.bin/nuxt dev',
+  nuxt:  './node_modules/.bin/nuxt',
+  build: './node_modules/.bin/nuxt build'
 };
 
 const files = [
@@ -30,8 +29,8 @@ if (args.length == 3) {
   const folder = path.resolve('.');
 
   appFolder = path.join(folder, name);
-  console.log(`  Creating application folder: ${ appFolder}`);
-  fs.ensureDirSync(appFolder);  
+  console.log(`  Creating application folder: ${ appFolder }`);
+  fs.ensureDirSync(appFolder);
 }
 
 // Check that there is a package file
@@ -71,18 +70,23 @@ const creatorPkgData = fs.readFileSync(path.join(__dirname, 'package.json'));
 const creatorPkg = JSON.parse(creatorPkgData);
 
 pkg.dependencies['@rancher/shell'] = `^${ creatorPkg.version }`;
-pkg.dependencies['core-js'] = '^3.20.3';
-pkg.dependencies['css-loader'] = '4.3.0';
+
+// Rest of dependencies are in the _pkgs property of package.json - copy then across
+if (creatorPkg._pkgs) {
+  Object.keys(creatorPkg._pkgs).forEach((pkg) => {
+    pkg.dependencies[pkg] = creatorPkg._pkgs[pkg];
+  });
+}
 
 fs.writeFileSync(path.join(appFolder, 'package.json'), JSON.stringify(pkg, null, 2));
 
 // Copy base files
 files.forEach((file) => {
-  const src = path.join(__dirname, file);
+  const src = path.join(__dirname, 'files', file);
   const dest = path.join(appFolder, file);
 
   if (!fs.existsSync(dest)) {
-    console.log('  Adding file: ' + file);
+    console.log(`  Adding file: ${ file }`);
 
     const folder = path.dirname(file);
 
@@ -93,9 +97,4 @@ files.forEach((file) => {
   }
 });
 
-// require("child_process").spawn('yarn', ['install'], {
-//   cwd: process.cwd(),
-//   stdio: "inherit"
-// });
-
-console.log('');
+console.log('');

package/creators/app/package.json

@@ -13,6 +13,12 @@
   "engines": {
     "node": ">=12"
   },
+  "_requires": [
+    "core-js",
+    "css-loader",
+    "@types/lodash",
+    "@rancher/components"
+  ],
   "dependencies": {
     "fs-extra": "^10.0.0"
   }

package/creators/pkg/{tsconfig.json → files/tsconfig.json}

@@ -16,12 +16,16 @@
     "typeRoots": [
       "../../node_modules",
       "../../node_modules/@rancher/shell/types"
-    ],
+    ],    
     "types": [
       "node",
       "webpack-env",
+      "@types/node",
+      "@types/jest",
+      "@types/lodash",
       "@nuxt/types",
-      "rancher"
+      "rancher",
+      "shell"
     ],
     "lib": [
       "esnext",
@@ -30,24 +34,21 @@
       "scripthost"
     ],
     "paths": {
-      "@shell/core/*": [
-        "../../node_modules/@rancher/shell/core/*"
-      ],
-      "@shell/config/*": [
-        "../../node_modules/@rancher/shell/config/*"
+      "@shell/*": [
+        "../../node_modules/@rancher/shell/*"
       ],
-      "@shell/store/*": [
-        "../../node_modules/@rancher/shell/store/*"
+      "@components/*": [
+        "@rancher/components/*"
       ]
     }
   },
   "include": [
     "**/*.ts",
+    "**/*.d.ts",
     "**/*.tsx",
-    "**/*.vue",
-    "../../node_modules/@rancher/shell/core/types.ts"
+    "**/*.vue"
   ],
   "exclude": [
-    "node_modules"
+    "../../node_modules"
   ]
 }

package/creators/pkg/init

@@ -95,7 +95,7 @@ if (addTypeFolders) {
 
 // Copy base files
 files.forEach((file) => {
-  const src = path.join(__dirname, file);
+  const src = path.join(__dirname, 'files', file);
   const dest = path.join(path.join(pkgFolder, file));
 
   if (!fs.existsSync(dest)) {

package/creators/update/init

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs-extra');
+const { spawnSync } = require('child_process');
+
+const scriptFolder = __dirname;
+const dest = path.resolve('.');
+
+// Remove first two args
+let args = process.argv;
+args.splice(0, 2);
+
+const res = spawnSync(`${__dirname}/upgrade`, args, {
+  cwd: dest,
+  shell: false,
+  stdio: [ 'ignore', process.stdout, process.stderr ],
+});
+
+if (res.status !== 0) {
+  process.exit(res.status);
+}
+
+// Read the existing package.json
+let rawdata = fs.readFileSync(path.join(dest, 'package.json'));
+const appPackage = JSON.parse(rawdata);
+
+// Read the package.json from the app creator
+rawdata = fs.readFileSync(path.join(scriptFolder, 'app', 'package.json'));
+const latestPackage = JSON.parse(rawdata);
+
+// Read the package.json from the upgrade creator
+rawdata = fs.readFileSync(path.join(scriptFolder, 'package.json'));
+const upgradePackage = JSON.parse(rawdata);
+
+// Update dependency versions to match the latest from the creator
+Object.keys(latestPackage.dependencies).forEach((key) => {
+  const version = latestPackage.dependencies[key];
+
+  appPackage.dependencies[key] = version;
+});
+
+// Update the version of @rancher/shell
+const shellVersion = upgradePackage.version;
+
+appPackage.dependencies['@rancher/shell'] = shellVersion;
+
+fs.writeFileSync(path.join(dest, 'package.json'), JSON.stringify(appPackage, null, 2));
+
+spawnSync(`yarn`, ['install'], {
+  cwd: dest,
+  shell: false,
+  stdio: [ 'ignore', process.stdout, process.stderr ],
+});

package/creators/update/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@rancher/create-update",
+  "description": "Rancher UI Update helper",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "author": "SUSE",
+  "private": false,
+  "bin": "./init",
+  "files": [
+    "**/*.*",
+    "init",
+    "upgrade"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "fs-extra": "^10.0.0"
+  }
+}

package/creators/update/upgrade

@@ -0,0 +1,56 @@
+#!/usr/bin/env sh
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+echo "Upgrading Rancher Shell"
+
+# Get the version number from the package.json file
+VERSION=$(node -p -e "require('${SCRIPT_DIR}/package.json').version")
+
+echo "Updating to version: ${VERSION}"
+echo ""
+
+FORCE="false"
+
+if [ "$1" == "-f" ]; then
+  FORCE="true"
+fi
+
+# Check for a clean git repository
+if [ ! -d ".git" ] && [ "${FORCE}" == "false" ]; then
+  echo "Not runnning in a git repository. Re-run with -f to ignore this check"
+  echo "Note: This action will update yuor files - running in a git repsository will ensure you have visibility over changes made"
+  exit 1 
+fi
+
+if [[ $(git diff --stat) != '' ]] && [ "${FORCE}" == "false" ]; then
+  echo "Git repository is not clean. Re-run with -f to ignore this check"
+  echo "Note: This action will update yuor files - running in a clean git repsository will ensure you have visibility over changes made"
+  exit 1 
+fi
+
+# Check this is a Rancher Extension
+if [ ! -f "./package.json" ]; then
+  echo "Can't find package.json - check you're running from the correct folder"
+  exit 1 
+fi
+
+HAS_SHELL=$(grep "\"@rancher/shell\"" package.json -c )
+if [ "${HAS_SHELL}" != "1" ]; then
+  echo "package.json does not reference @rancher/shell - check you're running from the correct folder"
+  exit 1 
+fi
+
+# Copy files for the top-level folder (from the app creator)
+cp ${SCRIPT_DIR}/app/files/* .
+
+# Go through each folder in the pkg folder and update their files
+for pkg in ./pkg/*
+do
+  if [ -d "${pkg}" ]; then
+    pkgName=$(basename $pkg)
+    echo "Updating package ${pkgName}"
+
+    cp ${SCRIPT_DIR}/pkg/files/* ${pkg}
+  fi
+done

package/creators/update/yarn-error.log

@@ -0,0 +1,54 @@
+Arguments: 
+  /usr/local/bin/node /usr/local/Cellar/yarn/1.22.11/libexec/bin/yarn.js add @rancher/pkg@0.0.0
+
+PATH: 
+  /Users/nwm/.gem/ruby/3.1.2/bin:/Users/nwm/.rubies/ruby-3.1.2/lib/ruby/gems/3.1.0/bin:/Users/nwm/.rubies/ruby-3.1.2/bin:/Users/nwm/.deno/bin:/usr/local/sbin:/opt/local/bin:/opt/local/sbin:/Users/nwm/.rd/bin:/Users/nwm/go/bin:/usr/local/bin:/Users/nwm/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/usr/local/MacGPG2/bin:/Library/Apple/usr/bin:/Users/nwm/.deno/bin:/usr/local/sbin:/Users/nwm/google-cloud-sdk/bin:/opt/local/bin:/opt/local/sbin:/Users/nwm/.rd/bin:/Users/nwm/go/bin:/Users/nwm/bin:/Applications/Utilities/kdiff3.app/Contents/MacOS/:/Applications/Visual Studio Code.app/Contents/Resources/app/bin:/Applications/Utilities/kdiff3.app/Contents/MacOS/:/Applications/Visual Studio Code.app/Contents/Resources/app/bin
+
+Yarn version: 
+  1.22.11
+
+Node version: 
+  16.16.0
+
+Platform: 
+  darwin x64
+
+Trace: 
+  Error: https://registry.yarnpkg.com/@rancher%2fpkg: Not found
+      at Request.params.callback [as _callback] (/usr/local/Cellar/yarn/1.22.11/libexec/lib/cli.js:66992:18)
+      at Request.self.callback (/usr/local/Cellar/yarn/1.22.11/libexec/lib/cli.js:140763:22)
+      at Request.emit (node:events:527:28)
+      at Request.<anonymous> (/usr/local/Cellar/yarn/1.22.11/libexec/lib/cli.js:141735:10)
+      at Request.emit (node:events:527:28)
+      at IncomingMessage.<anonymous> (/usr/local/Cellar/yarn/1.22.11/libexec/lib/cli.js:141657:12)
+      at Object.onceWrapper (node:events:641:28)
+      at IncomingMessage.emit (node:events:539:35)
+      at endReadableNT (node:internal/streams/readable:1345:12)
+      at processTicksAndRejections (node:internal/process/task_queues:83:21)
+
+npm manifest: 
+  {
+    "name": "@rancher/create-app",
+    "description": "Rancher UI Upgrade helper",
+    "version": "0.0.0",
+    "license": "Apache-2.0",
+    "author": "SUSE",
+    "private": false,
+    "bin": "./init",
+    "files": [
+      "*.*",
+      "init"
+    ],
+    "engines": {
+      "node": ">=12"
+    },
+    "dependencies": {
+      "fs-extra": "^10.0.0"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile

package/detail/workload/index.vue

@@ -141,6 +141,7 @@ export default {
         return this.value.spec.jobTemplate.spec.template.spec;
       }
 
+      // This is for viewing
       if ( this.value.type === POD ) {
         return this.value;
       }

package/edit/persistentvolume/index.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
@@ -15,10 +16,11 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { NODE, PVC, STORAGE_CLASS } from '@shell/config/types';
 import Loading from '@shell/components/Loading';
 import { LONGHORN_PLUGIN, VOLUME_PLUGINS } from '@shell/models/persistentvolume';
-import { _CREATE, _VIEW } from '@shell/config/query-params';
+import { _CREATE, _VIEW, _EDIT } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
 import InfoBox from '@shell/components/InfoBox';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
+import ResourceManager from '@shell/mixins/resource-manager';
 
 export default {
   name: 'PersistentVolume',
@@ -39,18 +41,26 @@ export default {
     UnitInput
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, ResourceManager],
 
-  async fetch() {
-    const storageClasses = await this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS });
+  fetch() {
+    if (this.mode === _EDIT) {
+      this.secondaryResourceData.namespace = this.value?.spec?.claimRef?.namespace || null;
 
-    await this.$store.dispatch('cluster/findAll', { type: PVC });
+      this.secondaryResourceData.data[PVC] = {
+        applyTo: [
+          {
+            var:         'currentClaim',
+            classify:    true,
+            parsingFunc: (data) => {
+              return data.find(claim => claim.spec.volumeName === this.value.name);
+            }
+          }
+        ]
+      };
+    }
 
-    this.storageClassOptions = storageClasses.map(s => ({
-      label: s.name,
-      value: s.name
-    }));
-    this.storageClassOptions.unshift(this.NONE_OPTION);
+    this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);
   },
 
   data() {
@@ -70,7 +80,30 @@ export default {
     const plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
 
     return {
+      secondaryResourceData:       {
+        namespace: null,
+        data:      {
+          [STORAGE_CLASS]: {
+            applyTo: [
+              {
+                var:         'storageClassOptions',
+                parsingFunc: (data) => {
+                  const storageClassOptions = data.map(s => ({
+                    label: s.metadata.name,
+                    value: s.metadata.name
+                  }));
+
+                  storageClassOptions.unshift(this.NONE_OPTION);
+
+                  return storageClassOptions;
+                }
+              }
+            ]
+          },
+        }
+      },
       storageClassOptions: [],
+      currentClaim:        null,
       plugin,
       NONE_OPTION,
       NODE,
@@ -80,6 +113,7 @@ export default {
 
   computed: {
     showUnsupportedStorage: mapFeature(UNSUPPORTED_STORAGE_DRIVERS),
+    ...mapGetters(['currentProduct', 'currentCluster']),
 
     readWriteOnce: {
       get() {
@@ -196,12 +230,12 @@ export default {
       :namespaced="false"
     />
 
-    <InfoBox v-if="value.claim">
+    <InfoBox v-if="currentClaim">
       <div class="row">
         <div class="col span-6 text-center">
           <label class="text-muted">Persistent Volume Claim:</label>&nbsp;
-          <n-link :to="value.claim.detailLocation">
-            {{ value.claim.namespacedName }}
+          <n-link :to="currentClaim.detailLocation">
+            {{ currentClaim.namespacedName }}
           </n-link>
         </div>
         <div class="col span-6 text-center">
@@ -267,6 +301,7 @@ export default {
               v-model="value.spec.storageClassName"
               :label="t('persistentVolume.customize.assignToStorageClass.label')"
               :options="storageClassOptions"
+              :loading="isLoadingSecondaryResources"
             />
           </div>
         </div>

package/edit/persistentvolumeclaim.vue

@@ -15,6 +15,7 @@ import StatusTable from '@shell/components/StatusTable';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Labels from '@shell/components/form/Labels';
 import { Banner } from '@components/Banner';
+import ResourceManager from '@shell/mixins/resource-manager';
 
 const DEFAULT_STORAGE = '10Gi';
 
@@ -36,26 +37,17 @@ export default {
     UnitInput,
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, ResourceManager],
   async fetch() {
     const storageClasses = await this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS });
 
     if (this.$store.getters['management/canList'](PV)) {
-      this.persistentVolumes = await this.$store.dispatch('cluster/findAll', { type: PV });
+      this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);
     }
 
     this.storageClassOptions = storageClasses.map(s => s.name).sort();
     this.storageClassOptions.unshift(this.t('persistentVolumeClaim.useDefault'));
-    this.persistentVolumeOptions = this.persistentVolumes
-      .map((s) => {
-        const status = s.status.phase === 'Available' ? '' : ` (${ s.status.phase })`;
 
-        return {
-          label:  `${ s.name }${ status }`,
-          value: s.name
-        };
-      })
-      .sort((l, r) => l.label.localeCompare(r.label));
     this.$set(this.value.spec, 'storageClassName', this.value.spec.storageClassName || this.storageClassOptions[0]);
   },
   data() {
@@ -85,6 +77,31 @@ export default {
     const defaultTab = this.$route.query[FOCUS] || null;
 
     return {
+      secondaryResourceData:       {
+        namespace: this.value?.metadata?.namespace || null,
+        data:      {
+          [PV]: {
+            applyTo: [
+              { var: 'persistentVolumes' },
+              {
+                var:         'persistentVolumeOptions',
+                parsingFunc: (data) => {
+                  return data
+                    .map((s) => {
+                      const status = s.status.phase === 'Available' ? '' : ` (${ s.status.phase })`;
+
+                      return {
+                        label:  `${ s.metadata.name }${ status }`,
+                        value: s.metadata.name
+                      };
+                    })
+                    .sort((l, r) => l.label.localeCompare(r.label));
+                }
+              }
+            ]
+          },
+        }
+      },
       sourceOptions,
       source:                  this.value.spec.volumeName ? sourceOptions[1].value : sourceOptions[0].value,
       immutableMode:           this.realMode === _CREATE ? _CREATE : _VIEW,
@@ -126,7 +143,7 @@ export default {
         return this.value.spec.volumeName;
       },
       set(value) {
-        const persistentVolume = this.persistentVolumes.find(pv => pv.name === value);
+        const persistentVolume = this.persistentVolumes.find(pv => pv.metadata.name === value);
 
         if (persistentVolume) {
           this.$set(this.value.spec.resources.requests, 'storage', persistentVolume.spec.capacity?.storage);
@@ -170,7 +187,7 @@ export default {
       }
     },
     isPersistentVolumeSelectable(option) {
-      const persistentVolume = this.persistentVolumes.find(pv => pv.name === option.value);
+      const persistentVolume = this.persistentVolumes.find(pv => pv.metadata.name === option.value);
 
       return persistentVolume.status.phase === 'Available';
     },
@@ -248,6 +265,7 @@ export default {
                   :label="t('persistentVolumeClaim.volumeClaim.persistentVolume')"
                   :selectable="isPersistentVolumeSelectable"
                   :mode="immutableMode"
+                  :loading="isLoadingSecondaryResources"
                 />
                 <LabeledInput
                   v-else