Statistics
| Branch: | Tag: | Revision:

root / ui / templates / networks.html @ 28a81775

History | View | Annotate | Download (42.9 kB)

1
<!--
2
Copyright 2011 GRNET S.A. All rights reserved.
3

4
Redistribution and use in source and binary forms, with or
5
without modification, are permitted provided that the following
6
conditions are met:
7

8
  1. Redistributions of source code must retain the above
9
     copyright notice, this list of conditions and the following
10
     disclaimer.
11

12
  2. Redistributions in binary form must reproduce the above
13
     copyright notice, this list of conditions and the following
14
     disclaimer in the documentation and/or other materials
15
     provided with the distribution.
16

17
THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS
18
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
20
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR
21
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
24
USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
25
AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
26
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
27
ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28
POSSIBILITY OF SUCH DAMAGE.
29

30
The views and conclusions contained in the software and
31
documentation are those of the authors and should not be
32
interpreted as representing official policies, either expressed
33
or implied, of GRNET S.A.
34
-->
35

    
36
{% load i18n %}
37

    
38
<!-- the create button -->
39
<div id="networks-createcontainer">
40
    <div id="beforecreate"></div>
41
    <a id="networkscreate" rel="#networks-wizard" href="#">{% trans "Create New +" %}</a>
42
</div>
43

    
44
<!-- add new network overlay -->
45
<div>
46
    <div class="modal" id="networks-wizard">
47
        <div class="header">
48
        </div>
49
        <h2>{% trans "Name your network" %}</h2>
50
        <hr class="topruler" />
51
        <div class="container">
52
            <div class="name-input">
53
                <label>{% trans "Name" %}:</label>
54
                <input type="text" class="text" name="machine_name"></input>
55
                <span class="help">{% trans "(* Required field)" %}</span>
56
            </div>
57
        </div>
58
        <hr class="bottomruler" />
59
        <button type="button" id="add-network-cancel" class="cancel">{% trans "Cancel" %}</button>
60
        <button type="button" id="add-network-create" class="create">{% trans "Create Network" %}</button>
61
        <hr class="separator-end"></hr>
62
    </div>
63
</div>
64

    
65
<!-- networks list -->
66
<div id="networks-container">
67
    <!-- spinner while loading list -->
68
    <div class = "large-spinner"></div>
69

    
70
    <!-- public network template -->
71
    <div class="network" id="public-template">
72
        <img class="network-logos" src="static/internet.png" />
73
        <div href="#" class="name-div">
74
            <h5 class="namecontainer">
75
                <span class="name">{% trans "Internet" %}</span>
76
            </h5>
77
        </div>
78
        <h5 class="network-machines">
79
            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %}</span>
80
            (<span class="machines-count">0</span>)
81
        </h5>
82
        <div class="network-contents">
83
            <div class="network-placeholder">
84
                <div class="network-contents-start-separator"></div>
85
                <div class="machines-list">
86
                <!-- append machines here -->
87
                </div>
88
                <div class="empty-network-slot" id="machine-template">
89
                    <div class='network-add-machine'>
