@rancher/shell 0.3.5 → 0.3.6

package/pages/c/_cluster/apps/charts/install.vue

@@ -1191,16 +1191,29 @@ export default {
         }
       }
 
-      /* Chart custom UI components have the ability to edit CRD chart values
-        apply those values in addition to the global values being copied over frm the primary chart
+      /* Chart custom UI components have the ability to edit CRD chart values eg gatekeeper-crd has values.enableRuntimeDefaultSeccompProfile
+        like the main chart, only CRD values that differ from defaults should be sent on install/upgrade
+        CRDs should be installed with the same global values as the main chart
       */
       for (const versionInfo of this.autoInstallInfo) {
+        // allValues are the values potentially changed in the installation ui: any previously customized values + defaults
+        // values are default values from the chart
+        const { allValues, values: crdValues } = versionInfo;
+
+        // only save crd values that differ from the defaults defined in chart values.yaml
+        const customizedCrdValues = diff(crdValues, allValues);
+
+        // CRD globals should be overwritten by main chart globals
+        // we want to avoid including globals present on crd values and not main chart values
+        // that covers the scenario where a global value was customized on a previous install (and so is present in crd global vals) and the user has reverted it to default on this update (no longer present in main chart global vals)
+        const crdValuesToInstall = { ...customizedCrdValues, global: values.global };
+
         out.charts.unshift({
           chartName:   versionInfo.chart.name,
           version:     versionInfo.chart.version,
           releaseName: versionInfo.chart.annotations[CATALOG_ANNOTATIONS.RELEASE_NAME] || chart.name,
           projectId:   this.project,
-          values:      merge(versionInfo.values, this.addGlobalValuesTo({ global: values.global }))
+          values:      crdValuesToInstall
         });
       }
       /*
@@ -1487,42 +1500,44 @@ export default {
         </div>
       </template>
       <template #helmValues>
-        <Banner
-          v-if="step2Description"
-          color="info"
-          class="description"
-        >
-          {{ step2Description }}
-        </Banner>
-        <div class="step__values__controls">
-          <ButtonGroup
-            v-model="preFormYamlOption"
-            :options="formYamlOptions"
-            inactive-class="bg-disabled btn-sm"
-            active-class="bg-primary btn-sm"
-            :disabled="preFormYamlOption != formYamlOption"
-          />
-          <div class="step__values__controls--spacer">
-&nbsp;
-          </div>
-          <ButtonGroup
-            v-if="showDiff"
-            v-model="diffMode"
-            :options="yamlDiffModeOptions"
-            inactive-class="bg-disabled btn-sm"
-            active-class="bg-primary btn-sm"
-          />
-          <div
-            v-if="hasReadme && !showingReadmeWindow"
-            class="btn-group"
+        <div class="sticky-header">
+          <Banner
+            v-if="step2Description"
+            color="info"
+            class="description"
           >
-            <button
-              type="button"
-              class="btn bg-primary btn-sm"
-              @click="showSlideIn = !showSlideIn"
+            {{ step2Description }}
+          </Banner>
+          <div class="step__values__controls">
+            <ButtonGroup
+              v-model="preFormYamlOption"
+              :options="formYamlOptions"
+              inactive-class="bg-disabled btn-sm"
+              active-class="bg-primary btn-sm"
+              :disabled="preFormYamlOption != formYamlOption"
+            />
+            <div class="step__values__controls--spacer">
+  &nbsp;
+            </div>
+            <ButtonGroup
+              v-if="showDiff"
+              v-model="diffMode"
+              :options="yamlDiffModeOptions"
+              inactive-class="bg-disabled btn-sm"
+              active-class="bg-primary btn-sm"
+            />
+            <div
+              v-if="hasReadme && !showingReadmeWindow"
+              class="btn-group"
             >
-              {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
-            </button>
+              <button
+                type="button"
+                class="btn bg-primary btn-sm"
+                @click="showSlideIn = !showSlideIn"
+              >
+                {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
+              </button>
+            </div>
           </div>
         </div>
         <div class="scroll__container">
@@ -1945,8 +1960,6 @@ export default {
   .scroll {
     &__container {
       $yaml-height: 200px;
-      display: flex;
-      flex: 1;
       min-height: $yaml-height;
       height: 0;
     }
@@ -2045,4 +2058,13 @@ export default {
   margin-top: 5px;
 }
 
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  background: var(--primary-text);
+}
+
 </style>

package/pages/diagnostic.vue

@@ -18,7 +18,7 @@ export default {
     const clusterForCounts = filterHiddenLocalCluster(filterOnlyKubernetesClusters(readyClusters), this.$store);
     const finalCounts = [];
     const promises = [];
-    let topTenForResponseTime = [];
+    const topFifteenForResponseTime = [];
 
     clusterForCounts.forEach((cluster, i) => {
       // Necessary to retrieve the proper display name of the cluster
@@ -42,6 +42,7 @@ export default {
 
       if (counts) {
         const sanitizedCount = [];
+        let finalCount = [];
 
         Object.keys(counts).forEach((key) => {
           sanitizedCount[key] = counts[key].summary?.count;
@@ -53,20 +54,22 @@ export default {
 
         const sortedCount = sortBy(sanitizedCount, 'count:desc');
 
-        topTenForResponseTime = topTenForResponseTime.concat(sortedCount);
-        topTenForResponseTime = sortBy(topTenForResponseTime, 'count:desc');
-        topTenForResponseTime = topTenForResponseTime.splice(0, 15);
+        finalCount = finalCount.concat(sortedCount);
+        finalCount = sortBy(finalCount, 'count:desc');
+        finalCount = finalCount.splice(0, 15);
 
-        topTenForResponseTime.forEach((item, i) => {
-          topTenForResponseTime[i].id = finalCounts[index].id;
-          topTenForResponseTime[i].capiId = finalCounts[index].capiId;
+        finalCount.forEach((item, i) => {
+          finalCount[i].id = finalCounts[index].id;
+          finalCount[i].capiId = finalCounts[index].capiId;
         });
 
+        topFifteenForResponseTime.push(finalCount);
+
         finalCounts[index].counts = sortedCount;
       }
     });
 
-    this.topTenForResponseTime = topTenForResponseTime;
+    this.topFifteenForResponseTime = topFifteenForResponseTime;
     this.finalCounts = finalCounts;
   },
 
@@ -122,12 +125,12 @@ export default {
 
     return {
       systemInformation,
-      topTenForResponseTime: null,
-      responseTimes:         null,
-      finalCounts:           null,
-      includeResponseTimes:  true,
-      storeMapping:          this.$store?._modules?.root?.state,
-      latestLogs:            console.logs // eslint-disable-line no-console
+      topFifteenForResponseTime: null,
+      responseTimes:             null,
+      finalCounts:               null,
+      includeResponseTimes:      true,
+      storeMapping:              this.$store?._modules?.root?.state,
+      latestLogs:                console.logs // eslint-disable-line no-console
     };
   },
 
@@ -205,17 +208,21 @@ export default {
     },
 
     async gatherResponseTimes(btnCb) {
-      return await Promise.all(this.topTenForResponseTime.map((item) => {
-        const t = Date.now();
-
-        return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.capiId }/v1/${ item.resource }` })
-          .then(() => ({
-            outcome: 'success', item, durationMs: Date.now() - t
-          }))
-          .catch(() => ({
-            outcome: 'error', item, durationMs: Date.now() - t
-          }));
-      })).then((responseTimes) => {
+      const promises = this.topFifteenForResponseTime.flatMap((cluster) => {
+        return cluster.map((item) => {
+          const t = Date.now();
+
+          return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.capiId }/v1/${ item.resource }` })
+            .then(() => ({
+              outcome: 'success', item, durationMs: Date.now() - t
+            }))
+            .catch(() => ({
+              outcome: 'error', item, durationMs: Date.now() - t
+            }));
+        });
+      });
+
+      return await Promise.all(promises).then((responseTimes) => {
         this.responseTimes = responseTimes;
         this.setResourceResponseTiming(responseTimes);
         btnCb(true);

package/pages/rio/mesh.vue

@@ -1,5 +1,4 @@
 <script>
-import $ from 'jquery';
 import { escapeHtml } from '@shell/utils/string';
 
 const RADIUS = 5;
@@ -399,7 +398,7 @@ export default {
     },
 
     clicked(event) {
-      const path = $(event.target).closest('.edgePath');
+      const path = event.target.closest('.edgePath');
 
       console.log(path); // eslint-disable-line no-console
     }

package/pkg/tsconfig.json

@@ -18,7 +18,6 @@
       "webpack-env",
       "@types/node",
       "@types/jest",
-      "@nuxt/types"
     ],
     "lib": [
       "esnext",

package/plugins/clean-html-directive.js

@@ -25,6 +25,9 @@ export const cleanHtmlDirective = {
   },
   componentUpdated(el, binding) {
     el.innerHTML = purifyHTML(binding.value);
+  },
+  unbind(el) {
+    el.innerHTML = '';
   }
 };
 

package/plugins/dashboard-store/index.js

@@ -38,7 +38,7 @@ export default (vuexModule, config, init) => {
     store.registerModule(namespace, vuexModule);
     store.commit(`${ namespace }/applyConfig`, config);
 
-    if ( !process.client || !window.__NUXT__ ) {
+    if ( !process.client ) {
       return;
     }
 

package/plugins/plugin.js

@@ -2,23 +2,9 @@
 import { allHashSettled } from '@shell/utils/promise';
 import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 
-const META_NAME_PREFIX = 'app-autoload-';
-
 export default async function(context) {
-  // UI Plugins declared in the HTML head
-  const meta = context.app?.head?.meta || [];
   const hash = {};
 
-  meta.forEach((m) => {
-    const metaName = m.name || '';
-
-    if (metaName.indexOf(META_NAME_PREFIX) === 0) {
-      const name = metaName.substr(META_NAME_PREFIX.length);
-
-      hash[name] = context.$plugin.loadAsync(name, m.content);
-    }
-  });
-
   // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
   let loadPlugins = true;
 

package/plugins/portal-vue.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import PortalVue from 'portal-vue';
+
+Vue.use(PortalVue);

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

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

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

@@ -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/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-clean-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/extension/publish

@@ -81,6 +81,12 @@ echo -e "${CYAN}${BOLD}Publishing UI Plugins${RESET}"
 pushd ${BASE_DIR} > /dev/null
 
 if [ "${GITHUB_BUILD}" == "true" ]; then
+  # Determine if gh-pages build is possible
+  if [[ "${GITHUB_BRANCH}" == "gh-pages" ]] && ! git show-ref -q --heads gh-pages; then
+    echo -e "${YELLOW}'gh-pages' branch not found, this branch must exist before running this script${RESET}"
+    exit 1
+  fi
+
   echo -e "${CYAN}GitHub Repository: ${GITHUB_SOURCE}${RESET}"
   echo -e "${CYAN}GitHub Branch    : ${GITHUB_BRANCH}${RESET}"
 else
@@ -188,27 +194,22 @@ for d in pkg/*/ ; do
     echo -e "${CYAN}Building plugin from source code${RESET}"
     FORCE_COLOR=1 yarn build-pkg $pkg | cat
 
