Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines_single.html @ deb9d144

History | View | Annotate | Download (20.5 kB)

1
{% load i18n %}
2

    
3
<!-- the single view -->
4
<div id="machinesview-single" class="single">
5
    <div class="large-spinner"></div>
6
    <div class="single-container" id="machine-container-template" style="display:none;" >
7
        <div class="column1">
8
            <img src="static/icons/machines/large/ubuntu-on.png" class="single-image" />
9
            <div class="state">
10
                <span class="state-label">{% trans "Running" %}</span>
11
            </div>
12
            <div class="single-actions">
13
                <div class="single-action action-start">{% trans "Start" %}</a></div>
14
                <div class="single-action action-console">{% trans "Console" %}</a></div>
15
                <div class="single-action action-reboot">{% trans "Reboot" %}</a></div>
16
                <div class="single-action action-shutdown">{% trans "Shutdown" %}</a></div>
17
                <div class="single-action action-destroy">{% trans "Destroy" %}</a></div>
18
            </div>
19
        </div>
20
        <div class="column2">
21
            <div class="machine-labels">
22
                <div class="machine-label name">{% trans "Name" %}:</div>
23
                <div class="machine-label cpus">{% trans "CPUs" %}:</div>
24
                <div class="machine-label ram">{% trans "RAM (MB)" %}:</div>
25
                <div class="machine-label disk">{% trans "System Disk (GB)" %}:</div>
26
                <div class="machine-label image-name">{% trans "Image Name" %}:</div>
27
                <div class="machine-label image-size">{% trans "Image Size (GB)" %}:</div>
28
                <div class="machine-label ipv4">{% trans "Public IPv4" %}:</div>
29
                <div class="machine-label ipv6">{% trans "Public IPv6" %}:</div>
30
                <div class="machine-label groups">{% trans "Groups" %}:</div>
31
            </div>
32
            <div class="machine-details">
33
                <div class="machine-detail name">My Desktop</div>
34
                <div class="machine-detail cpus">4</div>
35
                <div class="machine-detail ram">2048</div>
36
                <div class="machine-detail disk">100</div>
37
                <div class="machine-detail image-name">windos_XP_blah_blah</div>
38
                <div class="machine-detail image-size">2.3</div>
39
                <div class="machine-detail ipv4">no ipv4</div>
40
                <div class="machine-detail ipv6">2001:db8:1f70::999:de8:7648:6e8</div>
41
                <div class="machine-detail groups">
42
                    <div class="machine-detail group">group</div>
43
                </div>
44
            </div>
45
        </div>
46
        <div class="disks">
47
            {% trans "disks" %}<span class="toggler">&#710;</span>
48
        </div>
49
        <div class="disks-content">
50

    
51
        </div>
52
        <div class="networks">
53
            {% trans "networks" %}<span class="toggler">&#710;</span>
54
        </div>
55
        <div class="networks-content">
56

    
57
        </div>
58
        <div class="stats">
59
            {% trans "stats" %}<span class="toggler">&#710;</span>
60
        </div>
61
        <div class="stats-content">
62

    
63
        </div>
64
    </div>
65
    <div class="column3">
66
        <div class="controls">
67
            <div class="previous">
68
                &lt;{% trans "previous" %}
69
            </div>
70
            <div class="next">
71
                {% trans "next" %}&gt;
72
            </div>
73
        </div>
74
        <div class="separator">
75
        </div>
76
        <div class="servers">
77
            <div class="server-name" id="servers-widget-template" style="display:none;">server1</div>
78
        </div>
79
    </div>
80
</div>
81

    
82
<script>
83

84
//hide the all of the info contents
85
$("#machinesview-single.single .disks-content").hide();
86
$("#machinesview-single.single .networks-content").hide();
87
$("#machinesview-single.single .stats-content").hide();
88

89
// intercept start click
90
$("#machinesview-single.single div.action-start").live('click', function(){
91
    var serverID = $(this).parent().parent().parent().attr("id");
92
    var serverName = $(this).parent().parent().parent().find(".machine-details div.name").text();
93
    var found = false;
94
    $(this).parent().children('a').removeClass('selected');
95
    $(this).addClass('selected');
96
    $(this).parent().addClass('display')
97
    $(this).parent().parent().find('.action_error').hide();
98

99
    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
100
        if (pending_actions[i][1]==serverID){
101
            pending_actions[i][0] = start;
102
            found = true
103
        }
104
    }
105
    if (!found) // no pending action for this server was found, so let's just add it to the list
106
        pending_actions.push([start, serverID, serverName])
107
    update_confirmations()
108
    return false;
109
});
110

