review.html

{% extends "theme/base.html" %}
{% load i18n %}
{% block extrahead %}
<link rel="stylesheet" href="/static/select2/select2.css">
{% endblock %}
{% block applicationstop %}class="active"{% endblock %}
{% block applications %}class="active"{% endblock %}
{% block title %}{% trans "Review application" %} #{{ application.pk }}{% endblock %}

{% block crumbs %}
                    <li><a href="{% url user-instances %}">{% trans "Home" %}</a><span class="divider">/</span></li>
                    <li><a href="{% url application-list %}">{% trans "Instance Applications" %}</a><span class="divider">/</span></li>
                    <li class="active">#{{ application.pk }}: {{ application.hostname }}</li>
                {% endblock %}

{% block content %}
<style type="text/css">
.comments {
    font-style: italic;
    max-width: 40em;
}
.notice {
    text-align: center;
    font-style: italic;
}

#review {
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
}

label.required { font-weight: bold; }

.padcontrol{
    padding-top: 5px;
}

textarea{
    width: 100%;
}
</style>
<script>
    function set_network(net){
        $("#id_network").val(net);
    }
</script>

<div class="modal hide fade" id="instDets" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabelservdets">{% trans "Job Details" %}</h3>
</div>
<div class="modal-body" id="instDetsbody">

</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Close" %}</button>
</div>
</div>

<div class="span8 main-content">

    <div class="row-fluid">
        <div class="row-fluid">
            <h2>{% trans "Review application" %} #{{ application.pk }} {% trans "by" %} {{ application.applicant }}</h2>