90
                        {# Replace the following with the comment below for full public network functionality #}
91
                        {# <span class="add-icon">+</span> #}
92
                        <span>&nbsp;</span>
93
                    </div>
94
                </div>
95
            </div>
96
            <div class="network-contents-end-separator"></div>
97
        </div>
98
        <div class="state">
99
            <div class="status">{% trans "Public Network" %}</div>
100
            <div class="indicators network-indicator">
101
                <div class="indicator1"></div>
102
                <div class="indicator2"></div>
103
                <div class="indicator3"></div>
104
                <div class="indicator4"></div>
105
            </div>
106
        </div>
107
        <div class="actions">
108
            {# Commented out the following until there is full public network support #}
109
            {# <a href="#" class="action-add">{% trans "Add Machine" %}</a> #}
110
        </div>
111
        <div class="confirm_single">
112
            <button class="yes">{% trans "Confirm" %}</button>
113
            <button class="no">{% trans "Cancel" %}</button>
114
        </div>
115
        <div class="action_error" align="center">
116
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
117
            <span class="code"></span>
118
            <span class="message"></span>
119
            <button class="details">{% trans "Details" %}</button>
120
        </div>
121
    </div>
122

    
123
    <!-- template for machines in public network -->
124
    <div class="network-machine" id="public-machine-template">
125
        <div class="machine-actions">
126
            <a href="#" class="action-details">{% trans "Details" %}</a>
127
        </div>
128
        <div class="confirm_single">
129
            <button class="yes">{% trans "Confirm" %}</button>
130
            <button class="no">{% trans "Cancel" %}</button>
131
        </div>
132
        <div class="action_error" align="center">
133
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
134
            <span class="code"></span>
135
            <span class="message"></span>
136
            <button class="details">{% trans "Details" %}</button>
137
        </div>
138
        <div class="ips">
139
            <div class="ip4-container status">
140
                <span class="discreet">{% trans "IPv4" %}: </span>
141
                <span class="ip4">192.94.73.15</span>
142
            </div>
143
            <div class="ip6-container status">
144
                <span class="discreet">{% trans "IPv6" %}: </span>
145
                <span class="ip6">vv</span>
146
            </div>
147
        </div>
148
        <img class="logo" src="static/icons/machines/medium/debian-on.png" />
149
        <div class='network-remove-machine'>
150
            {# Replace the following with the comment below for full public network functionality #}
151
            {# <span class="remove-icon">X</span> #}
152
            <span>&nbsp;</span>
153
        </div>
154
        <div href="#" class="machine-name-div">
155
            <h5 class="namecontainer">
156
                <span class="name">my desktop1</span>
157
            </h5>
158
        </div>
159
        <h5 class="machine-settings">
160
            <span class="ip">{% trans "IPs" %}</span> |
161
            <span class="show-firewall">{% trans "Firewall" %}</span>
162
            (<span class="firewall-off">{% trans "Off" %}</span>)
163
        </h5>
164
        <div class="firewall-content">
165
            <div class="firewall-contents-start-separator"></div>
166
            <input type="radio" class="checkboxes" name="image-id1" />
167
            <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>
168
            <br />
169
            <input type="radio" class="checkboxes" name="image-id1" />
170
            <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>
171
            <br />
172
            <input type="radio" class="checkboxes" name="image-id1" />
173
            <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>
174
            <br />
175
            <input type="radio" class="checkboxes" name="image-id1" />
176
            <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>
177
            <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>
178
            <div class="firewall-contents-end-separator"></div>
179
        </div>
180
        <div class="network-separator machines"></div>
181
    </div>
182

    
183
    <!-- private network template -->
184
    <div class="network" id="private-template">
185
        <div class="actions">
186
            <a href="#" class="action-add">{% trans "Add Machine" %}</a>
187
            <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>
188
        </div>
189
        <div class="action_error" align="center">
190
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
191
            <span class="code"></span>
192
            <span class="message"></span>
193
            <button class="details">{% trans "Details" %}</button>
194
        </div>
195
        <div class="confirm_single">
196
            <button class="yes">{% trans "Confirm" %}</button>
197
            <button class="no">X</button>
198
        </div>
199
        <div class="action_error" align="center">
200
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
201
            <span class="code"></span>
202
            <span class="message"></span>
203
            <button class="details">{% trans "Details" %}</button>
204
        </div>
205
        <div class="state">
206
            <div class="status">{% trans "Private Network" %}</div>
207
            <div class="indicators network-indicator">
208
                <div class="indicator1"></div>
209
                <div class="indicator2"></div>
210
                <div class="indicator3"></div>
211
                <div class="indicator4"></div>
212
            </div>
213
            <img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" />
214
            <img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" />
215
        </div>
216
        <img class="network-logos" src="static/network.png" />
217
        <div href="#" class="name-div">
218
            <h5 class="namecontainer editable">
219
                <span class="name">{% trans "My Network 1" %}</span>
220
                <span class="rename-network"></span>
221
                <div class="editbuttons" style="display:none">
222
                    <span class="save"></span>
223
                    <span class="cancel"></span>
224
                </div>
225
            </h5>
226
        </div>
227
        <h5 class="network-machines">
228
            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %}</span>
229
            (<span class="machines-count">0</span>)
230
        </h5>
231
        <div class="network-contents">
232
            <div class="network-placeholder">
233
                <div class="network-contents-start-separator"></div>
234
                <div class="machines-list">
235
                <!-- append machines here -->
236
                </div>
237
                <div class="empty-network-slot" id="machine-template">
238
                    <div class='network-add-machine'><span class="add-icon">+</span></div>
239
                </div>
240
            </div>
241
            <div class="network-contents-end-separator"></div>
242
        </div>
243
        <div class="separator"></div>
244
    </div>
245

    
246
    <!-- template for machines in private network -->
247
    <div class="network-machine" id="private-machine-template">
248
        <div class="machine-actions">
249
            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>
250
            <a href="#" class="action-details">{% trans "Details" %}</a>
251
        </div>
252
        <div class="confirm_single">
253
            <button class="yes">{% trans "Confirm" %}</button>
254
            <button class="no">X</button>
255
        </div>
256
        <div class="action_error" align="center">
257
            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>
258
            <span class="code"></span>
259
            <span class="message"></span>
260
            <button class="details">{% trans "Details" %}</button>
261
        </div>
262
        <img class="logo" src="static/icons/machines/medium/debian-on.png" />
263
        <div class='network-remove-machine'><span class="remove-icon">X</span></div>
264
        <div href="#" class="machine-name-div">
265
            <h5 class="namecontainer editable">
266
                <span class="name">my desktop1</span>
267
            </h5>
268
        </div>
269
        <h5 class='machine-connect'>
270
            <span>{% trans "Connect" %}</span> {% trans "to manage private IPs" %}
271
        </h5>
272
        <div class="network-separator machines"></div>
273
    </div>
274

    
275
    <!-- the actual structure to be populated -->
276
    <div class="public-networks"></div>
277
    <div class="private-networks" style="display:none;"></div>
278
</div>
279

    
280
<!-- add servers to network overlay -->
281
<div>
282
    <div id="add-machines-wizard" class="modal">
283
        <h3 class="popup-header">{% trans "Add machine" %}</h3>
284
        <p style='display:none;'>hidden network id</p>
285
        <div class="popup-body">
286
            <div class="popup-body-inner">
287
                <div class="popup-title">{% trans "Select machines to add to:" %}</div>
288
                <div class="network-name"></div>
289
                <div class="popup-separator"></div>
290
                <div class="machines-container">
291
                    <div class="large-spinner"></div>
292
                    <div id='machine-entry-template' style="display:none;">
293
                        <input type="checkbox" />
294
                        <img class=list-logo src="static/icons/machines/small/debian-on.png" title="debian"></img>
295
                        <span class="machine-name">kati</span>
296
                    </div>
297
                </div>
298
            </div>
299
        </div>
300
        <div class="buttons">
301
            <button type="button" class="cancel" id="add-server-cancel">{% trans "Cancel" %}</button>
302
            <button type="button" class="add" id="add-server-add">{% trans "Add" %}</button>
303
        </div>
304
    </div>
305
</div>
306

    
307
<a id="add-machines-overlay" href="#" rel="#add-machines-wizard"></a>
308

    
309
<!-- multiple confirmation dialog -->
310
<div class="confirm_multiple">
311
    <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "networks" %}</p>
312
    <button class="yes">{% trans "Confirm All" %}</button>
313
    <button class="no">{% trans "Cancel All" %}</button>
314
</div>
315

    
316
<script>
317
// add network wizard initialization
318
$(function() {
319
    // create wizard overlay
320
    $("a#networkscreate").overlay({
321
        mask: '#000',
322
        effect: 'default',
323
        top: '10%',
324
        closeOnClick: false,
325
        oneInstance: false,
326
        closeOnEsc: true,
327
        load: false
328
    });
329
});
330

331
// intercept click to create new private network
332
$("#networkscreate").click(function() {
333
    // reset and load wizard
334
    $('#networks-wizard span.help').removeClass('red');
335
    $('#networks-wizard input').val('');
336
    $('#networks-wizard #add-network-create').text('{% trans 'Create Network' %}');
337
    $("#networks-wizard").show();
338
    $('#networks-wizard input').focus();
339
    $("a#networkscreate").data('overlay').load();
340
    // enable submit button
341
    $("#networks-wizard #add-network-create").removeAttr('disabled');
342
    return false;
343
});
344

345
// exit the add machine to network wizard
346
$("#add-network-cancel").live('click', function() {
347
    $("a#networkscreate").overlay().close();
348
});
349

350
// add selected machines to network
351
$("#add-network-create").live('click', function() {
352
    if ($('#networks-wizard input').val() == '') {
353
        $('#networks-wizard input').focus();
354
        $('#networks-wizard span.help').addClass('red');
355
    } else {
356
        // disable submit button to prevent multiple calls
357
        $(this).attr("disabled", true);
358
        // load progress bar
359
        $(this).text('');
360
        $(this).html('<img src="static/icons/indicators/medium/horizontal-progress.gif"></img>');
361
        // make the call
362
        networkName = $('#networks-wizard input').val();
363
        create_network(networkName);
364
    }
365
    return false;
366
});
367

368
// toggle component with class network-contents
369
$("#networks-pane .show-machines").live('click', function() {
370
    if ($('#networks-pane .network-contents .network-machine').length > 0) {
371
        $(this).parent().next("#networks-pane .network-contents").slideToggle(600);
372
    }
373
    return false;
374
});
375

376
// toggle component with class network-contents
377
$("#networks-pane .network-logos").live('click', function() {
378
    $(this).siblings("#networks-pane .network-contents").slideToggle(600);
379
    return false;
380
});
381

382
//initiate network renaming
383
$("#networks-pane .name-div .rename-network, #networks-pane .name-div h5.editable span.name").live('click', function() {
384
    $(this).parent().find('.name').html("<input id=\"txtEdit\" type=\"text\" class=\"nametextbox\" value=\"" +
385
                                        $(this).parent().find('.name').text() +
386
                                        "\" / ><span class=\"oldValue\">" +
387
                                        $(this).parent().find('.name').text() + "</span>");
388
    $(this).parent().find('.rename-network').hide();
389
    $(this).parent().find(".editbuttons").fadeIn();
390
    $(this).parent().find(".nametextbox").focus().select();
391
    $(this).parent().removeClass('editable');
392

393
    //submit wizard by pressing enter on the name textbox
394
    $("#txtEdit").keydown(function (e) {
395
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
396
            $(this).parent().parent().find('div.editbuttons span.save').click();
397
            return false;
398
        } else if ((e.which && e.which == 27) || (e.keyCode && e.keyCode == 27)) {
399
            $(this).parent().parent().find('div.editbuttons span.cancel').click();
400
            return true;
401
        }
402
    });
403
    return false;
404
});
405

406
//rename machine
407
$("#networks-pane .name-div .editbuttons .save").live('click', function() {
408
    networkID = $(this).closest('.network').attr("id").split('-').pop();
409
    networkName = $(this).parent().parent().find('.nametextbox').val();
410
    if (networkName.trim() == ''){
411
        return false;
412
    }
413
    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.nametextbox').val());
414
    $(this).parent().parent().find(".editbuttons").fadeOut("fast");
415
    $(this).parent().parent().find(".rename-network").fadeIn("slow");
416
    rename_network(networkID, networkName);
417
    return false;
418
});
419

420
//cancel renaming
421
$("#networks-pane .name-div .editbuttons .cancel").live('click', function() {
422
    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.oldValue').text());
423
    $(this).parent().parent().find(".editbuttons").hide();
424
    $(this).parent().parent().find(".rename-network").fadeIn();
425
    $(this).parent().parent().addClass('editable');
426
    return false;
427
});
428

429
// intercept click to delete network
430
$("#networks-pane .action-network-destroy").live('click', function() {
431
    var networkID = $(this).parent().parent().attr('id').split('-').pop();
432
    var networkName = $(this).parent().parent().find(".name-div span.name").text();
433
    var found = false;
434
    $(this).parent().children('a').removeClass('selected');
435
    $(this).addClass('selected');
436
    $(this).parent().addClass('display')
437
    $(this).parent().parent().find('.action_error').hide();
438
    for (i=0; i < pending_actions.length; i++){ // if there is already a pending action for this network replace it
439
        if (pending_actions[i][0] == delete_network && pending_actions[i][1] == networkID){
440
            pending_actions[i][0] = delete_network;
441
            found = true
442
        }
443
    }
444
    if (!found) {
445
        // no pending action for this network was found, so let's just add it to the list
446
        pending_actions.push([delete_network, networkID, networkName]);
447
    }
448
    update_network_confirmations();
449
    return false;
450
});
451

452
// intercept click to remove machine from network
453
$("#networks-pane .remove-icon").live('click', function() {
454
    $(this).closest('.network-machine').find('.action-disconnect').click();
455
    return false;
456
});
457

458
// intercept click to remove machine from network
459
$("#networks-pane .action-disconnect").live('click', function() {
460
    var serverID = $(this).parent().parent().attr('id').split('-').pop();
461
    var networkID = $(this).closest('.network').attr('id').split('-').pop();
462
    var found = false;
463
    $(this).parent().children('a').removeClass('selected');
464
    $(this).addClass('selected');
465
    $(this).parent().addClass('display')
466
    $(this).parent().parent().find('.action_error').hide();
467
    for (i=0; i < pending_actions.length; i++){
468
        // if there is already a pending action for this network replace it
469
        if (pending_actions[i][0] == remove_server_from_network &&
470
            pending_actions[i][1] == networkID &&
471
            pending_actions[i][2] == serverID) {
472
                pending_actions[i][0] = remove_server_from_network;
473
                found = true
474
        }
475
    }
476
    if (!found) {
477
        // no pending action for this network was found, so let's just add it to the list
478
        pending_actions.push([remove_server_from_network, networkID, serverID]);
479
    }
480
    update_network_confirmations();
481
    return false;
482
});
483

484
$("#networks-pane .action-details").live('click', function() {
485
    var serverID = $(this).parent().parent().attr('id').split('-').pop();
486
    $.cookie('view', '2');
487
    $.cookie('server', serverID);
488
    $('a#machines').click();
489
    return false
490
});
491

492
// add machines wizard initialization
493
$(function() {
494
    // create wizard overlay
495
    $("a#add-machines-overlay").overlay({
496
        mask: '#000',
497
        effect: 'default',
498
        top: '10%',
499
        closeOnClick: false,
500
        oneInstance: false,
501
        closeOnEsc: true,
502
        load: false
503
    });
504
});
505

506
// intercept click to add machine to  network
507
$("#networks-pane .action-add").live('click', function() {
508
    // reset pre-existing values
509
    $('#add-server-add').text('{% trans 'Add' %}');
510
    $("#add-machines-wizard .network-name").text($(this).closest('.network').find('.name-div span.name').text());
511
    $("#add-machines-wizard p").text($(this).closest('.network').attr('id').split('-').pop());
512
    $("#add-machines-wizard .large-spinner").show();
513
    $('[id^="list-entry-server-"]').remove();
514
    // list new values
515
    list_machines();
516
    // load wizard
517
    $("#add-machines-wizard").show();
518
    $("a#add-machines-overlay").data('overlay').load();
519
    // enable submit button
520
    $("#add-machines-wizard #add-server-add").removeAttr('disabled');
521
    return false;
522
});
523

524
//submit wizard by pressing enter on the name textbox
525
$("#networks-wizard div.name-input input.text").keypress(function (e) {
526
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
527
        $('#add-network-create').click();
528
        return false;
529
    } else {
530
        return true;
531
    }
532
});
533

534
// intercept click to bring up the add machine to network wizard
535
$("#networks-pane .add-icon").live('click', function() {
536
    $(this).closest('.network').find('.action-add').click();
537
});
538

539
// get machines in public network and list them in add server to network wizard
540
function list_machines() {
541
    var networkID = $("#add-machines-wizard p").text();
542
    // get the list of servers from the UI
543
    var all_machines = $("#networks-pane .public-networks .network-machine");
544

545
    $.each(all_machines, function(i, machine) {
546
        var currentID = machine.id.split('-').pop();
547
        // if machine already exists in private network
548
        if ( $('#net-' + networkID + '-server-' + currentID).length > 0 ) {
549
            // do nothing
550
        } else {
551
            // put it in the list
552
            var entry = $("#add-machines-wizard #machine-entry-template").clone().attr("id", "list-entry-server-" + currentID);
553
            entry.find('input').attr("name", currentID);
554
            entry.find('img').attr('src', 'static/icons/machines/small/' + $(machine).find('img.logo').attr('src').split('/').pop());
555
            entry.find('.machine-name').text($(machine).find('span.name').text());
556
            entry.appendTo("#add-machines-wizard .machines-container");
557
        }
558
    });
559
    $("#add-machines-wizard .large-spinner").hide();
560
    $('[id^="list-entry-server-"]').fadeIn("slow");
561
    return false;
562
}
563

564
// exit the add machine to network wizard
565
$("#add-server-cancel").live('click', function() {
566
    $("a#add-machines-overlay").overlay().close();
567
});
568

569
// add selected machines to network
570
$("#add-server-add").live('click', function() {
571
    var selections = $("#add-machines-wizard :checkbox:checked");
572
    // if there are no selections simply close the wizard
573
    if (selections.length == 0 ) {
574
        $("a#add-machines-overlay").overlay().close();
575
    }
576
    // if there are servers selected make the proper call
577
    else {
578
        var networkID = $("#add-machines-wizard p").text();
579
        var serverIDs = [];
580
        $.each(selections, function(i, selection) {
581
            serverIDs.push(selection.name);
582
        });
583
        // disable submit button to prevent multiple calls
584
        $(this).attr("disabled", true);
585
        // load progress bar
586
        $(this).text('');
587
        $(this).html('<img src="static/icons/indicators/medium/horizontal-progress.gif"></img>');
588
        // show the proper spinner
589
        $('#net-' + networkID + '.network div.status').text(NET_STATES['Connecting']);
590
        $('#net-' + networkID + '.network img.spinner').show();
591
        // make the calls
592
        add_server_to_network(networkID, serverIDs);
593
    }
594
    return false;
595
});
596

597
// toggle component with class firewall-contents
598
$("#networks-pane .show-firewall").live('click', function() {
599
    $(this).parent().next(".firewall-content").slideToggle(600);
600
    return false;
601
});
602

603
//hide firewall content on apply click
604
$("#networks-pane .firewall-apply").live('click', function() {
605
    $(this).parent().slideToggle(600);
606
    return false;
607
});
608

609
// confirm single action
610
$("#networks-pane div.confirm_single .yes").live('click', function() {
611
    // this works both for server and network actions
612
    var serverID = [];
613
    if ($(this).closest('.network-machine').attr('id')) {
614
        serverID = $(this).closest('.network-machine').attr('id').split('-').pop();
615
    }
616
    var networkID = $(this).closest('.network').attr("id").split('-').pop();
617
    // execute actions
618
    for (i=0;i<pending_actions.length;i++){
619
        // if there is a pending action for this server execute it
620
        if (pending_actions[i][0] == delete_network &&
621
            pending_actions[i][1] == networkID) {
622
                action = pending_actions.splice(i,1)[0];
623
                $(this).closest('div.network').find('div.status').text(NET_STATES['Destroying']);
624
                $(this).closest('div.network').find('img.spinner').show();
625
                action[0]([action[1]]); // execute action
626
        } else if ( pending_actions[i][0] == remove_server_from_network &&
627
                    pending_actions[i][1] == networkID ) {
628
                        $(this).closest('div.network').find('div.status').text(NET_STATES['Disconnecting']);
629
                        $(this).closest('div.network').find('img.spinner').show();
630
                        action = pending_actions.splice(i,1)[0];
631
                        action[0]([action[1]], [action[2]]); // execute action
632
        } // for adding servers to a network look in $("#add-server-add").live('click', function() {...});
633
    }
634
    $(this).parent().hide();
635
    $(this).closest("div.network").find('a.selected').removeClass('selected');
636
    $(this).closest("div.network").children('div.actions').removeClass('display');
637
    update_network_confirmations();
638
    return false;
639
});
640

641
// cancel single action
642
$("#networks-pane div.confirm_single .no").live('click', function(){
643
    // this works both for server and network actions
644
    var serverID = [];
645
    if ($(this).closest('.network-machine').attr('id')) {
646
        serverID = $(this).closest('.network-machine').attr('id').split('-').pop();
647
    }
648
    var networkID = $(this).closest('.network').attr("id").split('-').pop();
649
    // remove the action from the pending list
650
    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');
651
    $(this).parent().parent().children('div.actions').removeClass('display');
652

653
    for (i=0; i < pending_actions.length; i++) { // if there is a pending action for this network remove it
654
        if (pending_actions[i][0] == delete_network && pending_actions[i][1] == networkID) {
655
                pending_actions.splice(i,1);
656
        } else if ( pending_actions[i][0] == remove_server_from_network &&
657
                    pending_actions[i][1] == networkID &&
658
                    pending_actions[i][2] == serverID) {
659
                        pending_actions.splice(i,1);
660
        }
661
    }
662
    $(this).parent().hide();
663
    update_network_confirmations();
664
    return false;
665
});
666

667
// show, single action, error details
668
$("#networks-pane div.action_error .details").live('click', function(){
669
    // remove the action from the pending list
670
    $(this).parent().hide();
671
    ajax_error($(this).parent().children('.code').text(),
672
                 undefined,
673
                 $(this).parent().children('.action').text(),
674
                 $(this).parent().children('.message').text());
675
    return false;
676
});
677

678
// confirm all actions
679
$("#networks-pane div.confirm_multiple .yes").live('click', function(){
680
    while(pending_actions.length > 0){ // if there is a pending action for this network execute it
681
        action = pending_actions.pop(); // extract action
682
        var networkID = action[1];
683
        $('#networks-pane .selected').removeClass('selected');
684
        $('#networks-pane .display').removeClass('display');
685
        $('#networks-pane .confirm_single').hide();
686
        if (action[0] == delete_network) {
687
            $('#networks-pane #net-' + networkID + ' .status').text(NET_STATES['Destroying']);
688
            $('#networks-pane #net-' + networkID + ' .spinner').show();
689
            action[0]([networkID]); // execute action
690
        } else if (action[0] == remove_server_from_network) {
691
            action[0]([action[1]], [action[2]]); // execute action
692
        }
693
    }
694
    update_network_confirmations();
695
    return false;
696
});
697

698
// cancel all actions
699
$("#networks-pane div.confirm_multiple .no").live('click', function(){
700
    pending_actions = [];
701
    $('#networks-pane .selected').removeClass('selected');
702
    $('#networks-pane .display').removeClass('display');
703
    $('#networks-pane .confirm_single').hide();
704
    update_network_confirmations();
705
    return false;
706
});
707

708
// update the networks list
709
function update_networks_view(servers_data, networks_data){
710
    /*
711
    Go through the input data. Update existing entries, add
712
    new ones to the list
713
    */
714

715
    // check for changes in networks
716
    if (networks_data){
717
        /*
718
        Here we are interested in private networks only
719
        and for servers disconnected from them
720
        */
721

722
        // if we wait for a new network to be created
723
        if ($('#add-network-create').children().length > 0) {
724
            var response_objects = networks_data.networks.values;
725
            // check all objects in the response
726
            for (i=0; i < response_objects.length; i++) {
727
                // if it contains the network we want to create
728
                var networkName = $('#networks-wizard input').val();
729
                if ( response_objects[i]['name'] == networkName) {
730
                    // close the wizard
731
                    $("a#networkscreate").overlay().close();
732
                    // and the network will be inserted in the DOM
733
                    // during this update loop
734
                }
735
            }
736
        }
737

738
        // update private networks
739
        $.each(networks_data.networks.values, function(i,network) {
740
            // search DOM for this network
741
            existing = $('#networks-pane #net-' + network.id);
742

743
            // If in the DOM exist multiple networks with the same id,
744
            // delete all but one.
745
            // Defensive coding - that shouldn't happen normally
746
            while (existing.length > 1) {
747
                existing.remove();
748
            }
749

750
            // If network already exists in DOM, update it
751
            if (existing.length) {
752
                // network was deleted
753
                if (network.status == 'DELETED') {
754
                    existing.remove();
755
                }
756
                // network was renamed
757
                if (existing.find('.name-div span.name').text() != network.name) {
758
                    // set the new name
759
                    existing.find('.name-div span.name').text(network.name);
760
                }
761
                // a server was disconnected
762
                // search DOM for all machines
763
                existing_machines = $('div.private-networks div.network-machine');
764
                // check if the mahcines in the DOM exist in the response
765
                for (i=0; i<existing_machines.length; i++) {
766
                    // get the existing server id
767
                    var serverID = existing_machines[i].id.split('-')[3];
768
                    // if a server exists in DOM, but not in the response it has
769
                    // been disconnected
770
                    if ( network.servers.values.indexOf( parseInt(serverID) ) == -1 ) {
771
                        // so remove it from DOM and reset all spinners
772
                        $("#" + existing_machines[i].id).remove();
773
                        $('#net-' + network.id + '.network div.status').text(NET_STATES['ACTIVE']);
774
                        $('#net-' + network.id + '.network img.spinner').hide();
775
                        //$('#net-' + network.id + '.network img.wave').attr('src','static/icons/indicators/medium/wave.gif').show();
776
                        //setTimeout("$('#net-" + network.id +".network img.wave').attr('src','').hide()", 3000);
777
                    }
778
                }
779
            }
780
            // If network does not exist in DOM, create it, do not take into account public network
781
            else if (network.id != 'public'){
782
                var privNet = $("#networks-pane #private-template").clone().attr("id", "net-" + network.id);
783
                privNet.find(".name-div span.name").text(network.name).fadeIn("slow");
784
                privNet.appendTo("#networks-pane .private-networks");
785
            }
786
        });
787
    }
788

789
    // check for changes in servers
790
    if (servers_data) {
791
        /*
792
        Here we are interested in any server contained
793
        either in a public network or a private one
794
        */
795
        $.each(servers_data.servers.values, function(i,server) {
796
            /*
797
            First update the public network
798
            */
799

800
            // search public network's DOM for this server
801
            existing_public = $('#networks-pane #net-pub-server-' + server.id);
802

803
            // get the server's OS icon
804
            var server_image = os_icon(server.metadata);
805
            if (!(server.metadata == undefined)) {
806
                var server_image = os_icon(server.metadata);
807
            } else {
808
                var server_image = "unknown"
809
            }
810

811
            // server was deleted
812
            if (server.status == 'DELETED') {
813
                existing_public.remove();
814
            }
815

816
            // If server already exists in public network, update it
817
            if (existing_public.length){
818
                // server was renamed
819
                if (server.name != existing_public.find('span.name').text()) {
820
                    existing_public.find('span.name').text(server.name);
821
                }
822
                // server has changed state
823
                if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
824
                    existing_public.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
825
                } else {
826
                    existing_public.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
827
                }
828
                // server has new ips
829
                var old_ip4 = existing_public.find('span.ip4').text();
830
                var old_ip6 = existing_public.find('span.ip6').text();
831
                // the following are valid because the public ips always come in this order from the api
832
                var new_ips = get_public_ips(server);
833
                var new_ip4 = new_ips['ip4'];
834
                var new_ip6 = new_ips['ip6'];
835
                if (old_ip4 != new_ip4) {
836
                    if (new_ips['ip4'] == undefined) {
837
                        existing_public.find(".ip4-container").hide();
838
                    } else {
839
                        existing_public.find('span.ip4').text(new_ip4);
840
                    }
841
                }
842
                if (old_ip6 != new_ip6) {
843
                    if (new_ip6 == undefined) {
844
                        existing_public.find(".ip6-container").hide();
845
                    } else {
846
                        existing_public.find('span.ip6').text(new_ip6);
847
                    }
848
                }
849
                //TODO: server has changed OS
850
            }
851
            // If server does not exist in public network, create it
852
            else {
853
                var machine = $("#networks-pane #public-machine-template").clone().attr("id", "net-pub-server-" + server.id).fadeIn("slow");
854
                machine.find('span.name').text(server.name);
855
                // find and display ips
856
                var ips = get_public_ips(server);
857
                if (ips['ip4'] == undefined) {
858
                    machine.find(".ip4-container").hide();
859
                } else {
860
                    machine.find("span.ip4").text(ips['ip4']);
861
                }
862
                if (ips['ip6'] == undefined) {
863
                    machine.find(".ip6-container").hide();
864
                } else {
865
                    machine.find("span.ip6").text(ips['ip6']);
866
                }
867
                // add the proper icon
868
                if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
869
                    machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
870
                } else {
871
                    machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
872
                }
873
                machine.appendTo("#networks-pane .public-networks .machines-list");
874
            }
875

876
            /*
877
            Now update all private networks, this does NOT check for
878
            disconnetcted servers (see above in updating private networks).
879
            Since one server may belong to more than one private networks,
880
            we follow a different approach.
881
            We check each server and add, update or leave it as it is accordingly
882
            */
883
            try {
884
                $.each(server.addresses.values, function(i,server_net) {
885
                    // find in which private networks it belongs
886
                    if (server_net.id != "public") {
887
                        var existing_private = $("#networks-pane .private-networks #net-" + server_net.id + "-server-" + server.id);
888
                        // add new server
889
                        if (!existing_private.length) {
890
                            var machine = $("#networks-pane #private-machine-template").clone().attr("id", "net-" + server_net.id + "-server-" + server.id).fadeIn("slow");
891
                            machine.find('span.name').text(server.name);
892
                            if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
893
                                machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
894
                            } else {
895
                                machine.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
896
                            }
897
                            machine.appendTo("#networks-pane .private-networks #net-" + server_net.id + " .machines-list");
898
                        // hide spinners
899
                        $('#net-' + server_net.id + '.network div.status').text(NET_STATES['ACTIVE']);
900
                        $('#net-' + server_net.id + '.network img.spinner').hide();
901
                        //$('#net-' + server_net.id + '.network img.wave').attr('src','static/icons/indicators/medium/wave.gif').show();
902
                        //setTimeout("$('#net-" + server_net.id +".network img.wave').attr('src','').hide()", 3000);
903
                        }
904
                        // server was deleted
905
                        if (server.status == 'DELETED') {
906
                            existing_private.remove();
907
                        }
908
                        // server was renamed
909
                        if (server.name != existing_private.find('span.name').text()) {
910
                            existing_private.find('span.name').text(server.name);
911
                        }
912
                        // server has changed state
913
                        if (server.status=='BUILD' || server.status=='ACTIVE' ||server.status=='REBOOT') {
914
                            existing_private.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-on.png');
915
                        } else {
916
                            existing_private.find("img.logo").attr("src","static/icons/machines/medium/" + server_image + '-off.png');
917
                        }
918
                        //TODO: server has changed OS
919
                    }
920
                });
921
            } catch (err) {
922
                try{console.info('Server ' + server.id + ' has no network addresses')}catch(err){};
923
            }
924
        });
925
    }
