Implement front-end for Testing Test Case Health Telemetry

tcms/settings/common.py

@@ -107,6 +107,7 @@
             (_('Breakdown'), reverse_lazy('testing-breakdown')),
             (_('Status matrix'), reverse_lazy('testing-status-matrix')),
             (_('Execution trends'), reverse_lazy('testing-execution-trends')),
+            (_('TestCase health'), reverse_lazy('test-case-health')),
         ]),
         ('More coming soon',
          'http://kiwitcms.org/blog/kiwi-tcms-team/2019/03/03/legacy-reports-become-telemetry/'),

tcms/telemetry/static/telemetry/js/testing/test-case-health.js

@@ -0,0 +1,94 @@
+$(document).ready(() => {
+    loadInitialProduct();
+    loadInitialTestPlans();
+
+    document.getElementById('id_product').onchange = () => {
+        update_version_select_from_product();
+        update_build_select_from_product(true);
+        updateTestPlanSelectFromProduct(drawPage);
+    };
+
+    document.getElementById('id_version').onchange = drawPage;
+    document.getElementById('id_build').onchange = drawPage;
+    document.getElementById('id_test_plan').onchange = drawPage;
+
+    $('#id_after').on('dp.change', drawPage);
+    $('#id_before').on('dp.change', drawPage);
+
+    drawPage();
+})
+
+function drawPage() {
+    const query = {};
+
+    const productId = $('#id_product').val();
+    if (productId) {
+        query['case__plan__product'] = productId;
+    }
+
+    const versionId = $('#id_version').val();
+    if (versionId) {
+        query['case__plan__product_version'] = versionId;
+    }
+
+    const buildId = $('#id_build').val();
+    if (buildId) {
+        query['build_id'] = buildId;
+    }
+
+    const testPlanId = $('#id_test_plan').val();
+    if (testPlanId) {
+        query['case__plan__plan_id'] = testPlanId;
+    }
+
+    const dateBefore = $('#id_before');
+    if (dateBefore.val()) {
+        query['close_date__lte'] = dateBefore.data('DateTimePicker').date().format('YYYY-MM-DD 23:59:59');
+    }
+
+    const dateAfter = $('#id_after');
+    if (dateAfter.val()) {
+        query['close_date__gte'] = dateAfter.data('DateTimePicker').date().format('YYYY-MM-DD 00:00:00');
+    }
+
+    jsonRPC("Testing.test_case_health", query, data => {
+        drawTable('#test-case-health-table', data);
+    })
+}
+
+function drawTable(selector, data) {
+    $(`${selector} > tbody`).remove()
+
+    $(selector).DataTable({
+        data: data,
+        columns: [
+            {
+                data: null,
+                render: renderTestCaseColumn
+            },
+            {
+                data: null,
+                render: renderFailedExecutionsColumn
+            },
+            {
+                data: null,
+                render: renderPercentColumn
+            },
+        ],
+        paging: false,
+        ordering: false,
+        dom: "t"
+    });
+}
+
+function renderTestCaseColumn(data) {
+    return `<a href="/case/${data.case_id}">TC-${data.case_id}</a>: ${data.case_summary}`;
+}
+
+function renderFailedExecutionsColumn(data) {
+    return `${data.count.fail} of ${data.count.all}`;
+}
+
+function renderPercentColumn(data) {
+    return Number.parseFloat(data.count.fail / data.count.all * 100).toFixed(1);
+}

tcms/telemetry/templates/telemetry/testing/test-case-health.html

