diff options
Diffstat (limited to 'src/templates/base')
| -rw-r--r-- | src/templates/base/booking/booking_detail.html | 146 | ||||
| -rw-r--r-- | src/templates/base/dashboard/lab_detail.html | 6 | ||||
| -rw-r--r-- | src/templates/base/dashboard/landing.html | 10 | ||||
| -rw-r--r-- | src/templates/base/workflow/book_a_pod.html | 18 | ||||
| -rw-r--r-- | src/templates/base/workflow/design_a_pod.html | 28 |
5 files changed, 156 insertions, 52 deletions
diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html index 33b0486..bcf554b 100644 --- a/src/templates/base/booking/booking_detail.html +++ b/src/templates/base/booking/booking_detail.html @@ -53,6 +53,14 @@ code { <td>Lab Deployed At</td> <td>{{ booking.lab }}</td> </tr> + <tr> + <td>IPMI Username</td> + <td><code id="ipmi-username">{{ status.config.ipmi_username }}</code></td> + </tr> + <tr> + <td>IPMI Password</td> + <td><code id="ipmi-password">{{ status.config.ipmi_password }}</code></td> + </tr> </table> </div> </div> @@ -61,35 +69,80 @@ code { <div class="card mb-3"> <div class="card-header d-flex"> <h4 class="d-inline">Deployment Progress</h4> - <p class="mx-3">Your resources are being prepared. If this is taking a really long time, please contact us <a href="mailto:{{contact_email}}">here!</a></p> - <!-- <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button> --> + <p class="mx-3">Your resources are being prepared. If this is taking a really long time, please contact + us <a href="mailto:{{contact_email}}">here!</a></p> </div> <div class="collapse show" id="panel_tasks"> <table class="table m-0"> <tr> <th></th> - <th>Resource</th> + <th>Name</th> + + <th>Assigned Host</th> <th>Status</th> </tr> - {% for host in statuses %} + {% with status.instances as instances %} + + {% for id, inst in instances.items %} <tr> <td> - {% if 'Success' in host.status %} - <div class="rounded-circle bg-success square-20"></div> - {% elif 'Fail' in host.status %} - <div class="rounded-circle bg-danger square-20"></div> + <!-- icon --> + {% if inst.logs|length > 0 %} + {% with inst.logs|last as lastelem %} + {% if 'Success' in lastelem.status %} + <div id="icon-{{id}}" class="rounded-circle bg-success square-20"></div> + {% elif 'Fail' in lastelem.status %} + <div id="icon-{{id}}" class="rounded-circle bg-danger square-20"></div> {% else %} - <div class="spinner-border text-primary square-20"></div> + <div id="icon-{{id}}" class="spinner-border text-primary square-20"></div> + {% endif %} + {% endwith %} {% endif %} </td> - <td> - {{ host.hostname }} + <td id="alias-{{id}}"> + <!-- Hostname --> + {{inst.host_alias}} + </td> + <td id="host-{{id}}"> + <!-- Actual Host --> + {{inst.assigned_host}} </td> - <td id="{{host.instance_id}}"> - {{ host.status }} + <td> + <!-- Logs --> + {% if inst.logs|length > 0 %} + {% with inst.logs|last as lastelem %} + <span id="status-{{id}}"> + {{lastelem.status}} + </span> + <button class="btn-secondary btn float-right" data-target="#collapse-{{id}}" + data-toggle="collapse">Show Additional Logs</button> + {% endwith %} + + {% endif %} + <p> + <div class="card collapse mt-3" id="collapse-{{id}}"> + <div class="card-header">Additional Logs</div> + <div class="card-body"> + <table id="logs-{{id}}"> + {% for log in inst.logs %} + <tr> + <td> + {{log.status}} + </td> + + <td> + {{log.time}} + </td> + </tr> + {% endfor %} + </table> + </div> + </div> + </p> </td> </tr> {% endfor %} + {% endwith %} </table> </div> </div> @@ -116,30 +169,67 @@ code { </div> <script> -setInterval(function(){ - fetchBookingStatus(); -}, 5000); + setInterval(function () { + fetchBookingStatus(); + }, 5000); -async function fetchBookingStatus() { + async function fetchBookingStatus() { req = new XMLHttpRequest(); var url = "status"; req.open("GET", url, true); - req.onerror = function() { alert("oops"); } - req.onreadystatechange = function() { - if(req.readyState === 4) { - statuses = JSON.parse(req.responseText) - updateStatuses(statuses) + req.onerror = function () { console.log("failed to get status") } + req.onreadystatechange = function () { + if (req.readyState === 4) { + let status = JSON.parse(req.responseText) + updateStatuses(status) } } req.send(); -} + } + + async function updateStatuses(status) { + + const instances = status.instances; + + Object.keys(instances).forEach((aggId) => { + const instance = instances[aggId] + const status = instance.logs.pop() -async function updateStatuses(statuses) { - for (const s of statuses) { - document.getElementById(s.instance_id).innerText = s.status + let icon_class = "spinner-border text-primary square-20" + if (status.status.includes('Success')) { + icon_class = "rounded-circle bg-success square-20" + } else if (status.status.includes('Fail')) { + icon_class = "rounded-circle bg-danger square-20" + } + + // icon + document.getElementById("icon-" + aggId).className = icon_class; + // host alias + document.getElementById("alias-" + aggId).innerText = instance.host_alias; + // assigned host + document.getElementById("host-" + aggId).innerText = instance.assigned_host; + // status + document.getElementById("status-" + aggId).innerText = status.status; + // logs + const log_table = document.getElementById("logs-" + aggId); + log_table.innerHTML = ""; + for (const log of instance.logs) { + const tr = document.createElement('tr'); + const td_status = document.createElement('td') + td_status.innerText = log.status; + const td_time = document.createElement('td') + td_time.innerText = log.time; + tr.appendChild(td_status) + tr.appendChild(td_time) + log_table.appendChild(tr) + } + }) + + // IPMI + document.getElementById("ipmi-username").innerText = status.config.ipmi_username; + document.getElementById("ipmi-password").innerText = status.config.ipmi_password; } -} </script> -{% endblock content %} +{% endblock content %}
\ No newline at end of file diff --git a/src/templates/base/dashboard/lab_detail.html b/src/templates/base/dashboard/lab_detail.html index cd096f6..1c15496 100644 --- a/src/templates/base/dashboard/lab_detail.html +++ b/src/templates/base/dashboard/lab_detail.html @@ -57,7 +57,9 @@ </div> </div> </div> - <div class="card my-3"> + + <!-- Needs to stay commented until we can filter profiles by project. Currently this is showing Anuket and LFEdge profiles. --> + <!-- <div class="card my-3"> <div class="card-header d-flex"> <h4 class="d-inline-block">Host Profiles</h4> </div> @@ -74,7 +76,7 @@ </table> </div> </div> - </div> + </div> --> <div class="card my-3"> <div class="card-header d-flex"> diff --git a/src/templates/base/dashboard/landing.html b/src/templates/base/dashboard/landing.html index 960ad39..7f97e4f 100644 --- a/src/templates/base/dashboard/landing.html +++ b/src/templates/base/dashboard/landing.html @@ -49,13 +49,15 @@ {% endif %} {% else %} {% block btnGrp %} - <p>To get started, book a server below:</p> - <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border p-4 btnAnuket" href="{% url 'workflow:book_a_pod' %}" > - Book a Pod - </a> + <p>Select 'Design a Pod' to create a custom resource group.</p> + <p>Select 'Book a Pod' to reserve a custom pod or a single resource.</p> <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border p-4 btnAnuket" href="{% url 'workflow:design_a_pod' %}" > Design a Pod </a> + <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border p-4 btnAnuket" href="{% url 'workflow:book_a_pod' %}" > + Book a Pod + </a> + {% endblock btnGrp %} {% endif %} </div> diff --git a/src/templates/base/workflow/book_a_pod.html b/src/templates/base/workflow/book_a_pod.html index 8a0fb47..5c1a253 100644 --- a/src/templates/base/workflow/book_a_pod.html +++ b/src/templates/base/workflow/book_a_pod.html @@ -10,7 +10,7 @@ <body> <div class="workflow-container"> <div id="prev" class="row w-100 m-0"> - <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" onclick="workflow.goPrev()" id="workflow-prev"> + <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" hidden="true" onclick="workflow.goPrev()" id="workflow-prev"> <div class="arrow arrow-up"></div> </button> </div> @@ -25,21 +25,14 @@ <div class="scroll-area pt-5 mx-5" id="select_template"> <h1 class="mt-4"><u>Book a Pod</u></h1> <h2 class="mt-4 mb-3">Select Host Or Template<span class="text-danger">*</span></h2> - <div class="card-deck align-items-center"> - - <div class="col-12" id="template_list"> - - <div class="my-5" id="select_template_tab_content"> - <ul id="default_templates_list" class="p-0 m-0 row"> - </ul> - </div> - + <p>Select the resource bundle that you would like to reserve. Then use the navigation arrows or scroll to advance the workflow. Configure your own resource <a href="{% url 'workflow:design_a_pod' %}">here</a>.</p> + <div id="default_templates_list" class="row flex-grow-1"> </div> - </div> </div> <div class="scroll-area pt-5 mx-5" id="cloud_init"> <h2 class="mt-4 mb-3">Global Cloud Init Override</h2> + <p>Add a custom cloud init configuration to apply to all hosts in your booking (optional).</p> <div class="d-flex align-items-center"> <textarea name="ci-textarea" id="ci-textarea" rows="15" class="w-50"></textarea> </div> @@ -47,6 +40,7 @@ <div class="scroll-area pt-5 mx-5" id="booking_details"> <h2 class="mt-4 mb-3">Booking Details<span class="text-danger">*</span></h2> + <p>Enter the project and purpose for your booking, as well as the duration (up to 21 days).</p> <div class="form-group mb-0"> <div class="row align-items-center my-4"> <div class="col-xl-6 col-md-8 col-11"> @@ -67,6 +61,7 @@ </div> </div> <h2 class="mt-4 mb-3">Add Collaborators:</h2> + <p>Give SSH and booking overview access to other users. Collaborators must mark their profiles as public and have a linked IPA account.</p> <div class="row"> <div class="col-xl-6 col-md-8 col-11 p-0 border border-dark"> {% bootstrap_field form.users label="Collaborators" %} @@ -76,6 +71,7 @@ <div class="scroll-area pt-5 mx-5" id="booking_summary"> <h2 class="mt-4 mb-3">Booking Summary</h2> + <p>Review your booking information and click 'Book' to reserve your resources.</p> <div class="row align-items-center"> <div class="card col-xl-6 col-md-8 col-11 border-0"> <ul class="list-group"> diff --git a/src/templates/base/workflow/design_a_pod.html b/src/templates/base/workflow/design_a_pod.html index 32bd332..c23e5a8 100644 --- a/src/templates/base/workflow/design_a_pod.html +++ b/src/templates/base/workflow/design_a_pod.html @@ -14,7 +14,7 @@ <div class="workflow-container"> <div id="prev" class="row w-100 m-0"> - <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" onclick="workflow.goPrev()" id="workflow-prev"> + <button class="btn btn-workflow-nav stretched-link m-0 p-0 mt-3" hidden="true" onclick="workflow.goPrev()" id="workflow-prev"> <div class="arrow arrow-up"></div> </button> </div> @@ -30,7 +30,8 @@ <!-- Select Lab --> <div class="scroll-area pt-5 mx-5" id="select_lab"> <!-- Ideally the 'Design a Pod' header would be anchored to the top of the page below the arrow --> - <h1 class="mt-4"><u>Design a Pod</u></h1> + <h1 class="mt-4"><u>Design a Pod</u></h1> + <p>To get started, select a lab. Then use the navigation arrows or scroll to advance through the workflow.</p> <h2 class="mt-4 mb-3">Select a Lab<span class="text-danger">*</span></h2> <div class="row card-deck" id="lab_cards"> </div> @@ -39,6 +40,7 @@ <!-- Add Resources --> <div class="scroll-area pt-5 mx-5" id="add_resources"> <h2 class="mt-4 mb-3">Add Resources<span class="text-danger">*</span></h2> + <p>Add up to 8 configurable resources to your pod, then use the navigation arrows to proceed to the next step.</p> <div class="row card-deck align-items-center" id="host_cards"> <div class="col-xl-3 col-md-6 col-12" id="add_resource_plus_card"> <div class="card align-items-center border-0"> @@ -52,6 +54,7 @@ <!-- Add Networks --> <div class="scroll-area pt-5 mx-5" id="add_networks"> <h2 class="mt-4 mb-3">Add Networks<span class="text-danger">*</span></h2> + <p>Define networks to use in your pod. A network may be set as public or private.</p> <div class="row card-deck align-items-center" id="network_card_deck"> <div class="col-xl-3 col-md-6 col-12" id="add_network_plus_card"> <div class="card align-items-center border-0"> @@ -65,6 +68,7 @@ <!-- Configure Connections--> <div class="scroll-area pt-5 mx-5" id="configure_connections"> <h2 class="mt-4 mb-3">Configure Connections<span class="text-danger">*</span></h2> + <p>Configure the connections for each host in your pod to your defined networks.</p> <div class="row card-deck align-items-center" id="connection_cards"> </div> </div> @@ -72,6 +76,7 @@ <!-- Pod Details--> <div class="scroll-area pt-5 mx-5" id="pod_details"> <h2 class="mt-4 mb-3">Pod Details<span class="text-danger">*</span></h2> + <p>Add a pod name and description to refer to later.</p> <div class="form-group"> <div class="row align-items-center my-4"> <div class="col-xl-6 col-md-8 col-11"> @@ -102,7 +107,8 @@ <!-- Pod Summary--> <div class="scroll-area pt-5 mx-5" id="pod_summary"> - <h2 class="mt-4 mb-3">Pod Summary:</h2> + <h2 class="mt-4 mb-3">Pod Summary</h2> + <p>Confirm the specifications below, and select 'create' to save this pod. Otherwise, navigate upwards and modify it as needed.</p> <div class="row align-items-center"> <div class="col-xl-6 col-md-8 col-11"> <div class="card border-0"> @@ -143,8 +149,10 @@ <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" id="add_resource_modal_body"> - <h2>Resource</h2> - <div id="template-cards" class="row align-items-center justify-content-start"> + <p>Select a resource, then configure the image, hostname and cloud-init (optional).</p> + <p>For multi-node resources, select a tab to modify each individual node.</p> + <h2>Resource<span class="text-danger">*</span></h2> + <div id="template-cards" class="row flex-grow-1"> </div> <div id="template-config-section"> @@ -153,11 +161,11 @@ </ul> <!-- tabs --> <div id="resource_config_section"> - <h2>Image</h2> + <h2>Image<span class="text-danger">*</span></h2> <div id="image-cards" class="row justify-content-start align-items-center"> </div> <div class="form-group"> - <h2>Hostname</h2> + <h2>Hostname<span class="text-danger">*</span></h2> <input type="text" class="form-control" id="hostname-input" placeholder="Enter Hostname"> <h2>Cloud Init</h2> <div class="d-flex justify-content-center align-items-center"> @@ -184,6 +192,12 @@ <h5 class="modal-title">Configure Connections</h5> <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> </div> + <ul> + <li>Select an interface and a frame type to add a connection to a network.</li> + <li>An interface may send tagged or untagged frames on a single network, but not both.</li> + <li>Each interface may only be untagged on one network.</li> + <li>Reselect a connection to remove it.</li> + </ul> <div class="modal-body text-center"> <ul class="nav nav-tabs" role="tablist" id="configure-connections-tablist"> </ul> |