{% extends "base.html" %}
{% load staticfiles %}
{% load bootstrap4 %}
{% block extrahead %}
{{block.super}}
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-5">
<div class="card mb-4">
<div class="card-header d-flex">
<h4 class="d-inline">Overview</h4>
<button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
<div class="collapse show" id="panel_overview">
<div class="card-body">
<table class="table">
<tr>
<td>Purpose</td>
<td>{{ booking.purpose }}</td>
</tr>
<tr>
<td>Project</td>
<td>{{ booking.project }}</td>
</tr>
<tr>
<td>Start Time</td>
<td>{{ booking.start }}</td>
</tr>
<tr>
<td>End Time</td>
<td>{{ booking.end }}</td>
</tr>
<tr>
<td>Pod Definition</td>
<td>{{ booking.resource.template }}</td>
</tr>
<tr>
<td>Pod Configuration</td>
<td>{{ booking.config_bundle }}</td>
</tr>
<tr>
<td>Lab Deployed At</td>
<td>{{ booking.lab }}</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header d-flex">
<h4 class="d-inline">Pod</h4>
<button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
<div class="collapse show" id="pod_panel">
<div class="card-body">
<table class="table">
{% for host in booking.resource.hosts.all %}
<tr>
<td><h4>{{host.template.resource.name}}</h4></td>
<td>
<table class="table">
<tr>
<td>Hostname:</td>
<td>{{host.template.resource.name}}</td>
</tr>
<tr>
<td>Profile:</td>
<td>{{host.name}}</td>
</tr>
<tr>
<td>Role:</td>
<td>{{host.config.opnfvRole}}</td>
</tr>
<tr>
<td>Image:</td>
<td id="host_image_{{host.id}}">
{{host.config.image}}
<button
class="btn btn-primary ml-4"
data-toggle="modal"
data-target="#imageModal"
onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
>Change/Reset</button></td>
</tr>
<tr>
<td>RAM:</td>
<td>{{host.profile.ramprofile.first.amount}}G,
{{host.profile.ramprofile.first.channels}} channels</td>
</tr>
<tr>
<td>CPU:</td>
<td>
<table class="table">
<tr>
<td>Arch:</td>
<td>{{host.profile.cpuprofile.first.architecture}}</td>
</tr>
<tr>
<td>Cores:</td>
<td>{{host.profile.cpuprofile.first.cores}}</td>
</tr>
<tr>
<td>Sockets:</td>
<td>{{host.profile.cpuprofile.first.cpus}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>DISK:</td>
<td>
<table class="table">
<tr>
<td>Size:</td>
<td>{{host.profile.storageprofile.first.size}} GiB</td>
</tr>
<tr>
<td>Type:</td>
<td>{{host.profile.storageprofile.first.media_type}}</td>
</tr>
<tr>
<td>Mount Point:</td>
<td>{{host.profile.storageprofile.first.name}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Interfaces:</td>
<td>
<table class="table">
{% for intprof in host.profile.interfaceprofile.all %}
<tr>
<td>
<table class="table table-borderless">
<tr>
<td>Name:</td>
<td>{{intprof.name}}</td>
</tr>
<tr>
<td>Speed:</td>
<td>{{intprof.speed}}</td>
</tr>
</table>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
</td>
{% endfor %}
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4">
<div class="card-header d-flex">
<h4 class="d-inline">Deployment Progress</h4>
<p>These are the different tasks that have to be completed before your deployment is ready</p>
<button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
<div class="collapse show" id="panel_tasks">
<div class="card-body">
<table class="table">
<tr>
<th></th>
<th>Status</th>
<th>Lab Response</th>
<th>Type</th>
</tr>
{% for task in booking.job.get_tasklist %}
<tr>
<td>
{% if task.status < 100 %}
<div class="rounded-circle bg-secondary square-20"></div>
{% elif task.status < 200 %}
<div class="spinner-border text-primary square-20"></div>
{% else %}
<div class="rounded-circle bg-success square-20"></div>
{% endif %}
</td>
<td>
{% if task.status < 100 %}
PENDING
{% elif task.status < 200 %}
IN PROGRESS
{% else %}
DONE
{% endif %}
</td>
<td>
{% if task.message %}
{% if task.type_str == "Access Task" and user_id != task.config.user.id %}
Message from Lab: <pre>--secret--</pre>
{% else %}
Message from Lab: <pre>{{ task.message }}</pre>
{% endif %}
{% else %}
No response provided (yet)
{% endif %}
</td>
<td>
{{ task.type_str }}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header d-flex">
<h4 class="d-inline">PDF</h4>
<button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
<div class="collapse show" id="pdf_panel">
<div class="card-body p-0">
<pre class="prettyprint lang-yaml m-0 p-4 border-0">
{{pdf}}
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title d-inline float-left" id="exampleModalLabel">Host Image</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="image_host_form">
{% csrf_token %}
<select class="form-control" id="image_select" name="image_id">
</select>
<input id="host_id_input" type="hidden" name="host_id">
</input>
</form>
</div>
<div class="modal-footer d-flex flex-column">
<div>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#modal_warning" aria-expanded="false">Reset Host</button>
</div>
<div class="border-top collapse mt-3 py-2 text-center w-100" id="modal_warning">
<h3>Are You Sure?</h3>
<p>This will wipe the disk and reimage the host</p>
<button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
<button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
</div>
</div>
</div>
</div>
</div>
<script>
var image_mapping = {{image_mapping|safe}};
var current_host_id = 0;
function set_image_dropdown(profile_name, host_id) {
document.getElementById("host_id_input").value = host_id;
current_host_id = host_id;
var dropdown = document.getElementById("image_select");
var length = dropdown.length;
//clear dropdown
for(i=length-1; i>=0; i--){
dropdown.options.remove(i);
}
var images = image_mapping[profile_name];
var image_length = images.length;
for(i=0; i<image_length; i++){
var opt = document.createElement("OPTION");
opt.value = images[i].value;
opt.appendChild(document.createTextNode(images[i].name));
dropdown.options.add(opt);
}
document.getElementById("modal_warning").classList.add("collapse");
}
function submit_image_form() {
var ajaxForm = $("#image_host_form");
var formData = ajaxForm.serialize();
req = new XMLHttpRequest();
req.open("POST", "/booking/modify/{{booking.id}}/image/", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onerror = function() { alert("problem submitting form"); }
req.onreadystatechange = function() {
if(req.readyState === 4) {
node = document.getElementById("host_image_" + current_host_id);
text = document.createTextNode(req.responseText);
node.replaceChild(text, node.firstChild);
}
}
req.send(formData);
}
</script>
{% endblock content %}