aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/base/workflow/design_a_pod.html
diff options
context:
space:
mode:
authorJustin Choquette <jchoquette@iol.unh.edu>2023-06-08 12:46:53 -0400
committerJustin Choquette <jchoquette@iol.unh.edu>2023-07-21 13:17:51 -0400
commita09db9f287a02873c0226759f8ea444bb304cd59 (patch)
tree59e744e4b998973a808abbae2d21fbdd6201d829 /src/templates/base/workflow/design_a_pod.html
parent8ddc7e820e120f1dde4e901d3cb6f1dd3f281e65 (diff)
LaaS 3.0 Almost MVP
Change-Id: Ided9a43cf3088bb58a233dc459711c03f43e11b8 Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>
Diffstat (limited to 'src/templates/base/workflow/design_a_pod.html')
-rw-r--r--src/templates/base/workflow/design_a_pod.html214
1 files changed, 214 insertions, 0 deletions
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 %}