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>

        <h5 class="network-machines">

            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %}</span>

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

        </h5>

        <div class="network-contents">

            <div class="network-placeholder">

                <div class="network-contents-start-separator"></div>

                <div class="machines-list">

                <!-- append machines here -->

                </div>

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

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

                        {# Replace the following with the comment below for full public network functionality #}

                        {# <span class="add-icon">+</span> #}

                        <span>&nbsp;</span>

                    </div>

                </div>

            </div>

            <div class="network-contents-end-separator"></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">

            {# Commented out the following until there is full public network support #}

            {# <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="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">

                <span class="discreet">{% trans "IPv4" %}: </span>

                <span class="ip4">192.94.73.15</span>

            </div>

            <div class="ip6-container status">

                <span class="discreet">{% trans "IPv6" %}: </span>

                <span class="ip6">vv</span>

            </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="logo" src="static/icons/machines/medium/debian-on.png" />

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

            {# Replace the following with the comment below for full public network functionality #}

            {# <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>

        <h5 class="machine-settings">

            <span class="ip">{% trans "IPs" %}</span> |

            <span class="show-firewall">{% trans "Firewall" %}</span>

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

        </h5>

        <div class="firewall-content">

            <div class="firewall-contents-start-separator"></div>

            <input type="radio" class="checkboxes" name="image-id1" />

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

            <br />

            <input type="radio" class="checkboxes" name="image-id1" />

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

            <br />

            <input type="radio" class="checkboxes" name="image-id1" />

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

            <br />

            <input type="radio" class="checkboxes" name="image-id1" />

            <span class="checkbox-legends">{% trans "Custom protection" %} <a href="#" class="firewall-settings">{% trans "settings" %}</a> {% trans "(Advanced users only)" %}</span>

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

            <div class="firewall-contents-end-separator"></div>

        </div>

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

    </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>

        <h5 class="network-machines">

            {% trans "Show:" %} <span class="show-machines">{% trans "machines" %}</span>

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

        </h5>

        <div class="network-contents">

            <div class="network-placeholder">

                <div class="network-contents-start-separator"></div>

                <div class="machines-list">

                <!-- append machines here -->

                </div>

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

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

                </div>

            </div>

            <div class="network-contents-end-separator"></div>

        </div>

        <div class="separator"></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>

        <div class="state">

            <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="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>

<!-- multiple confirmation dialog -->

<div class="confirm_multiple">

    <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "networks" %}</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: '#000',

        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();

    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 {

        $(this).text('');

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

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

        create_network(networkName);

    }

    return false;

});

// toggle component with class network-contents

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

    if ($('#networks-pane .network-contents .network-machine').length > 0) {

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

    }

    return false;

});

// toggle component with class network-contents

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

    $(this).siblings("#networks-pane .network-contents").slideToggle(600);

    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 networkID = $(this).closest('.network').attr('id').split('-').pop();

    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]);

    }

    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: '#000',

        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();

    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

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

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

});

// get machines in public network and list them in add server to network wizard

function list_machines() {

    var networkID = $("#add-machines-wizard p").text();

    // get the list of servers from the UI

    var all_machines = $("#networks-pane .public-networks .network-machine");

    $.each(all_machines, function(i, machine) {

        var currentID = machine.id.split('-').pop();

        // if machine already exists in private network

        if ( $('#net-' + networkID + '-server-' + currentID).length > 0 ) {

            // do nothing

        } else {

            // put it in the list

            var entry = $("#add-machines-wizard #machine-entry-template").clone().attr("id", "list-entry-server-" + currentID);

            entry.find('input').attr("name", currentID);

            entry.find('img').attr('src', 'static/icons/machines/small/' + $(machine).find('img.logo').attr('src').split('/').pop());

            entry.find('.machine-name').text($(machine).find('span.name').text());

            entry.appendTo("#add-machines-wizard .machines-container");

        }

    });

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

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

    return false;

}

// exit the add machine to network wizard

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

    $("a#add-machines-overlay").overlay().close();

});

// add selected machines to network

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

    var selections = $("#add-machines-wizard :checkbox:checked");