514 lines
19 KiB
HTML
514 lines
19 KiB
HTML
{% extends "main.html" %}
|
|
|
|
{% block header %}
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>{{ page_title | safe }}</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<button class="btn btn-outline-primary float-sm-right mr-4" data-bs-toggle="modal" data-bs-target="#addModal" title="Add Network" aria-hidden="true">
|
|
<i class="fas fa-plus fa-sm fa-fw"></i> Network
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endblock header %}
|
|
|
|
{% block content %}
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Networks</h3>
|
|
<div class="card-tools">
|
|
<button type="button" class="btn btn-tool" onclick="reloadPageContent()" title="Refresh">
|
|
<i class="fas fa-sync"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-hover" id="myDataTable" width="100%" cellspacing="0">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block modal %}
|
|
{% include 'modals/networks.html' %}
|
|
{% endblock modal %}
|
|
|
|
{% block script %}
|
|
<script>
|
|
var reloadTime = 10000;
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const serverId = urlParams.get('id');
|
|
const project = urlParams.get('project');
|
|
var editedProfile = ''
|
|
applySidebarStyles();
|
|
applySidebarLinks();
|
|
populateSidebarLinks();
|
|
populateNavbarLinks();
|
|
|
|
function reloadPageContent() {
|
|
//Clear the automatic page reload
|
|
clearTimeout(pageReloadTimeout);
|
|
|
|
//Reload the datatables content
|
|
$('#myDataTable').DataTable().ajax.reload(null, false);
|
|
|
|
//Set the automatic page reload
|
|
pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
|
|
}
|
|
|
|
function loadPageContent(){
|
|
|
|
//Display the current project
|
|
$("#selectedProject").text(project);
|
|
|
|
//Populate the Server dropdown
|
|
$.getJSON("../api/servers/list_servers?id="+serverId, function (data) {
|
|
data = data.data
|
|
for (var index = 0; index < data.length; index++) {
|
|
if (data[index].name == '')
|
|
optionText = data[index].addr
|
|
else
|
|
optionText = data[index].name
|
|
if (data[index].id == serverId)
|
|
$('#serverListNav').append('<option value="' + data[index].id + '" selected="selected">' + optionText + '</option>');
|
|
else
|
|
$('#serverListNav').append('<option value="' + data[index].id + '">' + optionText + '</option>');
|
|
}
|
|
})
|
|
|
|
//Populate the Project dropdown
|
|
$.getJSON("../api/projects/list_projects?id="+serverId+"&project="+project, function (data) {
|
|
data = data.metadata
|
|
for (var index = 0; index < data.length; index++) {
|
|
optionText = data[index].replace('/1.0/projects/','');
|
|
if (optionText == project)
|
|
$('#projectListNav').append('<option value="' + optionText + '" selected="selected">' + optionText + '</option>');
|
|
else
|
|
$('#projectListNav').append('<option value="' + optionText + '">' + optionText + '</option>');
|
|
}
|
|
})
|
|
|
|
// Configure Datatable
|
|
$('#myDataTable').DataTable({
|
|
ajax: {
|
|
url: "../api/networks/list_networks?id="+serverId+"&project=" + project + "&recursion=1",
|
|
dataType: "json",
|
|
dataSrc: "metadata",
|
|
contentType: "application/json",
|
|
error: function (xhr, error, code) {
|
|
console.log(xhr, code);
|
|
}
|
|
},
|
|
columns: [
|
|
{ title: "Name", data: function (row, type, set) {
|
|
if (row.hasOwnProperty('name')) {
|
|
if (row.name && row.managed && row.type)
|
|
return '<a href="../network?id=' + serverId + '&project=' + project + '&network=' + row.name + '&network_type=' + row.type + '">' + row.name + '</a>';
|
|
if (row.name)
|
|
return row.name
|
|
}
|
|
return '-'
|
|
},
|
|
},
|
|
{ title: "Description", data: function (row, type, set) {
|
|
if (row.hasOwnProperty('description')) {
|
|
if (row.description)
|
|
return row.description
|
|
}
|
|
return '-'
|
|
},
|
|
},
|
|
{ title: "IPv4", data: function (row, type, set) {
|
|
if (row.hasOwnProperty('config')){
|
|
if (row.config.hasOwnProperty('ipv4.address')) {
|
|
if (row.config['ipv4.address'])
|
|
return row.config['ipv4.address']
|
|
}
|
|
}
|
|
return '-'
|
|
},
|
|
},
|
|
{ title: "IPv6", data: function (row, type, set) {
|
|
if (row.hasOwnProperty('config')){
|
|
if (row.config.hasOwnProperty('ipv6.address')) {
|
|
if (row.config['ipv6.address'])
|
|
return row.config['ipv6.address']
|
|
}
|
|
}
|
|
return '-'
|
|
},
|
|
},
|
|
{ title: "Type", data: function (row, type, set) {
|
|
if (row.hasOwnProperty('type')) {
|
|
if (row.type)
|
|
return row.type
|
|
}
|
|
return '-'
|
|
},
|
|
},
|
|
{ title: "Managed", data: function (row, type, set) {
|
|
if (row.hasOwnProperty('managed')) {
|
|
// Boolean field
|
|
return row.managed
|
|
}
|
|
return '-'
|
|
},
|
|
},
|
|
{ title: "Actions", data: function (row, type, set) {
|
|
links = ''
|
|
if (row.hasOwnProperty('name') && row.hasOwnProperty('managed')) {
|
|
if (row.managed){
|
|
links = '<a href="#" onclick=editNetwork(\''+row.name+'\')><i class="fas fa-edit fa-lg" style="color:#ddd" title="Edit" aria-hidden="true"></i></a>' +
|
|
' ' + ' ' +
|
|
'<a href="#" onclick=renameNetwork(\''+row.name+'\')><i class="fas fa-tag fa-lg" style="color:#ddd" title="Rename" aria-hidden="true"></i></a>' +
|
|
' ' + ' ' +
|
|
'<a href="#" onclick=confirmDeleteNetwork(\''+row.name+'\')><i class="fas fa-trash-alt fa-lg" style="color:#ddd" title="Delete" aria-hidden="true"></i></a>'
|
|
}
|
|
}
|
|
return links
|
|
},
|
|
},
|
|
],
|
|
order: [],
|
|
});
|
|
|
|
//Populate Network/Parent Fields in addModal
|
|
$.getJSON("../api/networks/list_networks?id="+serverId+'&project='+project+'&recursion=1', function (data) {
|
|
data = data.metadata
|
|
for (var index = 0; index < data.length; index++) {
|
|
optionText = data[index].name;
|
|
if (data[index].managed)
|
|
$('#networkNetworkInput').append('<option value="' + optionText + '">' + optionText + '</option>');
|
|
$('#networkParentInput').append('<option value="' + optionText + '">' + optionText + '</option>');
|
|
}
|
|
})
|
|
|
|
//Set reload page content
|
|
pageReloadTimeout = setTimeout(() => { reloadPageContent(); }, reloadTime);
|
|
|
|
}
|
|
|
|
function addItem(){
|
|
console.log("Info: adding new network");
|
|
data = $('#addForm').serialize();
|
|
$.post("../api/networks/add_network?id="+serverId+"&project="+project, data, function (data) {
|
|
console.log(data)
|
|
if (data.error_code >= 400){
|
|
alert(data.error);
|
|
}
|
|
//Sync type
|
|
setTimeout(() => { reloadPageContent(); }, 1000);
|
|
operationStatusCheck()
|
|
});
|
|
}
|
|
|
|
function changeNetworkTypeInput(){
|
|
var networkTypeInput = $("#networkTypeInput").val();
|
|
|
|
if (networkTypeInput == "bridge"){
|
|
$("#networkBridgeDriverRow").show()
|
|
$("#networkBridgeExternalInterfacesRow").show()
|
|
$("#networkBridgeHwaddrRow").show()
|
|
$("#networkBridgeModeRow").show()
|
|
$("#networkBridgeMtuRow").show()
|
|
$("#networkDnsDomainRow").show()
|
|
$("#networkDnsModeRow").show()
|
|
$("#networkDnsSearchRow").show()
|
|
$("#networkFanOverlaySubnetRow").show()
|
|
$("#networkFanTypeRow").show()
|
|
$("#networkFanUnderlaySubnetRow").show()
|
|
$("#networkIpv4AddressRow").show()
|
|
$("#networkIpv4DhcpRow").show()
|
|
$("#networkIpv4DhcpExpiryRow").show()
|
|
$("#networkIpv4DhcpGatewayRow").show()
|
|
$("#networkIpv4DhcpRangesRow").show()
|
|
$("#networkIpv4FirewallRow").show()
|
|
$("#networkIpv4NatAddressRow").show()
|
|
$("#networkIpv4NatRow").show()
|
|
$("#networkIpv4NatOrderRow").show()
|
|
$("#networkIpv4OvnRangesRow").show()
|
|
$("#networkIpv4RoutesRow").show()
|
|
$("#networkIpv4RoutingRow").show()
|
|
$("#networkIpv6AddressRow").show()
|
|
$("#networkIpv6DhcpRow").show()
|
|
$("#networkIpv6DhcpExpiryRow").show()
|
|
$("#networkIpv6DhcpRangesRow").show()
|
|
$("#networkIpv6DhcpStatefulRow").show()
|
|
$("#networkIpv6FirewallRow").show()
|
|
$("#networkIpv6NatAddressRow").show()
|
|
$("#networkIpv6NatRow").show()
|
|
$("#networkIpv6NatOrderRow").show()
|
|
$("#networkIpv6OvnRangesRow").show()
|
|
$("#networkIpv6RoutesRow").show()
|
|
$("#networkIpv6RoutingRow").show()
|
|
$("#networkMaasSubnetIpv4Row").show()
|
|
$("#networkMaasSubnetIpv6Row").show()
|
|
$("#networkRawDnsmasqRow").show()
|
|
$("#networkMtuRow").hide()
|
|
$("#networkParentRow").hide()
|
|
$("#networkVlanRow").hide()
|
|
$("#networkNetworkRow").hide()
|
|
$("#networkIpv4GatewayRow").hide()
|
|
$("#networkIpv4RoutesAnycastRow").hide()
|
|
$("#networkIpv6GatewayRow").hide()
|
|
$("#networkIpv6RoutesAnycastRow").hide()
|
|
$("#networkDnsNameserversRow").hide()
|
|
$("#networkOvnIngressModeRow").hide()
|
|
}
|
|
if (networkTypeInput == "macvlan" || networkTypeInput == "sriov"){
|
|
$("#networkBridgeDriverRow").hide()
|
|
$("#networkBridgeExternalInterfacesRow").hide()
|
|
$("#networkBridgeHwaddrRow").hide()
|
|
$("#networkBridgeModeRow").hide()
|
|
$("#networkBridgeMtuRow").hide()
|
|
$("#networkDnsDomainRow").hide()
|
|
$("#networkDnsModeRow").hide()
|
|
$("#networkDnsSearchRow").hide()
|
|
$("#networkFanOverlaySubnetRow").hide()
|
|
$("#networkFanTypeRow").hide()
|
|
$("#networkFanUnderlaySubnetRow").hide()
|
|
$("#networkIpv4AddressRow").hide()
|
|
$("#networkIpv4DhcpRow").hide()
|
|
$("#networkIpv4DhcpExpiryRow").hide()
|
|
$("#networkIpv4DhcpGatewayRow").hide()
|
|
$("#networkIpv4DhcpRangesRow").hide()
|
|
$("#networkIpv4FirewallRow").hide()
|
|
$("#networkIpv4NatAddressRow").hide()
|
|
$("#networkIpv4NatRow").hide()
|
|
$("#networkIpv4NatOrderRow").hide()
|
|
$("#networkIpv4OvnRangesRow").hide()
|
|
$("#networkIpv4RoutesRow").hide()
|
|
$("#networkIpv4RoutingRow").hide()
|
|
$("#networkIpv6AddressRow").hide()
|
|
$("#networkIpv6DhcpRow").hide()
|
|
$("#networkIpv6DhcpExpiryRow").hide()
|
|
$("#networkIpv6DhcpRangesRow").hide()
|
|
$("#networkIpv6DhcpStatefulRow").hide()
|
|
$("#networkIpv6FirewallRow").hide()
|
|
$("#networkIpv6NatAddressRow").hide()
|
|
$("#networkIpv6NatRow").hide()
|
|
$("#networkIpv6NatOrderRow").hide()
|
|
$("#networkIpv6OvnRangesRow").hide()
|
|
$("#networkIpv6RoutesRow").hide()
|
|
$("#networkIpv6RoutingRow").hide()
|
|
$("#networkMaasSubnetIpv4Row").show()
|
|
$("#networkMaasSubnetIpv6Row").show()
|
|
$("#networkRawDnsmasqRow").hide()
|
|
$("#networkMtuRow").show()
|
|
$("#networkParentRow").show()
|
|
$("#networkVlanRow").show()
|
|
$("#networkNetworkRow").hide()
|
|
$("#networkIpv4GatewayRow").hide()
|
|
$("#networkIpv4RoutesAnycastRow").hide()
|
|
$("#networkIpv6GatewayRow").hide()
|
|
$("#networkIpv6RoutesAnycastRow").hide()
|
|
$("#networkDnsNameserversRow").hide()
|
|
$("#networkOvnIngressModeRow").hide()
|
|
}
|
|
if (networkTypeInput == "ovn"){
|
|
$("#networkBridgeDriverRow").hide()
|
|
$("#networkBridgeExternalInterfacesRow").hide()
|
|
$("#networkBridgeHwaddrRow").show()
|
|
$("#networkBridgeModeRow").hide()
|
|
$("#networkBridgeMtuRow").show()
|
|
$("#networkDnsDomainRow").show()
|
|
$("#networkDnsModeRow").hide()
|
|
$("#networkDnsSearchRow").show()
|
|
$("#networkFanOverlaySubnetRow").hide()
|
|
$("#networkFanTypeRow").hide()
|
|
$("#networkFanUnderlaySubnetRow").hide()
|
|
$("#networkIpv4AddressRow").show()
|
|
$("#networkIpv4DhcpRow").show()
|
|
$("#networkIpv4DhcpExpiryRow").hide()
|
|
$("#networkIpv4DhcpGatewayRow").hide()
|
|
$("#networkIpv4DhcpRangesRow").hide()
|
|
$("#networkIpv4FirewallRow").hide()
|
|
$("#networkIpv4NatAddressRow").hide()
|
|
$("#networkIpv4NatRow").show()
|
|
$("#networkIpv4NatOrderRow").hide()
|
|
$("#networkIpv4OvnRangesRow").hide()
|
|
$("#networkIpv4RoutesRow").hide()
|
|
$("#networkIpv4RoutingRow").hide()
|
|
$("#networkIpv6AddressRow").show()
|
|
$("#networkIpv6DhcpRow").show()
|
|
$("#networkIpv6DhcpExpiryRow").hide()
|
|
$("#networkIpv6DhcpRangesRow").hide()
|
|
$("#networkIpv6DhcpStatefulRow").show()
|
|
$("#networkIpv6FirewallRow").hide()
|
|
$("#networkIpv6NatAddressRow").hide()
|
|
$("#networkIpv6NatRow").show()
|
|
$("#networkIpv6NatOrderRow").hide()
|
|
$("#networkIpv6OvnRangesRow").hide()
|
|
$("#networkIpv6RoutesRow").hide()
|
|
$("#networkIpv6RoutingRow").hide()
|
|
$("#networkMaasSubnetIpv4Row").hide()
|
|
$("#networkMaasSubnetIpv6Row").hide()
|
|
$("#networkRawDnsmasqRow").hide()
|
|
$("#networkMtuRow").hide()
|
|
$("#networkParentRow").hide()
|
|
$("#networkVlanRow").hide()
|
|
$("#networkNetworkRow").show()
|
|
$("#networkIpv4GatewayRow").hide()
|
|
$("#networkIpv4RoutesAnycastRow").hide()
|
|
$("#networkIpv6GatewayRow").hide()
|
|
$("#networkIpv6RoutesAnycastRow").hide()
|
|
$("#networkDnsNameserversRow").hide()
|
|
$("#networkOvnIngressModeRow").hide()
|
|
}
|
|
if (networkTypeInput == "physical"){
|
|
$("#networkBridgeDriverRow").hide()
|
|
$("#networkBridgeExternalInterfacesRow").hide()
|
|
$("#networkBridgeHwaddrRow").hide()
|
|
$("#networkBridgeModeRow").hide()
|
|
$("#networkBridgeMtuRow").hide()
|
|
$("#networkDnsDomainRow").hide()
|
|
$("#networkDnsModeRow").hide()
|
|
$("#networkDnsSearchRow").hide()
|
|
$("#networkFanOverlaySubnetRow").hide()
|
|
$("#networkFanTypeRow").hide()
|
|
$("#networkFanUnderlaySubnetRow").hide()
|
|
$("#networkIpv4AddressRow").hide()
|
|
$("#networkIpv4DhcpRow").hide()
|
|
$("#networkIpv4DhcpExpiryRow").hide()
|
|
$("#networkIpv4DhcpGatewayRow").hide()
|
|
$("#networkIpv4DhcpRangesRow").hide()
|
|
$("#networkIpv4FirewallRow").hide()
|
|
$("#networkIpv4NatAddressRow").hide()
|
|
$("#networkIpv4NatRow").hide()
|
|
$("#networkIpv4NatOrderRow").hide()
|
|
$("#networkIpv4OvnRangesRow").show()
|
|
$("#networkIpv4RoutesRow").show()
|
|
$("#networkIpv4RoutingRow").hide()
|
|
$("#networkIpv6AddressRow").hide()
|
|
$("#networkIpv6DhcpRow").hide()
|
|
$("#networkIpv6DhcpExpiryRow").hide()
|
|
$("#networkIpv6DhcpRangesRow").hide()
|
|
$("#networkIpv6DhcpStatefulRow").hide()
|
|
$("#networkIpv6FirewallRow").hide()
|
|
$("#networkIpv6NatAddressRow").hide()
|
|
$("#networkIpv6NatRow").hide()
|
|
$("#networkIpv6NatOrderRow").hide()
|
|
$("#networkIpv6OvnRangesRow").show()
|
|
$("#networkIpv6RoutesRow").show()
|
|
$("#networkIpv6RoutingRow").hide()
|
|
$("#networkMaasSubnetIpv4Row").show()
|
|
$("#networkMaasSubnetIpv6Row").show()
|
|
$("#networkRawDnsmasqRow").hide()
|
|
$("#networkMtuRow").show()
|
|
$("#networkParentRow").show()
|
|
$("#networkVlanRow").show()
|
|
$("#networkNetworkRow").hide()
|
|
$("#networkIpv4GatewayRow").show()
|
|
$("#networkIpv4RoutesAnycastRow").show()
|
|
$("#networkIpv6GatewayRow").show()
|
|
$("#networkIpv6RoutesAnycastRow").show()
|
|
$("#networkDnsNameserversRow").show()
|
|
$("#networkOvnIngressModeRow").show()
|
|
}
|
|
}
|
|
|
|
function confirmDeleteNetwork(name){
|
|
console.log("Info: confirming deletion of network " + name);
|
|
if (confirm("Are you sure you want to delete network " + name + "?") == true) {
|
|
deleteNetwork(name);
|
|
}
|
|
}
|
|
|
|
function createNetworkUsingJSON(){
|
|
var json = $("#jsonCreateInput").val();
|
|
console.log("Info: adding new network");
|
|
$.post("../api/networks/add_network?id="+serverId+"&project="+project, { json: json }, function (data) {
|
|
console.log(data);
|
|
if (data.error_code >= 400){
|
|
alert(data.error);
|
|
}
|
|
//Sync type
|
|
setTimeout(() => { reloadPageContent(); }, 1000);
|
|
operationStatusCheck()
|
|
});
|
|
}
|
|
|
|
function deleteNetwork(name){
|
|
console.log("Info: deleting network " + name);
|
|
$.post("../api/networks/delete_network?id=" + serverId + "&project=" + project, { name: name }, function (data) {
|
|
console.log(data);
|
|
if (data.error_code >= 400){
|
|
alert(data.error);
|
|
}
|
|
//Sync type
|
|
setTimeout(() => { reloadPageContent(); }, 1000);
|
|
operationStatusCheck()
|
|
});
|
|
}
|
|
|
|
function editNetwork(name){
|
|
editedNetwork = name
|
|
console.log("Info: loading network " + name);
|
|
$.post("../api/networks/load_network?id=" + serverId + "&project=" + project, { name: name }, function (data) {
|
|
console.log(data);
|
|
if (data.error_code >= 400){
|
|
alert(data.error);
|
|
}
|
|
$("#networkNameEditInput").text("Name: " + name);
|
|
$("#jsonInput").val(JSON.stringify(data.metadata, null, 2));
|
|
$("#editModal").modal('show');
|
|
});
|
|
}
|
|
|
|
function renameNetwork(name){
|
|
console.log("Loading rename modal for network " + name)
|
|
$("#renameNetworkModalLabel").text("Rename network: " + name);
|
|
$("#networkToRename").val(name);
|
|
$("#renameModal").modal('show');
|
|
}
|
|
|
|
function updateNetwork(){
|
|
name = editedNetwork
|
|
var updatedJSON = $("#jsonInput").val();
|
|
console.log("Info: updating network");
|
|
$.post("../api/networks/update_network?id=" + serverId + "&project=" + project + "&name=" + encodeURI(name), { json: updatedJSON }, function (data) {
|
|
console.log(data);
|
|
if (data.error_code >= 400){
|
|
alert(data.error);
|
|
}
|
|
//Sync type
|
|
setTimeout(() => { reloadPageContent(); }, 1000);
|
|
operationStatusCheck()
|
|
});
|
|
}
|
|
|
|
function updateNetworkName(){
|
|
var networkNewName = $("#newNetworkName").val();
|
|
var networkToRename = $("#networkToRename").val();
|
|
console.log("Info: renaming network " + networkToRename);
|
|
$.post("../api/networks/update_network?id=" + serverId + "&project=" + project + "&name=" + encodeURI(networkToRename), { 'name': networkNewName }, function (data) {
|
|
console.log(data);
|
|
if (data.error_code >= 400){
|
|
alert(data.error);
|
|
}
|
|
//Sync type
|
|
setTimeout(() => { reloadPageContent(); }, 1000);
|
|
operationStatusCheck()
|
|
});
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
|
|
//If id or project variables are missing redirect to servers page
|
|
if (!serverId || !project) {
|
|
window.location.href = 'servers';
|
|
}
|
|
else {
|
|
loadPageContent()
|
|
operationStatusCheck()
|
|
changeNetworkTypeInput()
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
{% endblock script %} |