mirror of https://github.com/apache/cloudstack.git
vpc: add Internal LB form and Assign VM to LB rule form (#154)
VPC internal LB, IP pagination/management and assign vm form Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com> Co-authored-by: Rohit Yadav <rohit@apache.org>
This commit is contained in:
Pearl Dsilva
Rohit Yadav
parent
41a2297dd4
commit
ba51520d8d
|
|
@ -430,6 +430,14 @@ export default {
|
|||
permission: ['listLoadBalancers'],
|
||||
columns: ['name', 'sourceipaddress', 'loadbalancerrule', 'algorithm', 'account', 'domain'],
|
||||
details: ['name', 'sourceipaddress', 'loadbalancerrule', 'algorithm', 'account', 'domain'],
|
||||
tabs: [{
|
||||
name: 'details',
|
||||
component: () => import('@/components/view/DetailsTab.vue')
|
||||
}, {
|
||||
name: 'Assigned VMs',
|
||||
component: () => import('@/views/network/InternalLBAssignedVmTab.vue'),
|
||||
show: () => true
|
||||
}],
|
||||
actions: [
|
||||
{
|
||||
api: 'createLoadBalancer',
|
||||
|
|
@ -458,7 +466,9 @@ export default {
|
|||
api: 'assignToLoadBalancerRule',
|
||||
icon: 'plus',
|
||||
label: 'Assign VMs',
|
||||
dataView: true
|
||||
dataView: true,
|
||||
popup: true,
|
||||
component: () => import('@/views/network/InternalLBAssignVmForm.vue')
|
||||
},
|
||||
{
|
||||
api: 'deleteLoadBalancer',
|
||||
|
|
|
|||
|
|
@ -280,6 +280,7 @@
|
|||
"intervaltype": "Interval Type",
|
||||
"invitations": "Invitations",
|
||||
"ip": "IP Address",
|
||||
"ips": "IPs",
|
||||
"ip4Netmask": "IPv4 Netmask",
|
||||
"ip4dns1": "IPv4 DNS1",
|
||||
"ip4dns2": "IPv4 DNS2",
|
||||
|
|
@ -405,6 +406,7 @@
|
|||
"label.action.register.ncc": "Register NCC",
|
||||
"label.action.release.ip": "Release IP",
|
||||
"label.action.remove.host": "Remove Host",
|
||||
"label.action.remove.vm": "Release VM",
|
||||
"label.action.reset.password": "Reset Password",
|
||||
"label.action.resize.volume": "Resize Volume",
|
||||
"label.action.restore.instance": "Restore Instance",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,278 @@
|
|||
// 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">
|
||||
<div>
|
||||
<div class="vm-modal__header">
|
||||
<span style="min-width: 200px;">{{ $t('name') }}</span>
|
||||
<span>{{ $t('state') }}</span>
|
||||
<span>{{ $t('instancename') }}</span>
|
||||
<span>{{ $t('displayname') }}</span>
|
||||
<span>{{ $t('ip') }}</span>
|
||||
<span>{{ $t('account') }}</span>
|
||||
<span>{{ $t('zonenamelabel') }}</span>
|
||||
<span>{{ $t('select') }}</span>
|
||||
</div>
|
||||
|
||||
<a-checkbox-group style="width: 100%;">
|
||||
<div v-for="(vm, index) in vms" :key="index" class="vm-modal__item">
|
||||
<span style="min-width: 200px;">
|
||||
<span>
|
||||
{{ vm.name }}
|
||||
</span>
|
||||
<a-icon v-if="addVmModalNicLoading" type="loading"></a-icon>
|
||||
<a-select
|
||||
v-else-if="!addVmModalNicLoading && iLb.virtualmachineid[index] === vm.id"
|
||||
mode="multiple"
|
||||
v-model="iLb.vmguestip[index]"
|
||||
>
|
||||
<a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
|
||||
{{ nic }}{{ nicIndex === 0 ? ' (Primary)' : null }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</span>
|
||||
<span><status :text="vm.state" displayText /></span>
|
||||
<span>{{ vm.instancename }}</span>
|
||||
<span>{{ vm.displayname }}</span>
|
||||
<span></span>
|
||||
<span>{{ vm.account }}</span>
|
||||
<span>{{ vm.zonename }}</span>
|
||||
<a-checkbox :value="vm.id" @change="e => fetchNics(e, index)" />
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-pagination
|
||||
class="row-element pagination"
|
||||
size="small"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:total="vmCounts"
|
||||
:showTotal="total => `Total ${total} items`"
|
||||
:pageSizeOptions="['10', '20', '40', '80', '100']"
|
||||
@change="changePage"
|
||||
@showSizeChange="changePageSize"
|
||||
showSizeChanger/>
|
||||
</a-checkbox-group>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a-button @click="closeModal">
|
||||
{{ $t('Cancel') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSubmit">
|
||||
{{ $t('OK') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
import Status from '@/components/widgets/Status'
|
||||
|
||||
export default {
|
||||
name: 'InternalLBAssignVmForm',
|
||||
components: {
|
||||
Status
|
||||
},
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
vmCounts: 0,
|
||||
addVmModalNicLoading: false,
|
||||
vms: [],
|
||||
nics: [],
|
||||
params: {},
|
||||
assignedVMs: [],
|
||||
iLb: {
|
||||
virtualmachineid: [],
|
||||
vmguestip: []
|
||||
},
|
||||
fetchLoading: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchLoadBalancers()
|
||||
this.fetchVirtualMachines()
|
||||
},
|
||||
fetchLoadBalancers () {
|
||||
this.fetchLoading = true
|
||||
api('listLoadBalancers', {
|
||||
id: this.resource.id
|
||||
}).then(response => {
|
||||
this.assignedVMs = response.listloadbalancersresponse.loadbalancer[0].loadbalancerinstance || []
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
})
|
||||
},
|
||||
differenceBy (array1, array2, key) {
|
||||
return array1.filter(a => !array2.some(b => b[key] === a[key]))
|
||||
},
|
||||
fetchVirtualMachines () {
|
||||
this.fetchLoading = true
|
||||
api('listVirtualMachines', {
|
||||
listAll: true,
|
||||
networkid: this.resource.networkid,
|
||||
page: this.page,
|
||||
pagesize: this.pageSize
|
||||
}).then(response => {
|
||||
var vms = response.listvirtualmachinesresponse.virtualmachine || []
|
||||
this.vms = this.differenceBy(vms, this.assignedVMs, 'id')
|
||||
this.vmCounts = this.vms.length || 0
|
||||
this.vms.forEach((vm, index) => {
|
||||
this.iLb.virtualmachineid[index] = null
|
||||
this.nics[index] = null
|
||||
this.iLb.vmguestip[index] = null
|
||||
})
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
})
|
||||
},
|
||||
fetchNics (e, index) {
|
||||
if (!e.target.checked) {
|
||||
this.iLb.virtualmachineid[index] = null
|
||||
this.nics[index] = null
|
||||
this.iLb.vmguestip[index] = null
|
||||
return
|
||||
}
|
||||
this.iLb.virtualmachineid[index] = e.target.value
|
||||
this.addVmModalNicLoading = true
|
||||
api('listNics', {
|
||||
virtualmachineid: e.target.value,
|
||||
networkid: this.resource.associatednetworkid
|
||||
}).then(response => {
|
||||
if (!response.listnicsresponse.nic[0]) return
|
||||
const newItem = []
|
||||
newItem.push(response.listnicsresponse.nic[0].ipaddress)
|
||||
if (response.listnicsresponse.nic[0].secondaryip) {
|
||||
newItem.push(...response.listnicsresponse.nic[0].secondaryip.map(ip => ip.ipaddress))
|
||||
}
|
||||
this.nics[index] = newItem
|
||||
this.iLb.vmguestip[index] = this.nics[index][0]
|
||||
this.addVmModalNicLoading = false
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: `Error ${error.response.status}` || 'Error',
|
||||
description: error.response.data.errorresponse.errortext || 'Error'
|
||||
})
|
||||
this.closeModal()
|
||||
})
|
||||
},
|
||||
closeModal () {
|
||||
this.$emit('close-action')
|
||||
},
|
||||
handleSubmit () {
|
||||
var j = 0
|
||||
this.params = {}
|
||||
for (var i = 0; i < this.iLb.virtualmachineid.length; i++) {
|
||||
if (this.iLb.virtualmachineid[i] !== null) {
|
||||
this.params['vmidipmap[' + j + '].vmid'] = this.iLb.virtualmachineid[i]
|
||||
this.params['vmidipmap[' + j + '].vmip'] = this.iLb.vmguestip[i]
|
||||
j++
|
||||
}
|
||||
}
|
||||
this.params.id = this.resource.id
|
||||
this.fetchLoading = true
|
||||
api('assignToLoadBalancerRule', this.params).then(response => {
|
||||
this.$pollJob({
|
||||
jobId: response.assigntoloadbalancerruleresponse.jobid,
|
||||
successMessage: `Successfully assigned VMs to ${this.resource.name}`,
|
||||
successMethod: () => {
|
||||
this.$emit('refresh-data')
|
||||
},
|
||||
errorMessage: `Failed to assign VMs to ${this.resource.name}`,
|
||||
errorMethod: () => {
|
||||
this.$emit('refresh-data')
|
||||
},
|
||||
loadingMessage: `Assigning VMs to ${this.resource.name}`,
|
||||
catchMessage: 'Error encountered while fetching async job result'
|
||||
})
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: `Error ${error.response.status}`,
|
||||
description: error.response.data.errorresponse.errortext,
|
||||
duration: 0
|
||||
})
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
this.$emit('refresh-data')
|
||||
this.closeModal()
|
||||
})
|
||||
},
|
||||
changePage (page, pageSize) {
|
||||
this.page = page
|
||||
this.pageSize = pageSize
|
||||
this.fetchData()
|
||||
},
|
||||
changePageSize (currentPage, pageSize) {
|
||||
this.page = currentPage
|
||||
this.pageSize = pageSize
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.vm-modal {
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
span,
|
||||
label {
|
||||
display: block;
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
|
||||
button {
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
// 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-table
|
||||
size="small"
|
||||
style="overflow-y: auto; margin-bottom: 15px"
|
||||
:columns="columns"
|
||||
:dataSource="assignedVms"
|
||||
:rowKey="item => item.id"
|
||||
:pagination="false"
|
||||
>
|
||||
<template slot="displayname" slot-scope="text, record">
|
||||
<router-link :to="{ path: '/vm/' + record.id }">{{ record.displayname || record.name }}</router-link>
|
||||
</template>
|
||||
<template slot="ipaddress" slot-scope="text, record">
|
||||
<span v-for="nic in record.nic" :key="nic.id">
|
||||
{{ nic.ipaddress }} <br/>
|
||||
</span>
|
||||
</template>
|
||||
<template slot="remove" slot-scope="text, record">
|
||||
<a-button
|
||||
type="danger"
|
||||
icon="delete"
|
||||
shape="circle"
|
||||
@click="removeVmFromLB(record)" />
|
||||
</template>
|
||||
<a-divider />
|
||||
</a-table>
|
||||
<a-pagination
|
||||
class="row-element pagination"
|
||||
size="small"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:total="totalInstances"
|
||||
:showTotal="total => `Total ${total} items`"
|
||||
:pageSizeOptions="['10', '20', '40', '80', '100']"
|
||||
@change="changePage"
|
||||
@showSizeChange="changePageSize"
|
||||
showSizeChanger
|
||||
/>
|
||||
</a-spin>
|
||||
</template>
|
||||
<script>
|
||||
import { api } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'InternalLBAssignedVmTab',
|
||||
props: {
|
||||
resource: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fetchLoading: false,
|
||||
assignedVms: [],
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalInstances: 0,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('name'),
|
||||
dataIndex: 'displayname',
|
||||
scopedSlots: { customRender: 'displayname' }
|
||||
},
|
||||
{
|
||||
title: this.$t('ipaddress'),
|
||||
dataIndex: 'ipaddress',
|
||||
scopedSlots: { customRender: 'ipaddress' }
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
scopedSlots: { customRender: 'remove' }
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fetchData()
|
||||
},
|
||||
watch: {
|
||||
resource: function (newItem, oldItem) {
|
||||
if (!newItem || !newItem.id) {
|
||||
return
|
||||
}
|
||||
this.fetchData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.fetchLoading = true
|
||||
api('listLoadBalancerRuleInstances', {
|
||||
id: this.resource.id,
|
||||
page: this.page,
|
||||
pagesize: this.pageSize
|
||||
}).then(response => {
|
||||
this.totalInstances = response.listloadbalancerruleinstancesresponse.count || 0
|
||||
this.assignedVms = response.listloadbalancerruleinstancesresponse.loadbalancerruleinstance || []
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
})
|
||||
},
|
||||
removeVmFromLB (vm) {
|
||||
this.fetchLoading = true
|
||||
api('removeFromLoadBalancerRule', {
|
||||
id: this.resource.id,
|
||||
virtualmachineids: vm.id
|
||||
}).then(response => {
|
||||
this.$pollJob({
|
||||
jobId: response.removefromloadbalancerruleresponse.jobid,
|
||||
successMessage: `Successfully removed IP ${vm.name} from ${this.resource.name}`,
|
||||
successMethod: () => {
|
||||
this.fetchLoading = false
|
||||
this.fetchData()
|
||||
},
|
||||
errorMessage: `Failed to remove ${vm.name} from the LB`,
|
||||
errorMethod: () => {
|
||||
this.fetchLoading = false
|
||||
this.fetchData()
|
||||
},
|
||||
loadingMessage: `Removing ${vm.name} from LB is in progress`,
|
||||
catchMessage: 'Error encountered while fetching async job result'
|
||||
})
|
||||
})
|
||||
},
|
||||
changePage (page, pageSize) {
|
||||
this.page = page
|
||||
this.pageSize = pageSize
|
||||
this.fetchData()
|
||||
},
|
||||
changePageSize (currentPage, pageSize) {
|
||||
this.page = currentPage
|
||||
this.pageSize = pageSize
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -20,6 +20,23 @@
|
|||
<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"
|
||||
|
|
@ -41,6 +58,10 @@
|
|||
<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"
|
||||
|
|
@ -87,9 +108,14 @@ export default {
|
|||
return {
|
||||
fetchLoading: false,
|
||||
ips: [],
|
||||
ipsTiers: [],
|
||||
networksList: [],
|
||||
defaultNetwork: '',
|
||||
vpcTier: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalIps: 0,
|
||||
tiersSelect: false,
|
||||
columns: [
|
||||
{
|
||||
title: this.$t('ipaddress'),
|
||||
|
|
@ -108,7 +134,8 @@ export default {
|
|||
},
|
||||
{
|
||||
title: this.$t('Network'),
|
||||
dataIndex: 'associatednetworkname'
|
||||
dataIndex: 'associatednetworkname',
|
||||
scopedSlots: { customRender: 'associatednetworkname' }
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
|
|
@ -136,8 +163,12 @@ export default {
|
|||
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
|
||||
}
|
||||
|
|
@ -149,6 +180,10 @@ export default {
|
|||
this.fetchLoading = false
|
||||
})
|
||||
},
|
||||
handleTierSelect (tier) {
|
||||
this.vpcTier = tier
|
||||
this.fetchData()
|
||||
},
|
||||
changePage (page, pageSize) {
|
||||
this.page = page
|
||||
this.pageSize = pageSize
|
||||
|
|
@ -163,6 +198,9 @@ export default {
|
|||
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
|
||||
}
|
||||
|
|
@ -222,4 +260,100 @@ export default {
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
|
||||
<template>
|
||||
<a-spin :spinning="fetchLoading">
|
||||
<a-button type="dashed" icon="plus" style="width: 100%" @click="handleOpenModal">Add Network</a-button>
|
||||
<a-button type="dashed" icon="plus" style="width: 100%;margin-bottom: 20px;" @click="handleOpenModal">Add Network</a-button>
|
||||
<a-list class="list">
|
||||
<a-list-item v-for="network in networks" :key="network.id" class="list__item">
|
||||
<a-list-item v-for="(network, idx) in networks" :key="idx" class="list__item">
|
||||
<div class="list__item-outer-container">
|
||||
<div class="list__item-container">
|
||||
<div class="list__col">
|
||||
|
|
@ -51,30 +51,79 @@
|
|||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="list__item-container">
|
||||
<div class="list__col">
|
||||
<a-button icon="share-alt">
|
||||
<router-link :to="{ path: '/ilb?networkid=' + network.id }"> Internal LB</router-link>
|
||||
<a-collapse :bordered="false" style="margin-left: -18px">
|
||||
<template v-slot:expandIcon="props">
|
||||
<a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
|
||||
</template>
|
||||
<a-collapse-panel :header="$t('Instances')" key="vm" :style="customStyle">
|
||||
<a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="$router.push({ path: '/action/deployVirtualMachine?networkid=' + network.id })">
|
||||
{{ $t('Add Instance') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="list__col">
|
||||
<a-button icon="share-alt">
|
||||
<router-link :to="{ path: '/publicip?forloadbalancing=true' + '&associatednetworkid=' + network.id }"> Public LB IP</router-link>
|
||||
<a-table
|
||||
class="table"
|
||||
size="small"
|
||||
:columns="vmCols"
|
||||
:dataSource="vms[network.id]"
|
||||
:rowKey="item => item.id"
|
||||
:pagination="false"
|
||||
:loading="fetchLoading">
|
||||
<template slot="name" slot-scope="text, item">
|
||||
<router-link
|
||||
:to="{ path: '/vm/'+item.id}">{{ item.name }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template slot="ip" slot-scope="text, item">
|
||||
<div v-for="nic in item.nic" :key="nic.id">
|
||||
{{ nic.isdefault === true ? nic.ipaddress : '' }}
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-divider/>
|
||||
<a-pagination
|
||||
class="row-element pagination"
|
||||
size="small"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:total="itemCounts.vms[network.id]"
|
||||
:showTotal="total => `Total ${total} items`"
|
||||
:pageSizeOptions="['10', '20', '40', '80', '100']"
|
||||
@change="changePage"
|
||||
@showSizeChange="changePageSize"
|
||||
showSizeChanger/>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel :header="$t('Internal LB')" key="ilb" :style="customStyle" :disabled="!showIlb(network)" >
|
||||
<a-button icon="plus" type="dashed" style="margin-bottom: 15px; width: 100%" @click="handleAddInternalLB(network.id)">
|
||||
{{ $t('label.add.internal.lb') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="list__col">
|
||||
<a-button icon="environment">
|
||||
<router-link :to="{ path: '/publicip?isstaticnat=true' + '&associatednetworkid=' + network.id }"> Static NATS</router-link>
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="list__col">
|
||||
<a-button icon="desktop">
|
||||
<router-link :to="{ path: '/vm/?vpcid=' + resource.id + '&networkid=' + network.id }"> VMs</router-link>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
class="table"
|
||||
size="small"
|
||||
:columns="internalLbCols"
|
||||
:dataSource="internalLB[network.id]"
|
||||
:rowKey="item => item.id"
|
||||
:pagination="false"
|
||||
:loading="fetchLoading">
|
||||
<template slot="name" slot-scope="text, item">
|
||||
<router-link
|
||||
:to="{ path: '/ilb/'+item.id}">{{ item.name }}
|
||||
</router-link>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-divider/>
|
||||
<a-pagination
|
||||
class="row-element pagination"
|
||||
size="small"
|
||||
:current="page"
|
||||
:pageSize="pageSize"
|
||||
:total="itemCounts.internalLB[network.id]"
|
||||
:showTotal="total => `Total ${total} items`"
|
||||
:pageSizeOptions="['10', '20', '40', '80', '100']"
|
||||
@change="changePage"
|
||||
@showSizeChange="changePageSize"
|
||||
showSizeChanger/>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
|
@ -119,6 +168,49 @@
|
|||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
|
||||
<a-modal v-model="showAddInternalLB" :title="$t('label.add.internal.lb')" @ok="handleAddInternalLBSubmit">
|
||||
<a-spin :spinning="modalLoading">
|
||||
<a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
|
||||
<a-form-item :label="$t('name')">
|
||||
<a-input
|
||||
placeholder="Unique name for Internal LB"
|
||||
v-decorator="['name', { rules: [{ required: true, message: 'Please specify a name for the Internal LB'}] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('description')">
|
||||
<a-input
|
||||
placeholder="Brief description of the Internal LB"
|
||||
v-decorator="['description']"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('sourceipaddress')">
|
||||
<a-input
|
||||
placeholder="Brief description of the Internal LB"
|
||||
v-decorator="['sourceIP']"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('sourceport')">
|
||||
<a-input
|
||||
v-decorator="['sourcePort', { rules: [{ required: true, message: 'Please specify a Source Port'}] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('instanceport')">
|
||||
<a-input
|
||||
v-decorator="['instancePort', { rules: [{ required: true, message: 'Please specify a Instance Port'}] }]"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$t('algorithm')">
|
||||
<a-select
|
||||
v-decorator="[
|
||||
'algorithm',
|
||||
{
|
||||
initialValue: 'Source',
|
||||
rules: [{ required: true, message: 'required'}]
|
||||
}]">
|
||||
<a-select-option v-for="(key, idx) in Object.keys(algorithms)" :key="idx" :value="algorithms[key]">
|
||||
{{ key }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
|
|
@ -144,11 +236,99 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
networks: [],
|
||||
networkid: '',
|
||||
fetchLoading: false,
|
||||
showCreateNetworkModal: false,
|
||||
showAddInternalLB: false,
|
||||
networkOfferings: [],
|
||||
networkAclList: [],
|
||||
modalLoading: false
|
||||
modalLoading: false,
|
||||
internalLB: {},
|
||||
LBPublicIPs: {},
|
||||
staticNats: {},
|
||||
vms: {},
|
||||
algorithms: {
|
||||
Source: 'source',
|
||||
'Round-robin': 'roundrobin',
|
||||
'Least connections': 'leastconn'
|
||||
},
|
||||
internalLbCols: [
|
||||
{
|
||||
title: this.$t('name'),
|
||||
dataIndex: 'name',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: this.$t('sourceipaddress'),
|
||||
dataIndex: 'sourceipaddress'
|
||||
},
|
||||
{
|
||||
title: this.$t('algorithm'),
|
||||
dataIndex: 'algorithm'
|
||||
},
|
||||
{
|
||||
title: this.$t('account'),
|
||||
dataIndex: 'account'
|
||||
}
|
||||
],
|
||||
LBPublicIPCols: [
|
||||
{
|
||||
title: this.$t('ip'),
|
||||
dataIndex: 'ipaddress',
|
||||
scopedSlots: { customRender: 'ipaddress' }
|
||||
},
|
||||
{
|
||||
title: this.$t('state'),
|
||||
dataIndex: 'state'
|
||||
},
|
||||
{
|
||||
title: this.$t('networkid'),
|
||||
dataIndex: 'associatedNetworkName'
|
||||
},
|
||||
{
|
||||
title: this.$t('vm'),
|
||||
dataIndex: 'virtualmachinename'
|
||||
}
|
||||
],
|
||||
StaticNatCols: [
|
||||
{
|
||||
title: this.$t('ips'),
|
||||
dataIndex: 'ipaddress',
|
||||
scopedSlots: { customRender: 'ipaddress' }
|
||||
},
|
||||
{
|
||||
title: this.$t('zoneid'),
|
||||
dataIndex: 'zonename'
|
||||
},
|
||||
{
|
||||
title: this.$t('networkid'),
|
||||
dataIndex: 'associatedNetworkName'
|
||||
},
|
||||
{
|
||||
title: this.$t('state'),
|
||||
dataIndex: 'state'
|
||||
}
|
||||
],
|
||||
vmCols: [
|
||||
{
|
||||
title: this.$t('name'),
|
||||
dataIndex: 'name',
|
||||
scopedSlots: { customRender: 'name' }
|
||||
},
|
||||
{
|
||||
title: this.$t('ip'),
|
||||
scopedSlots: { customRender: 'ip' }
|
||||
}
|
||||
],
|
||||
customStyle: 'margin-bottom: -10px; border-bottom-style: none',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
itemCounts: {
|
||||
internalLB: {},
|
||||
publicIps: {},
|
||||
snats: {},
|
||||
vms: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -165,24 +345,21 @@ export default {
|
|||
this.form = this.$form.createForm(this)
|
||||
},
|
||||
methods: {
|
||||
showIlb (network) {
|
||||
return network.service.filter(s => (s.name === 'Lb') && (s.capability.filter(c => c.name === 'LbSchemes' && c.value === 'Internal').length > 0)).length > 0 || false
|
||||
},
|
||||
fetchData () {
|
||||
this.fetchLoading = true
|
||||
api('listNetworks', { vpcid: this.resource.id }).then(json => {
|
||||
this.networks = json.listnetworksresponse.network
|
||||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: 'Request Failed',
|
||||
description: error.response.headers['x-description']
|
||||
})
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
})
|
||||
this.networks = this.resource.network
|
||||
for (const network of this.networks) {
|
||||
this.fetchLoadBalancers(network.id)
|
||||
this.fetchVMs(network.id)
|
||||
}
|
||||
},
|
||||
fetchNetworkAclList () {
|
||||
this.fetchLoading = true
|
||||
this.modalLoading = true
|
||||
api('listNetworkACLLists', { vpcid: this.resource.id }).then(json => {
|
||||
this.networkAclList = json.listnetworkacllistsresponse.networkacllist
|
||||
this.networkAclList = json.listnetworkacllistsresponse.networkacllist || []
|
||||
this.$nextTick(function () {
|
||||
this.form.setFieldsValue({
|
||||
acl: this.networkAclList[0].id
|
||||
|
|
@ -191,7 +368,8 @@ export default {
|
|||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: 'Request Failed',
|
||||
description: error.response.headers['x-description']
|
||||
description: error.response.headers['x-description'],
|
||||
duration: 0
|
||||
})
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
|
|
@ -207,7 +385,7 @@ export default {
|
|||
supportedServices: 'SourceNat',
|
||||
state: 'Enabled'
|
||||
}).then(json => {
|
||||
this.networkOfferings = json.listnetworkofferingsresponse.networkoffering
|
||||
this.networkOfferings = json.listnetworkofferingsresponse.networkoffering || []
|
||||
this.$nextTick(function () {
|
||||
this.form.setFieldsValue({
|
||||
networkOffering: this.networkOfferings[0].id
|
||||
|
|
@ -216,19 +394,58 @@ export default {
|
|||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: 'Request Failed',
|
||||
description: error.response.headers['x-description']
|
||||
description: error.response.headers['x-description'],
|
||||
duration: 0
|
||||
})
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
this.modalLoading = false
|
||||
})
|
||||
},
|
||||
fetchLoadBalancers (id) {
|
||||
this.fetchLoading = true
|
||||
api('listLoadBalancers', {
|
||||
networkid: id,
|
||||
page: this.page,
|
||||
pagesize: this.pageSize
|
||||
}).then(json => {
|
||||
this.internalLB[id] = json.listloadbalancersresponse.loadbalancer || []
|
||||
this.itemCounts.internalLB[id] = json.listloadbalancersresponse.count || 0
|
||||
this.$forceUpdate()
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
})
|
||||
},
|
||||
fetchVMs (id) {
|
||||
this.fetchLoading = true
|
||||
api('listVirtualMachines', {
|
||||
listAll: true,
|
||||
vpcid: this.resource.id,
|
||||
networkid: id,
|
||||
page: this.page,
|
||||
pagesize: this.pageSize
|
||||
}).then(json => {
|
||||
this.vms[id] = json.listvirtualmachinesresponse.virtualmachine || []
|
||||
this.itemCounts.vms[id] = json.listvirtualmachinesresponse.count || 0
|
||||
this.$forceUpdate()
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
})
|
||||
},
|
||||
closeModal () {
|
||||
this.$emit('close-action')
|
||||
},
|
||||
handleOpenModal () {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.fetchNetworkAclList()
|
||||
this.fetchNetworkOfferings()
|
||||
this.showCreateNetworkModal = true
|
||||
},
|
||||
handleAddInternalLB (id) {
|
||||
this.form = this.$form.createForm(this)
|
||||
this.showAddInternalLB = true
|
||||
this.networkid = id
|
||||
},
|
||||
handleAddNetworkSubmit () {
|
||||
this.fetchLoading = true
|
||||
|
||||
|
|
@ -259,13 +476,72 @@ export default {
|
|||
}).catch(error => {
|
||||
this.$notification.error({
|
||||
message: 'Request Failed',
|
||||
description: error.response.headers['x-description']
|
||||
description: error.response.headers['x-description'],
|
||||
duration: 0
|
||||
})
|
||||
}).finally(() => {
|
||||
this.fetchLoading = false
|
||||
this.fetchData()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleAddInternalLBSubmit () {
|
||||
this.fetchLoading = true
|
||||
this.modalLoading = true
|
||||
this.form.validateFields((errors, values) => {
|
||||
if (errors) {
|
||||
this.fetchLoading = false
|
||||
return
|
||||
}
|
||||
api('createLoadBalancer', {
|
||||
name: values.name,
|
||||
sourceport: values.sourcePort,
|
||||
instanceport: values.instancePort,
|
||||
algorithm: values.algorithm,
|
||||
networkid: this.networkid,
|
||||
sourceipaddressnetworkid: this.networkid,
|
||||
scheme: 'Internal'
|
||||
}).then(response => {
|
||||
this.$store.dispatch('AddAsyncJob', {
|
||||
title: `Creating Internal LB`,
|
||||
jobid: response.createloadbalancerresponse.jobid,
|
||||
description: values.name,
|
||||
status: 'progress'
|
||||
})
|
||||
this.$pollJob({
|
||||
jobId: response.createloadbalancerresponse.jobid,
|
||||
successMessage: `Successfully created Internal LB`,
|
||||
successMethod: () => {
|
||||
this.fetchData()
|
||||
},
|
||||
errorMessage: 'Failed to create Internal LB' + response,
|
||||
errorMethod: () => {
|
||||
this.fetchData()
|
||||
},
|
||||
loadingMessage: `Creation of Internal LB is in progress`,
|
||||
catchMessage: 'Error encountered while fetching async job result',
|
||||
catchMethod: () => {
|
||||
this.fetchData()
|
||||
}
|
||||
})
|
||||
}).catch(error => {
|
||||
console.error(error)
|
||||
this.$message.error('Failed to create Internal LB')
|
||||
}).finally(() => {
|
||||
this.modalLoading = false
|
||||
this.showAddInternalLB = false
|
||||
this.fetchData()
|
||||
})
|
||||
})
|
||||
},
|
||||
changePage (page, pageSize) {
|
||||
this.page = page
|
||||
this.pageSize = pageSize
|
||||
this.fetchData()
|
||||
},
|
||||
changePageSize (currentPage, pageSize) {
|
||||
this.page = currentPage
|
||||
this.pageSize = pageSize
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue