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 %}

<div id="machines" class="separator"></div>

<!-- the create button -->

<div id="ie-fix">

    <div id="createcontainer">

        <div id="beforecreate" style="display:inline;"></div>

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

    </div>

</div>

<!-- changing between standard/list view -->

<div id="ie-fix-view-select">

    <div id="view-select">

        <a id="standard" href="{% url machines-standard %}" title="{% trans "Icon " %}"></a>

        <a id="list" href="{% url machines-list %}" title="{% trans "List " %}"></a>

        <a id="single" href="{% url machines-single %}" title="{% trans "Single " %}"></a>

    </div>

</div>

<div id="emptymachineslist">

    <h1 id="welcomeheader">{% trans "Welcome to ~okeanos !" %}</h1>

    <br />

    <span class="welcomebody">{% trans "From this panel you will be able to manage your Virtual Machines (VMs)." %} <!-- If you don't know what a VM is: " %}<br /><a href="#">{% trans "take the tour" %}. --></a></span>

    <br />

    <br />

    <span class="welcomebody">{% trans "The panel is currently empty, because you don't have any VMs yet. Start by clicking the orange button on the top left. The wizard will guide you through the whole process." %}</span>

    <br />

    <br />

    <span class="welcomefooter">{% trans "For more information or help, click " %}<a href="/about">{% trans "here" %}</a>.</span>

</div>

<!-- the form -->

