Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines.html @ 3a150bbe

History | View | Annotate | Download (29.8 kB)

1
{% load i18n %}
2

    
3
<div id="machines" class="seperator"></div>
4

    
5
<!-- the create button -->
6
<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
7

    
8
<!-- changing between standard/list view -->
9
<div id="view-select">
10
    <a id="standard" class="current" href="/machines">#</a>
11
    <span class="view-seperator">|</span>
12
    <a id="list" href="/machines/list">=</a>
13
</div>
14

    
15
<!-- the standard view -->
16
<div id="machinesview" class="standard">
17
    <div id="spinner"></div>
18
    <div class="machine" id="machine-template" style="display:none">
19
        <div class="state">
20
            <div class="status">{% trans "Running" %}</div>
21
            <div class="indicator"></div>
22
            <div class="indicator"></div>
23
            <div class="indicator"></div>
24
            <div class="indicator"></div>
25
        </div>
26
        <img class="logo" src="" />
27
        <a href="#" class="name">
28
            <h5>╬Łame: <span class="name">node.name</span><span class="rename"></span></h5>
29
        </a>
30
        <a href="#" class="ip">
31
            <h5>IP: <span class="public">node.public_ip</span></h5>
32
        </a>
33
        <h5 class="settings">
34
            {% trans "Show:" %} <a href="#">{% trans "disks" %}</a> | <a href="#">{% trans "networks" %}</a> | <a href="#">{% trans "group" %}</a>
35
        </h5>
36
        <div class="actions">
37
            <a href="#" class="action-start">{% trans "Start" %}</a>
38
            <a href="#" class="action-reboot">{% trans "Reboot" %}</a>
39
            <a href="#" class="action-shutdown">{% trans "Shutdown" %}</a>
40
            <a href="#" class="more">{% trans "more &hellip;" %}</a>
41
        </div>
42
        <div class="seperator"></div>
43
    </div>
44

    
45
    <div class="running"></div>
46
    <div id="mini" class="seperator"></div>
47
    <div class="terminated"></div>
48
</div>
49

    
50
<div id="machines" class="seperator"></div>
51

    
52
<!-- the form -->
53
<form action="#">
54
        <!-- scrollable root element -->
55
        <div class="modal" id="wizard">
56
                <!-- status bar -->
57
                <ul id="status">
58
                        <li class="active"><strong>1.</strong> {% trans "Image" %}</li>
59
                        <li><strong>2.</strong> {% trans "Machine" %}</li>
60
                        <li><strong>3.</strong> {% trans "Review" %}</li>
61
                </ul>
62
                <!-- scrollable items -->
63
                <div class="items">
64
                        <!-- pages -->
65
                        <div class="page">
66
                <h2>{% trans "Select an OS" %}</h2>
67
                <ul class="tabs">
68
                    <li><a href="#">{% trans "standard" %}</a></li>
69
                    <li><a href="#">{% trans "custom" %}</a></li>
70
                </ul>
71
                <div class="panes">
72
                            <li id="image-template" style="display:none">
73
                                    <label for="image.id"> 
74
                            <a><div class="image">
75
                                <img src="" class="image-logo"/>
76
                                <strong class="image-title">image.title</strong>
77
                                <input class="radio" type="radio" name="image-id" id="image-id" />
78
                                <br />
79
                                <span class="description">image.description</span> 
80
                                <span class="size">?? MB</span>
81
                                
82
                            </div></a>
83
                                    </label>
84
                            </li>
85
                    <ul class="pane" id="standard-images">
86
                                            <!-- standard images -->
87
                                    </ul>
88
                    <ul class="pane" id="custom-images">
89
                                            <!-- custom images -->
90

    
91
                    </ul>
92
                </div>
93
                                <button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button>
94
                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>
95
            </div>
96
                        <div class="page">
97
                                <h2>{% trans "Select CPU, RAM and storage" %}</h2>
98
                <ul>
99
                    <li>
100
                        <div class="machine-type">
101
                            <label for="small">
102
                                <input type="radio" id="small" name="machine-type" value="small" checked="true" />
103
                                <strong>{% trans "small" %}</strong>
104
                            </label>
105
                        </div>
106
                        <div class="machine-type">      
107
                            <label for="medium">
108
                                <input type="radio" id="medium" name="machine-type" value="medium" />                  