-    if [ "${GITHUB_BUILD}" == "false" ]; then
-      # Build the docker image
-      ${SCRIPT_DIR}/bundle ${pkg} ${PKG_VERSION} ${REGISTRY} ${REGISTRY_ORG} ${IMAGE_PREFIX} ${PUSH}
-    else
-      echo -e "${CYAN}Adding plugin code ...${RESET}"
+    echo -e "${CYAN}Adding plugin code ...${RESET}"
 
-      EXT_FOLDER=${BASE_DIR}/extensions/${pkg}/${PKG_VERSION}
-      PKG_DIST="${BASE_DIR}/dist-pkg/${PKG_NAME}"
+    EXT_FOLDER=${BASE_DIR}/extensions/${pkg}/${PKG_VERSION}
+    PKG_DIST="${BASE_DIR}/dist-pkg/${PKG_NAME}"
 
-      rm -rf ${EXT_FOLDER}
+    rm -rf ${EXT_FOLDER}
 
-      mkdir -p ${EXT_FOLDER}/plugin
+    mkdir -p ${EXT_FOLDER}/plugin
 
-      # Copy the code into the folder
-      cp -R ${PKG_DIST}/* ${EXT_FOLDER}/plugin
+    # Copy the code into the folder
+    cp -R ${PKG_DIST}/* ${EXT_FOLDER}/plugin
 
-      pushd ${BASE_DIR}/extensions/${pkg}/${PKG_VERSION} > /dev/null
-      rm -f plugin/report.html
-      find plugin -type f | sort > files.txt
-      popd > /dev/null
-    fi
+    pushd ${BASE_DIR}/extensions/${pkg}/${PKG_VERSION} > /dev/null
+    rm -f plugin/report.html
+    find plugin -type f | sort > files.txt
+    popd > /dev/null
 
     rm -rf ${TMP}/container
 
@@ -248,7 +249,7 @@ for d in pkg/*/ ; do
       rm *.yaml
       mv temp.cr cr.yaml
       ENDPOINT=https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/extensions/${pkg}/${PKG_VERSION}
