Reduce forms to required content

Change iframe to div and ajax as a workaround
Add css and js to avoid errors in parent locations

Change-Id: I22a17ad5e5e04ff7112bd4e6ed98ba63d150fc15
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

3 files changed, 49 insertions, 54 deletions

diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html
index 1558780..4c9aa83 100644
--- a/src/templates/resource/steps/pod_definition.html
+++ b/src/templates/resource/steps/pod_definition.html
@@ -41,43 +41,43 @@
         {% csrf_token %}
         <input type="hidden" id="hidden_xml_input" name="xml" />
     </form>
+    <script type="text/javascript" src="/static/js/mxClient.min.js" ></script>
+    <script>
+        //gather context data
+        let debug = false;
+        {% if debug %}
+        debug = true;
+        {% endif %}
 
-<script>
-    //gather context data
-    let debug = false;
-    {% if debug %}
-    debug = true;
-    {% endif %}
-
-    let xml = '';
-    {% if xml %}
-    xml = '{{xml|safe}}';
-    {% endif %}
+        let xml = '';
+        {% if xml %}
+        xml = '{{xml|safe}}';
+        {% endif %}
 
-    let hosts = [];
-    {% for host in hosts %}
-    hosts.push({{host|safe}});
-    {% endfor %}
+        let hosts = [];
+        {% for host in hosts %}
+        hosts.push({{host|safe}});
+        {% endfor %}
 
-    let added_hosts = [];
-    {% for host in added_hosts %}
-    added_hosts.push({{host|safe}});
-    {% endfor %}
+        let added_hosts = [];
+        {% for host in added_hosts %}
+        added_hosts.push({{host|safe}});
+        {% endfor %}
 
-    let removed_host_ids = {{removed_hosts|safe}};
+        let removed_host_ids = {{removed_hosts|safe}};
 
-    network_step = new NetworkStep(
-        debug,
-        xml,
-        hosts,
-        added_hosts,
-        removed_host_ids,
-        document.getElementById('graphContainer'),
-        document.getElementById('outlineContainer'),
-        document.getElementById('toolbarContainer'),
-        document.getElementById('sidebarContainer')
-    );
-</script>
+        network_step = new NetworkStep(
+            debug,
+            xml,
+            hosts,
+            added_hosts,
+            removed_host_ids,
+            document.getElementById('graphContainer'),
+            document.getElementById('outlineContainer'),
+            document.getElementById('toolbarContainer'),
+            document.getElementById('sidebarContainer')
+        );
+    </script>
 {% endblock content %}
 {% block onleave %}
 network_step.submitForm();
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index d219386..ed367c7 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -80,14 +80,13 @@
     <div class="container-fluid d-flex flex-column h-100">
         <div class="row d-flex flex-grow-1 p-4">
             <div class="col-12 d-flex border flex-grow-1 px-0">
-                <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
-                    frameBorder="0"></iframe>
+                <div id="formContainer" class="h-100 w-100"></div>
             </div>
         </div>
     </div>
 </div>
 {% csrf_token %}
-
+<script src="{% static "js/dashboard.js" %}"></script>
 <script type="text/javascript">
     update_context();
     var step = 0;
@@ -131,7 +130,7 @@
         req.onload = function (e) {
             if (req.readyState === 4) {
                 if (req.status < 300) {
-                    document.getElementById("viewport-iframe").srcdoc = this.responseText;
+                    write_iframe(this.responseText);
                 } else {
                     problem();
                 }
@@ -143,10 +142,6 @@
         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) {
@@ -272,16 +267,13 @@
         url = "/wf/workflow/";
         req.open("GET", url, true);
         req.onload = function (e) {
-            var doc = document.getElementById("viewport-iframe").contentWindow.document;
-            doc.open();
-            doc.write(this.responseText);
-            doc.close();
+            write_iframe(this.responseText);
         }
         req.send();
     }
 
     function write_iframe(contents) {
-        document.getElementById("viewport-iframe").contentWindow.document.innerHTML = contents;
+        $("#formContainer").html(contents);
     }
 
     function redirect_root() {
@@ -319,6 +311,15 @@
     function refresh_wf_iframe() {
         window.location = window.location;
     }
+
+    // Load the actual first page
+    $(document).ready(function(){
+        $.ajax("/wf/workflow", {
+            success: function(data) {
+                write_iframe(data);
+            }
+        });
+    });
 </script>
 <div class="d-none" id="workflow_pop_form_div">
     <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
index b87013a..2c917e1 100644
--- a/src/templates/workflow/viewport-element.html
+++ b/src/templates/workflow/viewport-element.html
@@ -1,16 +1,10 @@
-{% extends "layout.html" %}
 {% load bootstrap4 %}
 {% load staticfiles %}
 
 {% block basecontent %}
 
-    <div id="wrapper" class="h-100">
-        <!-- Page Content -->
-        <div id="page-wrapper" class="h-100">
-            {% block content %}
-            {% endblock content %}
-        </div>
-    </div>
+    {% block content %}
+    {% endblock content %}
     {% block vport_comm %}
              <script type="text/javascript">
                 var step_count = {{ step_number|default:0 }};
@@ -49,7 +43,7 @@
     {% endblock validate_step %}
 
     <script>
-    function step_on_leave() {
+    step_on_leave = function() {
         {% block onleave %}
             alert("override onleave");
         {% endblock %}