474 lines
25 KiB
HTML
474 lines
25 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>
|
|
<script src="/assets/distLogo.js"></script>
|
|
<link rel="stylesheet" href="/assets/picluster-iframe.css">
|
|
<script>
|
|
// Populate container_heartbeat_fieldset selection and node_list_add drop down
|
|
$(function() {
|
|
var option = '';
|
|
var checkbox = '';
|
|
var lb_checkbox = '';
|
|
$.get("/nodes?token=" + parent.token, function(data) {
|
|
for (var i in data.nodes) {
|
|
option += '<option value="' + data.nodes[i] + '">' + data.nodes[i] + '</option>';
|
|
checkbox += '<input type="checkbox" name="container_heartbeat_fieldset" class="modal_input" value="' + data.nodes[i] + '" /><label id="windowfont" for="container_heartbeat_fieldset">' + data.nodes[i] + '</label><br>';
|
|
lb_checkbox += '<input type="checkbox" name="container_lb_fieldset" class="modal_input" value="' + data.nodes[i] + '" /><label id="windowfont" for="container_lb_fieldset">' + data.nodes[i] + '</label><br>';
|
|
}
|
|
option += '<option value="' + '*' + '">' + '*' + '</option>';
|
|
$('#node_list_add').append(option);
|
|
$('#node_failover_constraint').append(checkbox);
|
|
$('#loadbalancer_hosts').append(lb_checkbox);
|
|
});
|
|
});
|
|
|
|
// Populate container_list dropdown
|
|
$(function() {
|
|
var option = '';
|
|
if (parent.manage_container) {
|
|
option += '<option value="' + parent.manage_container + '">' + parent.manage_container + '</option>';
|
|
$('#container_list').append(option);
|
|
// document.getElementById("radio_container_modify").click();
|
|
// parent.manage_container = '';
|
|
} else {
|
|
$.get("/nodes?token=" + parent.token, function(data) {
|
|
for (var i in data.container_list) {
|
|
option += '<option value="' + data.container_list[i] + '">' + data.container_list[i] + '</option>';
|
|
}
|
|
option += '<option value="' + '*' + '">' + '*' + '</option>';
|
|
$('#container_list').append(option);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Populate node_list_modify drop down
|
|
$(function() {
|
|
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>';
|
|
}
|
|
option += '<option value="' + '*' + '">' + '*' + '</option>';
|
|
$('#node_list_modify').append(option);
|
|
});
|
|
});
|
|
|
|
function exec() {
|
|
var node_list_add = document.getElementById("node_list_add");
|
|
var container_port = $("#container_port_args").val();
|
|
var service_port = $("#service_port_args").val();
|
|
var node_list_modify = document.getElementById("node_list_modify");
|
|
var container_list = document.getElementById("container_list");
|
|
var node_add = node_list_add.options[node_list_add.selectedIndex].value;
|
|
var node_modify = node_list_modify.options[node_list_modify.selectedIndex].value;
|
|
var container_add = $("#container_name").val();
|
|
var container_modify = container_list.options[container_list.selectedIndex].value;
|
|
var container_add_args = $("#container_args").val() || $("#modify_container_arguments").val();
|
|
var heartbeat_add_args = $("#heartbeat_args").val();
|
|
var container_heartbeat_fieldset = document.getElementsByName('container_heartbeat_fieldset');
|
|
var container_lb_fieldset = document.getElementsByName('container_lb_fieldset');
|
|
var radio_container_add = $('input[id=radio_container_add]:checked').val();
|
|
var radio_container_modify = $('input[id=radio_container_modify]:checked').val();
|
|
var radio_container_arg_modify = $('input[id=radio_modify_args]:checked').val();
|
|
var radio_commit = $('input[id=radio_commit]:checked').val();
|
|
var radio_start = $('input[id=radio_start]:checked').val();
|
|
var radio_loadbalancer = $('input[id=radio_modify_loadbalancer]:checked').val();
|
|
var radio_stop = $('input[id=radio_stop]:checked').val();
|
|
var radio_restart = $('input[id=radio_restart]:checked').val();
|
|
var radio_delete = $('input[id=radio_delete]:checked').val();
|
|
var radio_create = $('input[id=radio_create]:checked').val();
|
|
var radio_modify_constraints = $('input[id=radio_modify_constraints]:checked').val();
|
|
var radio_container_log = $('input[id=radio_container_log]:checked').val();
|
|
var radio_change_host = $('input[id=radio_change_host]:checked').val();
|
|
var radio_remove_container_config = $('input[id=radio_remove_container_config]:checked').val();
|
|
var command;
|
|
var path;
|
|
var failover_constraints = 'none';
|
|
var lb_hosts = 'none';
|
|
var operation;
|
|
|
|
if (radio_container_modify) {
|
|
if (radio_container_modify.indexOf('on') > -1 && heartbeat_add_args.length === 0) {
|
|
heartbeat_add_args = 'delete'
|
|
}
|
|
}
|
|
container_heartbeat_fieldset.forEach(function(node, i) {
|
|
if (container_heartbeat_fieldset[i].checked) {
|
|
failover_constraints += ',' + node.value;
|
|
}
|
|
});
|
|
|
|
container_lb_fieldset.forEach(function(node, i) {
|
|
if (container_lb_fieldset[i].checked) {
|
|
lb_hosts += ',' + node.value;
|
|
}
|
|
});
|
|
|
|
if (failover_constraints.indexOf('none,') > -1) {
|
|
failover_constraints = failover_constraints.replace('none,', '');
|
|
}
|
|
|
|
if (lb_hosts.indexOf('none,') > -1) {
|
|
lb_hosts = lb_hosts.replace('none,', '');
|
|
}
|
|
|
|
if (radio_start) {
|
|
operation = 'start';
|
|
}
|
|
if (radio_stop) {
|
|
operation = 'stop';
|
|
}
|
|
if (radio_restart) {
|
|
operation = 'restart';
|
|
}
|
|
if (radio_delete) {
|
|
operation = 'rm';
|
|
}
|
|
if (radio_commit) {
|
|
operation = 'commit';
|
|
}
|
|
if (radio_container_log) {
|
|
operation = 'logs';
|
|
}
|
|
if (radio_create) {
|
|
operation = 'create';
|
|
}
|
|
if (radio_loadbalancer) {
|
|
operation = 'loadbalancer';
|
|
}
|
|
|
|
path = radio_container_add && radio_container_add.indexOf('on') > -1 ? '/addcontainer' :
|
|
radio_start && radio_start.indexOf('on') > -1 ? '/manage' :
|
|
radio_stop && radio_stop.indexOf('on') > -1 ? '/manage' :
|
|
radio_restart && radio_restart.indexOf('on') > -1 ? '/manage' :
|
|
radio_container_arg_modify && radio_container_arg_modify.indexOf('on') > -1 ? '/update-container' :
|
|
radio_modify_constraints && radio_modify_constraints.indexOf('on') > -1 ? '/update-container' :
|
|
radio_commit && radio_commit.indexOf('on') > -1 ? '/manage' :
|
|
radio_delete && radio_delete.indexOf('on') > -1 ? '/manage' :
|
|
radio_loadbalancer && radio_loadbalancer.indexOf('on') > -1 ? '/lb' :
|
|
radio_create && radio_create.indexOf('on') > -1 ? '/manage' :
|
|
radio_container_log && radio_container_log.indexOf('on') > -1 ? '/manage' :
|
|
radio_change_host && radio_change_host.indexOf('on') > -1 ? '/changehost' :
|
|
radio_remove_container_config && radio_remove_container_config.indexOf('on') > -1 ? '/removecontainerconfig' :
|
|
''
|
|
|
|
if (path) {
|
|
if ((radio_change_host) && (container_modify.indexOf('*') > -1) || (radio_remove_container_config) && (container_modify.indexOf('*') > -1)) {
|
|
alert('\nError: You cannot control all of these containers at once for chosen action.');
|
|
output_modal.style.display = "none";
|
|
modal.style.display = "block";
|
|
} else if (radio_container_add) {
|
|
$.post(path, {
|
|
token: parent.token,
|
|
container: container_add,
|
|
host: node_add,
|
|
container_args: container_add_args,
|
|
heartbeat_args: heartbeat_add_args,
|
|
failover_constraints: container_add + ',' + failover_constraints
|
|
}, function(data) {
|
|
var div = document.getElementById('containers-manage-modal-body');
|
|
div.innerHTML = '<br>Sent request to server.<br><br>' + data;
|
|
});
|
|
} else if (radio_commit || radio_start || radio_stop || radio_restart || radio_delete || radio_create || radio_container_log || radio_remove_container_config || radio_change_host || radio_container_arg_modify || radio_modify_constraints || radio_loadbalancer) {
|
|
$.post(path, {
|
|
token: parent.token,
|
|
operation,
|
|
command: command,
|
|
container_args: container_add_args,
|
|
container: container_modify,
|
|
service_port: service_port,
|
|
container_port: container_port,
|
|
lb_hosts: container_modify + ',' + lb_hosts,
|
|
heartbeat_args: heartbeat_add_args,
|
|
failover_constraints: container_modify + ',' + failover_constraints,
|
|
newhost: node_modify
|
|
}, function(data) {
|
|
var div = document.getElementById('containers-manage-modal-body');
|
|
div.innerHTML = '<br>Sent request to server.<br><br>' + data.replace(/(?:\r\n|\r|\n)/g, '<br />');
|
|
});
|
|
} else {
|
|
alert('Error, you did not select an operation.')
|
|
output_modal.style.display = "none";
|
|
modal.style.display = "block";
|
|
}
|
|
}
|
|
}
|
|
|
|
function get_container_info() {
|
|
$.get("/getconfig?token=" + parent.token, function(data) {
|
|
var check_data = JSON.parse(data);
|
|
Object.keys(check_data.hb).forEach((get_node, i) => {
|
|
Object.keys(check_data.hb[i]).forEach(key => {
|
|
if (key.indexOf(document.getElementById("container_list").value) > -1) {
|
|
$('#heartbeat_args').val(check_data.hb[i][document.getElementById("container_list").options[document.getElementById("container_list").selectedIndex].value]);
|
|
};
|
|
});
|
|
});
|
|
|
|
Object.keys(check_data.layout).forEach((get_node, i) => {
|
|
Object.keys(check_data.layout[i]).forEach(key => {
|
|
if (key.indexOf(document.getElementById("container_list").value) > -1) {
|
|
$('#modify_container_arguments').val(check_data.layout[i][document.getElementById("container_list").options[document.getElementById("container_list").selectedIndex].value]);
|
|
};
|
|
});
|
|
});
|
|
|
|
var container_heartbeat_fieldset = document.getElementsByName('container_heartbeat_fieldset');
|
|
Object.keys(check_data.container_host_constraints).forEach((get_node, i) => {
|
|
Object.keys(check_data.container_host_constraints[i]).forEach(key => {
|
|
const analyze = check_data.container_host_constraints[i][key].split(',');
|
|
if (document.getElementById("container_list").value.indexOf(analyze[0]) > -1) {
|
|
|
|
container_heartbeat_fieldset.forEach(function(node, z) {
|
|
var current = container_heartbeat_fieldset[z].value;
|
|
|
|
if (analyze.indexOf(current) > -1) {
|
|
container_heartbeat_fieldset[z].click();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
var container_lb_fieldset = document.getElementsByName('container_lb_fieldset');
|
|
Object.keys(check_data.loadbalancer).forEach((get_node, i) => {
|
|
Object.keys(check_data.loadbalancer[i]).forEach(key => {
|
|
const analyze = check_data.loadbalancer[i][key].split(',');
|
|
if (document.getElementById("container_list").value.indexOf(analyze[0]) > -1) {
|
|
|
|
container_lb_fieldset.forEach(function(node, z) {
|
|
var current = container_lb_fieldset[z].value;
|
|
|
|
if (analyze.indexOf(current) > -1) {
|
|
container_lb_fieldset[z].click();
|
|
var container_port = document.getElementById("container_port_args");
|
|
var service_port = document.getElementById("service_port_args");
|
|
container_port.value = analyze[analyze.length - 2];
|
|
service_port.value = analyze[analyze.length - 1];
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
};
|
|
$(document).ready(function() {
|
|
$("input[id$='radio_container_add']").click(function() {
|
|
$("#container_list_options_fieldset").show();
|
|
$(this).is(":checked") ? $("#container_list_add").show() : '';
|
|
$(this).is(":checked") ? $("#container_list_add_options").show() : '';
|
|
$(this).is(":checked") ? $("#container_list_modify").hide() : '';
|
|
$(this).is(":checked") ? $("#container_list_modify_options").hide() : '';
|
|
})
|
|
|
|
$("input[id$='radio_modify_constraints']").click(function() {
|
|
$(this).is(":checked") ? $("#loadbalancer_hosts").hide() : '';
|
|
$(this).is(":checked") ? $("#container_list_modify_options").hide() : '';
|
|
$(this).is(":checked") ? $("#loadbalancer_hosts_label").hide() : '';
|
|
$(this).is(":checked") ? $("#container_list_add_options").show() : '';
|
|
get_container_info();
|
|
});
|
|
|
|
$("input[id$='radio_modify_loadbalancer']").click(function() {
|
|
$(this).is(":checked") ? $("#container_list_modify_options").hide() : '';
|
|
$(this).is(":checked") ? $('#loadbalancer_hosts').show() : '';
|
|
$(this).is(":checked") ? $('#loadbalancer_hosts_label').show() : '';
|
|
$(this).is(":checked") ? $("#container_port").show() : '';
|
|
$(this).is(":checked") ? $("#container_port_args").show() : '';
|
|
$(this).is(":checked") ? $("#service_port").show() : '';
|
|
$(this).is(":checked") ? $("#service_port_args").show() : '';
|
|
$(this).is(":checked") ? $("#loadbalancer_options").show() : '';
|
|
get_container_info();
|
|
});
|
|
|
|
$("input[id$='radio_modify_args']").click(function() {
|
|
get_container_info();
|
|
});
|
|
|
|
$("input[id$='radio_container_modify']").click(function() {
|
|
$("#container_list_options_fieldset").show();
|
|
$(this).is(":checked") ? $("loadbalancer_hosts").hide() : '';
|
|
$(this).is(":checked") ? $("#service_port_args").hide() : '';
|
|
$(this).is(":checked") ? $("#service_port").hide() : '';
|
|
$(this).is(":checked") ? $("#container_list_add").hide() : '';
|
|
$(this).is(":checked") ? $("#container_list_add_options").hide() : '';
|
|
$(this).is(":checked") ? $("#container_list_modify").show() : '';
|
|
$(this).is(":checked") ? $("#container_list_modify_options").show() : '';
|
|
$(this).is(":checked") ? $("#loadbalancer_hosts_label").hide() : '';
|
|
$(this).is(":checked") ? $("#container_port_label").hide() : '';
|
|
$(this).is(":checked") ? $("#loadbalancer_hosts").hide() : '';
|
|
$(this).is(":checked") ? $("#container_port_args").hide() : '';
|
|
$(this).is(":checked") ? $("#container_port_label").hide() : '';
|
|
})
|
|
|
|
$("#container_list_options_fieldset").hide();
|
|
$("#container_list_add").hide();
|
|
$("#container_list_add_options").hide();
|
|
$("#container_list_modify").hide();
|
|
$("#container_list_modify_options").hide();
|
|
$("#container_port").hide();
|
|
$("#container_port_args").hide();
|
|
$("#service_port").hide();
|
|
$("#service_port_args").hide();
|
|
$('#loadbalancer_hosts').hide();
|
|
$('#container_lb_fieldset').hide();
|
|
});
|
|
</script>
|
|
<script>
|
|
$(function() {
|
|
var option = '';
|
|
if (parent.manage_container) {
|
|
document.getElementById("radio_container_modify").click();
|
|
parent.manage_container = '';
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="modal_container" class="modal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<span class="close">×</span>
|
|
<h2>Manage Containers</h2>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<fieldset id="container_list_fieldset">
|
|
<legend><b>Container</b></legend>
|
|
<div id="container_list_action_selector">
|
|
<input type="radio" name="container_radio" id="radio_container_add">
|
|
<label class="windowfont">Add</label>
|
|
<hr>
|
|
<input type="radio" name="container_radio" id="radio_container_modify">
|
|
<label class="windowfont">Modify</label>
|
|
</div>
|
|
|
|
<div id="container_list_add">
|
|
<label class="windowfont">Name</label>
|
|
<input type="text" size="15" id="container_name" class="modal_input" name="container_name" value=""></font>
|
|
<br>
|
|
<label class="windowfont">Args</label>
|
|
<input type="text" size="25" id="container_args" class="modal_input" name="container_args" value=""></font>
|
|
<br>
|
|
<label class="windowfont">Deploy on</label>
|
|
<select name="node_list_add" id="node_list_add"></select>
|
|
</div>
|
|
|
|
<div id="container_list_modify">
|
|
<label class="windowfont">Container</label>
|
|
<select name="container_list" id="container_list"></select>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset name="options" id="container_list_options_fieldset">
|
|
<legend><b>Options</b></legend>
|
|
|
|
<div id="container_list_add_options">
|
|
<label id="heartbeat-port" class="windowfont">Heartbeat Port</label>
|
|
<input type="text" size="5" id="heartbeat_args" class="modal_input" name="heartbeat_args" value="">
|
|
<br>
|
|
<div id="node_failover_constraint">
|
|
<label id="failover_constraints_label" class="windowfont">Node Failover Constraints <i>(Optional)</i></label><br>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loadbalancer_options">
|
|
<div id="loadbalancer_hosts">
|
|
<label id="loadbalancer_hosts_label" class="windowfont">Select Nodes for the Load Balancer</label><br>
|
|
<br>
|
|
</div>
|
|
<br>
|
|
<label id="service_port" class="windowfont">Service Port</label>
|
|
<input type="text" size="5" id="service_port_args" class="modal_input" name="service_port_args" value="">
|
|
<label id="container_port" class="windowfont">Container Port</label>
|
|
<input type="text" size="5" id="container_port_args" class="modal_input" name="container_port_args" value="">
|
|
</div>
|
|
<div id="container_list_modify_options">
|
|
<input type="radio" name="options_radio" id="radio_start">
|
|
<label for="radio_start">Start</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_stop">
|
|
<label for="radio_stop">Stop</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_restart">
|
|
<label for="radio_restart">Restart</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_delete">
|
|
<label for="radio_delete">Delete</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_create">
|
|
<label for="radio_create">Create and Run</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_container_log">
|
|
<label for="radio_container_log">View Logs</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_remove_container_config">
|
|
<label for="radio_remove_container_config">Remove Config</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_commit">
|
|
<label for="radio_commit">Commit Image</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_change_host">
|
|
<label for="radio_change_host">Change Node to</label>
|
|
<select name="node_list_modify" id="node_list_modify"></select>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_modify_constraints">
|
|
<label for="radio_modify_constraints">Change/Set Heartbeat/Failover Constraints</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_modify_loadbalancer">
|
|
<label for="radio_modify_loadbalancer">Configure Load Balancer</label>
|
|
<br>
|
|
<input type="radio" name="options_radio" id="radio_modify_args">
|
|
<label for="radio_modify_args">Change Container Arguments</label>
|
|
<input type="text" style="height:20px" size="50" id="modify_container_arguments" class="modal_input" name="modify_container_arguments" value=""></font>
|
|
</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-large">
|
|
<div class="modal-header">
|
|
<span class="close">×</span>
|
|
<h2>Command Output</h2>
|
|
</div>
|
|
|
|
<div id="containers-manage-modal-body" class="modal-body">
|
|
Please wait.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var modal = document.getElementById('modal_container');
|
|
var span = document.getElementsByClassName("close")[0];
|
|
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> |