diff options
Diffstat (limited to 'tools/pharos-dashboard/templates/dashboard')
| -rw-r--r-- | tools/pharos-dashboard/templates/dashboard/dev_pods.html | 2 | ||||
| -rw-r--r-- | tools/pharos-dashboard/templates/dashboard/lab_owner.html | 151 | ||||
| -rw-r--r-- | tools/pharos-dashboard/templates/dashboard/resource.html | 58 | ||||
| -rw-r--r-- | tools/pharos-dashboard/templates/dashboard/resource_all.html (renamed from tools/pharos-dashboard/templates/dashboard/resource_utilization.html) | 66 | ||||
| -rw-r--r-- | tools/pharos-dashboard/templates/dashboard/resource_detail.html | 64 | ||||
| -rw-r--r-- | tools/pharos-dashboard/templates/dashboard/server_table.html | 30 |
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 |