@rancher/shell 0.3.8 → 0.3.9

package/edit/provisioning.cattle.io.cluster/AgentConfiguration.vue

@@ -0,0 +1,326 @@
+<script>
+import { Banner } from '@components/Banner';
+import GroupPanel from '@shell/components/GroupPanel';
+import PodAffinity from '@shell/components/form/PodAffinity';
+import NodeAffinity from '@shell/components/form/NodeAffinity';
+import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
+import Tolerations from '@shell/components/form/Tolerations';
+import { cleanUp } from '@shell/utils/object';
+import { fetchSetting } from '@shell/utils/settings';
+import { RadioGroup } from '@components/Form/Radio';
+
+export function cleanAgentConfiguration(model, key) {
+  if (!model || !model[key]) {
+    return;
+  }
+
+  const v = model[key];
+
+  if (Array.isArray(v) && v.length === 0) {
+    delete model[key];
+  } else if (v && typeof v === 'object') {
+    Object.keys(v).forEach((k) => {
+      // delete these auxiliary props used in podAffinity and nodeAffinity that shouldn't be sent to the server
+      if (k === '_namespaceOption' || k === '_namespaces' || k === '_anti' || k === '_id') {
+        delete v[k];
+      }
+
+      // prevent cleanup of namespaceSelector when an empty object because it represents all namespaces in pod/node affinity
+      // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#podaffinityterm-v1-core
+      if (k !== 'namespaceSelector') {
+        cleanAgentConfiguration(v, k);
+      }
+    });
+
+    if (Object.keys(v).length === 0) {
+      delete model[key];
+    }
+  }
+}
+
+// Affinity radio button choices
+const DEFAULT = 'default';
+const CUSTOM = 'custom';
+
+// This is the form for Agent Configuration
+// Used for both Cluster Agent and Fleet Agent configuration
+export default {
+  components: {
+    Banner,
+    ContainerResourceLimit,
+    GroupPanel,
+    PodAffinity,
+    NodeAffinity,
+    RadioGroup,
+    Tolerations,
+  },
+  props: {
+    value: {
+      type:    Object,
+      default: () => {},
+    },
+
+    mode: {
+      type:     String,
+      required: true,
+    },
+
+    type: {
+      type:     String,
+      required: true,
+    }
+  },
+
+  async fetch() {
+    // Default affinity
+    const settingId = `${ this.type }-agent-default-affinity`;
+    const setting = await fetchSetting(this.$store, settingId);
+
+    if (setting) {
+      try {
+        const parsed = JSON.parse(setting.value || setting.default);
+
+        this.defaultAffinity = parsed || {};
+      } catch (e) {
+        console.error('Could not parse agent default setting', e); // eslint-disable-line no-console
+        this.defaultAffinity = {};
+      }
+    }
+  },
+
+  data() {
+    const nodeAffinity = this.value?.overrideAffinity?.nodeAffinity;
+    const podAffinity = this.value?.overrideAffinity?.podAffinity;
+    const podAntiAffinity = this.value?.overrideAffinity?.podAntiAffinity;
+
+    let hasAffinityPopulated = false;
+
+    if ((nodeAffinity && Object.keys(nodeAffinity).length) ||
+      (podAffinity && Object.keys(podAffinity).length) ||
+      (podAntiAffinity && Object.keys(podAntiAffinity).length)) {
+      hasAffinityPopulated = true;
+    }
+
+    return {
+      defaultAffinity: {},
+      affinitySetting: hasAffinityPopulated ? CUSTOM : DEFAULT,
+      nodeAffinity:    {}
+    };
+  },
+
+  created() {
+    this.ensureValue();
+  },
+
+  computed: {
+    flatResources: {
+      get() {
+        const { limits = {}, requests = {} } = this.value.overrideResourceRequirements || {};
+        const {
+          cpu: limitsCpu,
+          memory: limitsMemory,
+        } = limits;
+        const { cpu: requestsCpu, memory: requestsMemory } = requests;
+
+        return {
+          limitsCpu,
+          limitsMemory,
+          requestsCpu,
+          requestsMemory,
+        };
+      },
+      set(neu) {
+        const {
+          limitsCpu,
+          limitsMemory,
+          requestsCpu,
+          requestsMemory,
+        } = neu;
+
+        const existing = this.value?.overrideResourceRequirements || {};
+
+        delete existing.requests;
+        delete existing.limits;
+
+        const out = {
+          ...existing,
+          requests: {
+            cpu:    requestsCpu,
+            memory: requestsMemory,
+          },
+          limits: {
+            cpu:    limitsCpu,
+            memory: limitsMemory,
+          },
+        };
+
+        this.$set(this.value, 'overrideResourceRequirements', cleanUp(out));
+      },
+    },
+
+    affinityOptions() {
+      return [{
+        label: this.t('cluster.agentConfig.affinity.default'),
+        value: DEFAULT,
+      }, {
+        label: this.t('cluster.agentConfig.affinity.custom'),
+        value: CUSTOM,
+      }];
+    },
+
+    canEditAffinity() {
+      return this.affinitySetting === CUSTOM;
+    }
+  },
+
+  watch: {
+    value() {
+      this.ensureValue();
+    }
+  },
+
+  methods: {
+    ensureValue() {
+      // Ensure we have the model structure needed for the form controls
+      if (this.value) {
+        this.value.overrideAffinity = this.value.overrideAffinity || {};
+        this.value.appendTolerations = this.value.appendTolerations || [];
+        this.value.overrideResourceRequirements = this.value.overrideResourceRequirements || {};
+
+        this.nodeAffinity = this.value?.overrideAffinity?.nodeAffinity || {};
+      }
+    },
+
+    affinitySettingChange() {
+      if (this.affinitySetting === CUSTOM) {
+        const parsedDefaultAffinites = JSON.parse(JSON.stringify(this.defaultAffinity));
+
+        // Copy the default so that the user can edit it
+        // this will cover the pod affinities
+        this.$set(this.value, 'overrideAffinity', parsedDefaultAffinites);
+
+        // in order not to break the node affinity component, let's go for a slightly different way of handling the logic here
+        if (parsedDefaultAffinites.nodeAffinity) {
+          this.nodeAffinity = parsedDefaultAffinites.nodeAffinity;
+        }
+      } else {
+        this.$set(this.value, 'overrideAffinity', {});
+      }
+    },
+    updateNodeAffinity(val) {
+      this.$set(this.value.overrideAffinity, 'nodeAffinity', val);
+    }
+  }
+};
+</script>
+
+<template>
+  <div v-if="value && Object.keys(value).length">
+    <Banner
+      :closable="false"
+      color="info"
+      label-key="cluster.agentConfig.banners.advanced"
+    />
+
+    <GroupPanel
+      label-key="cluster.agentConfig.groups.podRequestsAndLimits"
+      class="mt-20"
+    >
+      <Banner
+        :closable="false"
+        color="info"
+        label-key="cluster.agentConfig.banners.limits"
+      />
+      <ContainerResourceLimit
+        v-model="flatResources"
+        :mode="mode"
+        :show-tip="false"
+        :handle-gpu-limit="false"
+        class="mt-10"
+      />
+    </GroupPanel>
+
+    <GroupPanel
+      label-key="cluster.agentConfig.groups.podTolerations"
+      class="mt-20"
+    >
+      <Banner
+        :closable="false"
+        color="info"
+        label-key="cluster.agentConfig.banners.tolerations"
+      />
+      <Tolerations
+        v-model="value.appendTolerations"
+        :mode="mode"
+        class="mt-10"
+      />
+    </GroupPanel>
+
+    <GroupPanel
+      label-key="cluster.agentConfig.groups.podAffinity"
+      class="mt-20"
+    >
+      <RadioGroup
+        v-model="affinitySetting"
+        name="affinity-override"
+        :mode="mode"
+        :options="affinityOptions"
+        class="mt-10"
+        data-testid="affinity-options"
+        @input="affinitySettingChange"
+      />
+
+      <Banner
+        v-if="canEditAffinity"
+        :closable="false"
+        color="warning"
+      >
+        <p v-clean-html="t('cluster.agentConfig.banners.windowsCompatibility', {}, true)" />
+      </Banner>
+
+      <h4 v-if="canEditAffinity">
+        {{ t('cluster.agentConfig.subGroups.podAffinityAnti') }}
+      </h4>
+
+      <PodAffinity
+        v-if="canEditAffinity"
+        v-model="value"
+        field="overrideAffinity"
+        :mode="mode"
+        class="mt-0 mb-20"
+        :all-namespaces-option-available="true"
+        :force-input-namespace-selection="true"
+        :remove-labeled-input-namespace-label="true"
+        data-testid="pod-affinity"
+      />
+
+      <div
+        v-if="canEditAffinity"
+        class="separator"
+      />
+      <h4
+        v-if="canEditAffinity"
+        class="mt-20"
+      >
+        {{ t('cluster.agentConfig.subGroups.nodeAffinity') }}
+      </h4>
+
+      <NodeAffinity
+        v-if="canEditAffinity"
+        v-model="nodeAffinity"
+        :matching-selector-display="true"
+        :mode="mode"
+        class="mt-0"
+        data-testid="node-affinity"
+        @input="updateNodeAffinity"
+      />
+    </GroupPanel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.separator {
+  width: 100%;
+  border-top: 1px solid var(--border);
+}
+</style>

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -477,6 +477,7 @@ export default {
     :errors="errors"
     :subtypes="subTypes"
     :cancel-event="true"
+    :prevent-enter-submit="true"
     class="create-cluster"
     @finish="save"
     @cancel="cancel"

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -69,6 +69,7 @@ import S3Config from './S3Config';
 import SelectCredential from './SelectCredential';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
 import { ELEMENTAL_SCHEMA_IDS, KIND, ELEMENTAL_CLUSTER_PROVIDER } from '../../config/elemental-types';
+import AgentConfiguration, { cleanAgentConfiguration } from './AgentConfiguration';
 
 const PUBLIC = 'public';
 const PRIVATE = 'private';
@@ -96,6 +97,8 @@ const NODE_TOTAL = {
     icon:  'icon-checkmark'
   }
 };
