src/views/network/IpAddressesTab.vue

// 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>
  <a-spin :spinning="fetchLoading">
    <a-button type="dashed" icon="plus" style="width: 100%; margin-bottom: 15px" @click="acquireIpAddress">
      {{ $t("label.acquire.new.ip") }}
    </a-button>
    <div v-if="$route.path.startsWith('/vpc')">
      Select Tier:
      <a-select
        style="width: 40%; margin-left: 15px;margin-bottom: 15px"
        :loading="fetchLoading"
        defaultActiveFirstOption
        :value="vpcTier"
        @change="handleTierSelect"
      >
        <a-select-option key="all" value="">
          {{ $t('Show All') }}
        </a-select-option>
        <a-select-option v-for="network in networksList" :key="network.id" :value="network.id">
          {{ network.name }}
        </a-select-option>
      </a-select>
    </div>
    <a-table
      size="small"
      style="overflow-y: auto"
      :columns="columns"
      :dataSource="ips"
      :rowKey="item => item.id"
      :pagination="false" >
      <template slot="ipaddress" slot-scope="text, record">
        <router-link :to="{ path: '/publicip/' + record.id }" >{{ text }} </router-link>
        <a-tag v-if="record.issourcenat === true">source-nat</a-tag>
      </template>

      <template slot="state" slot-scope="text, record">
        <status :text="record.state" displayText />
      </template>

      <template slot="virtualmachineid" slot-scope="text, record">
        <a-icon type="desktop" v-if="record.virtualmachineid" />
        <router-link :to="{ path: '/vm/' + record.virtualmachineid }" > {{ record.virtualmachinename || record.virtualmachineid }} </router-link>
      </template>

      <template slot="associatednetworkname" slot-scope="text, record">
        <router-link :to="{ path: '/guestnetwork/' + record.associatednetworkid }" > {{ record.associatednetworkname || record.associatednetworkid }} </router-link>
      </template>

      <template slot="action" slot-scope="text, record">
        <a-button
          v-if="record.issourcenat !== true"
          type="danger"
          icon="delete"
          shape="circle"
          @click="releaseIpAddress(record)" />
      </template>
    </a-table>
    <a-divider/>
    <a-pagination
      class="row-element pagination"
      size="small"
      :current="page"
      :pageSize="pageSize"
      :total="totalIps"
      :showTotal="total => `Total ${total} items`"
      :pageSizeOptions="['10', '20', '40', '80', '100']"
      @change="changePage"
      @showSizeChange="changePageSize"
      showSizeChanger/>
  </a-spin>
</template>
<script>
import { api } from '@/api'
import Status from '@/components/widgets/Status'

