Skip to content

Commit 196cf59

Browse files
author
Callum Williams
committed
Use DataTables for vm lists
1 parent 3ab4fd8 commit 196cf59

File tree

4 files changed

+184
-118
lines changed

4 files changed

+184
-118
lines changed

‎assets/js/machines/history.js‎

Lines changed: 102 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
1-
$(function() {
2-
createVMlist();
1+
$(function () {
2+
drawHistory();
33
});
4-
5-
var offset = 0;
6-
var numvms = 0;
7-
var pagesize = 5;
8-
94
var MONTHS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
105

116
function formatDate(timestamp)
127
{
13-
if (timestamp === 0) {
14-
return "-";
15-
}
16-
178
var date = new Date(timestamp*1000);
189
var datestring = "";
19-
datestring += date.getUTCDate() + " ";
10+
datestring += ("0" + date.getUTCDate()).slice(-2) + " ";
2011
datestring += MONTHS[date.getUTCMonth()] + " ";
2112
datestring += date.getUTCFullYear() + " ";
22-
datestring += ("0" + date.getUTCHours()).slice (-2) + ":";
23-
datestring += ("0" + date.getUTCMinutes()).slice (-2) + ":";
24-
datestring += ("0" + date.getUTCSeconds()).slice (-2);
13+
datestring += ("0" + date.getUTCHours()).slice(-2) + ":";
14+
datestring += ("0" + date.getUTCMinutes()).slice(-2) + ":";
15+
datestring += ("0" + date.getUTCSeconds()).slice(-2);
2516
return datestring;
2617
}
2718

28-
function createVMlist()
19+
var vmhistory = $('#vm-history').DataTable( {
20+
"columns": [
21+
{ data: 'name'},
22+
{ data: 'hostname'},
23+
{ data: 'state'},
24+
{ data: 'type'},
25+
{ data: 'stime'},
26+
{ data: 'etime'},
27+
{ data: 'cpu'},
28+
{ data: 'memory'},
29+
]
30+
});
31+
$.fn.dataTable.ext.errMode = 'throw';
32+
function drawHistory()
2933
{
3034
$.ajax({
3135
type: "GET",
@@ -42,14 +46,15 @@ function createVMlist()
4246
$("#error").show();
4347
}
4448
}
45-
}).done(function(json) {
46-
var html = "";
49+
}).done(function(data) {
50+
vmhistory.clear();
4751

48-
$.each(json, function(index, vm) {
49-
state = vm['state'];
52+
for (row of data["data"]) {
53+
state = row['state'];
54+
// var state_val;
5055
disabled = (state != "RUNNING" ? "disabled" : "");
5156

52-
if (state === "POWERED OFF") {
57+
if (state === "POWERED OFF" || state === "DONE") {
5358
state_val = 0;
5459
}
5560
else if (state === "PENDING" || state === "DELETING") {
@@ -64,24 +69,82 @@ function createVMlist()
6469
else if (state === "RUNNING") {
6570
state_val = 4;
6671
}
67-
else {
68-
state_val = 0;
69-
}
70-
html += '<tr>';
71-
html += '<td>' + vm['name'] + '</td>';
72-
html += '<td>' + vm['hostname'] + '</td>';
73-
html += '<td><progress max="4" value="'+state_val+'"></progress><span class="status-label">'+state+'</span></td>';
74-
html += '<td>' + vm['type'] + '</td>';
75-
html += '<td>' + formatDate(vm['stime']) + '</td>';
76-
html += '<td>' + formatDate(vm['etime']) + '</td>';
77-
html += '<td>' + vm['cpu'] + '</td>';
78-
html += '<td>' + (vm['memory']/1024) + "GB" + '</td>';
79-
html += '</tr>';
80-
});
81-
if (html !== "") {
82-
$("#vms").empty();
83-
$("#vms").append(html);
72+
73+
row['memory'] = row['memory']/1024 + "GB";
74+
75+
row['state'] = '<span class="status-label status-label-'+state_val+'">'+state+'</span><progress max="4" value="'+state_val+'"></progress>';
76+
77+
row['stime'] = formatDate(row['stime']);
78+
79+
row['etime'] = formatDate(row['etime']);
80+
81+
delete row['id'];
82+
83+
delete row['token'];
84+
85+
vmhistory.row.add(row);
8486
}
85-
$("#error").hide();
87+
vmhistory.draw(false); // 'false' saves the paging position
8688
});
8789
}
90+
91+
// function createVMlist()
92+
// {
93+
// $.ajax({
94+
// type: "GET",
95+
// url: "/api/vm?history=1&size=999",
96+
// statusCode: {
97+
// 403: function() {
98+
// Cookie.remove('session', {path : '/'});
99+
// Cookie.remove('name', {path : '/'});
100+
// Cookie.remove('fedid', {path : '/'});
101+
// window.location.replace("/login");
102+
// },
103+
// 500: function() {
104+
// $("#errormessage").html("The cloud may be experiencing problems. Please try again later.");
105+
// $("#error").show();
106+
// }
107+
// }
108+
// }).done(function(json) {
109+
// var html = "";
110+
//
111+
// $.each(json, function(index, vm) {
112+
// state = vm['state'];
113+
// disabled = (state != "RUNNING" ? "disabled" : "");
114+
//
115+
// if (state === "POWERED OFF") {
116+
// state_val = 0;
117+
// }
118+
// else if (state === "PENDING" || state === "DELETING") {
119+
// state_val = 1;
120+
// }
121+
// else if (state === "TRANSFER") {
122+
// state_val = 2;
123+
// }
124+
// else if (state === "BUILDING" || state === "EPILOG") {
125+
// state_val = 3;
126+
// }
127+
// else if (state === "RUNNING") {
128+
// state_val = 4;
129+
// }
130+
// else {
131+
// state_val = 0;
132+
// }
133+
// html += '<tr>';
134+
// html += '<td>' + vm['name'] + '</td>';
135+
// html += '<td>' + vm['hostname'] + '</td>';
136+
// html += '<td><progress max="4" value="'+state_val+'"></progress><span class="status-label">'+state+'</span></td>';
137+
// html += '<td>' + vm['type'] + '</td>';
138+
// html += '<td>' + formatDate(vm['stime']) + '</td>';
139+
// html += '<td>' + formatDate(vm['etime']) + '</td>';
140+
// html += '<td>' + vm['cpu'] + '</td>';
141+
// html += '<td>' + (vm['memory']/1024) + "GB" + '</td>';
142+
// html += '</tr>';
143+
// });
144+
// if (html !== "") {
145+
// $("#vms").empty();
146+
// $("#vms").append(html);
147+
// }
148+
// $("#error").hide();
149+
// });
150+
// }

‎assets/js/machines/listmachines.js‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,33 @@ function formatDate(timestamp)
1717
return datestring;
1818
}
1919

20+
var vmlist = $('#vm-list').DataTable( {
21+
"columns": [
22+
{ data: 'name'},
23+
{ data: 'hostname'},
24+
{ data: 'state'},
25+
{ data: 'stime'},
26+
{ data: 'cpu'},
27+
{ data: 'memory'},
28+
{ data: 'type'},
29+
{ data: 'token'},
30+
{ data: 'id'},
31+
],
32+
"columnDefs": [
33+
{
34+
"orderable": false,
35+
"targets": [7, 8]
36+
}
37+
]
38+
});
39+
$.fn.dataTable.ext.errMode = 'throw';
2040
function drawTable()
2141
{
2242
var show = $('#show-all').prop('checked');
2343
Cookies.get("showall", show, {path : '/'});
2444
$.ajax({
2545
type: "GET",
26-
url: "/api/vm?size=" + pagesize + "&offset=" + offset,
46+
url: "/api/vm",
2747
statusCode: {
2848
403: function() {
2949
Cookie.remove('session', {path : '/'});
@@ -36,11 +56,11 @@ function drawTable()
3656
$("#error").show();
3757
}
3858
}
39-
}).done(function(json) {
40-
var html = "";
59+
}).done(function(data) {
60+
vmlist.clear();
4161

42-
$.each(json, function(index, vm) {
43-
state = vm['state'];
62+
for (row of data["data"]) {
63+
state = row['state'];
4464
disabled = (state != "RUNNING" ? "disabled" : "");
4565

4666
if (state === "POWERED OFF") {
@@ -59,34 +79,25 @@ function drawTable()
5979
state_val = 4;
6080
}
6181
if (state === "POWERED OFF") {
62-
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>';
82+
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>';
6383
} else {
64-
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>';
84+
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>';
6585
}
6686

67-
html += '<tr>';
68-
html += '<td>' + vm['name'] + '</td>';
69-
html += '<td>' + vm['hostname'] + '</td>';
70-
html += '<td><span class="status-label status-label-'+state_val+'">'+state+'</span><progress max="4" value="'+state_val+'"></progress></td>';
71-
html += '<td>' + vm['type'] + '</td>';
72-
html += '<td>' + formatDate(vm['stime']) + '</td>'; // move date formattion into own function
73-
html += '<td style="text-align:center">' + vm['cpu'] + '</td>';
74-
html += '<td style="text-align:center">' + (vm['memory']/1024) + "GB" + '</td>';
75-
html += '<td>';
76-
html += '<button type="button" class="btn btn-blue btn-xs" title="Launch Desktop GUI" onclick="vncdialog(\'' + vm['token'] + '\', \'' + vm['name'] + '\')" ' + disabled + '>';
77-
html += '<img src="/assets/images/icon-display.png" style="width:14px;margin-top:-2px" />';
78-
html += '</button>';
79-
html += '</td>';
80-
html += button;
81-
html += '</tr>';
82-
});
87+
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>';
8388

84-
if (html !== "") {
85-
$("#vms").empty();
86-
$("#vms").append(html);
87-
}
89+
row['memory'] = row['memory']/1024 + "GB";
90+
91+
row['state'] = '<span class="status-label status-label-'+state_val+'">'+state+'</span><progress max="4" value="'+state_val+'"></progress>';
8892

89-
$("#error").hide();
93+
row['stime'] = formatDate(row['stime']);
94+
95+
row['etime'] = row['etime'];
96+
97+
delete row['etime'];
98+
vmlist.row.add(row);
99+
}
100+
vmlist.draw(false); // 'false' saves the paging position
90101
});
91102
}
92103

‎views/machines/history.html‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@
44
{% extends "layout.html" %}
55

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

1012
{% block javascript %}
11-
<script src="/assets/js/jquery.paging.min.js"></script>
13+
<!-- DataTables -->
14+
<script src="/assets/components/jquery/jquery.dataTables-1.10.10.min.js"></script>
15+
<script src="/assets/components/bootstrap/js/dataTables.bootstrap-1.10.10.min.js"></script>
16+
1217
<script src="/assets/js/machines/history.js"></script>
1318
{% endblock %}
1419

@@ -20,30 +25,21 @@ <h1 class="page-header">History</h1>
2025
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span id="errormessage"></span>
2126
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
2227
</div>
23-
<div class="table-responsive">
24-
<table class="table table-hover">
25-
<thead>
26-
<tr>
27-
<th>Name</th>
28-
<th>Hostname</th>
29-
<th>State</th>
30-
<th>Type</th>
31-
<th>Start</th>
32-
<th>End</th>
33-
<th>CPU</th>
34-
<th>RAM</th>
35-
</tr>
36-
</thead>
37-
<tbody id="vms">
28+
29+
<table id="vm-history" class="table" cellspacing="0" width="100%">
30+
<thead>
3831
<tr>
39-
<td colspan="8" class="text-center"><br />Loading ...<br /><br /></td>
32+
<th>Name</th>
33+
<th>Hostname</th>
34+
<th>State</th>
35+
<th>Type</th>
36+
<th>Start</th>
37+
<th>End</th>
38+
<th>CPU</th>
39+
<th>RAM</th>
4040
</tr>
41-
</tbody>
42-
</table>
43-
</div>
44-
<div style="text-align:center">
45-
<ul class="pagination"></ul>
46-
</div>
41+
</thead>
42+
</table>
4743
</div>
4844
</div>
4945
{% endblock %}

0 commit comments

Comments
 (0)