Synnefo

{% load i18n %}

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

<!-- the create button -->

<div id="createcontainer">

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

    <span id="createbody">{% trans "Start by creating a new Virtual Machine:" %}</span><br />

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

</div>

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

<div id="view-select">

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

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

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

</div>

<div id="emptymachineslist">

    <h1 id="welcomeheader">{% trans "Welcome to the ocean!" %}</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: take the " %}<a href="#">{% trans "tour" %}</a>.</span>

    <br />

    <br />

    <span class="welcomebody">{% trans "The panel is currently empty, because you don't have any VMs yet. You can start by creating your new VM by clicking the blue button on the right. The wizard will guide you through the whole process." %}</span>

    <br />

    <br />

    <span class="welcomefooter">{% trans "For more information or help, click " %}<a href="#">{% 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">

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

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

            </li>

            <li>

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

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

            </li>

            <li class="third">

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

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

            </li>

        </ul>

        <!-- scrollable items -->

        <div class="items">

            <!-- pages -->

            <div class="page">

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

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

                    </ul>

                </div>

                <hr class="bottomruler" />

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

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

            </div>

            <div class="page">

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

                <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="20" class="range" disabled="disabled" /> {% trans "C/hour" %}</span>

                            </div>

                        </li>

                    </div>

                </ul>

                <hr class="bottomruler" />

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

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

            </div>

            <div class="page">

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

                <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">{% 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-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>

                        {% 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">

                        <span class="save" />

                        <span class="cancel" />

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

                        <span class="edit" />

                        <span class="remove" />

                    </div>

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

                        <span class="save" />

                        <span class="remove" />

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

//add hover to labels

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

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

});

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

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

});

// return value from metadata key "OS", if it exists

function os_icon(metadata) {

    if (!metadata) {

        return 'unknown';

    }

    if (metadata.values.OS == undefined || metadata.values.OS == '') {

        return 'unknown';

    } else {

        if (os_icons.indexOf(metadata.values.OS) == -1) {

            return 'unknown';

        } else {

            return metadata.values.OS;

        }

    }

}

function os_icon_from_value(metadata) {

    if (!metadata) {

        return 'unknown';

    }

if (metadata == undefined || metadata == '') {

        return 'unknown';

    } else {

        if (os_icons.indexOf(metadata) == -1) {

            return 'unknown';

        } else {

            return metadata;

        }

    }

}

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

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

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

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

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

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

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

        }

    });

    api.onSeek(function(event, i) {

        // update status bar

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

    });

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

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

       if ( e.keyCode == 9 ){

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

    }

});

// validate cpu input box

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

    var v = Number(this.value);

    var i = cpus.indexOf(v);

    if (isNaN(v)) {

        $(this).value = cpus[0];

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

    } else if (i == -1) {

        for (var j=0; j < cpus.length; j++)

            if (v<cpus[j])

                break;

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

    } else {

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

    }

    return false;

});

// validate ram input box

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

    var v = Number(this.value);

    var i = ram.indexOf(v);

    if (isNaN(v)) {

        $(this).value = cpus[0];

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

    } else if (i == -1) {

        for (var j=0; j < ram.length; j++)

            if (v<ram[j])

                break;

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

    } else {

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

    }

    return false;

});

// validate storage input box

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

    var v = Number(this.value);

    var i = disks.indexOf(v);

    if (isNaN(v)) {

        $(this).value = disks[0];

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

    } else if (i == -1) {

        for (var j=0; j < disks.length; j++)

            if (v<disks[j])

                break;

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

    } else {

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

    }

    return false;

});

// selecting the small size

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

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

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

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

    $("#cpu-indicator")[0].value = cpus[0];

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

    $("#storage-indicator")[0].value = disks[0];

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

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

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

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

});

// selecting the medium size

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

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

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

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

    $("#cpu-indicator")[0].value = cpus[1];

    $("#ram-indicator")[0].value = ram[1];

    $("#storage-indicator")[0].value = disks[1];

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

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

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

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

});

// selecting the large size

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

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

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

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

    $("#cpu-indicator")[0].value = cpus[2];

    $("#ram-indicator")[0].value = ram[2];

    $("#storage-indicator")[0].value = disks[2];

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

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

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

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

});

// 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() {

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

});

//when textbox loses focus, clear selection in css

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

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

});

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

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

});

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

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

});

// exit the wizard

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

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

});

// starting a new VM through the wizard

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

    var imageRef = $('input[type=radio][name=image-id]:checked')[0].id.replace('img-radio-','');

    var flavorRef = identify_flavor($("#cpu-indicator")[0].value, $("#storage-indicator")[0].value, $("#ram-indicator")[0].value);

    var machineName = $('input[name=machine_name]')[0].value;

    if (jQuery.trim(machineName) == ''){

        return false;

    }

    //replace text 'create new' with progress indicator

    $('#wizard #start').text('');

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

    create_vm(machineName, imageRef, flavorRef);

    try{console.warn('creating ' + $("input[name=machine_name]")[0].value)} catch(err){}

});

// metadata wizard

$(function() {

    // create wizard overlay

    $("a#metadata-scrollable").overlay({

        mask: '#000',

        effect: 'default',

        top: '10%',

        closeOnClick: false,

        oneInstance: false,

        closeOnEsc: true,

        load: false,

        onClose: function(){

            // reset input areas

            serverID = $("#metadata-wizard p:first").text();

            $("#metadata-wizard div.metadata-container").empty();

            get_metadata(serverID, true);

        }

    });

});

// bring up metadata overlay