109
                                <strong>{% trans "medium" %}</strong>
110
                            </label>
111
                        </div>
112
                        <div class="machine-type">
113
                            <label for="large">
114
                                <input type="radio" id="large" name="machine-type" value="large" />
115
                                <strong>{% trans "large" %}</strong>
116
                            </label>
117
                        </div>
118
                        <div class="machine-type">
119
                            <label for="custom">
120
                                <input type="radio" name="machine-type" id="custom" value="large" />
121
                                <strong>{% trans "custom" %}</strong>
122
                            </label>
123
                        </div>
124
                    </li>
125
                    <li>
126
                                    <label><strong class="sliders">CPU (cores)</strong></label>
127
                        <input type="range" id="cpu" style="display:none" />
128
                        <input type="text" class="range" id="cpu-indicator" />
129
                    </li>
130
                    <li>
131
                                    <label><strong class="sliders">RAM (MB)</strong></label>
132
                        <input type="range" id="ram" style="display:none" />
133
                        <input type="text" class="range" id="ram-indicator" />
134

    
135
                    </li>
136
                    <li>
137
                                <label><strong class="sliders">Storage (GB)</strong></label>
138
                        <input type="range" id="storage" style="display:none" />
139
                        <input type="text" class="range" id="storage-indicator" />
140

    
141
                    </li>
142
                    <li>
143
                        <div class="cost">
144
                            {% trans "Cost per hour:" %} 20 {% trans "credits" %} | {% trans "Credits currently in account:" %} 10.000
145
                        </div>
146
                    </li>
147
                </ul>
148
                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>
149
                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>
150
            </div>
151
                        <div class="page">
152
                                <h2>{% trans "Confirm your settings" %}</h2>
153
                <ul>
154
                    <li class="required">
155
                        <label>
156
                            <strong>Machine name</strong>
157
                            <input type="text" class="text" name="machine_name" value="My Ubuntu 10.04 x86_64 server"/>
158
                        </label>
159
                    </li>
160
                    <li>
161
                        <strong>{% trans "Image:" %}</strong> <span id="machine_image-label">Ubuntu 10.04 x86_64 server</span>
162
                    </li>
163
                    <li>
164
                        <strong>{% trans "CPU:" %}</strong> <span id="machine_cpu-label">2</span> <span>{% trans "cores" %}</span>
165
                    </li>
166
                    <li>
167
                        <strong>{% trans "RAM:" %}</strong> <span id="machine_ram-label">1024</span><span>MB</span>
168
                    </li>
169
                    <li>
170
                        <strong>{% trans "Storage:" %}</strong> <span id="machine_storage-label">10</span><span>GB</span>
171
                    </li>
172
                    <li>
173
                        <strong>{% trans "Cost per hour:" %}</strong> <span>20 {% trans "credits" %}</span>
174
                    </li>
175
                    <li>
176
                        <strong>{% trans "Remaining credits:" %}</strong> <span>10.000</span>
177
                    </li>
178
                </ul>
179
                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>
180
                                <button type="button" class="next right" id="start">{% trans "Create VM" %}</button>        
181
            </div>
182
                </div>
183
        </div>
184
</form>
185

    
186
<!-- notification after wizard completion -->
187
<a id="notification" rel="#error-success" href="#"></a>
188

    
189
<div class="modal" id="error-success">
190
    <h3>{% trans "Error!/Success!" %}</h3>
191
    <p>{% trans "More details about the result"%}</p>
192
</div>
193

    
194
<!-- confirmation before executing an action -->
195
<a id="confirmation" rel="#yes-no" href="#"></a>
196

    
197
<div class="modal" id="yes-no">
198
    <h3>{% trans "You are about to xxx machine yyy" %}</h3>
199
    <p>{% trans "Are you sure you want to proceed?" %}</p>
200
    <button>{% trans "Yes" %}</button>
201
        <button>{% trans "No" %}</button>
202
</div>
203

    
204
<script type="text/javascript"> 
205
var TIMEOUT = {{timeout}};
206
</script>
207

    
208
<script>
209
// hardcoded image types
210
var image_tags = {
211
                1: 'archlinux',
212
                2: 'centos',
213
                3: 'debian',
214
                4: 'freebsd',
215
                5: 'gentoo',
216
                6: 'netbsd',
217
                7: 'openbsd',
218
                8: 'redhat',
219
                9: 'slackware',
220
                10: 'suse',
221
                11: 'ubuntu',
222
                12: 'windows',
223
                20: 'ubuntu',
224
               };
