Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines_single.html @ 91965c28

History | View | Annotate | Download (30.8 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
<!-- the single view -->
39
<div id="machinesview-single" class="single">
40
    <div class="large-spinner"></div>
41
    <div class="single-container" id="machine-container-template" style="display:none;" >
42
        <div class="upper">
43
            <div class="column1">
44
                <div class='connect-border'></div>
45
                <div class='connect-arrow'></div>
46
                <img src="static/icons/machines/large/ubuntu-on.png" class="single-image" />
47
                <div class="state">
48
                    <span class="state-label">{% trans "Running" %}</span>
49
                    <div class="indicators">
50
                        <div class="indicator1"></div>
51
                        <div class="indicator2"></div>
52
                        <div class="indicator3"></div>
53
                        <div class="indicator4"></div>
54
                    </div>
55
                    <img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" />
56
                    <img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" />
57
                </div>
58
            </div>
59
            <div class="column2">
60
                <div class="machine-labels">
61
                    <div class="machine-label name">{% trans "Name" %}:</div>
62
                    <div class="machine-label cpus">{% trans "CPUs" %}:</div>
63
                    <div class="machine-label ram">{% trans "RAM (MB)" %}:</div>
64
                    <div class="machine-label disk">{% trans "System Disk (GB)" %}:</div>
65
                    <div class="machine-label image-name">{% trans "Image Name" %}:</div>
66
                    <div class="machine-label image-size">{% trans "Image Size (GB)" %}:</div>
67
                    <div class="machine-label ipv4">{% trans "Public IPv4" %}:</div>
68
                    <div class="machine-label ipv6">{% trans "Public IPv6" %}:</div>
69
                </div>
70
                <div class="machine-details">
71
                    <div class="machine-detail name">My Desktop</div>
72
                    <div class="machine-detail cpus">4</div>
73
                    <div class="machine-detail ram">2048</div>
74
                    <div class="machine-detail disk">100</div>
75
                    <div class="machine-detail image-name">windos_XP_blah_blah</div>
76
                    <div class="machine-detail image-size">2.3</div>
77
                    <div class="machine-detail ipv4">no ipv4</div>
78
                    <div class="machine-detail ipv6">2001:db8:1f70::999:de8:7648:6e8</div>
79
                </div>
80
                <div class="tags">
81
                    <div class="tags-header">
82
                        <div class="tags-label">
83
                            {% trans "Tags" %}
84
                        </div>
85
                        <div class="tags-down-arrow">
86
                        </div>
87
                    </div>
88
                    <div class="tags-content">
89
                    </div>
90
                </div>
91
            </div>
92
            <div class="single-actions">
93
                <div class="action-container start">
94
                    <div class="single-action action-start">{% trans "Start" %}</div>
95
                    <div class="confirm_single">
96
                        <button class="yes">{% trans "Confirm" %}</button>
97
                        <button class="no">X</button>
98
                    </div>
99
                </div>
100
                <div class="action-container reboot">
101
                    <div class="single-action action-reboot">{% trans "Reboot" %}</div>
102
                    <div class="confirm_single">
103
                        <button class="yes">{% trans "Confirm" %}</button>
104
                        <button class="no">X</button>
105
                    </div>
106
                </div>
107
                <div class="action-container shutdown">
108
                    <div class="single-action action-shutdown">{% trans "Shutdown" %}</div>
109
                    <div class="confirm_single">
110
                        <button class="yes">{% trans "Confirm" %}</button>
111
                        <button class="no">X</button>
112
                    </div>
113
                </div>
114
                <div class="action-container console">
115
                    <div class="single-action action-console">{% trans "Console" %}</div>
116
                    <div class="confirm_single">
117
                        <button class="yes">{% trans "Confirm" %}</button>
118
                        <button class="no">X</button>
119
                    </div>
120
                </div>
121
                <div class="action-container destroy">
122
                    <div class="single-action action-destroy">{% trans "Destroy" %}</div>
123
                    <div class="confirm_single">
124
                        <button class="yes">{% trans "Confirm" %}</button>
125
                        <button class="no">X</button>
126
                    </div>
127
                </div>
128
            </div>
129
            <div class="action_error" align="center">
130
                {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
131
                <span class="code"></span>
132
                <span class="message"></span>
133
                <button class="details">{% trans "Details" %}</button>
134
            </div>
135
        </div>
136
        <div class="lower">
137
            <div class="single-cpu">
138
                <div class="cpu-usage">
139
                    {% trans "CPU Usage" %}
140
                </div>
141
                <div class="cpu-graph">
142

    
143
                </div>
144
            </div>
145
            <div class="single-network">
146
                <div class="network-usage">
147
                    {% trans "Network Usage" %}
148
                </div>
149
                <div class="network-graph">
150

    
151
                </div>
152
            </div>
153
        </div>
154
    </div>
155
    <div class="column3">
156
        <div class="controls">
157
            <div class="previous" style="display:block;">
158
                <div class="prev-arrow"></div>
159
                <div class="prev-label">
160
                    {% trans "previous" %}
161
                </div>
162
            </div>
163
            <div class="next" style="display:block;">
164
                <div class="next-arrow"></div>
165
                <div class="next-label">
166
                    {% trans "next" %}
167
                </div>
168
            </div>
169
        </div>
170
        <div class="separator">
171
        </div>
172
        <div class="servers">
173
            <div class="server-name" id="servers-widget-template" style="display:none;">server1</div>
174
        </div>
175
    </div>
176
</div>
177

    
178
<script>
179

180
//hide the all of the info contents
181
$("#machinesview-single.single .disks-content").hide();
182
$("#machinesview-single.single .networks-content").hide();
183
$("#machinesview-single.single .stats-content").hide();
184

185
// indicate that the requested action was not completed
186
function display_failure(status, serverID, action, responseText) {
187
    $('#machinesview-single.single #'+serverID+ ' .spinner').hide();
188
    $('#machinesview-single.single #'+serverID+ ' .action_error .action').text(action);
189
    $('#machinesview-single.single #'+serverID+ ' .action_error .code').text(status);
190
    $('#machinesview-single.single #'+serverID+ ' .action_error .message').text(responseText);
191
    $('#machinesview-single.single #'+serverID+ ' .action_error').show();
192
}
193

194
// cancel action
195
$("#machinesview-single.single div.confirm_single .no").live('click', function(){
196
    pending_actions = [];
197
    $('#machinesview-single').find('div.single-action').removeClass("selected");
198
    update_confirmations();
199
});
200

201
//show error popup box
202
$("#machinesview-single.single div.action_error .details").live('click', function(){
203
    // remove the action from the pending list
204
    ajax_error($(this).parent().children('.code').text(), undefined, $(this).parent().children('.action').text(), $(this).parent().children('.message').text());
205
    $(this).parent().hide();
206
});
207

208
//confirm action
209
$("#machinesview-single.single div.confirm_single .yes").live('click', function(){
210
    var serverID = $(this).closest(".single-container").attr("id");
211
    try {
212
        console.info(serverID);
213
    } catch(err) {}
214
    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server execute it
215
        if (pending_actions[i][1]==serverID){
216
            action = pending_actions.splice(i,1)[0]; // extract action
217
            // change the status text in cases where no api state exists
218
            if (action[0] == start) {
219
                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Starting']);
220
                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state starting-state');
221
                $(this).closest(".single-container").find(".column1 .state .spinner").show();
222
            } else if (action[0] == shutdown) {
223
                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Shutting down']);
224
                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state shutting-state');
225
                $(this).closest(".single-container").find(".column1 .state .spinner").show();
226
            } else if (action[0] == reboot) {
227
                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Rebooting']);
228
                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state rebooting-state');
229
                $(this).closest(".single-container").find(".column1 .state .spinner").show();
230
            }  else if (action[0] == destroy) {
231
                $(this).closest(".single-container").find(".column1 .state-label").text(TRANSITIONS['Destroying']);
232
                $(this).closest(".single-container").find(".column1 .state").removeClass().addClass('state destroying-state');
233
                $(this).closest(".single-container").find(".column1 .state .spinner").show();
234
            }
235
            action[0]([action[1]]); // execute action
236
        }
237
    }
238
    $(this).parent().hide();
239
    $(this).closest('div.action-container').children('div.single-action').removeClass('selected');
240
    $(this).parent().parent().find('.state').children('.spinner').show();
241
    update_confirmations();
242
    return false;
243
});
244

245

246
// intercept start click
247
$("#machinesview-single.single div.action-start").live('click', function(){
248
    var serverID = $(this).closest(".single-container").attr("id");
249
    var serverName = $(this).closest("div.upper").find(".machine-details div.name").text();
250
    $('#machinesview-single').find('div.single-action').removeClass('selected');
251
    $(this).addClass('selected');
252
    $(this).parent().parent().find('.action_error').hide();
253
    // reset pending actions so not to allow multiple actions in this view
254
    pending_actions = [];
255
    pending_actions.push([start, serverID, serverName]);
256
    update_confirmations();
257
    return false;
258
});
259

260
// intercept shutdown click
261
$("#machinesview-single.single div.action-shutdown").live('click', function(){
262
    var serverID = $(this).closest(".single-container").attr("id");
263
    var serverName = $(this).closest("div.upper").find(".machine-details div.name").text();
264
    $('#machinesview-single').find('div.single-action').removeClass('selected');
265
    $(this).addClass('selected');
266
    $(this).parent().parent().find('.action_error').hide();
267
    // reset pending actions so not to allow multiple actions in this view
268
    pending_actions = [];
269
    pending_actions.push([shutdown, serverID, serverName]);
270
    update_confirmations();
271
    return false;
272
});
273

274
// intercept reboot click
275
$("#machinesview-single.single div.action-reboot").live('click', function(){
276
    var serverID = $(this).closest(".single-container").attr("id");
277
    var serverName = $(this).closest("div.upper").find(".machine-details div.name").text();
278
    $('#machinesview-single').find('div.single-action').removeClass('selected');
279
    $(this).addClass('selected');
280
    $(this).parent().parent().find('.action_error').hide();
281
    // reset pending actions so not to allow multiple actions in this view
282
    pending_actions = [];
283
    pending_actions.push([reboot, serverID, serverName]);
284
    update_confirmations();
285
    return false;
286
});
287

288
// intercept destroy click
289
$("#machinesview-single.single div.action-destroy").live('click', function(){
290
    var serverID = $(this).closest(".single-container").attr("id");
291
    var serverName = $(this).closest("div.upper").find(".machine-details div.name").text();
292
    $('#machinesview-single').find('div.single-action').removeClass('selected');
293
    $(this).addClass('selected');
294
    $(this).parent().parent().find('.action_error').hide();
295
    // reset pending actions so not to allow multiple actions in this view
296
    pending_actions = [];
297
    pending_actions.push([destroy, serverID, serverName]);
298
    update_confirmations();
299
    return false;
300
});
301

302
// intercept console click
303
$("#machinesview-single.single div.action-console").live('click', function(){
304
    var serverID = $(this).closest(".single-container").attr("id");
305
    var serverName = $(this).closest("div.upper").find(".machine-details div.name").text();
306
    $('#machinesview-single').find('div.single-action').removeClass('selected');
307
    $(this).addClass('selected');
308
    $(this).parent().parent().find('.action_error').hide();
309
    // reset pending actions so not to allow multiple actions in this view
310
    pending_actions = [];
311
    pending_actions.push([open_console, serverID, serverName]);
312
    update_confirmations();
313
    return false;
314
});
315

316
// open console on connect arrow click
317
$("#machinesview-single.single div.connect-arrow").live('click', function(){
318
    $(this).parent().parent().find("div.action-console").click();
319
    return false;
320
});
321

322
// open console on connect arrow border click
323
$("#machinesview-single.single div.connect-border").live('click', function(){
324
    $(this).parent().parent().find("div.action-console").click();
325
    return false;
326
});
327

328
// update the servers list
329
function update_machines_view(data){
330
    /*
331
    Go through the servers in the input data. Update existing entries, add
332
    new ones to the list
333
    */
334

335
    $.each(data.servers.values, function(i,server){
336

337
        existing = $('#machinesview-single.single #' + server.id);
338
        existing_link = $('#machinesview-single div.column3 #link-' + server.id);
339
        var current_Id = current_serverId();
340

341
        // if multiple machines exist in the DOM, delete all but one
342
        // defensive coding - that shouldn't happen normally
343
        while (existing.length > 1){
344
            existing.remove();
345
        }
346
        // get server OS, if it exists
347
        if (!(server.metadata == undefined)) {
348
            var server_image = os_icon(server.metadata);
349
        } else {
350
            var server_image = "unknown"
351
        }
352
        // get server status message, if it exists
353
        var current_message = existing.find(".state-label").text();
354

355
        // server already exists in DOM
356
        if (existing.length){
357
            $("#machinesview-single.single div.single-container:last-child").find("div.separator").show();
358
            //  if the status is deleted, delete it from the DOM
359
            if (server.status == 'DELETED') {
360
                existing.remove();
361
                existing_link.remove();
362
                //if the deleted vm is the displayed one, display the 1st vm
363
                if (server.id == current_Id) {
364
                    $("#machinesview-single.single div.single-container:eq(1)").show()
365
                    $('#machinesview-single.single .column3').find('.server-name:eq(1)').addClass('column3-selected');
366
                }
367
                try {
368
                    console.info(existing.find(".machine-details div.name").text() + ' removed');
369
                } catch(err) {}
370
            }
371
            // if the status has changed
372
            else if ( current_message != STATUSES[server.status]) {
373
                /*
374
                Here there are 4 possibilities:
375
                    1. From an active state to an inactive one
376
                    2. From an inactive state to an active one
377
                    3. From an active state to a different active one
378
                    4. From an inactive state to a different inactive one
379
                The last two (3, 4) can be dealt with the same way
380
                */
381
                if (ACTIVE_STATES.indexOf(current_message) >= 0 &&
382
                    INACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0) {
383
                    // from an active state to an inactive one
384
                    log_server_status_change(existing, server.status);
385
                    existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-off.png');
386
                    existing.find(".column1 .state-label").text(STATUSES[server.status]);
387
                    existing.find(".connect-border").hide();
388
                    existing.find(".connect-arrow").hide();
389
                    existing.find(".column1 .state .spinner").hide();
390
                    existing.find(' .wave').attr('src','static/icons/indicators/medium/wave.gif').show();
391
                    existing.find(".column1 .state").removeClass().addClass("state terminated-state");
392
                    setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);
393
                }
394
                else if (INACTIVE_STATES.indexOf(current_message) >= 0 &&
395
                         ACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0) {
396
                    // From an inactive state to an active one
397
                    log_server_status_change(existing, server.status);
398
                    existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-on.png');
399
                    existing.find(".column1 .state-label").text(STATUSES[server.status]);
400
                    existing.find(".connect-border").show();
401
                    existing.find(".connect-arrow").show();
402
                    existing.find(".column1 .state .spinner").hide();
403
                    existing.find(' .wave').attr('src','static/icons/indicators/medium/wave.gif').show();
404
                    existing.find(".column1 .state").removeClass().addClass("state running-state");
405
                    setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);
406
                }
407
                else {
408
                    // handling active to active or inactive to inactive changes
409
                    if (TRANSITIONS[current_message] && TRANSITIONS[current_message] != 'Rebooting') {
410
                        // don't do anything if it is still in transition
411
                    }
412
                    else if ((TRANSITIONS[current_message] == 'Rebooting' && server.status == 'ACTIVE') ||
413
                             (STATUSES['BUILD'] == current_message && server.status == 'ACTIVE')) {
414
                        // if it has been rebooted or just created
415
                        log_server_status_change(existing, server.status);
416
                        existing.find(".column1 .state-label").text(STATUSES[server.status]);
417
                        existing.find(".connect-border").show();
418
                        existing.find(".connect-arrow").show();
419
                        existing.find(".column1 .state .spinner").hide();
420
                        existing.find(".column1 .state").attr('src','static/icons/indicators/medium/wave.gif').show();
421
                        existing.find(".column1 .state").removeClass().addClass("state running-state");
422
                        setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);
423
                    }
424
                    else {
425
                        // in any other case just change the status and ignore spinners/waves
426
                        existing.find(".column1 .state-label").text(STATUSES[server.status]);
427
                    }
428
                }
429
            }
430
            // find and display ips
431
            var ips = get_public_ips(server);
432
            existing.find(".machine-details div.ipv4").text(ips['ip4']);
433
            existing.find(".machine-details div.ipv6").text(ips['ip6']);
434

435
        } else if (server.status != 'DELETED') {
436
            // If it does not exist and it's not deleted, we should create it
437
            var serverwidget = $("#servers-widget-template").clone().attr("id", 'link-' + server.id);
438
            if (server.name.length > 18) {
439
                serverwidget.text(server.name.substring(0,15) + '...');
440
            } else {
441
                serverwidget.text(server.name)
442
            }
443
            serverwidget.appendTo('.servers');
444
            serverwidget.show();
445
            //find and hide the previously selected server
446
            $('.single').find('.single-container').hide();
447
            $('.single .column3').find('.column3-selected').removeClass('column3-selected');
448
            //create and select the new one
449
            var machine = $("#machinesview-single.single #machine-container-template").clone().attr("id", server.id);
450
            machine.find(".machine-details div.name").text(server.name.substring(0,40));
451
            machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-on.png');
452
            machine.find("span.imagetag").text(server_image);
453
            machine.find(".column1 .state-label").text(STATUSES[server.status]);
454
            // find and display flavor parameters
455
            var flavor_params = get_flavor_params(server.flavorRef);
456
            machine.find(".machine-details div.cpus").text(flavor_params['cpus']);
457
            machine.find(".machine-details div.ram").text(flavor_params['ram']);
458
            machine.find(".machine-details div.disk").text(flavor_params['disk']);
459
            // find and display image parameters
460
            var image_params = get_image_params(server.imageRef);
461
            machine.find(".machine-details div.image-name").text(image_params['name'].substring(0,15));
462
            machine.find(".machine-details div.image-size").text(image_params['size']);
463
            // find and display ips
464
            var ips = get_public_ips(server);
465
            machine.find(".machine-details div.ipv4").text(ips['ip4']);
466
            machine.find(".machine-details div.ipv6").text(ips['ip6']);
467
            //show off image if server is not active
468
            if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) < 0){
469
                    machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-off.png');
470
                    machine.find(".connect-border").hide();
471
                    machine.find(".connect-arrow").hide();
472
                    machine.find(".column1 .state").removeClass().addClass("state terminated-state");
473
            }