-      sed -i.bak -e 's@endpoint: .*@endpoint: '"${ENDPOINT}"'@g' cr.yaml       
+      sed -i.bak -e 's@endpoint: .*@endpoint: '"${ENDPOINT}"'@g' cr.yaml
       rm *.bak
       popd > /dev/null
     fi
@@ -266,6 +267,15 @@ for d in pkg/*/ ; do
 
     if [ -f "${HELM_INDEX}" ]; then
       UPDATE="--merge ${HELM_INDEX}"
+    elif [ "${GITHUB_BUILD}" == "true" ] && [[ -n ${GITHUB_SOURCE} ]]; then
+      GITHUB_SOURCE=$(echo -e "${GITHUB_SOURCE}" | sed 's/https:\/\///g')
+
+      # Check if git branch contains index.yaml
+      wget -P ${BASE_DIR} https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/index.yaml
+
+      if [ -f "${HELM_INDEX}" ]; then
+        UPDATE="--merge ${HELM_INDEX}"
+      fi
     fi
 
     # Base URL referencing assets directly from GitHub
@@ -292,6 +302,21 @@ for d in pkg/*/ ; do
   fi
 done
 
+if [ "${GITHUB_BUILD}" == "false" ]; then
+  BASE=$(basename ${BASE_DIR})
+  EXT_VERSION=$(jq -r .version ${BASE_DIR}/package.json)
+
+  if [ -z ${EXT_VERSION} ]; then
+    EXT_VERSION="0.0.0"
+  fi
+
+  echo -e "${CYAN}Base extension: ${BASE}${RESET}"
+  echo -e "${CYAN}Extension version: ${EXT_VERSION}${RESET}"
+
+  # Build the docker image
+  ${SCRIPT_DIR}/bundle ${BASE} ${EXT_VERSION} ${REGISTRY} ${REGISTRY_ORG} ${IMAGE_PREFIX} ${PUSH}
+fi
+
 if [ "${GITHUB_BUILD}" == "true" ]; then
   cp index.yaml tmp
 fi