225

226
// ajax error checking  
227
function ajax_error(jqXHR) {; 
228
    // prepare the error message
229
    $("#error-success h3").text('Error!');
230
    // check the error code
231
    switch (jqXHR.status) {
232
        case 503: // XX error/message
233
            $("#error-success p").text('Your request caused a <strong>' + jqXHR.status + '</strong> error');
234
            break;
235
        case 400: // YY error/message
236
            $("#error-success p").text('Your request caused a <strong>' + jqXHR.status + '</strong> error');
237
            break;
238
        default: // XXYY error/message
239
            $("#error-success p").text('Your request caused a <strong>' + jqXHR.status + '</strong> error');
240
    }
241
    // bring up error notification
242
    var triggers = $("a#notification").overlay({
243
            // some mask tweaks suitable for modal dialogs
244
            mask: {
245
                    color: '#ebecff',
246
                    opacity: '0.9'
247
            },
248
        top: 'center',
249
            closeOnClick: false,
250
        oneInstance: false,
251
        load: true,
252
        onClose: function(){
253
            $("div.pane#machines-pane").load($("a#standard").attr("href"));
254
        }
255
    });
256
    return false;
257
}
258

259
// ajax success checking
260
function ajax_success() {
261
    // prepare the error message
262
    $("#error-success h3").text('Success!');
263
    $("#error-success p").text('Your request has been succefully executed.');
264
    // bring up success notification
265
    var triggers = $("a#notification").overlay({
266
            // some mask tweaks suitable for modal dialogs
267
            mask: {
268
                    color: '#ebecff',
269
                    opacity: '0.9'
270
            },
271
        top: 'center',
272
            closeOnClick: false,
273
        oneInstance: false,
274
        load: true,
275
        onClose: function(){
276
            $("div.pane#machines-pane").load($("a#standard").attr("href"));
277
        }
278
    });
279
    return false;
280
}
281

282
// confirmation overlay generation
283
function confirm_action(action_string, action_function, serverID, serverName) {
284
    $("#yes-no h3").text('You are about to ' + action_string + ' vm ' + serverName);
285
    // action confirmation overlay
286
    var triggers = $("a#confirmation").overlay({
287
            // some mask tweaks suitable for modal dialogs
288
            mask: {
289
                    color: '#ebecff',
290
                    opacity: '0.9'
291
            },
292
        top: 'center',
293
        load: true
294
    });
295
    // yes or no?
296
    var buttons = $("#yes-no button").click(function(e) {
297
            // get user input
298
            var yes = buttons.index(this) === 0;
299
        //close the confirmation window
300
        $("a#confirmation").overlay().close(); 
301
        // return true=yes or false=no
302
        if (yes) {
303
            action_function(serverID);
304
        } else {
305
            // reload page
306
            $("div.pane#machines-pane").load($("a#standard").attr("href"));
307
        }
308
    });
309
    return false;
310
}
311