111
// update the servers list
112
function update_machines_view(data){
113
    /*
114
    Go through the servers in the input data. Update existing entries, add
115
    new ones to the list
116
    */
117
    $.each(data.servers.values, function(i,server){
118

119
        existing = $('#machinesview-single.single #' + server.id);
120

121
        //hide next button if there is only one vm
122
        if (data.servers.values.length == 1) {
123
            $("#machinesview-single.single .column3 .next").hide();
124
        }
125

126
        // if multiple machines exist in the DOM, delete all but one
127
        // defensive coding - that shouldn't happen normally
128
        while (existing.length > 1){
129
            existing.remove();
130
        }
131

132
        var server_image = os_icon(server.metadata);
133

134
        // server already exists in DOM
135
        if (existing.length){
136
            $("#machinesview-single.single div.single-container:last-child").find("div.separator").show();
137
            //  if the status is deleted, delete it from the DOM
138
            if (server.status == 'DELETED') {
139
                existing.remove();
140
                try {
141
                    console.info(existing.find("div.name span.name").text() + ' removed');
142
                } catch(err) {}
143
            } else if (existing.find(".status").text() != STATUSES[server.status]) {
144
                try { // firebug console logging
145
                    console.info(existing.find("div.name span.name").text() + ' from '
146
                                + existing.find(".status").text() + ' to ' + STATUSES[server.status]);
147
                } catch(err) {}
148
                // show console action only on active servers, else hide it
149
                if (server.status == 'ACTIVE') {
150
                    $('#machinesview-single.single div.#' + server.id + ' div.action-console').show();
151
                } else {
152
                    $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();
153
                }
154
                // show reboot and shutdown actions on active of rebooting servers
155
                if (server.status == 'ACTIVE' || server.status == 'REBOOT') {
156
                    $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').show();
157
                    $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').show();
158
                    $('#machinesview-single.single div.#' + server.id + ' div.action-destroy').show();
159
                }
160
                if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&
161
                    [STATUSES['STOPPED'], STATUSES['ERROR'],
162
                     TRANSITIONS['Starting']].indexOf(existing.find(".status").text()) >= 0) {
163
                    // from stopped, on error or starting to building, active or rebooting
164
                    // starting is not an api state, it means the vm is stopped or on error
165
                    existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-on.png');
166
                    existing.find(".state-label").text(STATUSES[server.status]);
167
                } else if (['STOPPED','ERROR'].indexOf(server.status) >= 0 &&
168
                           [STATUSES['ACTIVE'], STATUSES['BUILD'], STATUSES['REBOOT'],
169
                            TRANSITIONS['Shutting down'], TRANSITIONS['Starting']].indexOf(existing.find(".status").text()) >= 0) {
170
                    // from active, building, rebooting, or shutting down to stopped or on error
171
                    // shutting down is not an api state, it means the server is active
172
                    existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-off.png');
173
                    existing.find(".state-label").text(STATUSES[server.status]);
174
                } else if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&
175
                            [STATUSES['ACTIVE'], STATUSES['BUILD'],
176
                             STATUSES['REBOOT']].indexOf(existing.find(".status").text()) >= 0) {
177
                    // the server changes status
178
                    existing.find(".state-label").text(STATUSES[server.status]);
179
                } else if (['STOPPED','ERROR'].indexOf(server.status) >= 0 &&
180
                    [STATUSES['STOPPED'],
181
                     STATUSES['ERROR']].indexOf(existing.find(".status").text()) >= 0) {
182
                    // the server changes status
183
                    existing.find(".state-label").text(STATUSES[server.status]);
184
                }
185
                existing.find('.spinner').hide();
186
                existing.find(' .wave').attr('src','static/wave.gif').show();
187
                setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);
188
                // show spinner while the server is rebooting, starting or shutting down
189
                if ([STATUSES['REBOOT'],
190
                    TRANSITIONS['Starting'], TRANSITIONS['Shutting down']].indexOf(existing.find(".status").text()) >= 0 ) {
191
                    existing.find(' .wave').hide();
192
                    existing.find('.spinner').show();
193
                }
194
            } else if (existing.find(".status").text() == STATUSES['REBOOT'] && server.status == 'REBOOT') {
195
                    $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();
196
            }
197
            // find and display ips
198
            var ips = get_public_ips(server);
199
            existing.find(".machine-details div.ipv4").text(ips['ip4']);
200
            existing.find(".machine-details div.ipv6").text(ips['ip6']);
201
        } else if (server.status != 'DELETED') {
202
            // If it does not exist and it's not deleted, we should create it
203
            var serverwidget = $("#servers-widget-template").clone().attr("id", 'link-' + server.id);
204
            if (server.name.length > 18) {
205
                serverwidget.text(server.name.substring(0,15) + '...');
206
            } else {
207
                serverwidget.text(server.name)
208
            }
209
            serverwidget.appendTo('.servers');
210
            serverwidget.show();
211
            //find and hide the previous selected server
212
            $('.single').find('.single-container').hide();
213
            $('.single .column3').find('.selected').removeClass('selected');
214
            //create and select the new one
215
            var machine = $("#machinesview-single.single #machine-container-template").clone().attr("id", server.id);
216
            machine.find(".machine-details div.name").text(server.name.substring(0,100));
217
            machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-on.png');
218
            machine.find("span.imagetag").text(server_image);
219
            machine.find(".state-label").text(STATUSES[server.status]);
220
            // find and display ips
221
            var ips = get_public_ips(server);
222
            machine.find(".machine-details div.ipv4").text(ips['ip4']);
223
            machine.find(".machine-details div.ipv6").text(ips['ip6']);
224
            // find and display flavor parameters
225
            var CPUs, RAM, disk, image_name, image_size;
226
            if ( flavors.length > 0 ) {
227
                var current_flavor = '';
228
                for (i=0; i<flavors.length; i++) {
229
                    if (flavors[i]['id'] == server.flavorRef) {
230
                        current_flavor = flavors[i];
231
                    }
232
                }
233
                CPUs = current_flavor['cpu'];
234
                RAM = current_flavor['ram'];
235
                disk = current_flavor['disk'];
236
            } else {
237
                CPUs = 0;
238
                RAM = 0;
239
                disk = 0;
240
            }
241
            if ( images.length > 0 ) {
242
                var current_image = '';
243
                for (i=0; i<images.length; i++) {
244
                    if (images[i]['id'] == server.imageRef) {
245
                        current_image = images[i];
246
                    }
247
                }
248
                image_name = current_image['name'];
249
                image_size = current_image['metadata']['values']['size'];
250
            } else {
251
                image_name = ''
252
                image_size = ''
253
            }
254
            machine.find(".machine-details div.cpus").text(CPUs);
255
            machine.find(".machine-details div.ram").text(RAM);
256
            machine.find(".machine-details div.disk").text(disk);
257
            machine.find(".machine-details div.image-name").text(image_name.substring(0,15));
258
            machine.find(".machine-details div.image-size").text(image_size);
259
            //show off image if server is not active
260
            if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) < 0){
261
                    machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-off.png');
262
            }
