Revision c3b3043d
| b/ui/static/main.css | ||
|---|---|---|
| 735 | 735 |
|
| 736 | 736 |
div.list table tbody.running {
|
| 737 | 737 |
margin-top: 8px; |
| 738 |
max-height: 310px;
|
|
| 738 |
height: 310px; |
|
| 739 | 739 |
overflow: auto; |
| 740 | 740 |
} |
| 741 | 741 |
|
| ... | ... | |
| 744 | 744 |
overflow: auto; |
| 745 | 745 |
} |
| 746 | 746 |
|
| 747 |
div.list table tbody.terminated td {
|
|
| 748 |
height: 20px !important; |
|
| 749 |
} |
|
| 750 |
|
|
| 751 |
th.scroll {
|
|
| 752 |
width:7px; |
|
| 753 |
} |
|
| 754 |
|
|
| 747 | 755 |
div.list .stopped {
|
| 748 | 756 |
margin-top: 8px; |
| 749 | 757 |
} |
| ... | ... | |
| 943 | 951 |
cursor: pointer; |
| 944 | 952 |
} |
| 945 | 953 |
|
| 946 |
div.list table thead tr .header#group, div.list table thead tr .header#name{
|
|
| 954 |
div.list table thead tr .header#group {
|
|
| 947 | 955 |
width: 80px; |
| 948 | 956 |
} |
| 949 | 957 |
|
| 950 | 958 |
div.list table thead tr .header#ip {
|
| 951 |
width: 180px;
|
|
| 959 |
width: 100px;
|
|
| 952 | 960 |
} |
| 953 | 961 |
|
| 954 |
div.list table thead tr th#selection, div.list table thead tr th#os {
|
|
| 955 |
width: 10px; |
|
| 962 |
div.list table thead #selection {
|
|
| 963 |
width: 35px; |
|
| 964 |
text-align: left; |
|
| 965 |
} |
|
| 966 |
|
|
| 967 |
div.list table thead #os {
|
|
| 968 |
width: 32px; |
|
| 956 | 969 |
vertical-align:middle; |
| 957 | 970 |
} |
| 958 | 971 |
|
| ... | ... | |
| 978 | 991 |
div.list table thead tr .headerSortDown, div.list table thead tr .headerSortUp {
|
| 979 | 992 |
background-color: #87AADE; |
| 980 | 993 |
} |
| 994 |
|
|
| 995 |
span.imagetag { display: none;}
|
|
| b/ui/templates/home.html | ||
|---|---|---|
| 5 | 5 |
<!-- include the Tools --> |
| 6 | 6 |
<script src="static/jquery.tools.min.js"></script> |
| 7 | 7 |
<script src="static/jQueryRotate.js"></script> |
| 8 |
<script src="static/jquery.tablesorter.min.js"></script> |
|
| 9 |
|
|
| 8 | 10 |
<link rel="stylesheet" type="text/css" href="static/main.css"/> |
| 9 | 11 |
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css' /> |
| 10 | 12 |
|
| ... | ... | |
| 62 | 64 |
$('ul.css-tabs li a:not(.current)').animate({top:'9px'},{queue:false,duration:150});
|
| 63 | 65 |
}); |
| 64 | 66 |
}); |
| 67 |
|
|
| 65 | 68 |
$(function() {
|
| 66 | 69 |
$("ul.css-tabs").tabs("div.css-panes div.pane", {
|
| 67 | 70 |
onBeforeClick: function(event, i) {
|
| b/ui/templates/list.html | ||
|---|---|---|
| 1 |
<script src="http://tablesorter.com/jquery.tablesorter.min.js"></script> |
|
| 2 |
|
|
| 3 | 1 |
<div id="machinesview" class="list"> |
| 4 | 2 |
<div id="spinner"></div> |
| 5 | 3 |
<div class="actions"> |
| ... | ... | |
| 29 | 27 |
<th id="ip">IP</th> |
| 30 | 28 |
<th id="group">Group</th> |
| 31 | 29 |
<th id="status">Status</th> |
| 30 |
<th class="scroll"></th> |
|
| 32 | 31 |
</tr> |
| 33 | 32 |
</thead> |
| 34 | 33 |
<tbody class="running"> |
| 35 | 34 |
<tr id="machine-template" style="display: none"> |
| 36 | 35 |
<td><input type="checkbox" class="machine" id="node-id" /></td> |
| 37 |
<td><img class="list-logo" src="static/os_logos/node.thumb" width="16" height="16" /></td>
|
|
| 36 |
<td><span class="imagetag"></span><img class="list-logo" src="" width="16" height="16" /></td>
|
|
| 38 | 37 |
<td><a class="name"><span class="name">node.name</span></a></td> |
| 39 | 38 |
<td><a class="ip"><span class="public">node.public_ip</span></a></td> |
| 40 | 39 |
<td>group</td> |
| ... | ... | |
| 57 | 56 |
<tbody class="terminated"></tbody> |
| 58 | 57 |
</table> |
| 59 | 58 |
</div> |
| 59 |
|
|
| 60 |
|
|
| 61 |
<script> |
|
| 62 |
$(function() {
|
|
| 63 |
$(".destroy").click(function() {
|
|
| 64 |
$.ajax({
|
|
| 65 |
url: '/api/v1.0/servers/1234', |
|
| 66 |
//SERVER ID HERE |
|
| 67 |
type: "DELETE", |
|
| 68 |
dataType: "json", |
|
| 69 |
success: function(data) {}
|
|
| 70 |
}); |
|
| 71 |
} |
|
| 72 |
</script> |
|
| b/ui/templates/machines.html | ||
|---|---|---|
| 20 | 20 |
<div class="indicator"></div> |
| 21 | 21 |
<div class="indicator"></div> |
| 22 | 22 |
</div> |
| 23 |
<img class="logo" src="path/to/logos" />
|
|
| 23 |
<img class="logo" src="" /> |
|
| 24 | 24 |
<a href="#" class="name"> |
| 25 | 25 |
<h5>Νame: <span class="name">node.name</span><span class="rename"></span></h5> |
| 26 | 26 |
</a> |
| ... | ... | |
| 68 | 68 |
<li id="image-template" style="display:none"> |
| 69 | 69 |
<label for="image.id"> |
| 70 | 70 |
<a><div class="image"> |
| 71 |
<img src="static/os_logos/image.logo" class="image-logo"/>
|
|
| 71 |
<img src="" class="image-logo"/> |
|
| 72 | 72 |
<strong class="image-title">image.title</strong> |
| 73 | 73 |
<input class="radio" type="radio" name="image-id" id="image-id" /> |
| 74 | 74 |
<br /> |
| ... | ... | |
| 198 | 198 |
20: 'ubuntu', |
| 199 | 199 |
}; |
| 200 | 200 |
|
| 201 |
// populate listings of machines |
|
| 202 | 201 |
function update() {
|
| 203 | 202 |
|
| 204 | 203 |
$(".running").text('');
|
| ... | ... | |
| 209 | 208 |
$.ajax({
|
| 210 | 209 |
url: '/api/v1.0/servers/detail', |
| 211 | 210 |
type: "GET", |
| 212 |
//async: false,
|
|
| 211 |
// async: false,
|
|
| 213 | 212 |
dataType: "json", |
| 214 | 213 |
success: function(data) {
|
| 215 | 214 |
$.each(data.servers, function(i,server){
|
| ... | ... | |
| 218 | 217 |
machine.find("a.name span.name").text(server.name);
|
| 219 | 218 |
machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');
|
| 220 | 219 |
machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
|
| 221 |
machine.find("a.ip span.public").text(String(server.addresses.public));
|
|
| 220 |
machine.find("img.list-logo").attr("title",image_tags[server.imageId]);
|
|
| 221 |
machine.find("span.imagetag").text(image_tags[server.imageId]);
|
|
| 222 |
|
|
| 223 |
machine.find("a.ip span.public").text(String(server.addresses.public).replace(',',' '));
|
|
| 222 | 224 |
|
| 223 | 225 |
if (server.status == 'PE_VM_MIGRATING'){
|
| 224 | 226 |
machine.find(".status").text('Building');
|
| ... | ... | |
| 239 | 241 |
}); |
| 240 | 242 |
$("div.machine:last-child").find("div.seperator").hide();
|
| 241 | 243 |
$("#spinner").hide();
|
| 244 |
$(".list table").show();
|
|
| 242 | 245 |
$(".list table").tablesorter({
|
| 243 |
headers: { 0: { sorter: false}, 1: {sorter: false} },
|
|
| 246 |
headers: { 0: { sorter: false}, 6: { sorter: false }},
|
|
| 244 | 247 |
sortMultiSortKey: "ctrlKey" }).show(); |
| 245 | 248 |
$(".list .actions").show();
|
| 246 | 249 |
} |
| ... | ... | |
| 249 | 252 |
$.ajax({
|
| 250 | 253 |
url: '/api/v1.0/images/detail', |
| 251 | 254 |
type: "GET", |
| 252 |
//async: false,
|
|
| 255 |
// async: false,
|
|
| 253 | 256 |
dataType: "json", |
| 254 | 257 |
success: function(data) {
|
| 255 | 258 |
$.each(data.images, function(i,image){
|
| ... | ... | |
| 267 | 270 |
}); |
| 268 | 271 |
} |
| 269 | 272 |
}); |
| 270 |
} |
|
| 271 | 273 |
|
| 272 |
update(); |
|
| 273 |
|
|
| 274 |
// reboot action |
|
| 275 |
$(".reboot").click(function(event) {
|
|
| 274 |
//TESTING $.ajax POST+DELETE. api/handlers.py/ServerHandler and ServerActionHandler receive these calls |
|
| 275 |
//DELETE is working, while POST is not (maybe this has to do with piston+django csrf? |
|
| 276 |
/* |
|
| 276 | 277 |
$.ajax({
|
| 277 | 278 |
url: '/api/v1.0/servers/1234/action', |
| 278 | 279 |
type: "POST", |
| 279 | 280 |
data: {
|
| 280 |
"reboot": {"type" : "HARD"}
|
|
| 281 |
}, |
|
| 281 |
"reboot": {
|
|
| 282 |
"type" : "HARD" |
|
| 283 |
} |
|
| 284 |
}, |
|
| 282 | 285 |
dataType: "json", |
| 283 |
success: function() {}
|
|
| 284 |
}); |
|
| 285 |
}); |
|
| 286 |
success: function() {
|
|
| 287 |
} |
|
| 288 |
}); |
|
| 289 |
|
|
| 290 |
|
|
| 286 | 291 |
|
| 287 |
// destroy action |
|
| 288 |
$(".destroy").click(function(event) {
|
|
| 289 | 292 |
$.ajax({
|
| 290 | 293 |
url: '/api/v1.0/servers/1234', |
| 291 | 294 |
type: "DELETE", |
| 292 |
//async: false,
|
|
| 295 |
// async: false,
|
|
| 293 | 296 |
dataType: "json", |
| 294 |
success: function(data) {}
|
|
| 295 |
}); |
|
| 296 |
}); |
|
| 297 |
success: function(data) {
|
|
| 298 |
} |
|
| 299 |
}); |
|
| 300 |
*/ |
|
| 301 |
//DELETE TILL HERE |
|
| 302 |
} |
|
| 303 |
|
|
| 304 |
|
|
| 305 |
|
|
| 306 |
update(); |
|
| 297 | 307 |
|
| 298 |
// switch to list view |
|
| 299 | 308 |
$("#list").click(function(event){
|
| 300 | 309 |
$("div.standard#machinesview").load($("#list").attr("href"));
|
| 301 | 310 |
$("a#standard")[0].className += ' activelink'
|
| ... | ... | |
| 304 | 313 |
return false; |
| 305 | 314 |
}); |
| 306 | 315 |
|
| 307 |
// switch to standard view |
|
| 308 | 316 |
$("a#standard").click(function(event){
|
| 309 | 317 |
href=$("a#standard").attr("href");
|
| 310 | 318 |
$("div.pane#machines-pane").load(href);
|
Also available in: Unified diff