@rancher/shell 0.3.7 → 0.3.9

package/components/nav/Header.vue

@@ -621,6 +621,7 @@ export default {
       <div
         v-if="showUserMenu"
         class="user user-menu"
+        data-testid="nav_header_showUserMenu"
         tabindex="0"
         @blur="showMenu(false)"
         @click="showMenu(true)"
@@ -654,6 +655,7 @@ export default {
           >
             <ul
               class="list-unstyled dropdown"
+              data-testid="user-menu-dropdown"
               @click.stop="showMenu(false)"
             >
               <li

package/config/settings.ts

@@ -83,7 +83,12 @@ export const SETTING = {
    * both pre and post log in. If not present defaults to the usual process
    */
   THEME:                                'ui-theme',
-  SYSTEM_NAMESPACES:                    'system-namespaces'
+  SYSTEM_NAMESPACES:                    'system-namespaces',
+  /**
+   * Cluster Agent configuration
+   */
+  CLUSTER_AGENT_DEFAULT_AFFINITY:       'cluster-agent-default-affinity',
+  FLEET_AGENT_DEFAULT_AFFINITY:         'fleet-agent-default-affinity',
 };
 
 // These are the settings that are allowed to be edited via the UI
@@ -140,6 +145,10 @@ export const ALLOWED_SETTINGS: GlobalSetting = {
 };
 
 export const DEFAULT_PERF_SETTING = {
+  inactivity: {
+    enabled:   false,
+    threshold: 900,
+  },
   incrementalLoading: {
     enabled:   true,
     threshold: 1500,

package/core/plugins-loader.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
 
@@ -26,7 +25,6 @@ export default function({
     window.Vue = Vue;
 
     // Global libraries - allows us to externalise these to reduce package bundle size
-    window.$ = $;
     window.__jszip = JSZip;
     window.__jsyaml = jsyaml;
   }

package/creators/app/files/.gitignore

@@ -0,0 +1,73 @@
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# System Files
+.DS_Store
+Thumbs.db

package/creators/app/init

@@ -12,6 +12,7 @@ const targets = {
 const files = [
   'tsconfig.json',
   'vue.config.js',
+  '.gitignore',
   '.eslintignore',
   '.eslintrc.js',
   'babel.config.js',

package/edit/configmap.vue

@@ -31,40 +31,65 @@ export default {
   computed: {
     hasBinaryData() {
       return Object.keys(this.binaryData).length > 0;
-    }
+    },
+    /**
+     * Keep all newlines from end, see: https://yaml-multiline.info
+     * Apply to 'data' field
+     */
+    yamlModifiers() {
+      return {
+        data: Object.keys(this.data).reduce((acc, key) => ({
+          ...acc,
+          [key]: { chomping: '+' },
+        }), {}),
+      };
+    },
+
+    validationPassed() {
+      return !!this.value.name;
+    },
   },
 
   watch: {
-    data(neu, old) {
+    data(neu) {
       this.updateValue(neu, 'data');
     },
-    binaryData(neu, old) {
+    binaryData(neu) {
       this.updateValue(neu, 'binaryData');
     },
   },
 
   methods: {
+    async saveConfigMap() {
+      const yaml = this.$refs.cru.createResourceYaml(this.yamlModifiers);
+
+      await this.value.saveYaml(yaml);
+      this.done();
+    },
+
     updateValue(val, type) {
       this.$set(this.value, type, {});
 
       Object.keys(val).forEach((key) => {
         this.$set(this.value[type], key, val[key]);
       });
-    }
+    },
   }
 };
 </script>
 
 <template>
   <CruResource
+    ref="cru"
     :done-route="doneRoute"
     :mode="mode"
     :resource="value"
     :subtypes="[]"
-    :validation-passed="true"
+    :validation-passed="validationPassed"
+    :yaml-modifiers="yamlModifiers"
     :errors="errors"
     @error="e=>errors = e"
-    @finish="save"
+    @finish="saveConfigMap"
     @cancel="done"
   >
     <NameNsDescription
@@ -86,6 +111,8 @@ export default {
           :protip="t('configmap.tabs.data.protip')"
           :initial-empty-row="true"
           :value-can-be-empty="true"
+          :value-trim="false"
+          :value-markdown-multiline="true"
           :read-multiple="true"
           :read-accept="'*'"
         />

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"