312
// get and show a list of running and terminated machines
313
function update_vms() {
314

315
    $(".running").text('');
316
    $(".terminated").text('');
317
    $("ul#standard-images").text('');
318
    $("ul#custom-images").text('');
319

320
    $.ajax({
321
        url: '/api/v1.0/servers/detail',
322
        type: "GET",
323
        timeout: TIMEOUT,
324
        dataType: "json",
325
        error: function(jqXHR, textStatus, errorThrown) { 
326
                    ajax_error(jqXHR);
327
                    return false;
328
                    },
329
        success: function(data, textStatus, jqXHR) {
330
            if ($(".running a.name").length + $(".terminated a.name").length == 0) {
331
            
332
                $.each(data.servers, function(i,server){
333
                    // if the machine is deleted it should not be included in any list
334
                    if (server.status == 'DELETED') {
335
                        return;
336
                    }
337
                    var machine = $("#machine-template").clone().attr("id", server.id).fadeIn("slow");
338
                    machine.find("input[type='checkbox']").attr("id", "input-" + server.id);
339
                    machine.find("input[type='checkbox']").attr("class", server.status);
340
                    machine.find("a.name span.name").text(server.name);
341
                    machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');
342
                    machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
343
                    machine.find("img.list-logo").attr("title",image_tags[server.imageId]);
344
                    machine.find("span.imagetag").text(image_tags[server.imageId]);
345
    
346
                    machine.find("a.ip span.public").text(String(server.addresses.public.ip.addr).replace(',',' '));            
347
    
348
                    // TODO: handle SHARE_IP, SHARE_IP_NO_CONFIG, DELETE_IP, REBUILD, QUEUE_RESIZE, PREP_RESIZE, RESIZE, VERIFY_RESIZE, PASSWORD, RESCUE
349
                    if (server.status == 'BUILD'){
350
                        machine.find(".status").text('Building');
351
                        machine.appendTo(".running");
352
                    } else if (server.status == 'ACTIVE') {
353
                        machine.find(".status").text('Running');
354
                        machine.appendTo(".running"); 
355
                    } else if (server.status == 'REBOOT' || server.status == 'HARD_REBOOT') {
356
                        machine.find(".status").text('Rebooting');
357
                        machine.appendTo(".running");
358
                    } else if (server.status == 'STOPPED') {
359
                        machine.find(".status").text('Stopped');
360
                        machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
361
                        machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'-off.png');
362
                        machine.appendTo(".terminated");
363
                    } else if (server.status == 'ERROR') {
364
                        machine.find(".status").text('Error');
365
                        machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
366
                        machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'-off.png');
367
                        machine.appendTo(".terminated");
368
                    } 
369
                    else {
370
                        machine.find(".status").text('Unknown');
371
                        machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
372
                        machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'-off.png');
373
                        machine.appendTo(".terminated");
374
                    }
375
                });
376
            }
377
            $("#spinner").hide();
378
            $("div.machine:last-child").find("div.seperator").hide();
379
            // if the terminated list is populated then the seperator must be shown
380
            if ($(".terminated a.name").length > 0) {
381
                $("#mini.seperator").fadeIn("slow");
382
            }
383
            // creating the table in list view, if there are machines to show
384
            if ($("div.list table.list-machines tbody").length > 0) {
385
                $("div.list table.list-machines").dataTable({
386
                    "bInfo": false,
387
                    "bPaginate": false,
388
                            "bAutoWidth": false,
389
                            "bSort": true,    
390
                    "bStateSave": true,
391
                    //"sScrollY": "250px",
392
                    //"sScrollX": "500px",
393
                    //"sScrollXInner": "480px",
394
                    "aoColumnDefs": [
395
                        { "bSortable": false, "aTargets": [ 0 ] }
396
                    ]
397
                });
398
                $("div.list table.list-machines").show();
399
                $("div.list div.actions").show();
400
            }
401
        }
402
    });
403
    return false;
404
}
405

406
// get and show a list of anvailable standard and custom images
407
function update_images() { 
408
    $.ajax({
409
        url: '/api/v1.0/images/detail',
410
        type: "GET",
411
        //async: false,
412
        dataType: "json",
413
        timeout: TIMEOUT,
414
        error: function(jqXHR, textStatus, errorThrown) { 
415
                    ajax_error(jqXHR);
416
                    },
417
        success: function(data, textStatus, jqXHR) {
418
            if ($("ul#standard-images li").toArray().length + $("ul#custom-images li").toArray().length == 0) {
419
                $.each(data.images, function(i,image){
420
                    var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");
421
                    img.find("label").attr('for',"img-radio-" + image.id);
422
                    img.find(".image-title").text(image.name);
423
                    img.find(".description").text(image.description);
424
                    img.find(".size").text(image.size);
425
                    img.find("input.radio").attr('id',"img-radio-" + image.id);
426
                    if (i==0) img.find("input.radio").attr("checked","checked"); 
427
                    img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');
428
                    if (image.serverId) {
429
                        img.appendTo("ul#custom-images");
430
                    } else {
431
                        img.appendTo("ul#standard-images");
432
                    }
433
                });
434
            }
435
        }
436
    });
437
    return false;
438
}
439

440
var flavors = {}, disks = [], cpus = [], ram = [];
441

442
Array.prototype.unique = function () {
443
        var r = new Array();
444
        o:for(var i = 0, n = this.length; i < n; i++)
445
        {
446
                for(var x = 0, y = r.length; x < y; x++)
447
                {
448
                        if(r[x]==this[i])
449
                        {
450
                                continue o;
451
                        }
452
                }
453
                r[r.length] = this[i];
454
        }
455
        return r;
456
}
457

