Commit d754fab3 authored by janis.streib's avatar janis.streib 🦉
Browse files

UPD: refactored bcd list

parent e2e8f5f1
Pipeline #111916 passed with stages
in 8 minutes and 11 seconds
<template>
<div class="bcd_overview">
<Loading :data="[bcds, vlans]">
<div class="net-filter-direct d-print-none">
<b-input-group class="shadow">
<b-input-group-prepend>
<b-input-group-text>
<font-awesome-icon :icon="['fas', 'filter']"/>
</b-input-group-text>
</b-input-group-prepend>
<b-input class="search form-control" id="filter-direct" placeholder="Filter & Direktwahl"
autofocus/>
<b-input-group-append>
<b-button title="Gehe direkt zu Bereich" variant="outline-secondary" type="submit"
class="mr-0">
<font-awesome-icon icon="arrow-right"/>
</b-button>
</b-input-group-append>
</b-input-group>
</div>
<b-card no-body class="shadow">
<b-table responsive :fields="bcd_list_fields" :busy="bcds === null" :items="bcds"
:sort-compare="sortBCDOverview">
<template v-slot:cell(name)="data">
<router-link class="nowrap" :to="'bcds/'+data.value"><b>{{ data.value }}</b></router-link>
</template>
<template v-slot:cell(subnets)="data">
<div v-for="subnet in ip_subnet_by_bcd[data.item.name]"
:key="subnet.cidr" class="same-height">
<code class="nowrap">{{ subnet.cidr }}</code>
</div>
</template>
<template v-slot:cell(usage)="data">
<div v-for="subnet in ip_subnet_by_bcd[data.item.name]"
:key="subnet.cidr" class="same-height">
<b-progress height="20px" show-progress :max="IPAddressCount(subnet.cidr)"
v-if="isIPv4(subnet.cidr)">
<b-progress-bar
:label="usagePercentage(subnet) +'%'"
:variant="progressVariant(usagePercentage(subnet))"
:value="subnet.dns_addr_rr_count"></b-progress-bar>
</b-progress>
</div>
</template>
<template v-slot:cell(adresses)="data">
<div v-for="subnet in ip_subnet_by_bcd[data.item.name]"
:key="subnet.cidr" class="same-height">
<p>{{ subnet.dns_addr_rr_count }}</p>
</div>
</template>
<template v-slot:cell(ou_short_name)="data">
<span :title="ous_by_short_name[data.item.ou_short_name].name">{{ data.item.ou_short_name }}</span>
</template>
<template v-slot:cell(vlans)="data">
<ul>
<li v-for="vlan in vlans_by_bcd[data.item.name]"
:key="vlan.id" class="nowrap">
{{ vlan.name }} ({{ vlan.id }})
</li>
</ul>
<i v-if="!(data.item.name in vlans_by_bcd)">Keine VLANs vorhanden</i>
</template>
</b-table>
<div v-if="bcds && bcds.length === 0"
class="font-italic text-center mb-3">
Keine BCDs vorhanden
</div>
</b-card>
</Loading>
</div>
</template>
<script>
import ApiUtil from '@/util/apiutil'
import ipaddress from '@/util/ipaddress'
import Loading from '@/components/Loading'
export default {
name: 'BCDList',
components: {Loading},
watch: {
$props: {
immediate: true,
deep: true,
async handler() {
if (this.bcds !== null) {
this.ip_subnet_by_bcd = ApiUtil.dict_of_lists_by_value_of_array(this.subnets, 'bcd')
}
if (this.vlans !== null) {
this.vlans_by_bcd = ApiUtil.dict_of_lists_by_value_of_array(this.vlans, 'bcd')
}
if (this.ous !== null) {
this.ous_by_short_name = ApiUtil.dict_by_value_of_array(this.ous, 'short_name')
}
}
}
},
data() {
return {
ip_subnet_by_bcd: {},
vlans_by_bcd: {},
ous_by_short_name: {},
bcd_list_fields: [
{
label: 'Name',
key: 'name',
sortable: true
},
{
label: 'Beschreibung',
key: 'description',
sortable: true
},
{
label: 'Subnetze',
key: 'subnets',
sortable: false
},
{
label: 'Ausnutzung',
key: 'usage',
sortable: true
},
{
label: 'Vergeben',
key: 'adresses',
sortable: true
},
{
label: 'OE',
key: 'ou_short_name',
sortable: true
},
{
label: 'VLANs',
key: 'vlans',
sortable: false
}
]
}
},
props: {
vlans: {
required: true,
default() {
return null
}
},
subnets: {
required: true,
default() {
return null
}
},
bcds: {
required: true,
default() {
return null
}
},
ous: {
required: true,
default() {
return null
}
}
},
methods: {
isIPv4: ipaddress.is_ip_v4,
IPAddressCount: ipaddress.ip_num_addr,
usagePercentage(subnet) {
return (subnet.dns_addr_rr_count / this.IPAddressCount(subnet.cidr) * 100).toFixed(0)
},
progressVariant(percentage) {
if (percentage <= 50) {
return 'success'
} else if (percentage <= 75) {
return 'warning'
} else {
return 'danger'
}
},
sortBCDOverview(a, b, key) {
if (key === 'usage') {
let usage_a = 0
let usage_b = 0
this.ip_subnet_by_bcd[a.name].forEach((subnet) => {
if (this.isIPv4(subnet.cidr)) {
usage_a += this.usagePercentage(subnet)
}
})
this.ip_subnet_by_bcd[b.name].forEach((subnet) => {
if (this.isIPv4(subnet.cidr)) {
usage_b += this.usagePercentage(subnet)
}
})
return usage_a - usage_b
} else if (key === 'adresses') {
let adresses_a = 0
let adresses_b = 0
this.ip_subnet_by_bcd[a.name].forEach((subnet) => {
adresses_a += subnet.dns_addr_rr_count
})
this.ip_subnet_by_bcd[b.name].forEach((subnet) => {
adresses_b += subnet.dns_addr_rr_count
})
return adresses_a - adresses_b
} else {
return false
}
}
}
}
</script>
<style scoped>
</style>
<template>
<div id="BCDOverview">
<Loading :data="[bcds]">
<div class="net-filter-direct d-print-none">
<b-input-group class="shadow">
<b-input-group-prepend>
<b-input-group-text>
<font-awesome-icon :icon="['fas', 'filter']"/>
</b-input-group-text>
</b-input-group-prepend>
<b-input class="search form-control" id="filter-direct" placeholder="Filter & Direktwahl"
autofocus/>
<b-input-group-append>
<b-button title="Gehe direkt zu Bereich" variant="outline-secondary" type="submit"
class="mr-0">
<font-awesome-icon icon="arrow-right"/>
</b-button>
</b-input-group-append>
</b-input-group>
</div>
<b-card no-body class="shadow">
<b-table responsive :fields="bcd_list_fields" :items="bcds" :sort-compare="sortBCDOverview">
<template v-slot:cell(name)="data">
<router-link class="nowrap" :to="'bcds/'+data.value"><b>{{ data.value }}</b></router-link>
</template>
<template v-slot:cell(subnets)="data">
<div v-for="subnet in ip_subnet_by_bcd[data.item.name]"
:key="subnet.cidr" class="same-height">
<code class="nowrap">{{subnet.cidr}}</code>
</div>
</template>
<template v-slot:cell(usage)="data">
<div v-for="subnet in ip_subnet_by_bcd[data.item.name]"
:key="subnet.cidr" class="same-height">
<b-progress height="20px" show-progress :max="IPAddressCount(subnet.cidr)"
v-if="isIPv4(subnet.cidr)">
<b-progress-bar
:label="usagePercentage(subnet) +'%'"
:variant="progressVariant(usagePercentage(subnet))"
:value="subnet.dns_addr_rr_count"></b-progress-bar>
</b-progress>
</div>
</template>
<template v-slot:cell(adresses)="data">
<div v-for="subnet in ip_subnet_by_bcd[data.item.name]"
:key="subnet.cidr" class="same-height">
<p>{{subnet.dns_addr_rr_count}}</p>
</div>
</template>
<template v-slot:cell(vlans)="data">
<ul>
<li v-for="vlan in vlans[data.item.name]"
:key="vlan.id" class="nowrap">
{{vlan.name}} ({{vlan.id}})
</li>
</ul>
<i v-if="!(data.item.name in vlans)">Keine VLANs vorhanden</i>
</template>
</b-table>
<div v-if="!bcds || bcds.length === 0"
class="font-italic text-center mb-3">
Keine BCDs vorhanden
</div>
</b-card>
</Loading>
</div>
<div id="BCDOverview">
<BCDList :bcds="bcds" :subnets="subnets" :vlans="vlans" :ous="ous"></BCDList>
</div>
</template>
<script>
import RangeService from '@/api-services/dns_bcd.service'
import ApiUtil from '@/util/apiutil'
import ipaddress from '../../util/ipaddress'
import Loading from '@/components/Loading'
import BCDList from '@/components/BCDList'
export default {
name: 'BCDOverview',
components: { Loading },
data () {
components: {BCDList},
data() {
return {
bcds: null,
utilization: null,
ou_by_shortname: null,
ip_subnet_by_bcd: null,
vlans: null,
bcd_list_fields: [
{
label: 'Name',
key: 'name',
sortable: true
},
{
label: 'Beschreibung',
key: 'description',
sortable: true
},
{
label: 'Subnetze',
key: 'subnets',
sortable: false
},
{
label: 'Ausnutzung',
key: 'usage',
sortable: true
},
{
label: 'Vergeben',
key: 'adresses',
sortable: true
},
{
label: 'OE',
key: 'ou_short_name',
sortable: true
},
{
label: 'VLANs',
key: 'vlans',
sortable: false
}
]
subnets: null,
ous: null
}
},
created () {
created() {
RangeService.getOverview(this.$store.state.netdb_axios_config).then((response) => {
this.ou_by_shortname = ApiUtil.dict_by_value_of_array(response.data[1], 'short_name')
this.ous = response.data[1]
this.bcds = response.data[0]
this.ip_subnet_by_bcd = ApiUtil.dict_of_lists_by_value_of_array(response.data[2], 'bcd')
this.vlans = ApiUtil.dict_of_lists_by_value_of_array(response.data[3], 'bcd')
Object.freeze(this.ranges)
this.subnets = response.data[2]
this.vlans = response.data[3]
})
},
methods: {
isIPv4: ipaddress.is_ip_v4,
IPAddressCount: ipaddress.ip_num_addr,
usagePercentage (subnet) {
return (subnet.dns_addr_rr_count / this.IPAddressCount(subnet.cidr) * 100).toFixed(0)
},
progressVariant (percentage) {
if (percentage <= 50) {
return 'success'
} else if (percentage <= 75) {
return 'warning'
} else {
return 'danger'
}
},
sortBCDOverview (a, b, key) {
if (key === 'usage') {
let usage_a = 0
let usage_b = 0
this.ip_subnet_by_bcd[a.name].forEach((subnet) => {
if (this.isIPv4(subnet.cidr)) { usage_a += this.usagePercentage(subnet) }
})
this.ip_subnet_by_bcd[b.name].forEach((subnet) => {
if (this.isIPv4(subnet.cidr)) { usage_b += this.usagePercentage(subnet) }
})
return usage_a - usage_b
} else if (key === 'adresses') {
let adresses_a = 0
let adresses_b = 0
this.ip_subnet_by_bcd[a.name].forEach((subnet) => {
adresses_a += subnet.dns_addr_rr_count
})
this.ip_subnet_by_bcd[b.name].forEach((subnet) => {
adresses_b += subnet.dns_addr_rr_count
})
return adresses_a - adresses_b
} else {
return false
}
}
}
}
</script>
<style scoped>
.same-height {
height: 30px;
padding: 0;
margin: 0;
}
.same-height {
height: 30px;
padding: 0;
margin: 0;
}
.nowrap {
white-space: nowrap;
}
.nowrap {
white-space: nowrap;
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment