@rancher/shell 0.1.3 → 0.1.21

package/rancher-components/components/LabeledTooltip/LabeledTooltip.vue

@@ -0,0 +1,137 @@
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  props: {
+    /**
+     * The Labeled Tooltip value.
+     */
+    value: {
+      type:    [String, Object],
+      default: null
+    },
+
+    /**
+     * The status for the Labeled Tooltip. Controls the Labeled Tooltip class.
+     * @values info, success, warning, error
+     */
+    status: {
+      type:    String,
+      default: 'error'
+    },
+
+    /**
+     * Displays the Labeled Tooltip on mouse hover.
+     */
+    hover: {
+      type:    Boolean,
+      default: true
+    }
+  },
+  computed: {
+    iconClass() {
+      return this.status === 'error' ? 'icon-warning' : 'icon-info';
+    }
+  }
+});
+</script>
+
+<template>
+  <div ref="container" class="labeled-tooltip" :class="{[status]: true, hoverable: hover}">
+    <template v-if="hover">
+      <i v-tooltip="value.content ? { ...{content: value.content, classes: [`tooltip-${status}`]}, ...value } : value" :class="{'hover':!value, [iconClass]: true}" class="icon status-icon" />
+    </template>
+    <template v-else>
+      <i :class="{'hover':!value}" class="icon status-icon" />
+      <div v-if="value" class="tooltip" x-placement="bottom">
+        <div class="tooltip-arrow" />
+        <div class="tooltip-inner">
+          {{ value }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang='scss'>
+.labeled-tooltip {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+
+    &.hoverable {
+      height: 0%;
+    }
+
+     .status-icon {
+        position:  absolute;
+        right: 30px;
+        top: $input-padding-lg;
+        font-size: 20px;
+        z-index: z-index(hoverOverContent);
+     }
+
+    .tooltip {
+        position: absolute;
+        width: calc(100% + 2px);
+        top: calc(100% + 6px);
+
+        .tooltip-arrow {
+            right: 30px;
+        }
+
+        .tooltip-inner {
+            padding: 10px;
+        }
+    }
+
+    @mixin tooltipColors($color) {
+        .status-icon {
+            color: $color;
+        }
+        .tooltip {
+            .tooltip-inner {
+                color: var(--input-bg);
+                background: $color;
+                border-color: $color;
+            }
+
+            .tooltip-arrow {
+                border-bottom-color: $color;
+                &:after {
+                    border: none;
+                }
+            }
+        }
+    }
+
+    &.error {
+        @include tooltipColors(var(--error));
+
+        .status-icon {
+          top: 7px;
+          right: 5px;
+        }
+    }
+
+    &.warning {
+        @include tooltipColors(var(--warning));
+    }
+
+    &.success {
+        @include tooltipColors(var(--success));
+    }
+}
+
+// Ensure code blocks inside tootips don't look awful
+.tooltip {
+  .tooltip-inner {
+    > pre {
+      padding: 2px;
+      vertical-align: middle;
+    }
+  }
+}
+</style>

package/rancher-components/components/LabeledTooltip/index.ts

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

package/scripts/publish-shell.sh

@@ -6,7 +6,13 @@ BASE_DIR="$(
   pwd
 )"
 SHELL_DIR=$BASE_DIR/shell/
-PUBLISH_ARGS="--no-git-tag-version --access public"
+TMP_DIR=$BASE_DIR/tmp
+PUBLISH_ARGS="--no-git-tag-version --access public $PUBLISH_ARGS"
+
+if [ ! -d "${BASE_DIR}/node_modules" ]; then
+  echo "You need to run 'yarn install' first"
+  exit 1
+fi
 
 echo "Publishing Shell Packages"
 
@@ -20,6 +26,7 @@ PKG_DIST=$BASE_DIR/dist-pkg/creators
 mkdir -p ${PKG_DIST}
 rm -rf ${PKG_DIST}/app
 rm -rf ${PKG_DIST}/pkg
+rm -rf ${PKG_DIST}/update
 
 pushd ${SHELL_DIR} >/dev/null
 
@@ -30,12 +37,15 @@ echo "Publishing version: $PKG_VERSION"
 
 cp -R ${SHELL_DIR}/creators/app ${PKG_DIST}
 cp -R ${SHELL_DIR}/creators/pkg ${PKG_DIST}
+cp -R ${SHELL_DIR}/creators/update ${PKG_DIST}
 
 sed -i.bak -e "s/\"0.0.0/"\"$PKG_VERSION"/g" ${PKG_DIST}/app/package.json
 sed -i.bak -e "s/\"0.0.0/"\"$PKG_VERSION"/g" ${PKG_DIST}/pkg/package.json