458
// get and configure flavor selection
459
function update_flavors() { 
460
    $.ajax({
461
        url: '/api/v1.0/flavors/detail',
462
        type: "GET",
463
        //async: false,
464
        dataType: "json",
465
        timeout: TIMEOUT,
466
        error: function(jqXHR, textStatus, errorThrown) { 
467
            ajax_error(jqXHR);
468
        },
469
        success: function(data, textStatus, jqXHR) {
470
            flavors = data.flavors;
471
            $.each(flavors, function(i, flavor) {
472
                cpus[i] = flavor['cpu'];
473
                disks[i] = flavor['disk'];
474
                ram[i] = flavor['ram'];
475
            });
476
            cpus = cpus.unique();
477
            disks = disks.unique();
478
            ram = ram.unique();
479
            // sliders for selecting VM flavor
480
            $("#cpu:range").rangeinput({min:0,
481
                                       value:0,
482
                                       step:1,
483
                                       progress: true,
484
                                       max:cpus.length-1});
485
            
486
            $("#storage:range").rangeinput({min:0,
487
                                       value:0,
488
                                       step:1,
489
                                       progress: true,
490
                                       max:disks.length-1});
491

492
            $("#ram:range").rangeinput({min:0,
493
                                       value:0,
494
                                       step:1,
495
                                       progress: true,
496
                                       max:ram.length-1});
497
            $("#small").click();
498

499
        }
500
    });
501
    return false;
502
}
503
// return flavorId from cpu, disk, ram values
504
function identify_flavor(cpu, disk, ram){
505
    for (i=0;i<flavors.length;i++){
506
        if (flavors[i]['cpu'] == cpu && flavors[i]['disk']==disk && flavors[i]['ram']==ram) {
507
            return flavors[i]['id']
508
        }
509
    }
510
    return 0;
511
}
512

513
// switch to list view
514
$("#list").click(function(){
515
    $.cookie("list", '1'); // set list cookie
516
    $("div.standard#machinesview").load($("#list").attr("href"));
517
    $("a#standard")[0].className += ' activelink'
518
    this.style.color = '#5f8dd3';
519
    update_vms();
520
    return false;
521
});
522

523
// switch to standard view
524
$("a#standard").click(function(){
525
    $.cookie("list", '0');
526
    href=$("a#standard").attr("href");
527
    $("div.pane#machines-pane").load(href);
528
    return false;
529
});
530

531
// redirect to list view if the list cookie is set
532
if ($.cookie("list") == '1') {
533
    $("#list").click();
534
} else {
535
    // execute the update function to populate the list
536
    update_vms();
537
}
538

539
// launch VM creation wizard
540
$("a#create").click(function(){
541
    // populate image list
542
    update_images();
543
    // configure flavors
544
    update_flavors(); 
545
    // launch the wizard
546
    $("#wizard").scrollable().begin();
547
});
548

549
// create wizard overlay
550
$(function() { 
551
    $("a#create").overlay({
552
        mask: '#000', 
553
        effect: 'default', 
554
        top: '5%', 
555
        oneInstance: false,
556
        closeOnClick: false
557
    });
558
});
559

