@rancher/shell 0.3.7 → 0.3.9

package/components/Inactivity.vue

@@ -0,0 +1,229 @@
+<script>
+import ModalWithCard from '@shell/components/ModalWithCard';
+import { Banner } from '@components/Banner';
+import PercentageBar from '@shell/components/PercentageBar.vue';
+import throttle from 'lodash/throttle';
+import { MANAGEMENT } from '@shell/config/types';
+import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
+
+export default {
+  name:       'Inactivity',
+  components: {
+    ModalWithCard, Banner, PercentageBar
+  },
+  data() {
+    return {
+      enabled:             null,
+      isOpen:              false,
+      isInactive:          false,
+      showModalAfter:      null,
+      inactivityTimeoutId: null,
+      courtesyTimer:       null,
+      courtesyTimerId:     null,
+      courtesyCountdown:   null,
+      trackInactivity:     throttle(this._trackInactivity, 1000),
+    };
+  },
+  async mounted() {
+    // Info: normally, this is done in the fetch hook but for some reasons while awaiting for things that will take a while, it won't be ready by the time mounted() is called, pending for investigation.
+    let settings;
+
+    try {
+      const settingsString = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
+
+      settings = settingsString?.value ? JSON.parse(settingsString.value) : DEFAULT_PERF_SETTING;
+    } catch { }
+
+    if (!settings || !settings?.inactivity || !settings?.inactivity.enabled) {
+      return;
+    }
+
+    this.enabled = settings?.inactivity?.enabled || false;
+
+    // Total amount of time before the user's session is lost
+    const thresholdToSeconds = settings?.inactivity?.threshold * 60;
+
+    // Amount of time the user sees the inactivity warning
+    this.courtesyTimer = Math.floor(thresholdToSeconds * 0.1);
+    this.courtesyTimer = Math.min(this.courtesyTimer, 60 * 5); // Never show the modal more than 5 minutes
+    // Amount of time before the user sees the inactivity warning
+    // Note - time before warning is shown + time warning is shown = settings threshold (total amount of time)
+    this.showModalAfter = thresholdToSeconds - this.courtesyTimer;
+
+    console.debug(`Inactivity modal will show after ${ this.showModalAfter / 60 }(m) and be shown for ${ this.courtesyTimer / 60 }(m)`); // eslint-disable-line no-console
+
+    this.courtesyCountdown = this.courtesyTimer;
+
+    if (settings?.inactivity.enabled) {
+      this.trackInactivity();
+      this.addIdleListeners();
+    }
+  },
+  beforeDestroy() {
+    this.removeEventListener();
+    this.clearAllTimeouts();
+  },
+  methods: {
+    _trackInactivity() {
+      if (this.isInactive || this.isOpen || !this.showModalAfter) {
+        return;
+      }
+
+      this.clearAllTimeouts();
+      const endTime = Date.now() + this.showModalAfter * 1000;
+
+      const checkInactivityTimer = () => {
+        const now = Date.now();
+
+        if (now >= endTime) {
+          this.isOpen = true;
+          this.startCountdown();
+
+          this.$modal.show('inactivityModal');
+        } else {
+          this.inactivityTimeoutId = setTimeout(checkInactivityTimer, 1000);
+        }
+      };
+
+      checkInactivityTimer();
+    },
+    startCountdown() {
+      const endTime = Date.now() + (this.courtesyCountdown * 1000);
+
+      const checkCountdown = () => {
+        const now = Date.now();
+
+        if (now >= endTime) {
+          this.isInactive = true;
+          this.unsubscribe();
+          this.clearAllTimeouts();
+        } else {
+          this.courtesyCountdown = Math.floor((endTime - now) / 1000);
+          this.courtesyTimerId = setTimeout(checkCountdown, 1000);
+        }
+      };
+
+      checkCountdown();
+    },
+    addIdleListeners() {
+      document.addEventListener('mousemove', this.trackInactivity);
+      document.addEventListener('mousedown', this.trackInactivity);
+      document.addEventListener('keypress', this.trackInactivity);
+      document.addEventListener('touchmove', this.trackInactivity);
+      document.addEventListener('visibilitychange', this.trackInactivity);
+    },
+    removeEventListener() {
+      document.removeEventListener('mousemove', this.trackInactivity);
+      document.removeEventListener('mousedown', this.trackInactivity);
+      document.removeEventListener('keypress', this.trackInactivity);
+      document.removeEventListener('touchmove', this.trackInactivity);
+      document.removeEventListener('visibilitychange', this.trackInactivity);
+    },
+
+    resume() {
+      this.isInactive = false;
+      this.isOpen = false;
+      this.courtesyCountdown = this.courtesyTimer;
+      this.clearAllTimeouts();
+
+      this.$modal.hide('inactivityModal');
+    },
+
+    refresh() {
+      window.location.reload();
+    },
+
+    unsubscribe() {
+      this.$store.dispatch('unsubscribe');
+    },
+    clearAllTimeouts() {
+      clearTimeout(this.inactivityTimeoutId);
+      clearTimeout(this.courtesyTimerId);
+    }
+
+  },
+  computed: {
+    isInactiveTexts() {
+      return this.isInactive ? {
+        title:   this.t('inactivity.titleExpired'),
+        banner:  this.t('inactivity.bannerExpired'),
+        content: this.t('inactivity.contentExpired'),
+      } : {
+        title:   this.t('inactivity.title'),
+        banner:  this.t('inactivity.banner'),
+        content: this.t('inactivity.content'),
+      };
+    },
+    timerPercentageLeft() {
+      return Math.floor((this.courtesyCountdown / this.courtesyTimer ) * 100);
+    },
+    colorStops() {
+      return {
+        0: '--info', 30: '--info', 70: '--info'
+      };
+    },
+  }
+};
+</script>
+
+<template>
+  <ModalWithCard
+    ref="inactivityModal"
+    name="inactivityModal"
+    save-text="Continue"
+    :v-if="isOpen"
+    @finish="resume"
+  >
+    <template #title>
+      {{ isInactiveTexts.title }}
+    </template>
+    <span>{{ courtesyCountdown }}</span>
+
+    <template #content>
+      <Banner color="info">
+        {{ isInactiveTexts.banner }}
+      </Banner>
+
+      <p>
+        {{ isInactiveTexts.content }}
+      </p>
+
+      <PercentageBar
+        v-if="!isInactive"
+        class="mt-20"
+        :value="timerPercentageLeft"
+        :color-stops="colorStops"
+      />
+    </template>
+
+    <template
+      #footer
+    >
+      <div class="card-actions">
+        <button
+          v-if="!isInactive"
+          class="btn role-tertiary bg-primary"
+          @click.prevent="resume"
+        >
+          <t k="inactivity.cta" />
+        </button>
+
+        <button
+          v-if="isInactive"
+          class="btn role-tertiary bg-primary"
+          @click.prevent="refresh"
+        >
+          <t k="inactivity.ctaExpired" />
+        </button>
+      </div>
+    </template>
+  </ModalWithCard>
+</template>
+
+<style lang="scss" scoped>
+.card-actions {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+}
+</style>