export default {
  name: 'IpAddressesTab',
  components: {
    Status
  },
  props: {
    resource: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fetchLoading: false,
      ips: [],
      ipsTiers: [],
      networksList: [],
      defaultNetwork: '',
      vpcTier: '',
      page: 1,
      pageSize: 10,
      totalIps: 0,
      tiersSelect: false,
      columns: [
        {
          title: this.$t('ipaddress'),
          dataIndex: 'ipaddress',
          scopedSlots: { customRender: 'ipaddress' }
        },
        {
          title: this.$t('state'),
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        },
        {
          title: this.$t('vm'),
          dataIndex: 'virtualmachineid',
          scopedSlots: { customRender: 'virtualmachineid' }
        },
        {
          title: this.$t('Network'),
          dataIndex: 'associatednetworkname',
          scopedSlots: { customRender: 'associatednetworkname' }
        },
        {
          title: '',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    resource: function (newItem, oldItem) {
      if (!newItem || !newItem.id) {
        return
      }
      this.fetchData()
    }
  },
  methods: {
    fetchData () {
      const params = {
        listall: true,
        page: this.page,
        pagesize: this.pageSize
      }
      if (this.$route.path.startsWith('/vpc')) {
        this.networksList = this.resource.network
        params.vpcid = this.resource.id
        params.forvirtualnetwork = true
        if (this.vpcTier) {
          params.associatednetworkid = this.vpcTier
        }
      } else {
        params.associatednetworkid = this.resource.id
      }
      this.fetchLoading = true
      api('listPublicIpAddresses', params).then(json => {
        this.totalIps = json.listpublicipaddressesresponse.count || 0
        this.ips = json.listpublicipaddressesresponse.publicipaddress || []
      }).finally(() => {
        this.fetchLoading = false
      })
    },
    handleTierSelect (tier) {
      this.vpcTier = tier
      this.fetchData()
    },
    changePage (page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      this.fetchData()
    },
    changePageSize (currentPage, pageSize) {
      this.page = currentPage
      this.pageSize = pageSize
      this.fetchData()
    },
    acquireIpAddress () {
      const params = {}
      if (this.$route.path.startsWith('/vpc')) {
        params.vpcid = this.resource.id
        if (this.vpcTier) {
          params.networkid = this.vpcTier
        }
      } else {
        params.networkid = this.resource.id
      }
      this.fetchLoading = true
      api('associateIpAddress', params).then(response => {
        this.$pollJob({
          jobId: response.associateipaddressresponse.jobid,
          successMessage: `Successfully acquired IP for ${this.resource.name}`,
          successMethod: () => {
            this.fetchData()
          },
          errorMessage: 'Failed to acquire IP',
          errorMethod: () => {
            this.fetchData()
          },
          loadingMessage: `Acquiring IP for ${this.resource.name} is in progress`,
          catchMessage: 'Error encountered while fetching async job result'
        })
      }).catch(error => {
        this.fetchLoading = false
        this.$notification.error({
          message: `Error ${error.response.status}`,
          description: error.response.data.errorresponse.errortext,
          duration: 0
        })
      })
    },
    releaseIpAddress (ip) {
      this.fetchLoading = true
      api('disassociateIpAddress', {
        id: ip.id
      }).then(response => {
        this.$pollJob({
          jobId: response.disassociateipaddressresponse.jobid,
          successMessage: 'Successfully released IP',
          successMethod: () => {
            this.fetchData()
          },
          errorMessage: 'Failed to release IP',
          errorMethod: () => {
            this.fetchData()
          },
          loadingMessage: `Releasing IP for ${this.resource.name} is in progress`,
          catchMessage: 'Error encountered while fetching async job result'
        })
      }).catch(error => {
        this.fetchLoading = false
        this.$notification.error({
          message: `Error ${error.response.status}`,
          description: error.response.data.errorresponse.errortext,
          duration: 0
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
    max-height: 95vh;
    width: 95vw;
    overflow-y: scroll;
    margin: -24px;

    @media (min-width: 1000px) {
      max-height: 70vh;
      width: 900px;
    }

    &__header,
    &__footer {
      padding: 20px;
    }

    &__header {
      display: flex;

      .ant-select {
        min-width: 200px;
      }

      &__col {

        &:not(:last-child) {
          margin-right: 20px;
        }

        &--full {
          flex: 1;
        }

      }

    }

    &__footer {
      display: flex;
      justify-content: flex-end;

      button {
        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }

    &__item {
      padding-right: 20px;
      padding-left: 20px;

      &--selected {
        background-color: #e6f7ff;
      }

    }

    &__title {
      font-weight: bold;
    }

    &__outer-container {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    &__container {
      display: flex;
      flex-direction: column;
      width: 100%;
      cursor: pointer;

      @media (min-width: 760px) {
        flex-direction: row;
        align-items: center;
      }

    }

    &__row {
      margin-bottom: 10px;

      @media (min-width: 760px) {
        margin-right: 20px;
        margin-bottom: 0;
      }
    }

    &__radio {
      display: flex;
      justify-content: flex-end;
    }

  }
</style>