From e3842fee2abb084d020acf7b868af745b8a66c18 Mon Sep 17 00:00:00 2001
From: Sawyer Bergeron <sawyerbergeron@gmail.com>
Date: Thu, 17 Jan 2019 11:30:35 -0500
Subject: Add Quick-Booking Workflow

Users can now quickly provision a single-host pod without having to
configure unecessary networking. This is intended to be analogous to the
workflow used during LaaS 1.0, and to speed up the process of creating a
booking for users who do not need more than a single host (for virtual
deployments)

Change-Id: Ia19cea9a42bbb1df57aad05af8f8ea821395664d
Signed-off-by: Sawyer Bergeron <sawyerbergeron@gmail.com>
---
 dashboard/src/templates/booking/quick_deploy.html  | 206 +++++++++++++++++++++
 dashboard/src/templates/dashboard/landing.html     |   1 +
 .../dashboard/multiple_select_filter_widget.html   |  73 ++++----
 .../dashboard/searchable_select_multiple.html      |   7 +-
 4 files changed, 247 insertions(+), 40 deletions(-)
 create mode 100644 dashboard/src/templates/booking/quick_deploy.html

(limited to 'dashboard/src/templates')

diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html
new file mode 100644
index 0000000..3837315
--- /dev/null
+++ b/dashboard/src/templates/booking/quick_deploy.html
@@ -0,0 +1,206 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap3 %}
+{% block content %}
+<style>
+    .grid_container {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        padding: 30px;
+    }
+    .grid_element {
+        border-radius: 3px;
+        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+        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;
+    }
+</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 %}
+</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 configuration_pane grid_element_1third">
+    {% bootstrap_field form.hostname %}
+    {% bootstrap_field form.image %}
+    {% bootstrap_field form.installer %}
+    {% bootstrap_field form.scenario %}
+</div>
+</div>
+<script type="text/javascript">
+    var normalize = function(data)
+    {
+        //converts the top level keys in data to map to lists
+        var normalized = {}
+        for( var key in data ){
+            normalized[key] = [];
+            for( var subkey in data[key] ){
+                normalized[key].push(data[key][subkey]);
+            }
+        }
+        return normalized;
+    }
+    var update_page_contents = function(response)
+    {
+        document.open();
+        document.write(response);
+        document.close();
+    }
+
+    //form hamdler code
+    submit_form = function()
+    {
+        //altered from initial prototype: form submits automatically,
+        //but needs formatting for multiple select field
+        var data = normalize(result);
+        data = JSON.stringify(data);
+        document.getElementById("filter_field").value = data;
+    }
+
+    var sup_image_dict = {{ image_filter|safe }};
+    var sup_installer_dict = {{ installer_filter|safe }};
+    var sup_scenario_dict = {{ scenario_filter|safe }};
+
+    function imageHider() {
+        var data = normalize(result);
+        var drop = document.getElementById("id_image");
+        for( var i=0; i < drop.length; i++ )
+        {
+            if ( drop.options[i].text == '---------' )
+            {
+                drop.selectedIndex = i;
+            }
+        }
+
+        $('#id_image').children().hide();
+
+        var empty_map = {}
+
+        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
+            {
+                var lab_pk = ""
+                for( var j in data["labs"][0] )
+                {
+                    if( j in {} ) { continue; }
+                    else { lab_pk = j; break; }
+                }
+                var host_pk = "";
+                for( var j in data["hosts"][0] )
+                {
+                    if( j in {} ) { continue; }
+                    else { host_pk = j; break; }
+                }
+                if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
+                {
+                    drop.childNodes[i].style.display = "inherit";
+                }
+            }
+        }
+    }
+
+    $('#id_image').children().hide();
+    $('#id_installer').children().hide();
+    $('#id_scenario').children().hide();
+
+
+    Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
+        element.addEventListener('click', imageHider);
+    });
+
+    function installerHider() {
+        dropFilter("id_installer", sup_installer_dict, "id_image");
+        scenarioHider();
+    }
+    document.getElementById('id_image').addEventListener('change', installerHider);
+
+    function scenarioHider() {
+        dropFilter("id_scenario", sup_scenario_dict, "id_installer");
+    }
+    document.getElementById('id_installer').addEventListener('change', scenarioHider);
+
+    function dropFilter(target, target_filter, master) {
+        ob = document.getElementById(target);
+
+        for(var i=0; i<ob.options.length; i++) {
+            if ( ob.options[i].text == '---------' ) {
+                ob.selectedIndex = i;
+                }
+        }
+
+        targ_id = "#" + target;
+        $(targ_id).children().hide();
+        var drop = document.getElementById(master);
+        var opts = target_filter[drop.options[drop.selectedIndex].value];
+        if (!opts) {
+            opts = {};
+        }
+        var emptyMap = {}
+
+        var map = Object.create(null);
+        for (var i = 0; i < opts.length; i++) {
+            var j = opts[i];
+            map[j] = true;
+        }
+
+        for (var i = 0; i < document.getElementById(target).childNodes.length; i++) {
+            if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) {
+                document.getElementById(target).childNodes[i].style.display = "inherit";
+            }
+        }
+    }
+</script>
+    <button onclick="submit_form();" class="btn btn-success">Confirm</button>
+</form>
+<script>
+    //context vars
+    var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}";
+    var prefill_purpose = "{{prefill_purpose|default:""|safe}}";
+    var prefill_project = "{{prefill_project|default:""|safe}}";
+    var prefill_hostname = "{{prefill_hostname|default:""|safe}}";
+
+    //to handle prefill
+    function prefill_host_select_field(data)
+    {
+        //
+        if(data)
+        {
+            make_selection(data);
+        }
+    }
+
+    //call init functions
+    prefill_host_select_field(prefill_host_selection);
+</script>
+{% endblock %}
diff --git a/dashboard/src/templates/dashboard/landing.html b/dashboard/src/templates/dashboard/landing.html
index 40e0146..6bbb25b 100644
--- a/dashboard/src/templates/dashboard/landing.html
+++ b/dashboard/src/templates/dashboard/landing.html
@@ -39,6 +39,7 @@
 </style>
 {% if not request.user.is_anonymous %}
 <div class='wf_create_div'>