+const CLUSTER_AGENT_CUSTOMIZATION = 'clusterAgentDeploymentCustomization';
+const FLEET_AGENT_CUSTOMIZATION = 'fleetAgentDeploymentCustomization';
 
 export default {
   components: {
@@ -107,6 +110,7 @@ export default {
     BadgeState,
     Banner,
     Checkbox,
+    AgentConfiguration,
     ClusterMembershipEditor,
     CruResource,
     DrainOptions,
@@ -274,6 +278,18 @@ export default {
 
       this.userChartValues[key] = value;
     });
+
+    // Ensure we have empty models for the two agent configurations
+
+    // Cluster Agent Configuration
+    if ( !this.value.spec[CLUSTER_AGENT_CUSTOMIZATION]) {
+      set(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION, {});
+    }
+
+    // Fleet Agent Configuration
+    if ( !this.value.spec[FLEET_AGENT_CUSTOMIZATION] ) {
+      set(this.value.spec, FLEET_AGENT_CUSTOMIZATION, {});
+    }
   },
 
   data() {
@@ -1081,6 +1097,7 @@ export default {
   created() {
     this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools');
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
+    this.registerBeforeHook(this.agentConfigurationCleanup, 'cleanup-agent-config');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
   },
@@ -1089,6 +1106,12 @@ export default {
     nlToBr,
     set,
 
+    agentConfigurationCleanup() {
+      // Clean agent configuration objects, so we only send values when the user has configured something
+      cleanAgentConfiguration(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION);
+      cleanAgentConfiguration(this.value.spec, FLEET_AGENT_CUSTOMIZATION);
+    },
+
     /**
      * set instanceNameLimit to 15 to all pool machine if truncateHostnames checkbox is clicked
      */
@@ -1467,7 +1490,20 @@ export default {
         delete this.value.spec.rkeConfig.machineGlobalConfig.profile;
       }
 
+      // store the current data for fleet and cluster agent so that we can re-apply it later if the save fails
+      // we also have a before hook (check created() hooks) where the cleanup of the data occurs
+      const clusterAgentDeploymentCustomization = JSON.parse(JSON.stringify(this.value.spec[CLUSTER_AGENT_CUSTOMIZATION]));
+      const fleetAgentDeploymentCustomization = JSON.parse(JSON.stringify(this.value.spec[FLEET_AGENT_CUSTOMIZATION]));
+
       await this.save(btnCb);
+
+      // comes from createEditView mixin
+      // if there are any errors saving, restore the agent config data
+      if (this.errors?.length) {
+        // Ensure the agent configuration is set back to the values before we changed (cleaned) it
+        set(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION, clusterAgentDeploymentCustomization);
+        set(this.value.spec, FLEET_AGENT_CUSTOMIZATION, fleetAgentDeploymentCustomization);
+      }
     },
     // create a secret to reference the harvester cluster kubeconfig in rkeConfig
     async createKubeconfigSecret(kubeconfig = '') {
@@ -2821,6 +2857,30 @@ export default {
           </div>
         </Tab>
 
+        <!-- Cluster Agent Configuration -->
+        <Tab
+          name="clusteragentconfig"
+          label-key="cluster.agentConfig.tabs.cluster"
+        >
+          <AgentConfiguration
+            v-model="value.spec.clusterAgentDeploymentCustomization"
+            type="cluster"
+            :mode="mode"
+          />
+        </Tab>
+
+        <!-- Fleet Agent Configuration -->
+        <Tab
+          name="fleetagentconfig"
+          label-key="cluster.agentConfig.tabs.fleet"
+        >
+          <AgentConfiguration
+            v-model="value.spec.fleetAgentDeploymentCustomization"
+            type="fleet"
+            :mode="mode"
+          />
+        </Tab>
+
         <!-- Advanced -->
         <Tab
           v-if="haveArgInfo || agentArgs['protect-kernel-defaults']"

package/mixins/chart.js

@@ -14,7 +14,7 @@ import { CAPI, CATALOG } from '@shell/config/types';
 import { isPrerelease } from '@shell/utils/version';
 import difference from 'lodash/difference';
 import { LINUX } from '@shell/store/catalog';
-import { clone } from 'utils/object';
+import { clone } from '@shell/utils/object';
 import { merge } from 'lodash';
 
 export default {

package/models/batch.cronjob.js

@@ -2,6 +2,7 @@ import { insertAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
 import { WORKLOAD_TYPES } from '@shell/config/types';
 import Workload from './workload';
+import { WORKLOAD_TYPE_TO_KIND_MAPPING } from '@shell/detail/workload/index';
 
 export default class CronJob extends Workload {
   get state() {
@@ -47,12 +48,26 @@ export default class CronJob extends Workload {
   }
 
   async runNow() {
-    const job = await this.$dispatch('create', clone(this.spec.jobTemplate));
+    const ownerRef = {
+      apiVersion: this.apiVersion,
+      controller: true,
+      kind:       this.kind,
+      name:       this.metadata.name,
+      uid:        this.metadata.uid
+    };
+
+    // Set type and kind to ensure the correct model is returned (via classify). This object will be persisted to the store
+    const job = await this.$dispatch('create', {
+      type: WORKLOAD_TYPES.JOB,
+      kind: WORKLOAD_TYPE_TO_KIND_MAPPING[WORKLOAD_TYPES.JOB],
+      ...clone(this.spec.jobTemplate)
+    });
 
-    job.type = WORKLOAD_TYPES.JOB;
     job.metadata = job.metadata || {};
     job.metadata.namespace = this.metadata.namespace;
-    job.metadata.generateName = `${ this.metadata.name }-`;
+    // Can't use `generatedName` and no `name`... as this fails schema validation
+    job.metadata.name = `${ this.metadata.name }-${ Date.now() }`;
+    job.metadata.ownerReferences = [ownerRef];
 
     await job.save();
 

package/models/workload.js

@@ -296,7 +296,7 @@ export default class Workload extends WorkloadService {
   }
 
   get endpoint() {
-    return this?.metadata?.annotations[CATTLE_PUBLIC_ENDPOINTS];
+    return this?.metadata?.annotations?.[CATTLE_PUBLIC_ENDPOINTS];
   }
 
   get desired() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -69,7 +69,7 @@
     "dagre-d3": "0.6.4",
     "dayjs": "1.8.29",
     "diff2html": "2.11.2",
-    "dompurify": "2.0.12",
+    "dompurify": "2.4.5",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.4",
@@ -89,7 +89,6 @@
     "jest": "27.5.1",
     "jest-serializer-vue": "2.0.2",
     "jexl": "2.2.2",
-    "jquery": "3.5.1",
     "js-cookie": "2.2.1",
     "js-yaml": "4.1.0",
     "js-yaml-loader": "1.2.2",

package/pages/auth/login.vue

@@ -303,6 +303,7 @@ export default {
         </h1>
         <div
           class="login-messages"
+          data-testid="login__messages"
           :class="{'login-messages--hasContent': hasLoginMessage}"
         >
           <Banner

package/pages/prefs.vue

@@ -163,7 +163,9 @@ export default {
       <h4 v-t="'prefs.language'" />
       <div class="row">
         <div class="col span-4">
-          <LocaleSelector />
+          <LocaleSelector
+            data-testid="prefs__languageSelector"
+          />
         </div>
       </div>
     </div>
@@ -173,6 +175,7 @@ export default {
       <h4 v-t="'prefs.theme.label'" />
       <ButtonGroup
         v-model="theme"
+        data-testid="prefs__themeOptions"
         :options="themeOptions"
       />
       <div class="mt-10">
@@ -190,7 +193,9 @@ export default {
     >
       <hr>
       <h4 v-t="'prefs.landing.label'" />
-      <LandingPagePreference />
+      <LandingPagePreference
+        data-testid="prefs__landingPagePreference"
+      />
     </div>
     <!-- Display Settings -->
     <div class="mt-10 mb-10">
@@ -203,6 +208,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model="dateFormat"
+            data-testid="prefs__displaySetting__dateFormat"
             :label="t('prefs.dateFormat.label')"
             :options="dateOptions"
           />
@@ -210,6 +216,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model="timeFormat"
+            data-testid="prefs__displaySetting__timeFormat"
             :label="t('prefs.timeFormat.label')"
             :options="timeOptions"
           />
@@ -220,6 +227,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model.number="perPage"
+            data-testid="prefs__displaySetting__perPage"
             :label="t('prefs.perPage.label')"
             :options="perPageOptions"
             option-key="value"
@@ -230,6 +238,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model.number="menuMaxClusters"
+            data-testid="prefs__displaySetting__menuMaxClusters"
             :label="t('prefs.clusterToShow.label')"
             :options="menuClusterOptions"
             option-key="value"
@@ -245,6 +254,7 @@ export default {
       <h4 v-t="'prefs.confirmationSetting.title'" />
       <Checkbox
         v-model="scalingDownPrompt"
+        data-testid="prefs__scalingDownPrompt"
         :label="t('prefs.confirmationSetting.scalingDownPrompt')"
         class="mt-10"
       />
@@ -255,18 +265,21 @@ export default {
       <h4 v-t="'prefs.advFeatures.title'" />
       <Checkbox
         v-model="viewInApi"
+        data-testid="prefs__viewInApi"
         :label="t('prefs.advFeatures.viewInApi', {}, true)"
         class="mt-10"
       />
       <br>
       <Checkbox
         v-model="allNamespaces"
+        data-testid="prefs__allNamespaces"
         :label="t('prefs.advFeatures.allNamespaces', {}, true)"
         class="mt-20"
       />
       <br>
       <Checkbox
         v-model="themeShortcut"
+        data-testid="prefs__themeShortcut"
         :label="t('prefs.advFeatures.themeShortcut', {}, true)"
         class="mt-20"
       />
@@ -274,6 +287,7 @@ export default {
       <Checkbox
         v-if="!isSingleProduct"
         v-model="hideDescriptions"
+        data-testid="prefs__hideDescriptions"
         :label="t('prefs.hideDesc.label')"
         class="mt-20"
       />
@@ -292,6 +306,7 @@ export default {
       <h4 v-t="'prefs.keymap.label'" />
       <ButtonGroup
         v-model="keymap"
+        data-testid="prefs__keymapOptions"
         :options="keymapOptions"
       />
     </div>
@@ -304,6 +319,7 @@ export default {
       <h4 v-t="'prefs.helm.label'" />
       <ButtonGroup
         v-model="showPreRelease"
+        data-testid="prefs__helmOptions"
         :options="helmOptions"
       />
     </div>

package/pkg/vue.config.js

@@ -82,7 +82,6 @@ module.exports = function(dir) {
       // These modules will be externalised and not included with the build of a package library
       // This helps reduce the package size, but these dependencies must be provided by the hosting application
       config.externals = {
-        jquery:    '$',
         jszip:     '__jszip',
         'js-yaml': '__jsyaml'
       };