263
            //show spinner while machine is building
264
            if (server.status == 'BUILD' ||
265
                [TRANSITIONS['Starting'], TRANSITIONS['Shutting down']].indexOf(existing.find(".status").text()) >= 0 ) {
266
                machine.find('.spinner').show();
267
            }
268
            machine.appendTo("#machinesview-single.single");
269
            //disable reboot and shutdown actions while machine is building
270
            if (server.status == 'BUILD') {
271
                $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').hide();
272
                $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').hide();
273
            }
274
            // show console action only on active servers
275
            if (server.status == 'ACTIVE') {
276
                $('#machinesview-single.single div.#' + server.id + ' div.action-console').show();
277
                $('#machinesview-single.single div.#' + server.id + ' div.action-start').hide();
278
            } else if (server.status == 'REBOOT'){
279
                $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();
280
            } else {
281
                $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();
282
                $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').hide();
283
                $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').hide();
284
            }
285
        }
286
    });
287

288
    $("#machinesview-single.single > div.large-spinner").hide();
289

290
    // show message in case user has no servers!
291
    //if ($('.single-container').length < 2) {
292
    //    showWelcome();
293
    //} else {
294
    //    hideWelcome();
295
    //}
296

297
    // set confirm box position
298
    if (window.innerHeight - 220 < $('#machinesview-single').height())
299
        $('.confirm_multiple').addClass('fixed');
300
    else
301
        $('.confirm_multiple').removeClass('fixed');
302

303
    //show the first machine and select it in the widget
304
    $('.single-container:eq(1)').show();
305
    $('.single .column3').find('.server-name:eq(1)').addClass('selected');
306

307
    //enable widget links
