mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 15:45:23 +00:00
476 lines
No EOL
24 KiB
HTML
476 lines
No EOL
24 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n %}
|
|
{% load staticfiles %}
|
|
{% block title %}{% trans "Network" %} - {{ pool }}{% endblock %}
|
|
{% block content %}
|
|
<!-- Page Heading -->
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="page-header">{% trans "Network:" %} {{ pool }}</h1>
|
|
<ol class="breadcrumb">
|
|
<li class="active">
|
|
<i class="fa fa-dashboard"></i> <a href="{% url 'overview' compute.id %}">{% trans "Overview" %}</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-server"></i> <a href="{% url 'instances' compute.id %}">{% trans "Instances" %}</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-hdd-o"></i> <a href="{% url 'storages' compute.id %}">{% trans "Storages" %}</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-sitemap"></i> <a href="{% url 'networks' compute.id %}">{% trans "Networks" %}</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-wifi"></i> <a href="{% url 'interfaces' compute.id %}">{% trans "Interfaces" %}</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-filter"></i> <a href="{% url 'nwfilters' compute.id %}">{% trans "NWFilters" %}</a>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-key"></i> <a href="{% url 'secrets' compute.id %}">{% trans "Secrets" %}</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
{% include 'errors_block.html' %}
|
|
{% include 'messages_block.html' %}
|
|
|
|
<div class="row">
|
|
<div class="col-xs-6 col-sm-4">
|
|
<p>{% trans "Network Name" %}:</p>
|
|
<p>{% trans "Device" %}:</p>
|
|
<p>{% trans "MAC" %}:</p>
|
|
<p>{% trans "State" %}:</p>
|
|
<p>{% trans "Autostart" %}:</p>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6">
|
|
<p>{{ pool }}</p>
|
|
<p>{{ device }}</p>
|
|
<p>{{ net_mac }}</p>
|
|
<p>
|
|
<form action="" method="post" role="form">{% csrf_token %}
|
|
{% ifequal state 0 %}
|
|
<input type="submit" class="btn btn-xs btn-default" name="start" value="{% trans "Start" %}">
|
|
<input type="submit" class="btn btn-xs btn-default" name="delete" value="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
{% else %}
|
|
<input type="submit" class="btn btn-xs btn-default" name="stop" value="{% trans "Stop" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
{% endifequal %}
|
|
</form>
|
|
</p>
|
|
<p>
|
|
<form action="" method="post" role="form">{% csrf_token %}
|
|
{% ifequal autostart 0 %}
|
|
<input type="submit" class="btn btn-xs btn-default" name="set_autostart" value="{% trans "Enable" %}">
|
|
{% else %}
|
|
<input type="submit" class="btn btn-xs btn-default" name="unset_autostart" onclick="return confirm('{% trans "Are you sure?" %}')" value="{% trans "Disable" %}">
|
|
{% endifequal %}
|
|
</form>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h3 class="page-header"></h3>
|
|
</div>
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
|
{% trans 'XML' %}
|
|
</a>
|
|
</div>
|
|
<div id="collapseOne" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<form class="form-inline" method="post" role="form">{% csrf_token %}
|
|
<div class="col-xs-12" id="xmlheight">
|
|
<input type="hidden" name="edit_xml"/>
|
|
<textarea id="edit_editor">{{ xml }}</textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary pull-right" name="edit_network">
|
|
{% trans "Edit" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h3 class="page-header">{% trans "IPv4 Configuration" %}</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 col-sm-4">
|
|
<p>{% trans "IPv4 Forwarding" %}:</p>
|
|
<p>{% trans "Network" %}:</p>
|
|
<p>{% trans "DHCP" %}:</p>
|
|
{% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
|
|
<p>{% trans "Start" %}:</p>
|
|
<p>{% trans "End" %}:</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4">
|
|
<p>
|
|
{% ifequal net_forward.0 'nat' %}
|
|
{% trans "NAT" %}
|
|
{% endifequal %}
|
|
{% ifequal net_forward.0 'route' %}
|
|
{% trans "ROUTE" %}
|
|
{% endifequal %}
|
|
{% ifequal net_forward.0 'bridge' %}
|
|
{% trans "BRIDGE" %}
|
|
{% endifequal %}
|
|
{% if not net_forward.0 %}
|
|
{% trans "ISOLATE" %}
|
|
{% endif %}
|
|
</p>
|
|
<p>{{ ipv4_network|default:"-" }}</p>
|
|
<p>
|
|
{% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
|
|
<span class="text-success">{% trans "ON" %}</span>
|
|
{% else %}
|
|
<span class="text-danger">{% trans "OFF" %}</span>
|
|
{% endif %}
|
|
</p>
|
|
{% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
|
|
<form method="post" role="form">{% csrf_token %}
|
|
{% if state %}
|
|
<p>{{ ipv4_dhcp_range_start }}</p>
|
|
<p>{{ ipv4_dhcp_range_end }}</p>
|
|
{% else %}
|
|
<p><input name="range_start" value="{{ ipv4_dhcp_range_start }}"/></p>
|
|
<p><input name="range_end" value="{{ ipv4_dhcp_range_end }}"/></p>
|
|
<input hidden name="family" value="ipv4"/>
|
|
<div class="col-xs-10 col-sm-8">
|
|
<input type="submit" class="btn btn-primary btn-block" value="Apply"
|
|
name="modify_dhcp_range"
|
|
title="Edit DHCP Range" onclick="return confirm('{% trans "Are you sure?" %}')"/>
|
|
</div>
|
|
{% endif %}
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if ipv4_dhcp_range_start and ipv4_dhcp_range_end %}
|
|
{% if state %}
|
|
{% include 'modify_ipv4_fixed_address.html' %}
|
|
{% endif %}
|
|
<div class="row">
|
|
<h3 class="page-header">{% trans "IPv4 Fixed Address" %}</h3>
|
|
</div>
|
|
{% endif %}
|
|
{% if ipv4_fixed_address %}
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
|
{% trans 'Show' %}
|
|
</a>
|
|
</div>
|
|
<div id="collapseTwo" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<div class="input-append form-inline pull-right">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" id="filter_input">
|
|
</div>
|
|
<input type="button" class="btn btn-default" id="filter_button" value="Filter">
|
|
<button type="button" class="btn btn-default" id="filter_clear">{% trans 'Clear' %}</button>
|
|
</div>
|
|
<table id="ipv4_table" class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: center">{% trans "MAC" %}</th>
|
|
<th style="text-align: center">{% trans "Address" %}</th>
|
|
<th style="text-align: center">{% trans "Name" %}</th>
|
|
<th style="text-align: center">{% trans "Action" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody style="text-align: center">
|
|
{% for fix4 in ipv4_fixed_address %}
|
|
<tr>
|
|
<form method="post" role="form">{% csrf_token %}
|
|
<td><input class="form-control" value="{{ fix4.mac }}" name="mac" readonly/></td>
|
|
<td><input class="form-control" value="{{ fix4.ip }}" name="address" /></td>
|
|
<td><input class="form-control" value="{{ fix4.name }}" name="name" /></td>
|
|
<td>
|
|
<input hidden name="family" value="ipv4"/>
|
|
<button type="submit" class="btn btn-sm btn-primary"
|
|
name="modify_fixed_address"
|
|
title="Edit entry" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
<i class="glyphicon glyphicon-save"></i>
|
|
</button>
|
|
<button type="submit" class="btn btn-sm btn-danger"
|
|
name="delete_fixed_address"
|
|
title="Delete entry" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
<i class="glyphicon glyphicon-trash"></i>
|
|
</button>
|
|
</td>
|
|
</form>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<h3 class="page-header">{% trans "IPv6 Configuration" %}</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 col-sm-4">
|
|
<p>{% trans "IPv6 Forwarding" %}:</p>
|
|
<p>{% trans "Network" %}:</p>
|
|
<p>{% trans "DHCP" %}:</p>
|
|
{% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
|
|
<p>{% trans "Start" %}:</p>
|
|
<p>{% trans "End" %}:</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4">
|
|
<p>
|
|
{% if not net_forward.0 %}
|
|
{% trans "ISOLATE" %}
|
|
{% else %}
|
|
{% trans "ROUTE" %}
|
|
{% endif %}
|
|
</p>
|
|
<p>{{ ipv6_network|default:"-" }}</p>
|
|
<p>
|
|
{% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
|
|
<span class="text-success">{% trans "ON" %}</span>
|
|
{% else %}
|
|
<span class="text-danger">{% trans "OFF" %}</span>
|
|
{% endif %}
|
|
</p>
|
|
{% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
|
|
<form method="post" role="form">{% csrf_token %}
|
|
{% if state %}
|
|
<p>{{ ipv6_dhcp_range_start }}</p>
|
|
<p>{{ ipv6_dhcp_range_end }}</p>
|
|
{% else %}
|
|
<p><input name="range_start" value="{{ ipv6_dhcp_range_start }}"/></p>
|
|
<p><input name="range_end" value="{{ ipv6_dhcp_range_end }}"/></p>
|
|
<input hidden name="family" value="ipv6"/>
|
|
<div class="col-xs-10 col-sm-8">
|
|
<input type="submit" class="btn btn-primary btn-block" value="Apply"
|
|
name="modify_dhcp_range"
|
|
title="Edit DHCP Range" onclick="return confirm('{% trans "Are you sure?" %}')"/>
|
|
</div>
|
|
{% endif %}
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if ipv6_dhcp_range_start and ipv6_dhcp_range_end %}
|
|
{% if state %}
|
|
{% include 'modify_ipv6_fixed_address.html' %}
|
|
{% endif %}
|
|
<div class="row">
|
|
<h3 class="page-header">{% trans "IPv6 Fixed Address" %}</h3>
|
|
</div>
|
|
{% endif %}
|
|
{% if ipv6_fixed_address %}
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseIPv6">
|
|
{% trans 'Show' %}
|
|
</a>
|
|
</div>
|
|
<div id="collapseIPv6" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
|
|
<div class="input-append form-inline pull-right">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" id="filter_input_ipv6">
|
|
</div>
|
|
<input type="button" class="btn btn-default" id="filter_button_ipv6" value="Filter">
|
|
<button type="button" class="btn btn-default" id="filter_clear_ipv6">{% trans 'Clear' %}</button>
|
|
</div>
|
|
<table id="ipv6_table" class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: center">{% trans "ID" %}</th>
|
|
<th style="text-align: center">{% trans "Address" %}</th>
|
|
<th style="text-align: center">{% trans "Name" %}</th>
|
|
<th style="text-align: center">{% trans "Action" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody style="text-align: center">
|
|
{% for fix6 in ipv6_fixed_address %}
|
|
<tr>
|
|
<form method="post" role="form">{% csrf_token %}
|
|
<td><input class="form-control" value="{{ fix6.id }}" name="id" readonly/></td>
|
|
<td><input class="form-control" value="{{ fix6.ip }}" name="address" /></td>
|
|
<td><input class="form-control" value="{{ fix6.name }}" name="name" /></td>
|
|
<td>
|
|
<input hidden name="family" value="ipv6"/>
|
|
<button type="submit" class="btn btn-sm btn-primary"
|
|
name="modify_fixed_address"
|
|
title="Edit entry" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
<i class="glyphicon glyphicon-save"></i>
|
|
</button>
|
|
<button type="submit" class="btn btn-sm btn-danger"
|
|
name="delete_fixed_address"
|
|
title="Delete entry" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
<i class="glyphicon glyphicon-trash"></i>
|
|
</button>
|
|
</td>
|
|
</form>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if net_forward.0 == 'route' or net_forward.0 == 'nat' or net_forward.0 == 'isolated' %}
|
|
{% if state == 0 and qos.items|length != 2%}
|
|
<form class="form-horizontal" method="post" name="set_qos" role="form">{% csrf_token %}
|
|
{% include 'add_network_qos.html' %}
|
|
</form>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<h3 class="page-header">{% trans "Qos Configuration" %}</h3>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: center">{% trans "Direction" %}</th>
|
|
<th style="text-align: center">{% trans "Average" %}</th>
|
|
<th style="text-align: center">{% trans "Peak" %}</th>
|
|
<th style="text-align: center">{% trans "Burst" %}</th>
|
|
<th style="text-align: center">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for q, att in qos.items %}
|
|
<form method="post" role="form">{% csrf_token %}
|
|
<tr>
|
|
<td><label class="control-label">{{ q | capfirst }}</label></td>
|
|
<td><input id="qos_average" class="form-control" name="qos_average"
|
|
value="{{ att.average|default:'' }}"/></td>
|
|
<td><input id="qos_peak" class="form-control" name="qos_peak"
|
|
value="{{ att.peak|default:'' }}"/></td>
|
|
<td><input id="qos_burst" class="form-control" name="qos_burst"
|
|
value="{{ att.burst|default:'' }}"/></td>
|
|
<td>
|
|
<input name="qos_direction" value="{{ q }}" hidden/>
|
|
<button type="submit" class="btn btn-sm btn-primary"
|
|
name="set_qos" data-toggle="modal"
|
|
title="Edit Qos" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
<i class="glyphicon glyphicon-save"></i>
|
|
</button>
|
|
<button type="submit" class="btn btn-sm btn-danger"
|
|
name="unset_qos"
|
|
title="Delete Qos" onclick="return confirm('{% trans "Are you sure?" %}')">
|
|
<i class="glyphicon glyphicon-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</form>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script>
|
|
$.expr[':'].Contains = $.expr.createPseudo(function (arg) {
|
|
return function (elem) {
|
|
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
|
|
};
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
// add event button labeled "filter"
|
|
$('#filter_button').click(function (event) {
|
|
// get value
|
|
let filter_val = $('#filter_input').val();
|
|
if (filter_val == '') {
|
|
// show all
|
|
$('#ipv4_table tbody tr').show();
|
|
} else {
|
|
// hide non-matching items
|
|
let row_not_contains4 = $('#ipv4_table tbody tr input:not([value*=\'' + filter_val + '\'])');
|
|
row_not_contains4.closest('tr').hide();
|
|
// show only matches
|
|
let row_contains4 = $('#ipv4_table tbody tr input[value*=\'' + filter_val + '\']');
|
|
row_contains4.closest('tr').show();
|
|
}
|
|
});
|
|
// add event button labeled "clear"
|
|
$('#filter_clear').click(function (event) {
|
|
$('#filter_input').val('');
|
|
$('#filter_button').click();
|
|
});
|
|
|
|
// trigger filter when enter key pressed
|
|
$('#filter_input').keyup(function (event) {
|
|
if (event.keyCode == 13) {
|
|
$('#filter_button').click();
|
|
}
|
|
});
|
|
|
|
// add event button labeled "filter"
|
|
$('#filter_button_ipv6').click(function (event) {
|
|
// get value
|
|
let filter_val = $('#filter_input_ipv6').val();
|
|
if (filter_val == '') {
|
|
// show all
|
|
$('#ipv6_table tbody tr').show();
|
|
} else {
|
|
// hide non-matching items
|
|
let row_not_contains6 = $('#ipv6_table tbody tr input:not([value*=\'' + filter_val + '\'])');
|
|
row_not_contains6.closest('tr').hide();
|
|
// show only matches
|
|
let row_contains6 = $('#ipv6_table tbody tr input[value*=\'' + filter_val + '\']');
|
|
row_contains6.closest('tr').show();
|
|
}
|
|
});
|
|
// add event button labeled "clear"
|
|
$('#filter_clear_ipv6').click(function (event) {
|
|
$('#filter_input_ipv6').val('');
|
|
$('#filter_button_ipv6').click();
|
|
});
|
|
|
|
// trigger filter when enter key pressed
|
|
$('#filter_input_ipv6').keyup(function (event) {
|
|
if (event.keyCode == 13) {
|
|
$('#filter_button_ipv6').click();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script src="{% static "js/ace.js" %}"></script>
|
|
<script>
|
|
var editor = ace.edit("edit_editor");
|
|
editor.getSession().setMode("ace/mode/xml");
|
|
|
|
var edit_input = $('input[name="edit_xml"]');
|
|
editor.getSession().on("change", function () {
|
|
edit_input.val(editor.getSession().getValue());
|
|
});
|
|
</script>
|
|
{% endblock %} |