Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines_list.html @ 4b2ed497

History | View | Annotate | Download (20.4 kB)

1
<!--
2
Copyright 2011 GRNET S.A. All rights reserved.
3

4
Redistribution and use in source and binary forms, with or
5
without modification, are permitted provided that the following
6
conditions are met:
7

8
  1. Redistributions of source code must retain the above
9
     copyright notice, this list of conditions and the following
10
     disclaimer.
11

12
  2. Redistributions in binary form must reproduce the above
13
     copyright notice, this list of conditions and the following
14
     disclaimer in the documentation and/or other materials
15
     provided with the distribution.
16

17
THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
18
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
21
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
24
USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
25
AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
26
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
27
ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28
POSSIBILITY OF SUCH DAMAGE.
29

30
The views and conclusions contained in the software and
31
documentation are those of the authors and should not be
32
interpreted as representing official policies, either expressed
33
or implied, of GRNET S.A.
34
-->
35

    
36
{% load i18n %}
37

    
38
<div id="machinesview-list" class="list">
39
    <div class="large-spinner"></div>
40
    <div id="machinesview_content">
41
        <div class="actions">
42
            <a id="action-start">{% trans "Start" %}</a>
43
            <a id="action-reboot">{% trans "Reboot" %}</a>
44
            <a id="action-shutdown">{% trans "Shutdown" %}</a>
45
            <br />
46
            <a id="action-destroy">{% trans "Destroy" %}</a>
47
            <br />
48
            <a id="action-details">{% trans "Show Details" %}</a>
49
            {% comment %}<a id="action-group">{% trans "Add to group" %}</a>{% endcomment %}
50
            <br />
51
            <a id="action-console">{% trans "Console" %}</a>
52
            <a id="action-connect">{% trans "Connect" %}</a>
53
            <br />
54
            {% comment %}
55
            <a id="action-attach">{% trans "Attach disk" %}</a>
56
            <a id="action-detach">{% trans "Detach disk" %}</a>
57
            <br />
58
            <a id="action-network-connect">{% trans "Connect to network" %}</a>
59
            <a id="action-network-disconnect">{% trans "Disconnect from net" %}</a>
60
            {% endcomment %}
61
        </div>
62
        <table class="list-machines" style="display: none">
63
            <thead>
64
                <tr>
65
                    <th class="selection select-running">
66
                        <input type="checkbox"/>
67
                        <!-- Drop down selector is commented out for v0.5
68
                        <div class="expand-icon"></div>
69
                        -->
70
                    </th>
71
                    <th class="vmos">{% trans "OS" %}</th>
72
                    <th class="vmname">{% trans "Name" %}</th>
73
                    <th class="vmflavor">{% trans "Flavor" %}</th>
74
                    <!--  Group column is commented out for v0.5
75
                    <th class="vmgroup">{% trans "Group" %}</th>
76
                    -->
77
                    <th class="vmstatus">{% trans "Status" %}</th>
78
                </tr>
79
            </thead>
80
            <tbody class="machines"></tbody>
81
        </table>
82
        <!-- Drop down selector is commented out for v0.5
83
        <ul class="dropdown-selector" style="display: none">
84
            <li class="select-all" ><a href="#">{% trans "all" %}</a></li>
85
            <li class="select-none"><a href="#">{% trans "none" %}</a></li>
86
            <li class="select-group"><a href="#">{% trans "group" %}</a></li>
87
        </ul>
88
        -->
89
    </div>
90
</div>
91

    
92
<script>
93

94
init_action_indicator_handlers('list');
95

96
// select/deselect all from checkbox widget of table headers
97
$("#machinesview .list table thead tr th.selection input:checkbox").click( function() {
98
    if ( $(this).is(":checked") ) {
99
        $(":checkbox").attr("checked", true);
100
    }
101
    else {
102
        $(":checkbox").attr("checked", false);
103
    }
104
    update_listview_actions();
105
});
106