308
    $(".server-name").live('click', function() {
309
        $('.single').find('.single-container').hide()
310
        $('.single').find('#' + $(this).attr('id').substring(5)).show();
311
        $('.single .column3').find('.selected').removeClass('selected');
312
        $(this).addClass('selected');
313
        $(".single .column3 .previous").show();
314
        $(".single .column3 .next").show();
315
        if ($(this).attr("id") == $(".single .column3 .server-name:eq(1)").attr("id")) {
316
            $(".single .column3 .previous").hide();
317
        } else if ($(this).attr("id") == $(".single .column3 .server-name:last").attr("id")) {
318
            $(".single .column3 .next").hide();
319
        }
320
    });
321

322
    //toggle content
323
    $("div.disks").toggle(function() {
324
            $(this).find('.toggler').html("&#711;");
325
            $(this).next(".disks-content").slideToggle(600);
326
            return false;
327
        }, function() {
328
            $(this).find('.toggler').html('&#710;');
329
            $(this).next(".disks-content").slideToggle(600);
330
            return false;
331
    });
332
    $("div.networks").toggle(function() {
333
            $(this).find('.toggler').html("&#711;");
334
            $(this).next(".networks-content").slideToggle(600);
335
            return false;
336
        }, function() {
337
            $(this).find('.toggler').html('&#710;');
338
            $(this).next(".networks-content").slideToggle(600);
339
            return false;
340
    });
341
    $("div.stats").toggle(function() {
342
            $(this).find('.toggler').html("&#711;");
343
            $(this).next(".stats-content").slideToggle(600);
344
            return false;
345
        }, function() {
346
            $(this).find('.toggler').html('&#710;');
347
            $(this).next(".stats-content").slideToggle(600);
348
            return false;
349
    });
350

351
    if ($.cookie('server')) {
352
        $('div#link-' + $.cookie('server')).click();
353
        $.cookie('server', null);
354
    }
355

356
    //if it is the last vm, hide the next button
357
    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {
358
        $("#machinesview-single.single .column3 .next").hide()
359
    } else {
360
        $("#machinesview-single.single .column3 .next").show()
361
    }
362

363
    //if it is the first vm, hide the prev button
364
    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {
365
        $("#machinesview-single.single .column3 .previous").hide()
366
    } else {
367
        $("#machinesview-single.single .column3 .previous").show()
368
    }
369

370
}
371

372
//enable prev-next buttons
373
$("#machinesview-single.single .column3 .previous").live('click', function(){
374
    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {
375
        return false;
376
    } else {
377
        current_server = $('#machinesview-single.single .column3').find('.selected').attr("id").substring(5);
378
        $('#machinesview-single.single').find('#' + current_server).hide();
379
        $('#machinesview-single.single').find('#' + current_server).prev().show();
380
        $('#machinesview-single.single .column3').find('#link-' + current_server).removeClass('selected');
381
        $('#machinesview-single.single .column3').find('#link-' + current_server).prev().addClass('selected');
382
        if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {
383
            $(this).hide()
384
        }
385
        $("#machinesview-single.single .column3 .next").show()
386
    }
387
});
388

389
$("#machinesview-single.single .column3 .next").live('click', function(){
390
    if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {
391
        return false;
392
        } else {
393
        current_server = $('#machinesview-single.single .column3').find('.selected').attr("id").substring(5);
394
        $('#machinesview-single.single').find('#' + current_server).hide();
395
        $('#machinesview-single.single').find('#' + current_server).next().show();
396
        $('#machinesview-single.single .column3').find('#link-' + current_server).removeClass('selected');
397
        $('#machinesview-single.single .column3').find('#link-' + current_server).next().addClass('selected');
398
        //if it is the last vm, hide the next button
399
        if ($("#machinesview-single.single .column3 .selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {
400
            $(this).hide()
401
        }
402
        $("#machinesview-single.single .column3 .previous").show();
403
    }
404
});
405

406
//hide prev button on startup
407
$("#machinesview-single.single .column3 .previous").hide()
408

409
// basic functions executed on page load
410
if ( flavors.length == 0 && images.length == 0 ) {
411
    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)
412
    update_flavors();
413
    // populate image list
414
    update_images();
415
} else if ( flavors.length == 0 && images.length != 0 ) {
416
    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)
417
    update_flavors();
418
} else if ( flavors.length != 0 && images.length == 0 ) {
419
    // populate image list
420
    update_images();
421
    update_vms(UPDATE_INTERVAL);
422
} else {
423
    // start updating vm list
424
    update_vms(UPDATE_INTERVAL);
425
}
426

427
//FIXME: Hide and show welcome depending on number of machines
428
hideWelcome();
429
</script>