picluster/web/index.html

352 lines
13 KiB
HTML
Raw Permalink Normal View History

2021-08-25 08:44:55 -06:00
<html>
<head>
<title>PiCluster Web Console</title>
<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-ui.css">
<script src="/assets/moment.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png">
<link rel="manifest" href="/assets/images/manifest.json">
<link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script>
var manage_container = '';
var manage_image = '';
var manage_function = '';
var manage_function_uuid = '';
var token = '';
function clear(callback) {
var iframe = document.getElementById('iframe_a').contentWindow.document;
iframe.write('<html>');
iframe.close();
callback();
}
/**
function build_doc_links() {
var output = '';
$.get("/listdocs", function(doc_list) {
for (var i in doc_list) {
output += "$('#doc'" + i + ").click(function() { $('iframe_a').attr('src', '/docs.html?doc_id=doc'" + i + ") });";
}
});
return output;
}
function build_docs_nav_menu() {
var output = '';
output += '<ul class="dropdown">';
$.get("/listdocs", function(doc_list) {
for (var i in doc_list) {
var doc_id = "doc" + i;
$("<li><a href='#' id='" + doc_id + "' onclick='stinky_linker(\"" + doc_id + "\")'>" + doc_list[i] + "</a></li>").appendTo("#nav_docs > ul");
}
});
output += '</ul>';
$('#nav_docs').append(output);
}
function stinky_linker(doc_id) {
$('#iframe_a').attr('src', '/docs.html?doc_id=' + doc_id);
}
**/
function initialize_iframe_height() {
document.getElementById("div_iframe").style.height = document.getElementById("iframe_a").contentWindow
.document.body.scrollHeight + "px";
}
function resize_iframe_height(iframe) {
document.getElementById("div_iframe").style.height = "calc(100% - 4vw)";
}
$(document).ready(function () {
$('#exec').click(function () {
$('#iframe_a').attr('src', '/exec.html?token=' + token);
});
$('#terminal').click(function () {
$('#iframe_a').attr('src', '/terminal.html?token=' + token);
});
$('#images-layout').click(function () {
$('#iframe_a').attr('src', '/images-layout.html');
});
$('#syslog').click(function () {
$('#iframe_a').attr('src', '/syslog.html');
});
$('#monitoring').click(function () {
$('#iframe_a').attr('src', '/monitoring.html?token=' + token);
});
$('#elasticsearch-config').click(function () {
$('#iframe_a').attr('src', '/elasticsearch.html?token=' + token);
});
$('#functions-viewer').click(function () {
$('#iframe_a').attr('src', '/functions-viewer.html');
});
$('#functions-create').click(function () {
$('#iframe_a').attr('src', '/functions-create.html');
});
$('#functions-remove').click(function () {
$('#iframe_a').attr('src', '/functions-clear.html');
});
$('#functions-current').click(function () {
$('#iframe_a').attr('src', '/functions-current.html');
});
$('#rsyslog').click(function () {
$('#iframe_a').attr('src', '/rsyslog.html');
});
$('#nodes-list').click(function () {
$('#iframe_a').attr('src', '/nodes-list.html');
});
$('#containers-layout').click(function () {
$('#iframe_a').attr('src', '/containers-layout.html');
});
$('#containers-add').click(function () {
$('#iframe_a').attr('src', '/containers-add.html');
});
$('#node-add').click(function () {
$('#iframe_a').attr('src', '/nodes-add.html');
});
$('#node-remove').click(function () {
$('#iframe_a').attr('src', '/nodes-remove.html');
});
$('#node-manage').click(function () {
$('#iframe_a').attr('src', '/nodes-manage.html');
});
$('#swarm').click(function () {
$('#iframe_a').attr('src', '/swarm.html');
});
$('#config-edit').click(function () {
$('#iframe_a').attr('src', '/config-edit.html?token=' + token);
});
$('#hosts-edit').click(function () {
$('#iframe_a').attr('src', '/hosts-edit.html?token=' + token);
});
$('#log').click(function () {
$('#iframe_a').attr('src', '/log.html');
});
$('#heartbeat').click(function () {
$('#iframe_a').attr('src', '/heartbeat.html');
});
//$('#docs').click(function() {
// $('#iframe_a').attr('src', '/docs.html');
// });
$('#images-upload').click(function () {
$('#iframe_a').attr('src', '/images-upload.html');
});
$('#images-pull').click(function () {
$('#iframe_a').attr('src', '/images-pull.html');
});
$('#images-manage').click(function () {
$('#iframe_a').attr('src', '/images-manage.html');
});
$('#containers-manage').click(function () {
$('#iframe_a').attr('src', '/containers-manage.html');
});
$('#images-prune').click(function () {
$('#iframe_a').attr('src', '/images-prune.html');
});
$('#terminal').click(function () {
$('#iframe_a').attr('src', '/terminal.html');
});
//$('#doc1').click(function() {
// $('#iframe_a').attr('src', '/docs.html?doc_id=doc1');
//});
//build_doc_links();
});
$("html").click(function () {
$(".dropdown").hide();
});
$("nav ul li a:not(:only-child)").click(function (e) {
$(this).siblings(".dropdown").toggle();
$(".dropdown").not($(this).siblings()).hide();
e.stopPropagation();
});
function hideshow(id) {
var element = document.getElementById(id);
element.style.display = element.style.display == 'block' ? 'none' : 'block';
}
$(function () {
hideshow('menu');
hideshow('content');
hideshow('menu');
hideshow('content');
});
function getToken() {
return token;
}
function getVersion() {
return version;
}
function login() {
var username = document.getElementById("user").value;;
var password = document.getElementById("password").value;
$.post("/", {
username: username,
password: password
}, function (auth) {
token = auth.token ? (
hideshow('login'),
hideshow('login'),
hideshow('menu'),
hideshow('content'),
auth.token
) : (
alert('Access Denied!'),
hideshow('login')
)
});
}
</script>
</head>
<body>
<div id="login" class="modal-login">
<div class="modal-login-content">
<div class="modal-login-header">
<span class="close">&times;</span>
<label id="version" name="version"></label>
</div>
<div class="modal-login-body">
<div>
<img src="/logo.png" height="250" width="200">
<br><label>Please login to continue<label>
<br>
<div>
<input type="text" style="width: 250px;" id="user" name="username">
<br>
<input type="password" style="width: 250px;" size="18" id="password" name="password">
<br>
<br>
<button id="submit_button">Connect</button>
<br>
</div>
</div>
</div>
</div>
</div>
<div id="menu">
<nav>
<ul>
<li id="nav_logo"><a href='/blank.html' target="iframe_a" id="logo"><img src="/assets/images/sphere.png"
id="nav_logo_image"></a>
<li id="nav_system"><a onmouseover="this.click()" href="#!">Nodes</a>
<ul class="dropdown">
<li><a href="#" id="nodes-list">List</a></li>
<li><a href="#" id="node-manage">Manage</a></li>
<li><a href="#" id="swarm">Swarm Setup</a></li>
</ul>
</li>
<li id="nav_containers"><a onmouseover="this.click()" href="#!">Containers</a>
<ul class="dropdown">
<li><a href="#" id="containers-layout">List</a></li>
<li><a href="#" id="containers-manage">Manage</a></li>
</ul>
</li>
<li id="nav_images"><a onmouseover="this.click()" href="#!">Images</a>
<ul class="dropdown">
<li><a href="#" id="images-layout">List</a></li>
<li><a href="#" id="images-manage">Manage</a></li>
</ul>
</li>
<li id="nav_functions"><a onmouseover="this.click()" href="#!">Functions</a>
<ul class="dropdown">
<li><a href="#" id="functions-create">Create</a></li>
<li><a href="#" id="functions-remove">Remove</a></li>
<li><a href="#" id="functions-current">Current</a></li>
<li><a href="#" id="functions-viewer">Viewer</a></li>
</ul>
</li>
<li id="nav_operations"><a onmouseover="this.click()" href="#!">Operations</a>
<ul class="dropdown">
<li><a href="#" id="config-edit">Edit Config</a></li>
<li><a href="#" id="hosts-edit">Edit Hosts</a></li>
<li><a href="#" id="exec">Run Command(s)</a></li>
<li><a href="#" id="heartbeat">Heartbeat</a></li>
<li><a href="#" id="images-prune">Clean Docker</a></li>
<li><a href="#" id="terminal">Terminal</a></li>
<li><a href="#" id="monitoring">Monitoring</a></li>
<li><a href="#" id="elasticsearch-config">Configure Elasticsearch</a></li>
</ul>
</li>
<li id="nav_logs"><a onmouseover="this.click()" href="#!">Logs</a>
<ul class="dropdown">
<li><a href="#" id="log">PiCluster Logs</a></li>
<li><a href="#" id="syslog">Syslog</a></li>
<li><a href="#" id="rsyslog">Rsyslog</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<script>
var modal = document.getElementById('login');
var span = document.getElementsByClassName("close")[0];
var submit_button = document.getElementById("submit_button");
//build_docs_nav_menu();
span.onclick = function () {
modal.style.display = "none";
}
submit_button.onclick = function () {
modal.style.display = "none";
login();
}
modal.style.display = "block";
$("html").click(function () {
$(".dropdown").hide();
});
$("nav ul li a:not(:only-child)").click(function (navmenu) {
$(this).siblings(".dropdown").toggle();
$(".dropdown").not($(this).siblings()).hide();
navmenu.stopPropagation();
});
$.get("/version", function (get_version) {
var version = document.getElementById("version");
version.innerHTML = 'PiCluster - ' + get_version;
});
</script>
<div id="content">
<div class="left"></div>
<div style="clear: both;"></div>
</div>
<div id="div_iframe">
<iframe src="/blank.html" id="iframe_a" name="iframe_a">
</div>
</body>
</html>