tools/pharos-dashboard/templates/dashboard/resource_utilization.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% block extrahead %}
   5     <!-- Morris Charts CSS -->
   6     <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">
   7
   8 {% endblock extrahead %}
   9
  10
  11 {% block content %}
  12     <div class="row">
  13         {% for resource, utilization in pods %}
  14             <div class="col-lg-3">
  15                 <div class="panel panel-default">
  16                     <div class="panel-heading">
  17                         {{ resource.name }}
  18                     </div>
  19                     <div class="panel-body">
  20                         <div class="flot-chart">
  21                             <div class="flot-chart-content" id="{{ resource.slave.name }}"></div>
  22                         </div>
  23                     </div>
  24                 </div>
  25             </div>
  26         {% endfor %}
  27     </div>
  28
  29 {% endblock content %}
  30
  31
  32 {% block extrajs %}
  33
  34     <!-- Flot Charts JavaScript -->
  35     <script src="{% static "bower_components/flot/excanvas.min.js" %}"></script>
  36     <script src="{% static "bower_components/flot/jquery.flot.js" %}"></script>
  37     <script src="{% static "bower_components/flot/jquery.flot.pie.js" %}"></script>
  38     <script src="{% static "bower_components/flot/jquery.flot.resize.js" %}"></script>
  39     <script src="{% static "bower_components/flot/jquery.flot.time.js" %}"></script>
  40     <script src="{% static "bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js" %}"></script>
  41
  42     <script type="text/javascript">
  43         $(document).ready(function () {
  44             {% for resource, utilization in pods %}
  45                 $(function () {
  46                     var data = [{
  47                         label: "Offline",
  48                         data: {{ utilization.offline }},
  49                         color: '#d9534f'
  50                     }, {
  51                         label: "Online",
  52                         data: {{ utilization.online }},
  53                         color: '#5cb85c'
  54                     }, {
  55                         label: "Idle",
  56                         data: {{ utilization.idle }},
  57                         color: '#5bc0de'
  58                     }];
  59
  60                     var plotObj = $.plot($("#{{ resource.slave.name }}"), data, {
  61                         series: {
  62                             pie: {
  63                                 show: true
  64                             }
  65                         },
  66                         grid: {
  67                             hoverable: true
  68                         },
  69                         tooltip: true,
  70                         tooltipOpts: {
  71                             content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
  72                             shifts: {
  73                                 x: 20,
  74                                 y: 0
  75                             },
  76                             defaultTheme: false
  77                         }
  78                     });
  79
  80                 });
  81             {% endfor %}
  82
  83         });
  84     </script>
  85
  86 {% endblock extrajs %}