@rancher/shell 0.1.0

package/components/form/NodeAffinity.vue

@@ -0,0 +1,158 @@
+<script>
+import { _VIEW } from '@shell/config/query-params';
+import { mapGetters } from 'vuex';
+import { get, isEmpty, clone } from '@shell/utils/object';
+import { NODE } from '@shell/config/types';
+import MatchExpressions from '@shell/components/form/MatchExpressions';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { randomStr } from '@shell/utils/string';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
+
+export default {
+  components: {
+    ArrayListGrouped, MatchExpressions, LabeledSelect
+  },
+
+  props:      {
+    // value should be NodeAffinity or VolumeNodeAffinity
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    mode: {
+      type:    String,
+      default: 'create'
+    },
+  },
+
+  data() {
+    // VolumeNodeAffinity only has 'required' field
+    if (this.value.required) {
+      return { nodeSelectorTerms: this.value.required.nodeSelectorTerms };
+    } else {
+      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
+      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
+      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
+        const neu = clone(term);
+
+        neu._id = randomStr(4);
+        if (term.preference) {
+          Object.assign(neu, term.preference);
+          delete neu.preference;
+        }
+
+        return neu;
+      });
+
+      return {
+        allSelectorTerms,
+        weightedNodeSelectorTerms: preferredDuringSchedulingIgnoredDuringExecution,
+        defaultWeight:             1
+      };
+    }
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    isView() {
+      return this.mode === _VIEW;
+    },
+    hasWeighted() {
+      return !!this.weightedNodeSelectorTerms;
+    },
+    node() {
+      return NODE;
+    },
+    affinityOptions() {
+      const out = [this.t('workload.scheduling.affinity.preferred'), this.t('workload.scheduling.affinity.required')];
+
+      return out;
+    }
+  },
+
+  mounted() {
+    this.update();
+  },
+
+  methods: {
+    update() {
+      this.$nextTick(() => {
+        const out = {};
+        const requiredDuringSchedulingIgnoredDuringExecution = { nodeSelectorTerms: [] };
+        const preferredDuringSchedulingIgnoredDuringExecution = [] ;
+
+        this.allSelectorTerms.forEach((term) => {
+          if (term.weight) {
+            const neu = { weight: 1, preference: term };
+
+            preferredDuringSchedulingIgnoredDuringExecution.push(neu);
+          } else {
+            requiredDuringSchedulingIgnoredDuringExecution.nodeSelectorTerms.push(term);
+          }
+        });
+
+        if (preferredDuringSchedulingIgnoredDuringExecution.length) {
+          out.preferredDuringSchedulingIgnoredDuringExecution = preferredDuringSchedulingIgnoredDuringExecution;
+        }
+        if (requiredDuringSchedulingIgnoredDuringExecution.nodeSelectorTerms.length) {
+          out.requiredDuringSchedulingIgnoredDuringExecution = requiredDuringSchedulingIgnoredDuringExecution;
+        }
+        this.$emit('input', out);
+      });
+    },
+
+    changePriority(term) {
+      if (term.weight) {
+        this.$delete(term, 'weight');
+      } else {
+        this.$set(term, 'weight', 1);
+      }
+      this.update();
+    },
+
+    priorityDisplay(term) {
+      return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
+    },
+
+    get,
+
+    isEmpty
+  }
+
+};
+</script>
+
+<template>
+  <div class="row" @input="update">
+    <div class="col span-12">
+      <ArrayListGrouped v-model="allSelectorTerms" class="mt-20" :mode="mode" :default-add-value="{matchExpressions:[]}" :add-label="t('workload.scheduling.affinity.addNodeSelector')">
+        <template #default="props">
+          <div class="row">
+            <div class="col span-6">
+              <LabeledSelect
+                :options="affinityOptions"
+                :value="priorityDisplay(props.row.value)"
+                :label="t('workload.scheduling.affinity.priority')"
+                :mode="mode"
+                @input="(changePriority(props.row.value))"
+              />
+            </div>
+          </div>
+          <MatchExpressions
+            v-model="props.row.value.matchExpressions"
+            :mode="mode"
+            class="col span-12 mt-20"
+            :type="node"
+            :show-remove="false"
+          />
+        </template>
+      </ArrayListGrouped>
+    </div>
+  </div>
+</template>
+
+<style>
+</style>

package/components/form/NodeScheduling.vue

