359 lines
No EOL
14 KiB
HTML
359 lines
No EOL
14 KiB
HTML
{% extends "base_logged.html" %}
|
|
{% block head %}
|
|
<script type="text/javascript" src="yaml.js"></script>
|
|
{% endblock %}
|
|
{% block page %}
|
|
<div id="page-wrapper">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1>Module <small>Firewalld</small></h1>
|
|
<ol class="breadcrumb">
|
|
<li><a href="{{ url_for('index') }}"><i class="fa fa-dashboard"></i> SaltPad</a></li>
|
|
<li class="active"><i class="fa fa-check-square"></i> Role {{ role }}</li>
|
|
</ol>
|
|
</div>
|
|
</div><!-- /.row -->
|
|
|
|
{{firewalld["firewalld"].update(base_zone={})}}
|
|
<div class="row" id="main">
|
|
<button type="button" onclick="save();" class="btn btn-default">Save Firewalld for {{ role }}</button><br />
|
|
<select id="select_zone" onChange="show()">
|
|
{% for zone in firewalld["firewalld"] %}
|
|
{% if zone != "base_zone" %}
|
|
<option value="{{ zone }}" id="zone_{{ zone }}">{{ zone }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
<button type="button" onclick="remZone();" class="btn btn-default">delete zone</button><br />
|
|
<input type="text" name="zone" id="zone_add"/>
|
|
<button type="button" onclick="addZone();" class="btn btn-default">add zone</button>
|
|
|
|
{% for zone in firewalld["firewalld"] %}
|
|
<div class="zone" id="{{ zone }}">
|
|
<!-- add description -->
|
|
<div class="col-lg-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover tablesorter" id="maintainers">
|
|
<thead>
|
|
<tr>
|
|
<th>Source</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ zone }}_source_table_body">
|
|
{% if firewalld["firewalld"][zone] is defined %}
|
|
{% for source in firewalld["firewalld"][zone]["source"] %}
|
|
<tr id="{{ zone }}_source_{{ source }}">
|
|
<td>{{ source }}</td>
|
|
<td><button type="button" onclick="remValue('source','{{ source }}');" class="btn btn-default">remove {{ source }}</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<input type="text" name="source" id="{{ zone }}_source_add"/>
|
|
<button type="button" onclick="addValue('source');" class="btn btn-default">add source</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover tablesorter" id="maintainers">
|
|
<thead>
|
|
<tr>
|
|
<th>Service</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ zone }}_service_table_body">
|
|
{% if firewalld["firewalld"][zone] is defined %}
|
|
{% for service in firewalld["firewalld"][zone]["service"] %}
|
|
<tr id="{{ zone }}_service_{{ service }}">
|
|
<td>{{ service }}</td>
|
|
<td><button type="button" onclick="remValue('service','{{ service }}');" class="btn btn-default">remove {{ service }}</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<input type="text" name="service" id="{{ zone }}_service_add"/>
|
|
<button type="button" onclick="addValue('service');" class="btn btn-default">add service</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-12">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover tablesorter" id="maintainers">
|
|
<thead>
|
|
<tr>
|
|
<th>Port</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ zone }}_port_table_body">
|
|
{% if firewalld["firewalld"][zone] is defined %}
|
|
{% for source in firewalld["firewalld"][zone]["port"] %}
|
|
<tr id="{{ zone }}_port_{{ port }}">
|
|
<td>{{ port }}</td>
|
|
<td><button type="button" onclick="remValue('port','{{ port }}');" class="btn btn-default">remove {{ port }}</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<input type="text" name="port" id="{{ zone }}_port_add"/>
|
|
<button type="button" onclick="addValue('port');" class="btn btn-default">add port</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12">
|
|
<h2>Custom Rules</h2></br>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover tablesorter" id="maintainers">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Source</th>
|
|
<th>Port</th>
|
|
<th>Action</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ zone }}_rule_table_body">
|
|
{% if firewalld["firewalld"][zone] is defined %}
|
|
{% for rule in firewalld["firewalld"][zone]["rule"] %}
|
|
<tr id="{{ zone }}_rule_{{ rule }}">
|
|
<td>{{ rule }}</td>
|
|
<td>{{ firewalld["firewalld"][zone]["rule"][rule]["source"] }}</td>
|
|
<td>{{ firewalld["firewalld"][zone]["rule"][rule]["port"] }}</td>
|
|
<td>{{ firewalld["firewalld"][zone]["rule"][rule]["action"] }}</td>
|
|
<td><button type="button" onclick="remValue('rule','{{ rule }}');" class="btn btn-default">remove {{ rule }}</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
Name: <input type="text" name="rule" id="{{ zone }}_rule_add_name"/>
|
|
Source: <input type="text" name="rule" id="{{ zone }}_rule_add_source"/>
|
|
Port: <input type="text" name="rule" id="{{ zone }}_rule_add_port"/>
|
|
Action: <input type="text" name="rule" id="{{ zone }}_rule_add_action"/>
|
|
<button type="button" onclick="addValue('rule');" class="btn btn-default">add rule</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-12">
|
|
<h2>Include</h2>
|
|
<h3>include data from other zones to avoid rewriting it</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover tablesorter" id="maintainers">
|
|
<thead>
|
|
<tr>
|
|
<th>Zone</th>
|
|
<th>Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="{{ zone }}_include_table_body">
|
|
{% if firewalld["firewalld"][zone] is defined %}
|
|
{% for include in firewalld["firewalld"][zone]["include"] %}
|
|
<tr id="{{ zone }}_include_{{ include }}">
|
|
<td>{{ include }}</td>
|
|
<td><button type="button" onclick="remValue('include','{{ include }}');" class="btn btn-default">remove {{ include }}</button></td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<input type="text" name="include" id="{{ zone }}_include_add"/>
|
|
<button type="button" onclick="addValue('include');" class="btn btn-default">add include</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<button type="button" onclick="save();" class="btn btn-default">Save Firewalld for {{ role }}</button>
|
|
</div><!-- /.row -->
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script type="text/javascript">
|
|
//build javascipt data from jinja data
|
|
var data = {{ firewalld | safe }};
|
|
delete data["firewalld"]["base_zone"];
|
|
console.log(data);
|
|
|
|
function addZone(){
|
|
var zone = document.getElementById("zone_add").value;
|
|
data["firewalld"][zone]={};
|
|
var zone_cmb = document.getElementById("select_zone");
|
|
var option = document.createElement("option");
|
|
option.text = zone;
|
|
option.value = zone;
|
|
option.id = "zone_"+zone;
|
|
|
|
//clone base_zone into new zone div
|
|
var main = document.getElementById("main");
|
|
var zonediv = document.getElementById("base_zone").cloneNode(true);
|
|
zonediv.setAttribute('id', zone);
|
|
zonediv.querySelector("#base_zone_source_table_body").setAttribute('id',zone+"_source_table_body");
|
|
zonediv.querySelector("#base_zone_source_add").setAttribute('id',zone+"_source_add");
|
|
zonediv.querySelector("#base_zone_service_table_body").setAttribute('id',zone+"_service_table_body");
|
|
zonediv.querySelector("#base_zone_service_add").setAttribute('id',zone+"_service_add");
|
|
zonediv.querySelector("#base_zone_port_table_body").setAttribute('id',zone+"_port_table_body");
|
|
zonediv.querySelector("#base_zone_port_add").setAttribute('id',zone+"_port_add");
|
|
zonediv.querySelector("#base_zone_rule_table_body").setAttribute('id',zone+"_rule_table_body");
|
|
zonediv.querySelector("#base_zone_rule_add_name").setAttribute('id',zone+"_rule_add_name");
|
|
zonediv.querySelector("#base_zone_rule_add_source").setAttribute('id',zone+"_rule_add_source");
|
|
zonediv.querySelector("#base_zone_rule_add_port").setAttribute('id',zone+"_rule_add_port");
|
|
zonediv.querySelector("#base_zone_rule_add_action").setAttribute('id',zone+"_rule_add_action");
|
|
zonediv.querySelector("#base_zone_include_table_body").setAttribute('id',zone+"_include_table_body");
|
|
zonediv.querySelector("#base_zone_include_add").setAttribute('id',zone+"_include_add");
|
|
try{
|
|
zone_cmb.appendChild(option,null);//Standard
|
|
main.appendChild(zonediv,null);
|
|
}catch(error){
|
|
zone_cmb.appendChild(option);//IE only
|
|
main.appendChild(zonediv);
|
|
}
|
|
console.log(data);
|
|
}
|
|
function remZone(){
|
|
var zone = document.getElementById("select_zone").value;
|
|
delete data["firewalld"][zone];
|
|
document.getElementById("zone_"+zone).remove();
|
|
document.getElementById(zone).remove();
|
|
show();
|
|
console.log(data);
|
|
}
|
|
|
|
//add value to source, service, port or include
|
|
function addValue(type){
|
|
var zone = document.getElementById("select_zone").value;
|
|
var tbody = document.getElementById(zone+"_"+type+"_table_body");
|
|
var tr = document.createElement('tr');
|
|
if (type != "rule"){
|
|
var value = document.getElementById(zone+"_"+type+"_add").value;
|
|
tr.id=zone+"_"+type+"_"+value;
|
|
var tdv = document.createElement('td');
|
|
tdv.appendChild(document.createTextNode(value));
|
|
var tdr = document.createElement('td');
|
|
var btn = document.createElement('button');
|
|
btn.setAttribute("class", "btn btn-default");
|
|
btn.setAttribute("onclick", "remValue('"+type+"','"+value+"');");
|
|
btn.setAttribute("type", "button");
|
|
btn.appendChild(document.createTextNode("remove "+value));
|
|
if(data["firewalld"][zone][type] == null)
|
|
data["firewalld"][zone][type]=[];
|
|
data["firewalld"][zone][type].push(value);
|
|
try{
|
|
tr.appendChild(tdv,null);//Standard
|
|
tdr.appendChild(btn,null);//Standard
|
|
tr.appendChild(tdr,null);//Standard
|
|
}catch(error){
|
|
tr.appendChild(tdv);//Standard
|
|
tdr.appendChild(btn);//Standard
|
|
tr.appendChild(tdr);//Standard
|
|
}
|
|
}else{
|
|
var name = document.getElementById(zone+"_rule_add_name").value;
|
|
var src = document.getElementById(zone+"_rule_add_source").value;
|
|
var port = document.getElementById(zone+"_rule_add_port").value;
|
|
var action = document.getElementById(zone+"_rule_add_action").value;
|
|
|
|
tr.id=zone+"_"+type+"_"+name;
|
|
var tdn = document.createElement('td');
|
|
tdn.appendChild(document.createTextNode(name));
|
|
var tds = document.createElement('td');
|
|
tds.appendChild(document.createTextNode(src));
|
|
var tdp = document.createElement('td');
|
|
tdp.appendChild(document.createTextNode(port));
|
|
var tda = document.createElement('td');
|
|
tda.appendChild(document.createTextNode(action));
|
|
var tdr = document.createElement('td');
|
|
var btn = document.createElement('button');
|
|
btn.setAttribute("class", "btn btn-default");
|
|
btn.setAttribute("onclick", "remValue('"+type+"','"+name+"');");
|
|
btn.setAttribute("type", "button");
|
|
btn.appendChild(document.createTextNode("remove "+name));
|
|
|
|
if(data["firewalld"][zone][type] == null)
|
|
data["firewalld"][zone][type]={};
|
|
data["firewalld"][zone][type][name]={};
|
|
data["firewalld"][zone][type][name]["source"]=src;
|
|
data["firewalld"][zone][type][name]["port"]=port;
|
|
data["firewalld"][zone][type][name]["action"]=action;
|
|
|
|
try{
|
|
tr.appendChild(tdn,null);//Standard
|
|
tr.appendChild(tds,null);
|
|
tr.appendChild(tdp,null);
|
|
tr.appendChild(tda,null);
|
|
tdr.appendChild(btn,null);
|
|
tr.appendChild(tdr,null);
|
|
}catch(error){
|
|
tr.appendChild(tdn);//IE Only
|
|
tr.appendChild(tds);
|
|
tr.appendChild(tdp);
|
|
tr.appendChild(tda);
|
|
tdr.appendChild(btn);
|
|
tr.appendChild(tdr);
|
|
}
|
|
}
|
|
try{
|
|
tbody.appendChild(tr,null);//Standard
|
|
}catch(error){
|
|
tbody.appendChild(tr);//IE Only
|
|
}
|
|
console.log(data);
|
|
}
|
|
//add value from source, service, port, rule or include
|
|
function remValue(type,value){
|
|
var zone = document.getElementById("select_zone").value;
|
|
//remove from data
|
|
if(type != "rule"){
|
|
index = data["firewalld"][zone][type].indexOf(value)
|
|
if(index != -1)
|
|
data["firewalld"][zone][type].splice(index,1);
|
|
}else{
|
|
delete data["firewalld"][zone][type][value];
|
|
}
|
|
//remove from document
|
|
console.log(zone+"_"+type+"_"+value);
|
|
document.getElementById(zone+"_"+type+"_"+value).remove();
|
|
console.log(data);
|
|
}
|
|
|
|
function save(){
|
|
jstr = JSON.stringify(data);
|
|
var request = new XMLHttpRequest();
|
|
request.open('POST', '{{ url_for('firewalld_save',role=role) }}', true);
|
|
request.setRequestHeader('Content-Type', 'application/json');
|
|
request.send(jstr);
|
|
//convert data to yaml w/ tabspace of 2 and depth of 20 (should be greater then max depth)
|
|
console.log(jstr);
|
|
}
|
|
|
|
function show(){
|
|
console.log("hiding");
|
|
elements = document.getElementsByClassName("zone");
|
|
for (var i = 0; i < elements.length; i++) {
|
|
elements[i].style.display = "none";
|
|
}
|
|
console.log("showing");
|
|
document.getElementById(document.getElementById("select_zone").value).style.display="block";
|
|
}
|
|
show();
|
|
</script>
|
|
{% endblock %} |