Synnefo

<!--

Copyright 2011 GRNET S.A. All rights reserved.

Redistribution and use in source and binary forms, with or

without modification, are permitted provided that the following

conditions are met:

  1. Redistributions of source code must retain the above

     copyright notice, this list of conditions and the following

     disclaimer.

  2. Redistributions in binary form must reproduce the above

     copyright notice, this list of conditions and the following

     disclaimer in the documentation and/or other materials

     provided with the distribution.

THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS

OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED

WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR

CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF

USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT

LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN

ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE

POSSIBILITY OF SUCH DAMAGE.

The views and conclusions contained in the software and

documentation are those of the authors and should not be

interpreted as representing official policies, either expressed

or implied, of GRNET S.A.

-->

{% load i18n %}

<!-- the create button -->

<div id="networks-createcontainer">

    <div id="beforecreate"></div>

    <a id="networkscreate" rel="#networks-wizard" href="#">{% trans "Create New +" %}</a>

</div>

<!-- add new network overlay -->

<div>

    <div class="modal" id="networks-wizard">

        <div class="header">

        </div>

        <h2>{% trans "Name your network" %}</h2>

        <hr class="topruler" />

        <div class="container">

            <div class="name-input">

                <label>{% trans "Name" %}:</label>

                <input type="text" class="text" name="machine_name"></input>

                <span class="help">{% trans "(* Required field)" %}</span>

            </div>

        </div>

        <hr class="bottomruler" />

        <button type="button" id="add-network-cancel" class="cancel">{% trans "Cancel" %}</button>

        <button type="button" id="add-network-create" class="create">{% trans "Create Network" %}</button>

        <hr class="separator-end"></hr>

    </div>

</div>

<!-- networks list -->

