diff options
author | Jeremy Plsek <jeremyplsek@gmail.com> | 2019-12-19 12:58:33 -0500 |
---|---|---|
committer | Jeremy Plsek <jeremyplsek@gmail.com> | 2019-12-19 12:58:33 -0500 |
commit | 30a535d7e9bdc0e3cf637207c0c100a16db81586 (patch) | |
tree | 2a7c3a968d95c29a661620095d889f6484169fec /src/templates/booking/booking_detail.html | |
parent | edf4d6729b94258f8b404684703984b724c45c8f (diff) |
style: make more consistent styles
- Fix indentation in places
- User settings have better labels
- Lab info title now the same as others
- Add "empty" sections to be more helpful to the user. They are not
using links, since most of the "workflow" is handled by javascript.
- Update padding in places to better line up with other elements
- Add padding to bootstrap notifications (add check for messages to not
just have random padding on the top of the page)
- Remove unnecessary text in a form
- Remove card-body from table-only or list-only cards (lists and tables
are now flush with cards)
- Add bg-danger to not-working hosts
- Replace True/False text shown to the user with Yes/No
- Remove ":" from some headers
- Vertical buttons are now in a button group
- Add pre-wrap class to avoid pre from breaking box sizing on the
booking detail page
- Reduce table indent in pod card and add table overflow scrollbar
Signed-off-by: Jeremy Plsek <jeremyplsek@gmail.com>
Change-Id: If09dca2f2b7386c44eeeb817ef76e8f748e456da
Diffstat (limited to 'src/templates/booking/booking_detail.html')
-rw-r--r-- | src/templates/booking/booking_detail.html | 394 |
1 files changed, 187 insertions, 207 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"> |