Skip to content

Commit

Permalink
Use DataTables for vm lists
Browse files Browse the repository at this point in the history
  • Loading branch information
Callum Williams committed Jan 29, 2016
1 parent 3ab4fd8 commit 196cf59
Show file tree
Hide file tree
Showing 4 changed files with 184 additions and 118 deletions.
141 changes: 102 additions & 39 deletions assets/js/machines/history.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,35 @@
$(function() {
createVMlist();
$(function () {
drawHistory();
});

var offset = 0;
var numvms = 0;
var pagesize = 5;

var MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

function formatDate(timestamp)
{
if (timestamp === 0) {
return "-";
}

var date = new Date(timestamp*1000);
var datestring = "";
datestring += date.getUTCDate() + " ";
datestring += ("0" + date.getUTCDate()).slice(-2) + " ";
datestring += MONTHS[date.getUTCMonth()] + " ";
datestring += date.getUTCFullYear() + " ";
datestring += ("0" + date.getUTCHours()).slice (-2) + ":";
datestring += ("0" + date.getUTCMinutes()).slice (-2) + ":";
datestring += ("0" + date.getUTCSeconds()).slice (-2);
datestring += ("0" + date.getUTCHours()).slice(-2) + ":";
datestring += ("0" + date.getUTCMinutes()).slice(-2) + ":";
datestring += ("0" + date.getUTCSeconds()).slice(-2);
return datestring;
}

function createVMlist()
var vmhistory = $('#vm-history').DataTable( {
"columns": [
{ data: 'name'},
{ data: 'hostname'},
{ data: 'state'},
{ data: 'type'},
{ data: 'stime'},
{ data: 'etime'},
{ data: 'cpu'},
{ data: 'memory'},
]
});
$.fn.dataTable.ext.errMode = 'throw';
function drawHistory()
{
$.ajax({
type: "GET",
Expand All @@ -42,14 +46,15 @@ function createVMlist()
$("#error").show();
}
}
}).done(function(json) {
var html = "";
}).done(function(data) {
vmhistory.clear();

$.each(json, function(index, vm) {
state = vm['state'];
for (row of data["data"]) {
state = row['state'];
// var state_val;
disabled = (state != "RUNNING" ? "disabled" : "");

if (state === "POWERED OFF") {
if (state === "POWERED OFF" || state === "DONE") {
state_val = 0;
}
else if (state === "PENDING" || state === "DELETING") {
Expand All @@ -64,24 +69,82 @@ function createVMlist()
else if (state === "RUNNING") {
state_val = 4;
}
else {
state_val = 0;
}
html += '<tr>';
html += '<td>' + vm['name'] + '</td>';
html += '<td>' + vm['hostname'] + '</td>';
html += '<td><progress max="4" value="'+state_val+'"></progress><span class="status-label">'+state+'</span></td>';
html += '<td>' + vm['type'] + '</td>';
html += '<td>' + formatDate(vm['stime']) + '</td>';
html += '<td>' + formatDate(vm['etime']) + '</td>';
html += '<td>' + vm['cpu'] + '</td>';
html += '<td>' + (vm['memory']/1024) + "GB" + '</td>';
html += '</tr>';
});
if (html !== "") {
$("#vms").empty();
$("#vms").append(html);

row['memory'] = row['memory']/1024 + "GB";

row['state'] = '<span class="status-label status-label-'+state_val+'">'+state+'</span><progress max="4" value="'+state_val+'"></progress>';

row['stime'] = formatDate(row['stime']);

row['etime'] = formatDate(row['etime']);

delete row['id'];

delete row['token'];

vmhistory.row.add(row);
}
$("#error").hide();
vmhistory.draw(false); // 'false' saves the paging position
});
}

// function createVMlist()
// {
// $.ajax({
// type: "GET",
// url: "/api/vm?history=1&size=999",
// statusCode: {
// 403: function() {
// Cookie.remove('session', {path : '/'});
// Cookie.remove('name', {path : '/'});
// Cookie.remove('fedid', {path : '/'});
// window.location.replace("/login");
// },
// 500: function() {
// $("#errormessage").html("The cloud may be experiencing problems. Please try again later.");
// $("#error").show();
// }
// }
// }).done(function(json) {
// var html = "";
//
// $.each(json, function(index, vm) {
// state = vm['state'];
// disabled = (state != "RUNNING" ? "disabled" : "");
//
// if (state === "POWERED OFF") {
// state_val = 0;
// }
// else if (state === "PENDING" || state === "DELETING") {
// state_val = 1;
// }
// else if (state === "TRANSFER") {
// state_val = 2;
// }
// else if (state === "BUILDING" || state === "EPILOG") {
// state_val = 3;
// }
// else if (state === "RUNNING") {
// state_val = 4;
// }
// else {
// state_val = 0;
// }
// html += '<tr>';
// html += '<td>' + vm['name'] + '</td>';
// html += '<td>' + vm['hostname'] + '</td>';
// html += '<td><progress max="4" value="'+state_val+'"></progress><span class="status-label">'+state+'</span></td>';
// html += '<td>' + vm['type'] + '</td>';
// html += '<td>' + formatDate(vm['stime']) + '</td>';
// html += '<td>' + formatDate(vm['etime']) + '</td>';
// html += '<td>' + vm['cpu'] + '</td>';
// html += '<td>' + (vm['memory']/1024) + "GB" + '</td>';
// html += '</tr>';
// });
// if (html !== "") {
// $("#vms").empty();
// $("#vms").append(html);
// }
// $("#error").hide();
// });
// }
67 changes: 39 additions & 28 deletions assets/js/machines/listmachines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,33 @@ function formatDate(timestamp)
return datestring;
}

var vmlist = $('#vm-list').DataTable( {
"columns": [
{ data: 'name'},
{ data: 'hostname'},
{ data: 'state'},
{ data: 'stime'},
{ data: 'cpu'},
{ data: 'memory'},
{ data: 'type'},
{ data: 'token'},
{ data: 'id'},
],
"columnDefs": [
{
"orderable": false,
"targets": [7, 8]
}
]
});
$.fn.dataTable.ext.errMode = 'throw';
function drawTable()
{
var show = $('#show-all').prop('checked');
Cookies.get("showall", show, {path : '/'});
$.ajax({
type: "GET",
url: "/api/vm?size=" + pagesize + "&offset=" + offset,
url: "/api/vm",
statusCode: {
403: function() {
Cookie.remove('session', {path : '/'});
Expand All @@ -36,11 +56,11 @@ function drawTable()
$("#error").show();
}
}
}).done(function(json) {
var html = "";
}).done(function(data) {
vmlist.clear();

$.each(json, function(index, vm) {
state = vm['state'];
for (row of data["data"]) {
state = row['state'];
disabled = (state != "RUNNING" ? "disabled" : "");

if (state === "POWERED OFF") {
Expand All @@ -59,34 +79,25 @@ function drawTable()
state_val = 4;
}
if (state === "POWERED OFF") {
button = '<td><button type="button" class="btn btn-success btn-xs" title="Boot Machine" onclick="bootVM(' + vm['id'] + ')"><span class="glyphicon glyphicon-arrow-up" style="vertical-align:middle;margin-top:-2px"></span></button></td>';
row['id'] = '<button type="button" class="btn btn-success btn-xs" title="Boot Machine" onclick="bootVM(' + row['id'] + ')"><span class="glyphicon glyphicon-arrow-up" style="vertical-align:middle;margin-top:-2px"></span></button>';
} else {
button = '<td><button type="button" class="btn btn-danger btn-xs" title="Delete Machine" onclick="deleteVMdialog(' + vm['id'] + ')"><span class="glyphicon glyphicon-remove" style="vertical-align:middle;margin-top:-2px"></span></button></td>';
row['id'] = '<button type="button" class="btn btn-danger btn-xs" title="Delete Machine" onclick="deleteVMdialog(' + row['id'] + ')"><span class="glyphicon glyphicon-remove" style="vertical-align:middle;margin-top:-2px"></span></button>';
}

html += '<tr>';
html += '<td>' + vm['name'] + '</td>';
html += '<td>' + vm['hostname'] + '</td>';
html += '<td><span class="status-label status-label-'+state_val+'">'+state+'</span><progress max="4" value="'+state_val+'"></progress></td>';
html += '<td>' + vm['type'] + '</td>';
html += '<td>' + formatDate(vm['stime']) + '</td>'; // move date formattion into own function
html += '<td style="text-align:center">' + vm['cpu'] + '</td>';
html += '<td style="text-align:center">' + (vm['memory']/1024) + "GB" + '</td>';
html += '<td>';
html += '<button type="button" class="btn btn-blue btn-xs" title="Launch Desktop GUI" onclick="vncdialog(\'' + vm['token'] + '\', \'' + vm['name'] + '\')" ' + disabled + '>';
html += '<img src="/assets/images/icon-display.png" style="width:14px;margin-top:-2px" />';
html += '</button>';
html += '</td>';
html += button;
html += '</tr>';
});
row['token'] = '<button type="button" class="btn btn-blue btn-xs" title="Launch Desktop GUI" onclick="vncdialog(\'' + row['token'] + '\', \'' + row['name'] + '\')" ' + disabled + '><img src="/assets/images/icon-display.png" style="width:14px;margin-top:-2px" /></button>';

if (html !== "") {
$("#vms").empty();
$("#vms").append(html);
}
row['memory'] = row['memory']/1024 + "GB";

row['state'] = '<span class="status-label status-label-'+state_val+'">'+state+'</span><progress max="4" value="'+state_val+'"></progress>';

$("#error").hide();
row['stime'] = formatDate(row['stime']);

row['etime'] = row['etime'];

delete row['etime'];
vmlist.row.add(row);
}
vmlist.draw(false); // 'false' saves the paging position
});
}

Expand Down
44 changes: 20 additions & 24 deletions views/machines/history.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,16 @@
{% extends "layout.html" %}

{% block css %}
<link rel="stylesheet" href="/assets/css/bootstrap-select.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/components/bootstrap/css/bootstrap-select-1.9.4.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/components/bootstrap/css/dataTables.bootstrap-1.10.10.min.css" type="text/css" />
<link rel="stylesheet" href="/assets/css/machines/styles.css" type="text/css" />
{% endblock %}

{% block javascript %}
<script src="/assets/js/jquery.paging.min.js"></script>
<!-- DataTables -->
<script src="/assets/components/jquery/jquery.dataTables-1.10.10.min.js"></script>
<script src="/assets/components/bootstrap/js/dataTables.bootstrap-1.10.10.min.js"></script>

<script src="/assets/js/machines/history.js"></script>
{% endblock %}

Expand All @@ -20,30 +25,21 @@ <h1 class="page-header">History</h1>
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span id="errormessage"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Hostname</th>
<th>State</th>
<th>Type</th>
<th>Start</th>
<th>End</th>
<th>CPU</th>
<th>RAM</th>
</tr>
</thead>
<tbody id="vms">

<table id="vm-history" class="table" cellspacing="0" width="100%">
<thead>
<tr>
<td colspan="8" class="text-center"><br />Loading ...<br /><br /></td>
<th>Name</th>
<th>Hostname</th>
<th>State</th>
<th>Type</th>
<th>Start</th>
<th>End</th>
<th>CPU</th>
<th>RAM</th>
</tr>
</tbody>
</table>
</div>
<div style="text-align:center">
<ul class="pagination"></ul>
</div>
</thead>
</table>
</div>
</div>
{% endblock %}
Loading

0 comments on commit 196cf59

Please sign in to comment.