<form action="#">

    <!-- scrollable root element -->

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

        <!-- status bar -->

        <ul id="status">

            <li class="active li-0">

                <span class="headernumber" class="first">1</span>

                <div class="headerbody first">{% trans "Image" %}</div>

                <img src="static/check.png" class="img-check" style="visibility:hidden;" />

            </li>

            <li class="li-1">

                <span class="headernumber">2</span>

                <div class="headerbody">{% trans "Flavor" %}</div>

                <img src="static/check.png" class="img-check" style="visibility:hidden;" />

            </li>

            <li class="li-2">

                <span class="headernumber">3</span>

                <div class="headerbody">{% trans "Name" %}</div>

            </li>

        </ul>

        <!-- scrollable items -->

        <div class="items">

            <!-- pages -->

            <div class="page page1">

                <h2>{% trans "Select an OS" %}</h2>

                <p class="desc">{% blocktrans %}Choose your preferred image{% endblocktrans %}</p>

                <hr class="topruler" />

                <div id="tabscontainer">

                    <ul class="tabs">

                        <li><a href="#">{% trans "system images" %}</a></li>

                        <li><a href="#">{% trans "custom images" %}</a></li>

                    </ul>

                </div>

                <div class="panes">

                    <li id="image-template" style="display:none;">

                        <label for="image.id">

                            <a>

                                <div class="image-container">

                                    <div class="image">

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

                                        <img src="" class="image-logo"/>

                                        <strong class="image-title">image.title</strong>

                                        <br />

                                        <div class="description-container">

                                            <span class="description">image.description</span>

                                            <span id="size" class="size">?? MB</span><span class="size"> MB</span>

                                        </div>

                                    </div>

                                </div>

                            </a>

                        </label>

                    </li>

                    <ul class="pane" id="standard-images">

                        <!-- standard images -->

                    </ul>

                    <ul class="pane" id="custom-images">

                        <!-- custom images -->

                        <p class="desc">{% blocktrans %}No custom images available{% endblocktrans %}</p>

                    </ul>

                </div>

                <hr class="bottomruler" />

                <button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button>

                <button type="button" class="next right">{% trans "Next" %}<img src="static/next.png" class="img-next" /></button>

            </div>

            <div class="page page2">

                <h2>{% trans "Select CPUs, RAM and Disk Size" %}</h2>

                <p class="desc">{% blocktrans %}Available options are filtered based on the selected image{% endblocktrans %}</p>

                <hr class="topruler" />

                <ul>

                    <li id="machinetype">

                        <div class="machine-type">

                            <label for="small" id="small">

                                <input type="radio" id="small" name="machine-type" value="small" checked="true" />

                                <span class="typebody" id="small-body">{% trans "small" %}</span>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="medium" id="medium">

                                <input type="radio" id="medium" name="machine-type" value="medium" />

                                <span class="typebody" id="medium-body">{% trans "medium" %}</span>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="large" id="large">

                                <input type="radio" id="large" name="machine-type" value="large" />

                                <span class="typebody" id="large-body">{% trans "large" %}</span>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="custom" id="custom">

                                <input type="radio" name="machine-type" id="custom" value="large" />

                                <span class="typebody" id="custom-body">{% trans "custom" %}</span>

                            </label>

                        </div>

                    </li>

                    <div id="page2-container">

                        <li class="slider-container">

                            <label><strong class="sliders">{% trans "CPUs" %}</strong></label>

                            <input type="range" id="cpu" style="display:none" />

                            <input type="text" class="range" id="cpu-indicator" />

                            <span class="units">{% trans "cores" %}</span>

                        </li>

                        <li class="slider-container">

                            <label><strong class="sliders">{% trans "RAM" %}</strong></label>

                            <input type="range" id="ram" style="display:none" />

                            <input type="text" class="range" id="ram-indicator" />

                            <span class="units">MB</span>

                        </li>

                        <li class="slider-container">

                            <label><strong class="sliders">{% trans "Size" %}</strong></label>

                            <input type="range" id="storage" style="display:none" />

                            <input type="text" class="range" id="storage-indicator" />

                            <span class="units">GB</span>

                        </li>

                        <li>

                            <div class="cost">

                                <span> {% trans "Your wallet:" %} 10,000 {% trans "Credits" %} </span> | <span>{% trans "This setup will cost you:" %}<input type="text" id="credits-indicator" value="0" class="range" disabled="disabled" /> {% trans "C/hour" %}</span>

                            </div>

                        </li>

                    </div>

                </ul>

                <hr class="bottomruler" />

                <button type="button" class="prev"><img src="static/prev.png" class="img-prev" />{% trans "Back" %}</button>

                <button type="button" class="next right">{% trans "Next" %}<img src="static/next.png" class="img-next" /></button>

            </div>

            <div class="page page3">

                <h2>{% trans "Confirm your settings" %}</h2>

                <p class="desc">{% blocktrans %}Confirm that the options you have selected are correct{% endblocktrans %}</p>

                <hr class="topruler" />

                <ul id="page3-container">

                    <li class="required" id="label-name">

                        <label>

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

                            <input type="text" class="text" name="machine_name" id="name" value="My Ubuntu 10.04 x86_64 server"/>

                        </label>

                    </li>

                    <li>

                        <span>{% trans "Image:" %}</span> <span id="machine_image-label">Ubuntu 10.04 x86_64 server</span>

                    </li>

                    <li>

                        <span>{% trans "CPUs:" %}</span> <span id="machine_cpu-label">2</span> <span>{% trans "cores" %}</span>

                    </li>

                    <li>

                        <span>{% trans "RAM:" %}</span> <span id="machine_ram-label">1024</span><span>MB</span>

                    </li>

                    <li>

                        <span>{% trans "System Disk:" %}</span> <span id="machine_storage-label">10</span><span>GB</span>

                    </li>

                    <li>

                        <span>{% trans "Cost per Hour:" %}</span> <span>40 {% trans "credits" %}</span>

                    </li>

                    <li>

                        <span>{% trans "Credits in Wallet:" %}</span> <span>10.000</span>

                    </li>

                </ul>

                <hr class="bottomruler" />

                <button type="button" class="prev"><img src="static/prev.png" class="img-prev" />{% trans "Back" %}</button>

                <button type="button" class="next right" id="start">{% trans "Create VM" %}</button>

            </div>

        </div>

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

    </div>

</form>

<!-- metadata overlay -->

<div>

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

        <h3 class="popup-header">{% trans "Manage Tags" %}</h3>

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

        <div id="on-off" style='display:none;'>hidden server id</div>

        <div class="popup-body">

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

                <div class="popup-title">{% trans "Create, edit and delete Tags for machine:" %}</div>

                <div class="name-container">

                    <img src="" class="machine-icon" />

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

                </div>

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

                <div class="large-spinner" style="display:none;"></div>

                <div class="metadata-labels">

                    <div class="metadata-label">{% trans "Tag" %}</div>

                    <div class="metadata-label last">{% trans "Value" %}</div>

                </div>

                <div class="metadata-container">

                    <!-- append metadata entries here -->

                </div>

                <div class="metadata-add-template" style="display:none;">

                    <input type="text" id="add-meta-key" maxlength="15"></input>

                    <ul style="display:none;" class="dropdown-container">

                        {% for o in default_keywords %}

                            <li><span class="dropdownitem">{{o}}</span></li>

                        {% endfor %}

                    </ul>

                    <input type="text" id="add-meta-value" maxlength="150" value="{% trans 'max 150 characters' %}"></input>

                    <div class="addbuttons">

                        <div class="save"></div>

                        <div class="cancel"></div>

                    </div>

                </div>

                <div class="metadata-pair-template" style="display:none;">

                    <div class="metadata-key">{% trans "OS" %}</div>

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

                    <div class="metadata-value">{% trans "Debian" %}</div>

                    <div class="metadata-full-value" style="display:none;"></div>

                    <div class="metadata-edit">

                        <div class="edit"></div>

                        <div class="remove"></div>

                    </div>

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

                        <div class="save"></div>

                        <div class="remove"></div>

                    </div>

                </div>

            </div>

        </div>

        <div class="buttons">

            <button type="button" class="save" id="metadata-cancel">{% trans "Close" %}</button>

            <button type="button" class="create" id="metadata-create">{% trans "Create New" %}</button>

        </div>

    </div>

