diff options
Diffstat (limited to 'src/templates/resource')
| -rw-r--r-- | src/templates/resource/hostprofile_detail.html | 134 | ||||
| -rw-r--r-- | src/templates/resource/steps/meta_info.html | 26 | ||||
| -rw-r--r-- | src/templates/resource/steps/pod_definition.html | 98 |
3 files changed, 95 insertions, 163 deletions
diff --git a/src/templates/resource/hostprofile_detail.html b/src/templates/resource/hostprofile_detail.html index dc20600..c26d774 100644 --- a/src/templates/resource/hostprofile_detail.html +++ b/src/templates/resource/hostprofile_detail.html @@ -6,95 +6,105 @@ <div class="col-lg-6"> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">Available at</h4> - <button data-toggle="collapse" data-target="#avilableAt" class="btn ml-auto btn-outline-secondary">Expand</button> + <h4 class="d-inline">Available at</h4> + <button data-toggle="collapse" data-target="#availableAt" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="avilableAt"> - <ul class="list-group"> - {% for lab in hostprofile.labs.all %} - <li class="list-group-item">{{lab.name}}</li> - {% endfor %} - </ul> + <div class="collapse show" id="availableAt"> + <div class="card-body"> + <ul class="list-group"> + {% for lab in hostprofile.labs.all %} + <li class="list-group-item">{{lab.name}}</li> + {% endfor %} + </ul> + </div> </div> </div> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">RAM</h4> + <h4 class="d-inline">RAM</h4> <button data-toggle="collapse" data-target="#ramPanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="ramPanel"> - {{hostprofile.ramprofile.first.amount}}G, - {{hostprofile.ramprofile.first.channels}} channels + <div id="ramPanel" class="collapse show"> + <div class="card-body"> + {{hostprofile.ramprofile.first.amount}}G, + {{hostprofile.ramprofile.first.channels}} channels + </div> </div> </div> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">CPU</h4> + <h4 class="d-inline">CPU</h4> <button data-toggle="collapse" data-target="#cpuPanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="cpuPanel"> - <table class="table"> - <tr> - <td>Arch:</td> - <td>{{hostprofile.cpuprofile.first.architecture}}</td> - </tr> - <tr> - <td>Cores:</td> - <td>{{hostprofile.cpuprofile.first.cores}}</td> - </tr> - <tr> - <td>Sockets:</td> - <td>{{hostprofile.cpuprofile.first.cpus}}</td> - </tr> - </table> + <div class="collapse show" id="cpuPanel"> + <div class="card-body"> + <table class="table"> + <tr> + <td>Arch:</td> + <td>{{hostprofile.cpuprofile.first.architecture}}</td> + </tr> + <tr> + <td>Cores:</td> + <td>{{hostprofile.cpuprofile.first.cores}}</td> + </tr> + <tr> + <td>Sockets:</td> + <td>{{hostprofile.cpuprofile.first.cpus}}</td> + </tr> + </table> + </div> </div> </div> <div class="card mb-4"> <div class="card-header d-flex"> - <h4 style="display: inline;">Disk</h4> + <h4 class="d-inline">Disk</h4> <button data-toggle="collapse" data-target="#diskPanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="diskPanel"> - <table class="table"> - <tr> - <td>Size:</td> - <td>{{hostprofile.storageprofile.first.size}} GiB</td> - </tr> - <tr> - <td>Type:</td> - <td>{{hostprofile.storageprofile.first.media_type}}</td> - </tr> - <tr> - <td>Mount Point:</td> - <td>{{hostprofile.storageprofile.first.name}}</td> - </tr> - </table> + <div class="collapse show" id="diskPanel"> + <div class="card-body"> + <table class="table"> + <tr> + <td>Size:</td> + <td>{{hostprofile.storageprofile.first.size}} GiB</td> + </tr> + <tr> + <td>Type:</td> + <td>{{hostprofile.storageprofile.first.media_type}}</td> + </tr> + <tr> + <td>Mount Point:</td> + <td>{{hostprofile.storageprofile.first.name}}</td> + </tr> + </table> + </div> </div> </div> </div> <div class="col-lg-6"> <div class="card"> <div class="card-header d-flex"> - <h4 style="display: inline;">Interfaces</h4> + <h4 class="d-inline">Interfaces</h4> <button data-toggle="collapse" data-target="#interfacePanel" class="btn ml-auto btn-outline-secondary">Expand</button> </div> - <div class="card-body collapse show" id="interfacePanel"> - <table class="table"> - <thead> - <tr> - <th>Name</th> - <th>Speed</th> - </tr> - </thead> - <tbody> - {% for intprof in hostprofile.interfaceprofile.all %} - <tr> - <td>{{intprof.name}}</td> - <td>{{intprof.speed}}</td> - </tr> - {% endfor %} - </tbody> - </table> + <div class="collapse show" id="interfacePanel"> + <div class="card-body"> + <table class="table"> + <thead> + <tr> + <th>Name</th> + <th>Speed</th> + </tr> + </thead> + <tbody> + {% for intprof in hostprofile.interfaceprofile.all %} + <tr> + <td>{{intprof.name}}</td> + <td>{{intprof.speed}}</td> + </tr> + {% endfor %} + </tbody> + </table> + </div> </div> </div> </div> diff --git a/src/templates/resource/steps/meta_info.html b/src/templates/resource/steps/meta_info.html index cebd343..62230dc 100644 --- a/src/templates/resource/steps/meta_info.html +++ b/src/templates/resource/steps/meta_info.html @@ -5,32 +5,10 @@ {% block content %} -<style> -#resource_meta_form { - padding: 80px; - display: grid; -} - -#resource_meta_form td > * { - width: 100%; - margin-bottom: 20px; - margin-top: 20px; -} - -#resource_meta_form > table > tbody > tr { - border-bottom: 1px solid #cccccc; -} - -#resource_meta_form > table > tbody > tr:last-child { - border-bottom: none; -} - -</style> - <form id="resource_meta_form" method="post" action="/wf/workflow/"> {% csrf_token %} - <table> - {{form}} + <table class="px-4"> + {% bootstrap_form form field_class="px-4" label_class="px-4 mt-2" %} </table> </form> {% endblock content %} diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html index 5826ccb..1558780 100644 --- a/src/templates/resource/steps/pod_definition.html +++ b/src/templates/resource/steps/pod_definition.html @@ -13,85 +13,29 @@ <!-- Calls the main function after the page has loaded. Container is dynamically created. --> {% block content %} - <div id="graphParent" - style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;"> - <div id="graphContainer" - style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;"> + <div class="row p-0 w-100 mx-0 position-absolute overflow-hidden topToBottom"> + <div id="graphParent" class="col px-0"> + <div class="row"> + <div class="col pr-0"> + <div id="toolbarContainer" class="bg-light pl-4"></div> + </div> + </div> + <!-- Creates a container for the sidebar --> + <div id="graphContainer"></div> </div> - - <!-- Creates a container for the sidebar --> - <div id="toolbarContainer" - style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;"> - </div> - - <!-- Creates a container for the outline --> - <div id="outlineContainer" - style="position:absolute;overflow:hidden;top:36px;right:0px;width:200px;height:140px;background:transparent;border-style:solid;border-color:black;"> - </div> - </div> - - <style> - p { - word-break: normal; - white-space: normal; - } - #network_select { - background: inherit; - padding: 0px; - padding-top: 0px; - } - #toolbarContainer { - background: #DDDDDD; - height: 36px; - } - #toolbar_extension { - height: 36px; - background: #DDDDDD; - } - #btn_add_network { - width: 100%; - } - #vlan_notice { - margin: 20px; - } - #network_list li { - border-radius: 2px; - margin: 5px; - padding: 5px; - vertical-align: middle; - background: #DDDDDD; - } - #network_list { - list-style-type: none; - padding: 0; - } - .colorblob { - width: 20px; - height: 20px; - border-radius: 50%; - display: inline-block; - vertical-align: middle; - } - .network_innertext { - display: inline-block; - padding-left: 10px; - vertical-align: middle; - padding-bottom: 0px; - margin-bottom: 2px; - } - .mxWindow { - background: #FFFFFF; - } - </style> - - <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;"> - <div id="toolbar_extension"> - <button id="btn_add_network" type="button" class="btn btn-primary" onclick="network_step.newNetworkWindow();">Add Network</button> + <div id="network_select" class="p-0 w-25 ml-auto col-2"> + <div class="px-0 mb-2"> + <!-- Creates a container for the outline --> + <div id="outlineContainer" class="border"></div> + </div> + <div> + <button id="btn_add_network" type="button" class="btn btn-primary w-100" onclick="network_step.newNetworkWindow();">Add Network</button> + </div> + <ul id="network_list" class="list-group"> + </ul> + <button type="button" class="d-none" onclick="network_step.submitForm();">Submit</button> </div> - <ul id="network_list"> - </ul> - <button type="button" style="display: none" onclick="network_step.submitForm();">Submit</button> </div> <form id="xml_form" method="post" action="/wf/workflow/"> {% csrf_token %} @@ -114,7 +58,7 @@ {% for host in hosts %} hosts.push({{host|safe}}); {% endfor %} - + let added_hosts = []; {% for host in added_hosts %} added_hosts.push({{host|safe}}); |