function show_metadata_wizard() {

    // get metadata for current server and fill the dialog

    serverID = $("#metadata-wizard p:first").text();

    get_metadata(serverID);

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

    $("a#metadata-scrollable").data('overlay').load();

    $('#metadata-wizard .large-spinner').show();

    return false;

}

// update metadata list

function list_metadata(data) {

    // empty the list if it already exists

    $("#metadata-wizard div.metadata-container").empty();

    // get the values to show

    meta = data.metadata.values;

    // set serve icon

    var icon_name = os_icon(data.metadata);

    $("#metadata-wizard .machine-icon").attr("src","static/icons/machines/small/" + icon_name + '-' + $("#metadata-wizard div#on-off").text() + '.png');

    // show values

    for (key in meta) {

        pair = $("#metadata-wizard div.metadata-pair-template:last").clone();

        //truncate metadata

        pair.find("div.metadata-key").text(key.substring(0,15));

        if (meta[key].length > 25) {

            pair.find("div.metadata-value").text(meta[key].substring(0,25) + "...");

        } else {

            pair.find("div.metadata-value").text(meta[key]);

        }

        //get the serverID

        serverID = $("#metadata-wizard p:first").text();

        //store the full metadata value on a hidden div

        pair.find("div.metadata-full-value").text(meta[key]);

        // show/hide edit-remove buttons on hover

        pair.hover(function () {$(this).find('.metadata-edit').show();}, function () {$(this).find('.metadata-edit').hide();});

        // add it to the list

        pair.appendTo("#metadata-wizard div.metadata-container").fadeIn();

    }

}

// exit the metadata wizard

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

    $("a#metadata-scrollable").overlay().close();

});

//intercept create new metadata click

$("#metadata-wizard #metadata-create").click(function(){

    pair = $("#metadata-wizard div.metadata-add-template:first").clone();

    pair.prependTo("#metadata-wizard div.metadata-container").fadeIn();

      with (pair.find('input#add-meta-key')) {

        with (next('ul:first')) {

          find('li').click(function() {

            $(this).parent().prev('.textdropdown-outer').find('input:first').attr('value', $(this).find('.dropdownitem').html());

            $(this).parent().hide();

          });

          hide();

        }

        keypress(function() {

          $(this).parent().next('ul:first').hide();

        });

        change(function() {

          $(this).parent().next('ul:first').hide();

        });

        wrap('<div class="textdropdown-outer" style="width: ' + width() + 'px; height: ' + (height() + 5) + 'px"></div>');

        var btn = parent().prepend('<div class="textdropdown-btn">&nbsp;</div>').find('.textdropdown-btn');

        width(width() - btn.width() - 5);

        css("border", "0");

        btn.click(function() {

          var p = parent();

          with (p.next('ul:first')) {

            css('position', 'absolute');

            css('width',    p.width());

            css('left',     p.position().left + 4);

            css('top',      p.position().top + p.height() + 1);

            toggle();

          }

        });

      }

    pair.find('input#add-meta-key').focus();

});

//save new metadata

$('#metadata-wizard .addbuttons .save').die('click');

$('#metadata-wizard .addbuttons .save').live('click', function(){

    keyValue = $(this).parent().parent().find('input#add-meta-key').val();

    valValue = $(this).parent().parent().find('input#add-meta-value').val();

    if ((keyValue == '{% trans 'max 15 characters' %}') || (valValue == '{% trans 'max 150 characters' %}')) {

        return false;

    } else {

        serverID = $("#metadata-wizard p:first").text();

        pair = $("#metadata-wizard div.metadata-pair-template:last").clone();

        pair.find("div.metadata-key").text(keyValue.substring(0,15));

        if (valValue.length > 25) {

            pair.find("div.metadata-value").text(valValue.substring(0,25) + "...");

        } else {

            pair.find("div.metadata-value").text(valValue);

        }

        pair.find("div.metadata-full-value").text(valValue);

        update_metadata(serverID, keyValue, valValue);

        $(this).parent().parent().remove();

        pair.hover(function () {$(this).find('.metadata-edit').show();}, function () {$(this).find('.metadata-edit').hide();});

        // add it to the list

        if ($("#metadata-wizard div.metadata-container").find("div.metadata-pair-template").length > 0) {

            pair.insertBefore("#metadata-wizard div.metadata-container div.metadata-pair-template:first").fadeIn();

        } else {

            pair.prependTo("#metadata-wizard div.metadata-container").fadeIn();

        }

    }

});

//intercept cancel new metadata creation

$("#metadata-wizard .addbuttons .cancel").die('click');

$("#metadata-wizard .addbuttons .cancel").live('click',function(){

    $(this).parent().parent().fadeOut('fast');

    window.setTimeout(function(){$(this).parent().parent().remove();}, 400);

});

//metadata remove button

$("#metadata-wizard .metadata-edit .remove").die('click')

$("#metadata-wizard .metadata-edit .remove").live('click', function() {

    $(this).parent().parent().fadeOut('slow');

    serverID = $("#metadata-wizard p:first").text();

    keyValue = $(this).parent().parent().find('div.metadata-key').text();

    //update icons if deleting the OS metadata

    if (keyValue == "OS") {

        $("#metadata-wizard .machine-icon").attr("src","static/icons/machines/small/unknown-" + $("#metadata-wizard div#on-off").text() + '.png');

        $("#machinesview-icon").find("div#" + serverID).find("img.logo").attr("src", "static/icons/machines/medium/unknown-" + $("#metadata-wizard div#on-off").text() + '.png');