Statistics
| Branch: | Tag: | Revision:

root / ui / templates / machines.html @ 1cea389e

History | View | Annotate | Download (25.7 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" value="1" max="8" min="1" />
128
                    </li>
129
                    <li>
130
                                    <label><strong class="sliders">RAM (MB)</strong></label>
131
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
132
                    </li>
133
                    <li>
134
                                <label><strong class="sliders">Storage (GB)</strong></label>
135
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
136
                    </li>
137
                    <li>
138
                        <div class="cost">
139
                            {% trans "Cost per hour:" %} 20 {% trans "credits" %} | {% trans "Credits currently in account:" %} 10.000
140
                        </div>
141
                    </li>
142
                </ul>
143
                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>
144
                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>
145
            </div>
146
                        <div class="page">
147
                                <h2>{% trans "Confirm your settings" %}</h2>
148
                <ul>
149
                    <li class="required">
150
                        <label>
151
                            <strong>Machine name</strong>
152
                            <input type="text" class="text" name="machine_name" value="My Ubuntu 10.04 x86_64 server"/>
153
                        </label>
154
                    </li>
155
                    <li>
156
                        <strong>{% trans "Image:" %}</strong> <span>Ubuntu 10.04 x86_64 server</span>
157
                    </li>
158
                    <li>
159
                        <strong>{% trans "CPU:" %}</strong> <span>2 cores</span>
160
                    </li>
161
                    <li>
162
                        <strong>{% trans "RAM:" %}</strong> <span>1024MB</span>
163
                    </li>
164
                    <li>
165
                        <strong>{% trans "Storage:" %}</strong> <span>10GB</span>
166
                    </li>
167
                    <li>
168
                        <strong>{% trans "Cost per hour:" %}</strong> <span>20 {% trans "credits" %}</span>
169
                    </li>
170
                    <li>
171
                        <strong>{% trans "Remaining credits:" %}</strong> <span>10.000</span>
172
                    </li>
173
                </ul>
174
                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>
175
                                <button type="button" class="next right" id="start">{% trans "Create VM" %}</button>        
176
            </div>
177
                </div>
178
        </div>
179
</form>
180

    
181
<!-- notification after wizard completion -->
182
<a id="notification" rel="#error-success" href="#"></a>
183

    
184
<div class="modal" id="error-success">
185
    <h3>{% trans "Error!/Success!" %}</h3>
186
    <p>{% trans "More details about the result"%}</p>
187
</div>
188

    
189
<!-- confirmation before executing an action -->
190
<a id="confirmation" rel="#yes-no" href="#"></a>
191

    
192
<div class="modal" id="yes-no">
193
    <h3>{% trans "You are about to xxx machine yyy" %}</h3>
194
    <p>{% trans "Are you sure you want to proceed?" %}</p>
195
    <button>{% trans "Yes" %}</button>
196
        <button>{% trans "No" %}</button>
197
</div>
198

    
199
<script type="text/javascript"> 
200
var TIMEOUT = {{timeout}};
201
</script>
202

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

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

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

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

307
// get and show a list of running and terminated machines
308
function update_vms() {
309

310
    $(".running").text('');
311
    $(".terminated").text('');
312
    $("ul#standard-images").text('');
313
    $("ul#custom-images").text('');
314

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

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

434
// get and configure flavor selection
435
function update_flavors() { 
436
    $.ajax({
437
        url: '/api/v1.0/flavors/detail',
438
        type: "GET",
439
        //async: false,
440
        dataType: "json",
441
        timeout: TIMEOUT,
442
        error: function(jqXHR, textStatus, errorThrown) { 
443
                    ajax_error(jqXHR);
444
                    },
445
        success: function(data, textStatus, jqXHR) {
446
        }
447
    });
448
    return false;
449
}
450
// switch to list view
451
$("#list").click(function(){
452
    $.cookie("list", '1'); // set list cookie
453
    $("div.standard#machinesview").load($("#list").attr("href"));
454
    $("a#standard")[0].className += ' activelink'
455
    this.style.color = '#5f8dd3';
456
    update_vms();
457
    return false;
458
});
459

460
// switch to standard view
461
$("a#standard").click(function(){
462
    $.cookie("list", '0');
463
    href=$("a#standard").attr("href");
464
    $("div.pane#machines-pane").load(href);
465
    return false;
466
});
467

468
// redirect to list view if the list cookie is set
469
if ($.cookie("list") == '1') {
470
    $("#list").click();
471
} else {
472
    // execute the update function to populate the list
473
    update_vms();
474
}
475

476
// launch VM creation wizard
477
$("a#create").click(function(){
478
    // populate image list
479
    update_images();
480
    // configure flavors
481
    update_flavors(); 
482
    // launch the wizard
483
    $("#wizard").scrollable().begin();
484
});
485

486
// create wizard overlay
487
$(function() { 
488
    $("a#create").overlay({
489
        mask: '#000', 
490
        effect: 'default', 
491
        top: '5%', 
492
        oneInstance: false,
493
        closeOnClick: false
494
    });
495
});
496

497
// wizard
498
$(function() {
499
    var root = $("#wizard").scrollable();
500

501
    // some variables that we need
502
    var api = root.scrollable();
503

504
    // rangeinput with default configuration
505
    // validation logic is done inside the onBeforeSeek callback
506
    api.onBeforeSeek(function(event, i) {
507
            // we are going 1 step backwards so no need for validation
508
            if (api.getIndex() < i) {
509
             // 1. get current page
510
                     var page = root.find(".page").eq(api.getIndex()),
511
                         // 2. .. and all required fields inside the page
512
                         inputs = page.find(".required :input").removeClass("error"),
513
                         // 3. .. which are empty
514
                         empty = inputs.filter(function() {
515
                                return $(this).val().replace(/\s*/g, '') == '';
516
                         });
517
                     // if there are empty fields, then
518
                    if (empty.length) {
519
                            // add a CSS class name "error" for empty & required fields
520
                            empty.addClass("error");
521
                            // cancel seeking of the scrollable by returning false
522
                            return false;
523
                    // everything is good
524
                    } 
525
            }
526
            // update status bar
527
            $("#status li").removeClass("active").eq(i).addClass("active");
528
    });
529

530
    // if tab is pressed on the next button seek to next page
531
    root.find("button.next").keydown(function(e) {
532
            if (e.keyCode == 9) {
533
                    // seeks to next tab by executing our validation routine
534
                    api.next();
535
                    e.preventDefault();
536
            }
537
    });
538
});
539

540
// sliders for selecting VM flavor
541
$(":range").rangeinput({progress:true});
542

543
// disable sliders in flavor selection
544
function disableSliders() {
545
    $("#cpu").attr('disabled',true);
546
    $("#ram").attr('disabled',true);
547
    $("#storage").attr('disabled',true);
548
}
549

550
// selecting the small size
551
$("#small").click(function(){
552
    $("#cpu").data('rangeinput').setValue(1);
553
    $("#ram").data('rangeinput').setValue(256);
554
    $("#storage").data('rangeinput').setValue(5);
555
});
556

557
// selecting the medium size
558
$("#medium").click(function(){
559
    $("#cpu").data('rangeinput').setValue(4);
560
    $("#ram").data('rangeinput').setValue(1024);
561
    $("#storage").data('rangeinput').setValue(30);
562
});
563

564
// selecting the large size
565
$("#large").click(function(){
566
    $("#cpu").data('rangeinput').setValue(8);
567
    $("#ram").data('rangeinput').setValue(4096);
568
    $("#storage").data('rangeinput').setValue(80);
569
});
570

571
// selecting the custom flavor enables the sliders
572
$("#custom").click(function(){
573
    $("#cpu").attr('disabled',false);
574
    $("#ram").attr('disabled',false);
575
    $("#storage").attr('disabled',false);
576
    $("strong.sliders").style = 'color: #778899;';
577
});
578

579
// get cpu value for custom flavor
580
$("#cpu").change(function(){
581
    $("#custom").click();
582
});
583

584
// get ram value for custom flavor
585
$("#ram").change(function(){
586
    $("#custom").click();
587
});
588

589
// get storage value for custom flavor
590
$("#storage").change(function(){
591
    $("#custom").click();
592
});
593

594
// exit the wizard
595
$("#cancel").click(function(){
596
    $("a#create").overlay().close();
597
});
598

599
// starting a new VM through the wizard
600
$("#start").click(function(){
601
    // ajax port create call
602
    $.ajax({
603
    url: '/api/v1.0/servers',
604
    type: "POST",
605
    data: {
606
        "create": '{"cpu" : "2", "ram": "1024", "storage": "15", "name": "image name"}'
607
        },
608
    //TODO: get the real data
609
    dataType: "json",
610
    timeout: TIMEOUT,
611
    error: function(jqXHR, textStatus, errorThrown) { 
612
                ajax_error(jqXHR);
613
           },
614
    success: function(data, textStatus, jqXHR) {
615
                if ( jqXHR.status == '202') {
616
                    ajax_success(jqXHR);                   
617
                } else {
618
                    ajax_error(jqXHR);
619
                }}
620
    });
621
    $("#wizard").hide();
622
});
623

624
// reboot action
625
function reboot(serverID){
626
    // ajax post reboot call
627
    $.ajax({
628
        url: '/api/v1.0/servers/' + serverID + '/action',
629
        type: "POST",
630
        data: {
631
            "reboot": '{"type" : "HARD"}'
632
            },
633
        dataType: "json",
634
        timeout: TIMEOUT,
635
        error: function(jqXHR, textStatus, errorThrown) { 
636
                    ajax_error(jqXHR);
637
                    },
638
        success: function(data, textStatus, jqXHR) {
639
                    if ( jqXHR.status == '202') {
640
                        ajax_success(jqXHR);
641
                    } else {
642
                        ajax_error(jqXHR);
643
                    }}
644
    });
645
    return false;
646
}
647

648
// shutdown action
649
function shutdown(serverID) {
650
    // ajax post shutdown call
651
    $.ajax({
652
            url: '/api/v1.0/servers/' + serverID + '/action',
653
            type: "POST",
654
            data: {
655
                    "shutdown": '{"timeout" : "5"}'
656
                    },
657
            dataType: "json",
658
        timeout: TIMEOUT,
659
        error: function(jqXHR, textStatus, errorThrown) { 
660
                    ajax_error(jqXHR);
661
                    },
662
        success: function(data, textStatus, jqXHR) {
663
                    if ( jqXHR.status == '202') {
664
                        ajax_success(jqXHR);
665
                    } else {
666
                        ajax_error(jqXHR);
667
                    }}             
668
    });
669
    return false;    
670
}
671

672

673
// start action
674
function start(serverID){
675
    // ajax post start call
676
    $.ajax({
677
        url: '/api/v1.0/servers/' + serverID + '/action',
678
        type: "POST",
679
        data: {
680
            "start": '{"type" : "NORMAL"}'
681
            },
682
        dataType: "json",
683
        timeout: TIMEOUT,
684
        error: function(jqXHR, textStatus, errorThrown) { 
685
                    ajax_error(jqXHR);
686
                    },
687
        success: function(data, textStatus, jqXHR) {
688
                    if ( jqXHR.status == '202') {
689
                        ajax_success(jqXHR);
690
                    } else {
691
                        ajax_error(jqXHR);
692
                    }}
693
    });
694
    return false;
695
}
696

697

698
// basic functions executed on page load
699

700
// create tabs for main menu
701
$("ul.tabs").tabs("div.panes ul");
702

703
// intercept reboot click 
704
$("div.actions a.action-reboot").live('click', function(){ 
705
    var serverID = $(this).parent().parent().attr("id");
706
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
707
    confirm_action('reboot', reboot, serverID, serverName);
708
    return false;
709
});
710

711
// intercept shutdown click
712
$("div.actions a.action-shutdown").live('click', function(){ 
713
    var serverID = $(this).parent().parent().attr("id");
714
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
715
    confirm_action('shutdown', shutdown, serverID, serverName);
716
    return false;
717
});
718
// intercept start click
719
$("div.actions a.action-start").live('click', function(){ 
720
    var serverID = $(this).parent().parent().attr("id");
721
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
722
    confirm_action('start', start, serverID, serverName);
723
    return false;
724
});
725
</script>