Filter status: All, Available, Unavailable, Unconfigured, Pending, Reserved
[myslice.git] / portal / templates / slice-resource-view.html
1 {% extends "layout_wide.html" %}
2 {% load portal_filters %}
3
4 {% block head %}
5 <!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1RUj824JAiHRVqgc2CSIg4CpKHhh84Lw&sensor=false"></script> -->
6 <script src="{{ STATIC_URL }}js/onelab_slice-resource-view.js"></script>
7 <script>
8         //myslice.slice = "{{ slice }}";
9
10 $(document).ready(function() {
11             $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
12         // find the plugin object inside the tab content referenced by the current tabs
13         $('.plugin', $($(e.target).attr('href'))).trigger('shown.bs.tab');
14         $('.plugin', $($(e.target).attr('href'))).trigger('show');
15             });
16 });
17 </script>
18 {% endblock %}
19
20 {% block content %}
21 {% widget '_widget-slice-sections.html' %}
22 <div class="container-fluid container-resource">
23         <div class="row">
24         <div class="col-md-2">
25                 <!-- <div id="select-platform" class="list-group"></div> -->
26                 {{filter_testbeds}}
27         </div>
28         <div class="col-md-10" style="height:100%;">
29                 <div class="row">
30                         {% if msg %}
31                         <div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
32                         {% endif %}
33                 </div>
34         
35                 <div class="row">
36                         <div class="col-md-8">
37                                 {{ filter_status }}
38                         </div>
39                         <div class="col-md-1">
40                                 {{ apply }}
41                         </div>
42                 </div>
43                 <!--
44                 <div class="list-group-item list-resources">
45                         <span class="list-group-item-heading" style="padding-left: 0;">Resource status:</span>
46                         <a class="list-group-item active" data-panel="resources" href="#" style='display: inline-block !important;'>All</a>
47                         <a class="list-group-item" data-panel="reserved" href="#" style='display: inline-block !important;'>Reserved</a>
48                         <a class="list-group-item" data-panel="pending" href="#" style='display: inline-block !important;'>Pending <span class="badge" id="badge-pending" data-number="0"></span></a>
49                 </div>
50                 -->
51
52                 <div class="row">
53                         <div class="col-md-12">
54                         <ul class="nav nav-tabs">
55                           <li class="active"><a href="#resourcelist" role="tab" data-toggle="tab">Table</a></li>
56                           <li> <a href="#resourcemap" role="tab" data-toggle="tab">Map</a></li>
57                           <li> <a href="#resourcescheduler" role="tab" data-toggle="tab">Scheduler</a></li>
58                           <!--<li> <a href="#resourcesasap" role="tab" data-toggle="tab">ASAP</a></li> -->
59                         </ul>
60                         </div>
61                 </div>
62                 
63                 <!-- Modal - columns selector -->
64                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
65                         <div class="modal-dialog">
66                         <div class="modal-content">
67                                 <div class="modal-header">
68                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
69                                                 <h4 class="modal-title" id="myModalLabel">Columns selector</h4>
70                                 </div>
71                                 <div class="modal-body">
72                                         {{columns_editor}}
73                                 </div>
74                                 <div class="modal-footer">
75                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
76                                 </div>
77                         </div>
78                         </div>
79                 </div>
80                 
81                 
82                 <div class="row">
83                         <div class="col-md-12">
84                         <div class="tab-content" style="height:100%;">
85                                 <div class="tab-pane active" id="resourcelist">
86                                          <!-- Button trigger modal - columns selector -->
87                                         <button class="btn btn-default btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
88                         {{list_resources}}
89                                         <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
90                                 </div>
91                                 <div class="tab-pane" id="resourcemap">
92                         {{map_resources}}
93                                 </div>
94                                 <div class="tab-pane" id="resourcescheduler">
95                         {{scheduler}}
96                                 </div>
97                                         <!-- <div class="tab-pane" id="resourcesasap">
98                         {{asap}}
99                                 </div> -->
100
101                                 <!--
102                                 <div id="reserved" class="tab-pane" style="height:370px;display:none;">
103                         <table width="80%">
104                             <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
105                             <tr>
106                                 <td style="text-align:center">{{list_reserved_resources}}</td>
107                                 <td style="text-align:center">{{list_reserved_leases}}</td>
108                             </tr>
109                         </table>
110                                 </div>
111                                 <div id="pending" class="tab-pane" style="height:370px;display:none;">
112                         {{pending_resources}}
113                                 </div>
114                                 <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
115                         {{sla_dialog}}
116                                 </div>
117         -->
118         
119                         </div>
120                 </div>
121         </div>
122         </div>
123         </div>
124 </div>
125 {% endblock %}