picluster/web/containers-manage.html

474 lines
25 KiB
HTML
Raw Normal View History

2021-08-25 08:44:55 -06:00
<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">&times;</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">&times;</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>