Synnefo

{% load i18n %}

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

<!-- the create button -->

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

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

<div id="view-select">

    <a id="standard" class="current" href="/machines">#</a>

    <span class="view-seperator">|</span>

    <a id="list" href="/machines/list">=</a>

</div>

<!-- the standard view -->

<div id="machinesview" class="standard">

    <div id="spinner"></div>

    <div class="machine" id="machine-template" style="display:none">

        <div class="state">

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

            <div class="indicator"></div>

            <div class="indicator"></div>

            <div class="indicator"></div>

            <div class="indicator"></div>

        </div>

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

        <a href="#" class="name">

            <h5>Νame: <span class="name">node.name</span><span class="rename"></span></h5>

        </a>

        <a href="#" class="ip">

            <h5>IP: <span class="public">node.public_ip</span></h5>

        </a>

        <h5 class="settings">

            {% trans "Show:" %} <a href="#">{% trans "disks" %}</a> | <a href="#">{% trans "networks" %}</a> | <a href="#">{% trans "group" %}</a>

        </h5>

        <div class="actions">

            <a href="#" class="action-reboot">{% trans "Reboot" %}</a>

            <a href="#" class="action-shutdown">{% trans "Shutdown" %}</a>

            <a href="#" class="more">{% trans "more &hellip;" %}</a>

            <a href="#" class="action-start">{% trans "Start" %}</a>

        </div>

        <div class="seperator"></div>

    </div>

    <div class="running"></div>

    <div id="mini" class="seperator"></div>

    <div class="terminated"></div>

</div>

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

<!-- the form -->

<form action="#">

        <!-- scrollable root element -->

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

                <!-- status bar -->

                <ul id="status">

                        <li class="active"><strong>1.</strong> {% trans "Image" %}</li>

                        <li><strong>2.</strong> {% trans "Machine" %}</li>

                        <li><strong>3.</strong> {% trans "Review" %}</li>

                </ul>

                <!-- scrollable items -->

                <div class="items">

                        <!-- pages -->

                        <div class="page">

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

                <ul class="tabs">

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

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

                </ul>

                <div class="panes">

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

                                    <label for="image.id"> 

                            <a><div class="image">

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

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

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

                                <br />

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

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

                            </div></a>

                                    </label>

                            </li>

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

                                            <!-- standard images -->

                                    </ul>

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

                                            <!-- custom images -->

                    </ul>

                </div>

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

                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>

            </div>

                        <div class="page">

                                <h2>{% trans "Select CPU, RAM and storage" %}</h2>

                <ul>

                    <li>

                        <div class="machine-type">

                            <label for="small">

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

                                <strong>{% trans "small" %}</strong>

                            </label>

                        </div>

                        <div class="machine-type">      

                            <label for="medium">

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

                                <strong>{% trans "medium" %}</strong>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="large">

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

                                <strong>{% trans "large" %}</strong>

                            </label>

                        </div>

                        <div class="machine-type">

                            <label for="custom">

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

                                <strong>{% trans "custom" %}</strong>

                            </label>

                        </div>

                    </li>

                    <li>

                                    <label><strong class="sliders">CPU (cores)</strong></label>

                        <input type="range" id="cpu" value="1" max="8" min="1" />

                    </li>

                    <li>

                                    <label><strong class="sliders">RAM (MB)</strong></label>

                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />

                    </li>

                    <li>

                                <label><strong class="sliders">Storage (GB)</strong></label>

                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />

                    </li>

                    <li>

                        <div class="cost">

                            {% trans "Cost per hour:" %} 20 {% trans "credits" %} | {% trans "Credits currently in account:" %} 10.000

                        </div>

                    </li>

                </ul>

                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>

                                <button type="button" class="next right">{% trans "Next" %} &raquo;</button>

            </div>

                        <div class="page">

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

                <ul>

                    <li class="required">

                        <label>

                            <strong>Machine name</strong>

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

                        </label>

                    </li>

                    <li>

                        <strong>{% trans "Image:" %}</strong> <span>Ubuntu 10.04 x86_64 server</span>

                    </li>

                    <li>

                        <strong>{% trans "CPU:" %}</strong> <span>2 cores</span>

                    </li>

                    <li>

                        <strong>{% trans "RAM:" %}</strong> <span>1024MB</span>

                    </li>

                    <li>

                        <strong>{% trans "Storage:" %}</strong> <span>10GB</span>

                    </li>

                    <li>

                        <strong>{% trans "Cost per hour:" %}</strong> <span>20 {% trans "credits" %}</span>

                    </li>

                    <li>

                        <strong>{% trans "Remaining credits:" %}</strong> <span>10.000</span>

                    </li>

                </ul>

                                <button type="button" class="prev">&laquo; {% trans "Back" %}</button>

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

            </div>

                </div>

        </div>