</div>

<a id="metadata-scrollable" href="#" rel="#metadata-wizard"></a>

<div id="machinesview"></div>

<div class="confirm_multiple">

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

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

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

</div>

<script>

// TODO: This should be populated with more rules for all available states

var actions = { 'reboot':        ['UNKOWN', 'ACTIVE', 'REBOOT'],

                'shutdown':      ['UNKOWN', 'ACTIVE', 'REBOOT'],

                'console':       ['ACTIVE'],

                'start':         ['UNKOWN', 'STOPPED'],

                'destroy':       ['UNKOWN', 'ACTIVE', 'STOPPED', 'REBOOT', 'ERROR', 'BUILD']

               };

//change hover icon on prev,next buttons

$("#wizard button.next").hover(function() {

        $(this).find(".img-next").attr("src","static/next-hover.png");

    },

    function() {

        $(this).find(".img-next").attr("src","static/next.png");

    }

);

$("#wizard button.prev").hover(function() {

        $(this).find(".img-prev").attr("src","static/prev-hover.png");

    },

    function() {

        $(this).find(".img-prev").attr("src","static/prev.png");

    }

);

//add hover to labels

$('#machines-pane span.typebody').mouseover(function() {

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

});

$('#machines-pane span.typebody').mouseout(function() {

    $(this).removeClass('typehover');

});

// switch to list view

$("#machines-pane a#list").click(function(){

    list_view();

    return false;

});

// switch to standard view

$("#machines-pane a#standard").click(function(){

    standard_view();

    return false;

});

// switch to single view

$("#machines-pane a#single").click(function(){

    single_view();

    return false;

});

// launch VM creation wizard

$("#machines-pane a#create").click(function(){

    // launch wizard only if images and flavors are found

    if (images.length > 0  && flavors.length > 0) {

        $('#machines-pane a#create').data('overlay').close();

        $("#wizard").scrollable().begin();

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

        $('#machines-pane a#create').data('overlay').load();

        // enable submit button

        $("#wizard #start").removeAttr('disabled');

        try {

            handle_image_choice_changed();

        } catch (err) {};

    } else if (images.length == 0 ) {

        ajax_error('NO_IMAGES');

        return false;

    } else if (flavors.length == 0) {

        ajax_error('NO_FLAVORS');

        return false;

    }

});

// create wizard overlay

$(function() {

    $("#machines-pane a#create").overlay({

        mask: '#666',

        effect: 'default',

        top: '5%',

        oneInstance: false,

        closeOnClick: false

    });

});

// wizard

