Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines_list.html @ cb748f1f

History | View | Annotate | Download (20.5 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

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

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

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

367
            // if destroy is requested don't change the state
368
            var server = get_machine(server.id);
369
            if (server.status == "DESTROY") {
370
                status_string = TRANSITIONS['Destroying'];
371
                osIcon = "static/icons/indicators/small/progress.gif";
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>