</form>

<!-- notification after wizard completion -->

<a id="notification" rel="#error-success" href="#"></a>

<div class="modal" id="error-success">

    <h3>{% trans "Error!/Success!" %}</h3>

    <p>{% trans "More details about the result"%}</p>

</div>

<!-- confirmation before executing an action -->

<a id="confirmation" rel="#yes-no" href="#"></a>

<div class="modal" id="yes-no">

    <h3>{% trans "You are about to xxx machine yyy" %}</h3>

    <p>{% trans "Are you sure you want to proceed?" %}</p>

    <button>{% trans "Yes" %}</button>

        <button>{% trans "No" %}</button>

</div>

<script type="text/javascript"> 

var TIMEOUT = {{timeout}};

</script>

<script>

// hardcoded image types

var image_tags = {

                1: 'archlinux',

                2: 'centos',

                3: 'debian',

                4: 'freebsd',

                5: 'gentoo',

                6: 'netbsd',

                7: 'openbsd',

                8: 'redhat',

                9: 'slackware',

                10: 'suse',

                11: 'ubuntu',

                12: 'windows',

                20: 'ubuntu',

               };

// ajax error checking  

function ajax_error(jqXHR) {; 

    // prepare the error message

    $("#error-success h3").text('Error!');

    // check the error code

    switch (jqXHR.status) {

        case 503: // XX error/message

            $("#error-success p").text('Your request caused a <strong>' + jqXHR.status + '</strong> error');

            break;

        case 400: // YY error/message

            $("#error-success p").text('Your request caused a <strong>' + jqXHR.status + '</strong> error');

            break;

        default: // XXYY error/message

            $("#error-success p").text('Your request caused a <strong>' + jqXHR.status + '</strong> error');

    }

    // bring up error notification

    var triggers = $("a#notification").overlay({

            // some mask tweaks suitable for modal dialogs

            mask: {

                    color: '#ebecff',

                    opacity: '0.9'

            },

        top: 'center',

            closeOnClick: false,

        oneInstance: false,

        load: true,

        onClose: function(){

            $("div.pane#machines-pane").load($("a#standard").attr("href"));

        }

    });

    return false;

}

// ajax success checking

function ajax_success() {

    // prepare the error message

    $("#error-success h3").text('Success!');

    $("#error-success p").text('Your request has been succefully executed.');

    // bring up success notification

    var triggers = $("a#notification").overlay({

            // some mask tweaks suitable for modal dialogs

            mask: {

                    color: '#ebecff',

                    opacity: '0.9'

            },

        top: 'center',

            closeOnClick: false,

        oneInstance: false,

        load: true,

        onClose: function(){

            $("div.pane#machines-pane").load($("a#standard").attr("href"));

        }

    });

    return false;

}

// confirmation overlay generation

function confirm_action(action_string, action_function, serverID, serverName) {

    $("#yes-no h3").text('You are about to ' + action_string + ' vm ' + serverName);

    // action confirmation overlay

    var triggers = $("a#confirmation").overlay({

            // some mask tweaks suitable for modal dialogs

            mask: {

                    color: '#ebecff',

                    opacity: '0.9'

            },

        top: 'center',

        load: true

    });

    // yes or no?

    var buttons = $("#yes-no button").click(function(e) {

            // get user input

            var yes = buttons.index(this) === 0;

        //close the confirmation window

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

        // return true=yes or false=no

        if (yes) {

            action_function(serverID);

        }

    });

    //close the window, no matter the answer

    return false;

}

// get and show a list of running and terminated machines