@@ -0,0 +1,163 @@
+<script>
+import { mapGetters } from 'vuex';
+import RadioGroup from '@shell/components/form/RadioGroup';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NodeAffinity from '@shell/components/form/NodeAffinity';
+import { NAME as VIRTUAL } from '@shell/config/product/harvester';
+import { _VIEW } from '@shell/config/query-params';
+import { isEmpty } from '@shell/utils/object';
+import { HOSTNAME } from '@shell/config/labels-annotations';
+
+export default {
+  components: {
+    RadioGroup,
+    LabeledSelect,
+    NodeAffinity,
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    nodes: {
+      type:    Array,
+      default: () => []
+    },
+
+    mode: {
+      type:    String,
+      default: 'create'
+    }
+  },
+
+  data() {
+    const isHarvester = this.$store.getters['currentProduct'].inStore === VIRTUAL;
+
+    let { nodeName = '' } = this.value;
+    const { affinity = {}, nodeSelector = {} } = this.value;
+
+    const { nodeAffinity = {} } = affinity;
+
+    let selectNode = null;
+
+    if (this.value.nodeName) {
+      selectNode = 'nodeSelector';
+    } else if (isHarvester && this.value.nodeSelector) {
+      selectNode = 'nodeSelector';
+      nodeName = nodeSelector[HOSTNAME];
+    } else if (!isEmpty(nodeAffinity)) {
+      selectNode = 'affinity';
+    }
+
+    if (!nodeAffinity.requiredDuringSchedulingIgnoredDuringExecution) {
+      this.$set(nodeAffinity, 'requiredDuringSchedulingIgnoredDuringExecution', { nodeSelectorTerms: [] } );
+    }
+    if (!nodeAffinity.preferredDuringSchedulingIgnoredDuringExecution) {
+      this.$set(nodeAffinity, 'preferredDuringSchedulingIgnoredDuringExecution', []);
+    }
+
+    return {
+      selectNode, nodeName, nodeAffinity, nodeSelector
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === VIRTUAL;
+    },
+
+    selectNodeOptions() {
+      const prefix = this.isHarvester ? 'harvester.virtualMachine' : 'workload';
+      const out = [{
+        label: this.t(`${ prefix }.scheduling.affinity.anyNode`),
+        value: null
+      },
+      {
+        label: this.t(`${ prefix }.scheduling.affinity.specificNode`),
+        value: 'nodeSelector'
+      },
+      {
+        label: this.t(`${ prefix }.scheduling.affinity.schedulingRules`),
+        value: 'affinity'
+      }];
+
+      return out;
+    },
+
+  },
+  methods: {
+    update() {
+      const { nodeName, nodeSelector, nodeAffinity } = this;
+
+      switch (this.selectNode) {
+      case 'nodeSelector':
+        if (this.isHarvester) {
+          Object.assign(this.value, { nodeSelector: { [HOSTNAME]: nodeName } });
+        } else {
+          Object.assign(this.value, { nodeSelector, nodeName });
+        }
+        if (this.value?.affinity?.nodeAffinity) {
+          delete this.value.affinity.nodeAffinity;
+        }
+        break;
+      case 'affinity':
+        delete this.value.nodeName;
+        delete this.value.nodeSelector;
+        if (!this.value.affinity) {
+          Object.assign(this.value, { affinity: { nodeAffinity } });
+        } else {
+          Object.assign(this.value.affinity, { nodeAffinity });
+        }
+        break;
+      default:
+        delete this.value.nodeName;
+        delete this.value.nodeSelector;
+        if (this.value?.affinity?.nodeAffinity) {
+          delete this.value.affinity.nodeAffinity;
+        }
+      }
+    },
+    isEmpty
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <RadioGroup
+        v-model="selectNode"
+        name="selectNode"
+        :options="selectNodeOptions"
+        :mode="mode"
+        @input="update"
+      />
+    </div>
+    <template v-if="selectNode === 'nodeSelector'">
+      <div class="row">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model="nodeName"
+            :label="t('workload.scheduling.affinity.nodeName')"
+            :options="nodes || []"
+            :mode="mode"
+            :multiple="false"
+            @input="update"
+          />
+        </div>
+      </div>
+    </template>
+    <template v-else-if="selectNode === 'affinity'">
+      <NodeAffinity v-model="nodeAffinity" :mode="mode" @input="update" />
+    </template>
+  </div>
+</template>

package/components/form/NotificationSettings.vue

@@ -0,0 +1,71 @@
+<script>
+import LabeledInput from '@shell/components/form/LabeledInput';
+import Checkbox from '@shell/components/form/Checkbox';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+export default ({
+
+  name: 'NotificationSettings',
+
+  components: { LabeledInput, Checkbox },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+
+    mode: {
+      type: String,
+      validator(value) {
+        return [_EDIT, _VIEW].includes(value);
+      },
+      default: _EDIT,
+    }
+  },
+
+});
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <Checkbox
+          :mode="mode"
+          :value="value.showMessage === 'true'"
+          :label="t('notifications.loginError.showCheckboxLabel')"
+          @input="e=>$set(value, 'showMessage', e.toString())"
+        />
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div class="col span-6">
+        <div class="row">
+          <div class="col span-12">
+            <LabeledInput
+              v-model="value.message"
+              :mode="mode"
+              :disabled="value.showMessage === 'false'"
+              :label="t('notifications.loginError.messageLabel')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang='scss'>
+.banner-decoration-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius);
+  padding-bottom: 5px;
+  height: 24px;
+}
+</style>

