+/* Sizing */
+#wrapper {
+ height: 100vh;
+}
+
+/* Used for turning divs into square */
+.square-20 {
+ height: 20px;
+ width: 20px;
+}
+
+/* Make links stay the same color with no underline */
+.discrete-a {
+ text-decoration: none;
+ color: inherit;
+}
+
+.discrete-a:hover {
+ text-decoration: none;
+ color: inherit;
+}
+
+/* Allow for sidebar to be small, but also resize on small screens */
+.sidebar {
+ min-width: 200px;
+}
+
/* Rotating arrows when dropdown happens */
i.fas.rotate {
transition: transform 0.3s ease-in-out;
a[aria-expanded="true"] > i.rotate {
transform: rotate(180deg);
}
+/* End rotating arrows */
+
+/* Start breadcrumbs for workflow */
+#topPagination .topcrumb {
+ flex: 1 1 0;
+ display: flex;
+ align-content: center;
+ justify-content: center;
+ border: 1px solid #dee2e6;
+ border-left: none;
+}
+
+.topcrumb > span {
+ color: #343a40;
+ cursor: default;
+}
+
+.topcrumb.active > span {
+ background: #007bff;
+ color: white;
+}
+
+.topcrumb.disabled > span {
+ color: #6c757d;
+ background: #f8f9fa;
+}
+
+/* Booking Node Styles */
+.selected_node {
+ border-color: #40c640;
+ box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6);
+ transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
+}
+#grid_wrapper > .row > div:first-child {
+ border-right: 1px solid gray;
+}
+
+/* Cursor effects */
+.not-allowed {
+ cursor: not-allowed;
+}
+
+/* Used with position-absolute class to make a full height object */
+.topToBottom {
+ bottom: 0;
+ top: 0;
+}
+
+/* Dropdown for collaborators */
+#drop_results {
+ max-height: 10rem;
+ z-index: 2;
+}
+
+#drop_results > li {
+ word-wrap: anywhere;
+}
\ No newline at end of file
+++ /dev/null
-.card_container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- grid-gap: 25px 25px;
- justify-items: stretch;
-}
-
-.card_container ul > li {
- padding: 7px !important;
- font-size: 16px;
-}
-
-.detail_button_container .btn {
- width: 49%;
-}
-
-.detail_button_container .btn-danger {
- float: right;
-}
-
-#modal_warning {
- transition: max-height 0.5s ease-out;
- overflow: hidden;
-}
-
-.detail_card {
- border-radius: 5px;
- border-top: 1px solid #ccc;
- border-left: 1px solid #ccc;
- border-right: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
- margin: 5px;
- padding-left: 25px;
- padding-right: 25px;
- padding-bottom: 15px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-}
select(node) {
const elem = document.getElementById(node['id']);
node['selected'] = true;
- elem.classList.remove('disabled_node', 'cleared_node');
+ elem.classList.remove('bg-white', 'not-allowed', 'bg-light');
elem.classList.add('selected_node');
}
const elem = document.getElementById(node['id']);
node['selected'] = false;
node['selectable'] = true;
- elem.classList.add('cleared_node')
- elem.classList.remove('disabled_node', 'selected_node');
+ elem.classList.add('bg-white')
+ elem.classList.remove('not-allowed', 'bg-light', 'selected_node');
}
disable_node(node) {
const elem = document.getElementById(node['id']);
node['selected'] = false;
node['selectable'] = false;
- elem.classList.remove('cleared_node', 'selected_node');
- elem.classList.add('disabled_node');
+ elem.classList.remove('bg-white', 'selected_node');
+ elem.classList.add('not-allowed', 'bg-light');
}
processClick(id){
const button = document.createElement("BUTTON");
button.type = "button";
button.appendChild(document.createTextNode("Remove"));
- button.classList.add("btn", "btn-danger");
+ button.classList.add("btn", "btn-danger", "d-inline-block");
const that = this;
button.onclick = function(){ that.remove_dropdown(div.id, node.id); }
return button;
const input = document.createElement("INPUT");
input.type = node.form.type;
input.name = node.id + node.form.name
+ input.classList.add("form-control", "w-auto", "d-inline-block");
input.pattern = "(?=^.{1,253}$)(^([A-Za-z0-9-_]{1,62}\.)*[A-Za-z0-9-_]{1,63})";
input.title = "Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed"
input.placeholder = node.form.placeholder;
add_item_prepopulate(node, prepopulate){
const div = document.createElement("DIV");
div.id = "dropdown_" + this.dropdown_count;
- div.classList.add("dropdown_item");
+ div.classList.add("list-group-item");
this.dropdown_count++;
const label = document.createElement("H5")
label.appendChild(document.createTextNode(node['name']))
}
makeSidebarNetwork(net_name, color, net_id){
- const newNet = document.createElement("li");
const colorBlob = document.createElement("div");
- colorBlob.className = "colorblob";
- const textContainer = document.createElement("p");
- textContainer.className = "network_innertext";
- newNet.id = net_id;
+ colorBlob.className = "square-20 rounded-circle";
+ colorBlob.style['background'] = color;
+
+ const textContainer = document.createElement("span");
+ textContainer.className = "ml-2";
+ textContainer.appendChild(document.createTextNode(net_name));
+
+ const timesIcon = document.createElement("i");
+ timesIcon.classList.add("fas", "fa-times");
+
const deletebutton = document.createElement("button");
- deletebutton.className = "btn btn-danger";
- deletebutton.style = "float: right; height: 20px; line-height: 8px; vertical-align: middle; width: 20px; padding-left: 5px;";
- deletebutton.appendChild(document.createTextNode("X"));
+ deletebutton.className = "btn btn-danger ml-auto square-20 p-0 d-flex justify-content-center";
+ deletebutton.appendChild(timesIcon);
deletebutton.addEventListener("click", function() { this.createDeleteDialog(net_id); }.bind(this), false);
- textContainer.appendChild(document.createTextNode(net_name));
- colorBlob.style['background'] = color;
+
+ const newNet = document.createElement("li");
+ newNet.classList.add("list-group-item", "d-flex", "bg-light");
+ newNet.id = net_id;
newNet.appendChild(colorBlob);
newNet.appendChild(textContainer);
+
if( net_name != "public" ) {
newNet.appendChild(deletebutton);
}
const result_button = document.createElement("a");
const obj = this.items[id];
const result_text = this.generate_element_text(obj);
- result_button.appendChild(document.createTextNode(result_text));
- result_button.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
+ result_entry.classList.add("list-group-item", "list-group-item-action");
+ result_entry.innerText = result_text;
+ result_entry.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); };
const tooltip = document.createElement("span");
const tooltiptext = document.createTextNode(result_text);
tooltip.appendChild(tooltiptext);
- tooltip.setAttribute('class', 'entry_tooltip');
- result_button.appendChild(tooltip);
- result_entry.appendChild(result_button);
+ tooltip.classList.add("d-none");
+ result_entry.appendChild(tooltip);
drop.appendChild(result_entry);
}
const element_entry_text = this.generate_element_text(item);
- list_html += '<div class="list_entry">'
- + '<p class="added_entry_text">'
+ list_html += '<div class="border rounded mt-2 w-100 d-flex align-items-center pl-2">'
+ element_entry_text
- + '</p>'
+ '<button onclick="searchable_select_multiple_widget.remove_item('
+ item_id
- + ')" class="btn-remove btn">remove</button>';
+ + ')" class="btn btn-danger ml-auto">Remove</button>';
list_html += '</div>';
}
added_list.innerHTML = list_html;
{% extends "base.html" %}
{% block content %}
<h2>Bookings I Own</h2>
- <div class="card_container">
- {% for booking in bookings %}
- <div class="card">
- <div class="card-header">
- <h3>Booking {{booking.id}}</h3>
- </div>
- <div class="card-body">
- <ul class="list-group">
- <li class="list-group-item">id: {{booking.id}}</li>
- <li class="list-group-item">lab: {{booking.lab}}</li>
- <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
- <li class="list-group-item">start: {{booking.start}}</li>
- <li class="list-group-item">end: {{booking.end}}</li>
- <li class="list-group-item">purpose: {{booking.purpose}}</li>
- </ul>
- </div>
- <div class="card-footer d-flex">
- <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a>
- <button
- class="btn btn-danger"
- onclick='cancel_booking({{booking.id}});'
- data-toggle="modal"
- data-target="#resModal"
- >Cancel</button>
+ <div class="row">
+ {% for booking in bookings %}
+ <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Booking {{booking.id}}</h3>
+ </div>
+ <div class="card-body">
+ <ul class="list-group">
+ <li class="list-group-item">id: {{booking.id}}</li>
+ <li class="list-group-item">lab: {{booking.lab}}</li>
+ <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
+ <li class="list-group-item">start: {{booking.start}}</li>
+ <li class="list-group-item">end: {{booking.end}}</li>
+ <li class="list-group-item">purpose: {{booking.purpose}}</li>
+ </ul>
+ </div>
+ <div class="card-footer d-flex">
+ <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a>
+ <button
+ class="btn btn-danger"
+ onclick='cancel_booking({{booking.id}});'
+ data-toggle="modal"
+ data-target="#resModal"
+ >Cancel</button>
+ </div>
+ </div>
</div>
- </div>
- {% endfor %}
+ {% endfor %}
</div>
<h2>Bookings I Collaborate On</h2>
- <div class="card_container">
+ <div class="row">
{% for booking in collab_bookings %}
- <div class="card">
- <div class="card-header">
- <h3>Booking {{booking.id}}</h3>
- </div>
- <div class="card-body">
- <ul class="list-group">
- <li class="list-group-item">id: {{booking.id}}</li>
- <li class="list-group-item">lab: {{booking.lab}}</li>
- <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
- <li class="list-group-item">start: {{booking.start}}</li>
- <li class="list-group-item">end: {{booking.end}}</li>
- <li class="list-group-item">purpose: {{booking.purpose}}</li>
- </ul>
- </div>
- <div class="card-footer d-flex">
- <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
+ <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Booking {{booking.id}}</h3>
+ </div>
+ <div class="card-body">
+ <ul class="list-group">
+ <li class="list-group-item">id: {{booking.id}}</li>
+ <li class="list-group-item">lab: {{booking.lab}}</li>
+ <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
+ <li class="list-group-item">start: {{booking.start}}</li>
+ <li class="list-group-item">end: {{booking.end}}</li>
+ <li class="list-group-item">purpose: {{booking.purpose}}</li>
+ </ul>
+ </div>
+ <div class="card-footer d-flex">
+ <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
+ </div>
</div>
</div>
{% endfor %}
</div>
- <h2>Expired Bookings
- <i class="fa fa-fw fa-caret-down" onclick='toggle_display("expired_bookings");'></i>
- </h2>
- <div id="expired_bookings" class="card_container" style="display:none;">
- {% for booking in expired_bookings %}
- <div class="card">
- <div class="card-header">
- <h3>Booking {{booking.id}}</h3>
- </div>
- <div class="card-body">
- <ul class="list-group">
- <li class="list-group-item">id: {{booking.id}}</li>
- <li class="list-group-item">lab: {{booking.lab}}</li>
- <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
- <li class="list-group-item">start: {{booking.start}}</li>
- <li class="list-group-item">end: {{booking.end}}</li>
- <li class="list-group-item">purpose: {{booking.purpose}}</li>
- <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li>
- </ul>
- </div>
- <div class="card-footer d-flex">
- <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
+ <a href="#expired_bookings" data-toggle="collapse" class="h2 discrete-a">
+ Expired Bookings
+ <i class="fas fa-angle-down rotate"></i>
+ </a>
+ <div id="expired_bookings" class="row collapse">
+ {% for booking in expired_bookings %}
+ <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Booking {{booking.id}}</h3>
+ </div>
+ <div class="card-body">
+ <ul class="list-group">
+ <li class="list-group-item">id: {{booking.id}}</li>
+ <li class="list-group-item">lab: {{booking.lab}}</li>
+ <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
+ <li class="list-group-item">start: {{booking.start}}</li>
+ <li class="list-group-item">end: {{booking.end}}</li>
+ <li class="list-group-item">purpose: {{booking.purpose}}</li>
+ <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li>
+ </ul>
+ </div>
+ <div class="card-footer d-flex">
+ <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
+ </div>
+ </div>
</div>
- </div>
- {% endfor %}
+ {% endfor %}
</div>
<script>
var current_booking_id = -1;
function cancel_booking(booking_id) {
current_booking_id = booking_id;
- document.getElementById('modal_warning').style['max-height'] = '0px';
}
function submit_cancel_form() {
req.onerror = function() { alert("problem submitting form"); }
req.send(formData);
}
-
- function toggle_display(elem_id){
- var e = document.getElementById(elem_id);
- if (e.style.display === "none"){
- e.style.display = "grid";
- } else {
- e.style.display = "none";
- }
- }
</script>
-<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Cancel Booking?</h4>
- <p>Everthing on your machine(s) will be lost</p>
+ <h4 class="modal-title d-inline float-left">Cancel Booking?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<form id="booking_cancel_form">
{% csrf_token %}
</form>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Cancel Booking</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
- <h3>Are You Sure?</h3>
- <p>This cannot be undone</p>
- <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
- <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button>
+ <div class="modal-footer d-flex flex-column">
+ <p>Everything on your machine(s) will be lost</p>
+ <div class="mb-2">
+ <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="#warning">Cancel Booking</button>
+ </div>
+ <div class="collapse w-100 text-center border-top" id="warning">
+ <div class="p-4">
+ <h3>Are You Sure?</h3>
+ <p>This cannot be undone</p>
+ <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
+ <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button>
+ </div>
</div>
</div>
</div>
{% extends "base.html" %}
{% block content %}
-<div class="card_container">
+<div class="row">
{% for config in configurations %}
- <div class="card">
- <div class="card-header">
- <h3>Configuration {{config.id}}</h3>
- </div>
- <div class="card-body">
- <ul class="list-group">
- <li class="list-group-item">id: {{config.id}}</li>
- <li class="list-group-item">name: {{config.name}}</li>
- <li class="list-group-item">description: {{config.description}}</li>
- <li class="list-group-item">resource: {{config.bundle}}</li>
- </ul>
- </div>
- <div class="card-footer">
- <button
- class="btn btn-danger w-100"
- onclick='delete_config({{config.id}});'
- data-toggle="modal"
- data-target="#configModal"
- >Delete</button>
+ <div class="p-2 col-12 col-md-6 col-lg-4 col-xl-3">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Configuration {{config.id}}</h3>
+ </div>
+ <div class="card-body">
+ <ul class="list-group">
+ <li class="list-group-item">id: {{config.id}}</li>
+ <li class="list-group-item">name: {{config.name}}</li>
+ <li class="list-group-item">description: {{config.description}}</li>
+ <li class="list-group-item">resource: {{config.bundle}}</li>
+ </ul>
+ </div>
+ <div class="card-footer">
+ <button
+ class="btn btn-danger w-100"
+ onclick='delete_config({{config.id}});'
+ data-toggle="modal"
+ data-target="#configModal"
+ >Delete</button>
+ </div>
</div>
</div>
{% endfor %}
var current_config_id = -1;
function delete_config(config_id) {
current_config_id = config_id;
- document.getElementById('modal_warning').style['max-height'] = '0px';
}
function submit_delete_form() {
req.send(formData);
}
</script>
-<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Configuration?</h4>
+ <h4 class="modal-title d-inline float-left">Delete Configuration?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<form id="config_delete_form">
{% csrf_token %}
</form>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
- <h3>Are You Sure?</h3>
- <p>This cannot be undone</p>
- <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
- <button class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ <div class="modal-footer d-flex flex-column">
+ <div class="mb-2">
+ <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="#warning">Delete</button>
</div>
+ <div class="collapse w-100 text-center border-top" id="warning">
+ <div class="p-4">
+ <h3>Are You Sure?</h3>
+ <p>This cannot be undone</p>
+ <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
+ <button class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
{% extends "base.html" %}
{% block content %}
<h2>Images I Own</h2>
-<div class="card_container">
+<div class="row">
{% for image in images %}
- <div class="card">
- <div class="card-header">
- <h3>Image {{image.id}}</h3>
- </div>
- <div class="card-body">
- <ul class="list-group">
- <li class="list-group-item">id: {{image.id}}</li>
- <li class="list-group-item">lab: {{image.from_lab.name}}</li>
- <li class="list-group-item">name: {{image.name}}</li>
- <li class="list-group-item">description: {{image.description}}</li>
- <li class="list-group-item">host profile: {{image.host_type.name}}</li>
- </ul>
- </div>
- <div class="card-footer">
- <button
- class="btn btn-danger w-100"
- onclick='delete_image({{image.id}});'
- data-toggle="modal"
- data-target="#imageModal"
- >Delete</button>
- </div>
- </div>
-{% endfor %}
-</div>
-<h2>Public Images</h2>
-<div class="card_container">
- {% for image in public_images %}
- <div class="card">
+ <div class="p-2 col-12 col-md-6 col-lg-4 col-xl-3">
+ <div class="card h-100">
<div class="card-header">
<h3>Image {{image.id}}</h3>
</div>
<li class="list-group-item">host profile: {{image.host_type.name}}</li>
</ul>
</div>
+ <div class="card-footer">
+ <button class="btn btn-danger w-100" onclick='delete_image({{image.id}});'
+ data-toggle="modal" data-target="#imageModal">
+ Delete
+ </button>
+ </div>
+ </div>
+ </div>
+{% endfor %}
+</div>
+<h2>Public Images</h2>
+<div class="row">
+ {% for image in public_images %}
+ <div class="p-2 col-12 col-md-6 col-lg-4 col-xl-3">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Image {{image.id}}</h3>
+ </div>
+ <div class="card-body">
+ <ul class="list-group">
+ <li class="list-group-item">id: {{image.id}}</li>
+ <li class="list-group-item">lab: {{image.from_lab.name}}</li>
+ <li class="list-group-item">name: {{image.name}}</li>
+ <li class="list-group-item">description: {{image.description}}</li>
+ <li class="list-group-item">host profile: {{image.host_type.name}}</li>
+ </ul>
+ </div>
+ </div>
</div>
{% endfor %}
</div>
var used_images = {{used_images|safe|default:"{}"}};
function delete_image(image_id) {
current_image_id = image_id;
- document.getElementById('modal_warning').style['max-height'] = '0px';
var warning_header = document.getElementById("warning_header");
var warning_text = document.getElementById("warning_text");
var delete_image_button = document.getElementById("final_delete_b");
}
}
</script>
-<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Configuration?</h4>
+ <h4 class="modal-title d-inline float-left">Delete Configuration?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<form id="image_delete_form">
{% csrf_token %}
</form>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
- <h3 id="warning_header">Are You Sure?</h3>
- <p id="warning_text">This cannot be undone</p>
- <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
- <button id="final_delete_b" class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ <div class="modal-footer d-flex flex-column">
+ <div class="mb-2">
+ <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="#warning">Delete</button>
</div>
+ <div class="collapse w-100 text-center border-top" id="warning">
+ <div class="p-4">
+ <h3 id="warning_header">Are You Sure?</h3>
+ <p id="warning_text">This cannot be undone</p>
+ <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
+ <button id="final_delete_b" class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
{% extends "base.html" %}
{% block content %}
-<div class="card_container">
+<div class="row">
{% for resource in resources %}
- <div class="card">
- <div class="card-header">
- <h3>Resource {{resource.id}}</h3>
- </div>
- <div class="card-body p-4">
- <ul class="list-group">
- <li class="list-group-item">id: {{resource.id}}</li>
- <li class="list-group-item">name: {{resource.name}}</li>
- <li class="list-group-item">description: {{resource.description}}</li>
- </ul>
- </div>
- <div class="card-footer">
- <button
- class="btn btn-danger w-100"
- onclick='delete_resource({{resource.id}});'
- data-toggle="modal"
- data-target="#resModal"
- >Delete</button>
+ <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Resource {{resource.id}}</h3>
+ </div>
+ <div class="card-body p-4">
+ <ul class="list-group">
+ <li class="list-group-item">id: {{resource.id}}</li>
+ <li class="list-group-item">name: {{resource.name}}</li>
+ <li class="list-group-item">description: {{resource.description}}</li>
+ </ul>
+ </div>
+ <div class="card-footer">
+ <button
+ class="btn btn-danger w-100"
+ onclick='delete_resource({{resource.id}});'
+ data-toggle="modal"
+ data-target="#resModal"
+ >Delete</button>
+ </div>
</div>
</div>
{% endfor %}
warning_title.appendChild(title);
warning_text.appendChild(text);
- document.getElementById('modal_warning').style['max-height'] = '0px';
}
function list_configs(configs) {
req.send(formData);
}
</script>
-<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Resource?</h4>
+ <h4 class="modal-title d-inline float-left">Delete Resource?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<form id="res_delete_form">
{% csrf_token %}
</form>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
- <h3 id="config_warning">Are You Sure?</h3>
- <p id="warning_subtext">This cannot be undone</p>
- <ul id="config_list"></ul>
- <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
- <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ <div class="modal-footer d-flex flex-column">
+ <div class="mb-2">
+ <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="#warning">Delete</button>
</div>
+ <div class="collapse w-100 text-center border-top" id="warning">
+ <div class="p-4">
+ <h3 id="config_warning">Are You Sure?</h3>
+ <p id="warning_subtext">This cannot be undone</p>
+ <ul id="config_list"></ul>
+ <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
+ <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
Generate
</a>
</p>
- <p style="word-wrap: break-word;">{{ token.key }}</p>
+ <p class="text-break">{{ token.key }}</p>
<p></p>
{% buttons %}
<!-- Custom CSS -->
-<link href="{% static "css/detail_view.css" %}" rel="stylesheet">
<link href="{% static "css/base.css" %}" rel="stylesheet">
<script type="text/javascript">
function cwf(type) {
function continue_wf() {
window.location.replace("/wf/");
}
-
- function toggle_create_drop() {
- drop_div = document.getElementById("create_drop");
-
- if (drop_div.style.display === "none") {
- drop_div.style.display = "inherit";
- } else {
- drop_div.style.display = "none";
- }
- }
</script>
-<style>
- .navbar {
- min-width: 200px;
- }
-
- .create_drop {
- display: none;
- width: 100%;
- }
-
- .create_drop button {
- width: 100%;
- }
-
- .drop_btn {
- border-radius: 0px;
- background-color: CCCCCC
- }
-
- .drop_btn:hover {
- color: #555;
- border-top: 1px solid #E7E7E7;
- border-bottom: 1px solid #E7E7E7;
- }
-
- #wrapper {
- height: 100vh;
- }
-</style>
{% endblock %}
{% block basecontent %}
<div id="wrapper" class="d-flex flex-column">
<!-- Navigation -->
- <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0" role="navigation" style="margin-bottom: 0">
- <div class="container-fluid">
- <div class="col order-2 order-lg-1 text-center text-lg-left">
+ <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0 mb-0" role="navigation">
+ <div class="container-fluid pb-2 pb-sm-0">
+ <!-- Logo -->
+ <div class="col-12 col-sm order-1 order-sm-2 text-center text-lg-left">
<a href="https://www.opnfv.org/" class="navbar-brand">
<img src="{% static "img/opnfv-logo.png" %}">
</a>
- <a class="navbar-brand" href={% url 'dashboard:index' %}>
+ <a class="navbar-brand d-none d-lg-inline" href={% url 'dashboard:index' %}>
Pharos Dashboard
</a>
</div>
- <!-- /.navbar-header -->
- <div class="col-2 order-1 order-lg-3 d-lg-none">
- <button class="btn border" type="button" data-toggle="collapse" data-target="#sidebar"
+ <!-- Sidebar button -->
+ <div class="col-6 col-sm-2 d-flex order-1 order-lg-3 d-lg-none">
+ <button class="btn border mx-auto" type="button" data-toggle="collapse" data-target="#sidebar"
aria-expanded="false" aria-controls="sidebar">
- <i class="fas fa-bars"></i>
+ <i class="fas fa-bars d-inline"></i>
</button>
</div>
- <div class="col-2 order-3">
- <ul class="nav ml-auto">
+ <!-- Login dropdown -->
+ <div class="col-6 col-sm-2 order-3 d-flex">
+ <ul class="nav mx-auto mr-sm-0">
<li class="dropdown ml-auto">
<a class="nav-link p-0 text-dark p-2" data-toggle="dropdown" href="#">
{% if request.user.username %}
Login with Jira
</a>
{% endif %}
- </div> <!-- End dropdown-menu -->
- </li> <!-- End dropdown -->
+ </div>
+ </li>
</ul>
- </div> <!-- End top right account menu -->
+ </div>
</div>
</nav>
- <!-- /.navbar-top-links -->
<!-- Page Content -->
- <div class="container-fluid d-lg-flex flex-lg-grow-1 px-0">
- <div class="row h-100 w-100 mx-0">
+ <div class="container-fluid d-flex flex-grow-1 px-0 align-items-start flex-column">
+ <div class="row flex-grow-1 w-100 mx-0 align-content-start flex-lg-grow-1">
<div class="col-12 col-lg-auto px-0 border-right border-left bg-light" role="navigation">
- <nav class="navbar navbar-expand-lg border-bottom p-0 w-100">
+ <nav class="navbar navbar-expand-lg border-bottom p-0 w-100 sidebar">
<div class="collapse navbar-collapse" id="sidebar">
<div class="list-group list-group-flush w-100 bg-light">
<a href="/" class="list-group-item list-group-item-action bg-light">
<a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action bg-light">
Booking Statistics
</a>
- <!-- <a href="{% url 'account:my-account' %}" class="list-group-item list-group-item-action bg-light">
- Account
- </a> -->
<a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
href="#accountList" role="button">
Account <i class="fas fa-angle-down rotate"></i>
</div>
</div>
</nav>
- <!--/.well -->
</div>
- <!--/span-->
-
- <div class="col flex-grow-1 d-flex flex-column">
+ <div class="col overflow-auto flex-grow-1 d-flex flex-column h-100">
{% if title %}
<div class="row flex-shrink-1">
<div class="col-lg-12">
<h1 class="page-header">{{ title }}</h1>
</div>
- <!-- /.col-lg-12 -->
</div>
{% endif %}
<div id="bsm">{% bootstrap_messages %}</div>
{% block content %}
{% endblock content %}
</div>
- <!--/span-->
-
-
</div>
- <!--/row-->
</div>
- <!-- /#page-wrapper -->
</div>
-<!-- /#wrapper -->
{% endblock basecontent %}
<div id='calendar'>
</div>
</div>
- <!-- /.panel-body -->
</div>
- <!-- /.panel -->
</div>
</div>
{% block extrahead %}
{{block.super}}
-<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
+ <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
{% endblock %}
{% block content %}
-<style>
-#modal_warning {
- transition: max-height 0.5s ease-out;
- overflow: hidden;
-}
-
-</style>
-
<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 style="display: inline;">Overview</h4>
+ <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="card-body collapse show" id="panel_overview">
- <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 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 style="display: inline;">Pod</h4>
+ <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="card-body collapse show" id="pod_panel">
- <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
- style="margin-left:10px;"
- class="btn btn-primary"
- 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>
- <style>
- .borderless td {
- border: none !important;
- }
- </style>
- <table class="table">
- {% for intprof in host.profile.interfaceprofile.all %}
- <tr>
- <td>
- <table class="table borderless">
+ <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>Name:</td>
- <td>{{intprof.name}}</td>
+ <td>Cores:</td>
+ <td>{{host.profile.cpuprofile.first.cores}}</td>
</tr>
<tr>
- <td>Speed:</td>
- <td>{{intprof.speed}}</td>
+ <td>Sockets:</td>
+ <td>{{host.profile.cpuprofile.first.cpus}}</td>
</tr>
</table>
- </td>
- </tr>
- {% endfor %}
- </table>
- </td>
- </tr>
- </table>
- </td>
- {% endfor %}
- </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 class="col">
<div class="card mb-4">
<div class="card-header d-flex">
- <h4 style="display: inline;">Deployment Progress</h4>
- <p style="display: inline; margin-left: 10px;"> These are the different tasks that have to be completed before your deployment is ready</p>
+ <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="card-body collapse show" id="panel_tasks">
- <table class="table">
- <style>
- .progress {
- display: inline-block;
- border: 3px solid #f3f3f3;
- border-radius: 50%;
- border-top: 3px solid #12aebb;
- width: 20px;
- height: 20px;
- -webkit-animation: spin 2s linear infinite; /* Safari */
- animation: spin 2s linear infinite;
- }
-
- @keyframes spin {
- 0% {transform: rotate(0deg);}
- 100% {transform: rotate(360deg);}
- }
-
- .new {
- display: inline-block;
- width: 20px;
- height: 20px;
- background: #f3f3f3;
- border-radius: 50%;
- animation: fadeInOut 1s infinite alternate;
-
- }
- @keyframes fadeInOut {
- from { opacity: 0;}
- }
- .done {
- display: inline-block;
- width: 20px;
- height: 20px;
- background: #40B976;
- border-radius: 50%;
- }
- </style>
- <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="new"></div>
- {% elif task.status < 200 %}
- <div class="progress"></div>
- {% else %}
- <div class="done"></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 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 style="display: inline;">PDF</h4>
+ <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="card-body collapse show" id="pdf_panel" style="padding: 0px;">
- <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 15px; border: none;">
- {{pdf}}
- </pre>
+ <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="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="exampleModalLabel" style="display: inline; float: left;">Host Image</h4>
+ <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 class="modal-body">
<form id="image_host_form">
{% csrf_token %}
- <select class="form-control" style="width: 80%; margin-left: 10%" id="image_select" name="image_id">
+ <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">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Reset Host</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
+ <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" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
+ <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>
dropdown.options.add(opt);
}
- document.getElementById("modal_warning").style['max-height'] = '0px';
+ document.getElementById("modal_warning").classList.add("collapse");
}
function submit_image_form() {
{% load staticfiles %}
{% load bootstrap4 %}
{% block content %}
-<style>
- .grid_container {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- padding: 30px;
- }
- .grid_element {
- border-radius: 5px;
- border: 1px solid #ccc;
- margin: 10px;
- padding: 7px;
- }
- .grid_element_wide {
- grid-column-start: span 12;
- }
- .grid_element_half {
- grid-column-start: span 6;
- }
- .grid_element_1third {
- grid-column-start: span 4;
- }
- .grid_element_2third {
- grid-column-start: span 8;
- }
- .collaborator_pane {
- display: flex;
- flex-direction: column;
- }
- #id_length {
- -moz-appearance: none;
- border: none;
- box-shadow: none;
- }
-
- input[type=range]::-moz-range-track {
- background: #cccccc;
- }
- .grid_element {
- overflow: hidden;
- }
-</style>
{% bootstrap_form_errors form type='non_fields' %}
<form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
-{% csrf_token %}
-<div class="grid_container">
-<div class="grid_element host_select_pane grid_element_wide">
-<p>Please select a host type you wish to book. Only available types are shown.</p>
-{% bootstrap_field form.filter_field show_label=False %}
-</div>
-<div class="grid_element booking_info_pane grid_element_1third">
- {% bootstrap_field form.purpose %}
- {% bootstrap_field form.project %}
- {% bootstrap_field form.length %}
- <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
- <script>
- document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
- document.getElementById("daysout").value = document.getElementById("id_length").value;
- </script>
-</div>
-<div class="grid_element collaborator_pane grid_element_1third">
- <label>Collaborators</label>
- {{ form.users }}
-</div>
-<div class="grid_element_1third">
- <div class="configuration_pane grid_element">
- {% bootstrap_field form.hostname %}
- {% bootstrap_field form.image %}
- </div>
- <div class="configuration_pane grid_element">
- <strong>OPNFV: (Optional)</strong>
- {% bootstrap_field form.installer %}
- {% bootstrap_field form.scenario %}
+ {% csrf_token %}
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-12 px-1 my-2">
+ <div class="col py-2 rounded border">
+ <p>Please select a host type you wish to book. Only available types are shown.</p>
+ {% bootstrap_field form.filter_field show_label=False %}
+ </div>
+ </div>
+ <div class="col-12 col-lg-3 px-1 my-2">
+ <div class="col border rounded py-2 h-100">
+ {% bootstrap_field form.purpose %}
+ {% bootstrap_field form.project %}
+ {% bootstrap_field form.length %}
+ <span>Days: </span><output id="daysout">0</output>
+ <script>
+ document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
+ document.getElementById("daysout").value = document.getElementById("id_length").value;
+ </script>
+ </div>
+ </div>
+ <div class="col-12 col-lg-3 px-1 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 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 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">
+ <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
+ </div>
+ </div>
</div>
-</div>
-</div>
-<script type="text/javascript">
+</form>
+<script type="text/javascript">
function submit_form()
{
//formats data for form submission
multi_filter_widget.finish();
+ // Submit the form manually since confirm button is type="button" now
+ // due to the form submitting before the data was even created by finish()
+ document.getElementById("quick_booking_form").submit();
}
function hide_dropdown(drop_id) {
if ( drop.options[i].text == '---------' )
drop.selectedIndex = i;
}
-
- //cross browser hide children
- $('#id_image').children().hide();
- for( var i = 0; i < drop.childNodes.length; i++ )
- {
- drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright
- }
}
function get_selected_value(key){
if(!(attr in {}) )
return attr;
}
- return null;
}
- var sup_image_dict = {{ image_filter|safe }};
- var sup_installer_dict = {{ installer_filter|safe }};
- var sup_scenario_dict = {{ scenario_filter|safe }};
+ var sup_image_dict = {{image_filter | safe}};
+ var sup_installer_dict = {{installer_filter | safe}};
+ var sup_scenario_dict = {{scenario_filter | safe}};
function imageHider() {
var drop = document.getElementById("id_image");
var lab_pk = get_selected_value("lab");
var host_pk = get_selected_value("host");
- for ( var i=0; i < drop.childNodes.length; i++ )
- {
- var image_object = sup_image_dict[drop.childNodes[i].value];
- if( image_object ) //weed out empty option
+ for (const childNode of drop.childNodes) {
+ var image_object = sup_image_dict[childNode.value];
+ if (image_object) //weed out empty option
{
- if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
- {
- drop.childNodes[i].style.display = "inherit";
- drop.childNodes[i].disabled = false;
+ if (image_object.host_profile == host_pk && image_object.lab == lab_pk) {
+ childNode.style.display = "inherit";
+ childNode.disabled = false;
}
}
}
$('#id_scenario').children().hide();
- Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
+ Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
element.addEventListener('click', imageHider);
});
}
for (var i = 0; i < dropdown.childNodes.length; i++) {
- if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {}) ) {
+ if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
dropdown.childNodes[i].style.display = "inherit";
dropdown.childNodes[i].disabled = false;
}
}
}
</script>
- <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button>
-</form>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
{% block content %}
<div class="container-fluid">
<div class="row">
- <div class="col">
+ <div class="col-auto">
<p>Number of days to plot: </p>
- <div class="form-group">
- <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
- <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button>
+ <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>
+++ /dev/null
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<style>
- #form_div {
- width: 100%;
- padding: 5%;
- text-align: center;
- }
-</style>
-
-<div id="form_div">
-<p>confirm booking</p>
-<p>{{info|default:"booking info"}}</p>
-<form action="/wf/workflow/" method="post">
- {% csrf_token %}
- {{form|default:"<p> No Form Loaded</p>"}}
- <input type="submit" value="Submit" style="display: none;"/>
-</form>
-</div>
-{% endblock content %}
\ No newline at end of file
{% block content %}
-<style>
- .bkmeta_panel {
- padding: 5%;
- }
-
- .bkcontrib_panel {
- display: flex;
- flex-direction: column;
- }
-
- .bkcontrib_panel > .form-group {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
-
- .panel{
- padding: 5%;
- /*border: solid 1px black;*/
- }
-
- .panel_wrap {
- width: 100%;
- display: grid;
- grid-template-columns: 45% 10% 45%;
- border: none;
- }
-
- #id_length {
- -moz-appearance: none;
- border: none;
- box-shadow: none;
- }
- input[type=range]::-moz-range-track {
- background: #cccccc;
- }
-</style>
-
{% bootstrap_form_errors form type='non_fields' %}
<form id="booking_meta_form" action="/wf/workflow/" method="POST" class="form">
{% csrf_token %}
-<div id="form_div">
- <div class="panel_wrap">
- <div class="panel bkmeta_panel">
- {% bootstrap_field form.purpose %}
- {% bootstrap_field form.project %}
- {% bootstrap_field form.length %}
- <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
- <script>
- document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
- document.getElementById("daysout").value = document.getElementById("id_length").value;
- </script>
- {% bootstrap_field form.info_file %}
- <p>You must provide a url to your project's INFO.yaml file if you are a PTL and you are trying to book a POD with multiple servers in it.</p>
- {% bootstrap_field form.deploy_opnfv %}
- </div>
- <div class="panel panel_center">
- </div>
- <div class="panel bkcontrib_panel">
- <p>You may add collaborators on your booking to share resources with coworkers.</p>
- {% bootstrap_field form.users label="Collaborators" %}
+<div id="form_div" class="container-fluid">
+ <div class="row">
+ <div class="p-4 col">
+ {% bootstrap_field form.purpose %}
+ {% bootstrap_field form.project %}
+ {% bootstrap_field form.length %}
+ <span>Days: </span><output id="daysout">0</output>
+ <script>
+ document.getElementById("id_length").oninput = function() { daysout.value=this.value; }
+ document.getElementById("daysout").value = document.getElementById("id_length").value;
+ </script>
+ {% bootstrap_field form.info_file %}
+ <p>You must provide a url to your project's INFO.yaml file if you are a PTL and you are trying to book a POD with multiple servers in it.</p>
+ {% bootstrap_field form.deploy_opnfv %}
+ </div>
+ <div class="p-4 col">
+ <p>You may add collaborators on your booking to share resources with coworkers.</p>
+ {% bootstrap_field form.users label="Collaborators" %}
+ </div>
</div>
-
- {% buttons %}
- <button type="submit" style="display: none;" class="btn btn-success">Confirm</button>
- {% endbuttons %}
+ <div class="panel_wrap">
+ {% buttons %}
+ <button type="submit" class="btn btn-success d-none">Confirm</button>
+ {% endbuttons %}
</div>
</div>
</form>
+++ /dev/null
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<style>
- #resource_form_div {
- width: 100%;
- padding: 5%;
- }
-
- .panel {
- /*border: solid 1px black;*/
- border: none;
- }
- .select_panels {
- width: 100%;
- display: grid;
- grid-template-columns: 45% 10% 45%;
-
- }
-
- .panel_center {
- text-align: center;
- border: none;
-
-
- }
- .panel_center p{
- font-size: 20pt;
- }
-</style>
-
-<div id="resource_form_div">
- <div class="select_panels">
- <div class="panel_chooser panel">
- <form id="resource_select_form" method="post" action="" class="form" id="resourceselectorform">
- {% csrf_token %}
- {{ form|default:"<p>no form loaded</p>" }}
- {% buttons %}
-
- {% endbuttons %}
- </form>
- </div>
- <div class="panel_center panel"><p>OR</p></div>
- <div class="panel_add panel">
- <button class="btn {% if disabled %} disabled {% endif %}"
- style="width: 100%; height: 100%;"
- {% if not disabled %}onclick="parent.add_wf(1)"
- {% endif %}>Create Resource</button>
- </div>
-
-</div>
-</div>
-<script>
- {% if disabled %}
- disable();
- {% endif %}
-</script>
-
-{% endblock content %}
-{% block onleave %}
-var form = $("#resource_select_form");
-var formData = form.serialize();
-var req = new XMLHttpRequest();
-req.open("POST", "/wf/workflow/", false);
-req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-req.onerror = function() { alert("problem with form submission"); }
-req.send(formData);
-{% endblock %}
-
+++ /dev/null
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<style>
- #sw_form_div {
- width: 100%;
- padding: 5%;
- }
-
- .panel {
- /*border: solid 1px black;*/
- border: none;
- }
- .select_panels {
- width: 100%;
- display: grid;
- grid-template-columns: 45% 10% 45%;
-
- }
-
- .panel_center {
- text-align: center;
- border: none;
-
-
- }
- .panel_center p{
- font-size: 20pt;
- }
-</style>
-
-<div id="sw_form_div">
- <div class="select_panels">
- <div class="panel_chooser panel">
- <form id="software_select_form" method="post" action="" class="form" id="swselectorform">
- {% csrf_token %}
- {{ form|default:"<p>no form loaded</p>" }}
- {% buttons %}
-
- {% endbuttons %}
- </form>
- </div>
- <div class="panel_center panel"><p>OR</p></div>
- <div class="panel_add panel">
- <button class="btn {% if disabled %} disabled {% endif %}"
- style="width: 100%; height: 100%;"
- {% if not disabled %}onclick="parent.add_wf(2)"
- {% endif %}>Create Config</button>
- </div>
- <script>
- {% if disabled %}
- disable();
- {% endif %}
- </script>
-
-</div>
-</div>
-
-{% endblock content %}
-
-{% block onleave %}
-var form = $("#software_select_form");
-var formData = form.serialize();
-var req = new XMLHttpRequest();
-req.open("POST", "/wf/workflow/", false);
-req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-req.onerror = function() { alert("problem with form submission"); }
-req.send(formData);
-{% endblock %}
{% block content %}
{% if error %}
- <h1 style="text-align:center;">{{ error }}</h1>
+ <h1 class="text-center">{{ error }}</h1>
{% else %}
-<div style="padding: 5%;">
+<div class="p-2">
<form method="post" action="" class="form" id="table_formset">
{% csrf_token %}
{% block content %}
-<style>
- #page-wrapper {
- display: flex;
- flex-direction: column;
- }
-
- #{{select_type}}_form_div div {
- }
-
- #{{select_type}}_form_div > * {
- margin-left: 10px;
- margin-right: 10px;
- margin-bottom: 20px;
- }
-
- #{{select_type}}_form_div div * {
- }
-
- #{{select_type}}_form_div {
- flex: 1;
- margin: 30px;
- display: flex;
- flex-direction: column;
- }
-
- #select_section {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
-
- #{{select_type}}_select_form {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
-
- .autocomplete {
- flex: 1;
- }
-
- #create_section {
- }
-
- #select_header_section {
- }
-
- h3 {
- margin-top: 0;
- margin-bottom: 0;
- vertical-align: middle;
- }
-
- .divider {
- border-top: 1px solid #ccc;
- }
-
-
-</style>
-
-<div id="{{select_type}}_form_div">
+<div id="{{select_type}}_form_div" class="h-100 border d-flex flex-column p-4">
<h3 id="create_section">Create a Resource
<button class="btn btn-primary {% if disabled %} disabled {% endif %}"
{% if not disabled %}onclick="parent.add_wf({{addable_type_num}})"
{% endif %}>Here
</button>
</h3>
- <div class="divider"></div>
+ <div class="border-top"></div>
<h3 id="select_header_section">Or select from the list below:</h3>
- <div id="select_section">
- <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform">
+ <div id="select_section" class="d-flex flex-column">
+ <form id="{{select_type}}_select_form" method="post" action=""
+ class="form d-flex flex-column" id="{{select_type}}selectorform">
{% csrf_token %}
{{ form|default:"<p>no form loaded</p>" }}
{% buttons %}
+++ /dev/null
-{% extends "base.html" %}
-{% load staticfiles %}
-{% if script %} <script>{{ script }}</script> {% endif %}
-{% block content %}
- {% for item in grid_items %}
- <div class="grid-item" style="border:2px; border-style:solid; border-color:black; margin:3px">
- {{ item }}
- </div>
- {% endfor %}
-{% endblock content %}
}
);
</script>
-
<style media="screen">
@media screen and (min-width: 0px) and (max-width: 767px)
<div class="col-lg-4">
<div class="card my-2">
<div class="card-header d-flex">
- <h4>Lab Profile</h4>
- <button class="btn btn-outline-secondary ml-auto" data-toggle="collapse" data-target="#panel_overview">Expand</button>
+ <h4>Lab Profile</h4>
+ <button class="btn btn-outline-secondary ml-auto" data-toggle="collapse" data-target="#panel_overview">Expand</button>
</div>
- <div id="panel_overview" class="card-body collapse show">
- <table class="table">
- <tr>
- <td>Lab Name: </td><td>{{lab.name}}</td>
- </tr>
- <tr>
- <td>Lab Location: </td><td>{{lab.location}}</td>
- </tr>
- <tr>
- <td>Lab Email: </td>
- <td>{{lab.contact_email}}</td>
- </tr>
- {% if lab.contact_phone %}
- <tr>
- <td>Lab Phone: </td>
- <td>{{lab.contact_phone}}</td>
- </tr>
- {% endif %}
- <tr>
- <td>Lab Status: </td>
- {% if lab.status < 100 %}
- <td><div style="border-radius: 50%; background:#40B976; height: 20px; width: 20px; display: inline-block;"></div>
- Up</td>
- {% elif lab.status < 200 %}
- <td>
- <div style="border-radius: 50%; background:#eeee00; height: 20px; width: 20px; display: inline-block;"></div>
- Temporarily Offline</td>
- {% else %}
- <td>
- <div style="border-radius: 50%; background:#e50000; height: 20px; width: 20px; display: inline-block;"></div>
- Offline Indefinitely</td>
+ <div class="collapse show" id="panel_overview">
+ <div class="card-body">
+ <table class="table">
+ <tr>
+ <td>Lab Name: </td>
+ <td>{{lab.name}}</td>
+ </tr>
+ <tr>
+ <td>Lab Location: </td>
+ <td>{{lab.location}}</td>
+ </tr>
+ <tr>
+ <td>Lab Email: </td>
+ <td>{{lab.contact_email}}</td>
+ </tr>
+ {% if lab.contact_phone %}
+ <tr>
+ <td>Lab Phone: </td>
+ <td>{{lab.contact_phone}}</td>
+ </tr>
{% endif %}
- </tr>
- </table>
+ <tr>
+ <td>Lab Status: </td>
+ {% if lab.status < 100 %}
+ <td>
+ <div class="rounded-circle bg-success square-20 d-inline-block"></div>
+ Up
+ </td>
+ {% elif lab.status < 200 %}
+ <td>
+ <div class="rounded-circle bg-warning square-20 d-inline-block"></div>
+ Temporarily Offline
+ </td>
+ {% else %}
+ <td>
+ <div class="rounded-circle bg-danger square-20 d-inline-block"></div>
+ Offline Indefinitely
+ </td>
+ {% endif %}
+ </tr>
+ </table>
+ </div>
</div>
</div>
<div class="card my-2">
<div class="card-header d-flex">
<h4 class="d-inline-block">Host Profiles</h4>
- <button data-toggle="collapse" data-target="#profile_panel" class="btn btn-outline-secondary ml-auto" style="line-height: 1;" >Expand</button>
+ <button data-toggle="collapse" data-target="#profile_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
- <div id="profile_panel" class="card-body collapse show">
- <table class="table">
- {% for profile in hostprofiles %}
- <tr>
- <td>{{profile.name}}</td>
- <td>{{profile.description}}</td>
- <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-info">Profile</a></td>
- </tr>
- {% endfor %}
- </table>
+ <div class="collapse show" id="profile_panel">
+ <div class="card-body">
+ <table class="table">
+ {% for profile in hostprofiles %}
+ <tr>
+ <td>{{profile.name}}</td>
+ <td>{{profile.description}}</td>
+ <td><a href="/resource/profiles/{{ profile.id }}" class="btn btn-info">Profile</a></td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
</div>
</div>
<div class="card my-2">
<div class="card-header d-flex">
- <h4 style="display: inline;">Networking Capabilities</h4>
- <button data-toggle="collapse" data-target="#network_panel" class="btn btn-outline-secondary ml-auto" style="line-height: 1;" >Expand</button>
+ <h4 class="d-inline">Networking Capabilities</h4>
+ <button data-toggle="collapse" data-target="#network_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
- <div class="card-body collapse show" id="network_panel">
- <table class="table">
- <tr>
- <td>Block Size: (number of VLANs allowed per deployment)</td><td>{{lab.vlan_manager.block_size}}</td>
- </tr>
- <tr>
- <td>Overlapping Vlans Allowed (user can pick which VLANs they wish to use): </td>
- <td>{{lab.vlan_manager.allow_overlapping}}</td>
- </tr>
- </table>
+ <div class="collapse show" id="network_panel">
+ <div class="card-body">
+ <table class="table">
+ <tr>
+ <td>Block Size: (number of VLANs allowed per deployment)</td><td>{{lab.vlan_manager.block_size}}</td>
+ </tr>
+ <tr>
+ <td>Overlapping Vlans Allowed (user can pick which VLANs they wish to use): </td>
+ <td>{{lab.vlan_manager.allow_overlapping}}</td>
+ </tr>
+ </table>
+ </div>
</div>
</div>
<div class="card my-2">
<h4>Images</h4>
<button data-toggle="collapse" data-target="#image_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
- <div class="card-body collapse show" id="image_panel">
- <table class="table">
- <tr>
- <th>Name</th>
- <th>Owner</th>
- <th>For Host Type</th>
- <th>Description</th>
- </tr>
- {% for image in images %}
- <tr>
- <td>{{image.name}}</td>
- <td>{{image.owner}}</td>
- <td>{{image.host_type}}</td>
- <td>{{image.description}}</td>
- </tr>
- {% endfor %}
- </table>
+ <div class="collapse show" id="image_panel">
+ <div class="card-body">
+ <table class="table">
+ <tr>
+ <th>Name</th>
+ <th>Owner</th>
+ <th>For Host Type</th>
+ <th>Description</th>
+ </tr>
+ {% for image in images %}
+ <tr>
+ <td>{{image.name}}</td>
+ <td>{{image.owner}}</td>
+ <td>{{image.host_type}}</td>
+ <td>{{image.description}}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
</div>
</div>
<button data-toggle="collapse" data-target="#lab_hosts_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
</div>
- <div class="card-body collapse show" id="lab_hosts_panel">
- <table class="table">
- <tr>
- <th>Name</th>
- <th>Profile</th>
- <th>Booked</th>
- <th>Working</th>
- <th>Vendor</th>
- </tr>
- {% for host in lab.host_set.all %}
- <tr>
- <td>{{host.labid}}</td>
- <td>{{host.profile}}</td>
- <td>{{host.booked}}</td>
- {% if host.working %}
- <td style="background-color: #40B976;">{{host.working}}</td>
- {% else %}
- <td>{{host.working}}</td>
- {% endif %}
- <td>{{host.vendor}}</td>
- </tr>
- {% endfor %}
- </table>
+ <div class="collapse show" id="lab_hosts_panel">
+ <div class="card-body">
+ <table class="table">
+ <tr>
+ <th>Name</th>
+ <th>Profile</th>
+ <th>Booked</th>
+ <th>Working</th>
+ <th>Vendor</th>
+ </tr>
+ {% for host in lab.host_set.all %}
+ <tr>
+ <td>{{host.labid}}</td>
+ <td>{{host.profile}}</td>
+ <td>{{host.booked}}</td>
+ {% if host.working %}
+ <td class="bg-success text-white">{{host.working}}</td>
+ {% else %}
+ <td>{{host.working}}</td>
+ {% endif %}
+ <td>{{host.vendor}}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </div>
</div>
</div>
</div>
{% extends "base.html" %}
{% block content %}
<h2>Labs</h2>
-<div class="card_container">
+<div class="row">
{% for lab in labs %}
- <div class="card">
- <div class="card-header">
- <h3 class="mt-2">{{lab.name}}</h3>
- </div>
- <div class="p-4">
- <ul class="list-group">
- <li class="list-group-item">name: {{lab.name}}</li>
- <li class="list-group-item">description: {{lab.description}}</li>
- <li class="list-group-item">location: {{lab.location}}</li>
- {% if lab.status == 0 %}
- <li class="list-group-item">status: Up</li>
- {% elif lab.status == 100 %}
- <li class="list-group-item">status: Down for Maintenance</li>
- {% elif lab.status == 200 %}
- <li class="list-group-item">status: Down</li>
- {% endif %}
- </ul>
- <a class="btn btn-primary mt-4 w-100" href="/lab/{{lab.name}}/">Details</a>
+ <div class="p-2 col-12 col-md-6 col-lg-4 col-xl-3">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3 class="mt-2">{{lab.name}}</h3>
+ </div>
+ <div class="p-4">
+ <ul class="list-group">
+ <li class="list-group-item">name: {{lab.name}}</li>
+ <li class="list-group-item">description: {{lab.description}}</li>
+ <li class="list-group-item">location: {{lab.location}}</li>
+ {% if lab.status == 0 %}
+ <li class="list-group-item">status: Up</li>
+ {% elif lab.status == 100 %}
+ <li class="list-group-item">status: Down for Maintenance</li>
+ {% elif lab.status == 200 %}
+ <li class="list-group-item">status: Down</li>
+ {% endif %}
+ </ul>
+ <a class="btn btn-primary mt-4 w-100" href="/lab/{{lab.name}}/">Details</a>
+ </div>
</div>
</div>
{% endfor %}
{% load staticfiles %}
{% block content %}
-<div class="" style="text-align: center;">
+<div class="text-center">
{% if not request.user.is_anonymous %}
{% if not request.user.userprofile.ssh_public_key %}
<div class="alert alert-danger" role="alert">
</div>
{% csrf_token %}
-<style>
- .wf_create {
- display: inline-block;
- text-align: center;
- }
-
- .wf_create_div {
- text-align: center;
- }
-
- .hidden_form {
- display: none;
- }
-
- .panel {
- border: none;
- }
-
- .panels {
- display: grid;
- grid-template-columns: 33% 34% 33%;
- }
-
- .landing_container {
- display: grid;
- grid-template-columns: 1fr 30px 1fr;
- }
-
- .grid_panel {
- padding: 30px;
- }
-
- .btn-primary {
- margin: 10px;
- }
-
- h2 {
- border-bottom: 1px solid #cccccc;
- }
-
- h1 {}
-</style>
<div class="container-fluid">
<div class="row">
<!-- About us -->
<div class="col-12 col-lg-6 mb-4">
- <h2>About Us:</h2>
+ <h2 class="border-bottom">About Us:</h2>
<p>The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as
OPNFV
by hosting hardware and providing access to the community. Currently, the only participating lab is the
</div>
<!-- Get started -->
<div class="col-12 col-lg-6 mb-4">
- <h2>Get Started:</h2>
+ <h2 class="border-bottom">Get Started:</h2>
{% if request.user.is_anonymous %}
- <h4 style="text-align:center;">To get started, please log in with your <a href="/accounts/login">Linux
- Foundation Jira account</a></h4>
+ <h4 class="text-center">
+ To get started, please log in with your <a href="/accounts/login">Linux Foundation Jira account</a>
+ </h4>
{% else %}
<p>To get started, book a server below:</p>
- <a class="wf_create btn btn-primary"
- style="display: flex; flex-direction: column; justify-content: center; margin: 20px; height: 100pt; vertical-align: middle; text-align: center; color: #FFF;"
+ <a class="btn btn-primary d-flex flex-column justify-content-center align-content-center border text-white p-4"
href="/booking/quick/">
- <p style="font-size: xx-large">Book a Server</p>
+ <h4>Book a Server</h4>
</a>
- <p>PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
+ <p class="mt-4">PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
below:
</p>
- <div class='container'>
- <div class="row">
- <div class="col-12 col-xl-4">
- <button class="wf_create btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
- </div>
- <div class="col-12 col-xl-4">
- <button class="wf_create btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
- </div>
- <div class="col-12 col-xl-4">
- <button class="wf_create btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
- </div>
+ <div class="row">
+ <div class="col-12 col-xl-4">
+ <button class="btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
+ </div>
+ <div class="col-12 col-xl-4">
+ <button class="btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
+ </div>
+ <div class="col-12 col-xl-4">
+ <button class="btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
</div>
- {% endif %}
</div>
+ {% endif %}
</div>
<!-- Returning users -->
{% if not request.user.is_anonymous %}
<div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
- <h2 class="ht-4">Returning Users:</h2>
+ <h2 class="ht-4 border-bottom">Returning Users:</h2>
<p>If you're a returning user, some of the following options may be of interest:</p>
- <div class="container">
- <div class="row">
- <div class="col-12 col-xl-4">
- <button class="wf_create btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
- </div>
- <div class="col-12 col-xl-4">
- <a class="wf_create btn btn-primary w-100" href="{% url 'account:my-bookings' %}">My
- Bookings</a>
- </div>
- {% if manager == True %}
+ <div class="row">
+ <div class="col-12 col-xl-4">
+ <button class="btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
+ </div>
+ <div class="col-12 col-xl-4">
+ <a class="btn btn-primary w-100" href="{% url 'account:my-bookings' %}">
+ My Bookings
+ </a>
+ </div>
+ {% if manager == True %}
<div class="col-12 col-xl-4">
- <button class="wf_continue btn btn-primary w-100" onclick="continue_wf()">Resume
- Workflow</button>
+ <button class="btn btn-primary w-100" onclick="continue_wf()">
+ Resume Workflow
+ </button>
</div>
- {% endif %}
- </div>
+ {% endif %}
</div>
</div>
{% endif %}
}
</script>
-<div class="hidden_form" id="form_div">
+<div class="hidden_form d-none" id="form_div">
<form method="post" action="" class="form" id="wf_selection_form">
{% csrf_token %}
<script src="/static/js/dashboard.js">
</script>
-<style>
-.object_class_wrapper {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- border: 0px;
-}
-
-.class_grid_wrapper {
- border: 0px;
- text-align: center;
- border-right: 1px;
- border-style: solid;
- border-color: grey;
-}
-
-.class_grid_wrapper:last-child {
- border-right: none;
-}
-
-.grid_wrapper {
- display: grid;
- grid-template-columns: 1fr 1fr;
-}
-
-.grid-item {
- cursor: pointer;
- border: 1px solid #cccccc;
- border-radius: 5px;
- margin: 20px;
- height: 200px;
- padding: 7px;
- transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
- box-shadow: 0 1px 1px rgba(0,0,0,.075);
-
- display: flex;
- flex-direction: column;
-}
-
-.grid-item > .btn:active, .grid-item > .btn:focus {
- outline: none; !important;
- box-shadow: none;
-}
-
-.grid-item-description {
- flex: 1;
-}
-
-.selected_node {
- border-color: #40c640;
- box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6);
- transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
-}
-
-.grid-item:hover:not(.selected_node):not(.disabled_node) {
- box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100, 100, 100, 0.3);
- transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s;
-}
-
-.disabled_node {
- cursor: not-allowed;
- background-color: #EFEFEF;
-}
-
-.disabled_node:hover {}
-
-.cleared_node {
- background-color: #FFFFFF;
-}
-
-.grid-item-header {
- font-weight: bold;
- font-size: 20px;
- margin-top: 10px;
-}
-
-.dropdown_item {
- border: 1px;
- border-style: solid;
- border-color: lightgray;
- border-radius: 5px;
- margin: 20px;
- padding: 2px;
- grid-column: 1;
- display: grid;
- grid-template-columns: 1fr 3fr 1fr;
- justify-items: center;
-}
-
-.dropdown_item > button {
- margin: 2px;
- justify-self: end;
-}
-
-.dropdown_item > h5 {
- margin: auto;
-}
-
-.dropdown_item > input {
- padding: 7px;
- margin: 2px;
- width: 90%;
-}
-
-#dropdown_wrapper {
- display: grid;
- grid-template-columns: 4fr 5fr;
-}
-</style>
-
<input name="filter_field" id="filter_field" type="hidden"/>
-<div id="grid_wrapper" class="grid_wrapper">
-{% for object_class, object_list in display_objects %}
- <div class="class_grid_wrapper">
- <div style="display:inline-block;margin:auto">
- <h4>{{object_class}}</h4>
- </div>
- <div id="{{object_class}}" class="object_class_wrapper">
- {% for obj in object_list %}
- <div id="{{ obj.id|default:'not_provided' }}" class="grid-item" onclick="multi_filter_widget.processClick(
- '{{obj.id}}');">
- <p class="grid-item-header">{{obj.name}}</p>
- <p class="grid-item-description">{{obj.description}}</p>
- <button type="button" class="btn btn-success grid-item-select-btn">
- {% if obj.multiple %}Add{% else %}Select{% endif %}
- </button>
+<div id="grid_wrapper" class="container-fluid p-4">
+ <div class="row">
+ {% for object_class, object_list in display_objects %}
+ <div class="col-12 col-lg d-flex flex-column pt-2 my-2">
+ <div class="w-100">
+ <h4 class="text-capitalize">{{object_class}}</h4>
+ </div>
+ <div id="{{object_class}}" class="row h-100">
+ {% for obj in object_list %}
+ <div class="col-12 col-md-6 col-xl-4 my-2">
+ <div id="{{ obj.id|default:'not_provided' }}" class="card h-100" onclick="multi_filter_widget.processClick('{{obj.id}}');">
+ <div class="card-header">
+ <p class="h5 font-weight-bold mt-2">{{obj.name}}</p>
+ </div>
+ <div class="card-body">
+ <p class="grid-item-description">{{obj.description}}</p>
+ </div>
+ <div class="card-footer">
+ <button type="button" class="btn btn-success grid-item-select-btn w-100">{% if obj.multiple %}Add{% else %}Select{% endif %}</button>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
</div>
{% endfor %}
- </div>
</div>
-{% endfor %}
</div>
-<div id="dropdown_wrapper">
+<div id="dropdown_wrapper" class="px-3 list-group-flush w-25 mt-2">
</div>
<script>
function multipleSelectFilterWidgetEntry() {
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/static/js/dashboard.js"></script>
-
-<div id="search_select_outer" class="autocomplete">
- <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
- {% if incompatible == "true" %}
- <h3>Warning: Incompatible Configuration</h3>
- <p>Please make a different selection, as the current config conflicts with the selected pod</p>
- {% endif %}
- </div>
- <div id="added_counter">
- <p id="added_number">0</p>
- <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} ∞ {% endif %}added</p>
+<div id="search_select_outer" class="d-flex flex-column">
+ {% if incompatible == "true" %}
+ <div class="alert alert-danger" role="alert">
+ <h3>Warning: Incompatible Configuration</h3>
+ <p>Please make a different selection, as the current config conflicts with the selected pod</p>
+ </div>
+ {% endif %}
+ <div id="added_counter" class="text-center">
+ <span id="added_number">0</span>
+ <span id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} ∞ {% endif %}added</span>
</div>
- <div id="added_list">
+ <div id="added_list" class="pb-2">
</div>
>
</input>
- <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;"
+ <input type="hidden" id="selector" name="{{ name }}" class="form-control d-none"
{% if disabled %} disabled {% endif %}
>
</input>
- <div id="scroll_restrictor">
- <ul id="drop_results"></ul>
+ <div id="scroll_restrictor" class="d-flex pb-4 position-relative">
+ <ul id="drop_results" class="list-group w-100 overflow-auto position-absolute"></ul>
</div>
- <style>
- #scroll_restrictor {
- flex: 1;
- position: relative;
- overflow-y: auto;
- padding-bottom: 10px;
- }
-
- #added_list {
- margin-bottom: 5px;
- }
-
- .autocomplete {
- display: flex;
- flex: 1;
- flex-direction: column;
- }
- #user_field {
- font-size: 14pt;
- padding: 5px;
- height: 40px;
- border: 1px solid #ccc;
- border-radius: 5px;
-
- }
-
- #drop_results{
- list-style-type: none;
- padding: 0;
- margin: 0;
- min-height: 0;
- border: solid 1px #ddd;
- border-top: none;
- border-bottom: none;
- visibility: inherit;
- flex: 1;
-
- position: absolute;
- width: 100%;
-
- }
-
- #drop_results li a{
- font-size: 14pt;
- background-color: #f6f6f6;
- padding: 7px;
- text-decoration: none;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- #drop_results li a {
- border-bottom: 1px solid #ddd;
- }
-
- .list_entry {
- border: 1px solid #ccc;
- border-radius: 5px;
- margin-top: 5px;
- vertical-align: middle;
- line-height: 40px;
- height: 40px;
- padding-left: 12px;
- width: 100%;
- display: flex;
- }
-
- #drop_results li a:hover{
- background-color: #ffffff;
- }
-
- .added_entry_text {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: inline;
- width: 100%;
- }
-
- .btn-remove {
- float: right;
- height: 30px;
- margin: 4px;
- padding: 1px;
- max-width: 20%;
- width: 15%;
- min-width: 70px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .entry_tooltip {
- display: none;
- }
-
- #drop_results li a:hover .entry_tooltip {
- position: absolute;
- background: #444;
- color: #ddd;
- text-align: center;
- font-size: 12pt;
- border-radius: 3px;
-
- }
-
- #drop_results {
- max-width: 100%;
- display: inline-block;
- list-style-type: none;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- #drop_results li {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- #added_counter {
- text-align: center;
- }
-
- #added_number, #addable_limit {
- display: inline;
- }
- </style>
</div>
<script type="text/javascript">
{% block content %}
<div class="row">
<div class="col-lg-12">
- <div class="dataTables_wrapper">
- <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0"
- width="100%">
-
- {% block table %}
- {% endblock table %}
-
- </table>
- </div>
- <!-- /.table-responsive -->
- <!-- /.panel-body -->
- <!-- /.panel -->
+ <div class="dataTables_wrapper table-responsive mw-100">
+ <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0"
+ width="100%">
+ {% block table %}
+ {% endblock table %}
+ </table>
+ </div>
</div>
- <!-- /.col-lg-12 -->
</div>
{% endblock content %}
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.min.css" %}"
rel="stylesheet">
- <!-- MetisMenu CSS -->
- <link href="{% static "bower_components/metisMenu/dist/metisMenu.min.css" %}" rel="stylesheet">
-
<!-- Custom Fonts -->
<link href="{% static "bower_components/Font-Awesome/css/all.min.css" %}"
rel="stylesheet" type="text/css">
+ <link href="{% static "css/base.css" %}" rel="stylesheet">
+
<!-- Favicon -->
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
{% block content %}
-<style media="screen">
- .inbox-panel {
- display: grid;
- grid-template-columns: 30% 5% 65%;
- }
-
- .section-panel {
- padding: 10px;
- }
-
- .iframe-panel {
- padding: 0px;
- margin-top: 0px;
- }
-
- .card-container {
- border: 1px solid #cccccc;
- border-bottom: 0px;
- }
-
- .card {
- height: 50px;
- position: relative;
- border-bottom: 1px solid #cccccc;
- padding: 10px;
- width: 100%;
- background-color: #ffffff;
- z-index: 5;
- }
-
- .selected-card {
- background-color: #f3f3f3;
- }
-
- .card:hover {
- box-shadow: 0px 0 5px 2px #cccccc;
- z-index: 6;
- }
-
- .half_width {
- width: 50%;
- }
-
- #page-wrapper {
- padding: 0px;
- }
-
- .read_notification {
- background-color: #efefef;
- }
-
- .scrollable {
- overflow-y: auto;
- }
-</style>
<div class="container-fluid d-flex flex-grow-1 flex-column">
<div class="row mt-3 mb-2">
<div class="col-2 px-0">
<div class="row flex-grow-1" id="fixHeight">
<!-- Notification list && Controls -->
<div class="mb-2 mb-lg-0 col-lg-2 px-0 mh-100">
- <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="unreadNotifications" data-read="0">
+ <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="unreadNotifications" data-read="0">
{% for notification in unread_notifications %}
<a
href="#"
</a>
{% endfor %}
</div>
- <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="readNotifications" data-read="1">
+ <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="readNotifications" data-read="1">
{% for notification in read_notifications %}
<a
href="#"
</div>
<!-- Content -->
<div class="col ml-lg-2 border mh-100 p-4">
- <iframe class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
+ <iframe name="messageView" class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
</div>
</div>
</div>
<script type="text/javascript">
function showmessage(msg_id) {
- iframe = document.getElementById("inbox-iframe");
- iframe.src = "notification/" + msg_id;
+ window.frames["messageView"].location = "notification/" + msg_id;
}
function setactive(obj) {
}
</script>
-<div>
- <h3 class="msg_header">{{notification.title}}
- <div class="btn_group">
- <button class="btn btn-primary inbox-btn" onclick="mark_unread()">Mark Unread</button>
- <button class="btn btn-danger inbox-btn" onclick="delete_notification()">Delete</button>
- </div>
- </h3>
+<div class="d-flex justify-content-between border-bottom">
+ <span class="h3">{{notification.title}}</span>
+ <div class="btn_group">
+ <button class="btn btn-primary inbox-btn" onclick="mark_unread()">Mark Unread</button>
+ <button class="btn btn-danger inbox-btn" onclick="delete_notification()">Delete</button>
+ </div>
</div>
<p class="content-divider"></p>
<form id="notification_action_form" action="." method="post">
{% csrf_token %}
</form>
-
-<style media="screen">
- .card-container {
- border: 1px solid #ffffff;
- margin-top: 11px;
- }
- .card {
- height: 50px;
- margin: 0px;
- position: relative;
- border-bottom: 1px solid #cccccc;
- padding: 0px;
- width: 100%;
- background-color: #ffffff;
- z-index: 5;
- }
- .sender {
- color: #636363;
- }
- .content-divider {
- border-bottom: 1px solid #cccccc;
- padding-bottom: 15px;
- clear: right;
- }
- .inbox-btn{
- display: inline;
- margin: 3px;
- }
- .btn_group{
- float: right;
- }
-</style>
{% endblock %}
<div class="col-lg-6">
<div class="card mb-4">
<div class="card-header d-flex">
- <h4 style="display: inline;">Available at</h4>
- <button data-toggle="collapse" data-target="#avilableAt" class="btn ml-auto btn-outline-secondary">Expand</button>
+ <h4 class="d-inline">Available at</h4>
+ <button data-toggle="collapse" data-target="#availableAt" class="btn ml-auto btn-outline-secondary">Expand</button>
</div>
- <div class="card-body collapse show" id="avilableAt">
- <ul class="list-group">
- {% for lab in hostprofile.labs.all %}
- <li class="list-group-item">{{lab.name}}</li>
- {% endfor %}
- </ul>
+ <div class="collapse show" id="availableAt">
+ <div class="card-body">
+ <ul class="list-group">
+ {% for lab in hostprofile.labs.all %}
+ <li class="list-group-item">{{lab.name}}</li>
+ {% endfor %}
+ </ul>
+ </div>
</div>
</div>
<div class="card mb-4">
<div class="card-header d-flex">
- <h4 style="display: inline;">RAM</h4>
+ <h4 class="d-inline">RAM</h4>
<button data-toggle="collapse" data-target="#ramPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
</div>
- <div class="card-body collapse show" id="ramPanel">
- {{hostprofile.ramprofile.first.amount}}G,
- {{hostprofile.ramprofile.first.channels}} channels
+ <div id="ramPanel" class="collapse show">
+ <div class="card-body">
+ {{hostprofile.ramprofile.first.amount}}G,
+ {{hostprofile.ramprofile.first.channels}} channels
+ </div>
</div>
</div>
<div class="card mb-4">
<div class="card-header d-flex">
- <h4 style="display: inline;">CPU</h4>
+ <h4 class="d-inline">CPU</h4>
<button data-toggle="collapse" data-target="#cpuPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
</div>
- <div class="card-body collapse show" id="cpuPanel">
- <table class="table">
- <tr>
- <td>Arch:</td>
- <td>{{hostprofile.cpuprofile.first.architecture}}</td>
- </tr>
- <tr>
- <td>Cores:</td>
- <td>{{hostprofile.cpuprofile.first.cores}}</td>
- </tr>
- <tr>
- <td>Sockets:</td>
- <td>{{hostprofile.cpuprofile.first.cpus}}</td>
- </tr>
- </table>
+ <div class="collapse show" id="cpuPanel">
+ <div class="card-body">
+ <table class="table">
+ <tr>
+ <td>Arch:</td>
+ <td>{{hostprofile.cpuprofile.first.architecture}}</td>
+ </tr>
+ <tr>
+ <td>Cores:</td>
+ <td>{{hostprofile.cpuprofile.first.cores}}</td>
+ </tr>
+ <tr>
+ <td>Sockets:</td>
+ <td>{{hostprofile.cpuprofile.first.cpus}}</td>
+ </tr>
+ </table>
+ </div>
</div>
</div>
<div class="card mb-4">
<div class="card-header d-flex">
- <h4 style="display: inline;">Disk</h4>
+ <h4 class="d-inline">Disk</h4>
<button data-toggle="collapse" data-target="#diskPanel" class="btn ml-auto btn-outline-secondary">Expand</button>
</div>
- <div class="card-body collapse show" id="diskPanel">
- <table class="table">
- <tr>
- <td>Size:</td>
- <td>{{hostprofile.storageprofile.first.size}} GiB</td>
- </tr>
- <tr>
- <td>Type:</td>
- <td>{{hostprofile.storageprofile.first.media_type}}</td>
- </tr>
- <tr>
- <td>Mount Point:</td>
- <td>{{hostprofile.storageprofile.first.name}}</td>
- </tr>
- </table>
+ <div class="collapse show" id="diskPanel">
+ <div class="card-body">
+ <table class="table">
+ <tr>
+ <td>Size:</td>
+ <td>{{hostprofile.storageprofile.first.size}} GiB</td>
+ </tr>
+ <tr>
+ <td>Type:</td>
+ <td>{{hostprofile.storageprofile.first.media_type}}</td>
+ </tr>
+ <tr>
+ <td>Mount Point:</td>
+ <td>{{hostprofile.storageprofile.first.name}}</td>
+ </tr>
+ </table>
+ </div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header d-flex">
- <h4 style="display: inline;">Interfaces</h4>
+ <h4 class="d-inline">Interfaces</h4>
<button data-toggle="collapse" data-target="#interfacePanel" class="btn ml-auto btn-outline-secondary">Expand</button>
</div>
- <div class="card-body collapse show" id="interfacePanel">
- <table class="table">
- <thead>
- <tr>
- <th>Name</th>
- <th>Speed</th>
- </tr>
- </thead>
- <tbody>
- {% for intprof in hostprofile.interfaceprofile.all %}
- <tr>
- <td>{{intprof.name}}</td>
- <td>{{intprof.speed}}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
+ <div class="collapse show" id="interfacePanel">
+ <div class="card-body">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Speed</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for intprof in hostprofile.interfaceprofile.all %}
+ <tr>
+ <td>{{intprof.name}}</td>
+ <td>{{intprof.speed}}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
</div>
</div>
</div>
{% block content %}
-<style>
-#resource_meta_form {
- padding: 80px;
- display: grid;
-}
-
-#resource_meta_form td > * {
- width: 100%;
- margin-bottom: 20px;
- margin-top: 20px;
-}
-
-#resource_meta_form > table > tbody > tr {
- border-bottom: 1px solid #cccccc;
-}
-
-#resource_meta_form > table > tbody > tr:last-child {
- border-bottom: none;
-}
-
-</style>
-
<form id="resource_meta_form" method="post" action="/wf/workflow/">
{% csrf_token %}
- <table>
- {{form}}
+ <table class="px-4">
+ {% bootstrap_form form field_class="px-4" label_class="px-4 mt-2" %}
</table>
</form>
{% endblock content %}
<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
{% block content %}
- <div id="graphParent"
- style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;">
- <div id="graphContainer"
- style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
+ <div class="row p-0 w-100 mx-0 position-absolute overflow-hidden topToBottom">
+ <div id="graphParent" class="col px-0">
+ <div class="row">
+ <div class="col pr-0">
+ <div id="toolbarContainer" class="bg-light pl-4"></div>
+ </div>
+ </div>
+ <!-- Creates a container for the sidebar -->
+ <div id="graphContainer"></div>
</div>
-
- <!-- Creates a container for the sidebar -->
- <div id="toolbarContainer"
- style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;">
- </div>
-
- <!-- Creates a container for the outline -->
- <div id="outlineContainer"
- style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;">
- </div>
- </div>
-
- <style>
- p {
- word-break: normal;
- white-space: normal;
- }
- #network_select {
- background: inherit;
- padding: 0px;
- padding-top: 0px;
- }
- #toolbarContainer {
- background: #DDDDDD;
- height: 36px;
- }
- #toolbar_extension {
- height: 36px;
- background: #DDDDDD;
- }
- #btn_add_network {
- width: 100%;
- }
- #vlan_notice {
- margin: 20px;
- }
- #network_list li {
- border-radius: 2px;
- margin: 5px;
- padding: 5px;
- vertical-align: middle;
- background: #DDDDDD;
- }
- #network_list {
- list-style-type: none;
- padding: 0;
- }
- .colorblob {
- width: 20px;
- height: 20px;
- border-radius: 50%;
- display: inline-block;
- vertical-align: middle;
- }
- .network_innertext {
- display: inline-block;
- padding-left: 10px;
- vertical-align: middle;
- padding-bottom: 0px;
- margin-bottom: 2px;
- }
- .mxWindow {
- background: #FFFFFF;
- }
- </style>
-
- <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;">
- <div id="toolbar_extension">
- <button id="btn_add_network" type="button" class="btn btn-primary" onclick="network_step.newNetworkWindow();">Add Network</button>
+ <div id="network_select" class="p-0 w-25 ml-auto col-2">
+ <div class="px-0 mb-2">
+ <!-- Creates a container for the outline -->
+ <div id="outlineContainer" class="border"></div>
+ </div>
+ <div>
+ <button id="btn_add_network" type="button" class="btn btn-primary w-100" onclick="network_step.newNetworkWindow();">Add Network</button>
+ </div>
+ <ul id="network_list" class="list-group">
+ </ul>
+ <button type="button" class="d-none" onclick="network_step.submitForm();">Submit</button>
</div>
- <ul id="network_list">
- </ul>
- <button type="button" style="display: none" onclick="network_step.submitForm();">Submit</button>
</div>
<form id="xml_form" method="post" action="/wf/workflow/">
{% csrf_token %}
{% for host in hosts %}
hosts.push({{host|safe}});
{% endfor %}
-
+
let added_hosts = [];
{% for host in added_hosts %}
added_hosts.push({{host|safe}});
{% load bootstrap4 %}
{% block content %}
-<style>
-.meta_container {
- padding: 50px;
-}
-</style>
{% bootstrap_form_errors form type='non_fields' %}
-<div class="meta_container">
+<div class="p-4">
<form id="meta_form" action="/wf/workflow/" method="POST" class="form">
{% csrf_token %}
<div class="form-group">
{% block content %}
-<style>
- .booking {
- border-style: none;
- border-color: black;
- border: 2px;
- border-radius: 5px;
- margin: 20px;
- padding-left: 25px;
- padding-right: 25px;
- padding-bottom: 25px;
- box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
- transition-property: box-shadow;
- transition-duration: 0.1s;
- float: left;
- }
- .booking:hover {
- box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
- transition-property: box-shadow;
- transition-duration: 0.1s;
- }
- .host {
- cursor: pointer;
- border-style: solid;
- border-color: black;
- border-width: 1px;
- border-radius: 5px;
- margin: 5px;
- padding: 5px;
- text-align: center;
- box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
- transition-property: box-shadow;
- transition-duration: 0.1s;
- }
- .host:hover {
- box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
- transition-property: box-shadow;
- transition-duration: 0.1s;
- background-color: rgba(144,238,144,0.3);
- }
- .selected {
- background-color: lightgreen !important;
- }
- .booking_container {
- overflow: auto;
- padding: 30px;
- }
-</style>
{% bootstrap_form_errors form type='non_fields' %}
<form id="host_select_form" action="/wf/workflow/" method="POST" class="form">
{% csrf_token %}
<input type="hidden" id="hidden_json_input", name="host"/>
</form>
-<div id="host_select_container" class="booking_container">
+<div class="container-fluid">
+ <div class="row" id="host_select_container">
+ </div>
</div>
<script>
var selected_host = null;
var initial = {{chosen|safe|default:'null'}};
-function select(booking_id, host_name){
+function select(obj){
+ var booking_id = $(obj).attr("booking");
+ var host_name = $(obj).attr("hostname");
var input = document.getElementById("hidden_json_input");
input.value = JSON.stringify({"booking": booking_id, "name": host_name});
// clear out and highlist host
- if(selected_host){
- selected_host.classList.remove("selected");
+ if(selected_host != null){
+ selected_host.classList.remove("active");
}
selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
- selected_host.classList.add("selected");
+ selected_host.classList.add("active");
}
function draw_bookings(){
var bookings = [];
var container = document.getElementById("host_select_container");
for(var booking_id in booking_hosts){
- var booking = document.createElement("DIV");
- var heading = document.createElement("H3");
- heading.appendChild(document.createTextNode("Booking " + booking_id));
- booking.appendChild(heading);
- booking.appendChild(document.createTextNode("start: " + booking_hosts[booking_id].start));
- booking.appendChild(document.createElement("BR"));
- booking.appendChild(document.createTextNode("end: " + booking_hosts[booking_id].end));
- booking.appendChild(document.createElement("BR"));
- booking.appendChild(document.createTextNode("purpose: " + booking_hosts[booking_id].purpose));
- booking.appendChild(document.createElement("BR"));
- booking.appendChild(document.createTextNode("hosts:"));
- booking.id = "booking_" + booking_id;
- booking.className = "booking";
+ // Create a column with a card
+ var column = $("<div/>", {
+ class: "col-12 col-md-6 col-lg-3 col-xl-2 my-2"
+ }).appendTo(container);
+ var booking = $("<div/>", {
+ class: "card"
+ }).appendTo(column);
+ var heading = $("<div/>", {
+ class: "card-header"
+ }).text(`Booking ${booking_id}`).appendTo(booking);
+ var body = $("<ul/>", {
+ class: "list-group list-group-flush"
+ }).appendTo(booking);
+ var footer = $("<div/>", {
+ text: "Hosts:",
+ class: "card-footer d-flex flex-column"
+ }).appendTo(booking);
+
+ // Append information to the card body
+ $(`<li class="list-group-item">Start: ${booking_hosts[booking_id].start}</li>`).appendTo(body);
+ $(`<li class="list-group-item">End: ${booking_hosts[booking_id].end}</li>`).appendTo(body);
+ $(`<li class="list-group-item">Purpose: ${booking_hosts[booking_id].purpose}</li>`).appendTo(body);
+
+ // Append hosts to footer
var hosts = booking_hosts[booking_id].hosts;
- for(var i=0; i<hosts.length; i++){
- var host = document.createElement("DIV");
- host.id = "booking_" + booking_id + "_host_" + hosts[i].name;
- host.classList.add("host");
- host.appendChild(document.createTextNode(hosts[i].name));
- var hostname = hosts[i].name;
- host.booking = booking_id;
- host.hostname = hostname;
- host.onclick = function() {
- select(this.booking, this.hostname);
- }
- booking.appendChild(host);
+ for (const host of hosts) {
+ $("<button/>", {
+ class: "btn btn-outline-primary w-100 mt-1 hostbtn",
+ id: `booking_${booking_id}_host_${host.name}`,
+ text: host.name,
+ booking: booking_id,
+ hostname: host.name,
+ click: function() {
+ select(this);
+ }
+ }).appendTo(footer);
}
- bookings.push(booking);
- container.appendChild(booking);
}
}
draw_bookings();
{% block content %}
-<style>
- #form_div {
- width: 100%;
- padding: 5%;
- text-align: center;
- }
- #text_display {
- text-align: left;
- display: inline-block;
- }
- #text_wrapper {
- text-align: center; /*centers child div*/
- }
- p {
- margin:0;
- padding:0;
- }
-</style>
-
-<div style="text-align:center;">
+<div class="text-center">
<h3>Confirm Session</h3>
</div>
<div id="vlan_warning"></div>
{% csrf_token %}
<input id="vlan_input" name="vlan_input" type="hidden"/>
</form>
-<div id="text_wrapper">
- <div id="text_display">
- <pre>{{confirmation_info|escape}}</pre>
+<div class="container">
+ <div class="row justify-content-center">
+ <div class="col-auto">
+ <pre>{{confirmation_info|escape}}</pre>
+ </div>
</div>
-</div>
-<div id="form_div">
-<form id="confirmation_form" action="/wf/workflow/" method="post">
- {% csrf_token %}
- <div style="display: none;">
- {{form|default:"<p> No Form Loaded</p>"}}
+ <div class="row">
+ <div class="col">
+ <div id="form_div" class="text-center p-4">
+ <form id="confirmation_form" action="/wf/workflow/" method="post">
+ {% csrf_token %}
+ <div class="d-none">
+ {{form|default:"<p> No Form Loaded</p>"}}
+ </div>
+ </form>
+ <div class="cform_buttons mx-auto">
+ <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button>
+ <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button>
+ </div>
+ <div class="d-none">
+ <form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
+ {% csrf_token %}
+ </form>
+ </div>
+ </div>
+ </div>
</div>
-</form>
-<div class="cform_buttons">
- <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button>
- <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button>
-</div>
-
-<div style="display: none;">
-<form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
- {% csrf_token %}
-</form>
</div>
-
<script>
var select = document.getElementById("id_confirm");
}
</script>
<script>
-
-function fixVlans() {
- document.getElementById("vlan_input").value = "True";
- var form = $("#vlan_form");
- var formData = form.serialize();
- var req = new XMLHttpRequest();
- req.open("POST", "/wf/workflow/", false);
- req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- req.onerror = function() { alert("problem submitting form"); }
- req.onreadystatechange = function() { //replaces current page with response
- if(req.readyState === 4 ) {
- var d = document.getElementById("vlan_warning").innerHTML = "";
- document.getElementById("confirm_button").disabled = false;
- document.getElementById("cancel_button").disabled = false;
+ function fixVlans() {
+ document.getElementById("vlan_input").value = "True";
+ var form = $("#vlan_form");
+ var formData = form.serialize();
+ var req = new XMLHttpRequest();
+ req.open("POST", "/wf/workflow/", false);
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+ req.onerror = function() { alert("problem submitting form"); }
+ req.onreadystatechange = function() { //replaces current page with response
+ if(req.readyState === 4 ) {
+ var d = document.getElementById("vlan_warning").innerHTML = "";
+ document.getElementById("confirm_button").disabled = false;
+ document.getElementById("cancel_button").disabled = false;
+ }
}
+ req.send(formData);
+ }
+ var problem = {{vlan_warning|default:'false'}};
+ if(problem){
+ var d = document.getElementById("vlan_warning");
+ var h3 = document.createElement("h3");
+ h3.innerHTML = "WARNING: Vlans not available";
+ var h4 = document.createElement("h4");
+ h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?";
+ var button1 = document.createElement("button");
+ button1.innerHTML = "Correct Vlans For Me";
+ button1.onclick = function() { fixVlans(); }
+
+ var button2 = document.createElement("button");
+ button2.innerHTML = "Cancel. I will change my vlans";
+ button2.onclick = function() { formcancel(); }
+ d.appendChild(h3);
+ d.appendChild(h4);
+ d.appendChild(button1);
+ d.appendChild(button2);
+ document.getElementById("confirm_button").disabled = true;
+ document.getElementById("cancel_button").disabled = true;
}
- req.send(formData);
-}
-var problem = {{vlan_warning|default:'false'}};
-if(problem){
- var d = document.getElementById("vlan_warning");
- var h3 = document.createElement("h3");
- h3.innerHTML = "WARNING: Vlans not available";
- var h4 = document.createElement("h4");
- h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?";
- var button1 = document.createElement("button");
- button1.innerHTML = "Correct Vlans For Me";
- button1.onclick = function() { fixVlans(); }
-
- var button2 = document.createElement("button");
- button2.innerHTML = "Cancel. I will change my vlans";
- button2.onclick = function() { formcancel(); }
- d.appendChild(h3);
- d.appendChild(h4);
- d.appendChild(button1);
- d.appendChild(button2);
- document.getElementById("confirm_button").disabled = true;
- document.getElementById("cancel_button").disabled = true;
-}
</script>
-</div>
{% block element_messages %}
{% endblock element_messages %}
+++ /dev/null
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<p>resource selection template</p>
-
-<style>
- .db_pane_wrapper{
- display: grid;
- grid-template-columns: 49% 2% 49%;
- }
- .divider{
- border-style: solid;
- height: 100vh;
- }
-
- .hidden_form{
- display: none;
- }
-</style>
-
-<div class="db_pane_wrapper">
- <div class="pane_one">
- <p>Select Resource</p>
-
- </div>
- <div class="divider">
-
- </div>
- <div class="pane_two">
- <button>Create New Resource</button>
- </div>
-</div>
-
-<div class="hidden_form" id="form_div">
- <form method="post" action="" class="form" id="resource_selection_form">
- {% csrf_token %}
- {% bootstrap_field form.resourcebundle %}
- {% buttons %}
- <button type="submit" class="btn btn btn-success">
- Confirm Edit
- </button>
- {% endbuttons %}
- </form>
-</div>
-
-{% endblock content %}
\ No newline at end of file
{% block content %}
-<style>
- .go_btn {
-
- position: absolute;
- width: 100px;
- top: 170px;
- height: calc(100% - 170px);
-
- }
-
- .go_btn_disabled {
- background-color: #ffffff;
- }
-
- .go_forward {
- right: 0px;
- border-left: none;
- }
-
- .go_back {
- left: 251px;
- border-right: none;
- }
-
-
- .btn_wrapper {
- text-align: center;
- margin-bottom: 5px;
-
- }
-
- {% if DEBUG %}
- .add_btn_wrapper {
- right: 130px;
- top: 10px;
- position: absolute;
- }
- {% endif %}
-
- #breadcrumbs {
- margin-bottom: 0;
- }
-
- .btn_wrapper {
- margin: 0;
- }
-
- .step {
- display: inline;
- padding: 7px;
- margin: 1px;
- font-size: 14pt;
- cursor: default;
- }
-
- .step:active {
- -webkit-box-shadow: inherit;
- box-shadow: inherit;
- }
-
- .step_active:active {
- -webkit-box-shadow: inherit;
- box-shadow: inherit;
- }
-
- .step_active {
- display: inline;
- padding: 7px;
- margin: 1px;
- cursor: default;
- font-size: 14pt;
- padding-bottom: 4px !important;
- border-bottom: 4px solid #41ba78 !important;
- }
-
- .step_hidden {
- background: #EFEFEF;
- color: #999999;
- }
-
- .step_invalid::after {
- content: " \2612";
- color: #CC3300;
- }
-
- .step_valid::after {
- content: " \2611";
- color: #41ba78;
- }
-
- .step_untouched::after {
- content: " \2610";
- }
-
- .iframe_div {
- width: calc(100% - 450px);
- margin-left: 70px;
- height: calc(100vh - 155px);
- position: absolute;
- border: none;
- }
-
- .iframe_elem {
- width: 100%;
- height: calc(100vh - 155px);
- border: none;
- }
-
- #breadcrumbs {
- background-color: inherit;
- }
-
- #breadcrumbs.breadcrumb>li {
- border: 1px solid #cccccc;
- border-left: none;
- }
-
- #breadcrumbs.breadcrumb>li:first-child {
- border-left: 1px solid #cccccc;
- }
-
- #breadcrumbs.breadcrumb>li+li:before {
- content: "";
- width: 0;
- margin: 0;
- padding: 0;
- }
-
- #topPagination .topcrumb {
- flex: 1 1 0;
- display: flex;
- align-content: center;
- justify-content: center;
- border: 1px solid #dee2e6;
- border-left: none;
- }
-
- .topcrumb > span {
- color: #343a40;
- cursor: default;
- }
-
- .topcrumb.active > span {
- background: #007bff;
- color: white;
- }
-
- .topcrumb.disabled > span {
- color: #6c757d;
- background: #f8f9fa;
- }
-</style>
<!-- Pagination -->
<div class="row mt-3">
<div class="col">
<div class="row px-4">
<div class="col">
<div id="iframe_header" class="row view-header">
- <div class="col-lg-12 step_header">
- <h1 class="step_title d-inline-block" id="view_title"></h1>
+ <div class="col-lg-12">
+ <h1 class="d-inline-block" id="view_title"></h1>
<span class="description text-muted" id="view_desc"></span>
- <p class="step_message" id="view_message"></p>
+ <p id="view_message"></p>
</div>
<script>
function update_description(title, desc) {
document.getElementById("view_message").classList.add("message_" + stepstatus);
}
</script>
- <!-- /.col-lg-12 -->
</div>
</div>
<div class="col-auto align-self-center d-flex">
<button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button>
</div>
</div>
-<!-- Content here -->
<div class="row d-flex flex-column flex-grow-1">
<div class="container-fluid d-flex flex-column h-100">
<div class="row d-flex flex-grow-1 p-4">
- <!-- iframe workflow -->
- <div class="col-12 d-flex border flex-grow-1">
- <!-- This was where the iframe went -->
+ <div class="col-12 d-flex border flex-grow-1 px-0">
<iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
frameBorder="0"></iframe>
</div>
</div>
</div>
</div>
-<div class="btn_wrapper">
-</div>
{% csrf_token %}
<script type="text/javascript">
window.location = window.location;
}
</script>
-<div style="display: none;" id="workflow_pop_form_div">
+<div class="d-none" id="workflow_pop_form_div">
<form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
{% csrf_token %}
</form>
{% block basecontent %}
- <div id="wrapper">
+ <div id="wrapper" class="h-100">
<!-- Page Content -->
- <div id="page-wrapper">
-
+ <div id="page-wrapper" class="h-100">
{% block content %}
-
{% endblock content %}
</div>
- <!-- /#page-wrapper -->
</div>
{% block vport_comm %}
<script type="text/javascript">
<script>
function step_on_leave() {
- {% block onleave %}
- alert("override onleave");
- {% endblock %}
+ {% block onleave %}
+ alert("override onleave");
+ {% endblock %}
}
</script>
{% bootstrap_messages %}
{% endblock %}
</div>
-
- <!-- /#wrapper -->
{% endblock basecontent %}
Code Review / laas.git / commitdiff