107
/* Drop down selector is commented out for v0.5
108
// select all from drop down menu
109
$("#machinesview .list ul.dropdown-selector li.select-all a").live('click', function() {
110
    $(":checkbox").attr("checked", true);
111
    $(".dropdown-selector").slideToggle('medium');
112
    update_listview_actions();
113
    return false;
114
});
115

116
// select none from drop down menu
117
$("#machinesview .list ul.dropdown-selector li.select-none a").live('click', function() {
118
    $(":checkbox").attr("checked", false);
119
    $(".dropdown-selector").slideToggle('medium');
120
    update_listview_actions();
121
    return false;
122
});
123

124
// select group from drop down menu
125
$("#machinesview .list ul.dropdown-selector li.select-group a").live('click', function() {
126
    $(":checkbox").attr("checked", true);
127
    $(".dropdown-selector").slideToggle('medium');
128
    update_listview_actions();
129
    return false;
130
});
131

132
// menu toggle, running menu
133
$("#machinesview .list table.list-machines thead tr th.selection .expand-icon").click( function (obj) {
134
    $(".dropdown-selector").slideToggle('medium');
135
    return false;
136
});
137

138
*/
139

140
// TODO: This should be populated with more rules for all available states
141
//a key represents an action, while values are lists with permitted states to which the action can be applied
142
var actions = { 'reboot':        ['UNKOWN', 'ACTIVE', 'REBOOT', 'multiple'],
143
                'shutdown':      ['UNKOWN', 'ACTIVE', 'REBOOT', 'multiple'],
144
                'connect':       ['UNKOWN', 'ACTIVE'],
145
                //'network-connect':       ['UNKOWN', 'ACTIVE'],
146
                //'network-disconnect':    ['UNKOWN', 'ACTIVE', 'network'],
147
                'console':       ['UNKOWN', 'ACTIVE', 'multiple'],
148
                'details':       ['UNKOWN', 'ACTIVE', 'REBOOT', 'STOPPED'],
149
                'start':         ['UNKOWN', 'STOPPED', 'multiple'],
150
                'destroy':       ['UNKOWN', 'ACTIVE', 'STOPPED', 'REBOOT', 'ERROR', 'BUILD', 'multiple']
151
                //'group':         ['UNKOWN', 'ACTIVE', 'STOPPED', 'REBOOT','multiple'],
152
               };
153

154
// on checkbox click, update the actions
155
$("#machinesview .list tbody input[type='checkbox']").live('click', function() {
156
    update_listview_actions();
157
    pending_actions = [];
158
    $(".selected").removeClass('selected');
159
});
160

161
// destroy action
162
$("#machinesview .list a.enabled#action-destroy").live('click', function() {
163
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
164
    $("#machinesview .list .selected").removeClass('selected');
165
    $(this).addClass('selected');
166
    pending_actions = []; // reset pending actions
167
    checked.each(function(i,c) {
168
        serverID=c.id;
169
        serverName = $('#machinesview .list #'+serverID+' span.name').text();
170
        pending_actions.push([destroy, serverID]);
171
    });
172
    update_confirmations();
173
    return false;
174
});
175

176
$("#machinesview .list a.enabled#action-reboot").live('click', function() {
177
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
178
    $("#machinesview .list .selected").removeClass('selected');
179
    $(this).addClass('selected');
180
    pending_actions = []; // reset pending actions
181
    checked.each(function(i,c) {
182
        serverID=c.id;
183
        serverName = $('#machinesview .list #'+serverID+' span.name').text();
184
        pending_actions.push([reboot, serverID]);
185
    });
186
    update_confirmations();
187
    return false;
188
});
189

190
$("#machinesview .list a.enabled#action-start").live('click', function() {
191
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
192
    $("#machinesview .list .selected").removeClass('selected');
193
    $(this).addClass('selected');
194
    pending_actions = []; // reset pending actions
195
    checked.each(function(i,c) {
196
        serverID=c.id;
197
        serverName = $('#machinesview .list #'+serverID+' span.name').text();
198
        pending_actions.push([start, serverID]);
199
    });
200
    update_confirmations();
201
    return false;
202
});
203

