Matjaz Mesnjak da65f00f6c Initial commit.
2017-09-20 23:19:33 +02:00

530 lines
22 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Omnios Zone Administration Utility">
<meta name="author" content="uplink">
<title><%= title %></title>
<!-- Bootstrap 4 core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<!--<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">-->
<link href="/stylesheets/uplink.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<script>
function allowDrop(ev) {
if(ev.target.className == "card-block") {
ev.preventDefault();
}
}
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
function zoneShutdown(vmIndex, zoneName, currState) {
if(currState == 'installed') {
$.get('/api/boot/' + vmIndex + '/' + zoneName);
}
else if(currState == 'running') {
$.get('/api/poweroff/' + vmIndex + '/' + zoneName);
}
}
</script>
</head>
<div class="container-fluid" id="container">
<div class="row row-offcanvas row-offcanvas-left">
<div class="sidebar">
<span class="logo"><img src="/images/uplink.png"></span>
<div class="sidebar-razmik"></div>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Home"><i class="fa fa-home"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Servers"><i class="fa fa-server"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Virtual Servers"><i class="fa fa-cloud"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Favourites"><i class="fa fa-star"></i></a>
<div class="sidebar-razmik"></div>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Statistics"><i class="fa fa-pie-chart"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Settings"><i class="fa fa-wrench"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="About ..."><i class="fa fa-info-circle"></i></a>
<div class="sidebar-razmik"></div>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="User Profile"><i class="fa fa-user"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Sign In"><i class="fa fa-sign-in"></i></a>
<a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Add VNIC"><i class="fa fa-user-plus"></i></a>
</div>
<!-- sidebar-menu -->
<div class="sidebar-menu" id="navbarTogglerDemo01">
<header>
<h4>SERVERS</h4>
<div class="header-menu">
<div class="header-text">
<p id="serverCount">15 servers configured</p>
</div>
<div class="header-pulldown">
<div class="btn-group">
<button class="btn btn-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</header>
<!-- <div class="server-list-container"> -->
<div class="server-list" id="serverlist">
<div class="kartica">
<div class="card-block">
<div class="card-menu">
<a href="#"><i class="fa fa-info-circle"></i></a>
<a href="#"><i class="fa fa-star-o"></i></a>
<a href="#"><i class="fa fa-trash-o"></i></a>
</div>
<h5 class="card-title">Moj strežnik</h5>
<small>192.168.5.100</small>
<p>Nekaj o strežniku</p>
</div>
</div>
</div>
<!-- </div> -->
<!-- <div class="server-list-footer">
<small>Uplink:SI</small>
</div> -->
</div><!-- sidebar-menu -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<div class="container-fluid main col-sm-12" id="container">
<div class="top-menu">
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-thermometer-three-quarters"></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-user-o"></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-area-chart "></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-exclamation-triangle"></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-folder-open"></i></a>
<span class="separator"></span>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
<a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
<a id="add-vm" href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Add VM"><i class="fa fa-plus"></i></a>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New virtual machine</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Name:</label>
<input type="text" class="form-control" id="vnic-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">NIC to use:</label>
<select class="form-control" id="nicList">
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="createVnic" data-dismiss="modal">Create</button>
</div>
</div>
</div>
</div>
<div class="page-header">
<h1 class="display-1" id="title"><%= title %></h1>
</div>
<div class="row">
<div class="col-4">
<canvas id="chart-area-cpu"></canvas>
</div>
<div class="col-4">
<canvas id="chart-area-mem"></canvas>
</div>
<div class="col-4">
<canvas id="chart-area-load"></canvas>
</div>
</div>
<div class="row">
&nbsp;
</div>
<div class="row" id="vm-list"></div>
<div id="result"><!-- RESULT --></div>
<h1>List Zones</h1>
<table class="table" id="list-zones"></table>
<h1>List ZFS</h1>
<table class="table" id="list-zfs"></table>
<h1>Show Phys</h1>
<table class="table" id="show-phys"></table>
<h1>Show Vnic</h1>
<table class="table" id="show-vnic"></table>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('/api/getServers', function(servers) {
$('#serverlist').html('');
for(var i = 0; i < servers.servers.length; i++) {
var selected = '';
if(i == '<%= serverID %>') {
selected = 'selected';
}
else {
selected = 'plain';
}
$('#serverlist').append('<div onclick="location.href=\'/' + i + '\';" ondrop="drop(event)" ondragover="allowDrop(event)" class="kartica rounded '+ selected +'" id="server_'+ i +'">' +
'<div class="card-block">'+
'<div class="card-menu">'+
'<a href="#"><i class="fa fa-info-circle"></i></a>'+
'<a href="#"><i class="fa fa-star-o"></i></a>'+
'<a href="#"><i class="fa fa-trash-o"></i></a>'+
'</div>'+
'<h5 class="card-title">'+ servers.servers[i].name +'</h5>'+
'<small>'+ servers.servers[i].ip +'</small>'+
'<p>'+ servers.servers[i].description +'</p>'+
'</div>'+
'</div><hr class="server-list-hr" />');
}
$('#serverCount').html(servers.servers.length + ' servers configured');
});
});
//$( "#serverlist" ).on('click', ".kartica", function() {
$(document).ready(function() {
//var index = this.id.toString().substring(7,this.id.toString().length);
var index = "<%= serverID %>";
$.getJSON('/api/getServers', function(servers) {
$('#title').html(servers.servers[index].name);
});
$.getJSON('/api/list-zones/'+index, function(data) {
$('#list-zones').html("<tr><th>ID</th><th>NAME</th><th>STATUS</th><th>ZONEPATH</th><th>BRAND</th><th>IP</th></tr>");
data.forEach(function(element) {
$('#list-zones').append("<tr><td>" + element.id + "</td>" +
"<td>" + element.name + "</td>" +
"<td>" + element.status + "</td>" +
"<td>" + element.zone_path + "</td>" +
"<td>" + element.brand + "</td>" +
"<td>" + element.ip + "</td>");
}, this);
});
$.getJSON('/api/list-zfs/'+index, function(data) {
$('#list-zfs').html("<tr><th>NAME</th><th>USED</th><th>AVAIL</th><th>REFER</th><th>MOUNTPOINT</th></tr>");
data.forEach(function(element) {
$("#list-zfs").append("<tr><td>" + element.name + "</td>" +
"<td>" + element.used + "</td>" +
"<td>" + element.avail + "</td>" +
"<td>" + element.refer + "</td>" +
"<td>" + element.mountpoint + "</td>")
}, this);
});
$.getJSON('/api/show-phys/'+index, function(data) {
$('#show-phys').html("<tr><th>LINK</th><th>MEDIA</th><th>STATE</th><th>SPEED</th><th>DUPLEX</th><th>DEVICE</th></tr>");
data.forEach(function(element) {
$("#show-phys").append("<tr><td>" + element.link + "</td>" +
"<td>" + element.media + "</td>" +
"<td>" + element.state + "</td>" +
"<td>" + element.speed + "</td>" +
"<td>" + element.duplex + "</td>" +
"<td>" + element.device + "</td>")
$("#nicList").append('<option>' + element.link + '</option>')
}, this);
});
$.getJSON('/api/show-vnic/'+index, function(data) {
$('#show-vnic').html("<tr><th>LINK</th><th>OVER</th><th>SPEED</th><th>MACADDRESS</th><th>MACADDRTYPE</th><th>VID</th></tr>");
data.forEach(function(element) {
$("#show-vnic").append("<tr><td>" + element.link + "</td>" +
"<td>" + element.over + "</td>" +
"<td>" + element.speed + "</td>" +
"<td>" + element.macaddress + "</td>" +
"<td>" + element.macaddrtype + "</td>" +
"<td>" + element.vid + "</td>")
}, this)
});
$.get('/api/prstat/'+index, function(data) {
$('#prstat').html(data);
});
var cpuPoint = 0;
$.getJSON('/api/stats/'+index, function(data) {
configCPU.data = data.statsCPU;
window.myDoughnutCPU.update();
configMEM.data = data.statsMEM;
window.myDoughnutMEM.update();
// configLOAD.data.labels.push(cpuPoint.toString());
// cpuPoint ++;
// configLOAD.data.datasets[0].data.push(data.cpuLoad[0]);
// if(configLOAD.data.datasets[0].data.length > 25) {
// configLOAD.data.datasets[0].data.splice(0,1);
// configLOAD.data.labels.splice(0,1);
// }
// window.myLine.update();
$('#vm-list').html("");
data.listZones.forEach(function(element) {
$("#vm-list").append("<div class='col-4 vm-card'>" +
"<div class='card' draggable='true' ondragstart='drag(event)'>" +
"<div class='card-block'>" +
"<div class='rotate'>" +
"<i class='fa fa-computer fa-5x'></i>" +
"</div>" +
"<div class='vm-card-menu'>" +
"<span class='"+ element.status +"' onclick=\"zoneShutdown(" + index + ", '" + element.name + "', '" + element.status +"')\"><i class='fa fa-power-off'></i></span>" +
"<a href='#'><i class='fa fa-trash'></i></a>" +
"<a href='#'><i class='fa fa-info-circle'></i></a>" +
"</div>" +
"<h4>" + element.name + "</h4>" +
"<p>Brand: " + element.brand + "</p>" +
"<p>Status: " + element.status + "</p>" +
"</div>" +
"</div>" +
"</div>");
}, this);
});
setInterval(function() {
$.getJSON('/api/stats/'+index, function(data) {
configCPU.data = data.statsCPU;
window.myDoughnutCPU.update();
configMEM.data = data.statsMEM;
window.myDoughnutMEM.update();
// configLOAD.data.labels.push(cpuPoint.toString());
// cpuPoint ++;
// configLOAD.data.datasets[0].data.push(data.cpuLoad[0]);
// if(configLOAD.data.datasets[0].data.length > 25) {
// configLOAD.data.datasets[0].data.splice(0,1);
// configLOAD.data.labels.splice(0,1);
// }
// window.myLine.update();
$('#vm-list').html("");
data.listZones.forEach(function(element) {
$("#vm-list").append("<div class='col-4 vm-card'>" +
"<div class='card' draggable='true' ondragstart='drag(event)'>" +
"<div class='card-block'>" +
"<div class='rotate'>" +
"<i class='fa fa-database fa-5x'></i>" +
"</div>" +
"<div class='vm-card-menu'>" +
"<span class='"+ element.status +"' onclick=\"zoneShutdown(" + index + ", '" + element.name + "', '" + element.status +"')\"><i class='fa fa-power-off'></i></span>" +
"<a href='#'><i class='fa fa-trash'></i></a>" +
"<a href='#'><i class='fa fa-info-circle'></i></a>" +
"</div>" +
"<h4>" + element.name + "</h4>" +
"<p>Brand: " + element.brand + "</p>" +
"<p>Status: " + element.status + "</p>" +
"</div>" +
"</div>" +
"</div>");
}, this);
});
}, 15000);
});
var configCPU = {
type: 'doughnut',
data: {},
options: {
responsive: true,
legend: {
display: false,
position: 'top',
},
title: {
display: true,
text: 'CPU Utilisation'
},
animation: {
animateScale: false,
animateRotate: false
}
}
};
var configMEM = {
type: 'doughnut',
data: {},
options: {
responsive: true,
legend: {
display: false,
position: 'top',
},
title: {
display: true,
text: 'Memory Utilisation'
},
animation: {
animateScale: false,
animateRotate: false
}
}
};
var configLOAD = {
type: 'line',
data: {
labels: [],
datasets: [{
label: "CPU Load",
backgroundColor: '#FF6600',
borderColor: '#FF6600',
data: [],
fill: false,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display: false,
},
title:{
display:true,
text:'CPU Load'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Point'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Value'
}
}]
}
}
};
var cpuPoint = 0;
$(document).ready(function() {
var ctxCPU = document.getElementById("chart-area-cpu").getContext("2d");
window.myDoughnutCPU = new Chart(ctxCPU, configCPU);
var ctxMEM = document.getElementById("chart-area-mem").getContext("2d");
window.myDoughnutMEM = new Chart(ctxMEM, configMEM);
var ctxLOAD = document.getElementById("chart-area-load").getContext("2d");
window.myLine = new Chart(ctxLOAD, configLOAD);
});
//$(document).ready(function() {
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("/stream");
source.onmessage = function(event) {
//configCPU.data = data.statsCPU;
console.log(event.data);
if($.parseJSON($.parseJSON(event.data).server) == "<%= serverID %>") {
configLOAD.data.labels.push(cpuPoint.toString());
cpuPoint ++;
if(event.data) {
var mdata = $.parseJSON(event.data);
}
if(mdata.body) {
var mbody = $.parseJSON(mdata.body);
}
if(mbody) {
configLOAD.data.datasets[0].data.push(mbody.cpuLoad[0]);
}
else {
configLOAD.data.datasets[0].data.push(0);
}
if(configLOAD.data.datasets[0].data.length > 25) {
configLOAD.data.datasets[0].data.splice(0,1);
configLOAD.data.labels.splice(0,1);
}
window.myLine.update();
}
//document.getElementById("result").innerHTML += $.parseJSON($.parseJSON(event.data).data).cpuLoad[0] + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
//});
$("#createVnic").click(function() {
var index = "<%= serverID %>";
$.getJSON('/api/getServers', function(servers) {
$.getJSON('/api/createvnic/<%= serverID %>/' + $("#vnic-name").val() + '/e1000g0', function(data) {
alert("CreateVnic: "+data);
});
});
})
$("#add-vm").click(function() {
$("#exampleModal").modal('toggle');
})
$("#delete-vm").click(function() {
$.get('/api/deleteVM', function() {
alert("Brisanje sproženo ...");
})
})
</script>
</body>
</html>