function update_vms() {

    $(".running").text('');

    $(".terminated").text('');

    $("ul#standard-images").text('');

    $("ul#custom-images").text('');

    $.ajax({

        url: '/api/v1.0/servers/detail',

        type: "GET",

        timeout: TIMEOUT,

        dataType: "json",

        error: function(jqXHR, textStatus, errorThrown) { 

                    ajax_error(jqXHR);

                    },

        success: function(data, textStatus, jqXHR) {

            if ($(".running a.name").length + $(".terminated a.name").length == 0) {

                $.each(data.servers, function(i,server){

                    // if the machine is deleted it should not be included in any list

                    if (server.status == 'DELETED') {

                        return;

                    }

                    var machine = $("#machine-template").clone().attr("id", server.id).fadeIn("slow");

                    machine.find("input[type='checkbox']").attr("id", "input-" + server.id);

                    machine.find("input[type='checkbox']").attr("class", server.status);

                    machine.find("a.name span.name").text(server.name);

                    machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');

                    machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');

                    machine.find("img.list-logo").attr("title",image_tags[server.imageId]);

                    machine.find("span.imagetag").text(image_tags[server.imageId]);

                    machine.find("a.ip span.public").text(String(server.metadata.addresses.public).replace(',',' '));            

                    // TODO: handle SHARE_IP, SHARE_IP_NO_CONFIG, DELETE_IP, REBUILD, QUEUE_RESIZE, PREP_RESIZE, RESIZE, VERIFY_RESIZE, PASSWORD, RESCUE

                    if (server.status == 'BUILD'){

                        machine.find(".status").text('Building');

                        machine.appendTo(".running");

                    } else if (server.status == 'ACTIVE') {

                        machine.find(".status").text('Running');

                        machine.appendTo(".running"); 

                    } else if (server.status == 'REBOOT' || server.status == 'HARD_REBOOT') {

                        machine.find(".status").text('Rebooting');

                        machine.appendTo(".running");

                    } else if (server.status == 'STOPPED') {

                        machine.find(".status").text('Stopped');

                        machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');

                        machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'-off.png');

                        machine.appendTo(".terminated");

                    } else if (server.status == 'ERROR') {

                        machine.find(".status").text('Error');

                        machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');

                        machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'-off.png');

                        machine.appendTo(".terminated");

                    } 

                    else {

                        machine.find(".status").text('Unknown');

                        machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');

                        machine.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'-off.png');

                        machine.appendTo(".terminated");

                    }

                });

                // if the terminated list is populated then the seperator must be shown

                if ($(".terminated a.name").length > 0) {

                    $("#mini.seperator").fadeIn("slow");

                }

            }

            $("div.machine:last-child").find("div.seperator").hide();

            $("#spinner").hide();

            if ($("div.list table.list-running tbody.running tr").length > 0) {

                $("div.list table.list-running").dataTable({

                    "bInfo": false,

                    "bPaginate": false,

                            "bAutoWidth": false,

                            "bSort": true,    

                    "bStateSave": true,

                    "aoColumnDefs": [

                        { "bSortable": false, "aTargets": [ 0 ] }

                    ]//,

                    //"sScrollY": "310px",

                    //"bScrollCollapse": true

                });

                $("div.list table.list-running").show();

                $("div.list div.actions").show();

            }

            if ($("div.list table.list-terminated tbody.terminated tr").length > 0) {

                $("div.list table.list-terminated").dataTable({

                    "bInfo": false,

                    "bPaginate": false,

                            "bSort": true,    

                            "bAutoWidth": false,

                    "bStateSave": true,

                    "aoColumnDefs": [

                        { "bSortable": false, "aTargets": [ 0 ] }

                    ]//,

                    //"sScrollY": "200px",

                    //"bScrollCollapse": true

                });

                $("div.list table.list-terminated").show();

                $("div.list div.actions").show();

            }

        }

    });

    return false;

}

// get and show a list of anvailable standard and custom images

function update_images() { 

    $.ajax({

        url: '/api/v1.0/images/detail',

        type: "GET",

        //async: false,

        dataType: "json",

        timeout: TIMEOUT,

        error: function(jqXHR, textStatus, errorThrown) { 

                    ajax_error(jqXHR);

                    },

        success: function(data, textStatus, jqXHR) {

            if ($("ul#standard-images li").toArray().length + $("ul#custom-images li").toArray().length == 0) {

                $.each(data.images, function(i,image){

                    var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");

                    img.find("label").attr('for',"img-radio-" + image.id);

                    img.find(".image-title").text(image.name);

                    img.find(".description").text(image.description);

                    img.find("input.radio").attr('id',"img-radio-" + image.id);

                    if (i==0) img.find("input.radio").attr("checked","checked"); 

                    img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');

                    if (image.serverId) {

                        img.appendTo("ul#custom-images");

                    } else {

                        img.appendTo("ul#standard-images");

                    }

                });

            }

        }

    });

    return false;

}

// switch to list view

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

    $.cookie("list", '1'); // set list cookie

    $("div.standard#machinesview").load($("#list").attr("href"));

    $("a#standard")[0].className += ' activelink'

    this.style.color = '#5f8dd3';

    update_vms();

    return false;

});

// switch to standard view

$("a#standard").click(function(){

    $.cookie("list", '0');

    href=$("a#standard").attr("href");

    $("div.pane#machines-pane").load(href);

    return false;

});

// redirect to list view if the list cookie is set

if ($.cookie("list") == '1') {

    $("#list").click();

} else {

    // execute the update function to populate the list

    update_vms();

}

// launch VM creation wizard

$("a#create").click(function(){

    // populate image list

    update_images();

    // launch the wizard

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

});

// create wizard overlay

$(function() { 

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

        mask: '#000', 

        effect: 'default', 

        top: '5%', 

        oneInstance: false,

        closeOnClick: false

    });

});

// wizard