@@ -0,0 +1,100 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load static %}
+
+{% block title %}{% trans "TestCase Health" %}{% endblock %}
+
+{% block contents %}
+    <div class="container-fluid container-cards-pf">
+
+        <form class="form-horizontal">
+            <div class="form-group">
+                <label for="id_product" class="col-md-1 col-lg-1">
+                    {% trans "Product" %}
+                </label>
+                <div class="col-md-3">
+                    <select name="product" id="id_product" class="form-control selectpicker">
+                        <option value="">----------</option>
+                    </select>
+                </div>
+
+                <label for="id_version" class="col-md-1 col-lg-1">
+                    {% trans "Version" %}
+                </label>
+                <div class="col-md-3">
+                    <select name="version" id="id_version" class="form-control selectpicker">
+                        <option value="">----------</option>
+                    </select>
+                </div>
+
+                <label for="id_build" class="col-md-1 col-lg-1">
+                    {% trans "Build" %}
+                </label>
+                <div class="col-md-3">
+                    <select name="build" id="id_build" class="form-control selectpicker">
+                        <option value="">----------</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="id_test_plan" class="col-md-1 col-lg-1">
+                    {% trans "Test Plan" %}
+                </label>
+                <div class="col-md-3">
+                    <select name="test_plan" id="id_test_plan" class="form-control selectpicker">
+                        <option value="">----------</option>
+                    </select>
+                </div>
+
+                <label class="col-md-1 col-lg-1" for="id_after">{% trans "After" %}</label>
+                <div class="col-md-3 col-lg-3">
+                    <div class="input-group date-time-picker-pf">
+                        <input type="text" class="form-control" id="id_after">
+                        <span class="input-group-addon">
+                            <span class="fa fa-calendar"></span>
+                        </span>
+                    </div>
+
+                    {% include "datetimepicker_script.html" with selector="#id_after" %}
+                </div>
+
+                <label class="col-md-1 col-lg-1" for="id_before">{% trans "Before" %}</label>
+                <div class="col-md-3 col-lg-3">
+                    <div class="input-group date-time-picker-pf">
+                        <input type="text" class="form-control" id="id_before">
+                        <span class="input-group-addon">
+                            <span class="fa fa-calendar"></span>
+                        </span>
+                    </div>
+
+                    {% include "datetimepicker_script.html" with selector="#id_before" %}
+                </div>
+            </div>
+        </form>
+
+        <table class="table table-bordered table-with-horizontal-scroll cell-border" id="test-case-health-table">
+            <thead>
+                <tr>
+                    <th class="header" colspan=3> {% trans "Most frequently failing test cases" %} </th>
+                </tr>
+                <tr>
+                    <th class="header"> {% trans "Test Case" %}</th>
+                    <th class="header"> {% trans "Failed executions" %}</th>
+                    <th class="header"> {% trans "% of failed executions" %}</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+
+    <script src="{% static 'moment/min/moment-with-locales.min.js' %}"></script>
+    <script src="{% static 'eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js' %}"></script>
+    <script src="{% static 'bootstrap-select/dist/js/bootstrap-select.min.js' %}"></script>
+    <script src="{% static 'bootstrap-switch/dist/js/bootstrap-switch.min.js' %}"></script>
+
+    <script src="{% static 'js/utils.js' %}"></script>
+    <script src="{% static 'js/jsonrpc.js' %}"></script>
+
+    <script src="{% static 'telemetry/js/testing/utils.js' %}"></script>
+    <script src="{% static 'telemetry/js/testing/test-case-health.js' %}"></script>
+{% endblock %}

tcms/telemetry/urls.py

@@ -8,4 +8,6 @@
         name='testing-status-matrix'),
     url(r'^testing/execution-trends/$', views.TestingExecutionTrendsView.as_view(),
         name='testing-execution-trends'),
+    url(r'^testing/test-case-health/$', views.TestingTestCaseHealth.as_view(),
+        name='test-case-health'),
 ]

tcms/telemetry/views.py

@@ -16,3 +16,8 @@ class TestingStatusMatrixView(TemplateView):
 class TestingExecutionTrendsView(TemplateView):
 
     template_name = 'telemetry/testing/execution-trends.html'
+
+
+class TestingTestCaseHealth(TemplateView):
+
+    template_name = 'telemetry/testing/test-case-health.html'