+sed -i.bak -e "s/\"0.0.0/"\"$PKG_VERSION"/g" ${PKG_DIST}/update/package.json
 
 rm ${PKG_DIST}/app/package.json.bak
 rm ${PKG_DIST}/pkg/package.json.bak
+rm ${PKG_DIST}/update/package.json.bak
 
 function publish() {
   NAME=$1
@@ -45,14 +55,32 @@ function publish() {
   pushd ${FOLDER} >/dev/null
 
   # For now, copy the rancher components into the shell and ship them with it
-  if [ "$NAME" == "Shell" ]; then
+  if [ "$NAME" == "+Shell" ]; then
     echo "Adding Rancher Components"
-    rm -rf ${SHELL_DIR}/rancher-components
-    cp -R ${BASE_DIR}/pkg/rancher-components/src/components ${SHELL_DIR}/rancher-components/
+    cp -R ${BASE_DIR}/pkg/rancher-components/src/components ./rancher-components/
+  fi
+
+  if [ "$NAME" == "Update" ]; then
+    # Add files from the app and pkg creators to the update package
+    mkdir -p ./app
+    mkdir -p ./pkg
+    cp -R ${BASE_DIR}/shell/creators/app/* ./app
+    cp -R ${BASE_DIR}/shell/creators/pkg/* ./pkg
+    # Remove index.ts from pkg files, as we don't want to replace that
+    rm -f ./pkg/files/index.ts
+
+    # Update the package.json for the app
+    cd app
+    node ${SCRIPT_DIR}/record-deps.js
+    cd ..
   fi
 
+  # Make a note of dependency versions, if required
+  node ${SCRIPT_DIR}/record-deps.js
+
   yarn publish . --new-version ${PKG_VERSION} ${PUBLISH_ARGS}
   RET=$?
+
   popd >/dev/null
 
   if [ $RET -ne 0 ]; then
@@ -61,10 +89,15 @@ function publish() {
   fi
 }
 
+# Generate the type definitions for the shell
+${SCRIPT_DIR}/typegen.sh
+
 # Publish the packages - don't tag the git repo and don't auto-increment the version number
 publish "Shell" ${SHELL_DIR}
-
-publish "Application creator" ${PKG_DIST}/app
-publish "Package creator" ${PKG_DIST}/pkg
+publish "Application creator" ${PKG_DIST}/app/
+publish "Package creator" ${PKG_DIST}/pkg/
+publish "Update" ${PKG_DIST}/update/
 
 echo "Done"
+
+

package/scripts/record-deps.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+
+// Script lives in shell/scripts, so work out top-level dir from there
+const topDir = path.resolve(__dirname, '..', '..')
+const dir = process.cwd();
+
+// Read the package.json file
+const topPkgFile = path.join(topDir, 'package.json');
+const pkgFile = path.join(dir, 'package.json');
+
+const topPkg = JSON.parse(fs.readFileSync(topPkgFile));
+const mainPkg = JSON.parse(fs.readFileSync(pkgFile));
+
+// Look to see if we specify the deps we require
+if (mainPkg._requires) {
+  // Map each one to the same version as the main package
+  const out = {};
+
+  mainPkg._requires.forEach(name => {
+    let ver = topPkg.dependencies?.[name] || topPkg.devDependencies?.[name];
+
+    if (name === '@rancher/components') { 
+      const componentsPkgFile = path.join(topDir, 'pkg', 'rancher-components', 'package.json');
+      const componentsPkg = JSON.parse(fs.readFileSync(componentsPkgFile));
+
+      ver = componentsPkg.version;
+    }
+
+    out[name] = ver;
+  });
+
+  mainPkg._pkgs = out;
+  delete mainPkg._requires;
+
+  fs.writeFileSync(pkgFile, JSON.stringify(mainPkg, null, 2), 'utf-8');
+}

package/scripts/sync-shell-deps

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const path = require('path');
+
+console.log(__dirname);
+
+const dir = path.resolve('.');
+
+console.log('Syncing shell dependencies');
+
+const topFile = path.join(dir, 'package.json');
+const shellFile = path.join(dir, 'shell', 'package.json');
+
+console.log(topFile);
+console.log(shellFile);
+
+const mainPkg = JSON.parse(fs.readFileSync(topFile));
+
+console.log(mainPkg.version);
+
+const shellPkg = JSON.parse(fs.readFileSync(shellFile));
+
+console.log(shellPkg.version);
+
+Object.keys(shellPkg.dependencies).forEach(k => {
+  const version = mainPkg.dependencies[k] || mainPkg.devDependencies[k];
+  const current = shellPkg.dependencies[k];
+
+  if (version) {
+    console.log(`Syncing ${ k } -> ${ version } was ${ current }`);
+    shellPkg.dependencies[k] = version;
+  }
+});
+
+fs.writeFileSync(shellFile, JSON.stringify(shellPkg, undefined, 2));
+

package/scripts/test-plugins-build.sh

@@ -67,7 +67,10 @@ else
 fi
 
 export YARN_REGISTRY=http://localhost:4873
-export NEXT_TELEMETRY_DISABLED=1
+export NUXT_TELEMETRY_DISABLED=1
+
+# Remove test package from previous run, if present
+rm -rf ${BASE_DIR}/pkg/test-pkg
 
 # 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
@@ -92,21 +95,21 @@ if [ "${SKIP_STANDALONE}" == "false" ]; then
   yarn install
 
   echo "Building skeleton app"
-  yarn build
+  FORCE_COLOR=true yarn build | cat
 
   # Package creator
   echo "Verifying package creator package"
   yarn create @rancher/pkg test-pkg
 
   echo "Building test package"
-  yarn build-pkg test-pkg
+  FORCE_COLOR=true yarn build-pkg test-pkg | cat
 
   # Add test list component to the test package
   # Validates rancher-components imports
   mkdir pkg/test-pkg/list
   cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue pkg/test-pkg/list
 
-  yarn build-pkg test-pkg
+  FORCE_COLOR=true yarn build-pkg test-pkg | cat
 
   echo "Cleaning temporary dir"
   popd > /dev/null
@@ -126,7 +129,7 @@ yarn install
 rm -rf ./pkg/test-pkg
 yarn create @rancher/pkg test-pkg -t
 cp ${SHELL_DIR}/list/catalog.cattle.io.clusterrepo.vue ./pkg/test-pkg/list
-yarn build-pkg test-pkg
+FORCE_COLOR=true yarn build-pkg test-pkg | cat
 rm -rf ./pkg/test-pkg
 
 echo "All done"

package/scripts/typegen.sh

@@ -0,0 +1,84 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
+SHELL_DIR=$BASE_DIR/shell
+
+echo "Generating typescript definitions"
+
+rm -rf ${SHELL_DIR}/tmp
+mkdir -p ${SHELL_DIR}/tmp
+
+echo "Generating ..."
+
+# utils
+${BASE_DIR}/node_modules/.bin/tsc shell/utils/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/utils > /dev/null
+
+# config
+${BASE_DIR}/node_modules/.bin/tsc shell/config/query-params.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc shell/config/table-headers.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc shell/config/types.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/config > /dev/null
+
+# store
+${BASE_DIR}/node_modules/.bin/tsc shell/store/features.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/store > /dev/null
+
+# plugins
+${BASE_DIR}/node_modules/.bin/tsc shell/plugins/dashboard-store/normalize.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+${BASE_DIR}/node_modules/.bin/tsc shell/plugins/dashboard-store/resource-class.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store/ > /dev/null
+
+
+# mkixins
+${BASE_DIR}/node_modules/.bin/tsc shell/mixins/create-edit-view/index.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/mixins/create-edit-view > /dev/null
+
+#./node_modules/.bin/tsc shell/plugins/dashboard-store/*.js --declaration --allowJs --emitDeclarationOnly --outDir ${SHELL_DIR}/tmp/plugins/dashboard-store > /dev/null
+
+# Go through all of the folders and combine by wrapping with 'declare module'
+
+echo "Combining type definitions ..."
+
+DEST=${SHELL_DIR}/types/shell
+mkdir -p ${DEST}
+
+INDEX=${DEST}/index.d.ts
+rm -rf ${INDEX}
+
+echo "// Auto-generated type definitions for shell" > ${INDEX}
+echo "// Do not modify this file as changes will get overwritten" >> ${INDEX}
+
+# Copy in the vue shim type definitions
+if [ -f "$BASE_DIR/vue-shim.d.ts" ]; then
+  cat "$BASE_DIR/vue-shim.d.ts" >> ${INDEX}
+fi
+
+function processDir() {
+  local dir=$1
+  local basePkg=$2
+
+  for entry in $1/*
+  do
+    local filename=$(basename $entry)
+
+    if [ -d $entry ]; then
+      processDir $entry $basePkg/$filename
+    else
+      if [[ $filename == *.d.ts ]]; then
+        # We use convoluted mechanism here to ensure this works on mac with bash 3.x
+        local name=$(echo $filename | rev | cut -c6- | rev)
+
+        local module=${basePkg}/${name}
+        if [ "${name}" == "index" ]; then
+          module=${basePkg}
+        fi
+
+        echo -e "\n// ${module}\n" >> ${INDEX}
+        echo "declare module '${module}' {" >> ${INDEX}
+        cat $entry >> ${INDEX}
+        echo -e "}" >> ${INDEX}
+      fi
+    fi
+  done
+}
+
+processDir ${SHELL_DIR}/tmp @shell
+
+rm -rf ${SHELL_DIR}/tmp

package/store/auth.js

@@ -310,6 +310,9 @@ export const actions = {
   },
 
   async logout({ dispatch, commit }) {
+    // Unload plugins - we will load again on login
+    await this.$plugin.logout();
+
     try {
       await dispatch('rancher/request', {
         url:                  '/v3/tokens?action=logout',

package/store/catalog.js

@@ -61,6 +61,11 @@ export const getters = {
     return [...clustered, ...namespaced];
   },
 
+  // Raw charts
+  rawCharts(state) {
+    return state.charts;
+  },
+
   repo(state, getters) {
     return ({ repoType, repoName }) => {
       const ary = (repoType === 'cluster' ? state.clusterRepos : state.namespacedRepos);
@@ -250,19 +255,13 @@ export const getters = {
 
   haveComponent() {
     return (name) => {
-      try {
-        require.resolve(`@shell/chart/${ name }`);
-
-        return true;
-      } catch (e) {
-        return false;
-      }
+      return getters['type-map/hasCustomChart'](name);
     };
   },
 
   importComponent(state, getters) {
     return (name) => {
-      return importChart(name);
+      return getters['type-map/importChart'](name);
     };
   },
 
@@ -340,6 +339,7 @@ export const actions = {
     // Installing an app? This is fine (in cluster store)
     // Fetching list of cluster templates? This is fine (in management store)
     // Installing a cluster template? This isn't fine (in cluster store as per installing app, but if there is no cluster we need to default to management)
+
     const inStore = rootGetters['currentCluster'] ? rootGetters['currentProduct'].inStore : 'management';
 
     if ( rootGetters[`${ inStore }/schemaFor`](CATALOG.CLUSTER_REPO) ) {
@@ -517,6 +517,7 @@ function addChart(ctx, map, chart, repo) {
       chartName:            chart.name,
       chartNameDisplay:     chart.annotations?.[CATALOG_ANNOTATIONS.DISPLAY_NAME] || chart.name,
       chartDescription:     chart.description,
+      featured:             chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED],
       repoKey:              repo._key,
       versions:             [],
       categories:           filterCategories(chart.keywords),

package/store/i18n.js

@@ -139,6 +139,14 @@ export const getters = {
     return state.default;
   },
 
+  multiWithFallback: (state, getters) => (items, key = 'key') => {
+    return items.map((item) => {
+      item[key] = getters.withFallback(item[key], null, item[key]);
+
+      return item;
+    });
+  },
+
   withFallback: (state, getters) => (key, args, fallback, fallbackIsKey = false) => {
     // Support withFallback(key,fallback) when no args
     if ( !fallback && typeof args === 'string' ) {
@@ -153,7 +161,8 @@ export const getters = {
     } else {
       return fallback;
     }
-  }
+  },
+
 };
 
 export const mutations = {

package/store/index.js

@@ -26,6 +26,7 @@ import {
   NAMESPACE_FILTER_NAMESPACED_PREFIX as NAMESPACED_PREFIX,
   splitNamespaceFilterKey,
 } from '@shell/utils/namespace-filter';
+import { gcActions, gcGetters } from '@shell/utils/gc/gc-root-store';
 
 // Disables strict mode for all store instances to prevent warning about changing state outside of mutations
 // because it's more efficient to do that sometimes.
@@ -44,6 +45,7 @@ export const plugins = [
     namespace:      'cluster',
     baseUrl:        '', // URL is dynamically set for the selected cluster
     supportsStream: false, // true, -- Disabled due to report that it's sometimes much slower in Chrome
+    supportsGc:     true, // Enable garbage collection for this store only
   }),
   Steve({
     namespace:      'rancher',
@@ -455,7 +457,9 @@ export const getters = {
     const cluster = getters['currentCluster'];
 
     return cluster?.status?.provider === VIRTUAL_HARVESTER_PROVIDER;
-  }
+  },
+
+  ...gcGetters
 };
 
 export const mutations = {
@@ -539,7 +543,8 @@ export const mutations = {
 
   setIsSingleProduct(state, isSingleProduct) {
     state.isSingleProduct = isSingleProduct;
-  }
+  },
+
 };
 
 export const actions = {
@@ -861,6 +866,8 @@ export const actions = {
   async onLogout(store) {
     const { dispatch, commit, state } = store;
 
+    store.dispatch('gcStopIntervals');
+
     Object.values(this.$plugin.getPlugins()).forEach((p) => {
       if (p.onLogOut) {
         p.onLogOut(store);
@@ -975,5 +982,7 @@ export const actions = {
 
   setIsSingleProduct({ commit }, isSingleProduct) {
     commit(`setIsSingleProduct`, isSingleProduct);
-  }
+  },
+
+  ...gcActions
 };

package/store/prefs.js

@@ -15,6 +15,7 @@ export const create = function(name, def, opt = {}) {
   const asCookie = opt.asCookie === true;
   const asUserPreference = opt.asUserPreference !== false;
   const options = opt.options;
+  const inheritFrom = opt.inheritFrom;
 
   definitions[name] = {
     def,
@@ -22,6 +23,7 @@ export const create = function(name, def, opt = {}) {
     parseJSON,
     asCookie,
     asUserPreference,
+    inheritFrom, // if value is not defined on server, we can default it to another pref
     mangleRead:  opt.mangleRead, // Alter the value read from the API (to match old Rancher expectations)
     mangleWrite: opt.mangleWrite, // Alter the value written back to the API (ditto)
   };
@@ -72,6 +74,7 @@ export const HIDE_REPOS = create('hide-repos', [], { parseJSON });
 export const HIDE_DESC = create('hide-desc', [], { parseJSON });
 export const HIDE_SENSITIVE = create('hide-sensitive', true, { options: [true, false], parseJSON });
 export const SHOW_PRE_RELEASE = create('show-pre-release', false, { options: [false, true], parseJSON });
+export const SHOW_CHART_MODE = create('chartMode', 'featured', { parseJSON });
 
 export const DATE_FORMAT = create('date-format', 'ddd, MMM D YYYY', {
   options: [
@@ -91,12 +94,18 @@ export const TIME_FORMAT = create('time-format', 'h:mm:ss a', {
 });
 
 export const TIME_ZONE = create('time-zone', 'local');
+// DEV will be deprecated on v2.7.0, but is needed so that we can grab the value for the new settings that derived from it
+// such as: VIEW_IN_API, ALL_NAMESPACES, THEME_SHORTCUT
 export const DEV = create('dev', false, { parseJSON });
+export const VIEW_IN_API = create('view-in-api', false, { parseJSON, inheritFrom: DEV });
+export const ALL_NAMESPACES = create('all-namespaces', false, { parseJSON, inheritFrom: DEV });
+export const THEME_SHORTCUT = create('theme-shortcut', false, { parseJSON, inheritFrom: DEV });
 export const LAST_VISITED = create('last-visited', 'home', { parseJSON });
 export const SEEN_WHATS_NEW = create('seen-whatsnew', '', { parseJSON });
 export const READ_WHATS_NEW = create('read-whatsnew', '', { parseJSON });
 export const AFTER_LOGIN_ROUTE = create('after-login-route', 'home', { parseJSON } );
 export const HIDE_HOME_PAGE_CARDS = create('home-page-cards', {}, { parseJSON } );
+export const PLUGIN_DEVELOPER = create('plugin-developer', false, { parseJSON, inheritFrom: DEV }); // Is the user a plugin developer?
 
 export const _RKE1 = 'rke1';
 export const _RKE2 = 'rke2';
@@ -105,6 +114,9 @@ export const PROVISIONER = create('provisioner', _RKE1, { options: [_RKE1, _RKE2
 // Promo for Cluster Tools feature on Cluster Dashboard page
 export const CLUSTER_TOOLS_TIP = create('hide-cluster-tools-tip', false, { parseJSON });
 
+// Promo for Pod Security Policies (PSPs) being deprecated on kube version 1.25 on Cluster Dashboard page
+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 });
 
@@ -431,6 +443,10 @@ export const actions = {
       const definition = definitions[key];
       let value = clone(server.data[key]);
 
+      if (value === undefined && definition.inheritFrom) {
+        value = clone(server.data[definition.inheritFrom]);
+      }
+
       if ( value === undefined || key === ignoreKey) {
         continue;
       }