Adds Template Overrides

Changes the structure of the template directories to allow
a new project to define their own set of override templates
that inherit from a common base.

I have slightly modified landing.html here as an example.
In comming changes we will try to move all the "laas" specific
content into the laas directory

Change-Id: I46151be182de901f870debb247b305ea34ae77ba
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

1 files changed, 303 insertions, 0 deletions

diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html
new file mode 100644
index 0000000..fea2bb6
--- /dev/null
+++ b/src/templates/base/booking/booking_detail.html
@@ -0,0 +1,303 @@
+{% 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="row">
+    <div class="col-12 col-lg-5">
+        <div class="card mb-3">
+            <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">
+                <table class="table m-0">
+                    <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 class="card my-3">
+            <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">
+                    {% for host in booking.resource.hosts.all %}
+                        <h4>{{host.template.resource.name}}</h4>
+                        <div class="overflow-auto">
+                            <table class="table m-0">
+                                <tr>
+                                    <td>Hostname:</td>
+                                    <td>{{host.template.resource.name}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Machine:</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 m-0">
+                                            <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 m-0">
+                                            <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 m-0">
+                                        {% for intprof in host.profile.interfaceprofile.all %}
+                                        <tr>
+                                            <td>
+                                            <table class="table table-sm table-borderless m-0">
+                                                <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>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col">
+        <div class="card mb-3">
+            <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">
+                <table class="table m-0">
+                    <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 class="text-break pre-wrap">{{ task.message }}</pre>
+                                {% endif %}
+                            {% else %}
+                                No response provided (yet)
+                            {% endif %}
+                        </td>
+                        <td>
+                            {{ task.type_str }}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </table>
+            </div>
+        </div>
+        <div class="card my-3">
+            <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">
+                    <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
+{{pdf}}
+                    </pre>
+                </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">&times;</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">
+                </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 %}