sla/templates/slice-tab-sla.html

   1
   2 <div class="col-md-1">
   3 </div>
   4
   5  <div class="col-md-10">
   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 selected resources</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
  41                 <dt>Covered resources:</dt>
  42                 {% for sliver in row.slivers %}
  43                 <dd>{{ sliver|default:"&nbsp;" }}</dd>
  44                 {% endfor %}
  45
  46                         </div>
  47                         <div class="modal-footer">
  48                                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  49                         </div>
  50                 </div>
  51         </div>
  52 </div>
  53
  54 {% endfor %}
  55
  56       <table class="table table-striped table-bordered" id="sla_table">
  57
  58         <thead>
  59           <tr>
  60             <th>Provider</th>
  61             <th>Agreement</th>
  62             <th>Date</th>
  63             <th>Status</th>
  64             <th>Result</th>
  65           </tr>
  66         </thead>
  67
  68         <tbody>
  69         {% for row in ag_info %}
  70
  71         <tr>
  72
  73           <td>{{ row.provider }}</td>
  74
  75           <td><a class="agreement-detail" data-toggle="modal" data-target="#agreementModal{{row.agreement.agreement_id}}">{{ row.agreement.agreement_id }}</a></td>
  76
  77           <td>{{ row.date }}</td>
  78           <td>{{ row.status }}</td>
  79           {% if row.ok == "true" %}
  80           <td class="success">99% uptime for {{ row.result }}% resources</td>
  81           {% elif row.ok == "false" %}
  82           <td class="danger">99% uptime for {{ row.result }}% resources</td>
  83           {% else %}
  84           <td></td>
  85           {% endif %}
  86           <!-- {% if row.ok == "false" %}
  87           <td class="glyphicon glyphicon-remove-sign" style="color:red;"></td>
  88           {% elif row.ok == "true" %}
  89           <td class="glyphicon glyphicon-ok-sign" style="color:green;"></td>
  90           {% else %}
  91           <td></td>
  92           {% endif %} -->
  93
  94
  95         </tr>
  96
  97         {% endfor %}
  98         </tbody>
  99
 100 </table>
 101 </div>
 102 </div>
 103 <!-- <div class="row" style="float:right;">
 104     <button id="showEvaluations" type="button" class="btn btn-default"  onclick="displayDate()"><span class="glyphicon"></span>Show Evaluations</button>
 105 </div> -->
 106
 107 <script>
 108 $(document).ready(function() {
 109
 110   $('#sla_table').dataTable({
 111         "aoColumns": [
 112             null,
 113             null,
 114             null,
 115             null,
 116             { "orderSequence": [ "desc", "asc" ] }
 117         ]
 118     });
 119
 120         $('a.violation-detail').click(function () {
 121                 var a = $(this).data('agreement');
 122                 var v = $(this).data('violation');
 123                 $("#sla").load('/sla/agreements/' + a + '/guarantees/' + v + '/violations', {'slicename': '{{ slicename }}'});
 124         });
 125
 126         // $('a.agreement-detail').click(function () {
 127         //      var a = $(this).data('agreement');
 128         //      $("#sla").load('/sla/agreements/' + a + '/detail');
 129         // });
 130
 131         $('tr.header').click(function(){
 132                 $(this).nextUntil('tr.header').toggle('fast');
 133                 $('.header .glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
 134         });
 135 });
 136
 137 </script>