package/components/YamlEditor.vue

@@ -86,7 +86,7 @@ export default {
   },
 
   computed: {
-    cmOptions() {
+    codeMirrorOptions() {
       const readOnly = this.editorMode === EDITOR_MODES.VIEW_CODE;
 
       const gutters = [];
@@ -228,7 +228,7 @@ export default {
       ref="cm"
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
-      :options="cmOptions"
+      :options="codeMirrorOptions"
       :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"

package/components/form/ArrayList.vue

@@ -224,7 +224,7 @@ export default {
       <div
         v-for="(row, idx) in rows"
         :key="idx"
-        data-testid="array-list-box"
+        :data-testid="`array-list-box${ idx }`"
         class="box"
       >
         <slot

package/components/form/KeyValue.vue

@@ -10,11 +10,13 @@ import Select from '@shell/components/form/Select';
 import FileSelector from '@shell/components/form/FileSelector';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
+import CodeMirror from '@shell/components/CodeMirror';
 
 export default {
   name: 'KeyValue',
 
   components: {
+    CodeMirror,
     Select,
     TextAreaAutoGrow,
     FileSelector
@@ -139,6 +141,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    valueMarkdownMultiline: {
+      type:    Boolean,
+      default: false,
+    },
     valueMultiline: {
       type:    Boolean,
       default: true,
@@ -245,7 +251,10 @@ export default {
   data() {
     const rows = this.getRows(this.value);
 
-    return { rows };
+    return {
+      rows,
+      codeMirrorFocus: {},
+    };
   },
 
   computed: {
@@ -519,6 +528,19 @@ export default {
       return this.t('detailText.binary', { n }, true);
     },
     get,
+    /**
+     * Update 'rows' variable with the user's input and prevents to update queue before the row model is updated
+     */
+    onInputMarkdownMultiline(idx, value) {
+      this.rows = this.rows.map((row, i) => i === idx ? { ...row, value } : row);
+      this.queueUpdate();
+    },
+    /**
+     * Set focus on CodeMirror fields
+     */
+    onFocusMarkdownMultiline(idx, value) {
+      this.$set(this.codeMirrorFocus, idx, value);
+    }
   }
 };
 </script>
@@ -635,6 +657,16 @@ export default {
             <div v-else-if="row.binary">
               {{ binaryTextSize(row.value) }}
             </div>
+            <CodeMirror
+              v-else-if="valueMarkdownMultiline"
+              ref="cm"
+              :class="{['focus']: codeMirrorFocus[i]}"
+              :value="row[valueName]"
+              :as-text-area="true"
+              :mode="mode"
+              @onInput="onInputMarkdownMultiline(i, $event)"
+              @onFocus="onFocusMarkdownMultiline(i, $event)"
+            />
             <TextAreaAutoGrow
               v-else-if="valueMultiline"
               v-model="row[valueName]"
@@ -750,6 +782,7 @@ export default {
       &.value textarea{
         padding: 10px 10px 10px 10px;
       }
+
       .text-monospace:not(.conceal) {
         font-family: monospace, monospace;
       }

package/components/form/MatchExpressions.vue

@@ -29,6 +29,13 @@ export default {
       default: NODE
     },
 
+    // has select for matching fields or expressions (used for node affinity)
+    // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#nodeselectorterm-v1-core
+    matchingSelectorDisplay: {
+      type:    Boolean,
+      default: false,
+    },
+
     // whether or not to show an initial empty row of inputs when value is empty in editing modes
     initialEmptyRow: {
       type:    Boolean,
@@ -83,28 +90,39 @@ export default {
 
     let rules;
 
-    if ( isArray(this.value) ) {
+    // special case for matchFields and matchExpressions
+    // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#nodeselectorterm-v1-core
+    if ( this.matchingSelectorDisplay) {
+      const rulesByType = {
+        matchFields:      [],
+        matchExpressions: []
+      };
+
+      ['matchFields', 'matchExpressions'].forEach((type) => {
+        rulesByType[type] = this.parseRules(this.value[type], type);
+      });
+
+      rules = [...rulesByType.matchFields, ...rulesByType.matchExpressions];
+    } else if ( isArray(this.value) ) {
       rules = [...this.value];
+      rules = this.parseRules(rules);
     } else {
       rules = convert(this.value.matchLabels, this.value.matchExpressions);
+      rules = this.parseRules(rules);
     }
 
-    rules = rules.map((rule) => {
-      const newRule = clone(rule);
-
-      if (newRule.values && typeof newRule.values !== 'string') {
-        newRule.values = newRule.values.join(', ');
-      }
-
-      return newRule;
-    });
-
     if (!rules.length && this.initialEmptyRow && !this.isView) {
-      rules.push({
+      const newRule = {
         key:      '',
         operator: 'In',
         values:   ''
-      });
+      };
+
+      if (this.matchingSelectorDisplay) {
+        newRule.matching = 'matchExpressions';
+      }
+
+      rules.push(newRule);
     }
 
     return {
@@ -131,27 +149,71 @@ export default {
       return !!this.keysSelectOptions?.length;
     },
 
+    matchingSelectOptions() {
+      return [
+        {
+          label: this.t('workload.scheduling.affinity.matchExpressions.label'),
+          value: 'matchExpressions',
+        },
+        {
+          label: this.t('workload.scheduling.affinity.matchFields.label'),
+          value: 'matchFields',
+        },
+      ];
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
 
   methods: {
+    parseRules(rules, matching) {
+      if (rules?.length) {
+        return rules.map((rule) => {
+          const newRule = clone(rule);
+
+          if (newRule.values && typeof newRule.values !== 'string') {
+            newRule.values = newRule.values.join(', ');
+          }
+
+          if (matching) {
+            newRule.matching = matching;
+          }
+
+          return newRule;
+        });
+      }
+
+      return [];
+    },
+
     removeRule(row) {
       removeObject(this.rules, row);
       this.update();
     },
 
     addRule() {
-      this.rules.push({
+      const newRule = {
         key:      '',
         operator: 'In',
         values:   ''
-      });
+      };
+
+      if (this.matchingSelectorDisplay) {
+        newRule.matching = 'matchExpressions';
+      }
+
+      this.rules.push(newRule);
     },
 
     update() {
       this.$nextTick(() => {
         const out = this.rules.map((rule) => {
-          const matchExpression = { key: rule.key, operator: rule.operator };
+          const expression = { key: rule.key, operator: rule.operator };
+
+          if (this.matchingSelectorDisplay) {
+            expression.matching = rule.matching;
+          }
+
           let val = (rule.values || '').trim();
 
           if ( rule.operator === 'Exists' || rule.operator === 'DoesNotExist') {
@@ -161,13 +223,13 @@ export default {
           }
 
           if ( val !== null ) {
-            matchExpression.values = val.split(/\s*,\s*/).filter(x => !!x);
+            expression.values = val.split(/\s*,\s*/).filter(x => !!x);
           }
 
-          return matchExpression;
+          return expression;
         }).filter(x => !!x);
 
-        if ( isArray(this.value) ) {
+        if ( isArray(this.value) || this.matchingSelectorDisplay ) {
           this.$emit('input', out);
         } else {
           this.$emit('input', simplify(out));
@@ -192,8 +254,11 @@ export default {
     <div
       v-if="rules.length"
       class="match-expression-header"
-      :class="{'view':isView}"
+      :class="{ 'view':isView, 'match-expression-header-matching': matchingSelectorDisplay }"
     >
+      <label v-if="matchingSelectorDisplay">
+        {{ t('workload.scheduling.affinity.matchExpressions.matchType') }}
+      </label>
       <label>
         {{ t('workload.scheduling.affinity.matchExpressions.key') }}
       </label>
@@ -209,8 +274,25 @@ export default {
       v-for="(row, index) in rules"
       :key="row.id"
       class="match-expression-row"
-      :class="{'view':isView, 'mb-10': index !== rules.length - 1}"
+      :class="{'view':isView, 'mb-10': index !== rules.length - 1, 'match-expression-row-matching': matchingSelectorDisplay}"
     >
+      <!-- Select for matchFields and matchExpressions -->
+      <div
+        v-if="matchingSelectorDisplay"
+        :data-testid="`input-match-type-field-${index}`"
+      >
+        <div v-if="isView">
+          {{ row.matching }}
+        </div>
+        <LabeledSelect
+          v-else
+          v-model="row.matching"
+          :mode="mode"
+          :options="matchingSelectOptions"
+          :data-testid="`input-match-type-field-control-${index}`"
+          @selecting="update"
+        />
+      </div>
       <div
         :data-testid="`input-match-expression-key-${index}`"
       >
@@ -221,6 +303,7 @@ export default {
           v-else-if="!hasKeySelectOptions"
           v-model="row.key"
           :mode="mode"
+          :data-testid="`input-match-expression-key-control-${index}`"
           @input="update"
         >
         <LabeledSelect
@@ -228,6 +311,7 @@ export default {
           v-model="row.key"
           :mode="mode"
           :options="keysSelectOptions"
+          :data-testid="`input-match-expression-key-control-select-${index}`"
         />
       </div>
       <div
@@ -244,6 +328,7 @@ export default {
           :clearable="false"
           :reduce="opt=>opt.value"
           :mode="mode"
+          :data-testid="`input-match-expression-operator-control-${index}`"
           @input="update"
         />
       </div>
@@ -266,6 +351,7 @@ export default {
           v-model="row.values"
           :mode="mode"
           :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'"
+          :data-testid="`input-match-expression-values-control-${index}`"
           @input="update"
         >
       </div>
@@ -280,6 +366,7 @@ export default {
           :style="{padding:'0px'}"
 
           :disabled="mode==='view'"
+          :data-testid="`input-match-expression-remove-control-${index}`"
           @click="removeRule(row)"
         >
           <t k="generic.remove" />
@@ -293,6 +380,7 @@ export default {
       <button
         type="button"
         class="btn role-tertiary add"
+        :data-testid="`input-match-expression-add-rule`"
         @click="addRule"
       >
         <t k="workload.scheduling.affinity.matchExpressions.addRule" />
@@ -344,4 +432,15 @@ export default {
       grid-template-columns: repeat(3, 1fr) 50px;
     }
   }
+
+  .match-expression-row > div > input {
+    min-height: 40px !important;
+  }
+  .match-expression-row-matching, .match-expression-header-matching {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+
+    &:not(.view){
+      grid-template-columns: 1fr 1fr 1fr 1fr 100px;
+    }
+  }
 </style>