aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/booking
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/booking')
-rw-r--r--src/templates/booking/booking_detail.html394
-rw-r--r--src/templates/booking/quick_deploy.html12
-rw-r--r--src/templates/booking/stats.html42
3 files changed, 212 insertions, 236 deletions
diff --git a/src/templates/booking/booking_detail.html b/src/templates/booking/booking_detail.html
index 99de747..fea2bb6 100644
--- a/src/templates/booking/booking_detail.html
+++ b/src/templates/booking/booking_detail.html
@@ -8,236 +8,217 @@
{% 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 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="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 %}
+ <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><h4>{{host.template.resource.name}}</h4></td>
+ <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">
+ <table class="table m-0">
<tr>
- <td>Hostname:</td>
- <td>{{host.template.resource.name}}</td>
+ <td>Arch:</td>
+ <td>{{host.profile.cpuprofile.first.architecture}}</td>
</tr>
<tr>
- <td>Profile:</td>
- <td>{{host.name}}</td>
+ <td>Cores:</td>
+ <td>{{host.profile.cpuprofile.first.cores}}</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>
+ <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>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>
+ <td>Size:</td>
+ <td>{{host.profile.storageprofile.first.size}} GiB</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>
+ <td>Type:</td>
+ <td>{{host.profile.storageprofile.first.media_type}}</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>
+ <td>Mount Point:</td>
+ <td>{{host.profile.storageprofile.first.name}}</td>
</tr>
</table>
</td>
- {% endfor %}
</tr>
- </table>
- </div>
+ <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>
- </div>
+ {% endfor %}
</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 %}
+ </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>{{ task.message }}</pre>
- {% endif %}
- {% else %}
- No response provided (yet)
- {% endif %}
- </td>
- <td>
- {{ task.type_str }}
- </td>
- </tr>
- {% endfor %}
- </table>
- </div>
- </div>
+ {% 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 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 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>
@@ -260,7 +241,6 @@
<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">
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index 6776980..8570f25 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/src/templates/booking/quick_deploy.html
@@ -6,7 +6,6 @@
{% bootstrap_form_errors form type='non_fields' %}
<form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
{% csrf_token %}
- <div class="container-fluid">
<div class="row mx-0 px-0">
<div class="col-12 mx-0 px-0 mt-2">
<p class="my-0">Please select a host type you wish to book. Only available types are shown.</p>
@@ -14,7 +13,7 @@
</div>
</div>
<div class="row">
- <div class="col-12 col-lg-3 px-1 my-2">
+ <div class="col-12 col-lg-3 my-2">
<div class="col border rounded py-2 h-100">
{% bootstrap_field form.purpose %}
{% bootstrap_field form.project %}
@@ -26,30 +25,29 @@
</script>
</div>
</div>
- <div class="col-12 col-lg-3 px-1 my-2">
+ <div class="col-12 col-lg-3 my-2">
<div class="col border rounded py-2 h-100">
<label>Collaborators</label>
{{ form.users }}
</div>
</div>
- <div class="col-12 col-lg-3 px-1 my-2">
+ <div class="col-12 col-lg-3 my-2">
<div class="col border rounded py-2 h-100">
{% bootstrap_field form.hostname %}
{% bootstrap_field form.image %}
</div>
</div>
- <div class="col-12 col-lg-3 px-1 my-2">
+ <div class="col-12 col-lg-3 my-2">
<div class="col border rounded py-2 h-100">
<strong>OPNFV: (Optional)</strong>
{% bootstrap_field form.installer %}
{% bootstrap_field form.scenario %}
</div>
</div>
- <div class="col-12 d-flex px-0 mt-2 justify-content-end">
+ <div class="col-12 d-flex mt-2 justify-content-end">
<button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
</div>
</div>
- </div>
</form>
<script type="text/javascript">
diff --git a/src/templates/booking/stats.html b/src/templates/booking/stats.html
index ed34731..94239f9 100644
--- a/src/templates/booking/stats.html
+++ b/src/templates/booking/stats.html
@@ -41,33 +41,31 @@ function getData(){
{% endblock %}
{% block content %}
- <div class="container-fluid">
- <div class="row">
- <div class="col-auto">
- <p>Number of days to plot: </p>
- <div class="form-group d-flex align-content-center">
- <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
- <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
- </div>
- </div>
+<div class="row">
+ <div class="col-auto">
+ <p>Number of days to plot: </p>
+ <div class="form-group d-flex align-content-center">
+ <input id="number_days" type="number" class="form-control d-inline-block w-auto" min="1" step="1"/>
+ <button class="btn btn-primary ml-1" onclick="getData();">Submit</button>
</div>
- <div class="row">
- <div class="col-12 col-md-10">
- <!-- These graphs do NOT get redrawn when the browser size is changed -->
- <div id="all_graph_container border" class="mw-100">
- <div id="booking_graph_wrapper">
- <div id="booking_graph_container"/>
- </div>
- <div id="user_graph_wrapper">
- <div id="user_graph_container"/>
- </div>
- </div>
+ </div>
+</div>
+<div class="row">
+ <div class="col-12 col-md-10">
+ <!-- These graphs do NOT get redrawn when the browser size is changed -->
+ <div id="all_graph_container border" class="mw-100">
+ <div id="booking_graph_wrapper">
+ <div id="booking_graph_container"/>
+ </div>
+ <div id="user_graph_wrapper">
+ <div id="user_graph_container"/>
</div>
</div>
</div>
- <script>
+</div>
+<script>
var data = {{data|safe}};
drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
drawGraph(data["user"], "user_graph_container", "Active Users");
- </script>
+</script>
{% endblock content %}