474
            //show spinner while machine is building or rebooting
475
            if (server.status == 'BUILD' ||
476
                [TRANSITIONS['Starting'], TRANSITIONS['Shutting down']].indexOf(existing.find(".status").text()) >= 0 ) {
477
                machine.find(".column1 .state .spinner").show();
478
                machine.find(".connect-border").hide();
479
                machine.find(".connect-arrow").hide();
480
                machine.find(".column1 .state").removeClass().addClass('state build-state');
481
            }
482
            if (server.status == 'REBOOT') {
483
                machine.find(".column1 .state").find('.spinner').show();
484
                machine.find(".connect-border").hide();
485
                machine.find(".connect-arrow").hide();
486
                machine.find(".column1 .state").removeClass().addClass('state rebooting-state');
487
            }
488
            machine.appendTo("#machinesview-single.single");
489
            //disable reboot and shutdown actions while machine is building
490
            if (server.status == 'BUILD') {
491
                $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').hide();
492
                $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').hide();
493
            }
494
            // show console action only on active servers
495
            if (server.status == 'ACTIVE') {
496
                $('#machinesview-single.single div.#' + server.id + ' div.action-console').show();
497
                $('#machinesview-single.single div.#' + server.id + ' div.action-start').hide();
498
                machine.find(".connect-border").show();
499
                machine.find(".connect-arrow").show();
500
            } else if (server.status == 'REBOOT'){
501
                $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();
502
            } else {
503
                $('#machinesview-single.single div.#' + server.id + ' div.action-console').hide();
504
                $('#machinesview-single.single div.#' + server.id + ' div.action-reboot').hide();
505
                $('#machinesview-single.single div.#' + server.id + ' div.action-shutdown').hide();
506
            }