<div id="networks-container">

    <!-- spinner while loading list -->

    <div class = "large-spinner"></div>

    <!-- public network template -->

    <div class="network" id="public-template">

        <img class="network-logos" src="static/internet.png" />

        <div href="#" class="name-div">

            <h5 class="namecontainer">

                <span class="name">{% trans "Internet" %}</span>

            </h5>

        </div>

        <div class="network-machines">

            <div class="machines-header">

                <div class="machines-label">{% trans "machines" %}

                    (<span class="machines-count">0</span>)

                </div>

                <div class="toggler down"></div>

            </div>

        </div>

        <div class="network-contents">

            <div class="network-placeholder">

                <div class="machines-list">

                <!-- append machines here -->

                </div>

                <!-- Adding servers to public network is not supported in 0.5

                <div class="empty-network-slot" id="machine-template">

                    <div class='network-add-machine'>

                        <span class="add-icon">+</span>

                    </div>

                </div>

                -->

            </div>

        </div>

        <div class="state">

            <div class="status">{% trans "Public Network" %}</div>

            <div class="indicators network-indicator">

                <div class="indicator1"></div>

                <div class="indicator2"></div>

                <div class="indicator3"></div>

                <div class="indicator4"></div>

            </div>

        </div>

        <div class="actions">

             <!-- Adding servers to public network is not supported in 0.5

            <a href="#" class="action-add">{% trans "Add Machine" %}</a>

            -->

        </div>

        <div class="confirm_single">

            <button class="yes">{% trans "Confirm" %}</button>

            <button class="no">{% trans "Cancel" %}</button>

        </div>

        <div class="action_error" align="center">

            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>

            <span class="code"></span>

            <span class="message"></span>

            <button class="details">{% trans "Details" %}</button>

        </div>

    </div>

    <!-- template for machines in public network -->

    <div class="network-machine" id="public-machine-template">

        <div class="network-cable"></div>

        <div class="machine-actions">

            <a href="#" class="action-details">{% trans "Details" %}</a>

        </div>

        <div class="confirm_single">

            <button class="yes">{% trans "Confirm" %}</button>

            <button class="no">{% trans "Cancel" %}</button>

        </div>

        <div class="action_error" align="center">

            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>

            <span class="code"></span>

            <span class="message"></span>

            <button class="details">{% trans "Details" %}</button>

        </div>

        <div class="ips">

            <div class="ip4-container status">

                {% trans "IPv4" %}:

                <span class="ip4 ipv4-text">192.94.73.15</span>

            </div>

            <div class="ip6-container status">

                {% trans "IPv6" %}:

                <span class="ip6 ipv6-text"></span>

            </div>

        </div>

        <img class="logo" src="static/icons/machines/medium/debian-on.png" />

        <div class='network-remove-machine'>

            <!-- Removing servers from public network is not supported in 0.5

            <span class="remove-icon">X</span>

            -->

            <span>&nbsp;</span>

        </div>

        <div href="#" class="machine-name-div">

            <h5 class="namecontainer">

                <span class="name">my desktop1</span>

            </h5>

        </div>

        <div class="firewall">

            <div class="firewall-header">

                <div class="firewall-label">{% trans "Firewall" %}

                    (<span class="firewall-off">{% trans "Off" %}</span>)

                </div>

                <div class="toggler down"></div>

                <div class="network-progress-indicator">

                    <img src="/static/icons/indicators/small/progress.gif" alt="{% trans "updating  settings" %}" title="{% trans "updating  settings" %}" />

                </div>

            </div>

        </div>

        <div class="firewall-content">

            <div class="firewall-cable"></div>

            <input type="radio" class="checkboxes" value="DISABLED" name="firewall" />

            <span class="checkbox-legends">{% trans "Unprotected mode (Firewall off)" %}</span>

            <br />

            <input type="radio" class="checkboxes" value="ENABLED" name="firewall" />

            <span class="checkbox-legends">{% trans "Fully protected mode (Firewall on)" %}</span>

            <br />

            <input type="radio" class="checkboxes" value="PROTECTED" name="firewall" />

            <span class="checkbox-legends">{% trans "Basically protected mode (Firewall on)" %}</span>

            <button type="submit" class="firewall-apply">{% trans "Apply" %}</button>

        </div>

        <div class="network-separator machines"></div>

    </div>

    <div class="separator" style="display:none;"></div>

    <!-- private network template -->

    <div class="network" id="private-template">

        <div class="actions">

            <a href="#" class="action-add">{% trans "Add Machine" %}</a>

            <a href="#" class="action-network-destroy">{% trans "Destroy" %}</a>

        </div>

        <div class="action_error" align="center">

            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>

            <span class="code"></span>

            <span class="message"></span>

            <button class="details">{% trans "Details" %}</button>

        </div>

        <div class="confirm_single">

            <button class="yes">{% trans "Confirm" %}</button>

            <button class="no">X</button>

        </div>

        <div class="action_error" align="center">

            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>

            <span class="code"></span>

            <span class="message"></span>

            <button class="details">{% trans "Details" %}</button>

        </div>

        <div class="state">

            <div class="status">{% trans "Private Network" %}</div>

            <div class="indicators network-indicator">

                <div class="indicator1"></div>

                <div class="indicator2"></div>

                <div class="indicator3"></div>

                <div class="indicator4"></div>

            </div>

            <img class="spinner" style="display:none" src="static/icons/indicators/medium/progress.gif" />

            <img class="wave" style="display:none" src="static/icons/indicators/medium/wave.gif" />

        </div>

        <img class="network-logos" src="static/network.png" />

        <div href="#" class="name-div">

            <h5 class="namecontainer editable">

                <span class="name">{% trans "My Network 1" %}</span>

                <span class="rename-network"></span>

                <div class="editbuttons" style="display:none">

                    <span class="save"></span>

                    <span class="cancel"></span>

                </div>

            </h5>

        </div>

        <div class="network-machines">

            <div class="machines-header">

                <div class="machines-label">{% trans "machines" %}

                    (<span class="machines-count">0</span>)

                </div>

                <div class="toggler down"></div>

            </div>

        </div>

        <div class="network-contents">

            <div class="network-placeholder">

                <div class="machines-list">

                <!-- append machines here -->

                </div>

                <div class="empty-network-slot" id="machine-template">

                    <div class='network-add-machine'><div class="add-icon">+</div></div>

                </div>

            </div>

        </div>

    </div>

    <!-- template for machines in private network -->

    <div class="network-machine" id="private-machine-template">

        <div class="machine-actions">

            <a href="#" class="action-disconnect">{% trans "Disconnect" %}</a>

            <a href="#" class="action-details">{% trans "Details" %}</a>

        </div>

        <div class="confirm_single">

            <button class="yes">{% trans "Confirm" %}</button>

            <button class="no">X</button>

        </div>

        <div class="action_error" align="center">

            {% trans "<span>Error</span> on" %} <span class="action">{% trans "error action" %}</span>

            <span class="code"></span>

            <span class="message"></span>

            <button class="details">{% trans "Details" %}</button>

        </div>

        <img class="logo" src="static/icons/machines/medium/debian-on.png" />

        <div class='network-remove-machine'><span class="remove-icon">X</span></div>

        <div href="#" class="machine-name-div">

            <h5 class="namecontainer editable">

                <span class="name">my desktop1</span>

            </h5>

        </div>

        <h5 class='machine-connect'>

            <span>{% trans "Connect" %}</span> {% trans "to manage private IPs" %}

        </h5>

        <div class="network-separator machines"></div>

    </div>

    <!-- the actual structure to be populated -->

    <div class="public-networks"></div>

    <div class="private-networks" style="display:none;"></div>

