sla/templates/slice-tab-sla.html

   1
   2 <div class="col-md-2">
   3 </div>
   4
   5  <div class="col-md-9">
   6    <div class="row" id="agreements" style="padding-top:1em;">
   7
   8
   9 {% for row in ag_info %}
  10
  11 <!-- Modal - columns selector -->
  12 <div class="modal fade" id="agreementModal{{row.agreement.agreement_id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  13
  14 <style type="text/css" scoped>
  15         .modal-lg {
  16           width: 50%;
  17         }
  18 </style>
  19
  20         <div class="modal-dialog modal-lg">
  21                 <div class="modal-content">
  22                         <div class="modal-header">
  23                                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  24                                 <h4 class="modal-title" id="myModalAgreement">Agreement details</h4>
  25                         </div>
  26                         <div class="modal-body">
  27
  28                 <dt>Agreement Id</dt>
  29                 <dd>{{ row.agreement.agreement_id|default:"&nbsp;" }}</dd>
  30                 <dt>Provider</dt>
  31                 <dd>{{ row.provider|default:"&nbsp;" }}</dd>
  32                 <dt>Experimenter</dt>
  33                 <dd>{{ row.agreement.context.consumer|default:"&nbsp;" }}</dd>
  34                 <dt>Service</dt>
  35                 <dd>Testbed guarantees 0.99 Uptime rate for 0.99 rate of the resources during the sliver lifetime</dd>
  36                 <dt>Testbed</dt>
  37                 <dd>{{ row.agreement.context.testbed_formatted }}</dd>
  38                 <dt>Expiration date:</dt>
  39                 <dd>{{ row.date|default:"&nbsp;" }}</dd>
  40                         </div>
  41                         <div class="modal-footer">
  42                                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  43                         </div>
  44                 </div>
  45         </div>
  46 </div>
  47
  48 {% endfor %}
  49
  50       <table class="table table-striped table-bordered" id="sla_table">
  51
  52         <thead>
  53           <tr>
  54             <th>Provider</th>
  55             <th>Agreement</th>
  56             <th>Date</th>
  57             <th>Status</th>
  58             <th>Result</th>
  59           </tr>
  60         </thead>
  61
  62         <tbody>
  63         {% for row in ag_info %}
  64
  65         <tr>
  66
  67           <td>{{ row.provider }}</td>
  68
  69           <td><a class="agreement-detail" data-toggle="modal" data-target="#agreementModal{{row.agreement.agreement_id}}">{{ row.agreement.context.template_id }}</a></td>
  70
  71           <td>{{ row.date }}</td>
  72           <td>{{ row.status }}</td>
  73           {% if row.ok == "true" %}
  74           <td class="success">99% uptime for {{ row.result }}% resources</td>
  75           {% elif row.ok == "false" %}
  76           <td class="danger">99% uptime for {{ row.result }}% resources</td>
  77           {% else %}
  78           <td></td>
  79           {% endif %}
  80           <!-- {% if row.ok == "false" %}
  81           <td class="glyphicon glyphicon-remove-sign" style="color:red;"></td>
  82           {% elif row.ok == "true" %}
  83           <td class="glyphicon glyphicon-ok-sign" style="color:green;"></td>
  84           {% else %}
  85           <td></td>
  86           {% endif %} -->
  87
  88
  89         </tr>
  90
  91         {% endfor %}
  92         </tbody>
  93
  94 </table>
  95 </div>
  96 </div>
  97 <!-- <div class="row" style="float:right;">
  98     <button id="showEvaluations" type="button" class="btn btn-default"  onclick="displayDate()"><span class="glyphicon"></span>Show Evaluations</button>
  99 </div> -->
 100
 101 <script>
 102 $(document).ready(function() {
 103
 104   $('#sla_table').dataTable({
 105         "aoColumns": [
 106             null,
 107             null,
 108             null,
 109             null,
 110             { "orderSequence": [ "desc", "asc" ] }
 111         ]
 112     });
 113
 114         $('a.violation-detail').click(function () {
 115                 var a = $(this).data('agreement');
 116                 var v = $(this).data('violation');
 117                 $("#sla").load('/sla/agreements/' + a + '/guarantees/' + v + '/violations', {'slicename': '{{ slicename }}'});
 118         });
 119
 120         // $('a.agreement-detail').click(function () {
 121         //      var a = $(this).data('agreement');
 122         //      $("#sla").load('/sla/agreements/' + a + '/detail');
 123         // });
 124
 125         $('tr.header').click(function(){
 126                 $(this).nextUntil('tr.header').toggle('fast');
 127                 $('.header .glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
 128         });
 129 });
 130
 131 </script>