Horizon UI support for Octavia
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

76 lines
2.2 KiB

{% load i18n %}
<noscript><h3>{{ step }}</h3></noscript>
<style>
#target input{
width: auto;
}
</style>
<table id='target' class="table table-bordered table-striped datatable">
<thead><tr><th>From</th><th>protocol</th><th>To</th><th>Action</th></tr></thead>
<tr>
<td>
<input type='text' class='numbers' name='from' />
</td>
<td>
<select name='protocol'>
<option value='http'>HTTP</option>
<option value='https'>HTTPS</option>
<option value='tcp'>TCP</option>
</select>
</td>
<td>
<input type='text' class='numbers' name='to' />
</td>
<td>
<a class='btn btn-small' name='add'>+</a>
</td>
</tr>
</table>
<script>
function encode_lb_rule(from, protocol, to){
return from + ':' + protocol + ',' + to;
}
function generate_lb_rule(from, protocol, to){
var html = "<tr><td>" + from + "</td>" +
"<td>" + protocol + "</td>" +
"<td>" + to + "</td>" +
"<td><a class='btn btn-small btn-danger'>-</a>";
html = $(html);
html.on('click', 'a', function(){
$('option[value="' + encode_lb_rule(from, protocol, to) + '"]').remove();
$(this).closest('tr').remove();
});
return html;
}
horizon.modals.addModalInitFunction(function (modal) {
$("a[name='add']").on('click', function(){
var from = $("input[name='from']").val();
var protocol = $("select[name='protocol']").val();
var to = $("input[name='to']").val();
var encoded = encode_lb_rule(from, protocol, to);
if(from && to && $('option[value="'+encoded+'"]').length == 0){
$('#id_network').append($("<option></option>")
.attr("value", encoded)
.attr("selected", "selected")
.text(encoded));
generate_lb_rule(from, protocol, to).insertBefore($('#target tr:last'));
// clean up
$("input[name='from']").val('');
$("input[name='to']").val('');
}
});
$('input.numbers').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
});
</script>
<div class="hidden">
{% include "horizon/common/_form_fields.html" %}
</div>