aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/base/account/booking_list.html45
-rw-r--r--src/templates/base/account/resource_list.html77
-rw-r--r--src/templates/base/base.html71
-rw-r--r--src/templates/base/booking/booking_detail.html320
-rw-r--r--src/templates/base/dashboard/genericselect.html30
-rw-r--r--src/templates/base/dashboard/landing.html35
-rw-r--r--src/templates/base/snapshot_workflow/steps/meta.html17
-rw-r--r--src/templates/base/snapshot_workflow/steps/select_host.html83
-rw-r--r--src/templates/base/workflow/book_a_pod.html121
-rw-r--r--src/templates/base/workflow/confirm.html56
-rw-r--r--src/templates/base/workflow/design_a_pod.html214
-rw-r--r--src/templates/base/workflow/no_workflow.html3
-rw-r--r--src/templates/base/workflow/viewport-base.html82
-rw-r--r--src/templates/base/workflow/viewport-element.html17
14 files changed, 430 insertions, 741 deletions
diff --git a/src/templates/base/account/booking_list.html b/src/templates/base/account/booking_list.html
index f9234bc..2af3915 100644
--- a/src/templates/base/account/booking_list.html
+++ b/src/templates/base/account/booking_list.html
@@ -6,15 +6,13 @@
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
<div class="card h-100">
<div class="card-header">
- <h3>Booking {{booking.id}}</h3>
+ <h3>{{booking.purpose}} ({{booking.id}})</h3>
</div>
<ul class="list-group list-group-flush h-100">
- <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">Lab: {{booking.lab}}</li>
+ <li class="list-group-item">Project: {{booking.project}}</li>
+ <li class="list-group-item">Start: {{booking.start}}</li>
+ <li class="list-group-item">End: {{booking.end}}</li>
</ul>
<div class="card-footer d-flex">
<a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a>
@@ -41,15 +39,14 @@
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
<div class="card h-100">
<div class="card-header">
- <h3>Booking {{booking.id}}</h3>
+ <h3>{{booking.purpose}} ({{booking.id}})</h3>
</div>
<ul class="list-group list-group-flush h-100">
- <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}}</li>
+ <li class="list-group-item">Lab: {{booking.lab}}</li>
+ <li class="list-group-item">Project: {{booking.project}}</li>
+ <li class="list-group-item">Start: {{booking.start}}</li>
+ <li class="list-group-item">End: {{booking.end}}</li>
</ul>
<div class="card-footer d-flex">
<a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
@@ -72,17 +69,15 @@
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
<div class="card h-100">
<div class="card-header">
- <h3>Booking {{booking.id}}</h3>
+ <h3>{{booking.purpose}} ({{booking.id}})</h3>
</div>
<ul class="list-group list-group-flush h-100">
- <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>
+ <li class="list-group-item">Owner: {{booking.owner}}</li>
+ <li class="list-group-item">Lab: {{booking.lab}}</li>
+ <li class="list-group-item">Project: {{booking.project}}</li>
+ <li class="list-group-item">Start: {{booking.start}}</li>
+ <li class="list-group-item">End: {{booking.end}}</li>
+
<div class="card-footer d-flex">
<a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
</div>
@@ -101,7 +96,7 @@
current_booking_id = booking_id;
}
- function submit_cancel_form() {
+ async function submit_cancel_form() {
var ajaxForm = $("#booking_cancel_form");
var formData = ajaxForm.serialize();
req = new XMLHttpRequest();
@@ -110,6 +105,8 @@
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onerror = function() { alert("problem submitting form"); }
req.send(formData);
+ await new Promise(r => setTimeout(r, 500)); // Quickest solution I could come up with to give liblaas time to mark it as deleted until we do an api rework
+ location.reload();
}
</script>
diff --git a/src/templates/base/account/resource_list.html b/src/templates/base/account/resource_list.html
index 33ccaff..c16fd07 100644
--- a/src/templates/base/account/resource_list.html
+++ b/src/templates/base/account/resource_list.html
@@ -1,21 +1,26 @@
{% extends "base.html" %}
+{% block extrahead %}
+<script src="/static/js/workflows/workflow.js"></script>
+{% endblock %}
{% block content %}
<div class="row">
-{% for resource in resources %}
+{% for resource in templates %}
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
<div class="card h-100">
<div class="card-header">
- <h3>Resource {{resource.id}}</h3>
+ <h3>{{resource.pod_name}}</h3>
</div>
<ul class="list-group list-group-flush h-100">
- <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>
+ <li class="list-group-item">Description: {{resource.pod_desc}}</li>
+ <li class="list-group-item">Lab: {{resource.lab_name}}</li>
+ <li class="list-group-item">Hosts: {% for h in resource.host_list %}{{h.hostname}}{% if not forloop.last %}, {% endif %}{% endfor %}</li>
+ <li class="list-group-item">Networks: {% for n in resource.networks %}{{n.name}}{% if not forloop.last %}, {% endif %}{% endfor %}</li>
+
</ul>
<div class="card-footer">
<button
class="btn btn-danger w-100"
- onclick='delete_resource({{resource.id}});'
+ onclick='delete_resource("{{resource.id}}");'
data-toggle="modal"
data-target="#resModal"
>Delete</button>
@@ -29,67 +34,19 @@
{% endfor %}
</div>
<script>
- var active_resources = {{active_resources|safe|default:"{}"}}
+ const user = "{{user}}"
var current_resource_id = -1;
function delete_resource(resource_id) {
document.getElementById("confirm_delete_button").removeAttribute("disabled");
- var warning = document.createTextNode("Are You Sure?");
- var warning_subtext = document.createTextNode("This cannot be undone");
- if(active_resources[resource_id]){
- var warning = document.createTextNode("This resource is being used or is scheduled to be used. It cannot be deleted.");
- var warning_subtext = document.createTextNode("If your booking just ended, you may need to give us a few minutes to clean it up before this can be removed.");
-
- document.getElementById("confirm_delete_button").disabled = true;
- }
- else {
- warning_text = "Are You Sure?";
- warning = document.createTextNode(warning_text);
- }
-
current_resource_id = resource_id;
- set_modal_text(warning, warning_subtext);
}
- function set_modal_text(title, text) {
- var clear = function(node) {
- while(node.lastChild) {
- node.removeChild(node.lastChild);
- }
+ async function submit_delete_form() {
+ if(LibLaaSAPI.deleteTemplate(current_resource_id)) {
+ location.reload();
+ } else {
+ alert('Unable to delete template.');
}
- var warning_title = document.getElementById("config_warning");
- var warning_text = document.getElementById("warning_subtext");
-
- clear(warning_title);
- clear(warning_text);
-
- warning_title.appendChild(title);
- warning_text.appendChild(text);
- }
-
- function list_configs(configs) {
- var list = document.getElementById("config_list");
- for(var i=0; i<configs.length; i++){
- var str = configs[i].name;
- var list_item = document.createElement("LI");
- list_item.appendChild(document.createTextNode(str));
- list.appendChild(list_item);
- }
- }
-
- function submit_delete_form() {
- var ajaxForm = $("#res_delete_form");
- var formData = ajaxForm.serialize();
- req = new XMLHttpRequest();
- var url = "delete/" + current_resource_id;
- req.onreadystatechange = function() {
- if (this.readyState == 4 && this.status == 200) {
- location.reload();
- }
- };
- req.open("POST", url, true);
- req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- req.onerror = function() { alert("problem submitting form"); }
- req.send(formData);
}
</script>
<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
diff --git a/src/templates/base/base.html b/src/templates/base/base.html
index 351bd9a..cd4269c 100644
--- a/src/templates/base/base.html
+++ b/src/templates/base/base.html
@@ -6,7 +6,6 @@
<!-- Custom CSS -->
<link href="{% static "css/base.css" %}" rel="stylesheet">
-<script src="/static/js/dashboard.js"></script>
{% endblock %}
{% block basecontent %}
@@ -101,7 +100,7 @@
<!-- Page Content -->
<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">
+ <div class="col-12 col-lg-auto px-0 border-right border-left bg-light z-3" role="navigation">
<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 ">
@@ -114,63 +113,45 @@
Create <i class="fas fa-angle-down rotate"></i>
</a>
<div class="collapse" id="createList">
- <a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
- Express Booking
- </a>
- <a href="#" onclick="create_workflow(0)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
+ <a href="{% url 'workflow:book_a_pod' %}" onclick="" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
Book a Pod
</a>
- <a href="#" onclick="create_workflow(1)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
+ <a href="{% url 'workflow:design_a_pod' %}" onclick="" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
Design a Pod
</a>
- <a href="#" onclick="create_workflow(2)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
- Create a Snapshot
- </a>
- <a href="#" onclick="create_workflow(3)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
- Configure Anuket
- </a>
</div>
{% endblock dropDown %}
- <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action nav-bg">
- Hosts
- </a>
- {% if user.is_authenticated %}
- <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action nav-bg">
- User List
- </a>
- {% endif %}
- <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action nav-bg">
- Booking List
+ <a class="list-group-item list-group-item-action nav-bg" data-toggle="collapse"
+ href="#accountList" role="button">
+ Account <i class="fas fa-angle-down rotate"></i>
</a>
- <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action nav-bg">
- Booking Statistics
+ <div class="collapse" id="accountList">
+ <a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
+ My Resources
</a>
- <a class="list-group-item list-group-item-action nav-bg" data-toggle="collapse"
- href="#accountList" role="button">
- Account <i class="fas fa-angle-down rotate"></i>
+ <a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
+ My Bookings
</a>
- <div class="collapse" id="accountList">
- <a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
- My Resources
- </a>
- <a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
- My Bookings
- </a>
- <a href="{% url 'account:my-images' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
- My Snapshots
- </a>
- </div>
- <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action nav-bg">
- Lab Info
+ </div>
+ <a class="list-group-item list-group-item-action nav-bg" data-toggle="collapse"
+ href="#labInfo" role="button">
+ Lab Info <i class="fas fa-angle-down rotate"></i>
+ </a>
+ <div class="collapse" id="labInfo">
+ <a href="" class="list-group-item list-group-item-action nav-bg">
+ Hosts
</a>
- <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action nav-bg">
- Inbox
+ <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action nav-bg">
+ Booking List
</a>
</div>
+ <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action nav-bg">
+ About Us
+ </a>
</div>
</nav>
</div>
- <div class="col overflow-auto flex-grow-1 d-flex flex-column h-100">
+ <div class="col flex-grow-1 d-flex flex-column h-100 overflow-control">
{% if title %}
<div class="row flex-shrink-1">
<div class="col-lg-12">
@@ -188,4 +169,4 @@
</div>
</div>
</div>
-{% endblock basecontent %}
+{% endblock basecontent %} \ No newline at end of file
diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html
index 70958f6..e4687ad 100644
--- a/src/templates/base/booking/booking_detail.html
+++ b/src/templates/base/booking/booking_detail.html
@@ -19,23 +19,29 @@ code {
<div class="card mb-3">
<div class="card-header d-flex">
<h4 class="d-inline">Overview</h4>
- <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button>
+ <!-- <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button> -->
</div>
<div class="collapse show" id="panel_overview">
<table class="table m-0">
<tr>
- <td>Username</td>
- <td>{{ posix_username }}</td>
+ <td>Owner</td>
+ <td>{{ booking.owner }}</td>
</tr>
<tr>
- <td>Purpose</td>
- <td>{{ booking.purpose }}</td>
+ <td>Collaborators</td>
+ <td>
+ {{ collab_string}}
+ </td>
</tr>
<tr>
<td>Project</td>
<td>{{ booking.project }}</td>
</tr>
<tr>
+ <td>Purpose</td>
+ <td>{{ booking.purpose }}</td>
+ </tr>
+ <tr>
<td>Start Time</td>
<td>{{ booking.start }}</td>
</tr>
@@ -44,185 +50,12 @@ code {
<td>{{ booking.end }}</td>
</tr>
<tr>
- <td>Pod Definition</td>
- <td>{{ booking.resource.template }}</td>
- </tr>
- <tr>
<td>Lab Deployed At</td>
<td>{{ booking.lab }}</td>
</tr>
</table>
</div>
</div>
- <div class="card my-3">
- <div class="card-header d-flex">
- <h4 class="d-inline">Pod</h4>
- <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
- </div>
- <div class="collapse show" id="pod_panel">
- <div class="card-body">
- <h4>{{host.bundle.template.copy_of.name}}</h4>
- {% for host in booking.resource.get_resources %}
- <h4>{{host.config.name}}</h4>
- <div class="overflow-auto">
- <table class="table m-0">
- <tr>
- <td>Hostname:</td>
- <td>{{host.config.name}}</td>
- </tr>
- <tr>
- <td>Machine:</td>
- <td>{{host.name}}</td>
- </tr>
- <tr>
- <td>Role:</td>
- <td>{{host.template.opnfvRole}}</td>
- </tr>
- <tr>
- <td>Is Headnode:</td>
- <td>{{host.config.is_head_node}}</td>
- <tr>
- <td>Image:</td>
- <td id="host_image_{{host.id}}">
- {{host.config.image}}
- <button
- class="btn btn-primary ml-4"
- data-toggle="modal"
- data-target="#imageModal"
- onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
- >Change/Reset</button></td>
- </tr>
- <tr>
- <td>RAM:</td>
- <td>{{host.profile.ramprofile.first.amount}}G,
- {{host.profile.ramprofile.first.channels}} channels</td>
- </tr>
- <tr>
- <td>CPU:</td>
- <td>
- <table class="table m-0">
- <tr>
- <td>Arch:</td>
- <td>{{host.profile.cpuprofile.first.architecture}}</td>
- </tr>
- <tr>
- <td>Cores:</td>
- <td>{{host.profile.cpuprofile.first.cores}}</td>
- </tr>
- <tr>
- <td>Sockets:</td>
- <td>{{host.profile.cpuprofile.first.cpus}}</td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>DISK:</td>
- <td>
- <table class="table m-0">
- <tr>
- <td>Size:</td>
- <td>{{host.profile.storageprofile.first.size}} GiB</td>
- </tr>
- <tr>
- <td>Type:</td>
- <td>{{host.profile.storageprofile.first.media_type}}</td>
- </tr>
- <tr>
- <td>Mount Point:</td>
- <td>{{host.profile.storageprofile.first.name}}</td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td>Interfaces:</td>
- <td>
- <table class="table m-0">
- {% for intprof in host.profile.interfaceprofile.all %}
- <tr>
- <td>
- <table class="table table-sm table-borderless m-0">
- <tr>
- <td>Name:</td>
- <td>{{intprof.name}}</td>
- </tr>
- <tr>
- <td>Speed:</td>
- <td>{{intprof.speed}}</td>
- </tr>
- </table>
- </td>
- </tr>
- {% endfor %}
- </table>
- </td>
- </tr>
- </table>
- </div>
- {% endfor %}
- </div>
- </div>
- </div>
- <div class="card my-3">
- <div class="card-header d-flex">
- <h4 class="d-inline">Diagnostic Information</h4>
- <button data-toggle="collapse" data-target="#diagnostics_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
- </div>
- <div class="collapse" id="diagnostics_panel">
- <div class="card-body">
- <table class="table m-0">
- <tr>
- <th>Job ID: </th>
- <td>{{booking.job.id}}</td>
- </tr>
- <tr>
- <th>CI Files</th>
- </tr>
- {% for host in booking.resource.get_resources %}
- <tr>
- <td>
- <table class="table m-0">
- <tr>
- <th>Host:</th>
- <td>{{host.name}}</td>
- </tr>
- <tr>
- <th>Configs:</th>
- </tr>
- {% for ci_file in host.config.cloud_init_files.all %}
- <tr>
- <td>{{ci_file.id}}</td>
- <td>
- <div class="modal fade" id="ci_file_modal_{{ci_file.id}}" tabindex="-1" role="dialog" aria-hidden="true">
- <div class="modal-dialog modal-xl" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title d-inline float-left">Cloud Config Content</h4>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="card-body">
- <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
-{{ci_file.text}}
- </pre>
- </div>
- </div>
- </div>
- </div>
- <button class="btn btn-primary" data-toggle="modal" data-target="#ci_file_modal_{{ci_file.id}}">Show File Content</button>
- </td>
- </tr>
- {% endfor %}
- </table>
- </td>
- </tr>
- {% endfor %}
- </table>
- </div>
- </div>
- </div>
</div>
<div class="col">
<div class="card mb-3">
@@ -230,144 +63,43 @@ code {
<h4 class="d-inline">Deployment Progress</h4>
<p>These are the different tasks that have to be completed before your deployment is ready.
If this is taking a really long time, let us know <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>
+ <!-- <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button> -->
</div>
<div class="collapse show" id="panel_tasks">
<table class="table m-0">
<tr>
<th></th>
+ <th>Resource</th>
<th>Status</th>
- <th>Lab Response</th>
- <th>Type</th>
</tr>
- {% for task in booking.job.get_tasklist %}
+ {% for host in statuses %}
<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>
+ <!-- Success,
+ Reimage,
+ InProgress,
+ Failure,
+ Import, -->
+ {% if host.status is 'Success' %}
+ <div class="rounded-circle bg-success square-20"></div>
+ {% elif host.status is 'InProgress' %}
+ <div class="spinner-border text-primary square-20"></div>
{% else %}
- <div class="rounded-circle bg-success square-20"></div>
+ <div class="rounded-circle bg-secondary square-20"></div>
{% endif %}
</td>
<td>
- {% if task.status < 100 %}
- PENDING
- {% elif task.status < 200 %}
- IN PROGRESS
- {% else %}
- DONE
- {% endif %}
- </td>
- <td>
- {% if task.message %}
- {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
- Message from Lab: <pre>--secret--</pre>
- {% else %}
- Message from Lab: <pre class="text-break pre-wrap">{{ task.message }}</pre>
- {% endif %}
- {% else %}
- No response provided (yet)
- {% endif %}
+ {{ host.hostname }}
</td>
<td>
- {{ task.type_str }}
+ {{ host.status }}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
- <div class="card my-3">
- <div class="card-header d-flex">
- <h4 class="d-inline">PDF</h4>
- <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
- </div>
- <div class="collapse show" id="pdf_panel">
- <div class="card-body">
- <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
-{{pdf}}
- </pre>
- </div>
- </div>
- </div>
</div>
</div>
-
-<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title d-inline float-left" id="exampleModalLabel">Host Image</h4>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- </button>
- </div>
- <div class="modal-body">
- <form id="image_host_form">
- {% csrf_token %}
- <select class="form-control" id="image_select" name="image_id">
- </select>
- <input id="host_id_input" type="hidden" name="host_id">
- </form>
- </div>
- <div class="modal-footer d-flex flex-column">
- <div>
- <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#modal_warning" aria-expanded="false">Reset Host</button>
- </div>
- <div class="border-top collapse mt-3 py-2 text-center w-100" id="modal_warning">
- <h3>Are You Sure?</h3>
- <p>This will wipe the disk and reimage the host</p>
- <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
- <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
- </div>
- </div>
- </div>
- </div>
-</div>
-
-<script>
- var image_mapping = {{image_mapping|safe}};
- var current_host_id = 0;
- function set_image_dropdown(profile_name, host_id) {
- document.getElementById("host_id_input").value = host_id;
- current_host_id = host_id;
- var dropdown = document.getElementById("image_select");
- var length = dropdown.length;
- //clear dropdown
- for(i=length-1; i>=0; i--){
- dropdown.options.remove(i);
- }
- var images = image_mapping[profile_name];
- var image_length = images.length;
- for(i=0; i<image_length; i++){
- var opt = document.createElement("OPTION");
- opt.value = images[i].value;
- opt.appendChild(document.createTextNode(images[i].name));
- dropdown.options.add(opt);
- }
-
- document.getElementById("modal_warning").classList.add("collapse");
- }
-
- function submit_image_form() {
- var ajaxForm = $("#image_host_form");
- var formData = ajaxForm.serialize();
- req = new XMLHttpRequest();
- req.open("POST", "/booking/modify/{{booking.id}}/image/", true);
- req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- req.onerror = function() { alert("problem submitting form"); }
- req.onreadystatechange = function() {
- if(req.readyState === 4) {
- node = document.getElementById("host_image_" + current_host_id);
- text = document.createTextNode(req.responseText);
- node.replaceChild(text, node.firstChild);
- }
- }
- req.send(formData);
- }
-</script>
{% endblock content %}
diff --git a/src/templates/base/dashboard/genericselect.html b/src/templates/base/dashboard/genericselect.html
deleted file mode 100644
index 863d33f..0000000
--- a/src/templates/base/dashboard/genericselect.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<div id="select_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="add_workflow({{addable_type_num}})"
- {% endif %}>Here
- </button>
- </h3>
- <div class="border-top"></div>
- <h3 id="select_header_section">Or select from the list below:</h3>
- <div id="select_section" class="d-flex flex-column">
- <form id="step_form" method="post" action="" class="form d-flex flex-column">
- {% csrf_token %}
- {{ form|default:"<p>no form loaded</p>" }}
- </form>
- </div>
-</div>
-
-<script>
- {% if disabled %}
- disable();
- {% endif %}
-</script>
-
-{% endblock content %}
diff --git a/src/templates/base/dashboard/landing.html b/src/templates/base/dashboard/landing.html
index 8d6a8f7..fea4deb 100644
--- a/src/templates/base/dashboard/landing.html
+++ b/src/templates/base/dashboard/landing.html
@@ -56,40 +56,15 @@
{% 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="/booking/quick/" >
- Book a Resource
+ <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>
+ <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>
- <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="btn-group-vertical w-100">
- <button class="btn btn-primary btnAnuket" onclick="create_workflow(0)">Book a Pod</button>
- <button class="btn btn-primary btnAnuket" onclick="create_workflow(1)">Design a Pod</button>
- </div>
{% endblock btnGrp %}
{% endif %}
</div>
-
- <!-- Returning users -->
- {% if not request.user.is_anonymous %}
- {% block returningUsers %}
- <div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
- <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="btn-group-vertical w-100">
- <button class="btn btn-primary btnAnuket" onclick="create_workflow(3)">Snapshot a Host</button>
- <a class="btn btn-primary btnAnuket" href="{% url 'account:my-bookings' %}">
- My Bookings
- </a>
- {% if manager == True %}
- <button class="btn btn-primary" onclick="continue_workflow()">
- Resume Workflow
- </button>
- {% endif %}
- </div>
- </div>
- {% endblock returningUsers %}
- {% endif %}
</div>
<div class="hidden_form d-none" id="form_div">
diff --git a/src/templates/base/snapshot_workflow/steps/meta.html b/src/templates/base/snapshot_workflow/steps/meta.html
deleted file mode 100644
index 88136d2..0000000
--- a/src/templates/base/snapshot_workflow/steps/meta.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-{% bootstrap_form_errors form type='non_fields' %}
-<div class="p-4">
- <form id="step_form" method="POST" class="form">
- {% csrf_token %}
- <div class="form-group">
- {% bootstrap_field form.name %}
- {% bootstrap_field form.description %}
- </div>
- </form>
-</div>
-{% endblock content %}
diff --git a/src/templates/base/snapshot_workflow/steps/select_host.html b/src/templates/base/snapshot_workflow/steps/select_host.html
deleted file mode 100644
index 4243145..0000000
--- a/src/templates/base/snapshot_workflow/steps/select_host.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-{% bootstrap_form_errors form type='non_fields' %}
-<form id="step_form" method="POST" class="form">
-{% csrf_token %}
-<input type="hidden" id="hidden_json_input", name="host"/>
-</form>
-<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(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 != null){
- selected_host.classList.remove("active");
- }
- selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
- selected_host.classList.add("active");
-}
-
-function draw_bookings(){
- var booking_hosts = {{booking_hosts|safe}};
- var bookings = [];
- var container = document.getElementById("host_select_container");
- for(var booking_id in booking_hosts){
- // 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 (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);
- }
- }
-}
-draw_bookings();
-if(initial){
- select(initial.booking_id, initial.hostname);
-}
-</script>
-{% endblock content %}
diff --git a/src/templates/base/workflow/book_a_pod.html b/src/templates/base/workflow/book_a_pod.html
new file mode 100644
index 0000000..7053bfd
--- /dev/null
+++ b/src/templates/base/workflow/book_a_pod.html
@@ -0,0 +1,121 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+{% block extrahead %}
+<script src="/static/js/workflows/common-models.js"></script>
+<script src="/static/js/workflows/workflow.js"></script>
+<script src="/static/js/workflows/book-a-pod.js"></script>
+{% endblock %}
+{% block content %}
+<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">
+ <div class="arrow arrow-up"></div>
+ </button>
+ </div>
+
+ <div id="next" class="row w-100 m-0">
+ <button class="btn btn-workflow-nav stretched-link m-0 p-0 mb-3" onclick="workflow.goNext()" id="workflow-next">
+ <div class="arrow arrow-down"></div>
+ </button>
+ </div>
+
+ <div class="scroll-container w-100 h-100 p-0">
+ <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:</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>
+
+ </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>
+ <div class="d-flex align-items-center">
+ <textarea name="ci-textarea" id="ci-textarea" rows="15" class="w-50"></textarea>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="booking_details">
+ <h2 class="mt-4 mb-3">Booking Details</h2>
+ <div class="form-group mb-0">
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <input id="input_project" class="form-control form-control-lg border border-dark p-5" type="text" placeholder="Project">
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <input id="input_purpose" class="form-control form-control-lg border border-dark p-5" type="text" placeholder = "Purpose">
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <span id="booking_details_error" class="text-danger col-xl-6 col-md-8 col-11"></span>
+ </div>
+ <div class="row align-items-center my-4">
+ <span id="booking_details_day_counter" class="col-md-1 col-2 p-0">Days: 1</span>
+ <input id="input_length" type="range" min="1" max="21" value="1" class="form-control form-control-lg col-xl-5 col-9 p-0" placeholder="Length" oninput="workflow.onchangeDays()">
+ </div>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="add_collabs">
+ <h2 class="mt-4 mb-3">Add Collaborators:</h2>
+ <div class="row">
+ <div class="col-xl-6 col-md-8 col-11 p-0 border border-dark">
+ {% bootstrap_field form.users label="Collaborators" %}
+ </div>
+ </div>
+ </div>
+
+ <div class="scroll-area pt-5 mx-5" id="booking_summary">
+ <h2 class="mt-4 mb-3">Booking Summary</h2>
+ <div class="row align-items-center">
+ <div class="card col-xl-6 col-md-8 col-11 border-0">
+ <ul class="list-group">
+ <li class="list-group-item">Booking Details
+ <ul id="booking_summary_booking_details">
+ </ul>
+ </li>
+ <li class="list-group-item">Collaborators
+ <ul id="booking_summary_collaborators">
+ </ul>
+ </li>
+ <li class="list-group-item">Hosts
+ <ul id="booking_summary_hosts">
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="row align-items-center mt-5">
+ <button class="btn btn-danger cancel-book-button p-0 mr-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickCancel()">Cancel</button>
+ <button class="btn btn-success cancel-book-button p-0 ml-2 col-xl-2 col-md-3 col-5" onclick="workflow.onclickConfirm()">Book</button>
+ </div>
+ </div>
+
+ </div>
+</div>
+
+<div class="hidden_form d-none">
+ <form id="token">
+ {% csrf_token %}
+ </form>
+</div>
+</body>
+
+<script>
+ const user = "{{user}}"
+ const workflow = new BookingWorkflow();
+ workflow.startWorkflow();
+ </script>
+{% endblock %}
diff --git a/src/templates/base/workflow/confirm.html b/src/templates/base/workflow/confirm.html
deleted file mode 100644
index bc8e4e3..0000000
--- a/src/templates/base/workflow/confirm.html
+++ /dev/null
@@ -1,56 +0,0 @@
-{% extends "workflow/viewport-element.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<div class="text-center">
- <h3>Confirm Session</h3>
-</div>
-<div class="container">
- <div class="row justify-content-center">
- <div class="col-auto">
- <pre>{{confirmation_info|escape}}</pre>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <div id="form_div" class="text-center p-4">
- <form id="step_form" action="/workflow/manager/" 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="/workflow/finish/" method="post">
- {% csrf_token %}
- </form>
- </div>
- </div>
- </div>
- </div>
-</div>
-<script>
- var select = document.getElementById("id_confirm");
-
- function formconfirm()
- {
- select.value = "True";
- submitStepForm();
- pop_workflow();
- }
- function formcancel()
- {
- pop_workflow();
- }
-</script>
-{% block element_messages %}
-
-{% endblock element_messages %}
-{% endblock content %}
diff --git a/src/templates/base/workflow/design_a_pod.html b/src/templates/base/workflow/design_a_pod.html
new file mode 100644
index 0000000..5d48273
--- /dev/null
+++ b/src/templates/base/workflow/design_a_pod.html
@@ -0,0 +1,214 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+{% block extrahead %}
+<script src="/static/js/workflows/common-models.js"></script>
+<script src="/static/js/workflows/workflow.js"></script>
+<script src="/static/js/workflows/design-a-pod.js"></script>
+{% endblock %}
+{% block content %}
+{% if dashboard == 'laas' %}
+
+<!-- Main Content -->
+<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">
+ <div class="arrow arrow-up"></div>
+ </button>
+ </div>
+
+ <div id="next" class="row w-100 m-0">
+ <button class="btn btn-workflow-nav stretched-link m-0 p-0 mb-3" onclick="workflow.goNext()" id="workflow-next">
+ <div class="arrow arrow-down"></div>
+ </button>
+ </div>
+
+ <div class="scroll-container w-100 h-100 p-0">
+
+ <!-- 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>
+ <h2 class="mt-4 mb-3">Select a Lab:</h2>
+ <div class="row card-deck" id="lab_cards">
+ </div>
+ </div>
+
+ <!-- Add Resources -->
+ <div class="scroll-area pt-5 mx-5" id="add_resources">
+ <h2 class="mt-4 mb-3">Add Resources:</h2>
+ <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">
+ <span class="" id="resource-count">0 / 8</span>
+ <button class="btn btn-success add-button p-0" onclick="workflow.onclickAddResource()">+</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Add Networks -->
+ <div class="scroll-area pt-5 mx-5" id="add_networks">
+ <h2 class="mt-4 mb-3">Add Networks:</h2>
+ <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">
+ <button class="btn btn-success add-button p-0" onclick="workflow.onclickAddNetwork()">+</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Configure Connections-->
+ <div class="scroll-area pt-5 mx-5" id="configure_connections">
+ <h2 class="mt-4 mb-3">Configure Connections:</h2>
+ <div class="row card-deck align-items-center" id="connection_cards">
+ </div>
+ </div>
+
+ <!-- Pod Details-->
+ <div class="scroll-area pt-5 mx-5" id="pod_details">
+ <h2 class="mt-4 mb-3">Pod Details</h2>
+ <div class="form-group">
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <input id="pod-name-input" class="form-control form-control-lg border border-dark p-3" type="text" placeholder="Pod Name">
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <textarea id="pod-desc-input" class="form-control form-control-lg border border-dark pt-3 pl-3" rows="5" placeholder="Pod Description"></textarea>
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" id="pod-public-input">
+ <label class="custom-control-label" for="pod-public-input">Make pod template public?</label>
+ </div>
+ </div>
+ </div>
+ <div class="row align-items-center my-4">
+ <div class="col-xl-6 col-md-8 col-11">
+ <span id="pod_details_error" class="text-danger"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- Pod Summary-->
+ <div class="scroll-area pt-5 mx-5" id="pod_summary">
+ <h2 class="mt-4 mb-3">Pod Summary:</h2>
+ <div class="row align-items-center">
+ <div class="col-xl-6 col-md-8 col-11">
+ <div class="card border-0">
+ <ul class="list-group">
+ <li class="list-group-item">Pod Details
+ <ul id="pod_summary_pod_details">
+ </ul>
+ </li>
+ <li class="list-group-item">Resources
+ <ul id="pod_summary_hosts">
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="row align-items-center mt-5">
+ <div class="col-xl-2 col-md-3 col-5"><button class="btn btn-danger cancel-book-button p-0 w-100" onclick="workflow.onclickDiscardTemplate()">Discard</button></div>
+ <div class="col-xl-2 col-md-3 col-5"><button class="btn btn-success cancel-book-button p-0 w-100" onclick = "workflow.onclickSubmitTemplate()">Create</button></div>
+ </div>
+ </div>
+
+
+ <!-- End of workflow container and scroll container -->
+ </div>
+ </div>
+
+
+
+ <!-- Modals -->
+
+ <!-- Add Host Modal -->
+ <div class="modal fade" id="resource_modal" tabindex="-1">
+ <div class="modal-dialog modal-xl">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Add Resource</h5>
+ <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</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">
+ </div>
+
+ <div id="template-config-section">
+ <ul class="nav nav-tabs" role="tablist" id="add_resource_tablist">
+ <!-- add a tab per host in template -->
+ </ul>
+ <!-- tabs -->
+ <div id="resource_config_section">
+ <h2>Image</h2>
+ <div id="image-cards" class="row justify-content-start align-items-center">
+ </div>
+ <div class="form-group">
+ <h2>Hostname</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">
+ <textarea name="ci-textarea" id="ci-textarea" rows="5" class="w-100"></textarea>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p id="add-host-error-msg" class="text-danger"></p>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-danger" data-dismiss="modal">Cancel</button>
+ <button class="btn btn-success" onclick="workflow.onclickSubmitHostConfig()">Submit</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+<!-- Configure Connections modal -->
+<div class="modal fade" id="connection_modal" tabindex="-1">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Configure Connections</h5>
+ <button class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
+ </div>
+ <div class="modal-body text-center">
+ <ul class="nav nav-tabs" role="tablist" id="configure-connections-tablist">
+ </ul>
+ <table id="connections_widget" class="table table-bordered">
+ </table>
+ </div>
+ <div class="modal-footer">
+ <button class="btn btn-success" data-dismiss="modal" id="connection-modal-submit" onclick="workflow.onclickSubmitConnectionConfig()">Confirm</button>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="hidden_form d-none">
+ <form id="token">
+ {% csrf_token %}
+ </form>
+</div>
+
+</body>
+
+<script>
+ const user = "{{user}}"
+ const workflow = new DesignWorkflow();
+ workflow.startWorkflow();
+</script>
+{% endif %}
+{% endblock %}
diff --git a/src/templates/base/workflow/no_workflow.html b/src/templates/base/workflow/no_workflow.html
deleted file mode 100644
index 0ac6549..0000000
--- a/src/templates/base/workflow/no_workflow.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<script>
- top.window.location.href='/';
-</script>
diff --git a/src/templates/base/workflow/viewport-base.html b/src/templates/base/workflow/viewport-base.html
deleted file mode 100644
index 88229ca..0000000
--- a/src/templates/base/workflow/viewport-base.html
+++ /dev/null
@@ -1,82 +0,0 @@
-{% extends "base.html" %}
-{% load staticfiles %}
-
-{% load bootstrap4 %}
-
-{% block content %}
-
-<!-- Pagination -->
-<div class="row mt-3">
- <div class="col">
- <nav>
- <ul class="pagination d-flex flex-row" id="topPagination">
- <li class="page-item flex-shrink-1 page-control" id="workflow-nav-back">
- <a class="page-link" href="#" id="gob" onclick="submit_and_go('prev')">
- <i class="fas fa-backward"></i> Back
- </a>
- </li>
- <li class="page-item flex-grow-1">
- <a class="page-link disabled" href="#">
- <i class="far"></i>
- </a>
- </li>
- <li class="page-item flex-shrink-1 page-control" id="workflow-nav-next">
- <a class="page-link text-right" href="#" id="gof" onclick="submit_and_go('next')">
- Next <i class="fas fa-forward"></i>
- </a>
- </li>
- </ul>
- </nav>
- </div>
-</div>
- <div class=”row”>
- <div class=”col-xs-6 col-md-4”>
- Is something not working right? Let us know <a href="mailto::{{contact_email}}"> here! </a>
- </div>
-</div>
-<!-- Top header -->
-<div class="row">
- <div class="col">
- <div id="iframe_header" class="row view-header">
- <div class="col-lg-12">
- <h1 class="d-inline-block" id="view_title"></h1>
- <span class="description text-muted" id="view_desc"></span>
- <p id="view_message"></p>
- </div>
- </div>
- </div>
- <div class="col-auto align-self-center d-flex">
- <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="pop_workflow()">Cancel</button>
- </div>
-</div>
-<div class="row d-flex flex-column flex-grow-1 mt-3">
- <div class="col flex-grow-1">
- <div id="formContainer" class="h-100 w-100"></div>
- </div>
-</div>
-{% csrf_token %}
-<script type="text/javascript">
- function submit_and_go(to) {
- submitStepForm(to);
- }
-
- $(document).ready(function(){
- $.ajax({
- url: "/workflow/manager/",
- dataType: "json",
- success: update_page
- });
- });
-
- // global variable required for mxgraph to load its css and images
- mxBasePath = '{% static "node_modules/mxgraph/javascript/src" %}';
-</script>
-<!-- lazy load scripts -->
-<script type="text/javascript" src="{% static "node_modules/mxgraph/javascript/mxClient.js" %}" ></script>
-<!-- end lazy load scripts -->
-<div class="d-none" id="workflow_pop_form_div">
- <form id="workflow_pop_form" action="/workflow/finish/" method="post">
- {% csrf_token %}
- </form>
-</div>
-{% endblock content %}
diff --git a/src/templates/base/workflow/viewport-element.html b/src/templates/base/workflow/viewport-element.html
deleted file mode 100644
index db4da54..0000000
--- a/src/templates/base/workflow/viewport-element.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% load bootstrap4 %}
-{% load staticfiles %}
-
-{% block basecontent %}
-
- {% block content %}
- {% endblock content %}
-
- <div class="messages">
- {% block element_messages %}
- {% bootstrap_messages %}
- {% endblock %}
- </div>
-{% endblock basecontent %}
-
-{% block extrajs %}
-{% endblock extrajs %}