Lab as a Service 2.0

See changes here:
https://wiki.opnfv.org/display/INF/Pharos+Laas

Change-Id: I59ada5f98e70a28d7f8c14eab3239597e236ca26
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

5 files changed, 677 insertions, 0 deletions

diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html
new file mode 100644
index 0000000..555fa56
--- /dev/null
+++ b/src/templates/workflow/confirm.html
@@ -0,0 +1,125 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% 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;">
+    <h3>Confirm  Session</h3>
+</div>
+<div id="vlan_warning"></div>
+<form id="vlan_form" action="/wf/workflow/" method="post">
+    {% 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>
+</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>
+</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");
+
+    function delete_manager()
+    {
+        var form = $("#manager_delete_form");
+        var formData = form.serialize();
+        var req = new XMLHttpRequest();
+        req.open("POST", "/wf/workflow/finish/", false);
+        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        req.onerror = function() { alert("problem with cleaning up session"); }
+        req.onreadystatechange = function() { if(req.readyState === 4 ) { parent.redirect_root(); } }
+        req.send(formData);
+    }
+
+    function formconfirm()
+    {
+        select.value = "True";
+        document.getElementById("confirmation_form").submit();
+    }
+    function formcancel()
+    {
+        select.value = "False";
+        document.getElementById("confirmation_form").submit();
+    }
+
+    var confirmed = {{bypassed|default:"false"}};
+    if( confirmed )
+    {
+        delete_manager();
+    }
+</script>
+<script>
+
+function fixVlans() {
+    document.getElementById("vlan_input").value = "True";
+    document.getElementById("vlan_form").submit();
+}
+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 %}
+{% endblock content %}
+{% block onleave %}
+//document.getElementById("confirmation_form").submit();
+{% endblock %}
diff --git a/src/templates/workflow/no_workflow.html b/src/templates/workflow/no_workflow.html
new file mode 100644
index 0000000..ff8aab3
--- /dev/null
+++ b/src/templates/workflow/no_workflow.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% block content %}
+<h3>If you would like to create a booking or a resource, please use the links on the sidebar or from the homepage</h3>
+<a href="/">Go Home</a>
+{% endblock content %}
diff --git a/src/templates/workflow/resource_select.html b/src/templates/workflow/resource_select.html
new file mode 100644
index 0000000..c319ff5
--- /dev/null
+++ b/src/templates/workflow/resource_select.html
@@ -0,0 +1,50 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% 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
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
new file mode 100644
index 0000000..fd9b638
--- /dev/null
+++ b/src/templates/workflow/viewport-base.html
@@ -0,0 +1,426 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% load bootstrap3 %}
+
+{% block content %}
+
+<style>
+    .go_btn{
+
+        position: absolute;
+        width: 100px;
+        top: 170px;
+        height: calc(100% - 170px);
+
+    }
+    .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 %}
+
+
+
+    .options{
+        position: absolute;
+        top: 60px;
+        right: 20px;
+    }
+
+    #breadcrumbs {
+        padding: 4px;
+    }
+    .step{
+        background: #DEEED3;
+        display: inline;
+        padding: 5px;
+        margin: 1px;
+    }
+
+    .step_active{
+        background: #5EC392;
+        display: inline;
+        padding: 5px;
+        margin: 1px;
+        font-weight: bold;
+    }
+
+    .step_untouched
+    {
+        background: #98B0AF;
+    }
+
+    .step_invalid
+    {
+        background: #CC3300;
+    }
+
+    .step_valid
+    {
+        background: #0FD57D;
+    }
+
+ #viewport-iframe
+ {
+     height: calc(100vh - 450);
+ }
+
+
+</style>
+
+<button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button>
+<button id="gob" onclick="go(step-1)" class="btn btn go_btn go_back">Go Back</button>
+
+<div class="options">
+    <button class="btn" onclick="cancel_wf()">Cancel</button>
+</div>
+<div class="btn_wrapper">
+<div id="breadcrumbs">
+</div>
+</div>
+{% csrf_token %}
+
+<script type="text/javascript">
+
+
+    update_context();
+    var step = 0;
+    var page_count = 0;
+    var context_data = false;
+
+    function go(to)
+    {
+        step_on_leave();
+        request_leave(to);
+    }
+
+    function request_leave(to)
+    {
+        $.ajax({
+            type: "GET",
+            url: "/wf/manager/",
+            beforeSend: function(request) {
+                request.setRequestHeader("X-CSRFToken",
+                $('input[name="csrfmiddlewaretoken"]').val());
+            },
+            success: function (data) {
+                confirm_permission(to, data);
+                update_page(data);
+            }
+        });
+    }
+
+    function confirm_permission(to, data)
+    {
+        if( errors_exist(data) )
+        {
+            var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
+            if( !continueanyway )
+            {
+                return;
+            }
+        }
+        if( to >= page_count )
+        {
+            to = page_count-1;
+        }
+        else if( to < 0 )
+        {
+            to = 0;
+        }
+        var problem = function() {
+            alert("There was a problem");
+        }
+        //makes an asynch request
+        req = new XMLHttpRequest();
+        url = "/wf/workflow/?step=" + to;
+        req.open("GET", url, true);
+        req.onload = function(e) {
+            if(req.readyState === 4){
+                if(req.status < 300){
+                    document.getElementById("viewport-iframe").srcdoc = this.responseText;
+                } else { problem(); }
+            } else { problem(); }
+        }
+        req.onerror = problem;
+        req.send();
+    }
+
+    function step_on_leave()
+    {
+        document.getElementById("viewport-iframe").contentWindow.step_on_leave();
+    }
+
+    function errors_exist(data)
+    {
+        var stat = data['steps'][data['active']]['valid'];
+        if( stat >= 100 && stat < 200 )
+        {
+            return true;
+        }
+        else
+        {
+            return false;
+        }
+    }
+
+    function update_context() {
+        $.ajax({
+            type: "GET",
+            url: "/wf/manager/",
+            beforeSend: function(request) {
+                request.setRequestHeader("X-CSRFToken",
+                $('input[name="csrfmiddlewaretoken"]').val());
+            },
+            success: function (data) {
+                update_page(data);
+            }
+        });
+    }
+
+    function update_page(data)
+    {
+        context_data = data;
+        update_breadcrumbs(data);
+    }
+
+    function update_breadcrumbs(meta_json) {
+        step = meta_json['active'];
+        page_count = meta_json['steps'].length;
+        //remove all children of breadcrumbs so we can redraw
+        var container = document.getElementById("breadcrumbs");
+        while(container.firstChild){
+            container.removeChild(container.firstChild);
+        }
+        //draw enough rows for all steps
+        var depth = meta_json['max_depth'];
+        for(var i=0; i<=depth; i++){
+            var div = document.createElement("DIV");
+            div.id = "row"+i;
+            if(i<depth){
+                div.style['margin-bottom'] = "7px";
+            }
+            if(i>0){
+                div.style['margin-top'] = "7px";
+            }
+            container.appendChild(div);
+        }
+        draw_steps(meta_json);
+    }
+
+    function draw_steps(meta_json){
+        var all_relations = meta_json['relations'];
+        var relations = [];
+        var active_steps = [];
+        var active_step = step;
+        while(active_step < meta_json['steps'].length){
+            active_steps.push(active_step);
+            var index = meta_json['parents'][active_step];
+            var relation = all_relations[index];
+            relations.push(relation);
+            active_step = relation['parent'];
+        }
+        var child_index = meta_json['children'][step];
+        var my_children = all_relations[child_index];
+        if(my_children){
+            relations.push(my_children);
+        }
+        draw_relations(relations, meta_json, active_steps);
+    }
+
+    function draw_relations(relations, meta_json, active_steps){
+        for(var i=0; i<relations.length; i++){
+            var relation = relations[i];
+            var children_container = document.createElement("DIV");
+            children_container.style['display'] = "inline";
+            children_container.style['margin'] = "3px";
+            children_container.style['padding'] = "3px";
+            console.log("meta_json: ");
+            console.log(meta_json);
+            for(var j=0; j<relation['children'].length; j++){
+                var step_json = meta_json['steps'][relation['children'][j]];
+                step_json['index'] = relation['children'][j];
+                var active = active_steps.indexOf(step_json['index']) > -1;
+                var step_button = create_step(meta_json['steps'][relation['children'][j]], active);
+                children_container.appendChild(step_button);
+            }
+            var parent_div = document.getElementById("row" + relation['depth']);
+            parent_div.appendChild(children_container);
+        }
+    }
+
+    function create_step(step_json, active){
+        var step_dom = document.createElement("DIV");
+        if(active){
+            step_dom.className = "step_active";
+            console.log(step_json['message']);
+
+        } else{
+            step_dom.className = "step";
+        }
+        step_dom.appendChild(document.createTextNode(step_json['title']));
+        var code = step_json['valid'];
+        stat = "";
+        msg = "";
+        if( code < 100 )
+        {
+            step_dom.classList.add("step_untouched");
+
+            stat = "";
+            msg = "";
+        }
+        else if( code < 200 )
+        {
+            step_dom.classList.add("step_invalid");
+            stat = "invalid";
+            msg = step_json['message'];
+        }
+        else if( code < 300 )
+        {
+            step_dom.classList.add("step_valid");
+            stat = "valid";
+            msg = step_json['message'];
+        }
+        if(active)
+        {
+            update_message(msg, stat);
+        }
+
+        var step_number = step_json['index'];
+        step_dom.onclick = function(){ go(step_number); }
+        //TODO: background color and other style
+        return step_dom;
+    }
+
+    function cancel_wf(){
+        $.ajax({
+            type: "POST",
+            url: "/wf/manager/",
+            data: {"cancel":"",},
+            beforeSend: function(request) {
+                request.setRequestHeader("X-CSRFToken",
+                $('input[name="csrfmiddlewaretoken"]').val()
+                );
+            },
+            success: redirect_root()
+        });
+    }
+
+    function redirect_root()
+    {
+        window.location.replace('/');
+    }
+
+    function add_wf(type){
+        add_wf_internal(type, false);
+    }
+
+    function add_edit_wf(type, target){
+        add_wf_internal(type, target);
+    }
+
+    function add_wf_internal(type, itemid){
+        data = {"add": type};
+        if(itemid){
+            data['target'] = itemid;
+        }
+        $.ajax({
+            type: "POST",
+            url: "/wf/manager/",
+            data: data,
+            beforeSend: function(request) {
+                request.setRequestHeader("X-CSRFToken",
+                $('input[name="csrfmiddlewaretoken"]').val()
+                );
+            },
+            success: refresh_wf_iframe()
+        });
+    }
+
+    function refresh_wf_iframe() {
+        window.location=window.location;
+    }
+</script>
+<div id="iframe_header" class="row view-header">
+    <div class="col-lg-12 step_header">
+        <h1 class="step_title" id="view_title"></h1>
+        <p class="description" id="view_desc"></p>
+        <p class="step_message" id="view_message"></p>
+    </div>
+    <style>
+        #view_desc{
+            margin-bottom: 15px;
+            margin-top: 5px;
+            margin-left: 30px;
+            display: inline;
+        }
+        #view_title{
+            margin-top: 5px;
+            margin-bottom: 0px;
+            display: inline;
+        }
+        #view_message{
+            margin-top: 10px;
+            margin-bottom: 5px;
+            float: right;
+        }
+        .message_invalid{
+            color: #ff4400;
+        }
+        .message_valid{
+            color: #44cc00;
+        }
+        .step_header{
+            border-bottom: 1px solid #eee;
+            border-top: 1px solid #eee;
+            left: 101px;
+            width: calc(100% - 202px);
+        }
+    </style>
+    <script>
+        function update_description(title, desc){
+            document.getElementById("view_title").innerText = title;
+            document.getElementById("view_desc").innerText = desc;
+        }
+        function update_message(message, stepstatus){
+            document.getElementById("view_message").innerText = message;
+            document.getElementById("view_message").className = "step_message";
+            document.getElementById("view_message").classList.add("message_" + stepstatus);
+        }
+        function resize_iframe(){
+            var page_rect = document.getElementById("wrapper").getBoundingClientRect();
+            var title_rect = document.getElementById("iframe_header").getBoundingClientRect();
+            var iframe_height = page_rect.bottom - title_rect.bottom;
+            console.log("setting height to " + iframe_height);
+            document.getElementById("viewport-iframe").height = iframe_height;
+
+        }
+     window.addEventListener('load', resize_iframe);
+     window.addEventListener('resize', resize_iframe);
+    </script>
+    <!-- /.col-lg-12 -->
+</div>
+
+<iframe src="/wf/workflow" style="position: absolute; left: 351px; right: 105px; width: calc(100% - 450px); border-style: none; border-width: 1px; border-color: #888888;" scrolling="yes" id="viewport-iframe" onload="resize_iframe();"></iframe>
+{% endblock content %}
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
new file mode 100644
index 0000000..f25e644
--- /dev/null
+++ b/src/templates/workflow/viewport-element.html
@@ -0,0 +1,69 @@
+{% extends "layout.html" %}
+{% load bootstrap3 %}
+{% load staticfiles %}
+
+{% block basecontent %}
+
+    <div id="wrapper">
+        <!-- Page Content -->
+        <div id="page-wrapper">
+
+            {% block content %}
+
+            {% endblock content %}
+        </div>
+        <!-- /#page-wrapper -->
+    </div>
+    {% block vport_comm %}
+             <script type="text/javascript">
+                var step_count = {{ step_number|default:0 }};
+                var active_step = {{ active_step|default:0 }};
+                var render_correct = {{ render_correct|default:"false" }};
+                var title = "{{ step_title|default:"Workflow Step" }}";
+                var description = "{{ description|default:"Contact the admins, because this field should have something else filled in here" }}";
+                if(render_correct){
+                    parent.update_context();
+                }
+                parent.update_description(title, description);
+            </script>
+
+    {% endblock vport_comm %}
+    {% block validate_step %}
+        <script>
+
+            function step_is_valid()
+            {
+                valid = confirm("Is this form valid?");
+                if( valid )
+                {
+                    return true;
+                }
+                else{
+                    return false;
+                }
+            }
+
+            function onError()
+            {
+                alert("Error: something!");
+            }
+        </script>
+
+    {% endblock validate_step %}
+
+    <script>
+    function step_on_leave() {
+    {% block onleave %}
+        alert("override onleave");
+    {% endblock %}
+    }
+    </script>
+
+    <div class="messages">
+        {% block element_messages %}
+        {% bootstrap_messages %}
+        {% endblock %}
+    </div>
+
+    <!-- /#wrapper -->
+{% endblock basecontent %}