926

927
    $("#networks-pane #networks-container > .large-spinner").hide();
928

929
    // show all separators and hide the last one
930
    $("div.private-networks div.network div.separator").show();
931
    $("div.private-networks div.network div.separator:last").hide();
932
    // update the counters of servers in each network
933
    var nets = $('#networks-pane .network');
934
    $.each(nets, function(i,net) {
935
        $(net).find('span.machines-count').text($(net).find('.network-machine').length);
936
    });
937

938
    // the private div shows only when private networks are available
939
    if ($("div.private-networks div.network").length > 0) {
940
        $("div.private-networks").fadeIn("slow");
941
    } else {
942
        $("div.private-networks").fadeOut("slow");
943
    }
944

945
    // tag the last seperator for better styling
946
    $("#pub .network-machine").removeClass('last');
947
    $("#pub .network-machine").last().addClass('last');
948
}
949

950
// indicate that the requested action was not completed
951
function display_failure(status, networkID, action, responseText) {
952
    $('#networks-container #net-'+networkID+ ' .spinner').hide();
953
    $('#networks-container #net-'+networkID+ ' .action_error .action').text(action);
954
    $('#networks-container #net-'+networkID+ ' .action_error .code').text(status);
955
    $('#networks-container #net-'+networkID+ ' .action_error .message').text(responseText);
956
    $('#networks-container #net-'+networkID+ ' .action_error').show();
957
}
958

959

960
// reposition multiple confirmation box on window resize
961
$(window).resize(function(){
962
    if (this.innerHeight - 220 < $('#networks-pane #networks-container').height())
963
        $('#networks-pane .confirm_multiple').addClass('fixed');
964
    else
965
        $('#networks-pane .confirm_multiple').removeClass('fixed');
966
});
967

968
// basic functions executed on page load
969
// hide the all of the networks contents
970
$("#networks-pane .network-contents").hide();
971
// hide the all of the firewall contents
972
$("#networks-pane .firewall-content").hide();
973
changes_since = 0; // to reload full list of servers
974
networks_changes_since= 0; // to reload full list of networks
975
// there is alway one public network to render
976
var pubNet = $("#networks-pane #public-template").clone().attr("id", "pub").fadeIn("slow");
977
pubNet.appendTo("#networks-pane .public-networks");
978
update_networks(UPDATE_INTERVAL);
979

980
//fix ie z-index bug by moving the overlays to the bottom
981
$(document).ready(function() {
982
    if ($.browser.msie) {
983
        $("body").append($("#networks-wizard"));
984
        $("body").append($("#add-machines-wizard"));
985
    }
986
});
987

    
988
</script>