204
$("#machinesview .list a.enabled#action-shutdown").live('click', function() {
205
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
206
    $("#machinesview .list .selected").removeClass('selected');
207
    $(this).addClass('selected');
208
    pending_actions = []; // reset pending actions
209
    checked.each(function(i,c) {
210
        serverID=c.id;
211
        serverName = $('#machinesview .list #'+serverID+' span.name').text();
212
        pending_actions.push([shutdown, serverID]);
213
    });
214
    update_confirmations();
215
    return false;
216
});
217

218
$("#machinesview .list a.enabled#action-console").live('click', function() {
219
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
220
    $("#machinesview .list .selected").removeClass('selected');
221
    $(this).addClass('selected');
222
    pending_actions = []; // reset pending actions
223
    checked.each(function(i,c) {
224
        serverID=c.id;
225
        serverName = $('#machinesview .list #'+serverID+' span.name').text();
226
        pending_actions.push([open_console, serverID]);
227
    });
228
    update_confirmations();
229
    return false;
230
});
231

232
$("#machinesview .list a.enabled#action-connect").live('click', function() {
233
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
234
    $("#machinesview .list .selected").removeClass('selected');
235
    $(this).addClass('selected');
236
    pending_actions = []; // reset pending actions
237
    checked.each(function(i,c) {
238
        serverID=c.id;
239
        serverName = $('#machinesview .list #'+serverID+' span.name').text();
240
        pending_actions.push([machine_connect, serverID]);
241
    });
242
    update_confirmations();
243
    return false;
244
});
245

246

247
$("#machinesview .list a.enabled#action-details").live('click', function() {
248
    var checked = $("#machinesview .list table.list-machines tbody input[type='checkbox']:checked");
249
    $("#machinesview .list .selected").removeClass('selected');
250
    $(this).addClass('selected');
251
    pending_actions = []; // reset pending actions
252
    checked.each(function(i,c) {
253
        serverID=c.id;
254
    });
255
    $.cookie('server', serverID);
256
    $('a#single').click();
257
    return false;
258
});
259

260