+<a class="wf_create btn btn-primary" style="color: #FFF;" href="/booking/quick/">Create a Quick Booking</a>
 <button class="wf_create btn btn-primary" onclick="cwf(0)">Create a Booking</button>
 <button class="wf_create btn btn-primary" onclick="cwf(1)">Create a Pod</button>
 <button class="wf_create btn btn-primary" onclick="cwf(2)">Configure a Pod</button>
diff --git a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
index 31b8f33..9e33896 100644
--- a/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/dashboard/src/templates/dashboard/multiple_select_filter_widget.html
@@ -97,7 +97,7 @@
 <script>
 var initialized = false;
 var mapping = {{ mapping|safe }};
-var items = {{ items|safe }};
+var filter_items = {{ filter_items|safe }};
 var result = {};
 var selection = {{selection_data|default_if_none:"null"|safe}};
 var dropdown_count = 0;
@@ -108,31 +108,32 @@ make_selection({{selection_data|safe}});
 
 function make_selection( selection_data ){
     if(!initialized) {
-        init();
+        filter_field_init();
     }
     for(var k in selection_data) {
         selected_items = selection_data[k];
-        for( var item in selected_items ){
-            var node = items[item];
+        for( var selected_item in selected_items ){
+            var node = filter_items[selected_item];
             if(!node['multiple']){
-                var input_value = selected_items[item];
+                var input_value = selected_items[selected_item];
                 if( input_value != 'false' ) {
                     select(node);
                     markAndSweep(node);
                 }
-                var div = document.getElementById(item)
+                var div = document.getElementById(selected_item)
+                var inputs = div.parentNode.getElementsByTagName("input")
                 var input = div.parentNode.getElementsByTagName("input")[0]
                 input.value = input_value;
-                updateResult(item);
+                updateResult(selected_item);
             } else {
-                make_multiple_selection(selected_items, item);
+                make_multiple_selection(selected_items, selected_item);
             }
         }
     }
 }
 
 function make_multiple_selection(data, item_class){
-    var node = items[item_class];
+    var node = filter_items[item_class];
     select(node);
     markAndSweep(node);
     prepop_data = data[item_class];
@@ -143,8 +144,8 @@ function make_multiple_selection(data, item_class){
 }
 
 function markAndSweep(root){
-    for(var nodeId in items) {
-        node = items[nodeId];
+    for(var nodeId in filter_items) {
+        node = filter_items[nodeId];
         node['marked'] = true; //mark all nodes
         //clears grey background of everything
     }
@@ -164,17 +165,17 @@ function markAndSweep(root){
             var neighbors = mapping[mappingId];
             for(var neighId in neighbors) {
                 neighId = neighbors[neighId];
-                var neighbor = items[neighId];
+                var neighbor = filter_items[neighId];
                 toCheck.push(neighbor);
             }
         }
     }
 
     //now remove all nodes still marked
-    for(var nodeId in items){
-        node = items[nodeId];
+    for(var nodeId in filter_items){
+        node = filter_items[nodeId];
         if(node['marked']){
-            disable(node);
+            disable_node(node);
         }
     }
 }
@@ -186,8 +187,8 @@ function process(node) {
     else {
         var selected = []
         //remember the currently selected, then reset everything and reselect one at a time
-        for(var nodeId in items) {
-            node = items[nodeId];
+        for(var nodeId in filter_items) {
+            node = filter_items[nodeId];
             if(node['selected']) {
                 selected.push(node);
             }
@@ -205,9 +206,9 @@ function process(node) {
 function select(node) {
     elem = document.getElementById(node['id']);
     node['selected'] = true;
-    elem.classList.remove('cleared_node')
-    elem.classList.remove('disabled_node')
-    elem.classList.add('selected_node')
+    elem.classList.remove('cleared_node');
+    elem.classList.remove('disabled_node');
+    elem.classList.add('selected_node');
     var input = elem.parentNode.getElementsByTagName("input")[0];
     input.disabled = false;
     input.value = true;
@@ -218,27 +219,27 @@ function clear(node) {
     node['selected'] = false;
     node['selectable'] = true;
     elem.classList.add('cleared_node')
-    elem.classList.remove('disabled_node')
-    elem.classList.remove('selected_node')
+    elem.classList.remove('disabled_node');
+    elem.classList.remove('selected_node');
     elem.parentNode.getElementsByTagName("input")[0].disabled = true;
 }
 
-function disable(node) {
+function disable_node(node) {
     elem = document.getElementById(node['id']);
     node['selected'] = false;
     node['selectable'] = false;
-    elem.classList.remove('cleared_node')
-    elem.classList.add('disabled_node')
-    elem.classList.remove('selected_node')
+    elem.classList.remove('cleared_node');
+    elem.classList.add('disabled_node');
+    elem.classList.remove('selected_node');
     elem.parentNode.getElementsByTagName("input")[0].disabled = true;
 }
 
 function processClick(id, multiple){
     if(!initialized){
-        init();
+        filter_field_init();
     }
     var element = document.getElementById(id);
-    var node = items[id];
+    var node = filter_items[id];
     if(!node['selectable']){
         return;
     }
@@ -259,11 +260,11 @@ function processClick(id, multiple){
 
 function processClickMultipleObject(node){
     select(node);
-    add_item(node);
+    add_node(node);
     process(node);
 }
 
-function add_item(node){
+function add_node(node){
     return add_item_prepopulate(node, {});
 }
 
@@ -364,15 +365,15 @@ function remove_dropdown(id){
         }
     }
     if(deselect_class){
-        clear(items[div_class]);
+        clear(filter_items[div_class]);
     }
 }
 
 function updateResult(nodeId){
     if(!initialized){
-        init();
+        filter_field_init();
     }
-    if(!items[nodeId]['multiple']){
+    if(!filter_items[nodeId]['multiple']){
         var node = document.getElementById(nodeId);
         var value = {}
         value[nodeId] = node.parentNode.getElementsByTagName("input")[0].value;
@@ -391,10 +392,10 @@ function updateObjectResult(parentElem){
     result[node_type][parentElem.id] = input;
 }
 
-function init() {
-    for(nodeId in items) {
+function filter_field_init() {
+    for(nodeId in filter_items) {
         element = document.getElementById(nodeId);
-        node = items[nodeId];
+        node = filter_items[nodeId];
         result[element.parentNode.parentNode.id] = {}
         }
     initialized = true;
diff --git a/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index ee460dd..c08fbe5 100644
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/src/templates/dashboard/searchable_select_multiple.html
@@ -116,6 +116,7 @@
     string_trie.isComplete = false;
 
     var added_items = [];
+    var initial_log = {{ initial|safe }};
 
     var added_template = {{ added_list|default:"{}" }};
 
@@ -128,7 +129,7 @@
         entry_p.innerText = default_entry;
     }
 
-    init();
+    search_field_init();
 
     if( show_from_noentry )
     {
@@ -149,7 +150,7 @@
         }
     }
 
-    function init() {
+    function search_field_init() {
         build_all_tries(items);
 
         var initial = {{ initial|safe }};
@@ -342,14 +343,12 @@
                 added_items.push(item);
             }
         }
-
         update_selected_list();
         document.getElementById("user_field").focus();
     }
 
     function remove_item(item_ref)
     {
-
         item = Object.values(items)[item_ref];
         var index = added_items.indexOf(item);
         added_items.splice(index, 1);
-- 
cgit 1.2.3-korg