@rancher/shell 0.1.0

package/components/form/Tolerations.vue

@@ -0,0 +1,220 @@
+<script>
+import { mapGetters } from 'vuex';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import Select from '@shell/components/form/Select';
+import UnitInput from '@shell/components/form/UnitInput';
+import { _VIEW } from '@shell/config/query-params';
+import { random32 } from '@shell/utils/string';
+
+export default {
+  components: {
+    LabeledInput,
+    Select,
+    // SortableTable,
+    UnitInput
+  },
+  props: {
+    // pod tolerations array
+    value: {
+      type:    Array,
+      default: () => []
+    },
+
+    mode: {
+      type:    String,
+      default: 'edit'
+    }
+  },
+
+  data() {
+    return { rules: [...this.value] };
+  },
+
+  computed: {
+    tableHeaders() {
+      return [
+        {
+          name:  'key',
+          label: this.t('workload.scheduling.tolerations.labelKey'),
+          value: 'key'
+        },
+        {
+          name:  'operator',
+          label: this.t('workload.scheduling.tolerations.operator'),
+          value: 'operator',
+          width: '10%'
+        },
+        {
+          name:  'value',
+          label: this.t('workload.scheduling.tolerations.value'),
+          value: 'value'
+        },
+        {
+          name:  'effect',
+          label: this.t('workload.scheduling.tolerations.effect'),
+          value: 'effect',
+          width: '20%'
+        },
+        {
+          name:  'seconds',
+          label: this.t('workload.scheduling.tolerations.tolerationSeconds'),
+          value: 'tolerationSeconds',
+          width: '20%'
+        },
+        {
+          name:  'remove',
+          width: '50'
+        }
+      ];
+    },
+    operatorOpts() {
+      return [
+        {
+          label: this.t('workload.scheduling.tolerations.operatorOptions.exists'),
+          value: 'Exists'
+        },
+        {
+          label: this.t('workload.scheduling.tolerations.operatorOptions.equal'),
+          value: 'Equal'
+        }
+      ];
+    },
+    effectOpts() {
+      return [
+        {
+          label: this.t('workload.scheduling.tolerations.effectOptions.all'),
+          value: 'All'
+        },
+        {
+          label: this.t('workload.scheduling.tolerations.effectOptions.noSchedule'),
+          value: 'NoSchedule'
+        },
+        {
+          label: this.t('workload.scheduling.tolerations.effectOptions.preferNoSchedule'),
+          value: 'PreferNoSchedule'
+        },
+        {
+          label: this.t('workload.scheduling.tolerations.effectOptions.noExecute'),
+          value: 'NoExecute'
+        }
+      ];
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+    ...mapGetters({ t: 'i18n/t' })
+  },
+
+  methods: {
+    remove(row) {
+      const idx = this.rules.indexOf(row);
+
+      this.rules.splice(idx, 1);
+      this.update();
+    },
+
+    update() {
+      this.$emit('input', this.rules);
+    },
+
+    addToleration() {
+      this.rules.push({ vKey: random32() });
+    },
+
+    updateEffect(neu, rule) {
+      if (neu !== 'NoExecute' && rule.tolerationSeconds) {
+        delete rule.tolerationSeconds;
+      }
+    }
+  }
+
+};
+</script>
+
+<template>
+  <div class="tolerations">
+    <div v-if="rules.length" class="toleration-headers">
+      <span>{{ t('workload.scheduling.tolerations.labelKey') }}</span>
+      <span>{{ t('workload.scheduling.tolerations.operator') }}</span>
+      <span>{{ t('workload.scheduling.tolerations.value') }}</span>
+      <span>{{ t('workload.scheduling.tolerations.effect') }}</span>
+      <span>{{ t('workload.scheduling.tolerations.tolerationSeconds') }}</span>
+      <span />
+    </div>
+    <div v-for="rule in rules" :key="rule.vKey" class="rule">
+      <div class="col">
+        <LabeledInput v-model="rule.key" :mode="mode" />
+      </div>
+      <div class="col">
+        <Select
+          id="operator"
+          v-model="rule.operator"
+          :options="operatorOpts"
+          :mode="mode"
+          @input="update"
+        />
+      </div>
+      <template v-if="rule.operator==='Exists'">
+        <div class="col">
+          <LabeledInput value="n/a" :mode="mode" disabled />
+        </div>
+      </template>
+      <template v-else>
+        <div class="col">
+          <LabeledInput v-model="rule.value" :mode="mode" />
+        </div>
+      </template>
+      <div class="col">
+        <Select
+          v-model="rule.effect"
+          :options="effectOpts"
+          :mode="mode"
+          @input="e=>updateEffect(e, rule)"
+        />
+      </div>
+      <div class="col">
+        <UnitInput v-model="rule.tolerationSeconds" :disabled="rule.effect !== 'NoExecute'" :mode="mode" suffix="Seconds" />
+      </div>
+      <div class="col">
+        <button
+          v-if="!isView"
+          type="button"
+          class="btn role-link"
+          :disabled="mode==='view'"
+          @click="remove(rule)"
+        >
+          <t k="generic.remove" />
+        </button>
+      </div>
+    </div>
+    <button v-if="!isView" type="button" class="btn role-tertiary" @click="addToleration">
+      <t k="workload.scheduling.tolerations.addToleration" />
+    </button>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.tolerations{
+  width: 100%;
+}
+
+.rule, .toleration-headers{
+  display: grid;
+  grid-template-columns: 20% 10% 20% 15% 20% 10%;
+  grid-gap: $column-gutter;
+  align-items: center;
+}
+
+.rule {
+  margin-bottom: 20px;
+  .col {
+    height: 100%;
+  }
+}
+
+.toleration-headers SPAN {
+  color: var(--input-label);
+  margin-bottom: 10px;
+}
+</style>

package/components/form/UnitInput.vue

@@ -0,0 +1,237 @@
+<script>
+import { parseSi, formatSi, UNITS, FRACTIONAL } from '@shell/utils/units';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import { _EDIT } from '@shell/config/query-params';
+
+export default {
+  components: { LabeledInput },
+
+  props: {
+    /**
+     * Convert output to string
+     * Output will also be a string regardless of this prop if outputModifier = true
+     */
+    outputAs: {
+      type:    String,
+      default: 'number',
+    },
+
+    /**
+     * Append exponential modifier in output, eg "123Mi"
+     * If this is false while inputExponent is true, the output val will be converted to base units
+     * eg user is views in terms of MiB but integer values corresponding to B are actually emitted
+     */
+    outputModifier: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Set modifier on base unit - positive vals map to UNITS array, negative to FRACTIONAL
+     * String input values with SI notation will be converted to this measurement unit,
+     * eg "1Gi" will become "1024Mi" if this is set to 2
+     * UNITS = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+     * FRACTIONAL = ['', 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y'];
+     */
+    inputExponent: {
+      type:    Number,
+      default: 0,
+    },
+
+    /**
+     * Combines with inputExponent to make displayed unit.
+     * Use 'suffix' if the input's units are strictly for display
+     */
+    baseUnit: {
+      type:    String,
+      default: 'B',
+    },
+
+    /**
+     * Hide arrows on number input when it overlaps with the unit
+     */
+    hideArrows: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * If set to 1024, binary modifier will be used eg MiB instead of MB
+     */
+    increment: {
+      type:    Number,
+      default: 1000,
+    },
+
+    /**
+     * Ignore baseUnit and inputExponent in favor of a display-only suffix
+     * display/emit integers without SI conversion
+     */
+    suffix: {
+      type:    String,
+      default: null,
+    },
+
+    /**
+     * LabeledInput props
+     */
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+
+    value: {
+      type:    [Number, String],
+      default: null
+    },
+
+    label: {
+      type:     String,
+      default: null
+    },
+
+    labelKey: {
+      type:     String,
+      default: null
+    },
+
+    tooltip: {
+      type:    [String, Object],
+      default: null
+    },
+
+    tooltipKey: {
+      type:     String,
+      default: null
+    },
+
+    required: {
+      type:    Boolean,
+      default: false,
+    },
+
+    min: {
+      type:    [Number, String],
+      default: 0
+    },
+
+    placeholder: {
+      type:    [String, Number],
+      default: ''
+    },
+
+    /**
+     * Optionally delay on input while typing
+     */
+    delay: {
+      type:    Number,
+      default: 500
+    }
+  },
+
+  computed: {
+    unit() {
+      let out;
+
+      if ( this.inputExponent >= 0 ) {
+        out = UNITS[this.inputExponent];
+      } else {
+        out = FRACTIONAL[-1 * this.inputExponent];
+      }
+      if (this.increment === 1024 && out) {
+        out += 'i';
+      }
+
+      return out;
+    },
+
+    /**
+     * Parse string with unit modifier to base unit eg "1m" -> 0.001
+     */
+    parsedValue() {
+      return typeof this.value === 'string' ? parseSi(this.value) : this.value;
+    },
+
+    /**
+     * Convert integer value
+     */
+    displayValue() {
+      let displayValue = '';
+
+      if ( this.parsedValue || this.parsedValue === 0) {
+        displayValue = formatSi(this.parsedValue, {
+          increment:        this.increment,
+          addSuffix:        false,
+          maxExponent:      this.inputExponent,
+          minExponent:      this.inputExponent,
+        });
+      }
+
+      return displayValue ;
+    },
+
+    /**
+     * Conditionally display value with unit or SI suffix
+     */
+    displayUnit() {
+      if (this.suffix) {
+        return this.suffix;
+      }
+
+      return this.unit + this.baseUnit;
+    }
+  },
+
+  methods: {
+    update(inputValue) {
+      let out = inputValue === '' ? null : inputValue;
+
+      if (this.outputModifier) {
+        out = out === null ? null : `${ inputValue }${ this.unit }`;
+      } else if ( this.outputAs === 'string' ) {
+        out = out === null ? '' : `${ inputValue }`;
+      } else if (out) {
+        out = this.unit ? parseSi(`${ out }${ this.unit }`) : parseInt(out);
+      }
+
+      this.$emit('input', out);
+    },
+  }
+};
+</script>
+
+<template>
+  <LabeledInput
+    :value="displayValue"
+    v-bind="$attrs"
+    type="number"
+    :min="min"
+    :mode="mode"
+    :label="label"
+    :delay="delay"
+    :label-key="labelKey"
+    :tooltip="tooltip"
+    :tooltip-key="tooltipKey"
+    :required="required"
+    :placeholder="placeholder"
+    :hide-arrows="hideArrows"
+    @input="update($event)"
+  >
+    <template #suffix>
+      <div
+        v-if="displayUnit"
+        class="addon"
+        :class="{'with-tooltip': tooltip || tooltipKey}"
+      >
+        {{ displayUnit }}
+      </div>
+    </template>
+  </LabeledInput>
+</template>
+
+<style lang="scss" scoped>
+  .addon.with-tooltip {
+    position: relative;
+    right: 30px;
+  }
+</style>