apache · davidjumani · Jan 4, 2021
diff --git a/src/config/section/network.js b/src/config/section/network.js
@@ -53,6 +53,10 @@ export default {
        name: 'virtual.routers',
        component: () => import('@/views/network/RoutersTab.vue'),
        show: (record) => { return (record.type === 'Isolated' || record.type === 'Shared') && 'listRouters' in store.getters.apis }
+      }, {
+        name: 'guest.ip.range',
+        component: () => import('@/views/network/GuestIpRanges.vue'),
+        show: (record) => { return 'listVlanIpRanges' in store.getters.apis && (record.type !== 'Isolated' || record.service.filter(x => x.name === 'SourceNat').count === 0) }
      }],
      actions: [
        {

diff --git a/src/views/network/CreateVlanIpRange.vue b/src/views/network/CreateVlanIpRange.vue
@@ -0,0 +1,41 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form-layout">
+    <a-spin :spinning="loading">
+      <a-form
+        :form="form"
+        @submit="handleSubmit"
+        layout="vertical">
+        <a-form-item>
+          <span slot="label">
+            {{ $t('label.name') }}
+            <a-tooltip :title="apiParams.name.gateway">
+              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+            </a-tooltip>
+          </span>
+          <a-input
+            v-decorator="['gateway', {
+              rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
+            }]"
+            :placeholder="apiParams.name.description"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </div>
+</template>
diff --git a/src/views/network/GuestIpRanges.vue b/src/views/network/GuestIpRanges.vue
@@ -0,0 +1,198 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <a-spin :spinning="fetchLoading">
+      <a-button
+        icon="plus"
+        shape="round"
+        style="float: right;margin-bottom: 10px; z-index: 8"
+        @click="() => { showCreateForm = true }">
+        {{ $t('label.add.ip.range') }}
+      </a-button>
+      <br />
+      <br />
+
+      <a-table
+        size="small"
+        style="overflow-y: auto"
+        :columns="columns"
+        :dataSource="ipranges"
+        :rowKey="item => item.id"
+        :pagination="false" >
+
+        <template slot="action" slot-scope="text, record">
+          <a-tooltip placement="bottom">
+            <template slot="title">
+              {{ $t('label.action.delete.ip.range') }}
+            </template>
+            <a-popconfirm
+              :title="$t('message.confirm.remove.ip.range')"
+              @confirm="removeIpRange(record.id)"
+              :okText="$t('label.yes')"
+              :cancelText="$t('label.no')" >
+              <a-button
+                type="danger"
+                icon="delete"
+                shape="circle" />
+            </a-popconfirm>
+          </a-tooltip>
+        </template>
+
+      </a-table>
+      <a-divider/>
+      <a-pagination
+        class="row-element pagination"
+        size="small"
+        :current="page"
+        :pageSize="pageSize"
+        :total="total"
+        :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+        :pageSizeOptions="['10', '20', '40', '80', '100']"
+        @change="changePage"
+        @showSizeChange="changePageSize"
+        showSizeChanger>
+        <template slot="buildOptionText" slot-scope="props">
+          <span>{{ props.value }} / {{ $t('label.page') }}</span>
+        </template>
+      </a-pagination>
+    </a-spin>
+    <a-modal
+      v-if="showCreateForm"
+      :visible="showCreateForm"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      :footer="null"
+      :cancelText="$t('label.cancel')"
+      @cancel="() => { showCreateForm = false }"
+      centered
+      width="auto">
+      <CreateVlanIpRange
+        @close-action="showCreateForm = false" />
+    </a-modal>
+  </div>
+</template>
+<script>
+import { api } from '@/api'
+import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
+
+export default {
+  name: 'GuestIpRanges',
+  components: {
+    CreateVlanIpRange
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      fetchLoading: false,
+      showCreateForm: false,
+      total: 0,
+      ipranges: [],
+      page: 1,
+      pageSize: 10,
+      columns: [
+        {
+          title: this.$t('label.startipv4'),
+          dataIndex: 'startip'
+        },
+        {
+          title: this.$t('label.endipv4'),
+          dataIndex: 'endip'
+        },
+        {
+          title: this.$t('label.startipv6'),
+          dataIndex: 'startipv6'
+        },
+        {
+          title: this.$t('label.endipv6'),
+          dataIndex: 'endipv6'
+        },
+        {
+          title: this.$t('label.gateway'),
+          dataIndex: 'gateway'
+        },
+        {
+          title: this.$t('label.netmask'),
+          dataIndex: 'netmask'
+        },
+        {
+          title: '',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.fetchData()
+  },
+  watch: {
+    resource: function (newItem, oldItem) {
+      if (!newItem || !newItem.id) {
+        return
+      }
+      this.fetchData()
+    }
+  },
+  methods: {
+    fetchData () {
+      const params = {
+        zoneid: this.resource.zoneid,
+        networkid: this.resource.id,
+        listall: true,
+        page: this.page,
+        pagesize: this.pageSize
+      }
+      this.fetchLoading = true
+      api('listVlanIpRanges', params).then(json => {
+        this.total = json.listvlaniprangesresponse.count || 0
+        this.ipranges = json.listvlaniprangesresponse.vlaniprange || []
+      }).finally(() => {
+        this.fetchLoading = false
+      })
+    },
+    addIpRange () {
+
+    },
+    removeIpRange (id) {
+      api('deleteVlanIpRange', { id: id }).then(json => {
+      }).finally(() => {
+        this.fetchData()
+      })
+    },
+    changePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchData()
+    },
+    changePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchData()
+    }
+  }
+}
+</script>