aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-07-01 15:29:07 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-07-02 09:43:53 -0400
commit661a309cdd609d514abf4b8f8d9c98021b6b9759 (patch)
tree6e23ab9b18d6c7ac49bd8e52f479468352642f18
parent8149a888fe6f7c1c3b1b3be2b3996c6d225d5a53 (diff)
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>
-rw-r--r--src/static/css/base.css176
-rw-r--r--src/static/css/graph_common.css172
-rw-r--r--src/templates/resource/steps/pod_definition.html64
-rw-r--r--src/templates/workflow/viewport-base.html27
-rw-r--r--src/templates/workflow/viewport-element.html12
5 files changed, 224 insertions, 227 deletions
diff --git a/src/static/css/base.css b/src/static/css/base.css
index 447c368..1494e77 100644
--- a/src/static/css/base.css
+++ b/src/static/css/base.css
@@ -89,4 +89,178 @@ a[aria-expanded="true"] > i.rotate {
#drop_results > li {
word-wrap: anywhere;
-} \ No newline at end of file
+}
+
+/* Graphing for networks */
+div.mxRubberband {
+ position: absolute;
+ overflow: hidden;
+ border-style: solid;
+ border-width: 1px;
+ border-color: #0000FF;
+ background: #0077FF;
+}
+.mxCellEditor {
+ background: url(data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7);
+ _background: url('/static/img/mxgraph/transparent.gif');
+ border-color: transparent;
+ border-style: solid;
+ display: inline-block;
+ position: absolute;
+ overflow: visible;
+ word-wrap: normal;
+ border-width: 0;
+ min-width: 1px;
+ resize: none;
+ padding: 0px;
+ margin: 0px;
+}
+.mxPlainTextEditor * {
+ padding: 0px;
+ margin: 0px;
+}
+div.mxWindow {
+ background: url('../img/mxgraph/window.gif');
+ border:1px solid #c3c3c3;
+ position: absolute;
+ overflow: hidden;
+ z-index: 3;
+}
+table.mxWindow {
+ border-collapse: collapse;
+ table-layout: fixed;
+ font-family: Arial;
+ font-size: 8pt;
+}
+td.mxWindowTitle {
+ background: url('/static/img/mxgraph/window-title.gif') repeat-x;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+ font-weight: bold;
+ overflow: hidden;
+ height: 13px;
+ padding: 2px;
+ padding-top: 4px;
+ padding-bottom: 6px;
+ color: black;
+}
+td.mxWindowPane {
+ vertical-align: top;
+ padding: 0px;
+}
+div.mxWindowPane {
+ overflow: hidden;
+ position: relative;
+}
+td.mxWindowPane td {
+ font-family: Arial;
+ font-size: 8pt;
+}
+td.mxWindowPane input, td.mxWindowPane select, td.mxWindowPane textarea, td.mxWindowPane radio {
+ font-family: Arial;
+ font-size: 8pt;
+ padding: 1px;
+}
+td.mxWindowPane button {
+ color: #fff;
+ background-color: #337ab7;
+ border-color: #2e6da4;
+ display: inline-block;
+ margin: 2%;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.42857143;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-image: none;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+img.mxToolbarItem {
+ margin-right: 6px;
+ margin-bottom: 6px;
+ border-width: 1px;
+}
+select.mxToolbarCombo {
+ vertical-align: top;
+ border-style: inset;
+ border-width: 2px;
+}
+div.mxToolbarComboContainer {
+ padding: 2px;
+}
+img.mxToolbarMode {
+ margin: 2px;
+ margin-right: 4px;
+ margin-bottom: 4px;
+ border-width: 0px;
+}
+img.mxToolbarModeSelected {
+ margin: 0px;
+ margin-right: 2px;
+ margin-bottom: 2px;
+ border-width: 2px;
+ border-style: inset;
+}
+div.mxTooltip {
+ -webkit-box-shadow: 3px 3px 12px #C0C0C0;
+ -moz-box-shadow: 3px 3px 12px #C0C0C0;
+ box-shadow: 3px 3px 12px #C0C0C0;
+ background: #FFFFCC;
+ border-style: solid;
+ border-width: 1px;
+ border-color: black;
+ font-family: Arial;
+ font-size: 8pt;
+ position: absolute;
+ cursor: default;
+ padding: 4px;
+ color: black;
+}
+div.mxPopupMenu {
+ -webkit-box-shadow: 3px 3px 12px #C0C0C0;
+ -moz-box-shadow: 3px 3px 12px #C0C0C0;
+ box-shadow: 3px 3px 12px #C0C0C0;
+ background: url('/static/img/mxgraph/window.gif');
+ position: absolute;
+ border-style: solid;
+ border-width: 1px;
+ border-color: black;
+}
+table.mxPopupMenu {
+ border-collapse: collapse;
+ margin-top: 1px;
+ margin-bottom: 1px;
+}
+tr.mxPopupMenuItem {
+ color: black;
+ cursor: pointer;
+}
+tr.mxPopupMenuItemHover {
+ background-color: #000066;
+ color: #FFFFFF;
+ cursor: pointer;
+}
+td.mxPopupMenuItem {
+ padding: 2px 30px 2px 10px;
+ white-space: nowrap;
+ font-family: Arial;
+ font-size: 8pt;
+}
+td.mxPopupMenuIcon {
+ background-color: #D0D0D0;
+ padding: 2px 4px 2px 4px;
+}
+.mxDisabled {
+ opacity: 0.2 !important;
+ cursor:default !important;
+}
diff --git a/src/static/css/graph_common.css b/src/static/css/graph_common.css
deleted file mode 100644
index cff1516..0000000
--- a/src/static/css/graph_common.css
+++ /dev/null
@@ -1,172 +0,0 @@
-div.mxRubberband {
- position: absolute;
- overflow: hidden;
- border-style: solid;
- border-width: 1px;
- border-color: #0000FF;
- background: #0077FF;
-}
-.mxCellEditor {
- background: url(data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7);
- _background: url('/static/img/mxgraph/transparent.gif');
- border-color: transparent;
- border-style: solid;
- display: inline-block;
- position: absolute;
- overflow: visible;
- word-wrap: normal;
- border-width: 0;
- min-width: 1px;
- resize: none;
- padding: 0px;
- margin: 0px;
-}
-.mxPlainTextEditor * {
- padding: 0px;
- margin: 0px;
-}
-div.mxWindow {
- background: url('../img/mxgraph/window.gif');
- border:1px solid #c3c3c3;
- position: absolute;
- overflow: hidden;
- z-index: 3;
-}
-table.mxWindow {
- border-collapse: collapse;
- table-layout: fixed;
- font-family: Arial;
- font-size: 8pt;
-}
-td.mxWindowTitle {
- background: url('/static/img/mxgraph/window-title.gif') repeat-x;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: center;
- font-weight: bold;
- overflow: hidden;
- height: 13px;
- padding: 2px;
- padding-top: 4px;
- padding-bottom: 6px;
- color: black;
-}
-td.mxWindowPane {
- vertical-align: top;
- padding: 0px;
-}
-div.mxWindowPane {
- overflow: hidden;
- position: relative;
-}
-td.mxWindowPane td {
- font-family: Arial;
- font-size: 8pt;
-}
-td.mxWindowPane input, td.mxWindowPane select, td.mxWindowPane textarea, td.mxWindowPane radio {
- font-family: Arial;
- font-size: 8pt;
- padding: 1px;
-}
-td.mxWindowPane button {
- color: #fff;
- background-color: #337ab7;
- border-color: #2e6da4;
- display: inline-block;
- margin: 2%;
- font-size: 14px;
- font-weight: 400;
- line-height: 1.42857143;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- background-image: none;
- border: 1px solid transparent;
- border-radius: 4px;
-}
-img.mxToolbarItem {
- margin-right: 6px;
- margin-bottom: 6px;
- border-width: 1px;
-}
-select.mxToolbarCombo {
- vertical-align: top;
- border-style: inset;
- border-width: 2px;
-}
-div.mxToolbarComboContainer {
- padding: 2px;
-}
-img.mxToolbarMode {
- margin: 2px;
- margin-right: 4px;
- margin-bottom: 4px;
- border-width: 0px;
-}
-img.mxToolbarModeSelected {
- margin: 0px;
- margin-right: 2px;
- margin-bottom: 2px;
- border-width: 2px;
- border-style: inset;
-}
-div.mxTooltip {
- -webkit-box-shadow: 3px 3px 12px #C0C0C0;
- -moz-box-shadow: 3px 3px 12px #C0C0C0;
- box-shadow: 3px 3px 12px #C0C0C0;
- background: #FFFFCC;
- border-style: solid;
- border-width: 1px;
- border-color: black;
- font-family: Arial;
- font-size: 8pt;
- position: absolute;
- cursor: default;
- padding: 4px;
- color: black;
-}
-div.mxPopupMenu {
- -webkit-box-shadow: 3px 3px 12px #C0C0C0;
- -moz-box-shadow: 3px 3px 12px #C0C0C0;
- box-shadow: 3px 3px 12px #C0C0C0;
- background: url('/static/img/mxgraph/window.gif');
- position: absolute;
- border-style: solid;
- border-width: 1px;
- border-color: black;
-}
-table.mxPopupMenu {
- border-collapse: collapse;
- margin-top: 1px;
- margin-bottom: 1px;
-}
-tr.mxPopupMenuItem {
- color: black;
- cursor: pointer;
-}
-tr.mxPopupMenuItemHover {
- background-color: #000066;
- color: #FFFFFF;
- cursor: pointer;
-}
-td.mxPopupMenuItem {
- padding: 2px 30px 2px 10px;
- white-space: nowrap;
- font-family: Arial;
- font-size: 8pt;
-}
-td.mxPopupMenuIcon {
- background-color: #D0D0D0;
- padding: 2px 4px 2px 4px;
-}
-.mxDisabled {
- opacity: 0.2 !important;
- cursor:default !important;
-}
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 %}