From c684fe13cf6f3b4666a664bfdc638e446b2d123f Mon Sep 17 00:00:00 2001
From: maxbr <maxbr@mi.fu-berlin.de>
Date: Mon, 12 Sep 2016 11:08:56 +0200
Subject: Add booking utilization chart

JIRA: PHAROS-263

Change-Id: I3a3a5115a1cf7742f9ac5a3ec753699c36b49815
Signed-off-by: maxbr <maxbr@mi.fu-berlin.de>
---
 .../templates/dashboard/resource.html              | 18 ++++++------
 .../templates/dashboard/resource_all.html          | 17 +++++------
 .../templates/dashboard/resource_detail.html       | 34 +++++++++++++++++++++-
 .../templates/dashboard/server_table.html          |  2 +-
 tools/pharos-dashboard/templates/layout.html       |  4 +--
 5 files changed, 53 insertions(+), 22 deletions(-)

(limited to 'tools/pharos-dashboard/templates')

diff --git a/tools/pharos-dashboard/templates/dashboard/resource.html b/tools/pharos-dashboard/templates/dashboard/resource.html
index 92d02f66..c9e57354 100644
--- a/tools/pharos-dashboard/templates/dashboard/resource.html
+++ b/tools/pharos-dashboard/templates/dashboard/resource.html
@@ -38,21 +38,21 @@
     <script src="{% static "bower_components/flot/jquery.flot.time.js" %}"></script>
     <script src="{% static "bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js" %}"></script>
 
+    <script src="{% static "js/flot-pie-chart.js" %}"></script>
+
     <script type="text/javascript">
         $(document).ready(function () {
             $('#{{ resource.id }}_server_table').DataTable({});
             $('#{{ resource.id }}_bookings_table').DataTable({});
+            $('#{{ resource.id }}_vpn_user_table').DataTable({});
 
-            $(function () {
-                var plotObj = $.plot($("#{{ resource.id }}_slave_utilization"), data_{{ resource.id }}, {
-                    series: {
-                        pie: {
-                            show: true
-                        }
-                    }
-                });
+            var chart_id = "{{ resource.id }}_booking_utilization";
+            var utilization_url = "{% url 'dashboard:booking_utilization' resource_id=resource.id weeks=4 %}";
+            loadChartData(chart_id, utilization_url);
 
-            });
+            var chart_id = "{{ resource.id }}_jenkins_utilization";
+            var utilization_url = "{% url 'dashboard:jenkins_utilization' resource_id=resource.id weeks=1 %}";
+            loadChartData(chart_id, utilization_url);
         });
     </script>
 {% endblock extrajs %}
\ No newline at end of file
diff --git a/tools/pharos-dashboard/templates/dashboard/resource_all.html b/tools/pharos-dashboard/templates/dashboard/resource_all.html
index 2078475f..a770d4e8 100644
--- a/tools/pharos-dashboard/templates/dashboard/resource_all.html
+++ b/tools/pharos-dashboard/templates/dashboard/resource_all.html
@@ -50,6 +50,7 @@
     <script src="{% static "bower_components/flot/jquery.flot.resize.js" %}"></script>
     <script src="{% static "bower_components/flot/jquery.flot.time.js" %}"></script>
     <script src="{% static "bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js" %}"></script>
+    <script src="{% static "js/flot-pie-chart.js" %}"></script><
 
     <script type="text/javascript">
         $(document).ready(function () {
@@ -57,17 +58,15 @@
 
                 $('#{{ resource.id }}_server_table').DataTable({});
                 $('#{{ resource.id }}_bookings_table').DataTable({});
+                $('#{{ resource.id }}_vpn_user_table').DataTable({});
 
-                $(function () {
-                    var plotObj = $.plot($("#{{ resource.id }}_slave_utilization"), data_{{ resource.id }}, {
-                        series: {
-                            pie: {
-                                show: true
-                            }
-                        }
-                    });
+                var chart_id = "{{ resource.id }}_booking_utilization";
+                var utilization_url = "{% url 'dashboard:booking_utilization' resource_id=resource.id weeks=4 %}";
+                loadChartData(chart_id, utilization_url);
 
-                });
+                var chart_id = "{{ resource.id }}_jenkins_utilization";
+                var utilization_url = "{% url 'dashboard:jenkins_utilization' resource_id=resource.id weeks=1 %}";
+                loadChartData(chart_id, utilization_url);
             {% endfor %}
         });
     </script>
diff --git a/tools/pharos-dashboard/templates/dashboard/resource_detail.html b/tools/pharos-dashboard/templates/dashboard/resource_detail.html
index 4fba4766..904fecd4 100644
--- a/tools/pharos-dashboard/templates/dashboard/resource_detail.html
+++ b/tools/pharos-dashboard/templates/dashboard/resource_detail.html
@@ -29,7 +29,39 @@
     </div>
 </div>
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-lg-3">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Booking Utilization
+                <div class="pull-right">
+                    <div class="form-group">
+                        <select onchange="loadChartData('{{ resource.id }}_booking_utilization', this.value);">
+                            <option value="{% url 'dashboard:booking_utilization' resource_id=resource.id weeks=-4 %}">
+                                Last Month
+                            </option>
+                            <option value="{% url 'dashboard:booking_utilization' resource_id=resource.id weeks=-1 %}">
+                                Last Week
+                            </option>
+                            <option value="{% url 'dashboard:booking_utilization' resource_id=resource.id weeks=1 %}">
+                                Next Week
+                            </option>
+                            <option selected="selected"
+                                    value="{% url 'dashboard:booking_utilization' resource_id=resource.id weeks=4 %}">
+                                Next Month
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body">
+                <div class="flot-chart">
+                    <div class="flot-chart-content"
+                         id="{{ resource.id }}_booking_utilization"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-9">
         <div class="panel panel-default">
             <div class="panel-heading">
                 Bookings
diff --git a/tools/pharos-dashboard/templates/dashboard/server_table.html b/tools/pharos-dashboard/templates/dashboard/server_table.html
index d47e5204..fee7e8b1 100644
--- a/tools/pharos-dashboard/templates/dashboard/server_table.html
+++ b/tools/pharos-dashboard/templates/dashboard/server_table.html
@@ -26,5 +26,5 @@
             {{ server.storage }}
         </th>
     </tr>
-{% endfor %}`
+{% endfor %}
 </tbody>
\ No newline at end of file
diff --git a/tools/pharos-dashboard/templates/layout.html b/tools/pharos-dashboard/templates/layout.html
index db9490f5..64fed4ae 100644
--- a/tools/pharos-dashboard/templates/layout.html
+++ b/tools/pharos-dashboard/templates/layout.html
@@ -20,7 +20,7 @@
     <link href="{% static "bower_components/metisMenu/dist/metisMenu.min.css" %}" rel="stylesheet">
 
     <!-- Custom CSS -->
-    <link href="{% static "bower_components/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" %}"
+    <link href="{% static "bower_components/startbootstrap-sb-admin-2-blackrockdigital/dist/css/sb-admin-2.css" %}"
           rel="stylesheet">
     <link href="{% static "css/theme.css" %}" rel="stylesheet">
 
@@ -65,7 +65,7 @@
 <script src="{% static "bower_components/metisMenu/dist/metisMenu.min.js" %}"></script>
 
 <!-- Custom Theme JavaScript -->
-<script src="{% static "bower_components/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js" %}"></script>
+<script src="{% static "bower_components/startbootstrap-sb-admin-2-blackrockdigital/dist/js/sb-admin-2.js" %}"></script>
 
 {% block extrajs %}
 {% endblock extrajs %}
-- 
cgit 1.2.3-korg