167 lines
5.1 KiB
HTML
167 lines
5.1 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script src="/assets/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="/assets/jquery-ui.css">
|
|
<script src="/assets/jquery-ui.js"></script>
|
|
<link rel="stylesheet" href="/assets/picluster-iframe.css">
|
|
<script>
|
|
var option;
|
|
|
|
$.get("/nodes?token=" + parent.token, function(data) {
|
|
for (var i in data.nodes) {
|
|
option += '<option value="' + data.nodes[i] + '">' + data.nodes[i] + '</option>';
|
|
}
|
|
$('#node_list').append(option);
|
|
});
|
|
|
|
function exec() {
|
|
var node_list = document.getElementById("node_list");
|
|
var radio_swarm_create = $('input[id=radio_swarm_create]:checked').val();
|
|
var radio_swarm_remove = $('input[id=radio_swarm_remove]:checked').val();
|
|
var radio_swarm_network = $('input[id=radio_swarm_network]:checked').val();
|
|
var network_name = $('input[id=network-name]').val();
|
|
|
|
var path = radio_swarm_create ? '/swarm-create'
|
|
: radio_swarm_remove ? '/swarm-remove'
|
|
: radio_swarm_network ? '/swarm-network-create'
|
|
: ''
|
|
|
|
var node = radio_swarm_create ? $("#node_list").val()
|
|
: radio_swarm_network ? $("#node_list").val()
|
|
: radio_swarm_remove ? node_list.options[node_list.selectedIndex].value
|
|
: ''
|
|
|
|
$.post(path, {
|
|
token: parent.token,
|
|
host: node,
|
|
network: network_name
|
|
}, function(data) {
|
|
var div = document.getElementById('nodes-manage-modal-body');
|
|
div.innerHTML = 'Sent request to the server. Please check the logs and running containers for updated information.<br>' + data;
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$("input[id$='radio_swarm_create']").click(function() {
|
|
$(this).is(":checked") ? $("#swarm_create").show() : '';
|
|
$(this).is(":checked") ? $("#swarm_remove").hide() : '';
|
|
$(this).is(":checked") ? $("#node_list").show() : '';
|
|
$(this).is(":checked") ? $("#text").show() : '';
|
|
$(this).is(":checked") ? $("#network-name").hide() : '';
|
|
$(this).is(":checked") ? $("#network-name-label").hide() : '';
|
|
})
|
|
|
|
$("input[id$='radio_swarm_remove']").click(function() {
|
|
$(this).is(":checked") ? $("#network-name").hide() : '';
|
|
$(this).is(":checked") ? $("#network-name-label").hide() : '';
|
|
$(this).is(":checked") ? $("#swarm_create").hide() : '';
|
|
$(this).is(":checked") ? $("#swarm_remove").show() : '';
|
|
$(this).is(":checked") ? $("#node_list").hide() : '';
|
|
$(this).is(":checked") ? $("#text").hide() : '';
|
|
})
|
|
|
|
$("input[id$='radio_swarm_network']").click(function() {
|
|
$(this).is(":checked") ? $("#text").show() : '';
|
|
$(this).is(":checked") ? $("#node_list").show() : '';
|
|
$(this).is(":checked") ? $("#swarm_create").hide() : '';
|
|
$(this).is(":checked") ? $("#network-name").show() : '';
|
|
$(this).is(":checked") ? $("#network-name-label").show() : '';
|
|
})
|
|
|
|
$("#swarm_create").hide();
|
|
$("#network-name").hide();
|
|
$("#network-name-label").hide();
|
|
$("#text").hide();
|
|
$("#node_list").hide();
|
|
$("#swarm_remove").hide();
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="modal_container" class="modal">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<span class="close">×</span>
|
|
<h2>Configure Docker Swarm Networking</h2>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<p class="modal-description">
|
|
Setup Docker Swarm to use Virtual Networks
|
|
</p>
|
|
|
|
<fieldset>
|
|
<legend><b>Swarm</b></legend>
|
|
<div id="node_list_action_selector">
|
|
<input type="radio" name="nodes_radio" id="radio_swarm_create">
|
|
<label class="windowfont">Create</label>
|
|
<hr>
|
|
<input type="radio" name="nodes_radio" id="radio_swarm_remove">
|
|
<label class="windowfont">Remove</label>
|
|
<hr>
|
|
<input type="radio" name="nodes_radio" id="radio_swarm_network">
|
|
<label class="windowfont">Network</label>
|
|
<hr>
|
|
<label id="network-name-label" name="network-name-label"><b>Network Name:</b></label>
|
|
<input type="network-name" id="network-name" name="network-name" value="">
|
|
|
|
<label id='text'><b>Master Node:</b></label></p>
|
|
<select name="node_list" id="node_list"></select>
|
|
</div>
|
|
|
|
<div id="swarm_create">
|
|
</div>
|
|
|
|
<div id="swarm_remove">
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div id="submit_button_div">
|
|
<button id="submit_button">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="output" class="modal">
|
|
<div class="modal-content modal-small">
|
|
<div class="modal-header">
|
|
<span class="close">×</span>
|
|
<h2>Command Output</h2>
|
|
</div>
|
|
<div id="nodes-manage-modal-body" class="modal-body">
|
|
Please wait.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</p>
|
|
|
|
<script>
|
|
var span = document.getElementsByClassName("close")[0];
|
|
var modal = document.getElementById('modal_container');
|
|
var output_modal = document.getElementById('output');
|
|
var output_span = document.getElementsByClassName("close")[1];
|
|
var submit_button = document.getElementById("submit_button");
|
|
|
|
span.onclick = function () {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
output_span.onclick = function () {
|
|
output_modal.style.display = "none";
|
|
}
|
|
|
|
submit_button.onclick = function () {
|
|
modal.style.display = "none";
|
|
output_modal.style.display = "block";
|
|
exec();
|
|
}
|
|
|
|
modal.style.display = "block";
|
|
|
|
</script>
|
|
|
|
</html>
|