Statistics
| Branch: | Tag: | Revision:

root / ui / static / synnefo.js @ 94adeabb

History | View | Annotate | Download (19.9 kB)

1
var flavors = [], images = [], servers = [], disks = [], cpus = [], ram = [];
2
var changes_since = 0, deferred = 0, update_request = false, load_request = false, pending_actions = [];
3
var API_URL = "/api/v1.1";
4

    
5
function ISODateString(d){
6
    //return a date in an ISO 8601 format using UTC. 
7
    //do not include time zone info (Z) at the end
8
    //taken from the Mozilla Developer Center 
9
    function pad(n){ return n<10 ? '0'+n : n }
10
    return  d.getUTCFullYear()+ '-' +
11
                        pad(d.getUTCMonth()+1) + '-' +
12
                        pad(d.getUTCDate()) + 'T' +
13
                        pad(d.getUTCHours()) + ':' +
14
                        pad(d.getUTCMinutes()) + ':' +
15
                        pad(d.getUTCSeconds()) +'Z'
16
}
17

    
18
function parse_error(responseText){
19
        var errors = [];
20
        if (responseText.length == 0){
21
                errors[0] = {'code': 503};
22
        } else {
23
                responseObj = JSON.parse(responseText);
24
                //console.info(inp);
25
                for (var err in responseObj){
26
                        errors[errors.length] = responseObj[err];
27
                }
28
        }
29
        return errors;
30
}
31

    
32
// indexOf prototype for IE
33
if (!Array.prototype.indexOf) {
34
  Array.prototype.indexOf = function(elt /*, from*/) {
35
    var len = this.length;
36
    var from = Number(arguments[1]) || 0;
37
    from = (from < 0)
38
         ? Math.ceil(from)
39
         : Math.floor(from);
40
    if (from < 0)
41
      from += len;
42

    
43
    for (; from < len; from++) {
44
      if (from in this &&
45
          this[from] === elt)
46
        return from;
47
    }
48
    return -1;
49
  };
50
}
51

    
52

    
53
function update_confirmations(){
54
    // hide all confirm boxes to begin with
55
    $('div.confirm_single').hide();
56
    $('div.confirm_multiple').hide();
57
   
58
        // standard view only
59
        if ($.cookie("list") != '1') { 
60
                for (i=0;i<pending_actions.length;i++){
61
            // show single confirms
62
                        $("div.machine#"+pending_actions[i][1]+' .confirm_single').show();        
63
                }                
64
        }
65

    
66
        // if more than one pending action show multiple confirm box
67
        if (pending_actions.length>1 || $.cookie("list") == '1' && pending_actions.length == 1){ 
68
                $('div.confirm_multiple span.actionLen').text(pending_actions.length);
69
                $('div.confirm_multiple').show();
70
        }
71
}
72

    
73
function list_view() {
74
        changes_since = 0; // to reload full list
75
        pending_actions = []; // clear pending actions
76
        update_confirmations();
77
        clearTimeout(deferred);        // clear old deferred calls
78
        try {
79
                update_request.abort(); // cancel pending ajax updates
80
                load_request.abort();
81
        }catch(err){}
82
    $.cookie("list", '1'); // set list cookie
83
        
84
        uri = $("#list").attr("href");
85
    load_request = $.ajax({
86
        url: uri,
87
        type: "GET",
88
        timeout: TIMEOUT,
89
        dataType: "html",
90
        error: function(jqXHR, textStatus, errorThrown) {                                                
91
                        return false;
92
                },
93
        success: function(data, textStatus, jqXHR) {
94
                        $("a#standard")[0].className += ' activelink';
95
                        $("a#list")[0].className = '';
96
                        $("div#machinesview").html(data);
97
                }
98
        });
99
    
100
    return false;
101
}
102

    
103
function standard_view() {
104
        changes_since = 0; // to reload full list
105
        pending_actions = []; // clear pending actions
106
        update_confirmations();
107
        clearTimeout(deferred);        // clear old deferred calls
108
        try {
109
                update_request.abort() // cancel pending ajax updates
110
                load_request.abort();
111
        }catch(err){}        
112
    $.cookie("list", '0');
113
        
114
    uri = $("a#standard").attr("href");
115
    load_request = $.ajax({
116
        url: uri,
117
        type: "GET",
118
        timeout: TIMEOUT,
119
        dataType: "html",
120
        error: function(jqXHR, textStatus, errorThrown) {                                                
121
                        return false;
122
                },
123
        success: function(data, textStatus, jqXHR) {
124
                        $("a#list")[0].className += ' activelink';
125
                        $("a#standard")[0].className = '';
126
                        $("div#machinesview").html(data);
127
                }
128
        });        
129

    
130
    return false;
131
}
132

    
133
function choose_view() {
134
    if ($.cookie("list")=='1') {
135
        list_view();
136
    } else {
137
        standard_view();
138
    }
139
}
140

    
141
function toggleMenu() {
142
    var primary = $("ul.css-tabs li a.primary");
143
    var secondary = $("ul.css-tabs li a.secondary");
144
    var all = $("ul.css-tabs li a");                        
145
    var toggled = $('ul.css-tabs li a.current').hasClass('secondary');
146
    
147
    // if anything is still moving, do nothing
148
    if ($(":animated").length) {
149
        return;
150
    } 
151
    
152
    // nothing is current to begin with
153
    $('ul.css-tabs li a.current').removeClass('current');
154
    
155
    // move stuff around
156
    all.animate({top:'30px'}, {complete: function() { 
157
        $(this).hide();
158
        if (toggled) {
159
            primary.show();
160
            primary.animate({top:'9px'}, {complete: function() {
161
                $('ul.css-tabs li a.primary#machines').addClass('current');
162
                $('a#machines').click();                                   
163
            }});
164
        } else {
165
            secondary.show();
166
            secondary.animate({top:'9px'}, {complete: function() {
167
                $('ul.css-tabs li a.secondary#files').addClass('current');
168
                $('a#files').click();                                                                           
169
            }});
170
        }                                              
171
    }});
172
    
173
    // rotate arrow icon
174
    if (toggled) {
175
        $("#arrow").rotate({animateAngle: (0), bind:[{"click":function(){toggleMenu()}}]});
176
        $("#arrow").rotateAnimation(0);                    
177
    } else {
178
        $("#arrow").rotate({animateAngle: (-180), bind:[{"click":function(){toggleMenu()}}]});
179
        $("#arrow").rotateAnimation(-180);
180
    }            
181
}
182

    
183
// confirmation overlay generation
184
function confirm_action(action_string, action_function, serverIDs, serverNames) {
185
    if (serverIDs.length == 1){
186
        $("#yes-no h3").text('You are about to ' + action_string + ' vm ' + serverNames[0]);
187
    } else if (serverIDs.length > 1){
188
        $("#yes-no h3").text('You are about to ' + action_string + ' ' + serverIDs.length + ' machines');
189
    } else {
190
        return false;
191
    }
192
    // action confirmation overlay
193
    var triggers = $("a#confirmation").overlay({
194
            // some mask tweaks suitable for modal dialogs
195
            mask: {
196
                    color: '#ebecff',
197
                    opacity: '0.9'
198
            },
199
        top: 'center',
200
        load: false
201
    });
202
    // yes or no?
203
    var buttons = $("#yes-no button").click(function(e) {
204
            // get user input
205
            var yes = buttons.index(this) === 0;
206
        //close the confirmation window
207
        $("a#confirmation").overlay().close(); 
208
        // return true=yes or false=no
209
        if (yes) {
210
            action_function(serverIDs);
211
        }
212
    });
213
    $("a#confirmation").data('overlay').load();
214
    return false;
215
}
216

    
217
// get and show a list of running and terminated machines
218
function update_vms(interval) {
219
    try{ console.info('updating machines'); } catch(err){}
220
        var uri= API_URL + '/servers/detail';
221
        
222
        if (changes_since != 0)
223
                uri+='?changes-since='+changes_since
224
                
225
    update_request = $.ajax({
226
        url: uri,
227
        type: "GET",
228
        timeout: TIMEOUT,
229
        dataType: "json",
230
        error: function(jqXHR, textStatus, errorThrown) {
231
                        // don't forget to try again later
232
                        if (interval) {
233
                                clearTimeout(deferred);        // clear old deferred calls
234
                                deferred = setTimeout(update_vms,interval,interval);
235
                        }
236
                        // as for now, just show an error message
237
                        try { console.info('update_vms errback:' + jqXHR.status ) } catch(err) {}
238
                        ajax_error(jqXHR.status, undefined, 'Update VMs', jqXHR.responseText);                                                
239
                        return false;
240
                        },
241
        success: function(data, textStatus, jqXHR) {
242
                        // create changes_since string if necessary
243
                        if (jqXHR.getResponseHeader('Date') != null){
244
                                changes_since_date = new Date(jqXHR.getResponseHeader('Date'));
245
                                changes_since = ISODateString(changes_since_date);
246
                        }
247
                        
248
                        if (interval) {
249
                                clearTimeout(deferred);        // clear old deferred calls
250
                                deferred = setTimeout(update_vms,interval,interval);
251
                        }
252
                        
253
                        if (jqXHR.status == 200 || jqXHR.status == 203) {
254
                                try {
255
                                        servers = data.servers.values;
256
                                } catch(err) { ajax_error('400', undefined, 'Update VMs', jqXHR.responseText);}
257
                                update_machines_view(data);
258
                        } else if (jqXHR.status != 304){
259
                                try { console.info('update_vms callback:' + jqXHR.status ) } catch(err) {}
260
                                //ajax_error(jqXHR.status, undefined, 'Update VMs', jqXHR.responseText);                                        
261
                        }
262
                        return false;
263
        }
264
    });
265
    return false;
266
}
267

    
268
// get and show a list of available standard and custom images
269
function update_images() { 
270
    $.ajax({
271
        url: API_URL + '/images/detail',
272
        type: "GET",
273
        //async: false,
274
        dataType: "json",
275
        timeout: TIMEOUT,
276
        error: function(jqXHR, textStatus, errorThrown) { 
277
                    ajax_error(jqXHR.status, undefined, 'Update Images', jqXHR.responseText);
278
                    },
279
        success: function(data, textStatus, jqXHR) {
280
            try {
281
                                images = data.images.values;
282
                                update_wizard_images();
283
                        } catch(err){
284
                                ajax_error("NO_IMAGES");
285
                        }
286
        }
287
    });
288
    return false;
289
}
290

    
291
function update_wizard_images() {
292
        if ($("ul#standard-images li").toArray().length + $("ul#custom-images li").toArray().length == 0) {
293
                $.each(images, function(i,image){
294
                        var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");
295
                        img.find("label").attr('for',"img-radio-" + image.id);
296
                        img.find(".image-title").text(image.name);
297
            if (image.metadata) {
298
                if (image.metadata.values.description != undefined) {
299
                    img.find(".description").text(image.metadata.values.description);
300
                }
301
                if (image.metadata.values.size != undefined) {
302
                                img.find(".size").text(image.metadata.values.size);
303
                }
304
            }
305
                        img.find("input.radio").attr('id',"img-radio-" + image.id);
306
                        if (i==0) img.find("input.radio").attr("checked","checked"); 
307
                        img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');
308
            if (image.metadata) {
309
                if (image.metadata.values.serverId != undefined) {
310
                    img.appendTo("ul#custom-images");
311
                } else {
312
                    img.appendTo("ul#standard-images");
313
                }
314
            } else {
315
                img.appendTo("ul#standard-images");
316
            }
317
                });
318
        }        
319
}
320

    
321
function update_wizard_flavors(){
322
        // sliders for selecting VM flavor
323
        $("#cpu:range").rangeinput({min:0,
324
                                                           value:0,
325
                                                           step:1,
326
                                                           progress: true,
327
                                                           max:cpus.length-1});
328
        
329
        $("#storage:range").rangeinput({min:0,
330
                                                           value:0,
331
                                                           step:1,
332
                                                           progress: true,
333
                                                           max:disks.length-1});
334

    
335
        $("#ram:range").rangeinput({min:0,
336
                                                           value:0,
337
                                                           step:1,
338
                                                           progress: true,
339
                                                           max:ram.length-1});
340
        $("#small").click();
341
        
342
        // update the indicators when sliding
343
        $("#cpu:range").data().rangeinput.onSlide(function(event,value){
344
                $("#cpu-indicator")[0].value = cpus[Number(value)];
345
        });
346
        $("#cpu:range").data().rangeinput.change(function(event,value){
347
                $("#cpu-indicator")[0].value = cpus[Number(value)];                                
348
                $("#custom").click();
349
        $("#custom input").attr('checked', 'checked');                                
350
        });                        
351
        $("#ram:range").data().rangeinput.onSlide(function(event,value){
352
                $("#ram-indicator")[0].value = ram[Number(value)];
353
        });
354
        $("#ram:range").data().rangeinput.change(function(event,value){
355
                $("#ram-indicator")[0].value = ram[Number(value)];                                
356
                $("#custom").click();
357
        $("#custom input").attr('checked', 'checked');
358
        });                        
359
        $("#storage:range").data().rangeinput.onSlide(function(event,value){
360
                $("#storage-indicator")[0].value = disks[Number(value)];
361
        });
362
        $("#storage:range").data().rangeinput.change(function(event,value){
363
                $("#storage-indicator")[0].value = disks[Number(value)];                                
364
                $("#custom").click();
365
        $("#custom input").attr('checked', 'checked');
366
        });                                
367
}
368

    
369
Array.prototype.unique = function () {
370
        var r = new Array();
371
        o:for(var i = 0, n = this.length; i < n; i++)
372
        {
373
                for(var x = 0, y = r.length; x < y; x++)
374
                {
375
                        if(r[x]==this[i])
376
                        {
377
                                continue o;
378
                        }
379
                }
380
                r[r.length] = this[i];
381
        }
382
        return r;
383
}
384

    
385
// get and configure flavor selection
386
function update_flavors() { 
387
    $.ajax({
388
        url: API_URL + '/flavors/detail',
389
        type: "GET",
390
        //async: false,
391
        dataType: "json",
392
        timeout: TIMEOUT,
393
        error: function(jqXHR, textStatus, errorThrown) { 
394
            try {
395
                                ajax_error(jqXHR.status, undefined, 'Update Flavors', jqXHR.responseText);
396
                        } catch (err) {
397
                                ajax_error(err);
398
                        }
399
        },
400
        success: function(data, textStatus, jqXHR) {
401
            flavors = data.flavors.values;
402
            $.each(flavors, function(i, flavor) {
403
                cpus[i] = flavor['cpu'];
404
                disks[i] = flavor['disk'];
405
                ram[i] = flavor['ram'];
406
            });
407
            cpus = cpus.unique();
408
            disks = disks.unique();
409
            ram = ram.unique();
410
                        update_wizard_flavors();
411
        }
412
    });
413
    return false;
414
}
415

    
416
// return flavorRef from cpu, disk, ram values
417
function identify_flavor(cpu, disk, ram){
418
    for (i=0;i<flavors.length;i++){
419
        if (flavors[i]['cpu'] == cpu && flavors[i]['disk']==disk && flavors[i]['ram']==ram) {
420
            return flavors[i]['id']
421
        }
422
    }
423
    return 0;
424
}
425

    
426
// update the actions in list view
427
function updateActions() {
428
        var states = [];
429
        var on = [];
430
        var checked = $("table.list-machines tbody input[type='checkbox']:checked");
431
        // disable all actions to begin with
432
        for (action in actions) {
433
                $("#action-" + action).removeClass('enabled');
434
        }
435

    
436
        // are there multiple machines selected?
437
        if (checked.length>1)
438
                states[0] = 'multiple';
439
        
440
        // check the states of selected machines
441
        checked.each(function(i,checkbox) {
442
                states[states.length] = checkbox.className;
443
                var ip = $("#" + checkbox.id.replace('input-','') + ".ip span.public").text();
444
                if (ip.replace('undefined','').length)
445
                        states[states.length] = 'network';
446
        });
447

    
448
        // decide which actions should be enabled
449
        for (a in actions) {
450
                var enabled = false;
451
                for (var s =0; s<states.length; s++) {
452
                        if (actions[a].indexOf(states[s]) != -1 ) {
453
                                enabled = true;
454
                        } else {
455
                                enabled = false;
456
                                break;
457
                        }
458
                }
459
                if (enabled)
460
                        on[on.length]=a;
461
        }
462
        // enable those actions
463
        for (action in on) {
464
                $("#action-" + on[action]).addClass('enabled');
465
        }
466
}
467

    
468
//create server action
469
function create_vm(machineName, imageRef, flavorRef){
470
    var payload = {
471
        "server": {
472
            "name": machineName,
473
            "imageRef": imageRef,
474
            "flavorRef" : flavorRef,
475
            "metadata" : {
476
                "My Server Name" : machineName
477
            }
478
        }
479
    };
480
        var uri = API_URL + '/servers';
481

    
482
    $.ajax({
483
    url: uri,
484
    type: "POST",
485
        contentType: "application/json",
486
    dataType: "json",    
487
    data: JSON.stringify(payload),
488
    timeout: TIMEOUT,
489
    error: function(jqXHR, textStatus, errorThrown) { 
490
                ajax_error(jqXHR.status, undefined, 'Create VM', jqXHR.responseText);
491
           },
492
    success: function(data, textStatus, jqXHR) {
493
                if ( jqXHR.status == '202') {
494
                    ajax_success("CREATE_VM_SUCCESS", data.server.adminPass);                   
495
                } else {
496
                    ajax_error(jqXHR.status, undefined, 'Create VM', jqXHR.responseText);
497
                }
498
            }
499
    });
500
}
501

    
502
// reboot action
503
function reboot(serverIDs){
504
        if (!serverIDs.length){
505
                //ajax_success('DEFAULT');
506
                return false;
507
        }        
508
    // ajax post reboot call
509
    var payload = {
510
        "reboot": {"type" : "HARD"}
511
    };
512
    var serverID = serverIDs.pop();
513
        
514
        $.ajax({
515
                url: API_URL + '/servers/' + serverID + '/action',
516
                type: "POST",
517
                contentType: "application/json",
518
                dataType: "json",
519
                data: JSON.stringify(payload),
520
                timeout: TIMEOUT,
521
                error: function(jqXHR, textStatus, errorThrown) {
522
                    display_failure(jqXHR.status, serverID, 'Reboot', jqXHR.responseText)
523
                                },
524
                success: function(data, textStatus, jqXHR) {
525
                                        if ( jqXHR.status == '202') {
526
                        try {
527
                            console.info('rebooted ' + serverID);
528
                        } catch(err) {}
529
                                                // indicate that the action succeeded
530
                                                display_success(serverID);
531
                                                // continue with the rest of the servers
532
                                                reboot(serverIDs);
533
                                        } else {
534
                                                ajax_error(jqXHR.status, serverID, 'Reboot', jqXHR.responseText);
535
                                        }
536
                                }
537
    });
538

    
539
    return false;
540
}
541

    
542
// shutdown action
543
function shutdown(serverIDs) {
544
        if (!serverIDs.length){
545
                //ajax_success('DEFAULT');
546
                return false;
547
        }
548
    // ajax post shutdown call
549
    var payload = {
550
        "shutdown": {"timeout" : "5"}
551
    };   
552

    
553
        var serverID = serverIDs.pop()
554
    $.ajax({
555
            url: API_URL + '/servers/' + serverID + '/action',
556
            type: "POST",
557
                contentType: "application/json",
558
            dataType: "json",
559
        data: JSON.stringify(payload),
560
        timeout: TIMEOUT,
561
        error: function(jqXHR, textStatus, errorThrown) { 
562
                    display_failure(jqXHR.status, serverID, 'Shutdown', jqXHR.responseText)
563
                    },
564
        success: function(data, textStatus, jqXHR) {
565
                    if ( jqXHR.status == '202') {
566
                                                try {
567
                            console.info('suspended ' + serverID);
568
                        } catch(err) {}
569
                                                // indicate that the action succeeded
570
                                                display_success(serverID);
571
                                                // continue with the rest of the servers                        
572
                        shutdown(serverIDs);
573
                    } else {
574
                        ajax_error(jqXHR.status, serverID, 'Shutdown', jqXHR.responseText);
575
                    }
576
                }             
577
    });
578

    
579
    return false;    
580
}
581

    
582
// destroy action
583
function destroy(serverIDs) {
584
        if (!serverIDs.length){
585
                //ajax_success('DEFAULT');
586
                return false;
587
        }
588
    // ajax post destroy call can have an empty request body
589
    var payload = {};   
590

    
591
        serverID = serverIDs.pop()
592
    $.ajax({
593
            url: API_URL + '/servers/' + serverID,
594
            type: "DELETE",
595
                contentType: "application/json",
596
            dataType: "json",
597
        data: JSON.stringify(payload),
598
        timeout: TIMEOUT,
599
        error: function(jqXHR, textStatus, errorThrown) { 
600
                    display_failure(jqXHR.status, serverID, 'Destroy', jqXHR.responseText)
601
                    },
602
        success: function(data, textStatus, jqXHR) {
603
                    if ( jqXHR.status == '204') {
604
                                                try {
605
                            console.info('destroyed ' + serverID);
606
                        } catch (err) {}
607
                                                // indicate that the action succeeded
608
                                                display_success(serverID);
609
                                                // continue with the rest of the servers
610
                        destroy(serverIDs);
611
                    } else {
612
                        ajax_error(jqXHR.status, serverID, 'Destroy', jqXHR.responseText);
613
                    }
614
                }             
615
    });
616

    
617
    return false;    
618
}
619

    
620
// start action
621
function start(serverIDs){
622
        if (!serverIDs.length){
623
                //ajax_success('DEFAULT');
624
                return false;
625
        }        
626
    // ajax post start call
627
    var payload = {
628
        "start": {"type" : "NORMAL"}
629
    };   
630

    
631
        var serverID = serverIDs.pop()
632
    $.ajax({
633
        url: API_URL + '/servers/' + serverID + '/action',
634
        type: "POST",
635
                contentType: "application/json",
636
        dataType: "json",
637
        data: JSON.stringify(payload),
638
        timeout: TIMEOUT,
639
        error: function(jqXHR, textStatus, errorThrown) { 
640
                    display_failure(jqXHR.status, serverID, 'Start', jqXHR.responseText)
641
                    },
642
        success: function(data, textStatus, jqXHR) {
643
                    if ( jqXHR.status == '202') {
644
                                            try {
645
                            console.info('started ' + serverID);
646
                        } catch(err) {}
647
                                                // indicate that the action succeeded
648
                                                display_success(serverID);
649
                                                // continue with the rest of the servers                                                
650
                        start(serverIDs);
651
                    } else {
652
                        ajax_error(jqXHR.status, serverID, 'Start', jqXHR.responseText);
653
                    }
654
                }
655
    });
656

    
657
    return false;
658
}
659

    
660
// show the welcome screen
661
function showWelcome() {
662
    $("#emptymachineslist").fadeIn("slow");
663
    $("#createbody").fadeIn("slow");
664
    $("#createcontainer").addClass('emptycreatecontainer')
665
    $("#create").addClass('emptycreate')
666
    $("#view-select").fadeOut("fast");
667
}
668

    
669
// hide the welcome screen
670
function hideWelcome() {
671
    $("#emptymachineslist").fadeOut("fast");
672
    $("#createbody").fadeOut("fast");
673
    $("#createcontainer").removeClass('emptycreatecontainer')
674
    $("#create").removeClass('emptycreate')
675
    $("#view-select").fadeIn("fast");
676
}
677