</div>

<!-- add servers to network overlay -->

<div>

    <div id="add-machines-wizard" class="modal">

        <h3 class="popup-header">{% trans "Add machine" %}</h3>

        <p style='display:none;'>hidden network id</p>

        <div class="popup-body">

            <div class="popup-body-inner">

                <div class="popup-title">{% trans "Select machines to add to:" %}</div>

                <div class="network-name"></div>

                <div class="popup-separator"></div>

                <div class="machines-container">

                    <div class="large-spinner"></div>

                    <div id='machine-entry-template' style="display:none;">

                        <input type="checkbox" />

                        <img class=list-logo src="static/icons/machines/small/debian-on.png" title="debian"></img>

                        <span class="machine-name">kati</span>

                    </div>

                </div>

            </div>

        </div>

        <div class="buttons">

            <button type="button" class="cancel" id="add-server-cancel">{% trans "Cancel" %}</button>

            <button type="button" class="add" id="add-server-add">{% trans "Add" %}</button>

        </div>

    </div>

</div>

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

<!-- reboot dialog -->

<div class="reboot-dialog">

    <p>{% trans "For the network changes to take effect you need to reboot all affected machines:" %}</p>

    <button class="reboot-all">{% trans "Reboot All" %}</button>

    <div id="reboot-machine-template" class='reboot-machine-entry'>

        <div class="name">my debian server</div>

        <button class="reboot-single">{% trans "Reboot" %}</button>

        <div class="reboot-error">

            <div class="code"></div>

            <div class="action"></div>

            <div class="message"></div>

            <button class="details">{% trans "Error!" %}</button>

        </div>

    </div>

    <div class="reboot-list"></div>

</div>

<!-- multiple confirmation dialog -->

<div class="confirm_multiple">

    <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "networks or machines" %}</p>

    <button class="yes">{% trans "Confirm All" %}</button>

    <button class="no">{% trans "Cancel All" %}</button>

</div>

<script>

// add network wizard initialization

$(function() {

    // create wizard overlay

    $("a#networkscreate").overlay({

        mask: '#666',

        effect: 'default',

        top: '10%',

        closeOnClick: false,

        oneInstance: false,

        closeOnEsc: true,

        load: false

    });

});

