@rancher/shell 0.1.4 → 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,8 +6,14 @@ BASE_DIR="$(
   pwd
 )"
 SHELL_DIR=$BASE_DIR/shell/
+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"
 
 # We use the version from the shell package for the creator 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/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/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
 };