Statistics
| Branch: | Tag: | Revision:

root / ui / templates / list.html @ e2ccad35

History | View | Annotate | Download (10.2 kB)

1
{% load i18n %}
2

    
3
<div id="machinesview" class="list">
4
    <div id="spinner"></div>
5
    <div class="actions">
6
        <a id="action-start">Start</a>
7
        <a id="action-reboot">Reboot</a>
8
        <a id="action-shutdown">Shutdown</a>
9
        <br />
10
        <a id="action-destroy">Destroy</a>
11
        <br />
12
        <a id="action-details">Show Details</a>
13
        <a id="action-group">Add to group</a>
14
        <br />
15
        <a id="action-band">Out of band</a>
16
        <br />
17
        <a id="action-attach">Attach disk</a>
18
        <a id="action-detach">Detach disk</a>
19
        <br />
20
        <a id="action-connect">Connect to network</a>
21
        <a id="action-disconnect">Disconnect from net</a>
22
    </div>
23
    <table class="list-machines" style="display: none">
24
        <thead> 
25
            <tr> 
26
                <th id="selection" class="select-running">
27
                    <input type="checkbox"/>
28
                    <div class="expand-icon"></div>          
29
                </th>
30
                <th id="os">OS</th> 
31
                <th id="name">Name</th> 
32
                <th id="ip">IP</th> 
33
                <th id="group">Group</th>
34
                <th id="status">Status</th> 
35
            </tr>
36
        </thead> 
37
        <tbody class="machines"></tbody>
38
    </table>
39
        <ul class="dropdown-selector" style="display: none">
40
                <li class="select-all" ><a href="#">all</a></li>
41
                <li class="select-none"><a href="#">none</a></li>
42
                <li class="select-group"><a href="#">group</a></li>
43
        </ul>  
44
</div>
45

    
46
<script>
47

48
// select/deselect all from checkbox widget of table headers
49
$("table thead tr th#selection :checkbox").live('change', function() {
50
    if ( $(this).is(":checked") ) {
51
        $(":checkbox").attr("checked", true);
52
    }
53
    else {
54
        $(":checkbox").attr("checked", false);
55
    }
56
        updateActions();
57
        return false;
58
});
59

60
// select all from drop down menu
61
$("ul.dropdown-selector li.select-all a").live('click', function() {
62
        $(":checkbox").attr("checked", true);
63
    $(".dropdown-selector").slideToggle('medium');
64
        return false;        
65
});
66

67
// select none from drop down menu
68
$("ul.dropdown-selector li.select-none a").live('click', function() {
69
        $(":checkbox").attr("checked", false);
70
    $(".dropdown-selector").slideToggle('medium');
71
        return false;        
72
});
73

74
// select group from drop down menu
75
$("ul.dropdown-selector li.select-group a").live('click', function() {
76
        $(":checkbox").attr("checked", true);
77
    $(".dropdown-selector").slideToggle('medium');
78
        return false;
79
});
80

81
// menu toggle, running menu
82
$("table.list-machines thead tr th#selection .expand-icon").click( function (obj) {
83
        $(".dropdown-selector").slideToggle('medium');
84
    return false;
85
});
86

87
// TODO: This should be populated with more rules for all available states
88
var actions = { 'reboot':                ['ACTIVE', 'REBOOT', 'multiple'],
89
                                'shutdown':                ['ACTIVE', 'REBOOT', 'multiple'],
90
                                'connect':                ['ACTIVE', ],
91
                                'disconnect':        ['ACTIVE', 'network'],
92
                                'band':                        ['ACTIVE', 'REBOOT'],
93
                                'details':                ['ACTIVE', 'REBOOT', 'STOPPED'],
94
                                'start':                 ['STOPPED', 'multiple'],
95
                                'destroy':                ['ACTIVE', 'STOPPED', 'REBOOT', 'ERROR', 'multiple'],
96
                                'group':                ['ACTIVE', 'STOPPED', 'REBOOT','multiple'],
97
                           };
98