261
function update_machines_view(data){
262
    /*
263
    Go through the servers in the input data. Update existing entries, add
264
    new ones to the list
265
    */
266
    tableData = vmTable.fnGetData();
267

268
    $.each(data.servers.values, function(i,server){
269
        var server = get_machine(server.id);
270

271
        current = -1;
272
        // check server status to select the appropriate OS icon, defaults to on state
273
        osTag = os_icon(server.metadata);
274
        var osIcon = osTag + "-on.png", imgStr, imgSrc;
275
        // check if the server already exists in the datatable
276
        if (tableData.length > 0) {
277
            tableData.forEach(function(row,index){
278
                if (row[0].split(' ')[2].replace('id=','') == server.id){
279
                    current = index;
280
                }
281
            });
282
        }
283
        if (current != -1) { // if it's there, update the values
284
            // get current status description, including non api states
285
            var server_row = $('#machinesview .list #' + server.id).parent().parent();
286
            var status_desc = server_row.find('span.status').text();
287
            // firebug console logging
288
            try {
289
                console.info(server.name + ' from ' + status_desc + ' to ' + STATUSES[server.status]);
290
            } catch(err) {}
291
            // when server is in deleted status it must be removed from the list
292
            if (server.status == "DELETED") {
293
                vmTable.fnDeleteRow(current);
294
            } else { // when server is not deleted, it should be updated
295
                if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&
296
                    [STATUSES['STOPPED'], STATUSES['ERROR'], STATUSES['UNKNOWN'],
297
                     TRANSITIONS['Starting']].indexOf(server_row.find('span.status').text()) >= 0) {
298
                    // from stopped, on error or starting to building, active or rebooting
299
                    // starting is not an api state, it means the server is stopped or on error
300
                    tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";
301
                    imgSrc = "static/icons/indicators/small/wave.gif";
302
                    imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + "></img>";
303
                    tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;
304
                    tableData[current][2] = "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>";
305
                    //tableData[current][4] = "group"; //TODO
306
                    tableData[current][5] = "<span class=status>" + STATUSES[server.status] + "</span>";
307
                    vmTable.fnUpdate(tableData[current],current);
308
                    setTimeout("$('#machinesview .list #"+server.id+"').parent().parent().find('.list-logo').attr('src','static/icons/machines/small/" + osIcon + "')", 1600);
309
                } else if (['STOPPED','ERROR', 'UNKNOWN'].indexOf(server.status) >= 0 &&
310
                           [STATUSES['ACTIVE'], STATUSES['BUILD'], STATUSES['REBOOT'],
311
                            TRANSITIONS['Shutting down']].indexOf(server_row.find('span.status').text()) >= 0) {
312
                    tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";
313
                    imgSrc = "static/icons/indicators/small/wave.gif";
314
                    imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + "></img>";
315
                    tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;
316
                    tableData[current][2] = "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>";
317
                    //tableData[current][4] = "group"; //TODO
318
                    tableData[current][4] = "<span class=status>" + STATUSES[server.status] + "</span>";
319
                    vmTable.fnUpdate(tableData[current],current);
320
                    setTimeout("$('#machinesview .list #"+server.id+"').parent().parent().find('.list-logo').attr('src','static/icons/machines/small/" + osTag + "-off.png')", 1600);
321
                } else if ( STATUSES[server.status] == server_row.find('span.status').text()) {
322

323
                } else if (server.status == 'ACTIVE' &&
324
                           [STATUSES['BUILD'],TRANSITIONS['Rebooting']].indexOf(server_row.find('span.status').text()) >= 0) {
325
                    tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";
326
                    imgSrc = "static/icons/indicators/small/wave.gif";
327
                    imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + "></img>";
328
                    tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;
329
                    tableData[current][2] = "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>";
330
                    //tableData[current][4] = "group"; //TODO
331
                    tableData[current][4] = "<span class=status>" + STATUSES[server.status] + "</span>";
332
                    vmTable.fnUpdate(tableData[current],current);
333
                    setTimeout("$('#machinesview .list #"+server.id+"').parent().parent().find('.list-logo').attr('src','static/icons/machines/small/" + osIcon + "')", 1600);
334
                }
335
            }
336
            update_listview_actions();
337
        } else if (server.status != "DELETED") { // does not exist, we should create it
338
            // check server status to select the appropriate OS icon
339
            if (['ERROR', 'STOPPED', 'UNKNOWN'].indexOf(server.status) >= 0) {
340
                osIcon = "static/icons/machines/small/" + osTag + "-off.png";
341
            } else if ( server.status == 'BUILD' || server.status == "DESTROY" ) {
342
                osIcon = "static/icons/indicators/small/progress.gif";
343
            } else {
344
                osIcon = "static/icons/machines/small/" + osTag + "-on.png";
345
            }
346
            // find flavor parameters
347
            var flavorLabel;
348
            if ( flavors.length > 0 ) {
349
                var current_flavor = '';
350
                for (i=0; i<flavors.length; i++) {
351
                    if (flavors[i]['id'] == server.flavorRef) {
352
                        current_flavor = flavors[i];
353
                    }
354
                }
355
                var flavor_label = '';
356
                if (current_flavor['cpu'] == '1') {
357
                    flavorLabel = '1 CPU, ';
358
                } else {
359
                    flavorLabel = current_flavor['cpu'] + ' CPUs, ';
360
                }
361
                flavorLabel = flavorLabel + current_flavor['ram'] + 'MB, ' + current_flavor['disk'] + 'GB';
362
            } else {
363
                flavorLabel = 'No flavor data';
364
            }
365

366
            var status_string = STATUSES[server.status];
367

368
            // if destroy is requested don't change the state
369
            var server = get_machine(server.id);
370
            if (server.status == "DESTROY") {
371
                status_string = TRANSITIONS['Destroying'];
372
            }
373

374
            // add new row to the table
375
            vmTable.fnAddData([
376
                "<input class=" + server.status + " id=" + server.id + " type=checkbox>",
377
                "<span class=imagetag>" + osTag + "</span><img class=list-logo src=" + osIcon +
378
                    " title=" + osTag + ">",
379
                "<a class=name><span class=name>" + server.name.substring(0,60) + "</span></a>",
380
                "<a class=flavor><span>"+ flavorLabel + "</span></a>",
381
                //"group",
382
                "<span class=status>" + status_string + "</span>"
383
            ]);
384
        }
385
    });
