<!-- Button toolbar -->
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#{{domid}}__apply">Apply</button>
- <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#{{domid}}__cancel">Cancel</button>
+ <button class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{domid}}__cancel">Cancel</button>
</div>
<div id={{ domid }}>
- <span class="list-group-item-heading">View:</span>
+ <span class="list-group-item-heading sl-resources">View:</span>
<a href="#"
- class="list-group-item sl-platform active"
+ class="list-group-item sl-resources active"
style='display: inline-block !important;'
id="{{ domid }}__all"
data-status="all"
title="View resources that are available to be reserved."
rel='tooltip'>
- <p class="list-group-item-heading">Available</p>
+ Available
</a>
<a href="#"
- class="list-group-item sl-platform"
+ class="list-group-item sl-resources"
style='display: inline-block !important;'
id="{{ domid }}__reserved"
data-status="reserved"
title="View resources that you have previously reserved for the slice."
rel='tooltip'>
- <p class="list-group-item-heading">Reserved</p>
+ Reserved
</a>
- <a href="#" class="list-group-item sl-platform"
+ <a href="#" class="list-group-item sl-resources"
style='display: inline-block !important;'
id="{{ domid }}__unconfigured"
data-status="unconfigured"
title="View resources that you have selected to add to your slice, that require configuration before they can be reserved. Hover you mouse over the symbol aside the checkbox for more details."
rel='tooltip'>
- <p class="list-group-item-heading">Unconfigured</p>
+ Unconfigured
<span class="badge" id="badge-unconfigured" style="display:none;"></span></a>
</a>
- <a href="#" class="list-group-item sl-platform"
+ <a href="#" class="list-group-item sl-resources"
style='display: inline-block !important;'
id="{{ domid }}__pending"
data-status="pending"
title="View pending changes to your slice, resources that you have selected to add, and resources that you have selected to remove. Click on the Apply button to apply those changes, and on the Cancel button to cancel them."
rel='tooltip'>
- <p class="list-group-item-heading">Pending</p>
+ Pending
<span class="badge" id="badge-pending" style="display:none;"></span></a>
</a>
</div>
-<div id="main-{{ domid }}" class="">
+<div id="main-{{ domid }}">
<table class="table dataTable" id="{{domid}}__table" width="100%">
<thead>
<tr>
margin-top:2px;
}
+.container-resource button {
+ padding:2px 4px;
+ border-radius:3px;
+ font-size:9pt;
+ font-weight:normal;
+}
+.container-resource select,.container-resource option, .container-resource input {
+ padding:2px 4px;
+ font-size:9pt;
+}
+.badge {
+ font-size:9pt;
+ margin-left:4px;
+}
/***** Notifications *****/
.warning {
border: 1px solid red;
}
/* SLICE VIEW */
-
+div.container-resource {
+ padding-right:15px;
+ padding-left:15px;
+}
div#slice-view {
margin:0;
color: black !important;
}
+span.sl-resources {
+ font-size:9pt;
+ color:gray;
+}
+a.sl-resources, a.sl-resources:hover {
+ font-size:9pt;
+ border:0;
+ padding:2px 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+a.sl-resources.active, a.sl-resources.active:hover, a.sl-resources.active:focus {
+ border:0;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+
div#slice-info {
margin-top:25px;
}
<script>
-jQuery(document).ready(function(){
+$(document).ready(function(){
var availableTags = [
{% if authorities %}
{% for authority in authorities %}
return 0;
});
// auto-complete the form
- jQuery( "#authority_hrn" ).autocomplete({
+ $( "#authority_hrn" ).autocomplete({
source: availableTags,
minLength: 0,
change: function (event, ui) {
//select: function( event, ui ) {console.log(jQuery(this))}
});
// for hover texts
- jQuery('[title!=""]').qtip();
-
- $('form').submit(function() {
+ $('[title!=""]').qtip();
+ $("form").validate();
+ $("form").submit(function() {
if ($('select option:selected').val() == 'upload') {
if ($('input[name=user_public_key]').val() == '') {
alert('Please specify the key file to upload');
-<div class="row">
- <div class="col-md-12">
- <div class="breadcrumbs">
- Experiment > {{ slice }}
- </div>
+<div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="breadcrumbs">
+ Experiment > {{ slice }}
+ </div>
+ </div>
</div>
</div>
+<div class="container">
+<div class="row">
+ <div class="col-md-12">
{% if section == "resources" %}
<ul class="nav nav-tabs nav-section">
<li><a href="/slice/{{ slice }}#info">Information</a></li>
<!-- <li class="measurements"><a href="#experiment">Measurements</a></li> -->
<li class="experiment"><a href="#experiment">Tools</a></li>
</ul>
+
<script>
$(document).ready(function() {
$('.nav-tabs a').click(function (e) {
}
});
</script>
-{% endif %}
\ No newline at end of file
+{% endif %}
+</div>
+</div>
+</div>
\ No newline at end of file
{% endblock %}
{% block content %}
- <div class="row">
- {% widget '_widget-slice-sections.html' %}
- </div>
+{% widget '_widget-slice-sections.html' %}
+<div class="container-fluid container-resource">
+ <div class="row">
<div class="col-md-2">
-
<!-- <div id="select-platform" class="list-group"></div> -->
{{filter_testbeds}}
</div>
<div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
{% endif %}
</div>
-
- {{ filter_status }}{{ apply }}
+
+ <div class="row">
+ <div class="col-md-4">
+ {{ filter_status }}
+ </div>
+ <div class="col-md-2">
+ {{ apply }}
+ </div>
+ </div>
<!--
<div class="list-group-item list-resources">
<span class="list-group-item-heading" style="padding-left: 0;">Resource status:</span>
-->
<div class="row">
+ <div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a href="#resourcelist" role="tab" data-toggle="tab">Table</a></li>
<li> <a href="#resourcemap" role="tab" data-toggle="tab">Map</a></li>
<li> <a href="#resourcescheduler" role="tab" data-toggle="tab">Scheduler</a></li>
</ul>
+ </div>
</div>
-
+
<!-- Modal - columns selector -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
</div>
</div>
- <div class="tab-content" style="height:100%;">
- <div class="tab-pane active" id="resourcelist">
- <!-- Button trigger modal - columns selector -->
- <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
- {{list_resources}}
- <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
- </div>
- <div class="tab-pane" id="resourcemap">
- {{map_resources}}
- </div>
- <div class="tab-pane" id="resourcescheduler">
- {{scheduler}}
- </div>
-
- <!--
- <div id="reserved" class="tab-pane" style="height:370px;display:none;">
- <table width="80%">
- <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
- <tr>
- <td style="text-align:center">{{list_reserved_resources}}</td>
- <td style="text-align:center">{{list_reserved_leases}}</td>
- </tr>
- </table>
- </div>
- <div id="pending" class="tab-pane" style="height:370px;display:none;">
- {{pending_resources}}
- </div>
- <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
- {{sla_dialog}}
+
+ <div class="row">
+ <div class="col-md-12">
+ <div class="tab-content" style="height:100%;">
+ <div class="tab-pane active" id="resourcelist">
+ <!-- Button trigger modal - columns selector -->
+ <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
+ {{list_resources}}
+ <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
+ </div>
+ <div class="tab-pane" id="resourcemap">
+ {{map_resources}}
+ </div>
+ <div class="tab-pane" id="resourcescheduler">
+ {{scheduler}}
+ </div>
+
+ <!--
+ <div id="reserved" class="tab-pane" style="height:370px;display:none;">
+ <table width="80%">
+ <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
+ <tr>
+ <td style="text-align:center">{{list_reserved_resources}}</td>
+ <td style="text-align:center">{{list_reserved_leases}}</td>
+ </tr>
+ </table>
+ </div>
+ <div id="pending" class="tab-pane" style="height:370px;display:none;">
+ {{pending_resources}}
+ </div>
+ <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
+ {{sla_dialog}}
+ </div>
+ -->
+
</div>
--->
-
</div>
</div>
+ </div>
+ </div>
+</div>
{% endblock %}