177 lines
7.7 KiB
JavaScript
177 lines
7.7 KiB
JavaScript
Vue.component('IpNetwork', {
|
|
//language=Vue
|
|
template: `
|
|
<tt-card>
|
|
|
|
<tt-table :fetch-url="window['TT_CONFIG']['IPNETWORK_API_URL'] + '?do=get'"
|
|
:config="IpNetworkTableConfig"
|
|
@row-click="(row) => row.cidr !== '32' && switchCurrentNetwork(row.id)"
|
|
@reset-table="switchCurrentNetwork"
|
|
small ssr disable-initial-fetch ref="table">
|
|
|
|
<template v-slot:top-buttons>
|
|
|
|
<button type="button" class="btn btn-primary"
|
|
@click="switchCurrentNetwork(currentNetworkData.parent_network_id)"
|
|
:disabled="!currentNetworkData">
|
|
<i class="fas fa-sync-alt"></i>Go Back
|
|
</button>
|
|
|
|
<button type="button" class="btn btn-primary" @click="addModal = true">
|
|
<i class="fas fa-sync-alt"></i>Add new Network Space
|
|
</button>
|
|
|
|
</template>
|
|
|
|
<!-- add $slots.expandedRow to the table component and display discription -->
|
|
<template v-slot:expandedRow="{row}">
|
|
<span style="white-space: pre;" v-if="row.description" v-text="row.description"></span>
|
|
<span v-else>No description</span>
|
|
</template>
|
|
|
|
</tt-table>
|
|
|
|
<!-- add modal -->
|
|
<div class="modal show d-block" tabindex="-1" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
|
|
ref="addModal" @click="addModal = false" @keydown.esc="addModal = false" v-if="addModal === true">
|
|
<div class="modal-dialog" role="document" @click.stop>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit DNS Record</h5>
|
|
<button type="button" class="close" @click="addModal = false">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="wrapper" style="display:grid; grid-template-columns: 3fr 1fr 2fr; grid-gap: 12px">
|
|
<div class="form-group">
|
|
<label for="network_address">Network Address</label>
|
|
<input type="text" class="form-control" id="network_address"
|
|
v-model="addModalData.network_address">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cidr">CIDR</label>
|
|
<input type="text" class="form-control" id="cidr" v-model="addModalData.cidr">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="status">Status</label>
|
|
<select class="form-control" id="status" v-model="addModalData.status">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
<option value="reserved">Reserved</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="grid-column: span 2">
|
|
<label for="name_location">Name</label>
|
|
<input type="text" class="form-control" id="name_location"
|
|
v-model="addModalData.name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="name_location">Location</label>
|
|
<input type="text" class="form-control" id="name_location"
|
|
v-model="addModalData.location">
|
|
</div>
|
|
<div class="form-group" style="grid-column: span 3">
|
|
<label for="description">Description</label>
|
|
<input type="text" class="form-control" id="description"
|
|
v-model="addModalData.description">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" @click="addSubmit">Save</button>
|
|
<button class="btn btn-secondary" @click="addModal = false">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</tt-card>
|
|
`,
|
|
data() {
|
|
return {
|
|
window: window,
|
|
apiUrl: window['TT_CONFIG']['IPNETWORK_API_URL'],
|
|
IpNetworkTableConfig: {
|
|
defaultPageSize: 50,
|
|
customRowClass: function (row) {
|
|
return row.cidr !== '32' ? 'tt-pointer' : '';
|
|
},
|
|
expandCondition: function (row) {
|
|
return !!row.description;
|
|
},
|
|
headers: [
|
|
{text: 'Network Address', key: 'network_address_str'},
|
|
{text: 'Name', key: 'name'},
|
|
{
|
|
text: 'Status', key: 'status', filter: 'iconSelect',
|
|
filterOptions: [{value: 'active', text: 'Active', icon: 'fas fa-check text-success'},
|
|
{value: 'inactive', text: 'Inactive', icon: 'fas fa-times text-danger'},
|
|
{value: 'reserved', text: 'Reserved', icon: 'fas fa-lock text-warning'}]
|
|
},
|
|
{text: 'Children', key: 'children', filter: 'numberRange'},
|
|
],
|
|
tableHeader: 'IPAM',
|
|
key: 'IpNetwork'
|
|
},
|
|
currentNetworkData: null,
|
|
addModal: false,
|
|
addModalData: {
|
|
network_address: '',
|
|
cidr: '',
|
|
parent_network_id: '',
|
|
status: 'active',
|
|
name: '',
|
|
description: '',
|
|
location: '',
|
|
},
|
|
}
|
|
},
|
|
async mounted() {
|
|
function popstateFunction() {
|
|
const parentNetworkId = new URLSearchParams(window.location.search).get('parent_network_id');
|
|
this.switchCurrentNetwork(parentNetworkId).then();
|
|
}
|
|
|
|
window.onpopstate = popstateFunction.bind(this);
|
|
window.onpopstate.call(this)
|
|
|
|
},
|
|
methods: {
|
|
async switchCurrentNetwork(networkId = null) {
|
|
if (!networkId) {
|
|
this.$refs.table.$set(this.$refs.table.filters, 'parent_network_id', undefined);
|
|
this.currentNetworkData = null;
|
|
this.IpNetworkTableConfig.tableHeader = 'IPAM';
|
|
this.$refs.table.disableDebounce = true;
|
|
window.history.pushState({}, '', `?`);
|
|
} else {
|
|
this.$refs.table.disableDebounce = true;
|
|
this.$refs.table.$set(this.$refs.table.filters, 'parent_network_id', networkId);
|
|
window.history.pushState({}, '', `?parent_network_id=${networkId}`);
|
|
|
|
const response = await axios.post(`${this.apiUrl}?do=getById`, {id: networkId});
|
|
this.currentNetworkData = response.data.network;
|
|
this.IpNetworkTableConfig.tableHeader = `IPAM - ${this.currentNetworkData.network_address_str}/${this.currentNetworkData.cidr} - ${this.currentNetworkData.name}`;
|
|
}
|
|
await this.$refs.table.fetchData();
|
|
},
|
|
async addSubmit() {
|
|
const response = await axios.post(`${this.apiUrl}?do=create`,
|
|
{
|
|
...this.addModalData,
|
|
parent_network_id: this.currentNetworkData ? this.currentNetworkData.id : null
|
|
});
|
|
if (response.data.status === 'success') {
|
|
this.addModal = false;
|
|
window.notify('success', 'Network space created successfully');
|
|
await this.$refs.table.fetchData();
|
|
} else {
|
|
window.notify('error', response.data.message);
|
|
}
|
|
},
|
|
},
|
|
})
|