$(function() {

    var root = $("#wizard").scrollable();

    var api = root.scrollable();

    // rangeinput with default configuration

    // validation logic is done inside the onBeforeSeek callback

    api.onBeforeSeek(function(event, i) {

        // update status bar

        $("#status li").removeClass("active").eq(i).addClass("active");

        // we are going 1 step backwards so no need for validation

        if (api.getIndex() > i) {

            $("#wizard .li-" + i).removeClass("checked");

            $("#wizard .li-" + i).find(".img-check").css("visibility","hidden");

        }

        if (api.getIndex() < i) {

            $("#wizard .li-" + api.getIndex()).addClass("checked");

            $("#wizard .li-" + api.getIndex()).find(".img-check").css("visibility","visible");

             // 1. get current page

             var page = root.find(".page").eq(api.getIndex()),

             // 2. .. and all required fields inside the page

             inputs = page.find(".required :input").removeClass("error"),

             // 3. .. which are empty

             empty = inputs.filter(function() {

                return $(this).val().replace(/\s*/g, '') == '';

             });

             // if there are empty fields, then

            if (empty.length) {

                // add a CSS class name "error" for empty & required fields

                empty.addClass("error");

                // cancel seeking of the scrollable by returning false

                return false;

            // everything is good

            }

        }

        // update confirm step

        if (api.getIndex()==0) {

            var image = $("input[type=radio][name=image-id]:checked");

            var imageRef = image.length ? image[0].id : false

            if (imageRef) {

                var imageName = $("label[for=" + imageRef + "] .image-title").text();

                $("#machine_image-label")[0].textContent = imageName;

                $("input[type=text][name=machine_name]")[0].value = "My " + imageName + " server";

            }

        } else if (api.getIndex()==1) {

            $("#machine_cpu-label")[0].textContent = $("#cpu-indicator")[0].value;

            $("#machine_ram-label")[0].textContent = $("#ram-indicator")[0].value;

            $("#machine_storage-label")[0].textContent = $("#storage-indicator")[0].value;

        }

        // remove focus from create button

        $("#create").blur();

    });

    // if tab is pressed on the next button seek to next page

    $(root).live('keydown', function (e) {

       if ( e.keyCode == 9 || e.keyCode == 13){

           if(e.preventDefault) {

               e.preventDefault();

           }

           api.next();

        }

    });

    //submit wizard by pressing enter on the name textbox

    $("#name").keypress(function (e) {

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

            $('#start').click();

            return false;

        } else {

            return true;

        }

    });

});

// disable sliders in flavor selection

function disableSliders() {

    $("#cpu").attr('disabled',true);

    $("#ram").attr('disabled',true);

    $("#storage").attr('disabled',true);

}

//update radio button when clicking on text

$("#small-body").live('click' ,function() {

    $(this).parent().find("#small").click();

});

$("#medium-body").live('click' ,function() {

    $(this).parent().find("#medium").click();

});

$("#large-body").live('click' ,function() {

    $(this).parent().find("#large").click();

});

$("#custom-body").live('click' ,function() {

    $(this).parent().find("#custom").click();

});

//select image div on radio button select

$('#machines-pane .radio').live('click' ,function() {

    $(this).parents("div").find(".image").removeClass('selecteddiv');

    if($(this).is(':checked'))  {

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

    }

});

var v2p = range_value_to_percentage;

// validate cpu input box

$("#cpu-indicator").live('change',function() {

    $("#cpu").data('rangeinput').setValue(get_closest_from_value(this.value, cpus));

    validate_selected_flavor_options();

    return false;

});

// validate ram input box

$("#ram-indicator").live('change',function() {

    $("#ram").data('rangeinput').setValue(get_closest_from_value(this.value, ram));

    validate_selected_flavor_options();

    return false;

});

// validate storage input box

$("#storage-indicator").live('change',function(){

    $("#storage").data('rangeinput').setValue(get_closest_from_value(this.value, disks));

    validate_selected_flavor_options();

    return false;

});

// selecting the small size

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

    if ($(this).find("input:disabled").length == 1) { return };

    var flavor = SUGGESTED_FLAVORS[$(this).attr("id")];

    $(this).parent().parent().parent().find("label").removeClass("active");

    $(this).addClass("active");

    set_flavor_sliders_values(flavor.cpu, flavor.disk, flavor.ram);

});

// selecting the medium size

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

    if ($(this).find("input:disabled").length == 1) { return };

    var flavor = SUGGESTED_FLAVORS[$(this).attr("id")];

    $(this).parent().parent().parent().find("label").removeClass("active");

    $(this).addClass("active");

    set_flavor_sliders_values(flavor.cpu, flavor.disk, flavor.ram);

});

// selecting the large size

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

    if ($(this).find("input:disabled").length == 1) { return };

    var flavor = SUGGESTED_FLAVORS[$(this).attr("id")];

    $(this).parent().parent().parent().find("label").removeClass("active");

    $(this).addClass("active");

    set_flavor_sliders_values(flavor.cpu, flavor.disk, flavor.ram);

});

// selecting the custom flavor enables the sliders

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

    $("#cpu").attr('disabled',false);

    $("#ram").attr('disabled',false);

    $("#storage").attr('disabled',false);

    $("strong.sliders").style = 'color: #778899;';

    $("#custom input").attr('checked', 'checked');

    $("#custom").addClass("active");

    $("#medium").removeClass("active");

    $("#large").removeClass("active");

    $("#small").removeClass("active");

});

//when textbox gains focus, add selection in css

$('#cpu-indicator').focus(function() {

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

});

$('#ram-indicator').focus(function() {

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

});

$('#storage-indicator').focus(function() {