// intercept click to create new private network

$("#networkscreate").click(function() {

    // reset and load wizard

    $('#networks-wizard span.help').removeClass('red');

    $('#networks-wizard input').val('');

    $('#networks-wizard #add-network-create').text('{% trans 'Create Network' %}');

    $("#networks-wizard").show();

    $('#networks-wizard input').focus();

    $("a#networkscreate").data('overlay').load();

    // enable submit button

    $("#networks-wizard #add-network-create").removeAttr('disabled');

    return false;

});

// exit the add machine to network wizard

$("#add-network-cancel").live('click', function() {

    $("a#networkscreate").overlay().close();

});

// add selected machines to network

$("#add-network-create").live('click', function() {

    if ($('#networks-wizard input').val() == '') {

        $('#networks-wizard input').focus();

        $('#networks-wizard span.help').addClass('red');

    } else {

        // disable submit button to prevent multiple calls

        $(this).attr("disabled", true);

        // load progress bar

        $(this).text('');

        $(this).html('<img src="static/icons/indicators/medium/horizontal-progress.gif"></img>');

        // make the call

        networkName = $('#networks-wizard input').val();

        create_network(networkName);

    }

    return false;

});

// toggle component with class network-contents

$("#networks-pane div.machines-header").live('click', function() {

    if ($(this).find('.toggler').hasClass('up')) {

        $(this).find('.toggler').removeClass('up');

        $(this).find('.toggler').addClass('down');

        $(this).find('.machines-label').removeClass('darker');

        $(this).closest('div.network').removeClass('light-background');

    } else {

        $(this).find('.toggler').removeClass('down');

        $(this).find('.toggler').addClass('up');

        $(this).find('.machines-label').addClass('darker');

        $(this).closest('div.network').addClass('light-background');

    }

    $(this).parent().next("#networks-pane .network-contents").slideToggle(600, update_net_ui);

    return false;

});

// toggle component with class network-contents

$("#networks-pane .network-logos").live('click', function() {

    $(this).closest('div.network').find('div.machines-header').click();

    return false;

});

//initiate network renaming

$("#networks-pane .name-div .rename-network, #networks-pane .name-div h5.editable span.name").live('click', function() {

    $(this).parent().find('.name').html("<input id=\"txtEdit\" type=\"text\" class=\"nametextbox\" value=\"" +

                                        $(this).parent().find('.name').text() +

                                        "\" / ><span class=\"oldValue\">" +

                                        $(this).parent().find('.name').text() + "</span>");

    $(this).parent().find('.rename-network').hide();

    $(this).parent().find(".editbuttons").fadeIn();

    $(this).parent().find(".nametextbox").focus().select();

    $(this).parent().removeClass('editable');

    //submit wizard by pressing enter on the name textbox

    $("#txtEdit").keydown(function (e) {

        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {

            $(this).parent().parent().find('div.editbuttons span.save').click();

            return false;

        } else if ((e.which && e.which == 27) || (e.keyCode && e.keyCode == 27)) {

            $(this).parent().parent().find('div.editbuttons span.cancel').click();

            return true;

        }

    });

    return false;

});

//rename machine

$("#networks-pane .name-div .editbuttons .save").live('click', function() {

    networkID = $(this).closest('.network').attr("id").split('-').pop();

    networkName = $(this).parent().parent().find('.nametextbox').val();

    if (networkName.trim() == ''){

        return false;

    }

    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.nametextbox').val());

    $(this).parent().parent().find(".editbuttons").fadeOut("fast");

    $(this).parent().parent().find(".rename-network").fadeIn("slow");

    rename_network(networkID, networkName);

    return false;

});

//cancel renaming

$("#networks-pane .name-div .editbuttons .cancel").live('click', function() {

    $(this).parent().parent().find('.name').html($(this).parent().parent().find('.oldValue').text());

    $(this).parent().parent().find(".editbuttons").hide();

    $(this).parent().parent().find(".rename-network").fadeIn();

    $(this).parent().parent().addClass('editable');

    return false;

});

