diff options
Diffstat (limited to 'tools/pharos-dashboard/templates/dashboard')
10 files changed, 391 insertions, 173 deletions
diff --git a/tools/pharos-dashboard/templates/dashboard/base.html b/tools/pharos-dashboard/templates/dashboard/base.html deleted file mode 100644 index 544bf0b3..00000000 --- a/tools/pharos-dashboard/templates/dashboard/base.html +++ /dev/null @@ -1,93 +0,0 @@ -{% extends "layout/base.html" %} -{% load bootstrap3 %} - -{% block basecontent %} - <div id="wrapper"> - <!-- Navigation --> - <nav class="navbar navbar-default navbar-static-top" role="navigation" - style="margin-bottom: 0"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" - data-target=".navbar-collapse"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a href="https://www.opnfv.org/" class="navbar-left"><img - src="https://www.opnfv.org/sites/all/themes/opnfv/logo.png"></a> - <a class="navbar-brand" href={% url 'dashboard:' %}>Pharos Dashboard</a> - </div> - <!-- /.navbar-header --> - - <ul class="nav navbar-top-links navbar-right"> - <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#"> - <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i> - </a> - <ul class="dropdown-menu dropdown-user"> - {% if user.is_authenticated %} - <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a> - </li> - <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a> - </li> - <li class="divider"></li> - <li><a href="{% url 'dashboard:logout' %}?next={{ request.path }}"><i - class="fa fa-sign-out fa-fw"></i> - Logout</a> - </li> - {% else %} - <li><a href="{% url 'dashboard:login' %}"><i - class="fa fa-sign-out fa-fw"></i> - Login</a> - {% endif %} - </ul> - <!-- /.dropdown-user --> - </li> - <!-- /.dropdown --> - </ul> - <!-- /.navbar-top-links --> - - <div class="navbar-default sidebar" role="navigation"> - <div class="sidebar-nav navbar-collapse"> - <ul class="nav" id="side-menu"> - <li> - <a href="{% url 'dashboard:ci_pods' %}"><i - class="fa fa-table fa-fw"></i>CI-Pods</a> - </li> - <li> - <a href="{% url 'dashboard:dev_pods' %}"><i - class="fa fa-table fa-fw"></i>Development - Pods</a> - </li> - <li> - <a href="{% url 'dashboard:jenkins_slaves' %}"><i - class="fa fa-table fa-fw"></i>Jenkins - Slaves</a> - </li> - </ul> - </div> - <!-- /.sidebar-collapse --> - </div> - <!-- /.navbar-static-side --> - </nav> - - <!-- Page Content --> - <div id="page-wrapper"> - <div class="row"> - <div class="col-lg-12"> - <h1 class="page-header">{{ title }}</h1> - </div> - <!-- /.col-lg-12 --> - </div> - - {% bootstrap_messages %} - - {% block content %} - - {% endblock content %} - </div> - <!-- /#page-wrapper --> - </div> - <!-- /#wrapper --> -{% endblock basecontent %}
\ No newline at end of file diff --git a/tools/pharos-dashboard/templates/dashboard/booking_calendar.html b/tools/pharos-dashboard/templates/dashboard/booking_calendar.html deleted file mode 100644 index 0f6bece0..00000000 --- a/tools/pharos-dashboard/templates/dashboard/booking_calendar.html +++ /dev/null @@ -1,79 +0,0 @@ -{% extends "dashboard/base.html" %} -{% load staticfiles %} -{% load bootstrap3 %} - -{% block extrahead %} - <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}" - rel='stylesheet'/> - <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}" - rel='stylesheet'/> -{% endblock extrahead %} - -{% block content %} - <div class="row"> - <div class="col-lg-8"> - <div class="container-fluid"> - <div class="panel panel-default"> - <div class="panel-heading"> - Calendar - </div> - <div class="panel-body"> - <div id='calendar'> - </div> - </div> - <!-- /.panel-body --> - </div> - <!-- /.panel --> - </div> - </div> - - <div class="col-lg-4"> - <div class="panel panel-default"> - <div class="panel-heading"> - Booking - </div> - <div class="panel-body"> - {% bootstrap_form_errors form type='non_fields' %} - - <form method="post" class="form" id="bookingform"> - {% csrf_token %} - <div class='input-group' id='starttimepicker'> - {% bootstrap_field form.start_date_time addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} - </div> - <div class='input-group' id='endtimepicker'> - {% bootstrap_field form.end_date_time addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} - </div> - {% bootstrap_field form.purpose %} - {{ form.booking_id }} - {% buttons %} - <button type="submit" class="btn btn btn-success" - id="submitform"> - Book Pod - </button> - <button type="button" class="btn btn btn-danger hidden" - id="deletebutton"> - Delete Booking - </button> - {% endbuttons %} - </form> - - </div> - </div> - </div> - </div> -{% endblock content %} - -{% block extrajs %} - <script type="text/javascript"> - var bookings_url = '/resource/' + {{ resource.resource_id }} +'/bookings/'; - </script> - - <script src={% static "bower_components/moment/moment.js" %}></script> - <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script> - <script type="text/javascript" - src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script> - <script src={% static "js/fullcalendar-options.js" %}></script> - <script src={% static "js/datetimepicker-options.js" %}></script> - <script src={% static "js/csrf.js" %}></script> - <script src={% static "js/booking-calendar.js" %}></script> -{% endblock extrajs %}
\ No newline at end of file diff --git a/tools/pharos-dashboard/templates/dashboard/ci_pods.html b/tools/pharos-dashboard/templates/dashboard/ci_pods.html new file mode 100644 index 00000000..2982a6ff --- /dev/null +++ b/tools/pharos-dashboard/templates/dashboard/ci_pods.html @@ -0,0 +1,60 @@ +{% extends "dashboard/table.html" %} +{% load staticfiles %} +{% load jenkins_filters %} + +{% block table %} + <thead> + <tr> + <th>Name</th> + <th>Slave Name</th> + <th>Status</th> + <th>Installer</th> + <th>Scenario</th> + <th>Branch</th> + <th>Job</th> + </tr> + </thead> + <tbody> + {% for pod in ci_pods %} + <tr> + <th> + <a target='_blank' href={{ pod.url }}>{{ pod.name }}</a> + </th> + <th> + <a target='_blank' href={{ pod.slave.url }}>{{ pod.slave.name }}</a> + </th> + <th style="background-color:{{ pod.slave.status | jenkins_status_color }}"> + {{ pod.slave.status }} + </th> + <th {{ pod.slave.last_job_result | jenkins_job_blink }}> + {{ pod.slave.last_job_installer }} + </th> + <th {{ pod.slave.last_job_result | jenkins_job_blink }}> + {{ pod.slave.last_job_scenario }} + </th> + <th {{ pod.slave.last_job_result | jenkins_job_blink }}> + {{ pod.slave.last_job_branch }} + </th> + <th><a {{ pod.slave.last_job_result | jenkins_job_blink }} + style="color:{{ pod.slave.last_job_result | jenkins_job_color }}" + target='_blank' + href={{ pod.slave.last_job_url }}>{{ pod.slave.last_job_name }}</a> + </th> + </tr> + {% endfor %}` + </tbody> +{% endblock table %} + + +{% block tablejs %} + <script type="text/javascript"> + $(document).ready(function () { + $('#table').DataTable({ + columnDefs: [ + {type: 'status', targets: 2} + ], + "order": [[2, "asc"]] + }); + }); + </script> +{% endblock tablejs %}
\ No newline at end of file diff --git a/tools/pharos-dashboard/templates/dashboard/dev_pods.html b/tools/pharos-dashboard/templates/dashboard/dev_pods.html new file mode 100644 index 00000000..9c84bb91 --- /dev/null +++ b/tools/pharos-dashboard/templates/dashboard/dev_pods.html @@ -0,0 +1,59 @@ +{% extends "dashboard/table.html" %} +{% load staticfiles %} +{% load jenkins_filters %} + +{% block table %} + <thead> + <tr> + <th>Name</th> + <th>Slave Name</th> + <th>Booked by</th> + <th>Booked until</th> + <th>Purpose</th> + <th>Status</th> + <th></th> + </tr> + </thead> + <tbody> + {% for pod, booking in dev_pods %} + <tr> + <th> + <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> + </th> + <th> + {{ booking.user.username }} + </th> + <th> + {{ booking.end }} + </th> + <th> + {{ booking.purpose }} + </th> + <th style="background-color:{{ pod.slave.status | jenkins_status_color }}"> + {{ pod.slave.status }} + </th> + <th> + <a href="{% url 'booking:create' resource_id=pod.id %}" class="btn btn-primary"> + Book + </a> + </th> + </tr> + {% endfor %} + </tbody> +{% endblock table %} + +{% block tablejs %} + <script type="text/javascript"> + $(document).ready(function () { + $('#table').DataTable({ + columnDefs: [ + {type: 'status', targets: 5} + ], + "order": [[5, "asc"]] + }); + }); + </script> +{% endblock tablejs %}
\ No newline at end of file diff --git a/tools/pharos-dashboard/templates/dashboard/jenkins_slaves.html b/tools/pharos-dashboard/templates/dashboard/jenkins_slaves.html new file mode 100644 index 00000000..830ed198 --- /dev/null +++ b/tools/pharos-dashboard/templates/dashboard/jenkins_slaves.html @@ -0,0 +1,45 @@ +{% extends "dashboard/table.html" %} +{% load staticfiles %} + +{% load jenkins_filters %} + +{% block table %} + <thead> + <tr> + <th>Slave name</th> + <th>Status</th> + <th>Job</th> + </tr> + </thead> + <tbody> + {% for slave in slaves %} + <tr> + <th><a target='_blank' + href={{ slave.url }}>{{ slave.name }}</a> + </th> + <th style="background-color:{{ slave.status | jenkins_status_color }}"> + {{ slave.status }} + </th> + <th><a {{ slave.last_job_result | jenkins_job_blink }} + style="color:{{ slave.last_job_result | jenkins_job_color }}" + target="_blank" href={{ slave.last_job_url }}> + {{ slave.last_job_name }}</a> + </th> + </tr> + {% endfor %} + </tbody> +{% endblock table %} + + +{% block tablejs %} + <script type="text/javascript"> + $(document).ready(function () { + $('#table').DataTable({ + columnDefs: [ + {type: 'status', targets: 1} + ], + "order": [[1, "asc"]] + }); + }); + </script> +{% endblock tablejs %}
\ 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_all.html b/tools/pharos-dashboard/templates/dashboard/resource_all.html new file mode 100644 index 00000000..2078475f --- /dev/null +++ b/tools/pharos-dashboard/templates/dashboard/resource_all.html @@ -0,0 +1,74 @@ +{% 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-12"> + <div class="panel panel-default"> + <div class="panel-heading"> + {{ resource.name }} + </div> + <div class="panel-body"> + {% include "dashboard/resource_detail.html" %} + </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.id }}_server_table').DataTable({}); + $('#{{ resource.id }}_bookings_table').DataTable({}); + + $(function () { + var plotObj = $.plot($("#{{ resource.id }}_slave_utilization"), data_{{ resource.id }}, { + series: { + pie: { + show: true + } + } + }); + + }); + {% 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 diff --git a/tools/pharos-dashboard/templates/dashboard/table.html b/tools/pharos-dashboard/templates/dashboard/table.html index 2d0b82ee..addd5c12 100644 --- a/tools/pharos-dashboard/templates/dashboard/table.html +++ b/tools/pharos-dashboard/templates/dashboard/table.html @@ -1,4 +1,4 @@ -{% extends "dashboard/base.html" %} +{% extends "base.html" %} {% load staticfiles %} {% block extrahead %} |