$(function() {

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

    // some variables that we need

    var api = root.scrollable();

    // rangeinput with default configuration

    // validation logic is done inside the onBeforeSeek callback

    api.onBeforeSeek(function(event, i) {

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

            if (api.getIndex() < i) {

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

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

    });

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

    root.find("button.next").keydown(function(e) {

            if (e.keyCode == 9) {

                    // seeks to next tab by executing our validation routine

                    api.next();

                    e.preventDefault();

            }

    });

});

// sliders for selecting VM flavor

$(":range").rangeinput({progress:true});

// disable sliders in flavor selection

function disableSliders() {

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

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

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

}

// selecting the small size

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

    $("#cpu").data('rangeinput').setValue(1);

    $("#ram").data('rangeinput').setValue(256);

    $("#storage").data('rangeinput').setValue(5);

});

// selecting the medium size

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

    $("#cpu").data('rangeinput').setValue(4);

    $("#ram").data('rangeinput').setValue(1024);

    $("#storage").data('rangeinput').setValue(30);

});

// selecting the large size

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

    $("#cpu").data('rangeinput').setValue(8);

    $("#ram").data('rangeinput').setValue(4096);

    $("#storage").data('rangeinput').setValue(80);

});

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

});

// get cpu value for custom flavor

$("#cpu").change(function(){

    $("#custom").click();

});

// get ram value for custom flavor

$("#ram").change(function(){

    $("#custom").click();

});

// get storage value for custom flavor

$("#storage").change(function(){

    $("#custom").click();

});

// exit the wizard

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

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

});

// starting a new VM through the wizard

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

    // ajax port create call

    $.ajax({

    url: '/api/v1.0/servers',

    type: "POST",

    data: {

        "create": '{"cpu" : "2", "ram": "1024", "storage": "15", "name": "image name"}'

        },

    //TODO: get the real data

    dataType: "json",

    timeout: TIMEOUT,

    error: function(jqXHR, textStatus, errorThrown) { 

                ajax_error(jqXHR);

           },

    success: function(data, textStatus, jqXHR) {

                if ( jqXHR.status == '202') {

                    ajax_success(jqXHR);                   

                } else {

                    ajax_error(jqXHR);

                }}

    });

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

});

// reboot action

function reboot(serverID){

    // ajax post reboot call

    $.ajax({

        url: '/api/v1.0/servers/' + serverID + '/action',

        type: "POST",

        data: {

            "reboot": '{"type" : "HARD"}'

            },

        dataType: "json",

        timeout: TIMEOUT,

        error: function(jqXHR, textStatus, errorThrown) { 

                    ajax_error(jqXHR);

                    },

        success: function(data, textStatus, jqXHR) {

                    if ( jqXHR.status == '202') {

                        ajax_success(jqXHR);

                    } else {

                        ajax_error(jqXHR);

                    }}

    });

    return false;

}

// shutdown action

function shutdown(serverID) {

    // ajax post shutdown call

    $.ajax({

            url: '/api/v1.0/servers/' + serverID + '/action',

            type: "POST",

            data: {

                    "shutdown": '{"timeout" : "5"}'

                    },

            dataType: "json",

        timeout: TIMEOUT,

        error: function(jqXHR, textStatus, errorThrown) { 

                    ajax_error(jqXHR);

                    },

        success: function(data, textStatus, jqXHR) {

                    if ( jqXHR.status == '202') {

                        ajax_success(jqXHR);

                    } else {

                        ajax_error(jqXHR);

                    }}             

    });

    return false;    

}

// start action

function start(serverID){

    // ajax post start call

    $.ajax({

        url: '/api/v1.0/servers/' + serverID + '/action',

        type: "POST",

        data: {

            "start": '{"type" : "NORMAL"}'

            },

        dataType: "json",

        timeout: TIMEOUT,

        error: function(jqXHR, textStatus, errorThrown) { 

                    ajax_error(jqXHR);

                    },

        success: function(data, textStatus, jqXHR) {

                    if ( jqXHR.status == '202') {

                        ajax_success(jqXHR);

                    } else {

                        ajax_error(jqXHR);

                    }}

    });

    return false;

}

// basic functions executed on page load

// create tabs for main menu

$("ul.tabs").tabs("div.panes ul");

// intercept reboot click 

$("div.actions a.action-reboot").live('click', function(){ 

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    confirm_action('reboot', reboot, serverID, serverName);

    return false;

});

// intercept shutdown click

$("div.actions a.action-shutdown").live('click', function(){ 

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    confirm_action('shutdown', shutdown, serverID, serverName);

    return false;

});

// intercept start click

$("div.actions a.action-start").live('click', function(){ 

    var serverID = $(this).parent().parent().attr("id");

    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();

    confirm_action('start', start, serverID, serverName);

    return false;

});

</script>