99
// on checkbox click, update the actions
100
$("tbody input[type='checkbox']").live('change', function() { 
101
    updateActions();
102
    pending_actions = [];
103
    $(".selected").removeClass('selected');
104
    update_confirmations(); 
105
});
106

107
$("div.confirm_multiple button").click(function() {
108
    $(".selected").removeClass('selected');
109
});
110

111
// destroy action
112
$("a.enabled#action-destroy").live('click', function() {
113
        var checked = $("table.list-machines tbody input[type='checkbox']:checked");
114
    $(".selected").removeClass('selected');
115
    $(this).addClass('selected');
116
        pending_actions = []; // reset pending actions
117
        checked.each(function(i,c) {
118
                serverID=c.id;
119
                serverName = $('#'+serverID+' span.name').text();
120
                pending_actions.push([destroy, serverID]);
121
        });
122
        update_confirmations();
123
        return false;
124
});
125

126
$("a.enabled#action-reboot").live('click', function() {
127
        var checked = $("table.list-machines tbody input[type='checkbox']:checked");
128
    $(".selected").removeClass('selected');
129
    $(this).addClass('selected');
130
        pending_actions = []; // reset pending actions
131
        checked.each(function(i,c) {
132
                serverID=c.id;
133
                serverName = $('#'+serverID+' span.name').text();
134
                pending_actions.push([reboot, serverID]);
135
        });
136
        update_confirmations();
137
        return false;
138
});
139

140
$("a.enabled#action-start").live('click', function() {
141
        var checked = $("table.list-machines tbody input[type='checkbox']:checked");
142
    $(".selected").removeClass('selected');
143
    $(this).addClass('selected');
144
        pending_actions = []; // reset pending actions
145
        checked.each(function(i,c) {
146
                serverID=c.id;
147
                serverName = $('#'+serverID+' span.name').text();
148
                pending_actions.push([start, serverID]);
149
        });
150
        update_confirmations();
151
        return false;
152
});
153

154
$("a.enabled#action-shutdown").live('click', function() {
155
        var checked = $("table.list-machines tbody input[type='checkbox']:checked");
156
    $(".selected").removeClass('selected');
157
    $(this).addClass('selected');
158
        pending_actions = []; // reset pending actions
159
        checked.each(function(i,c) {
160
                serverID=c.id;
161
                serverName = $('#'+serverID+' span.name').text();
162
                pending_actions.push([shutdown, serverID]);
163
        });
164
        update_confirmations();
165
        return false;
166
});
167