560
// wizard
561
$(function() {
562
    var root = $("#wizard").scrollable();
563

564
    // some variables that we need
565
    var api = root.scrollable();
566

567
    // rangeinput with default configuration
568
    // validation logic is done inside the onBeforeSeek callback
569
    api.onBeforeSeek(function(event, i) {
570
            // we are going 1 step backwards so no need for validation
571
            if (api.getIndex() < i) {
572
             // 1. get current page
573
                     var page = root.find(".page").eq(api.getIndex()),
574
                         // 2. .. and all required fields inside the page
575
                         inputs = page.find(".required :input").removeClass("error"),
576
                         // 3. .. which are empty
577
                         empty = inputs.filter(function() {
578
                                return $(this).val().replace(/\s*/g, '') == '';
579
                         });
580
                     // if there are empty fields, then
581
                    if (empty.length) {
582
                            // add a CSS class name "error" for empty & required fields
583
                            empty.addClass("error");
584
                            // cancel seeking of the scrollable by returning false
585
                            return false;
586
                    // everything is good
587
                    } 
588
            }
589
            // update status bar
590
            $("#status li").removeClass("active").eq(i).addClass("active");
591
        
592
        // update confirm step
593
        var image = $("input[type=radio][name=image-id]:checked");
594
        var imageId = image.length ? image[0].id : false
595
        if (imageId) {
596
            var imageName = $("label[for=" + imageId + "] .image-title").text();
597
            $("#machine_image-label")[0].textContent = imageName;
598
            $("input[type=text][name=machine_name]")[0].value = "My " + imageName + " server";
599
        }
600
        $("#machine_cpu-label")[0].textContent = $("#cpu-indicator")[0].value;
601
        $("#machine_ram-label")[0].textContent = $("#ram-indicator")[0].value;
602
        $("#machine_storage-label")[0].textContent = $("#storage-indicator")[0].value;
603
        
604
    });
605

606
    // if tab is pressed on the next button seek to next page
607
    root.find("button.next").keydown(function(e) {
608
            if (e.keyCode == 9) {
609
                    // seeks to next tab by executing our validation routine
610
                    api.next();
611
                    e.preventDefault();
612
            }
613
    });
614

615
});
616

617
// disable sliders in flavor selection
618
function disableSliders() {
619
    $("#cpu").attr('disabled',true);
620
    $("#ram").attr('disabled',true);
621
    $("#storage").attr('disabled',true);
622
}
623

624
// selecting the small size
625
$("#small").click(function(){
626
    $("#cpu").data('rangeinput').setValue(0);
627
    $("#ram").data('rangeinput').setValue(0);
628
    $("#storage").data('rangeinput').setValue(0);
629
    $("#cpu-indicator")[0].value = cpus[0];
630
    $("#ram-indicator")[0].value = ram[0];
631
    $("#storage-indicator")[0].value = disks[0];
632
});
633

634
// selecting the medium size
635
$("#medium").click(function(){
636
    $("#cpu").data('rangeinput').setValue(1);
637
    $("#ram").data('rangeinput').setValue(1);
638
    $("#storage").data('rangeinput').setValue(1);
639
    $("#cpu-indicator")[0].value = cpus[1];
640
    $("#ram-indicator")[0].value = ram[1];
641
    $("#storage-indicator")[0].value = disks[1];    
642
});
643

644
// selecting the large size
645
$("#large").click(function(){
646
    $("#cpu").data('rangeinput').setValue(2);
647
    $("#ram").data('rangeinput').setValue(2);
648
    $("#storage").data('rangeinput').setValue(2);
649
    $("#cpu-indicator")[0].value = cpus[2];
650
    $("#ram-indicator")[0].value = ram[2];
651
    $("#storage-indicator")[0].value = disks[2];    
652
});
653

654
// selecting the custom flavor enables the sliders
655
$("#custom").click(function(){
656
    $("#cpu").attr('disabled',false);
657
    $("#ram").attr('disabled',false);
658
    $("#storage").attr('disabled',false);
659
    $("strong.sliders").style = 'color: #778899;';
660
});
661

662
// get cpu value for custom flavor
663
$("#cpu:range").change(function(event, value){
664
    $("#custom").click();
665
    // update cpu indicator
666
    $("#cpu-indicator")[0].value = cpus[Number(value)];
667
});
668

669
// get ram value for custom flavor
670
$("#ram:range").change(function(event, value){
671
    $("#custom").click();
672
    // update ram indicator
673
    $("#ram-indicator")[0].value = ram[Number(value)];
674
});
675

676
// get storage value for custom flavor
677
$("#storage:range").change(function(event, value){
678
    $("#custom").click();
679
    // update disk indicator
680
    $("#storage-indicator")[0].value = disks[Number(value)];
681
    return false;
682
});
683

684
// exit the wizard
685
$("#cancel").click(function(){
686
    $("a#create").overlay().close();
687
});
688