386
    update_listview_actions();
387
    $("#machinesview .list > div.large-spinner").hide();
388
    // in case there are no data, leave the page empty
389
    if ($("#machinesview .list table.list-machines tbody").length > 0) {
390
        $("#machinesview .list div.dataTables_filter").show();
391
        $("#machinesview .list div.dataTables_filter input").show();
392
        $("#machinesview .list table.list-machines").show();
393
        $("#machinesview .list div.actions").show();
394
    }
395

396
    // show message in case user has no servers!
397
    if ($("#machinesview .list tbody.machines .dataTables_empty").length > 0) {
398
        standard_view();
399
    } else {
400
        hideWelcome();
401
        $("#machinesview_content").fadeIn("fast");
402
    }
403

404
    // set confirm box position
405
    if (window.innerHeight - 200 < $('#machinesview').height())
406
        $('.confirm_multiple').addClass('fixed');
407
    else
408
        $('.confirm_multiple').removeClass('fixed');
409

410
    $('#machinesview .list .dataTables_scrollHeadInner table').attr('style','');
411
    $('#machinesview .list .dataTables_scrollHeadInner th').attr('style','');
412
}
413

414
function display_success(serverID) {
415
    // do nothing
416
}
417

418
// indicate that the requested action was not completed
419
function display_failure(status, serverID, action, responseText) {
420
    osIcon = $('#machinesview .list #'+serverID).parent().parent().find('.list-logo');
421
    osIcon.attr('src',osIcon.attr('os'));
422
    ajax_error(status, serverID, action, responseText);
423
}
424

425
var vmTable = $("div.list table.list-machines").dataTable({
426
    "bInfo": false,
427
    "bRetrieve": true,
428
    "bPaginate": false,
429
    "bAutoWidth": false,
430
    "bSort": true,
431
    "bStateSave": true,
432
    "sScrollXInner": "500px",
433
    "aoColumnDefs": [
434
        { "bSortable": false, "aTargets": [ 0 ] }
435
    ]
436
});
437

438
// basic functions executed on page load
439
if ( flavors.length == 0 && images.length == 0 ) {
440
    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)
441
    update_flavors();
442
    // populate image list
443
    update_images();
444
} else if ( flavors.length == 0 && images.length != 0 ) {
445
    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)
446
    update_flavors();
447
} else if ( flavors.length != 0 && images.length == 0 ) {
448
    // populate image list
449
    update_images();
450
    update_vms(UPDATE_INTERVAL);
451
} else {
452
    // start updating vm list
453
    update_vms(UPDATE_INTERVAL);
454
}
455

456
// reposition multiple confirmation box on window resize
457
$(window).resize(function(){
458
    if (this.innerHeight - 200 < $('#machinesview').height())
459
        $('.confirm_multiple').addClass('fixed');
460
    else
461
        $('.confirm_multiple').removeClass('fixed');
462
});
463

464
// set the label of the multiple buttons
465
$('.confirm_multiple button.yes').text(VARIOUS["CONFIRM"]);
466
$('.confirm_multiple button.no').text(VARIOUS["CANCEL"]);
467
</script>