507
            //show the first machine and select it in the widget
508
            $('.single-container:eq(1)').show();
509
            $('.single .column3').find('.server-name:eq(1)').addClass('column3-selected');
510
        }
511
    update_iconview_actions(server.id, server.status);
512
    });
513

514
    // hide pane spinner
515
    $("#machinesview-single.single > div.large-spinner").hide();
516

517
    // show message in case user has no server!
518
    if ($('#machinesview-single div.single-container').length == 1) {
519
        showWelcome();
520
    } else {
521
        hideWelcome();
522
    }
523

524
    //enable widget links
525
    $(".server-name").live('click', function() {
526
        $('.single').find('.single-container').hide()
527
        $('.single').find('#' + $(this).attr('id').substring(5)).show();
528
        $('.single .column3').find('.column3-selected').removeClass('column3-selected');
529
        $(this).addClass('column3-selected');
530
        update_prev_next()
531
    });
532

533
    if ($.cookie('server')) {
534
        $('div#link-' + $.cookie('server')).click();
535
        $.cookie('server', null);
536
    }
537

538
    //if it is the last vm, disable the next button
539
    if ($("#machinesview-single.single .column3 .column3-selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {
540
        $("#machinesview-single.single .column3 .next").addClass('disabled');
541
    }
542

543
    //if it is the first vm, disable the prev button
544
    if ($("#machinesview-single.single .column3 .column3-selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {
545
        $("#machinesview-single.single .column3 .previous").addClass('disabled');
546
    }
547
}
548

549
//get currently displayed serverId
550
function current_serverId() {
551
    return $("#machinesview-single.single").find("div.single-container:visible").attr("id");
552
}
553

554
//enable prev-next buttons
555
$("#machinesview-single.single .column3 .previous").live('click', function() {
556
    // set behavior
557
    if ($("#machinesview-single.single .column3 .column3-selected").attr("id") == $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {
558
        return false;
559
    } else {
560
        current_server = $('#machinesview-single.single .column3').find('.column3-selected').attr("id").substring(5);
561
        $('#machinesview-single.single').find('#' + current_server).hide();
562
        $('#machinesview-single.single').find('#' + current_server).prev().show();
563
        $('#machinesview-single.single .column3').find('#link-' + current_server).removeClass('column3-selected');
564
        $('#machinesview-single.single .column3').find('#link-' + current_server).prev().addClass('column3-selected');
565
        update_prev_next()
566
        return false;
567
    }
568
});
569

570
$("#machinesview-single.single .column3 .next").live('click', function() {
571
    // set behavior
572
    if ($("#machinesview-single.single .column3 .column3-selected").attr("id") == $("#machinesview-single.single .column3 .server-name:last").attr("id")) {
573
        return false;
574
        } else {
575
        current_server = $('#machinesview-single.single .column3').find('.column3-selected').attr("id").substring(5);
576
        $('#machinesview-single.single').find('#' + current_server).hide();
577
        $('#machinesview-single.single').find('#' + current_server).next().show();
578
        $('#machinesview-single.single .column3').find('#link-' + current_server).removeClass('column3-selected');
579
        $('#machinesview-single.single .column3').find('#link-' + current_server).next().addClass('column3-selected');
580
        update_prev_next()
581
        return false;
582
    }
583
});
584

585

586
//enables-disables previous/next buttons accordingly
587
function update_prev_next() {
588
    if ($("#machinesview-single.single .column3 .column3-selected").attr("id") != $("#machinesview-single.single .column3 .server-name:eq(1)").attr("id")) {
589
        $(".single .column3 .previous").removeClass('disabled');
590
    } else {
591
        //disable class
592
        $(".single .column3 .previous").addClass('disabled');
593
    }
594
    if ($("#machinesview-single.single .column3 .column3-selected").attr("id") != $("#machinesview-single.single .column3 .server-name:last").attr("id")) {
595
        $(".single .column3 .next").removeClass('disabled');
596
    } else {
597
        //disable class
598
        $(".single .column3 .next").addClass('disabled');
599
    }
600
}
601

602
// basic functions executed on page load
603
if ( flavors.length == 0 && images.length == 0 ) {
604
    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)
605
    update_flavors();
606
    // populate image list
607
    update_images();
608
} else if ( flavors.length == 0 && images.length != 0 ) {
609
    // configure flavors, this also calls update_vms(UPDATE_INTERVAL)
610
    update_flavors();
611
} else if ( flavors.length != 0 && images.length == 0 ) {
612
    // populate image list
613
    update_images();
614
    update_vms(UPDATE_INTERVAL);
615
} else {
616
    // start updating vm list
617
    update_vms(UPDATE_INTERVAL);
618
}
619

620
//IE specific fixes
621
if ($.browser.msie) {
622
    //IE fix for green arrow hover
623
    $("div.connect-arrow").live("mouseenter", function () {
624
        $(this).addClass("connect-arrow-ie");
625
    });
626
    $("div.connect-arrow").live("mouseleave", function () {
627
        $(this).removeClass("connect-arrow-ie");
628
    });
629
}
630

    
631
</script>