416 lines
18 KiB
Plaintext
416 lines
18 KiB
Plaintext
<!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>
|
||
|
||
<body>
|
||
<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="Register"><i class="fa fa-user-plus"></i></a>
|
||
</div>
|
||
<div class="sidebar-menu">
|
||
<div class="header">
|
||
<h4>SERVERS</h4>
|
||
<p id="serverCount">15 servers configured</p>
|
||
</div>
|
||
<div 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 class="header">
|
||
<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-plus"></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 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>
|
||
</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">
|
||
|
||
</div>
|
||
<div class="row" id="vm-list"></div>
|
||
|
||
|
||
<div id="prstat"><img src="/images/ajax-loader.gif" /></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++) {
|
||
$('#serverlist').append('<div ondrop="drop(event)" ondragover="allowDrop(event)" class="kartica rounded" 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>');
|
||
}
|
||
$('#serverCount').html(servers.servers.length + ' servers configured');
|
||
});
|
||
});
|
||
|
||
$( "#serverlist" ).on('click', ".kartica", function() {
|
||
var index = this.id.toString().substring(7,this.id.toString().length);
|
||
$.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>")
|
||
}, 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);
|
||
});
|
||
$.getJSON('/api/list-zones/'+index, function(data) {
|
||
$('#vm-list').html("");
|
||
data.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-server fa-5x'></i>" +
|
||
"</div>" +
|
||
"<div class='vm-card-menu'>" +
|
||
"<a href='#' class='"+ element.status +"' onclick=\"zoneShutdown(" + index + ", '" + element.name + "', '" + element.status +"')\"><i class='fa fa-power-off'></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);
|
||
});
|
||
|
||
var cpuPoint = 0;
|
||
|
||
$.getJSON('/api/statsCPU/'+index, function(data) {
|
||
configCPU.data = data;
|
||
console.log(data);
|
||
window.myDoughnutCPU.update();
|
||
});
|
||
$.getJSON('/api/statsMEM/'+index, function(data) {
|
||
configMEM.data = data;
|
||
console.log(data);
|
||
window.myDoughnutMEM.update();
|
||
});
|
||
$.getJSON('/api/cpu-load/'+index, function(data) {
|
||
configLOAD.data.labels.push(cpuPoint.toString());
|
||
cpuPoint ++;
|
||
configLOAD.data.datasets[0].data.push(data[0]);
|
||
if(configLOAD.data.datasets[0].data.length > 25) {
|
||
configLOAD.data.datasets[0].data.splice(0,1);
|
||
configLOAD.data.labels.splice(0,1);
|
||
}
|
||
console.log(data);
|
||
window.myLine.update();
|
||
});
|
||
|
||
setInterval(function() {
|
||
$.getJSON('/api/statsCPU/'+index, function(data) {
|
||
configCPU.data = data;
|
||
console.log(data);
|
||
window.myDoughnutCPU.update();
|
||
});
|
||
|
||
$.getJSON('/api/statsMEM/'+index, function(data) {
|
||
configMEM.data = data;
|
||
console.log(data);
|
||
window.myDoughnutMEM.update();
|
||
});
|
||
|
||
$.getJSON('/api/cpu-load/'+index, function(data) {
|
||
configLOAD.data.labels.push(cpuPoint.toString());
|
||
cpuPoint ++;
|
||
configLOAD.data.datasets[0].data.push(data[0]);
|
||
if(configLOAD.data.datasets[0].data.length > 25) {
|
||
configLOAD.data.datasets[0].data.splice(0,1);
|
||
configLOAD.data.labels.splice(0,1);
|
||
}
|
||
console.log(data);
|
||
window.myLine.update();
|
||
});
|
||
|
||
$.getJSON('/api/list-zones/'+index, function(data) {
|
||
$('#vm-list').html("");
|
||
data.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-server fa-5x'></i>" +
|
||
"</div>" +
|
||
"<div class='vm-card-menu'>" +
|
||
"<a href='#' class='"+ element.status +"' onclick=\"zoneShutdown(" + index + ", '" + element.name + "', '" + element.status +"')\"><i class='fa fa-power-off'></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: {
|
||
position: 'top',
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: 'CPU Utilisation'
|
||
},
|
||
animation: {
|
||
animateScale: false,
|
||
animateRotate: false
|
||
}
|
||
}
|
||
};
|
||
|
||
var configMEM = {
|
||
type: 'doughnut',
|
||
data: {},
|
||
options: {
|
||
responsive: true,
|
||
legend: {
|
||
position: 'top',
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: 'Memory Utilisation'
|
||
},
|
||
animation: {
|
||
animateScale: false,
|
||
animateRotate: false
|
||
}
|
||
}
|
||
};
|
||
|
||
var configLOAD = {
|
||
type: 'line',
|
||
data: {
|
||
labels: [],
|
||
datasets: [{
|
||
label: "CPU Load",
|
||
backgroundColor: 'red',
|
||
borderColor: 'red',
|
||
data: [],
|
||
fill: false,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: 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'
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
};
|
||
|
||
$(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);
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|