Merge "Add a Resource detail view"

6 files changed, 180 insertions, 191 deletions

diff --git a/tools/pharos-dashboard/templates/dashboard/dev_pods.html b/tools/pharos-dashboard/templates/dashboard/dev_pods.html
index 532a3a11..9c84bb91 100644
--- a/tools/pharos-dashboard/templates/dashboard/dev_pods.html
+++ b/tools/pharos-dashboard/templates/dashboard/dev_pods.html
@@ -18,7 +18,7 @@
     {% for pod, booking in dev_pods %}
         <tr>
             <th>
-                <a target='_blank' href={{ pod.url }}>{{ pod.name }}</a>
+                <a href={% url 'dashboard:resource' resource_id=pod.id %}>{{ pod.name }}</a>
             </th>
             <th>
                 <a target='_blank' href={{ pod.slave.url }}>{{ pod.slave.name }}</a>
diff --git a/tools/pharos-dashboard/templates/dashboard/lab_owner.html b/tools/pharos-dashboard/templates/dashboard/lab_owner.html
deleted file mode 100644
index a4f428c7..00000000
--- a/tools/pharos-dashboard/templates/dashboard/lab_owner.html
+++ /dev/null
@@ -1,151 +0,0 @@
-{% extends "base.html" %}
-{% load staticfiles %}
-
-{% block extrahead %}
-    <!-- Morris Charts CSS -->
-    <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">
-
-    <!-- DataTables CSS -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
-          rel="stylesheet">
-
-    <!-- DataTables Responsive CSS -->
-    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
-          rel="stylesheet">
-{% endblock extrahead %}
-
-
-{% block content %}
-    {% for resource, utilization, bookings in pods %}
-        <div class="row">
-            <div class="col-lg-3">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
-                        {{ resource.name }}
-                    </div>
-                    <div class="panel-body">
-                        <div class="flot-chart">
-                            <div class="flot-chart-content" id="{{ resource.slave.name }}"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-6">
-                <div class="panel panel-default">
-                    <div class="panel-heading">
-                        {{ resource.name }} Bookings
-                    </div>
-                    <div class="panel-body">
-                        <div class="dataTables_wrapper">
-                            <table class="table table-striped table-bordered table-hover"
-                                   id="{{ resource.slave.name }}_bookings" cellspacing="0"
-                                   width="100%">
-                                <thead>
-                                <tr>
-                                    <th>User</th>
-                                    <th>Purpose</th>
-                                    <th>Start</th>
-                                    <th>End</th>
-                                    <th>Status</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                {% for booking in bookings %}
-                                    <tr>
-                                        <th>
-                                            {{ booking.user.username }}
-                                        </th>
-                                        <th>
-                                            {{ booking.purpose }}
-                                        </th>
-                                        <th>
-                                            {{ booking.start }}
-                                        </th>
-                                        <th>
-                                            {{ booking.end }}
-                                        </th>
-                                        <th>
-                                            Jira Status
-                                        </th>
-                                    </tr>
-                                {% endfor %}`
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    {% endfor %}
-
-{% endblock content %}
-
-
-{% block extrajs %}
-    <!-- DataTables JavaScript -->
-    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
-          rel="stylesheet">
-
-
-    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
-    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
-
-
-
-    <!-- Flot Charts JavaScript -->
-    <script src="{% static "bower_components/flot/excanvas.min.js" %}"></script>
-    <script src="{% static "bower_components/flot/jquery.flot.js" %}"></script>
-    <script src="{% static "bower_components/flot/jquery.flot.pie.js" %}"></script>
-    <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 type="text/javascript">
-        $(document).ready(function () {
-
-
-            {% for resource, utilization, bookings in pods %}
-                $('#{{ resource.slave.name }}_bookings').DataTable({});
-
-                $(function () {
-                    var data = [{
-                        label: "Offline",
-                        data: {{ utilization.offline }},
-                        color: '#d9534f'
-                    }, {
-                        label: "Online",
-                        data: {{ utilization.online }},
-                        color: '#5cb85c'
-                    }, {
-                        label: "Idle",
-                        data: {{ utilization.idle }},
-                        color: '#5bc0de'
-                    }];
-
-                    var plotObj = $.plot($("#{{ resource.slave.name }}"), data, {
-                        series: {
-                            pie: {
-                                show: true
-                            }
-                        },
-                        grid: {
-                            hoverable: false
-                        },
-                        tooltip: true,
-                        tooltipOpts: {
-                            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
-                            shifts: {
-                                x: 20,
-                                y: 0
-                            },
-                            defaultTheme: false
-                        }
-                    });
-
-                });
-            {% endfor %}
-
-        });
-    </script>
-
-{% endblock extrajs %}
\ No newline at end of file
diff --git a/tools/pharos-dashboard/templates/dashboard/resource.html b/tools/pharos-dashboard/templates/dashboard/resource.html
new file mode 100644
index 00000000..92d02f66
--- /dev/null
+++ b/tools/pharos-dashboard/templates/dashboard/resource.html
@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% block extrahead %}
+    <!-- Morris Charts CSS -->
+    <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">
+
+    <!-- DataTables CSS -->
+    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+          rel="stylesheet">
+
+    <!-- DataTables Responsive CSS -->
+    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
+          rel="stylesheet">
+{% endblock extrahead %}
+
+
+{% block content %}
+    {% include "dashboard/resource_detail.html" %}
+{% endblock content %}
+
+
+{% block extrajs %}
+    <!-- DataTables JavaScript -->
+    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+          rel="stylesheet">
+
+    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
+
+
+
+    <!-- Flot Charts JavaScript -->
+    <script src="{% static "bower_components/flot/excanvas.min.js" %}"></script>
+    <script src="{% static "bower_components/flot/jquery.flot.js" %}"></script>
+    <script src="{% static "bower_components/flot/jquery.flot.pie.js" %}"></script>
+    <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 type="text/javascript">
+        $(document).ready(function () {
+            $('#{{ resource.id }}_server_table').DataTable({});
+            $('#{{ resource.id }}_bookings_table').DataTable({});
+
+            $(function () {
+                var plotObj = $.plot($("#{{ resource.id }}_slave_utilization"), data_{{ resource.id }}, {
+                    series: {
+                        pie: {
+                            show: true
+                        }
+                    }
+                });
+
+            });
+        });
+    </script>
+{% endblock extrajs %}
\ No newline at end of file
diff --git a/tools/pharos-dashboard/templates/dashboard/resource_utilization.html b/tools/pharos-dashboard/templates/dashboard/resource_all.html
index fb483d60..2078475f 100644
--- a/tools/pharos-dashboard/templates/dashboard/resource_utilization.html
+++ b/tools/pharos-dashboard/templates/dashboard/resource_all.html
@@ -5,31 +5,43 @@
     <!-- Morris Charts CSS -->
     <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">
 
+    <!-- DataTables CSS -->
+    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+          rel="stylesheet">
+
+    <!-- DataTables Responsive CSS -->
+    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
+          rel="stylesheet">
 {% endblock extrahead %}
 
 
 {% block content %}
-    <div class="row">
-        {% for resource, utilization in pods %}
-            <div class="col-lg-3">
+    {% for resource, utilization, bookings in pods %}
+        <div class="row">
+            <div class="col-lg-12">
                 <div class="panel panel-default">
                     <div class="panel-heading">
                         {{ resource.name }}
                     </div>
                     <div class="panel-body">
-                        <div class="flot-chart">
-                            <div class="flot-chart-content" id="{{ resource.slave.name }}"></div>
-                        </div>
+                        {% include "dashboard/resource_detail.html" %}
                     </div>
                 </div>
             </div>
-        {% endfor %}
-    </div>
-
+        </div>
+    {% endfor %}
 {% endblock content %}
 
 
 {% block extrajs %}
+    <!-- DataTables JavaScript -->
+    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
+          rel="stylesheet">
+
+    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
+    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>
+
+
 
     <!-- Flot Charts JavaScript -->
     <script src="{% static "bower_components/flot/excanvas.min.js" %}"></script>
@@ -41,46 +53,22 @@
 
     <script type="text/javascript">
         $(document).ready(function () {
-            {% for resource, utilization in pods %}
-                $(function () {
-                    var data = [{
-                        label: "Offline",
-                        data: {{ utilization.offline }},
-                        color: '#d9534f'
-                    }, {
-                        label: "Online",
-                        data: {{ utilization.online }},
-                        color: '#5cb85c'
-                    }, {
-                        label: "Idle",
-                        data: {{ utilization.idle }},
-                        color: '#5bc0de'
-                    }];
+            {% for resource, utilization, bookings in pods %}
+
+                $('#{{ resource.id }}_server_table').DataTable({});
+                $('#{{ resource.id }}_bookings_table').DataTable({});
 
-                    var plotObj = $.plot($("#{{ resource.slave.name }}"), data, {
+                $(function () {
+                    var plotObj = $.plot($("#{{ resource.id }}_slave_utilization"), data_{{ resource.id }}, {
                         series: {
                             pie: {
                                 show: true
                             }
-                        },
-                        grid: {
-                            hoverable: true
-                        },
-                        tooltip: true,
-                        tooltipOpts: {
-                            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
-                            shifts: {
-                                x: 20,
-                                y: 0
-                            },
-                            defaultTheme: false
                         }
                     });
 
                 });
             {% endfor %}
-
         });
     </script>
-
 {% endblock extrajs %}
\ No newline at end of file
diff --git a/tools/pharos-dashboard/templates/dashboard/resource_detail.html b/tools/pharos-dashboard/templates/dashboard/resource_detail.html
new file mode 100644
index 00000000..4fba4766
--- /dev/null
+++ b/tools/pharos-dashboard/templates/dashboard/resource_detail.html
@@ -0,0 +1,64 @@
+<div class="row">
+    <div class="col-lg-3">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Utilization
+            </div>
+            <div class="panel-body">
+                <div class="flot-chart">
+                    <div class="flot-chart-content" id="{{ resource.id }}_slave_utilization"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-9">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Servers
+            </div>
+            <div class="panel-body">
+                <div class="dataTables_wrapper">
+                    <table class="table table-striped table-bordered table-hover"
+                           id="{{ resource.id }}_server_table" cellspacing="0"
+                           width="100%">
+                        {% include "dashboard/server_table.html" %}
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-6">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Bookings
+            </div>
+            <div class="panel-body">
+                <div class="dataTables_wrapper">
+                    <table class="table table-striped table-bordered table-hover"
+                           id="{{ resource.id }}_bookings_table" cellspacing="0"
+                           width="100%">
+                        {% include "booking/booking_table.html" %}
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    var data_{{ resource.id }} = [{
+        label: "Offline",
+        data: {{ utilization.offline }},
+        color: '#d9534f'
+    }, {
+        label: "Online",
+        data: {{ utilization.online }},
+        color: '#5cb85c'
+    }, {
+        label: "Idle",
+        data: {{ utilization.idle }},
+        color: '#5bc0de'
+    }];
+</script>
\ No newline at end of file
diff --git a/tools/pharos-dashboard/templates/dashboard/server_table.html b/tools/pharos-dashboard/templates/dashboard/server_table.html
new file mode 100644
index 00000000..d47e5204
--- /dev/null
+++ b/tools/pharos-dashboard/templates/dashboard/server_table.html
@@ -0,0 +1,30 @@
+<thead>
+<tr>
+    <th>Server</th>
+    <th>Model</th>
+    <th>CPU</th>
+    <th>RAM</th>
+    <th>Storage</th>
+</tr>
+</thead>
+<tbody>
+{% for server in resource.server_set.all %}
+    <tr>
+        <th>
+            {{ server.name }}
+        </th>
+        <th>
+            {{ server.model }}
+        </th>
+        <th>
+            {{ server.cpu }}
+        </th>
+        <th>
+            {{ server.ram }}
+        </th>
+        <th>
+            {{ server.storage }}
+        </th>
+    </tr>
+{% endfor %}`
+</tbody>
\ No newline at end of file