<p>{% trans "Submitted" %} {{ application.filed|date }}</p>
{% if application.is_pending %}
        <form method="POST" id="appform" class="form-inline">
        {% csrf_token %}
        <div class="row-fluid"><div class="span6">
        <fieldset>
                <legend>
                    {% trans "Instance information" %}
                </legend>
        <div class="control-group">
            <label class="control-label required" for="id_applier">{% trans "Status" %}</label>
            <div class="controls padcontrol">{{ application.get_status_display }}
            </div>
        </div>
                  <div class="control-group {% if appform.hostname.errors %}error{% endif %}">
                    <label class="control-label {% if appform.hostname.field.required %}required{% endif %}" for="id_applier">
                        {{ appform.hostname.label }}
                    </label>
                   <div class="controls">{{ appform.hostname }}
                    {% if appform.hostname.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.hostname.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>

                <div class="control-group {% if appform.memory.errors %}error{% endif %}">
                    <label class="control-label {% if appform.memory.field.required %}required{% endif %}" for="id_applier">{{ appform.memory.label }}</label>
                   <div class="controls">{{ appform.memory }}
                    {% if appform.memory.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.memory.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>

                <div class="control-group {% if appform.vcpus.errors %}error{% endif %}">
                    <label class="control-label {% if appform.vcpus.field.required %}required{% endif %}" for="id_applier">{{ appform.vcpus.label }}</label>
                   <div class="controls">{{ appform.vcpus }}
                    {% if appform.vcpus.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.vcpus.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>

                <div class="control-group {% if appform.disk_size.errors %}error{% endif %}">
                    <label class="control-label {% if appform.disk_size.field.required %}required{% endif %}" for="id_applier">{{ appform.disk_size.label }}</label>
                   <div class="controls">{{ appform.disk_size }}
                    {% if appform.disk_size.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.disk_size.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>

                <div class="control-group {% if appform.organization.errors %}error{% endif %}">
                    <label class="control-label {% if appform.organization.field.required %}required{% endif %}" for="id_applier">{{ appform.organization.label }}</label>
                   <div class="controls">{{ appform.organization }}
                    {% if appform.organization.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.organization.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>

                <div class="control-group {% if appform.hosts_mail_server.errors %}error{% endif %}">
                    <label class="control-label {% if appform.hosts_mail_server.field.required %}required{% endif %}" for="id_applier">{{ appform.hosts_mail_server.label }}</label>
                   <div class="controls">{{ appform.hosts_mail_server }}
                    {% if appform.hosts_mail_server.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.hosts_mail_server.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>

                <div class="control-group {% if appform.operating_system.errors %}error{% endif %}">
                    <label class="control-label {% if appform.operating_system.field.required %}required{% endif %}" for="id_applier">{{ appform.operating_system.label }}</label>
                   <div class="controls" data-value="{{ appform.operating_system.value }}" data-url="{% url operating_systems_json %}">{{ appform.operating_system }}
                    {% if appform.operating_system.errors %}
                    <span class="help-inline" style="clear:both;">
                        {{ appform.operating_system.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>
                </fieldset>
                {% if application.admin_contact_name %}
                <fieldset>
                <legend>{% trans "Administrative contact" %}</legend>
                <address>
                    <i class="icon-user"></i> <strong>{{ application.admin_contact_name }}</strong><br>
                    <i class="icon-envelope-alt"></i> <a href="mailto:{{ application.admin_contact_email }}">{{ application.admin_contact_email }}</a><br>
                    <i class="icon-phone"></i> {{ application.admin_contact_phone }}
                </address>

                </fieldset>
                {% endif %}

            </div>
            <div class="span6">

<fieldset>
                <legend>{% trans "Comments" %}</legend>
                <div class="alert alert-info">
                <i class="icon-pencil"></i> {{ application.comments }}
                </div>
                </fieldset>


                <fieldset>
                    <legend>{% trans "Placement" %}</legend>
                    {% if application.network %}
                    <div class="notice">
                    {% trans "The user has requested explicit network placement on" %} {{ application.network }} ({{ application.network.cluster.description }})
                    </div>
                    {% endif %}

                    {% comment %}<p>{% trans "Choose either a network, or a cluster from the quick list to use the cluster's default network." %}</p>


                    <div class="control-group {% if appform.network.errors %}error{% endif %}">
                        <label class="control-label {% if appform.network.field.required %}required{% endif %}" for="id_applier">{{ appform.network.label }}</label>
                        <div class="controls">{{ appform.network }}
                        {% if appform.network.errors %}
                        <span class="help-inline" style="clear:both;">
                            {{ appform.network.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>
                    <p>{% for cl in fast_clusters %}<a href="#" onclick="set_network('{{ cl.get_default_network.pk }}');">{{ cl.description }} ({{ cl.slug }})</a> {% if not forloop.last %}| {% endif %}{% endfor %}</p>
                    {% endcomment %}

                    <div class="control-group {% if appform.cluster.errors %}error{% endif %}">
                        <label class="control-label {% if appform.cluster.field.required %}required{% endif %}" for="id_applier">{{ appform.cluster.label }}</label>
                        <div class="controls">{{ appform.cluster }}
                        {% if appform.cluster.errors %}
                        <span class="help-inline" style="clear:both;">
                            {{ appform.cluster.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>

                    <div class="control-group {% if appform.disk_template.errors %}error{% endif %}">
                        <label class="control-label {% if appform.disk_template.field.required %}required{% endif %}" for="id_applier">{{ appform.disk_template.label }}</label>
                        <div class="controls">{{ appform.disk_template }}
                        {% if appform.disk_template.errors %}
                        <span class="help-inline" style="clear:both;">
                            {{ appform.disk_template.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>

                    <div class="control-group {% if appform.node_group.errors %}error{% endif %}">
                        <label class="control-label {% if appform.node_group.field.required %}required{% endif %}" for="id_applier">{{ appform.node_group.label }}</label>
                        <div class="controls">{{ appform.node_group }}
                        {% if appform.node_group.errors %}
                        <span class="help-inline" style="clear:both;">
                            {{ appform.node_group.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>


                    <div class="control-group {% if appform.netw.errors %}error{% endif %}">
                        <label class="control-label {% if appform.netw.field.required %}required{% endif %}" for="id_applier">{{ appform.netw.label }}</label>
                        <div class="controls">{{ appform.netw }}
                        {% if appform.netw.errors %}
                        <span class="help-inline" style="clear:both;">
                            {{ appform.netw.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>




                    <div class="control-group {% if appform.vgs.errors %}error{% endif %}">
                        <label class="control-label {% if appform.vgs.field.required %}required{% endif %}" for="id_applier">{{ appform.vgs.label }}</label>
                        <div class="controls">{{ appform.vgs }}
                        {% if appform.vgs.errors %}
                        <span class="help-inline" style="clear:both;">
                            {{ appform.vgs.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>




                {%if application.job_id %}
                <div class="control-group">
                    <label class="control-label required" for="id_applier">{% trans "Job ID" %}</label>
                    <div class="controls padcontrol"><a class="btn" href="#" onclick="javascript:showDetails('{{ application.cluster.slug }}','{{ application.job_id }}'); return false;">{{ application.job_id }}</a>
                    </div>
                </div>
                {%endif%}
                {%if application.backend_message %}
                <div class="control-group">
                    <label class="control-label required" for="id_applier">{% trans "Error" %}</label>
                    <div class="controls padcontrol">{{ application.backend_message }}
                    </div>
                </div>
                {%endif%}
                </fieldset>
                </div></div>
<div class="row-fluid">
<fieldset>
<legend>{% trans "Decision" %}</legend>

<div class="control-group {% if appform.admin_comments.errors %}error{% endif %}">
                        <label class="control-label {% if appform.admin_comments.field.required %}required{% endif %}" for="id_applier">{% trans "Comments to the user" %}</label>
                        <div class="controls">{{ appform.admin_comments }}
                        {% if appform.admin_comments.errors %}
                        <span class="help-inline" style="clear:both; color: #B94A48;">
                            {{ appform.admin_comments.errors|join:", " }}
                        </span>
                        {% endif %}
                        </div>
                    </div>
</fieldset>

<div class="control-group">
            <div class="controls">
            <input type="submit" value={% if application.status == 100 %}"Accept"{% else %}"Re-submit"{% endif %} class="btn btn-success" name="accept"/> <input type="submit" value="Reject" class="btn btn-danger" name="reject"/>
            </div>
            </div>
</div>
</form>

{% else %}

    <form class="form-inline">
    <div class="row-fluid"><div class="span6">
        <fieldset>

        <legend>
                    {% trans "Instance information" %}
                </legend>

                <div class="control-group">
                    <label class="control-label required" for="id_applier">
                        Status
                    </label>
                   <div class="controls padcontrol">{{ application.get_status_display }}

                    </div>
                </div>
                  <div class="control-group">
                    <label class="control-label required" for="id_applier">
                        {{ appform.hostname.label }}
                    </label>
                   <div class="controls padcontrol">{% if application.cluster.slug %}<a href="{% url instance-detail cluster_slug=application.cluster.slug instance=application.hostname %}">{{ application.hostname }}</a>{% else %}{{ application.hostname }}{% endif %}

                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label required" for="id_applier">{{ appform.memory.label }}</label>
                   <div class="controls padcontrol">{{ application.memory }}

                    </div>
                </div>

                <div class="control-group ">
                    <label class="control-label required" for="id_applier">{{ appform.vcpus.label }}</label>
                   <div class="controls padcontrol">{{ application.vcpus }}

                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label required" for="id_applier">{{ appform.disk_size.label }}</label>
                   <div class="controls padcontrol">{{ application.disk_size }}

                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label required" for="id_applier">{{ appform.organization.label }}</label>
                   <div class="controls padcontrol">{{ application.organization }}

                    </div>
                </div>

                <div class="control-group ">
                    <label class="control-label required" for="id_applier">{{ appform.hosts_mail_server.label }}</label>
                   <div class="controls padcontrol">{{ application.hosts_mail_server }}

                    </div>
                </div>

                <div class="control-group ">
                    <label class="control-label required" for="id_applier">{{ appform.operating_system.label }}</label>
                   <div class="controls padcontrol">{{ application.operating_system }}

                    </div>
                </div>

        </fieldset>
        </div>
            <div class="span6">

        {% if application.admin_contact_name %}
        <fieldset>
            <legend>{% trans "Administrative contact" %}</legend>
            <address>
                <i class="icon-user"></i> <strong>{{ application.admin_contact_name }}</strong><br>
                <i class="icon-envelope-alt"></i> <a href="mailto:{{ application.admin_contact_email }}">{{ application.admin_contact_email }}</a><br>
                <i class="icon-phone"></i> {{ application.admin_contact_phone }}
            </address>

        </fieldset>
        {% endif %}

        <fieldset>
                <legend>{% trans "Comments" %}</legend>
                <div class="alert alert-info">
                <i class="icon-pencil"></i> {{ application.comments }}
                </div>
        </fieldset>


        <fieldset>
                <legend>{% trans "Placement" %}</legend>
                <div class="alert alert-success">
                <i class="icon-sitemap"></i> {% trans "The instance has been placed on" %} {{ application.network }} ({{ application.cluster.description }})
                </div>
                {%if application.job_id %}
                <div class="control-group">
                    <label class="control-label required" for="id_applier">{% trans "Job ID" %}</label>
                    <div class="controls padcontrol"><a class="btn" href="#" onclick="javascript:showDetails('{{ application.cluster.slug }}','{{ application.job_id }}'); return false;">{{ application.job_id }}</a>
                    </div>
                </div>
                {%endif%}
                {%if application.backend_message %}
                <div class="control-group">
                    <label class="control-label required" for="id_applier">{% trans "Error" %}</label>
                    <div class="controls padcontrol">{{ application.backend_message }}
                    </div>
                </div>
                {%endif%}
        </fieldset>
        </div></div>

    </form>
{% endif %}

</div>
</div>
</div>
{% if applications %}
<div class="span3 sidebar">
    <div class="widget">
        <h2><i class="icon-inbox"></i>  {% trans "Pending Instance Applications" %}</h2>
        <ul class="cards">
            {% for appl in applications %}
            <li>
                <p class="title"><a href="{% url application-review appl.pk %}"><i class="icon-laptop"></i> {{appl.hostname}}</a></p>
                <p class="info small"><i class="icon-calendar"></i> {{appl.filed|date }}</p>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}
{% endblock %}

{% block bottomblock %}
<script type="text/javascript" src="/static/js/jquery_csrf_protect.js"></script>
<script type="text/javascript" src="/static/js/jquery.sparkline.min.js"></script>
<script src="/static/select2/select2.js"></script>
<script type="text/javascript">
var selected_cluster;
var selected_ng;
var single_ng;
var clust_tot_inst;
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
};
$(document).ready( function(){

    $("#id_cluster").change(function () {
        var selng = $("#id_node_group");
        var dtng = $("#id_disk_template");

        var optionSelected = $(this).find("option:selected");
        cluster_id = this.value;
        var clusturl = "{% url cluster_ng_stack %}"+"?cluster_id="+cluster_id;
        $.ajax({
            type: 'GET',
            url: clusturl,
            dataType: 'json',
            success: function(data) {
                selected_cluster = data;
                cleanfields();
                for (var i=0; i<data.node_groups.length; i++) {
                    unallocable = '';
                    if (data.node_groups[i].alloc_policy == 'unallocable'){
                        unallocable = 'disabled';
                    }
                    selecttext = '';
                    if ("{{application.instance_params.node_group}}" == data.node_groups[i].name && "{{application.instance_params.cluster}}" == selected_cluster.slug){
                        selecttext = "selected='selected'";
                    }
                    selng.append('<option value="'+data.node_groups[i].name+'" '+unallocable+' '+selecttext+'>'+data.node_groups[i].name+'</option>');

                }

                $("#id_node_group").trigger('change');
                for (var i=0; i<data.disk_templates.length; i++) {
                    def = false;
                    if (i === 0){
                        def = true;
                    }
                    selecttext = '';
                    if ("{{application.instance_params.disk_template}}" == data.disk_templates[i] && "{{application.instance_params.cluster}}" == selected_cluster.slug){
                        selecttext = "selected='selected'";
                    }
                    dtng.append('<option data-defdt="'+def+'" value="'+data.disk_templates[i]+'" '+selecttext+'>'+data.disk_templates[i]+'</option>');

                }
                dtng.select2('destroy');
                dtng.select2({dropdownAutoWidth : true, formatResult: formatdt});

        }
        });
    });

    $("#id_node_group").change(function () {
        var optionSelected = $(this).find("option:selected");
        var vgng = $("#id_vgs");
        ng_name = this.value;
        vgng.empty();
        var selnet = $("#id_netw");
        for (var i=0; i<selected_cluster.node_groups.length; i++) {
            if (selected_cluster.node_groups[i].name === ng_name){
                selected_ng = selected_cluster.node_groups[i];
            }
        }
        selnet.empty();
        var parsed_groups = [];
        for (var i=0; i<selected_ng.networks.length; i++) {
            if ($.inArray(selected_ng.networks[i].type, parsed_groups) != -1) {
                selgroup = $('#gr_'+selected_ng.networks[i].type+'');
            } else {
                parsed_groups.push(selected_ng.networks[i].type);
                selnet.append($('<optgroup id="gr_'+selected_ng.networks[i].type+'" label="'+selected_ng.networks[i].type.capitalize()+'"></optgroup>'));
                selgroup = $('#gr_'+selected_ng.networks[i].type+'');
            }
            selecttext = '';
            if (selgroup.attr('id') === 'gr_routed') {
                if (selecttext === '') {
                    selecttext = "selected='selected'";
                }
            }
            selgroup.append('<option \
                            data-defaultnet="'+selected_ng.networks[i].defaultnet+'" \
                            data-free="'+selected_ng.networks[i].free_count+'" \
                            data-reserved="'+selected_ng.networks[i].reserved_count+'" \
                            data-type="'+selected_ng.networks[i].type+'" \
                            value="'+selected_ng.networks[i].link+'::'+selected_ng.networks[i].type+'" '+selecttext+'>'+selected_ng.networks[i].network+'</option>');

        }
        if (('routed', parsed_groups) != -1){
            topgroup = $('#gr_routed');
            topgroup.parent().prepend(topgroup);
        }
        $("#id_netw").trigger("change");
        selnet.select2('destroy');
        selnet.select2({dropdownAutoWidth : true, formatResult: formatnet});
        selnet.on('select2-open', function(){
            $.sparkline_display_visible();
        });
        vgng.append('<option value="default">default</option>');
        for (var i=0; i<selected_ng.vgs.length; i++) {
            selecttext = '';
                    if ("{{application.instance_params.vgs}}" == selected_ng.vgs[i] && "{{application.instance_params.cluster}}" == selected_cluster.slug){
                        selecttext = "selected='selected'";
                    }
                    vgng.append('<option value="'+selected_ng.vgs[i]+'" '+selecttext+'>'+selected_ng.vgs[i]+'</option>');
        }
        vgng.select2('destroy');
        vgng.select2();

    });

    function getOperatingSystems() {
        var operatingSystemsInput = $('#id_operating_system');
        var selected = operatingSystemsInput.parent().data('value');
        $.ajax({
            url: operatingSystemsInput.parent().data('url'),
            success: function (data) {
                response = $.parseJSON(data);
                var found = false;
                options = '';
                if (response.status === 'success') {
                    for (var i=0; i < response.operating_systems.length; i++) {
                        if (response.operating_systems[i][0] === selected) {
                            if (response.operating_systems[i][1].osparams.img_id) {
                                options += '<option value="' +  response.operating_systems[i][1].osparams.img_id + '" selected="selected">' + response.operating_systems[i][1].description + '</option>';
                            } else {
                                options += '<option value="' +  response.operating_systems[i][1].provider + '" selected="selected">' + response.operating_systems[i][1].description + '</option>';
                            }
                            found = true;
                        } else {
                            if (response.operating_systems[i][1].osparams.img_id) {
                                options += '<option value="' +  response.operating_systems[i][1].osparams.img_id + '">' + response.operating_systems[i][1].description + '</option>';
                            } else {
                            	if (selected === 'noop' && response.operating_systems[i][1].provider == 'noop'){
                            		options += '<option value="' +  response.operating_systems[i][1].provider + '" selected="selected">' + response.operating_systems[i][1].description + '</option>';
                            		found = true;
                            	}
                            	else{
                                	options += '<option value="' +  response.operating_systems[i][1].provider + '" >' + response.operating_systems[i][1].description + '</option>';
                                }
                            }
                        }
                    }
                    if (!found) {
                        operatingSystemsInput.parent().append('<div style="color: #b94a48;">Δεν βρέθηκε το λειτουργικό που ζητηθηκε: ' + selected + '</div>')
                    }
                }
                operatingSystemsInput.html(options)
                operatingSystemsInput.select2({
                    dropdownAutoWidth : true
                });
            }
        });
    }

    getOperatingSystems();


    $("#id_organization").select2({dropdownAutoWidth : true});

    $("#id_cluster").select2();
    $("#id_node_group").select2({dropdownAutoWidth : true, formatResult: formatng});
    $("#id_disk_template").select2({dropdownAutoWidth : true, formatResult: formatdt});
    $("#id_vgs").select2();
    $("#id_netw").select2({dropdownAutoWidth : true, formatResult: formatnet});
    $("#id_cluster").trigger("change");


});

function cleanfields(){
    $("#networkinfo").empty();
    $("#id_node_group").empty();
    $("#id_disk_template").empty();
    $("#id_vgs").empty();
    $("#id_netw").empty();
}

function formatng(selection) {
    if (selection.disabled){
        return "<font style='color:red;'>"+selection.text+"</font>"
    }
    return selection.text;
}

function formatdt(selection) {
    def = $(selection.element).data('defdt');
    if (def){
        return "<font style='color:#38D64A; font-weight: bold;'>"+selection.text+"</font>";
    }
    return selection.text;
}

function formatnet(selection) {
    element = selection.element;
    free = $(element).data('free');
    reserved = $(element).data('reserved');
    if (free && reserved){
        var piechart = $("<span style='float:right'>&nbsp;</span>");
        piechart.sparkline([reserved, free], {type: 'pie',sliceColors : ["#f89406", "#468847"], disableHiddenCheck: true });
    }


   if ($(element).data('defaultnet')){
   var res=$("<font style='color:#38D64A; font-weight: bold;'>"+selection.text+"</font>");
        if (free && reserved){
            res.append(piechart);
        }
   }
   else {
        var res = $("<font>"+selection.text+"</font>");
        if (free && reserved){
            res.append(piechart);
        }
   }

    return res;
}

    function showDetails(cluster, jobid){
        $( "#instDetsbody" ).html( "" );
        $( "#myModalLabelservdets" ).text('Job Details: '+jobid);
        $( "#instDetsbody" ).load("{% url jobdets-popup %}/?cluster="+cluster+"&jobid="+jobid+"");
        $( "#instDets" ).modal('show');
        return false;
    }

</script>
{% endblock %}