feat: support for subnets and VPCs from UI (#374)

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/edit/kubeovn.io.vpc/StaticRoutes.vue

@@ -0,0 +1,162 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+
+export default {
+  name: 'StaticRoutes',
+
+  emits: ['update:value'],
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+  },
+
+  data() {
+    const rows = (this.value || []).map((row) => {
+      return {
+        cidr:      row.cidr || '',
+        nextHopIP: row.nextHopIP || '',
+      };
+    });
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+    nextHopIPTooltip() {
+      return this.t('harvester.vpc.staticRoutes.nextHopIP.tooltip');
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 100);
+  },
+
+  methods: {
+    add() {
+      this.rows.push({
+        cidr:      '',
+        nextHopIP: '',
+      });
+      this.queueUpdate();
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if (this.isView) {
+        return;
+      }
+
+      this.$emit('update:value', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="rows.length"
+      class="static-route-row"
+    >
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+      >
+        <div class="pool-headers cidr">
+          <span class="pool-cidr">
+            <t k="harvester.vpc.staticRoutes.cidr.label" />
+          </span>
+          <span class="pool-nextHopIP">
+            <t k="harvester.vpc.staticRoutes.nextHopIP.label" />
+            <i
+              v-clean-tooltip="{content: nextHopIPTooltip, triggers: ['hover', 'touch', 'focus'] }"
+              v-stripped-aria-label="nextHopIPTooltip"
+              class="icon icon-info"
+              tabindex="0"
+            />
+          </span>
+        </div>
+        <div class="pool-row cidr">
+          <div class="pool-cidr">
+            <span v-if="isView">
+              {{ row.cidr }}
+            </span>
+            <input
+              v-else
+              v-model="row.cidr"
+              type="text"
+              :placeholder="t('harvester.vpc.staticRoutes.cidr.placeholder')"
+              @input="queueUpdate"
+            />
+          </div>
+          <div class="pool-nextHopIP">
+            <span v-if="isView">
+              {{ row.nextHopIP }}
+            </span>
+            <input
+              v-else
+              v-model="row.nextHopIP"
+              type="text"
+              :placeholder="t('harvester.vpc.staticRoutes.nextHopIP.placeholder')"
+              @input="queueUpdate"
+            />
+          </div>
+          <button
+            v-if="showRemove"
+            type="button"
+            class="btn role-link pl-0"
+            @click="remove(idx)"
+          >
+            <t k="generic.remove" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      v-if="showAdd"
+      type="button"
+      class="btn role-tertiary add"
+      @click="add()"
+    >
+      <t k="generic.add" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-headers, .pool-row {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &.cidr {
+      grid-template-columns: 40%+$column-gutter 40%+$column-gutter 15%;
+    }
+  }
+
+</style>

pkg/harvester/edit/kubeovn.io.vpc/VpcPeerings.vue

@@ -0,0 +1,187 @@
+<script>
+import debounce from 'lodash/debounce';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { removeAt } from '@shell/utils/array';
+import { HCI } from '../../types';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  name: 'VpcPeerings',
+
+  emits: ['update:value'],
+
+  components: { LabeledSelect },
+
+  props: {
+    value: {
+      type:    Array,
+      default: null,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
+    },
+    vpc: {
+      type:    Object,
+      default: () => ({}),
+    },
+  },
+
+  async fetch() {
+    await this.$store.dispatch('harvester/findAll', { type: HCI.VPC });
+  },
+
+  data() {
+    const rows = (this.value || []).map((row) => {
+      return {
+        localConnectIP:      row.localConnectIP || '',
+        remoteVpc:      row.remoteVpc || '',
+      };
+    });
+
+    return { rows };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+
+    showAdd() {
+      return !this.isView;
+    },
+
+    showRemove() {
+      return !this.isView;
+    },
+
+    remoteVpcOptions() {
+      const allVpcs = this.$store.getters['harvester/all'](HCI.VPC) || [];
+
+      // filter self vpc if editing
+      const vpcs = this.isEdit ? allVpcs.filter((v) => v.id !== this.vpc.id) : allVpcs;
+
+      return vpcs.map((n) => ({
+        label: n.id,
+        value: n.id,
+      }));
+    },
+    localConnectIPTooltip() {
+      return this.t('harvester.vpc.vpcPeerings.localConnectIP.tooltip');
+    },
+  },
+
+  created() {
+    this.queueUpdate = debounce(this.update, 100);
+  },
+
+  methods: {
+    add() {
+      this.rows.push({
+        localConnectIP:  '',
+        remoteVpc:      '',
+      });
+      this.queueUpdate();
+    },
+
+    remove(idx) {
+      removeAt(this.rows, idx);
+      this.queueUpdate();
+    },
+
+    update() {
+      if (this.isView) {
+        return;
+      }
+      this.$emit('update:value', this.rows);
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="rows.length"
+      class="static-route-row"
+    >
+      <div
+        v-for="(row, idx) in rows"
+        :key="idx"
+      >
+        <div class="pool-headers localConnectIP">
+          <span class="pool-localConnectIP">
+            <t k="harvester.vpc.vpcPeerings.localConnectIP.label" />
+            <i
+              v-clean-tooltip="{content: localConnectIPTooltip, triggers: ['hover', 'touch', 'focus'] }"
+              v-stripped-aria-label="localConnectPTooltip"
+              class="icon icon-info"
+              tabindex="0"
+            />
+          </span>
+          <span class="pool-remoteVpc">
+            <t k="harvester.vpc.vpcPeerings.remoteVpc.label" />
+          </span>
+        </div>
+        <div class="pool-row localConnectIP">
+          <div class="pool-localConnectIP">
+            <span v-if="isView">
+              {{ row.localConnectIP }}
+            </span>
+            <input
+              v-else
+              v-model="row.localConnectIP"
+              type="text"
+              :placeholder="t('harvester.vpc.vpcPeerings.localConnectIP.placeholder')"
+              @input="queueUpdate"
+            />
+          </div>
+          <div class="pool-remoteVpc">
+            <span v-if="isView">
+              {{ row.remoteVpc }}
+            </span>
+            <LabeledSelect
+              v-model:value="row.remoteVpc"
+              :options="remoteVpcOptions"
+              :mode="mode"
+              @update:value="queueUpdate"
+            />
+          </div>
+          <button
+            v-if="showRemove"
+            type="button"
+            class="btn role-link pl-0"
+            @click="remove(idx)"
+          >
+            <t k="generic.remove" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      v-if="showAdd"
+      type="button"
+      class="btn role-tertiary add"
+      @click="add()"
+    >
+      <t k="generic.add" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .pool-headers, .pool-row {
+    display: grid;
+    grid-column-gap: $column-gutter;
+    margin-bottom: 10px;
+    align-items: center;
+
+    &.localConnectIP {
+      grid-template-columns: 40%+$column-gutter 40%+$column-gutter 15%;
+    }
+  }
+</style>

pkg/harvester/edit/kubeovn.io.vpc/index.vue

@@ -0,0 +1,120 @@
+<script>
+import CruResource from '@shell/components/CruResource';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import Tab from '@shell/components/Tabbed/Tab';
+import Loading from '@shell/components/Loading';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import ResourceTabs from '@shell/components/form/ResourceTabs/index';
+import StaticRoutes from './StaticRoutes';
+import VpcPeerings from './VpcPeerings';
+import { set } from '@shell/utils/object';
+
+export default {
+  name: 'EditVPC',
+
+  emits: ['update:value'],
+
+  components: {
+    CruResource,
+    NameNsDescription,
+    Tab,
+    StaticRoutes,
+    ResourceTabs,
+    Loading,
+    VpcPeerings
+  },
+
+  mixins: [CreateEditView],
+
+  inheritAttrs: false,
+
+  data() {
+    set(this.value, 'spec', this.value.spec || {
+      staticRoutes: [],
+      vpcPeerings:  [],
+    });
+
+    return { staticRoutes: [] };
+  },
+
+  methods: {
+    async saveVpc(buttonCb) {
+      const errors = [];
+
+      try {
+        const name = this.value?.metadata?.name;
+
+        if (!name) {
+          errors.push(this.t('validation.required', { key: this.t('generic.name') }, true));
+        }
+
+        if (errors.length > 0) {
+          buttonCb(false);
+          this.errors = errors;
+
+          return false;
+        }
+        await this.value.save();
+        buttonCb(true);
+        this.done();
+      } catch (e) {
+        this.errors = [e];
+        buttonCb(false);
+      }
+    },
+  },
+};
+
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <CruResource
+    v-else
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :apply-hooks="applyHooks"
+    :errors="errors"
+    @finish="saveVpc"
+    @error="e=>errors=e"
+  >
+    <NameNsDescription
+      :value="value"
+      :mode="mode"
+      :namespaced="false"
+      @update:value="$emit('update:value', $event)"
+    />
+    <ResourceTabs
+      class="mt-15"
+      :mode="mode"
+      :side-tabs="true"
+    >
+      <Tab
+        name="staticRoutes"
+        :label="t('harvester.vpc.staticRoutes.label')"
+        :weight="-1"
+        class="bordered-table"
+      >
+        <StaticRoutes
+          v-model:value="value.spec.staticRoutes"
+          class="col span-12"
+          :mode="mode"
+        />
+      </Tab>
+      <Tab
+        name="vpcPeerings"
+        :label="t('harvester.vpc.vpcPeerings.label')"
+        :weight="-2"
+        class="bordered-table"
+      >
+        <VpcPeerings
+          v-model:value="value.spec.vpcPeerings"
+          class="col span-12"
+          :mode="mode"
+          :vpc="value"
+        />
+      </Tab>
+    </ResourceTabs>
+  </CruResource>
+</template>