// intercept click to delete network

$("#networks-pane .action-network-destroy").live('click', function() {

    var networkID = $(this).parent().parent().attr('id').split('-').pop();

    var networkName = $(this).parent().parent().find(".name-div span.name").text();

    var found = false;

    $(this).parent().children('a').removeClass('selected');

    $(this).addClass('selected');

    $(this).parent().addClass('display')

    $(this).parent().parent().find('.action_error').hide();

    for (i=0; i < pending_actions.length; i++){ // if there is already a pending action for this network replace it

        if (pending_actions[i][0] == delete_network && pending_actions[i][1] == networkID){

            pending_actions[i][0] = delete_network;

            found = true

        }

    }

    if (!found) {

        // no pending action for this network was found, so let's just add it to the list

        pending_actions.push([delete_network, networkID, networkName]);

    }

    update_network_confirmations();

    return false;

});

// intercept click to remove machine from network

$("#networks-pane .remove-icon").live('click', function() {

    $(this).closest('.network-machine').find('.action-disconnect').click();

    return false;

});

// intercept click to remove machine from network

$("#networks-pane .action-disconnect").live('click', function() {

    var serverID = $(this).parent().parent().attr('id').split('-').pop();

    var serverName = $(this).closest('.network-machine').find('span.name').text();

    var networkID = $(this).closest('.network').attr('id').split('-').pop();

    var serverState = $(this).closest('.network-machine').find('img.logo').attr('src').split('-')[1];

    serverState = serverState.split('.')[0];

    var found = false;

    $(this).parent().children('a').removeClass('selected');

    $(this).addClass('selected');

    $(this).parent().addClass('display')

    $(this).parent().parent().find('.action_error').hide();

    for (i=0; i < pending_actions.length; i++){

        // if there is already a pending action for this network replace it

        if (pending_actions[i][0] == remove_server_from_network &&

            pending_actions[i][1] == networkID &&

            pending_actions[i][2] == serverID) {

                pending_actions[i][0] = remove_server_from_network;

                found = true

        }

    }

    if (!found) {

        // no pending action for this network was found, so let's just add it to the list

        pending_actions.push([remove_server_from_network, networkID, serverID, serverName, serverState]);

    }

    update_network_confirmations();

    return false;

});

$("#networks-pane .action-details").live('click', function() {

    var serverID = $(this).parent().parent().attr('id').split('-').pop();

    $.cookie('view', '2');

    $.cookie('server', serverID);

    $('a#machines').click();

    return false;

});

// add machines wizard initialization

$(function() {

    // create wizard overlay

    $("a#add-machines-overlay").overlay({

        mask: '#666',

        effect: 'default',

        top: '10%',

        closeOnClick: false,

        oneInstance: false,

        closeOnEsc: true,

        load: false

    });

});

// intercept click to add machine to  network

$("#networks-pane .action-add").live('click', function() {

    // reset pre-existing values

    $('#add-server-add').text('{% trans 'Add' %}');

    $("#add-machines-wizard .network-name").text($(this).closest('.network').find('.name-div span.name').text());

    $("#add-machines-wizard p").text($(this).closest('.network').attr('id').split('-').pop());

    $("#add-machines-wizard .large-spinner").show();

    $('[id^="list-entry-server-"]').remove();

    // list new values

    list_machines();

    // load wizard

    $("#add-machines-wizard").show();

    $("a#add-machines-overlay").data('overlay').load();

    // enable submit button

    $("#add-machines-wizard #add-server-add").removeAttr('disabled');

    return false;

});

//submit wizard by pressing enter on the name textbox

$("#networks-wizard div.name-input input.text").keypress(function (e) {

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {

        $('#add-network-create').click();

        return false;

    } else {

        return true;

    }

});

// intercept click to bring up the add machine to network wizard