689
// starting a new VM through the wizard
690
$("#start").click(function(){
691
    //TODO: get the real data
692
    var flavorId = identify_flavor($("#cpu-indicator")[0].value, $("#storage-indicator")[0].value, $("#ram-indicator")[0].value);
693
    var payload = {
694
        "server": {
695
            "name": "image-name",
696
            "imageId": 1,
697
            "flavorId" : flavorId,
698
            "metadata" : {
699
                "My Server Name" : $("input[name=machine_name]")[0].value
700
            },
701
        }
702
    };
703

704
    $.ajax({
705
    url: "/api/v1.0/servers",
706
    type: "POST",
707
    dataType: "json",    
708
    data: JSON.stringify(payload),
709
    timeout: TIMEOUT,
710
    error: function(jqXHR, textStatus, errorThrown) { 
711
                ajax_error(jqXHR);
712
           },
713
    success: function(data, textStatus, jqXHR) {
714
                if ( jqXHR.status == '202') {
715
                    ajax_success(jqXHR);                   
716
                } else {
717
                    ajax_error(jqXHR);
718
                }
719
            }
720
    });
721
    console.warn('creating ' + $("input[name=machine_name]")[0].value)
722

723
    $("#wizard").hide();
724
});
725

726
// reboot action
727
function reboot(serverID){
728
    // ajax post reboot call
729
    var payload = {
730
        "reboot": {"type" : "HARD"}
731
    };   
732

733
    $.ajax({
734
        url: '/api/v1.0/servers/' + serverID + '/action',
735
        type: "POST",        
736
        dataType: "json",
737
        data: JSON.stringify(payload),
738
        timeout: TIMEOUT,
739
        error: function(jqXHR, textStatus, errorThrown) { 
740
                    ajax_error(jqXHR);
741
                    },
742
        success: function(data, textStatus, jqXHR) {
743
                    if ( jqXHR.status == '202') {
744
                        ajax_success(jqXHR);
745
                    } else {
746
                        ajax_error(jqXHR);
747
                    }}
748
    });
749
    console.warn('rebooting ' + serverID);    
750
    return false;
751
}
752

753
// shutdown action
754
function shutdown(serverID) {
755
    // ajax post shutdown call
756
    var payload = {
757
        "shutdown": {"timeout" : "5"}
758
    };   
759

760
    $.ajax({
761
            url: '/api/v1.0/servers/' + serverID + '/action',
762
            type: "POST",
763
            dataType: "json",
764
        data: JSON.stringify(payload),
765
        timeout: TIMEOUT,
766
        error: function(jqXHR, textStatus, errorThrown) { 
767
                    ajax_error(jqXHR);
768
                    },
769
        success: function(data, textStatus, jqXHR) {
770
                    if ( jqXHR.status == '202') {
771
                        ajax_success(jqXHR);
772
                    } else {
773
                        ajax_error(jqXHR);
774
                    }}             
775
    });
776
    console.warn('shutting down ' + serverID);        
777
    return false;    
778
}
779

780

781
// start action
782
function start(serverID){
783
    // ajax post start call
784
    var payload = {
785
        "start": {"type" : "NORMAL"}
786
    };   
787

788
    $.ajax({
789
        url: '/api/v1.0/servers/' + serverID + '/action',
790
        type: "POST",
791
        dataType: "json",
792
        data: JSON.stringify(payload),
793
        timeout: TIMEOUT,
794
        error: function(jqXHR, textStatus, errorThrown) { 
795
                    ajax_error(jqXHR);
796
                    },
797
        success: function(data, textStatus, jqXHR) {
798
                    if ( jqXHR.status == '202') {
799
                        ajax_success(jqXHR);
800
                    } else {
801
                        ajax_error(jqXHR);
802
                    }}
803
    });
804
    console.warn('starting ' + serverID);        
805
    return false;
806
}
807

808

809
// basic functions executed on page load
810

811
// create tabs for main menu
812
$("ul.tabs").tabs("div.panes ul");
813

814
// intercept reboot click 
815
$("div.actions a.action-reboot").live('click', function(){ 
816
    var serverID = $(this).parent().parent().attr("id");
817
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
818
    confirm_action('reboot', reboot, serverID, serverName);
819
    return false;
820
});
821

822
// intercept shutdown click
823
$("div.actions a.action-shutdown").live('click', function(){ 
824
    var serverID = $(this).parent().parent().attr("id");
825
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
826
    confirm_action('shutdown', shutdown, serverID, serverName);
827
    return false;
828
});
829
// intercept start click
830
$("div.actions a.action-start").live('click', function(){ 
831
    var serverID = $(this).parent().parent().attr("id");
832
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
833
    confirm_action('start', start, serverID, serverName);
834
    return false;
835
});
836
</script>