@rancher/shell 0.3.4 → 0.3.6

package/plugins/steve/subscribe.js

@@ -21,6 +21,7 @@ import Socket, {
   EVENT_DISCONNECT_ERROR,
   NO_WATCH,
   NO_SCHEMA,
+  REVISION_TOO_OLD
 } from '@shell/utils/socket';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import day from 'dayjs';
@@ -29,8 +30,6 @@ import { escapeHtml } from '@shell/utils/string';
 import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { waitFor } from '@shell/utils/async';
 
-// eslint-disable-next-line
-import storeWorker from './worker/index.js';
 import { BLANK_CLUSTER } from '@shell/store/index.js';
 
 // minimum length of time a disconnect notification is shown
@@ -97,7 +96,7 @@ export async function createWorker(store, ctx) {
 
   if (!store.$workers[storeName]) {
     const workerMode = advancedWorker ? 'advanced' : 'basic';
-    const worker = storeWorker(workerMode);
+    const worker = store.steveCreateWorker(workerMode);
 
     store.$workers[storeName] = worker;
 
@@ -307,8 +306,13 @@ const sharedActions = {
     }
 
     // If socket is in error don't try to watch.... unless we `force` it
-    if ( !stop && !force && !getters.canWatch(params) ) {
-      console.error(`Cannot Watch [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
+    const inError = getters.inError(params);
+
+    if ( !stop && !force && inError ) {
+      // REVISION_TOO_OLD is a temporary state and will be handled when `resyncWatch` completes
+      if (inError !== REVISION_TOO_OLD) {
+        console.error(`Aborting Watch Request [${ getters.storeName }]. Watcher in error (${ inError })`, JSON.stringify(params)); // eslint-disable-line no-console
+      }
 
       return;
     }
@@ -316,7 +320,10 @@ const sharedActions = {
     if ( !stop && getters.watchStarted({
       type, id, selector, namespace
     }) ) {
-      state.debugSocket && console.debug(`Already Watching [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
+      // eslint-disable-next-line no-console
+      state.debugSocket && console.debug(`Already Watching [${ getters.storeName }]`, {
+        type, id, selector, namespace
+      });
 
       return;
     }
@@ -347,7 +354,7 @@ const sharedActions = {
       msg.selector = selector;
     }
 
-    const worker = this.$workers[getters.storeName] || {};
+    const worker = this.$workers?.[getters.storeName] || {};
 
     if (worker.mode === 'advanced') {
       if ( force ) {
@@ -362,12 +369,17 @@ const sharedActions = {
     return dispatch('send', msg);
   },
 
-  unwatch(ctx, type) {
+  unwatch(ctx, {
+    type, id, namespace, selector
+  }) {
     const { commit, getters, dispatch } = ctx;
 
     if (getters['schemaFor'](type)) {
       const obj = {
         type,
+        id,
+        namespace,
+        selector,
         stop: true, // Stops the watch on a type
       };
 
@@ -675,14 +687,30 @@ const defaultActions = {
   /**
    * Steve only event
    */
-  'ws.resource.start'({ state, getters, commit }, msg) {
+  'ws.resource.start'({
+    state, getters, commit, dispatch
+  }, msg) {
     state.debugSocket && console.info(`Resource start: [${ getters.storeName }]`, msg); // eslint-disable-line no-console
-    commit('setWatchStarted', {
+
+    const newWatch = {
       type:      msg.resourceType,
       namespace: msg.namespace,
       id:        msg.id,
       selector:  msg.selector
+    };
+
+    state.started.filter((entry) => {
+      if (
+        entry.type === newWatch.type &&
+        entry.namespace !== newWatch.namespace
+      ) {
+        return true;
+      }
+    }).forEach((entry) => {
+      dispatch('unwatch', entry);
     });
+
+    commit('setWatchStarted', newWatch);
   },
 
   'ws.resource.error'({ getters, commit, dispatch }, msg) {
@@ -695,6 +723,10 @@ const defaultActions = {
     } else if ( err.includes('failed to find schema') ) {
       commit('setInError', { type: msg.resourceType, reason: NO_SCHEMA });
     } else if ( err.includes('too old') ) {
+      // Set an error for (all) subs of this type. This..
+      // 1) blocks attempts by resource.stop to resub (as type is in error)
+      // 2) will be cleared when resyncWatch --> watch (with force) --> resource.start completes
+      commit('setInError', { type: msg.resourceType, reason: REVISION_TOO_OLD });
       dispatch('resyncWatch', msg);
     }
   },
@@ -702,12 +734,15 @@ const defaultActions = {
   /**
    * Steve only event
    *
-   * Steve only seems to send out `resource.stop` messages for two reasons
-   * - We have requested that the resource watch should be stopped and we receive this event as confirmation
-   * - Steve tells us that the resource is no longer watched
-   *
+   * Steve has stopped watching this resource. This happens for a couple of reasons
+   * - We have requested that the resource watch should be stopped (and we receive this event as confirmation)
+   * - Steve tells us that the resource watch has been stopped. Possible reasons
+   *   - The rancher <--> k8s socket closed (happens every ~30 mins on mgmt socket)
+   *   - Permissions has changed for the subscribed resource, so rancher closes socket
    */
-  'ws.resource.stop'({ getters, commit, dispatch }, msg) {
+  'ws.resource.stop'({
+    state, getters, commit, dispatch
+  }, msg) {
     const type = msg.resourceType;
     const obj = {
       type,
@@ -716,51 +751,23 @@ const defaultActions = {
       selector:  msg.selector
     };
 
-    // console.warn(`Resource stop: [${ getters.storeName }]`, msg); // eslint-disable-line no-console
+    state.debugSocket && console.info(`Resource Stop [${ getters.storeName }]`, type, msg); // eslint-disable-line no-console
+
+    if (!type) {
+      console.error(`Resource Stop [${ getters.storeName }]. Received resource.stop with an empty resourceType, aborting`, msg); // eslint-disable-line no-console
+
+      return;
+    }
 
     // If we're trying to watch this event, attempt to re-watch
     if ( getters['schemaFor'](type) && getters['watchStarted'](obj) ) {
       commit('setWatchStopped', obj);
-
-      // In summary, we need to re-watch but with a reliable `revision` (to avoid `too old` message kicking off a full re-fetch of all
-      // resources). To get a reliable `revision` go out and fetch the latest for that resource type, in theory our local cache should be
-      // up to date with that revision.
-
-      const revisionExisting = getters.nextResourceVersion(type, obj.id);
-
-      let revisionLatest;
-
-      if (revisionExisting) {
-        // Attempt to fetch the latest revision at the time the resource watch was stopped, in theory our local cache should be up to
-        // date with this
-        // Ideally we shouldn't need to fetch here and supply `0`, `-1` or `null` to start watching from the latest revision, however steve
-        // will send the current state of each resource via a `resource.created` event.
-        const opt = { limit: 1 };
-
-        opt.url = getters.urlFor(type, null, opt);
-        revisionLatest = dispatch('request', { opt, type } )
-          .then(res => res.revision)
-          .catch((err) => {
-            // For some reason we can't fetch a reasonable revision, so force a re-fetch
-            console.warn(`Resource error retrieving resourceVersion, forcing re-fetch`, type, ':', err); // eslint-disable-line no-console
-            dispatch('resyncWatch', msg);
-            throw err;
-          });
-      } else {
-        // Some v1 resource types don't have revisions (either at the collection or resource level), so we avoided making an API request
-        // for them
-        revisionLatest = Promise.resolve(null); // Null to ensure we don't go through `nextResourceVersion` again
-      }
-
-      setTimeout(() => {
-        // Delay a bit so that immediate start/error/stop causes
-        // only a slow infinite loop instead of a tight one.
-        revisionLatest.then(revision => dispatch('watch', { ...obj, revision }));
-      }, 5000);
+      dispatch('watch', obj);
     }
   },
 
   'ws.resource.create'(ctx, msg) {
+    ctx.state.debugSocket && console.info(`Resource Create [${ ctx.getters.storeName }]`, msg.resourceType, msg); // eslint-disable-line no-console
     queueChange(ctx, msg, true, 'Create');
   },
 
@@ -811,6 +818,8 @@ const defaultActions = {
     const data = msg.data;
     const type = data.type;
 
+    ctx.state.debugSocket && console.info(`Resource Remove [${ ctx.getters.storeName }]`, type, msg); // eslint-disable-line no-console
+
     if (type === SCHEMA) {
       const worker = (this.$workers || {})[ctx.getters.storeName];
 
@@ -914,8 +923,8 @@ const defaultMutations = {
  * Getters that cover cases 1 & 2 (see file description)
  */
 const defaultGetters = {
-  canWatch: state => (obj) => {
-    return !state.inError[keyForSubscribe(obj)];
+  inError: state => (obj) => {
+    return state.inError[keyForSubscribe(obj)];
   },
 
   watchStarted: state => (obj) => {

package/plugins/steve-create-worker.js

@@ -0,0 +1,14 @@
+import createWorker from './steve/worker/index.js';
+
+/**
+ * Link the steve worker creator to the store
+ *
+ * This is done to allow disassociate (no import chain) access to the steve worker file.
+ * Without this third party plugins (in given scenarios / harvester) will fail to build
+ * due to missing web worker specific build config
+ *
+ * Note - When rancher/steve store is spun out in to a extension this also needs to move out
+ */
+export default function({ store }) {
+  store.steveCreateWorker = createWorker;
+}

package/promptRemove/management.cattle.io.globalrole.vue

@@ -23,14 +23,14 @@ export default {
   <div>
     <template>
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-html="resourceNames(names, plusMore, t)"
+        v-clean-html="resourceNames(names, plusMore, t)"
       />
     </template>
     <div
       v-if="info"
       class="text info mb-10 mt-20"
     >
-      <span v-html="info" />
+      <span v-clean-html="info" />
     </div>
     <div
       v-if="warning"

package/promptRemove/management.cattle.io.project.vue

@@ -100,8 +100,8 @@ export default {
         <template v-if="!canSeeProjectlessNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
+            v-clean-html="resourceNames(names, plusMore, t)"
             class="mt-10"
-            v-html="resourceNames(names, plusMore, t)"
           />
         </template>
       </div>
@@ -114,7 +114,7 @@ export default {
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">
-          <span v-html="resourceNames(names, plusMore, t)" />
+          <span v-clean-html="resourceNames(names, plusMore, t)" />
         </div>
       </div>
     </div>

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -23,14 +23,14 @@ export default {
   <div>
     <template>
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-html="resourceNames(names, plusMore, t)"
+        v-clean-html="resourceNames(names, plusMore, t)"
       />
     </template>
     <div
       v-if="info"
       class="text info mb-10 mt-20"
     >
-      <span v-html="info" />
+      <span v-clean-html="info" />
     </div>
     <div
       v-if="warning"

package/promptRemove/pod.vue

@@ -108,8 +108,8 @@ export default {
   <div class="mt-10">
     <div class="mb-30">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+        v-clean-html="podNames"
         class="machine-name"
-        v-html="podNames"
       />
     </div>
     <div class="mb-30">

package/public/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" type="image/x-icon" href="/public/favicon.png">
+    <title>Rancher</title>
+</head>
+
+<body>
+    <div id="app">
+        <script>
+            (() => {
+                const isDark = document.cookie.includes('R_PCS=dark');
+                const color = isDark ? '#1b1c21' : '#FFF';
+                const style = document.createElement('style');
+                style.innerHTML = ':root { --loading-bg-color: ' + color + ';}';
+                document.getElementsByTagName('head')[0].prepend(style);
+            })();
+        </script>
+        <style>
+            .initial-load-spinner-container {
+                align-items: center;
+                background-color: var(--loading-bg-color);
+                display: flex;
+                justify-content: center;
+                height: 100vh;
+                left: 0;
+                position: absolute;
+                top: 0;
+                width: 100vw;
+            }
+
+            .initial-load-spinner {
+                animation: initial-load-animate 1s infinite linear;
+                background-color: var(--loading-bg-color);
+                box-sizing: border-box;
+                border: 5px solid #008ACF;
+                border-radius: 50%;
+                border-top-color: #00B2E2;
+                display: inline-block;
+                height: 80px;
+                margin: 0 auto;
+                width: 80px;
+            }
+
+            @keyframes initial-load-animate {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(359deg);
+                }
+            }
+        </style>
+        <div class="initial-load-spinner-container">
+            <i class="initial-load-spinner"></i>
+        </div>
+    </div>
+</body>
+
+</html>

package/rancher-components/components/Banner/Banner.test.ts

@@ -1,10 +1,16 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
-    const wrapper = mount(Banner, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
 
     const element = wrapper.find('span').element;
 

package/rancher-components/components/Banner/Banner.vue

@@ -95,7 +95,7 @@ export default Vue.extend({
         <span v-else-if="messageLabel">{{ messageLabel }}</span>
         <span
           v-else
-          v-html="nlToBr(label)"
+          v-clean-html="nlToBr(label)"
         />
       </slot>
       <div
@@ -164,6 +164,7 @@ $icon-size: 24px;
     width: 100%;
     border-left: solid $left-border-size transparent;
     display: flex;
+    gap: 3px;
 
     .primary & {
       background: var(--primary);

package/rancher-components/components/Form/Checkbox/Checkbox.vue

@@ -5,6 +5,8 @@ import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
 export default Vue.extend({
+  name: 'Checkbox',
+
   props: {
     /**
      * The checkbox value.

package/rancher-components/components/Form/Radio/RadioButton.test.ts

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import { RadioButton } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
+
+describe('RadioButton.vue', () => {
+  it('renders label slot contents', () => {
+    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
+
+    expect(wrapper.find('.radio-label').text()).toBe('Test Label');
+  });
+
+  it('renders label prop contents', () => {
+    const wrapper = shallowMount(
+      RadioButton,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label: 'Test Label' }
+      });
+
+    expect(wrapper.find('.radio-label').text()).toBe('Test Label');
+  });
+
+  it('renders slot contents when both slot and label prop are provided', () => {
+    const wrapper = shallowMount(RadioButton, {
+      slots:     { label: 'Test Label - Slot' },
+      propsData: { label: 'Test Label - Props' },
+    });
+
+    expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');
+  });
+});

package/rancher-components/components/Form/Radio/RadioButton.vue

@@ -96,6 +96,10 @@ export default Vue.extend({
     hasDescriptionSlot(): boolean {
       return !!this.$slots.description;
     },
+
+    hasLabelSlot(): boolean {
+      return !!this.$slots.label || !!this.$scopedSlots.label;
+    }
   },
 
   watch: {
@@ -149,12 +153,19 @@ export default Vue.extend({
     />
     <div class="labeling">
       <label
-        v-if="label"
         :class="[ muteLabel ? 'text-muted' : '', 'radio-label', 'm-0']"
         :for="name"
-        v-html="label"
       >
-        <slot name="label">{{ label }}</slot>
+        <slot
+          v-if="hasLabelSlot"
+          name="label"
+        >
+          <!-- slot content -->
+        </slot>
+        <span
+          v-else-if="label"
+          v-clean-html="label"
+        />
       </label>
       <div
         v-if="descriptionKey || description"

package/scripts/build-pkg.sh

@@ -40,6 +40,7 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   echo "  Package name:    ${NAME}"
   echo "  Package version: ${VERSION}"
   echo "  Output formats:  ${FORMATS}"
+  echo "  Output directory: ${PKG_DIST}"
   rm -rf ${PKG_DIST}
   mkdir -p ${PKG_DIST}
 

package/scripts/clean

@@ -0,0 +1,6 @@
+#!/bin/bash
+set -e
+
+cd $(dirname $0)/..
+
+rm -rf dist .nuxt* node_modules/.cache

package/scripts/extension/bundle

@@ -0,0 +1,58 @@
+#!/usr/bin/env bash
+
+BASE_DIR="$(pwd)"
+
+CYAN="\033[96m"
+RED="\033[91m"
+RESET="\033[0m"
+BOLD="\033[1m"
+
+TMP=${BASE_DIR}/tmp
+CHART_TEMPLATE=${TMP}/ui-plugin-server
+
+PKG="${1}"
+PKG_VERSION="${2}"
+REGISTRY="${3}"
+REGISTRY_ORG="${4}"
+IMAGE_PREFIX="${5}"
+PUSH="${6}"
+
+PKG_NAME="${PKG}-${PKG_VERSION}"
+
+# --------------------------------------------------------------------------------
+# Create the container image
+# --------------------------------------------------------------------------------
+mkdir -p ${TMP}/container
+cp -R ${CHART_TEMPLATE}/* ${TMP}/container/    
+
+# Copy the plugin assets
+rm -rf ${TMP}/container/plugin
+mkdir ${TMP}/container/plugin
+
+cp -R ${BASE_DIR}/dist-pkg/${PKG_NAME}/* ${TMP}/container/plugin
+rm -f ${TMP}/container/plugin/report.html
+
+# Build the docker image
+pushd ${TMP}/container > /dev/null
+echo -e "${CYAN}Building container image ...${RESET}"
+
+if [ ! -z "${REGISTRY}" ]; then
+  REGISTRY=${REGISTRY} ORG=${REGISTRY_ORG} REPO=${IMAGE_PREFIX}${PKG} TAG=${PKG_VERSION} ./scripts/package
+
+  if [ "${PUSH}" == "--push" ]; then
+    echo -e "${CYAN}Pushing container image ...${RESET}"
+
+    # Ensure that you do not overwrite production images
+    if [[ "${REGISTRY_ORG}" == "rancher" ]]; then
+      IMAGE=${REGISTRY}${REGISTRY_ORG}/${IMAGE_PREFIX}${PKG}:${PKG_VERSION}
+      if docker manifest inspect 2>&1 1>/dev/null; then
+        echo -e "${RED}${BOLD}Cannot overwrite production image ${IMAGE_PREFIX}${PKG} since it already exists${RESET}"
+        exit 1
+      fi
+    fi
+
+    docker push ${REGISTRY}${REGISTRY_ORG}/${IMAGE_PREFIX}${PKG}:${PKG_VERSION}
+  fi
+fi
+
+popd > /dev/null

package/scripts/extension/helmpatch

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+// Update Chart.yaml and values.yaml files
+
+const fs = require('fs');
+const path = require('path');
+const yaml = require('js-yaml');
+
+// TODO: Should already be in the template
+// const UI_PLUGIN_ANNOTATION_NAME = 'catalog.cattle.io/ui-component';
+// const UI_PLUGIN_ANNOTATION_VALUE = 'plugins';
+
+console.log('Helm file update');
+
+if (process.argv.length !== 5) {
+  console.log('Incorrect number of arguments');
+  process.exit(1);
+}
+
+const destFolder = process.argv[2];
+const pkgFilePath = process.argv[3];
+const image = process.argv[4];
+
+const pkgFile = JSON.parse(fs.readFileSync(pkgFilePath, 'utf8'));
+
+const chartFolder = destFolder;
+const chartFile = path.join(chartFolder, 'Chart.yaml');
+const valuesFile = path.join(chartFolder, 'values.yaml');
+
+if (!fs.existsSync(chartFolder)) {
+  console.log('Charts folder does not exist');
+  process.exit(1);
+}
+
+// --------------------------------------------------------------------------------
+// Chart.yaml
+// --------------------------------------------------------------------------------
+const chart = yaml.load(fs.readFileSync(chartFile, 'utf8'));
+let updated = false;
+
+// Add in annotations to match any rules in the package file
+if (pkgFile.rancher && typeof pkgFile.rancher === 'object') {
+  // See if there are any annotations and merge them in, if there are
+  if (pkgFile.rancher.annotations) {
+    chart.annotations = chart.annotations || {};
+    Object.keys(pkgFile.rancher.annotations).forEach((key) => {
+      chart.annotations[key] = pkgFile.rancher.annotations[key];
+      updated = true;
+    });
+  }
+}
+
+if (updated ){
+  // Write out updated file
+  const str = yaml.dump(chart);
+
+  fs.writeFileSync(chartFile, str, 'utf8');
+}
+
+// chart.name = pkgFile.name;
+// chart.appVersion = pkgFile.version;
+// chart.version = pkgFile.version;
+// chart.description = pkgFile.description || `${pkgFile.name} ui plugin `;
+// chart.annotations[UI_PLUGIN_ANNOTATION_NAME] = UI_PLUGIN_ANNOTATION_VALUE;
+
+// if (pkgFile.icon) {
+//   chart.icon = pkgFile.icon;
+// }
+
+// if (pkgFile.keywords) {
+//   chart.keywords = pkgFile.keywords;
+// } else {
+//   chart.keywords = [];
+// }
+
+// if (pkgFile.homepage) {
+//   chart.home = pkgFile.homepage;
+// }
+
+// --------------------------------------------------------------------------------
+// values.yaml
+// --------------------------------------------------------------------------------
+
+const values = yaml.load(fs.readFileSync(valuesFile, 'utf8'));
+
+values.pluginServer.image.repository = `${image}`;
+
+const valuesYaml = yaml.dump(values, {quotingType: '"' });
+fs.writeFileSync(valuesFile, valuesYaml, 'utf8');