package/components/form/Password.vue

@@ -0,0 +1,137 @@
+<script>
+import { mapGetters } from 'vuex';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import { CHARSET, randomStr } from '@shell/utils/string';
+
+export default {
+  components: { LabeledInput },
+  props:      {
+    value: {
+      default: '',
+      type:    String,
+    },
+    isRandom: {
+      default: false,
+      type:    Boolean,
+    },
+    label: {
+      default: '',
+      type:    String,
+    },
+    name: {
+      default: '',
+      type:     String
+    },
+    autocomplete: {
+      type:      String,
+      default:   ''
+    },
+    required: {
+      default: false,
+      type:    Boolean,
+    },
+    ignorePasswordManagers: {
+      default: false,
+      type:    Boolean,
+    }
+  },
+  data() {
+    return { reveal: false };
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    password: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    },
+    attributes() {
+      const attributes = { };
+
+      if (this.name) {
+        attributes.id = this.name;
+        attributes.name = this.name;
+      }
+      if (this.autocomplete) {
+        attributes.autocomplete = this.autocomplete;
+      }
+
+      return attributes;
+    }
+  },
+  watch: {
+    isRandom() {
+      if (this.isRandom) {
+        this.generatePassword();
+      }
+    }
+  },
+  created() {
+    if (this.isRandom) {
+      this.generatePassword();
+    }
+  },
+  methods: {
+    generatePassword() {
+      this.password = randomStr(16, CHARSET.ALPHA_NUM);
+    },
+    show(reveal) {
+      this.reveal = reveal;
+    },
+    focus() {
+      this.$refs.input.$refs.value.focus();
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="password">
+    <LabeledInput
+      ref="input"
+      v-model="password"
+      v-bind="attributes"
+      :type="isRandom || reveal ? 'text' : 'password'"
+      :readonly="isRandom"
+      :label="label"
+      :required="required"
+      :disabled="isRandom"
+      :ignore-password-managers="ignorePasswordManagers"
+      @blur="$emit('blur', $event)"
+    >
+      <template #suffix>
+        <div v-if="isRandom" class="addon">
+          <a href="#" @click.prevent.stop="$copyText(password)">{{ t('action.copy') }}</a>
+        </div>
+        <div v-else class="addon">
+          <a v-if="reveal" tabindex="-1" href="#" @click.prevent.stop="reveal = false">{{ t('action.hide') }}</a>
+          <a v-else tabindex="-1" href="#" @click.prevent.stop="reveal=true">{{ t('action.show') }}</a>
+        </div>
+      </template>
+    </LabeledInput>
+    <div v-if="isRandom" class="mt-10 genPassword">
+      <a href="#" @click.prevent.stop="generatePassword"><i class="icon icon-refresh" /> {{ t('changePassword.newGeneratedPassword') }}</a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .password {
+    display: flex;
+    flex-direction: column;
+    .labeled-input {
+      .addon {
+          padding-left: 12px;
+          min-width: 65px;
+      }
+    }
+    .genPassword {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+</style>

package/components/form/PlusMinus.vue

@@ -0,0 +1,80 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     Number,
+      required: true,
+    },
+    label: {
+      type:    String,
+      default: ''
+    },
+    minusTooltip: {
+      type:    String,
+      default: null,
+    },
+    plusTooltip: {
+      type:    String,
+      default: null,
+    },
+    min: {
+      type:    Number,
+      default: 0
+    },
+    max: {
+      type:    Number,
+      default: null,
+    },
+    disabled: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  computed: {
+    canMinus() {
+      return (this.min !== undefined && this.min !== null) ? this.value > this.min : true;
+    },
+    canPlus() {
+      return (this.max !== undefined && this.max !== null) ? this.value < this.max : true;
+    }
+  }
+};
+
+</script>
+
+<template>
+  <div class="plus-minus">
+    <span v-if="label" class="label">{{ label }} </span>
+    <button v-tooltip="minusTooltip" :disabled="disabled || !canMinus" type="button" class="btn btn-sm role-secondary" @click="$emit('minus')">
+      <i class="icon icon-sm icon-minus" />
+    </button>
+    <div class="value">
+      {{ value }}
+    </div>
+    <button v-tooltip="plusTooltip" :disabled="disabled || !canPlus" type="button" class="btn btn-sm role-secondary" @click="$emit('plus')">
+      <i class="icon icon-sm icon-plus" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.plus-minus {
+  min-width: 70px;
+  display: flex;
+  align-items: center;
+  button:hover {
+    background-color: var(--accent-btn);
+  }
+  .value {
+    min-width: 25px;
+    max-width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.label {
+  padding-right: 1em;
+}
+</style>