168
function update_machines_view(data){
169
    /* 
170
    Go through the servers in the input data. Update existing entries, add
171
    new ones to the list
172
    */
173
        tableData = vmTable.fnGetData();
174
    $.each(data.servers, function(i,server){        
175
        current = -1;
176
        // check server status to select the appropriate OS icon
177
        osTag = image_tags[server.imageRef]
178
        var osIcon = osTag + ".png", imgStr, imgSrc;
179

180
                // check if the server already exists in the datatable
181
                tableData.forEach(function(row,index){
182
                        
183
                        if (row[0].split(' ')[2].replace('id=','') == server.id){
184
                                current = index;
185
                        } 
186
                });
187
        
188
        if (current != -1){ // if it's there, simply update the values
189
                        try {
190
                                console.info(server.name + ' from ' 
191
                                                        + tableData[current][5] + ' to ' + STATUS_MESSAGES[server.status]);
192
                        } catch(err) {}                
193
                        if (server.status == "DELETED") {
194
                                vmTable.fnDeleteRow(current);        
195
                        } else { // server exists and should not be deleted                
196
                // check server status to select the appropriate OS icon
197
                if (['ERROR', 'STOPPED'].indexOf(server.status) >= 0) {
198
                    osIcon = osTag + "-off.png";
199
                }
200
                                // if the new state does not differ from the previous one
201
                                if (tableData[current][5].indexOf(STATUS_MESSAGES[server.status]) > -1){
202
                                        // do nothing
203
                                } else { // state has changed
204
                                        //$('#'+server.id).parent().parent().find('.list-logo').attr('src').indexOf('wave')>-1){
205
                                        
206
                                        imgSrc = "static/wave.gif";
207
                                        tableData[current][0] = "<input class="+server.status+" id="+server.id+" type=checkbox>";
208
                                        imgStr = "<img class=list-logo src=" + imgSrc + " title=" + osTag + " height=16 width=16 />";
209
                                        tableData[current][1] = "<span class=imagetag>" + osTag + "</span>" + imgStr;
210
                                        tableData[current][2] = "<a class=name><span class=name>" + server.name + "</span></a>";
211
                                        tableData[current][3] = "<a class=ip><span class=public>"+ server.addresses.public.ip.addr + "</span></a>";
212
                                        //tableData[current][4] = "group"; //TODO
213
                                        tableData[current][5] = "<span class=status>" + STATUS_MESSAGES[server.status] + "</span>";
214
                                        vmTable.fnUpdate(tableData[current],current);
215

216
                                        //try{console.info('vm ' + server.id + ' from ' + tableData[current][5] + ' to ' + STATUS_MESSAGES[server.status])} catch(err) {}                                                
217
                                        setTimeout("$('#"+server.id+"').parent().parent().find('.list-logo').attr('src','static/os_logos/" + osIcon+"')", 2000);                                        
218
                                }
219
                        }
220
                        updateActions();
221
        } else if (server.status != "DELETED") { // does not exist, we should create it
222
            // check server status to select the appropriate OS icon
223
            if (['ERROR', 'STOPPED'].indexOf(server.status) >= 0) {
224
                osIcon = osTag + "-off.png";
225
            }
226
            // add new row to the table
227
            vmTable.fnAddData([
228
                "<input class=" + server.status + " id=" + server.id + " type=checkbox>",
229
                "<span class=imagetag>" + osTag + "</span><img class=list-logo src=static/os_logos/" + osIcon +
230
                    " title=" + osTag + " height=16 width=16>",
231
                "<a class=name><span class=name>" + server.name + "</span></a>",
232
                "<a class=ip><span class=public>"+ server.addresses.public.ip.addr + "</span></a>",
233
                "group",
234
                "<span class=status>" + STATUS_MESSAGES[server.status] + "</span>"
235
            ]);
236
        }
237
    });
238
        updateActions();
239
        $("#spinner").hide();        
240
    // in case there are no data, leave the page empty
241
    if ($("div.list table.list-machines tbody").length > 0) {
242
        $("div.list div.dataTables_filter").show();
243
        $("div.list div.dataTables_filter input").show();
244
        $("div.list table.list-machines").show();
245
        $("div.list div.actions").show();
246
    }
247
        
248
        // set confirm box position
249
    if (window.innerHeight - 200 < $('#machinesview').height())
250
        $('.confirm_multiple').addClass('fixed');
251
    else
252
        $('.confirm_multiple').removeClass('fixed');
253
}
254

255
function display_success(serverID) {
256
        // do nothing
257
}
258

259
// indicate that the requested action was not completed
260
function display_failure(serverID, status, action) {
261
        osIcon = $('#'+serverID).parent().parent().find('.list-logo');
262
        osIcon.attr('src',osIcon.attr('os'));
263
    ajax_error(status, serverID);
264
}
265

266
var vmTable = $("div.list table.list-machines").dataTable({
267
    "bInfo": false,
268
    "bRetrieve": true,
269
    "bPaginate": false,
270
    "bAutoWidth": false,
271
    "bSort": true,    
272
    "bStateSave": true,
273
    "sScrollY": "270px",
274
    "sScrollX": "515px",
275
    "sScrollXInner": "500px",
276
    "aoColumnDefs": [
277
        { "bSortable": false, "aTargets": [ 0 ] }
278
    ]
279
});
280

281
if (images.length == 0) {
282
    // populate image list
283
    update_images();
284
}
285
if (flavors.length == 0) {
286
    // configure flavors
287
    update_flavors(); 
288
}
289
// set the label of the multiple buttons 
290
$('div.confirm_multiple button.yes').text('Confirm');
291
$('div.confirm_multiple button.no').text('Cancel');
292
// start updating vm list
293
update_vms(UPDATE_INTERVAL);
294

    
295
</script>