Statistics
| Branch: | Tag: | Revision:

root / ui / templates / networks.html @ 38bb6c34

History | View | Annotate | Download (36.6 kB)

1
{% load i18n %}
2

    
3
<!-- the create button -->
4
<div id="networks-createcontainer">
5
    <div id="beforecreate"></div>
6
    <a id="networkscreate" rel="#networks-wizard" href="#">{% trans "Create New +" %}</a>
7
</div>
8

    
9
<!-- add new network overlay -->
10
<div>
11
    <div class="modal" id="networks-wizard">
12
        <div class="header">
13
        </div>
14
        <h2>{% trans "Name your network" %}</h2>
15
        <hr class="topruler" />
16
        <div class="container">
17
            <div class="name-input">
18
                <label>{% trans "Name" %}:</label>
19
                <input type="text" class="text" name="machine_name"></input>
20
                <span class="help">{% trans "(* Required field)" %}</span>
21
            </div>
22
        </div>
23
        <hr class="bottomruler" />
24
        <button type="button" id="add-network-cancel" class="cancel">{% trans "Cancel" %}</button>
25
        <button type="button" id="add-network-create" class="create">{% trans "Create Network" %}</button>
26
        <hr class="separator-end"></hr>
27
    </div>
28
</div>
29

    
30
<!-- networks list -->
31
<div id="networks-container">
32
    <!-- spinner while loading list -->
33
    <div class = "large-spinner"></div>
34

    
35
    <!-- public network template -->
36
    <div class="network" id="public-template">
37
        <div class="actions">
