SLA and Service Directory code added
[unfold.git] / sla / templates / slice-tab-sla_alternative.html
1
2 <div class="col-md-2">
3 </div>
4
5
6 <!-- Modal - columns selector -->
7 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
8     <div class="modal-dialog">
9         <div class="modal-content">
10             <div class="modal-header">
11                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
12                     <h4 class="modal-title" id="myModalLabel">Agreement details</h4>
13             </div>
14             <div class="modal-body">
15
16
17             </div>
18             <div class="modal-footer">
19                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
20             </div>
21         </div>
22     </div>
23 </div>
24
25                           <!-- Modal - columns selector -->
26 <div class="modal fade" id="violationModal" tabindex="-1" role="dialog" aria-labelledby="myModalViolations" aria-hidden="true">
27     <div class="modal-dialog">
28         <div class="modal-content">
29             <div class="modal-header">
30                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
31                     <h4 class="modal-title" id="myModalViolations">Violations</h4>
32             </div>
33             <div class="modal-body">
34
35
36
37             </div>
38             <div class="modal-footer">
39                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
40             </div>
41         </div>
42     </div>
43 </div>
44
45  <div class="col-md-8">
46     <div class="row" id="agreements">
47         <div class="panel-group" id="accordion">
48             <div class="panel panel-default">
49                 <div class="panel-heading">
50                     <h4 class="panel-title">
51                         <dt>
52                             <span class="glyphicon glyphicon-chevron-down"></span> 
53                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Provider</a>
54                         </dt>
55                         <dd>{% with agreements|first as a %}{{ a.context.provider }}{% endwith %}</dd>
56                     </h4>
57                 </div>
58
59            
60                 {% for a in agreements %}
61
62                 <div id="collapseOne" class="panel-collapse collapse in">
63                     <div class="panel-body">
64                         <table class="table">
65                            <tr>
66                                         {% if a.guaranteestatus == "VIOLATED" %}
67                                         <td class="glyphicon glyphicon-remove-sign" style="color:red;"></td>
68                                 {% else %}
69                                 <td class="glyphicon glyphicon-ok-sign" style="color:green;"></td>
70                                 {% endif %}
71                                         <td>{{ a.context.template_id }}</td>
72                                 <!-- <td>{{slicename}}</td> -->
73                                 <td>
74                                     <!-- <a class="agreement-detail" href="{% url "agreement_details" a.agreement_id %}" data-toggle="modal" data-target="#agreementModal">View Agreement</a> -->
75                                     <!-- <a class="agreement-detail" href="#" data-agreement="{{ a.agreement_id }}">View Agreement</a> -->
76                                     <a class="agreement-detail" data-toggle="modal" data-target="#agreementModal{{a.agreement_id}}">View Agreement</a>
77                                 </td>
78
79                                 {% for tname,t in a.guaranteeterms.items %}
80                                 <td> {{ t.servicelevelobjective.kpiname }}</td>
81                                 <td>
82                                     {% if t.status == "VIOLATED" %}
83
84                                       <!-- <a class="violation-detail" href="{% url "agreement_term_violations" a.agreement_id t.name %}" data-toggle="modal" data-target="#violationModal">View Violations</a>
85                                       <a class="violation-detail" href="#"
86                                                         data-agreement="{{ a.agreement_id }}" 
87                                                         data-violation="{{ t.name }}">View Violations</a> -->
88                                       <a class="violation-detail" href="#" data-agreement="{{ a.agreement_id }}" data-violation="{{ t.name }}">View Violations</a>
89
90                                     {% endif %}
91                                 </td>
92                                 <td id="status" style="display:none;">
93                                     {{ a.statusclass }}
94                                 </td>
95                                 {% endfor %}
96                             </tr>
97                         </table>
98                     </div>
99                 </div>
100
101                 <!-- Modal - columns selector -->
102                 <div class="modal fade" id="agreementModal{{a.agreement_id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
103                             
104                     <style type="text/css" scoped>
105                             .modal-lg {
106                               width: 50%;
107                             }
108                     </style>
109                             
110                     <div class="modal-dialog modal-lg">
111                         <div class="modal-content">
112                             <div class="modal-header">
113                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
114                                 <h4 class="modal-title" id="myModalAgreement">Agreement details</h4>
115                             </div>
116                             <div class="modal-body">
117
118                                  <dt>Agreement Id</dt>
119                                  <dd>{{ a.agreement_id|default:"&nbsp;" }}</dd>
120                                  <dt>Provider</dt>
121                                  <dd>{{ a.context.provider|default:"&nbsp;" }}</dd>
122                                  <dt>Consumer</dt>
123                                  <dd>{{ a.context.consumer|default:"&nbsp;" }}</dd>
124                                  <dt>Service</dt>
125                                  <dd>Testbed guarantees 0.99 Uptime rate for 0.99 rate of the resources during the sliver lifetime</dd>
126                                  <dt>Template identfier</dt>
127                                  <dd>{{ a.context.template_id }}</dd>
128                                  <dt>Expiration time</dt>
129                                  <dd>{{ a.context.expirationtime|default:"&nbsp;" }}</dd>
130                             </div>
131                             <div class="modal-footer">
132                                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
133                             </div>
134                         </div>
135                     </div>
136                 </div>
137                 
138                 {% empty %}
139                 {% endfor %}
140             </div>
141         </div>
142     </div>
143 </div>
144 <!-- <div class="row" style="float:right;">
145     <button id="showEvaluations" type="button" class="btn btn-default"  onclick="displayDate()"><span class="glyphicon"></span>Show Evaluations</button>
146 </div> -->
147
148 <script>
149 $(document).ready(function() {
150         $('a.violation-detail').click(function () {
151                 var a = $(this).data('agreement');
152                 var v = $(this).data('violation');
153                 $("#sla").load('/sla/agreements/' + a + '/guarantees/' + v + '/violations', {'slicename': '{{ slicename }}'});
154         });
155         
156         // $('a.agreement-detail').click(function () {
157         //      var a = $(this).data('agreement');
158         //      $("#sla").load('/sla/agreements/' + a + '/detail');
159         // });
160
161         // $('tr.header').click(function(){
162         //      $(this).nextUntil('tr.header').toggle('fast');
163         //      $('.header .glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
164         // });
165 });
166
167 </script>