1 {% extends "base.html" %}
7 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
14 transition: max-height 0.5s ease-out;
20 <div class="container-fluid">
22 <div class="col-lg-4">
23 <div class="panel panel-default">
24 <div class="panel-heading clearfix">
25 <h4 style="display: inline;">Overview</h4>
26 <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;">Expand</a>
28 <div class="panel-body" id="panel_overview">
32 <td>{{ booking.purpose }}</td>
36 <td>{{ booking.project }}</td>
40 <td>{{ booking.start }}</td>
44 <td>{{ booking.end }}</td>
47 <td>Pod Definition</td>
48 <td>{{ booking.resource.template }}</td>
51 <td>Pod Configuration</td>
52 <td>{{ booking.config_bundle }}</td>
55 <td>Lab Deployed At</td>
56 <td>{{ booking.lab }}</td>
62 <div class="col-lg-12">
63 <div class="panel panel-default">
64 <div class="panel-heading clearfix">
65 <h4 style="display: inline;">Pod</h4>
66 <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
68 <div class="panel-body pod_panel" id="pod_panel">
70 {% for host in booking.resource.hosts.all %}
72 <td><h4>{{host.template.resource.name}}</h4></td>
77 <td>{{host.template.resource.name}}</td>
81 <td>{{host.name}}</td>
85 <td>{{host.config.opnfvRole}}</td>
89 <td id="host_image_{{host.id}}">
92 style="margin-left:10px;"
93 class="btn btn-primary"
95 data-target="#imageModal"
96 onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
97 >Change/Reset</button></td>
101 <td>{{host.profile.ramprofile.first.amount}}G,
102 {{host.profile.ramprofile.first.channels}} channels</td>
107 <table class="table">
110 <td>{{host.profile.cpuprofile.first.architecture}}</td>
114 <td>{{host.profile.cpuprofile.first.cores}}</td>
118 <td>{{host.profile.cpuprofile.first.cpus}}</td>
126 <table class="table">
129 <td>{{host.profile.storageprofile.first.size}} GiB</td>
133 <td>{{host.profile.storageprofile.first.media_type}}</td>
136 <td>Mount Point:</td>
137 <td>{{host.profile.storageprofile.first.name}}</td>
147 border: none !important;
150 <table class="table">
151 {% for intprof in host.profile.interfaceprofile.all %}
154 <table class="table borderless">
157 <td>{{intprof.name}}</td>
161 <td>{{intprof.speed}}</td>
180 <div class="col-lg-8">
181 <div class="panel panel-default">
182 <div class="panel-heading clearfix">
183 <h4 style="display: inline;">Deployment Progress</h4>
184 <p style="display: inline; margin-left: 10px;"> These are the different tasks that have to be completed before your deployment is ready</p>
185 <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a>
187 <div class="panel-body" id="panel_tasks">
188 <table class="table">
191 display: inline-block;
192 border: 3px solid #f3f3f3;
194 border-top: 3px solid #12aebb;
197 -webkit-animation: spin 2s linear infinite; /* Safari */
198 animation: spin 2s linear infinite;
202 0% {transform: rotate(0deg);}
203 100% {transform: rotate(360deg);}
207 display: inline-block;
212 animation: fadeInOut 1s infinite alternate;
215 @keyframes fadeInOut {
219 display: inline-block;
229 <th>Lab Response</th>
232 {% for task in booking.job.get_tasklist %}
235 {% if task.status < 100 %}
236 <div class="new"></div>
237 {% elif task.status < 200 %}
238 <div class="progress"></div>
240 <div class="done"></div>
244 {% if task.status < 100 %}
246 {% elif task.status < 200 %}
253 {% if task.message %}
254 {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
255 Message from Lab: <pre>--secret--</pre>
257 Message from Lab: <pre>{{ task.message }}</pre>
260 No response provided (yet)
272 <div class="col-lg-8">
273 <div class="panel panel-default">
274 <div class="panel-heading clearfix">
275 <h4 style="display: inline;">PDF</h4>
276 <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
278 <div class="panel-body" id="pdf_panel" style="padding: 0px;">
279 <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 15px; border: none;">
291 <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
292 <div class="modal-dialog" style="width: 450px;" role="document">
293 <div class="modal-content">
294 <div class="modal-header">
295 <h4 class="modal-title" id="exampleModalLabel" style="display: inline; float: left;">Host Image</h4>
296 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
297 <span aria-hidden="true">×</span>
300 <div class="modal-body">
301 <form id="image_host_form">
303 <select class="form-control" style="width: 80%; margin-left: 10%" id="image_select" name="image_id">
305 <input id="host_id_input" type="hidden" name="host_id">
309 <div class="modal-footer">
310 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
311 <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Reset Host</button>
313 <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
314 <div style="text-align:center; margin: 5px">
315 <h3>Are You Sure?</h3>
316 <p>This will wipe the disk and reimage the host</p>
317 <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
318 <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
325 var image_mapping = {{image_mapping|safe}};
326 var current_host_id = 0;
327 function set_image_dropdown(profile_name, host_id) {
328 document.getElementById("host_id_input").value = host_id;
329 current_host_id = host_id;
330 var dropdown = document.getElementById("image_select");
331 var length = dropdown.length;
333 for(i=length-1; i>=0; i--){
334 dropdown.options.remove(i);
336 var images = image_mapping[profile_name];
337 var image_length = images.length;
338 for(i=0; i<image_length; i++){
339 var opt = document.createElement("OPTION");
340 opt.value = images[i].value;
341 opt.appendChild(document.createTextNode(images[i].name));
342 dropdown.options.add(opt);
345 document.getElementById("modal_warning").style['max-height'] = '0px';
348 function submit_image_form() {
349 var ajaxForm = $("#image_host_form");
350 var formData = ajaxForm.serialize();
351 req = new XMLHttpRequest();
352 req.open("POST", "/booking/modify/{{booking.id}}/image/", true);
353 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
354 req.onerror = function() { alert("problem submitting form"); }
355 req.onreadystatechange = function() {
356 if(req.readyState === 4) {
357 node = document.getElementById("host_image_" + current_host_id);
358 text = document.createTextNode(req.responseText);
359 node.replaceChild(text, node.firstChild);
365 {% endblock content %}