@rancher/shell 0.1.0

package/components/form/WorkloadPorts.vue

@@ -0,0 +1,476 @@
+<script>
+import { mapGetters } from 'vuex';
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt, findBy } from '@shell/utils/array';
+import { clone } from '@shell/utils/object';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
+import { NAME as HARVESTER } from '@shell/config/product/harvester';
+import { CAPI, SERVICE } from '@shell/config/types';
+
+export default {
+  components: {
+    LabeledInput,
+    LabeledSelect,
+  },
+
+  props:      {
+    value: {
+      type:    Array,
+      default: null,
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+
+    // array of services auto-created previously (only relevent when mode !== create)
+    services: {
+      type:    Array,
+      default: () => []
+    },
+
+    // workload name
+    name: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  data() {
+    const rows = clone(this.value || []).map((row) => {
+      row._showHost = false;
+      row._serviceType = row._serviceType || '';
+      row._name = row.name ? `${ row.name }` : `${ row.containerPort }${ row.protocol.toLowerCase() }${ row.hostPort || row._listeningPort || '' }`;
+      if (row.hostPort || row.hostIP) {
+        row._showHost = true;
+      }
+
+      return row;
+    });
+
+    // show host port column if existing port data has any host ports defined
+    const showHostPorts = !!rows.some(row => !!row.hostPort);
+
+    return {
+      rows,
+      showHostPorts,
+      workloadPortOptions: ['TCP', 'UDP']
+    };
+  },
+
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    canNotAccessService() {
+      return !this.$store.getters['cluster/schemaFor'](SERVICE);
+    },
+
+    serviceTypeTooltip() {
+      return this.canNotAccessService ? this.t('workload.container.noServiceAccess') : undefined;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+
+    serviceTypes() {
+      return [
+        {
+          label: this.t('workload.container.ports.noCreateService'),
+          value: ''
+        },
+        {
+          label: this.t('serviceTypes.clusterip'),
+          value: 'ClusterIP'
+        },
+        {
+          label: this.t('serviceTypes.nodeport'),
+          value: 'NodePort'
+        },
+        {
+          label: this.t('serviceTypes.loadbalancer'),
+          value: 'LoadBalancer'
+        },
+      ];
+    },
+
+    clusterIPServicePorts() {
+      return ((this.services.filter(svc => svc.spec.type === 'ClusterIP') || [])[0] || {})?.spec?.ports;
+    },
+
+    loadBalancerServicePorts() {
+      return ((this.services.filter(svc => svc.spec.type === 'LoadBalancer') || [])[0] || {})?.spec?.ports;
+    },
+
+    nodePortServicePorts() {
+      return ((this.services.filter(svc => svc.spec.type === 'NodePort') || [])[0] || {})?.spec?.ports;
+    },
+
+    ipamOptions() {
+      return [{
+        label: 'DHCP',
+        value: 'dhcp',
+      }, {
+        label: 'Pool',
+        value: 'pool',
+      }];
+    },
+
+    ipamIndex() {
+      return this.rows.findIndex(row => row._serviceType === 'LoadBalancer' && row.protocol === 'TCP');
+    },
+
+    serviceWithIpam() {
+      return this.services.find(s => s?.metadata?.annotations[HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM]);
+    },
+
+    showIpam() {
+      let cloudProvider;
+      const version = this.provisioningCluster?.kubernetesVersion;
+
+      if (this.provisioningCluster?.isRke2) {
+        const machineSelectorConfig = this.provisioningCluster?.spec?.rkeConfig?.machineSelectorConfig || {};
+        const agentConfig = (machineSelectorConfig[0] || {}).config;
+
+        cloudProvider = agentConfig?.['cloud-provider-name'];
+      } else if (this.provisioningCluster?.isRke1) {
+        const currentCluster = this.$store.getters['currentCluster'];
+
+        cloudProvider = currentCluster?.spec?.rancherKubernetesEngineConfig?.cloudProvider?.name;
+      }
+
+      return cloudProvider === HARVESTER &&
+              isHarvesterSatisfiesVersion(version);
+    },
+
+    provisioningCluster() {
+      const out = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find(c => c?.status?.clusterName === this.currentCluster.metadata.name);
+
+      return out;
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 500);
+    this.rows.map((row) => {
+      this.setServiceType(row);
+      this.setIpam(row);
+    });
+  },
+
+  methods: {
+    add() {
+      this.rows.push({
+        name:          '',
+        expose:        true,
+        protocol:      'TCP',
+        containerPort: null,
+        hostPort:      null,
+        hostIP:        null,
+        _showHost:     false,
+        _serviceType:  '',
+        _ipam:         'dhcp',
+      });
+
+      this.queueUpdate();
+
+      this.$nextTick(() => {
+        const inputs = this.$refs.name;
+
+        inputs[inputs.length - 1].focus();
+      });
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+      const out = [];
+
+      for ( const row of this.rows ) {
+        const value = clone(row);
+
+        delete value._showHost;
+        out.push(value);
+      }
+      this.$emit('input', out);
+    },
+
+    setServiceType(row) {
+      const { _name } = row;
+
+      if (this.loadBalancerServicePorts) {
+        const portSpec = findBy(this.loadBalancerServicePorts, 'name', _name);
+
+        if (portSpec) {
+          this.$set(row, '_listeningPort', portSpec.port);
+
+          row._serviceType = 'LoadBalancer';
+
+          return;
+        }
+      } if (this.nodePortServicePorts) {
+        const portSpec = findBy(this.nodePortServicePorts, 'name', _name);
+
+        if (portSpec) {
+          this.$set(row, '_listeningPort', portSpec.nodePort);
+
+          row._serviceType = 'NodePort';
+
+          return;
+        }
+      } if (this.clusterIPServicePorts) {
+        if (findBy(this.clusterIPServicePorts, 'name', _name)) {
+          row._serviceType = 'ClusterIP';
+
+          return;
+        }
+      }
+
+      return '';
+    },
+
+    setIpam(row) {
+      if (this.serviceWithIpam && row._serviceType === 'LoadBalancer' && row.protocol === 'TCP') {
+        row._ipam = this.serviceWithIpam?.metadata?.annotations[HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM];
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div :style="{'width':'100%'}">
+    <div
+      v-for="(row, idx) in rows"
+      :key="idx"
+      class="ports-row"
+      :class="{
+        'show-host':row._showHost,
+        'loadBalancer': row._serviceType === 'LoadBalancer',
+        'tcp': row.protocol === 'TCP',
+        'show-ipam': showIpam,
+      }"
+    >
+      <div class="service-type col">
+        <LabeledSelect
+          v-model="row._serviceType"
+          :mode="mode"
+          :label="t('workload.container.ports.createService')"
+          :options="serviceTypes"
+          :disabled="canNotAccessService"
+          :tooltip="serviceTypeTooltip"
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div class="portName">
+        <LabeledInput
+          ref="name"
+          v-model="row.name"
+          :mode="mode"
+          :label="t('workload.container.ports.name')"
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div class="port">
+        <LabeledInput
+          v-model.number="row.containerPort"
+          :mode="mode"
+          type="number"
+          min="1"
+          max="65535"
+          placeholder="e.g. 8080"
+          :label="t('workload.container.ports.containerPort')"
+          :required="row._serviceType === 'LoadBalancer' "
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div class="protocol col">
+        <LabeledSelect
+          v-model="row.protocol"
+          :mode="mode"
+          :options="workloadPortOptions"
+          :multiple="false"
+          :label="t('workload.container.ports.protocol')"
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div v-if="row._showHost" class="targetPort">
+        <LabeledInput
+          ref="port"
+          v-model.number="row.hostPort"
+          :mode="mode"
+          type="number"
+          min="1"
+          max="65535"
+          placeholder="e.g. 80"
+          :label="t('workload.container.ports.hostPort')"
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div v-if="row._showHost" class="hostip">
+        <LabeledInput
+          ref="port"
+          v-model="row.hostIP"
+          :mode="mode"
+          placeholder="e.g. 1.1.1.1"
+          :label="t('workload.container.ports.hostIP')"
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div v-if="!row._showHost && row._serviceType !== 'LoadBalancer' && row._serviceType !== 'NodePort'" class="add-host">
+        <button :disabled="mode==='view'" type="button" class="btn btn-sm role-tertiary" @click="row._showHost = true">
+          {{ t('workloadPorts.addHost') }}
+        </button>
+      </div>
+
+      <div v-if="row._serviceType === 'LoadBalancer' || row._serviceType === 'NodePort'">
+        <LabeledInput
+          ref="port"
+          v-model.number="row._listeningPort"
+          type="number"
+          :mode="mode"
+          :label="t('workload.container.ports.listeningPort')"
+          :required="row._serviceType === 'LoadBalancer' "
+          @input="queueUpdate"
+        />
+      </div>
+
+      <div v-if="showIpam && row._serviceType === 'LoadBalancer' && row.protocol === 'TCP'">
+        <div v-if="idx === ipamIndex">
+          <LabeledSelect
+            v-model="row._ipam"
+            :mode="mode"
+            :options="ipamOptions"
+            :label="t('harvester.service.ipam.label')"
+            :disabled="mode === 'edit'"
+            @input="queueUpdate"
+          />
+        </div>
+        <div v-else>
+          <LabeledSelect
+            v-model="rows[ipamIndex]._ipam"
+            :mode="mode"
+            :options="ipamOptions"
+            :label="t('harvester.service.ipam.label')"
+            :disabled="true"
+            @input="queueUpdate"
+          />
+        </div>
+      </div>
+
+      <div v-if="showRemove" class="remove">
+        <button type="button" class="btn role-link" @click="remove(idx)">
+          {{ t('workloadPorts.remove') }}
+        </button>
+      </div>
+    </div>
+    <div v-if="showAdd" class="footer">
+      <button type="button" class="btn role-tertiary add" @click="add()">
+        {{ t('workloadPorts.addPort') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$remove: 75;
+$checkbox: 75;
+
+.title {
+  margin-bottom: 10px;
+
+  .read-from-file {
+    float: right;
+  }
+}
+.ports-headers, .ports-row{
+  display: grid;
+  grid-template-columns: 20% 32% 145px 90px .5fr .5fr;
+  grid-column-gap: $column-gutter;
+  margin-bottom: 10px;
+  align-items: center;
+  & .port{
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &.show-host{
+    grid-template-columns: 20% 20% 145px 90px 140px .5fr .5fr;
+  }
+
+  &.show-ipam.loadBalancer.tcp{
+    grid-template-columns: 20% 20% 145px 90px .5fr 140px .5fr;
+  }
+
+  &.show-ipam.show-host.loadBalancer{
+    grid-template-columns: 20% 10% 135px 90px 105px .5fr .5fr .5fr;
+  }
+
+  &.show-ipam.show-host.loadBalancer.tcp{
+    grid-template-columns: 12% 10% 135px 90px 105px .5fr .5fr 100px .5fr;
+  }
+}
+
+.add-host {
+  justify-self: center;
+}
+
+.protocol {
+  height: 100%;
+}
+
+.ports-headers {
+  color: var(--input-label);
+}
+
+.toggle-host-ports {
+  color: var(--primary);
+}
+
+.remove BUTTON {
+  padding: 0px;
+}
+
+.ports-row INPUT {
+  height: 50px;
+}
+
+.footer {
+  .protip {
+    float: right;
+    padding: 5px 0;
+  }
+}
+.ports-row .protocol ::v-deep .unlabeled-select,
+.ports-row .protocol ::v-deep .unlabeled-select .v-select {
+  height: 100%;
+}
+.ports-row .protocol ::v-deep .unlabeled-select .vs__dropdown-toggle {
+  padding-top: 12px;
+}
+</style>

package/components/form/__tests__/ArrayListGrouped.test.ts

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
+
+describe('component: ArrayListGrouped', () => {
+  it('should display enabled add button', () => {
+    const wrapper = mount(ArrayListGrouped);
+    const button = wrapper.find('[data-testid^="add-item"]').element as HTMLInputElement;
+
+    expect(button.disabled).toBe(false);
+  });
+
+  it('should add more items', async() => {
+    const wrapper = mount(ArrayListGrouped, {
+      mocks: { propsData: { value: ['a', 'b'] } },
+      slots: { default: '<div id="test"/>' }
+    });
+    const button = wrapper.find('[data-testid^="add-item"]');
+
+    await button.trigger('click');
+    await button.trigger('click');
+    const elements = wrapper.findAll('#test');
+
+    expect(elements).toHaveLength(2);
+  });
+
+  it('should allow to remove items', async() => {
+    const wrapper = mount(ArrayListGrouped, {
+      mocks: { propsData: { value: ['a', 'b'] } },
+      slots: { default: '<div id="test"/>' }
+    });
+
+    await wrapper.find('[data-testid^="add-item"]').trigger('click');
+    await wrapper.find('[data-testid^="remove-item"]').trigger('click');
+
+    const elements = wrapper.findAll('#test');
+
+    expect(elements).toHaveLength(0);
+  });
+});

package/components/form/__tests__/KeyValue.test.ts

@@ -0,0 +1,18 @@
+import { mount } from '@vue/test-utils';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import { directiveSsr as t } from '@shell/plugins//i18n';
+
+describe('component: KeyValue', () => {
+  it('should display a not encoded value', () => {
+    const value = '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';
+    const wrapper = mount(KeyValue, {
+      propsData:  { value: { value } },
+      mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
+      directives: { t }
+    });
+
+    const inputValue = wrapper.find('textarea').element as HTMLInputElement;
+
+    expect(inputValue.value).toBe(value);
+  });
+});

package/components/form/__tests__/LabeledInput.test.ts

@@ -0,0 +1,20 @@
+
+import { mount } from '@vue/test-utils';
+import LabeledInput from '@shell/components/form/LabeledInput.vue';
+
+describe('component: LabeledInput', () => {
+  it('should emit input only once', () => {
+    const value = '2';
+    const delay = 1;
+    const wrapper = mount(LabeledInput, { propsData: { delay } });
+
+    jest.useFakeTimers();
+    wrapper.find('input').setValue('1');
+    wrapper.find('input').setValue(value);
+    jest.advanceTimersByTime(delay);
+    jest.useRealTimers();
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')![0][0]).toBe(value);
+  });
+});