38
            {# Commented out the following until there is full public network support #}
39
            {# <a href="#" class="action-add">{% trans "Add Machine" %}</a> #}
40
        </div>
41
        <div class="confirm_single">
42
            <button class="yes">{% trans "Confirm" %}</button>
43
            <button class="no">{% trans "Cancel" %}</button>
44
        </div>
45
        <div class="action_error" align="center">
46
            {% trans "<span class='orange'>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
47
            <span class="code"></span>
48
            <span class="message"></span>
49
            <button class="details">{% trans "Details" %}</button>
50
        </div>
51
        <div class="state">
52
            <div class="status">{% trans "Public Network" %}</div>
53
            <div class="indicator"></div>
54
            <div class="indicator"></div>
55
            <div class="indicator"></div>
56
            <div class="indicator"></div>
57
        </div>
58
        <img class="network-logos" src="static/internet.png" />
59
        <div href="#" class="name-div">
60
            <h5 class="namecontainer">
61
                <span class="name">{% trans "Internet" %}</span>
62
            </h5>
63
        </div>
64
        <h5 class="network-machines">
65
            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %}</span>
66
            (<span class="machines-count">1</span>)
67
        </h5>
68
        <div class="network-contents">
69
            <div class="network-placeholder">
70
                <div class="network-contents-start-separator"></div>
71
                <div class="machines-list">
72
                <!-- append machines here -->
73
                </div>
74
                <div class="empty-network-slot" id="machine-template">
75
                    <div class='network-add-machine'>
76
                        {# Replace the following with the comment below for full public network functionality #}
77
                        {# <span class="add-icon">+</span> #}
78
                        <span>&nbsp;</span>
79
                    </div>
80
                </div>
81
            </div>
82
            <div class="network-contents-end-separator"></div>
83
        </div>
84
    </div>
85

    
86
    <!-- template for machines in public network -->
87
    <div class="network-machine" id="public-machine-template">
88
        <div class="machine-actions">
89
            <a href="#" class="action-details">{% trans "Details" %}</a>
90
        </div>
91
        <div class="confirm_single">
92
            <button class="yes">{% trans "Confirm" %}</button>
93
            <button class="no">{% trans "Cancel" %}</button>
94
        </div>
95
        <div class="action_error" align="center">
96
            {% trans "<span class='orange'>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
97
            <span class="code"></span>
98
            <span class="message"></span>
99
            <button class="details">{% trans "Details" %}</button>
100
        </div>
101
        <div class="state">
102
            <div class="ip4-container status">
103
                <span class="discreet">{% trans "IPv4" %}: </span>
104
                <span class="ip4">192.94.73.15</span>
105
            </div>
106
            <div class="ip6-container status">
107
                <span class="discreet">{% trans "IPv6" %}: </span>
108
                <span class="ip6">vv</span>
109
            </div>
110
            <img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" />
111
            <img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" />
112
        </div>
113
        <img class="logo" src="static/icons/machines/medium/debian-on.png" />
114
        <div class='network-remove-machine'>
115
            {# Replace the following with the comment below for full public network functionality #}
116
            {# <span class="remove-icon">X</span> #}
117
            <span>&nbsp;</span>
118
        </div>
119
        <div href="#" class="machine-name-div">
120
            <h5 class="namecontainer">
121
                <span class="name">my desktop1</span>
122
            </h5>
123
        </div>
124
        <h5>
125
            <span class="ip">{% trans "IPs" %}</span> |
126
            <span class="show-firewall">{% trans "Firewall" %}</span>
127
            (<span class="firewall-off">{% trans "Off" %}</span>)
128
        </h5>
129
        <div class="firewall-content">
130
            <div class="firewall-contents-start-separator"></div>
131
            <input type="radio" class="checkboxes" name="image-id1" />
132
            <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
133
            <br />
134
            <input type="radio" class="checkboxes" name="image-id1" />
135
            <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
136
            <br />
137
            <input type="radio" class="checkboxes" name="image-id1" />
138
            <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
139
            <br />
140
            <input type="radio" class="checkboxes" name="image-id1" />
141
            <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
142
            <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
143
            <div class="firewall-contents-end-separator"></div>
144
        </div>
145
        <div class="network-separator machines"></div>
146
    </div>
147

    
148
    <!-- private network template -->
149
    <div class="network" id="private-template">
150
        <div class="actions">
151
            <a href="#" class="action-add">{% trans "Add Machine" %}</a>
152
            <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
153
        </div>
154
        <div class="confirm_single">
155
            <button class="yes">{% trans "Confirm" %}</button>
156
            <button class="no">{% trans "Cancel" %}</button>
157
        </div>
158
        <div class="action_error" align="center">
159
            {% trans "<span class='orange'>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
160
            <span class="code"></span>
161
            <span class="message"></span>
162
            <button class="details">{% trans "Details" %}</button>
163
        </div>
164
        <div class="state">
165
            <div class="status">{% trans "Private Network" %}</div>
166
            <div class="indicator"></div>
167
            <div class="indicator"></div>
168
            <div class="indicator"></div>
169
            <div class="indicator"></div>
170
            <img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" />
171
            <img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" />
172
        </div>
173
        <img class="network-logos" src="static/network.png" />
174
        <div href="#" class="name-div">
175
            <h5 class="namecontainer editable">
176
                <span class="name">{% trans "My Network 1" %}</span>
177
                <span class="rename-network"></span>
178
                <div class="editbuttons" style="display:none">
179
                    <span class="save" />
180
                    <span class="cancel" />
181
                </div>
182
            </h5>
183
        </div>
184
        <h5 class="network-machines">
185
            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %}</span>
186
            (<span class="machines-count">1</span>)
187
        </h5>
188
        <div class="network-contents">
189
            <div class="network-placeholder">
190
                <div class="network-contents-start-separator"></div>
191
                <div class="machines-list">
192
                <!-- append machines here -->
193
                </div>
194
                <div class="empty-network-slot" id="machine-template">
195
                    <div class='network-add-machine'><span class="add-icon">+</span></div>
196
                </div>
197
            </div>
198
            <div class="network-contents-end-separator"></div>
199
        </div>
200
        <div class="separator"></div>
201
    </div>
202

    
203
    <!-- template for machines in private network -->
204
    <div class="network-machine" id="private-machine-template">
205
        <div class="machine-actions">
206
            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
207
            <a href="#" class="action-details">{% trans "Details" %}</a>
208
        </div>
209
        <div class="confirm_single">
210
            <button class="yes">{% trans "Confirm" %}</button>
211
            <button class="no">{% trans "Cancel" %}</button>
212
        </div>
213
        <div class="action_error" align="center">
214
            {% trans "<span class='orange'>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
215
            <span class="code"></span>
216
            <span class="message"></span>
217
            <button class="details">{% trans "Details" %}</button>
218
        </div>
219
        <div class="state">
220
            <img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" />
221
            <img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" />
222
        </div>
223
        <img class="logo" src="static/icons/machines/medium/debian-on.png" />
224
        <div class='network-remove-machine'><span class="remove-icon">X</span></div>
225
        <div href="#" class="machine-name-div">
226
            <h5 class="namecontainer editable">
227
                <span class="name">my desktop1</span>
228
            </h5>
229
        </div>
230
        <h5>
231
            <span class="machine-connect">{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
232
        </h5>
233
        <div class="network-separator machines"></div>
234
    </div>
235

    
236
    <!-- the actual structure to be populated -->
237
    <div class="public-networks"></div>
238
    <div class="private-networks" style="display:none;"></div>
239
</div>
240

    
241
<!-- add servers to network overlay -->
242
<div>
243
    <div id="add-machines-wizard" class="modal">
244
        <h3 class="popup-header">{% trans "Add machine" %}</h3>
245
        <p style='display:none;'>hidden network id</p>
246
        <div class="popup-body">
247
            <div class="popup-body-inner">
248
                <div class="popup-title">{% trans "Select machines to add to:" %}</div>
249
                <div class="network-name"></div>
250
                <div class="popup-separator"></div>
251
                <div class="machines-container">
252
                    <div class="large-spinner"></div>
253
                    <div id='machine-entry-template' style="display:none;">
254
                        <input type="checkbox" />
255
                        <img class=list-logo src="static/icons/machines/small/debian-on.png" title="debian"></img>
256
                        <span class="machine-name">kati</span>
257
                    </div>
258
                </div>
259
            </div>
260
        </div>
261
        <div class="buttons">
262
            <button type="button" class="cancel" id="add-server-cancel">{% trans "Cancel" %}</button>
263
            <button type="button" class="add" id="add-server-add">{% trans "Add" %}</button>
264
        </div>
265
    </div>
266
</div>
267

    
268
<a id="add-machines-overlay" href="#" rel="#add-machines-wizard"></a>
269

    
270
<!-- multiple confirmation dialog -->
271
<div class="confirm_multiple">
272
    <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "networks" %}</p>
273
    <button class="yes">{% trans "Confirm All" %}</button>
274
    <button class="no">{% trans "Cancel All" %}</button>
275
</div>
276

    
277
<script>
278
// add network wizard initialization
279
$(function() {
280
    // create wizard overlay
281
    $("a#networkscreate").overlay({
282
        mask: '#000',
283
        effect: 'default',
284
        top: '10%',
285
        closeOnClick: false,
286
        oneInstance: false,
287
        closeOnEsc: true,
288
        load: false
289
    });
290
});
291

292
// intercept click to create new private network
293
$("#networkscreate").click(function() {
294
    // reset and load wizard
295
    $('#networks-wizard span.help').removeClass('red');
296
    $('#networks-wizard input').val('');
297
    $('#networks-wizard #add-network-create').text('{% trans 'Create Network' %}');
298
    $("#networks-wizard").show();
299
    $('#networks-wizard input').focus();
300
    $("a#networkscreate").data('overlay').load();
301
    return false;
302
});
303

304
// exit the add machine to network wizard
305
$("#add-network-cancel").live('click', function() {
306
    $("a#networkscreate").overlay().close();
307
});
308

309
// add selected machines to network
310
$("#add-network-create").live('click', function() {
311
    if ($('#networks-wizard input').val() == '') {
312
        $('#networks-wizard input').focus();
313
        $('#networks-wizard span.help').addClass('red');
314
    } else {
315
        $(this).text('');
316
        $(this).html('<img src="static/icons/indicators/medium/horizontal-progress.gif"></img>');
317
        networkName = $('#networks-wizard input').val();
318
        create_network(networkName);
319
    }
320
    return false;
321
});
322

323
// toggle component with class network-contents
324
$("#networks-pane .show-machines").live('click', function() {
325
    $(this).parent().next("#networks-pane .network-contents").slideToggle(600);
326
    return false;
327
});
328

329
// toggle component with class network-contents
330
$("#networks-pane .network-logos").live('click', function() {
331
    $(this).siblings("#networks-pane .network-contents").slideToggle(600);
332
    return false;
333
});
334

335
//initiate network renaming
336
$("#networks-pane .name-div .rename-network, #networks-pane .name-div h5.editable span.name").live('click', function() {
337
    $(this).parent().find('.name').html("<input id=\"txtEdit\" type=\"text\" class=\"nametextbox\" value=\"" +
338
                                        $(this).parent().find('.name').text() +
339
                                        "\" / ><span class=\"oldValue\">" +
340
                                        $(this).parent().find('.name').text() + "</span>");
341
    $(this).parent().find('.rename-network').hide();
342
    $(this).parent().find(".editbuttons").fadeIn();
343
    $(this).parent().find(".nametextbox").focus().select();
344
    $(this).parent().removeClass('editable');
345

346
    //submit wizard by pressing enter on the name textbox
347
    $("#txtEdit").keydown(function (e) {
348
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
349
            $(this).parent().parent().find('div.editbuttons span.save').click();
350
            return false;
351
        } else if ((e.which && e.which == 27) || (e.keyCode && e.keyCode == 27)) {
352
            $(this).parent().parent().find('div.editbuttons span.cancel').click();
353
            return true;
354
        }
355
    });
356
    return false;
357
});
358

359
//rename machine
360
$("#networks-pane .name-div .editbuttons .save").live('click', function() {
361
    networkID = $(this).closest('.network').attr("id").split('-').pop();
362
    networkName = $(this).parent().parent().find('.nametextbox').val();
363
    if (networkName.trim() == ''){
364
        return false;
365
    }
366
    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.nametextbox').val());
367
    $(this).parent().parent().find(".editbuttons").fadeOut("fast");
368
    $(this).parent().parent().find(".rename-network").fadeIn("slow");
369
    rename_network(networkID, networkName);
370
    return false;
371
});
372

373
//cancel renaming
374
$("#networks-pane .name-div .editbuttons .cancel").live('click', function() {
375
    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.oldValue').text());
376
    $(this).parent().parent().find(".editbuttons").hide();
377
    $(this).parent().parent().find(".rename-network").fadeIn();
378
    $(this).parent().parent().addClass('editable');
379
    return false;
380
});
381

382
// intercept click to delete network
383
$("#networks-pane .action-network-destroy").live('click', function() {
384
    var networkID = $(this).parent().parent().attr('id').split('-').pop();
385
    var networkName = $(this).parent().parent().find(".name-div span.name").text();
386
    var found = false;
387
    $(this).parent().children('a').removeClass('selected');
388
    $(this).addClass('selected');
389
    $(this).parent().addClass('display')
390
    $(this).parent().parent().find('.action_error').hide();
391
    for (i=0; i < pending_actions.length; i++){ // if there is already a pending action for this network replace it
392
        if (pending_actions[i][0] == delete_network && pending_actions[i][1] == networkID){
393
            pending_actions[i][0] = delete_network;
394
            found = true
395
        }
396
    }
397
    if (!found) {
398
        // no pending action for this network was found, so let's just add it to the list
399
        pending_actions.push([delete_network, networkID, networkName]);
400
    }
401
    update_network_confirmations();
402
    return false;
403
});
404

405
// intercept click to remove machine from network
406
$("#networks-pane .remove-icon").live('click', function() {
407
    $(this).closest('.network-machine').find('.action-disconnect').click();
408
    return false;
409
});
410

411
// intercept click to remove machine from network
412
$("#networks-pane .action-disconnect").live('click', function() {
413
    var serverID = $(this).parent().parent().attr('id').split('-').pop();
414
    var networkID = $(this).closest('.network').attr('id').split('-').pop();
415
    var found = false;
416
    $(this).parent().children('a').removeClass('selected');
417
    $(this).addClass('selected');
418
    $(this).parent().addClass('display')
419
    $(this).parent().parent().find('.action_error').hide();
420
    for (i=0; i < pending_actions.length; i++){
421
        // if there is already a pending action for this network replace it
422
        if (pending_actions[i][0] == remove_server_from_network &&
423
            pending_actions[i][1] == networkID &&
424
            pending_actions[i][2] == serverID) {
425
                pending_actions[i][0] = remove_server_from_network;
426
                found = true
427
        }
428
    }
429
    if (!found) {
430
        // no pending action for this network was found, so let's just add it to the list
431
        pending_actions.push([remove_server_from_network, networkID, serverID]);
432
    }
433
    update_network_confirmations();
434
    return false;
435
});
436

437
$("#networks-pane .action-details").live('click', function() {
438
    var serverID = $(this).parent().parent().attr('id').split('-').pop();
439
    $.cookie('view', '2');
440
    $.cookie('server', serverID);
441
    $('a#machines').click();
442
    return false
443
});
444

445
// add machines wizard initialization
446
$(function() {
447
    // create wizard overlay
448
    $("a#add-machines-overlay").overlay({
449
        mask: '#000',
450
        effect: 'default',
451
        top: '10%',
452
        closeOnClick: false,
453
        oneInstance: false,
454
        closeOnEsc: true,
455
        load: false
456
    });
457
});
458

459
// intercept click to add machine to  network
460
$("#networks-pane .action-add").live('click', function() {
461
    // reset pre-existing values
462
    $('#add-server-add').text('{% trans 'Add' %}');
463
    $("#add-machines-wizard .network-name").text($(this).closest('.network').find('.name-div span.name').text());
464
    $("#add-machines-wizard p").text($(this).closest('.network').attr('id').split('-').pop());
465
    $("#add-machines-wizard .large-spinner").show();
466
    $('[id^="list-entry-server-"]').remove();
467
    // list new values
468
    list_machines();
469
    // load wizard
470
    $("#add-machines-wizard").show();
471
    $("a#add-machines-overlay").data('overlay').load();
472
    return false;
473
});
474

475
//submit wizard by pressing enter on the name textbox
476
$("#networks-wizard div.name-input input.text").keypress(function (e) {
477
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
478
        $('#add-network-create').click();
479
        return false;
480
    } else {
481
        return true;
482
    }
483
});
484

485
// intercept click to bring up the add machine to network wizard
486
$("#networks-pane .add-icon").live('click', function() {
487
    $(this).closest('.network').find('.action-add').click();
488
});
489

490
// get machines in public network and list them in add server to network wizard
491
function list_machines() {
492
    var networkID = $("#add-machines-wizard p").text();
493
    // get the list of servers from the UI
494
    var all_machines = $("#networks-pane .public-networks .network-machine");
495

496
    $.each(all_machines, function(i, machine) {
497
        var currentID = machine.id.split('-').pop();
498
        // if machine already exists in private network
499
        if ( $('#net-' + networkID + '-server-' + currentID).length > 0 ) {
500
            // do nothing
501
        } else {
502
            // put it in the list
503
            var entry = $("#add-machines-wizard #machine-entry-template").clone().attr("id", "list-entry-server-" + currentID);
504
            entry.find('input').attr("name", currentID);
505
            entry.find('img').attr('src', 'static/icons/machines/small/' + $(machine).find('img.logo').attr('src').split('/').pop());
506
            entry.find('.machine-name').text($(machine).find('span.name').text());
507
            entry.appendTo("#add-machines-wizard .machines-container");
508
        }
509
    });
510
    $("#add-machines-wizard .large-spinner").hide();
511
    $('[id^="list-entry-server-"]').fadeIn("slow");
512
    return false;
513
}
514

515
// exit the add machine to network wizard
516
$("#add-server-cancel").live('click', function() {
517
    $("a#add-machines-overlay").overlay().close();
518
});
519

520
// add selected machines to network
521
$("#add-server-add").live('click', function() {
522
    var selections = $("#add-machines-wizard :checkbox:checked");
523
    var networkID = $("#add-machines-wizard p").text();
524
    var serverIDs = [];
525
    $.each(selections, function(i, selection) {
526
        serverIDs.push(selection.name);
527
    });
528
    $(this).text('');
529
    add_server_to_network(networkID, serverIDs);
530
    $(this).html('<img src="static/icons/indicators/medium/horizontal-progress.gif"></img>');
531
    return false;
532
});
533

534
// toggle component with class firewall-contents
535
$("#networks-pane .show-firewall").live('click', function() {
536
    $(this).parent().next(".firewall-content").slideToggle(600);
537
    return false;
538
});
539

540
//hide firewall content on apply click
541
$("#networks-pane .firewall-apply").live('click', function() {
542
    $(this).parent().slideToggle(600);
543
    return false;
544
});
545

546
// confirm single action
547
$("#networks-pane div.confirm_single .yes").live('click', function() {
548
    // this works both for server and network actions
549
    var serverID = [];
550
    if ($(this).closest('.network-machine').attr('id')) {
551
        serverID = $(this).closest('.network-machine').attr('id').split('-').pop();
552
    }
553
    var networkID = $(this).closest('.network').attr("id").split('-').pop();
554
    // execute actions
555
    for (i=0;i<pending_actions.length;i++){
556
        // if there is a pending action for this server execute it
557
        if (pending_actions[i][0] == delete_network &&
558
            pending_actions[i][1] == networkID){
559
                action = pending_actions.splice(i,1)[0];
560
                $(this).parent().parent().find('.status').text(TRANSITIONS['Destroying']);
561
                $(this).parent().parent().find('.spinner').show();
562
                action[0]([action[1]]); // execute action
563
        } else if ( pending_actions[i][0] == remove_server_from_network &&
564
                    pending_actions[i][1] == networkID &&
565
                    pending_actions[i][2] == serverID) {
566
                        action = pending_actions.splice(i,1)[0];
567
                        action[0]([action[1]], [action[2]]); // execute action
568
        }
569
    }
570
    $(this).parent().hide();
571
    $(this).parent().prev().children('a').removeClass('selected');
572
    $(this).parent().prev().removeClass('display');
573
    update_network_confirmations();
574
    return false;
575
});
576

577
// cancel single action
578
$("#networks-pane div.confirm_single .no").live('click', function(){
579
    // this works both for server and network actions
580
    var serverID = [];
581
    if ($(this).closest('.network-machine').attr('id')) {
582
        serverID = $(this).closest('.network-machine').attr('id').split('-').pop();
583
    }
584
    var networkID = $(this).closest('.network').attr("id").split('-').pop();
585
    // remove the action from the pending list
586
    $(this).parent().prev().children('a').removeClass('selected');
587
    $(this).parent().prev().removeClass('display');
588
    for (i=0; i < pending_actions.length; i++){ // if there is a pending action for this network remove it
589
        if (pending_actions[i][0] == delete_network && pending_actions[i][1] == networkID){
590
                pending_actions.splice(i,1);
591
        } else if ( pending_actions[i][0] == remove_server_from_network &&
592
                    pending_actions[i][1] == networkID &&
593
                    pending_actions[i][2] == serverID) {
594
                        pending_actions.splice(i,1);
595
        }
596
    }
597
    $(this).parent().hide();
598
    update_network_confirmations();
599
    return false;
600
});
601

602
// show, single action, error details
603
$("#networks-pane div.action_error .details").live('click', function(){
604
    // remove the action from the pending list
605
    ajax_error($(this).parent().children('.code').text(),
606
                 undefined,
607
                 $(this).parent().children('.action').text(),
608
                 $(this).parent().children('.message').text());
609
    $(this).parent().hide();
610
    return false;
611
});
612

613
// confirm all actions
614
$("#networks-pane div.confirm_multiple .yes").live('click', function(){
615
    while(pending_actions.length > 0){ // if there is a pending action for this network execute it
616
        action = pending_actions.pop(); // extract action
617
        var networkID = action[1];
618
        $('#networks-pane .selected').removeClass('selected');
619
        $('#networks-pane .display').removeClass('display');
620
        if (action[0] == delete_network) {
621
            $('#networks-pane #net-' + networkID + ' .status').text(TRANSITIONS['Destroying']);
622
            $('#networks-pane #net-' + networkID + ' .spinner').show();
623
            action[0]([networkID]); // execute action
624
        } else if (action[0] == remove_server_from_network) {
625
            action[0]([action[1]], [action[2]]); // execute action
626
        }
627
    }
628
    update_network_confirmations();
629
    return false;
630
});
631

632
// cancel all actions
633
$("#networks-pane div.confirm_multiple .no").live('click', function(){
634
    pending_actions = [];
635
    $('#networks-pane .selected').removeClass('selected');
636
    $('#networks-pane .display').removeClass('display');
637
    update_network_confirmations();
638
    return false;
639
});
640

641
// update the networks list
642
function update_networks_view(servers_data, networks_data){
643
    /*
644
    Go through the input data. Update existing entries, add
645
    new ones to the list
646
    */
647

648
    // check for changes in networks
649
    if (networks_data){
650
        /*
651
        Here we are interested in private networks only
652
        and not for any server they might contain
653
        */
654

655
        // update private networks
656
        $.each(networks_data.networks.values, function(i,network) {
657
            // search DOM for this network
658
            existing = $('#networks-pane #net-' + network.id);
659

660
            // if multiple machines exist in the DOM, delete all but one
661
            // defensive coding - that shouldn't happen normally
662
            while (existing.length > 1){
663
                existing.remove();
664
            }
665
            // If network already exists in DOM, update it
666
            if (existing.length){
667
                // network was deleted
668
                if (network.status == 'DELETED') {
669
                    existing.remove();
670
                }
671

672
                // network was renamed
673
                if (existing.find('.name-div span.name').text() != network.name) {
674
                    // set the new name
675
                    existing.find('.name-div span.name').text(network.name);
676
                }
677
            }
678
            // If network does not exist in DOM, create it, do not take into account public network
679
            else if (network.id != 'public'){
680
                var privNet = $("#networks-pane #private-template").clone().attr("id", "net-" + network.id);
681
                privNet.find(".name-div span.name").text(network.name).fadeIn("slow");
682
                privNet.appendTo("#networks-pane .private-networks");
683
            }
684
        });
685
    }
686

687
    // check for changes in servers
688
    if (servers_data) {
689
        /*
690
        Here we are interested in any server contained
691
        either in a public network or a private one
692
        */
693
        $.each(servers_data.servers.values, function(i,server) {
694
            /*
695
            First update the public network
696
            */
697

698
            // search public network's DOM for this server
699
            existing_public = $('#networks-pane #net-pub-server-' + server.id);
700
            // get the server's OS icon
701
            var server_image = os_icon(server.metadata);
702

703
            // if multiple servers exist in public network, delete all but one
704
            // defensive coding - that shouldn't happen normally
705
            while (existing_public.length > 1){
706
                existing_public.remove();
707
            }
708

709
            // server was deleted
710
            if (server.status == 'DELETED') {
711
                existing_public.remove();
712
            }
713

714
            // If server already exists in public network, update it
715
            if (existing_public.length){
716
                // server was renamed
717
                if (server.name != existing_public.find('span.name').text()) {
718
                    existing_public.find('span.name').text(server.name);
719
                }
720
                // server has changed state
721
                if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
722
                    existing_public.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
723
                } else {
724
                    existing_public.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
725
                }
726
                // server has new ips
727
                var old_ip4 = existing_public.find('span.ip4').text();
728
                var old_ip6 = existing_public.find('span.ip6').text();
729
                // the following are valid because the public ips always come in this order from the api
730
                var new_ips = get_public_ips(server);
731
                var new_ip4 = new_ips['ip4'];
732
                var new_ip6 = new_ips['ip6'];
733
                if (old_ip4 != new_ip4) {
734
                    if (new_ips['ip4'] == undefined) {
735
                        existing_public.find(".ip4-container").hide();
736
                    } else {
737
                        existing_public.find('span.ip4').text(new_ip4);
738
                    }
739
                }
740
                if (old_ip6 != new_ip6) {
741
                    if (new_ip6 == undefined) {
742
                        existing_public.find(".ip6-container").hide();
743
                    } else {
744
                        existing_public.find('span.ip6').text(new_ip6);
745
                    }
746
                }
747
                //TODO: server has changed OS
748
            }
749
            // If server does not exist in public network, create it
750
            else {
751
                var machine = $("#networks-pane #public-machine-template").clone().attr("id", "net-pub-server-" + server.id).fadeIn("slow");
752
                machine.find('span.name').text(server.name);
753
                // find and display ips
754
                var ips = get_public_ips(server);
755
                if (ips['ip4'] == undefined) {
756
                    machine.find(".ip4-container").hide();
757
                } else {
758
                    machine.find("span.ip4").text(ips['ip4']);
759
                }
760
                if (ips['ip6'] == undefined) {
761
                    machine.find(".ip6-container").hide();
762
                } else {
763
                    machine.find("span.ip6").text(ips['ip6']);
764
                }
765
                // add the proper icon
766
                if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
767
                    machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
768
                } else {
769
                    machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
770
                }
771
                machine.appendTo("#networks-pane .public-networks .machines-list");
772
            }
773
            /*
774
            Now update all private networks
775
            Since one server may belong to more than one private networks,
776
            we follow a different approach.
777
            We check each server and add, update or leave it as it is accordingly
778
            */
779
            try {
780
                $.each(server.addresses.values, function(i,server_net) {
781
                    // find in which private networks it belongs
782
                    if (server_net.id != "public") {
783
                        var existing_private = $("#networks-pane .private-networks #net-" + server_net.id + "-server-" + server.id);
784
                        // add new server
785
                        if (!existing_private.length) {
786
                            var machine = $("#networks-pane #private-machine-template").clone().attr("id", "net-" + server_net.id + "-server-" + server.id).fadeIn("slow");
787
                            machine.find('span.name').text(server.name);
788
                            if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
789
                                machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
790
                            } else {
791
                                machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
792
                            }
793
                            machine.appendTo("#networks-pane .private-networks #net-" + server_net.id + " .machines-list");
794
                        }
795
                        // server was deleted
796
                        if (server.status == 'DELETED') {
797
                            existing_private.remove();
798
                        }
799
                        // server was renamed
800
                        if (server.name != existing_private.find('span.name').text()) {
801
                            existing_private.find('span.name').text(server.name);
802
                        }
803
                        // server has changed state
804
                        if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
805
                            existing_private.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
806
                        } else {
807
                            existing_private.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
808
                        }
809
                        //TODO: server has changed OS
810
                    }
811
                });
812
            } catch (err) {
813
                try{console.info('Server ' + server.id + ' has no network addresses')}catch(err){};
814
            }
815
        });
816
    }
817

818
    $("#networks-pane #networks-container > .large-spinner").hide();
819

820
    // show all separators and hide the last one
821
    $("div.private-networks div.network div.separator").show();
822
    $("div.private-networks div.network div.separator:last").hide();
823
    // update the counters of servers in each network
824
    var nets = $('#networks-pane .network');
825
    $.each(nets, function(i,net) {
826
        $(net).find('span.machines-count').text($(net).find('.network-machine').length);
827
    });
828

829
    // the private div shows only when private networks are available
830
    if ($("div.private-networks div.network").length > 0) {
831
        $("div.private-networks").fadeIn("slow");
832
    } else {
833
        $("div.private-networks").fadeOut("slow");
834
    }
835
}
836

837
// reposition multiple confirmation box on window resize
838
$(window).resize(function(){
839
    if (this.innerHeight - 220 < $('#networks-pane #networks-container').height())
840
        $('#networks-pane .confirm_multiple').addClass('fixed');
841
    else
842
        $('#networks-pane .confirm_multiple').removeClass('fixed');
843
});
844

845
// basic functions executed on page load
846
// hide the all of the networks contents
847
$("#networks-pane .network-contents").hide();
848
// hide the all of the firewall contents
849
$("#networks-pane .firewall-content").hide();
850
changes_since = 0; // to reload full list of servers
851
networks_changes_since= 0; // to reload full list of networks
852
// there is alway one public network to render
853
var pubNet = $("#networks-pane #public-template").clone().attr("id", "pub").fadeIn("slow");
854
pubNet.appendTo("#networks-pane .public-networks");
855
update_networks(UPDATE_INTERVAL);
856

    
857
</script>