@@ -306,9 +331,3 @@ rm -rf ${CHART_TMP}
 if [ "${GITHUB_BUILD}" == "false" ]; then
   rm -rf ${TMP}
 fi
-
-# If the user asked to create a commit, commit the changes
-# if [ "${COMMIT}" == "true" ]; then
-#   echo -e "${CYAN}${BOLD}Creating git commit${RESET}"
-#   git add --all
-# fi

package/scripts/serve-pkgs

@@ -2,13 +2,17 @@
 
 const fs = require('fs-extra');
 const path = require('path');
-
-console.log(__dirname);
+const { exit } = require('process');
 
 const dir = path.resolve('.');
 const pkgs = path.join(dir, 'dist-pkg');
 let port = 4500;
 
+if (!fs.existsSync(pkgs)) {
+  console.log(`\n\x1B[31m%s\x1B[0m\n`, `Error: The 'dist-pkg directory doesn't exist. You likely need to run the 'yarn build-pkg <pkg name>' command first.`);
+  exit(1);
+}
+
 const express = require('express');
 const serveStatic = require('serve-static');
 

package/store/type-map.js

@@ -1163,7 +1163,7 @@ export const getters = {
     return (rawType, subType) => {
       const key = getters.componentFor(rawType, subType);
 
-      return hasCustom(state, rootState, 'machine-config', key, key => resolveCloudCredentialComponent(key));
+      return hasCustom(state, rootState, 'cloud-credential', key, key => resolveCloudCredentialComponent(key));
     };
   },
 

package/tsconfig.json

@@ -4,7 +4,6 @@
     "types": [
       "@types/node",
       "@types/jest",
-      "@nuxt/types"
     ]
   },
   "exclude": [

package/types/rancher/index.d.ts

@@ -5,3 +5,5 @@ declare module '@rancher/auto-import' {
 declare module '@shell/store/type-map' {
   export function DSL(store: any, name: string): any;
 }
+
+declare module '@shell/plugins/dashboard-store';