Split the dashboard into different apps, add tests

JIRA: RELENG-12

Signed-off-by: maxbr <maxbr@mi.fu-berlin.de>

6 files changed, 159 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..d3e5ff62
--- /dev/null
+++ b/tools/pharos-dashboard/templates/dashboard/ci_pods.html
@@ -0,0 +1,58 @@
+{% extends "dashboard/table.html" %}
+{% load staticfiles %}
+
+{% 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.slaveurl }}>{{ pod.slavename }}</a>
+            </th>
+            <th style="background-color:{{ pod.status_color }}">
+                {{ pod.status }}
+            </th>
+            <th {{ pod.last_job.blink }}>
+                {{ pod.last_job.installer }}
+            </th>
+            <th {{ pod.last_job.blink }}>
+                {{ pod.last_job.scenario }}
+            </th>
+            <th {{ pod.last_job.blink }}>
+                {{ pod.last_job.branch }}
+            </th>
+            <th><a {{ pod.last_job.blink }} style="color:{{ pod.last_job.color }}"
+                                            target='_blank'
+                                            href={{ pod.last_job.url }}>{{ pod.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..f08e1d1f
--- /dev/null
+++ b/tools/pharos-dashboard/templates/dashboard/dev_pods.html
@@ -0,0 +1,58 @@
+{% extends "dashboard/table.html" %}
+{% load staticfiles %}
+
+{% 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 resource in dev_pods %}
+        <tr>
+            <th>
+                <a target='_blank' href={{ resource.url }}>{{ resource.name }}</a>
+            </th>
+            <th>
+                <a target='_blank' href={{ resource.slaveurl }}>{{ resource.slavename }}</a>
+            </th>
+            <th>
+                {{ resource.current_booking.user.username }}
+            </th>
+            <th>
+                {{ resource.current_booking.end }}
+            </th>
+            <th>
+                {{ resource.current_booking.purpose }}
+            </th>
+            <th style="background-color:{{ resource.status_color }}">
+                {{ resource.status }}
+            </th>
+            <th>
+                <a href="{% url 'booking:create' resource_id=resource.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..2d011b46
--- /dev/null
+++ b/tools/pharos-dashboard/templates/dashboard/jenkins_slaves.html
@@ -0,0 +1,42 @@
+{% extends "dashboard/table.html" %}
+{% load staticfiles %}
+
+{% 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.slaveurl }}>{{ slave.displayName }}</a>
+            </th>
+            <th style="background-color:{{ slave.status_color }}">
+                {{ slave.status }}
+            </th>
+            <th><a {{ slave.last_job.blink }} style="color:{{ slave.last_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/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 %}