Add Testing.individual_test_case_health API

This will be used to render individual test case health widget

Add UI

Author: asankov

tcms/settings/devel.py

@@ -14,9 +14,9 @@
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.sqlite3",
-        "NAME": str(TEMP_DIR / "kiwi.devel.sqlite"),  # noqa: F405
-        "USER": "root",
-        "PASSWORD": "",
+        "NAME": "kiwi.devel.sqlite",  # noqa: F405
+        "USER": "asankov",
+        "PASSWORD": "$@m0Levsk&",
         "HOST": "",
         "PORT": "",
     }

tcms/telemetry/api.py

@@ -226,6 +226,22 @@ def test_case_health(query=None):
     return data
 
 
+@http_basic_auth_login_required
+@rpc_method(name="Testing.individual_test_case_health")
+def individual_test_case_health_simple(query=None):
+
+    if query is None:
+        query = {}
+
+    res = (
+        TestExecution.objects.filter(**query)
+        .values("run__plan", "case_id", "status__name", "status__weight")
+        .order_by("case", "run__plan", "status__weight")
+    )
+
+    return list(res)
+
+
 def _remove_all_excellent_executions(data):
     for key in dict.fromkeys(data):
         if data[key]["count"]["fail"] == 0:

tcms/templates/include/tc_executions.html

@@ -23,10 +23,24 @@ <h2 class="card-pf-title">
                         </div>
 
                         <div class="list-view-pf-body">
-                            <div class="list-view-pf-description">
+                            <div class="list-view-pf-description" style="display: flex; justify-content: space-between;">
                                 <div class="list-group-item-text">
                                     <a href="{% url 'test_plan_url_short' execution.run.plan.pk %}">TP-{{ execution.run.plan.pk }}: {{ execution.run.plan.name }}</a>
                                 </div>
+                                <div class="list-group-item-text">
+                                    <div class="completion-rate-container">{% trans 'Completion rate' %}:' <span class="completion-rate"></span> 
+                                    <div class="progress">
+                                        <div class="progress-bar progress-bar-danger" role="progressbar"></div>
+                                        <div class="progress-bar progress-bar-success" role="progressbar"></div>
+                                    </div>
+                                </div>
+                                    <div class="failure-rate-container">{% trans 'Failure rate' %}:<span class="failure-rate"></span>
+                                    <div class="progress">
+                                        <div class="progress-bar progress-bar-danger" role="progressbar"></div>
+                                        <div class="progress-bar progress-bar-success" role="progressbar"></div>
+                                    </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div> <!-- /main info -->

tcms/testcases/static/testcases/js/get.js

@@ -5,9 +5,9 @@ function addComponent(object_id, _input, to_table) {
     var _name = _input.value;
 
     if (_name.length > 0) {
-        jsonRPC('TestCase.add_component', [object_id, _name], function(data) {
+        jsonRPC('TestCase.add_component', [object_id, _name], function (data) {
             if (data !== undefined) {
-                to_table.row.add({name: data.name, id: data.id}).draw();
+                to_table.row.add({ name: data.name, id: data.id }).draw();
                 $(_input).val('');
             } else {
                 $(_input).parents('div.input-group').addClass('has-error');
@@ -21,7 +21,7 @@ function addTestPlanToTestCase(case_id, plans_table) {
     const plan_name = $('#input-add-plan')[0].value;
     const plan = plan_cache[plan_name];
 
-    jsonRPC('TestPlan.add_case', [plan.id, case_id], function(data) {
+    jsonRPC('TestPlan.add_case', [plan.id, case_id], function (data) {
         plans_table.row.add({
             id: plan.id,
             name: plan.name,
@@ -36,12 +36,12 @@ function addTestPlanToTestCase(case_id, plans_table) {
 
 function initAddPlan(case_id, plans_table) {
     // + button
-    $('#btn-add-plan').click(function() {
+    $('#btn-add-plan').click(function () {
         addTestPlanToTestCase(case_id, plans_table);
     });
 
     // Enter key
-    $('#input-add-plan').keyup(function(event) {
+    $('#input-add-plan').keyup(function (event) {
         if (event.keyCode === 13) {
             addTestPlanToTestCase(case_id, plans_table);
         };
@@ -51,43 +51,43 @@ function initAddPlan(case_id, plans_table) {
     $('#input-add-plan.typeahead').typeahead({
         minLength: 1,
         highlight: true
-        }, {
+    }, {
         name: 'plans-autocomplete',
         // will display up to X results even if more were returned
         limit: 100,
         async: true,
-        display: function(element) {
+        display: function (element) {
             const display_name = 'TP-' + element.id + ': ' + element.name;
             plan_cache[display_name] = element;
             return display_name;
         },
-        source: function(query, processSync, processAsync) {
+        source: function (query, processSync, processAsync) {
             // accepts "TP-1234" or "tp-1234" or "1234"
             query = query.toLowerCase().replace('tp-', '');
             if (query === '') {
                 return;
             }
 
-            var rpc_query = {pk: query};
+            var rpc_query = { pk: query };
 
             // or arbitrary string
             if (isNaN(query)) {
-                if (query.length >=3) {
-                    rpc_query = {name__icontains: query};
+                if (query.length >= 3) {
+                    rpc_query = { name__icontains: query };
                 } else {
                     return;
                 }
             }
 
-            jsonRPC('TestPlan.filter', rpc_query, function(data) {
+            jsonRPC('TestPlan.filter', rpc_query, function (data) {
                 return processAsync(data);
             });
         }
     });
 }
 
 
-$(document).ready(function() {
+$(document).ready(function () {
     var case_id = $('#test_case_pk').data('pk');
     var product_id = $('#product_pk').data('pk');
     var perm_remove_tag = $('#test_case_pk').data('perm-remove-tag') === 'True';
@@ -96,12 +96,12 @@ $(document).ready(function() {
     var perm_remove_bug = $('#test_case_pk').data('perm-remove-bug') === 'True';
 
     // bind everything in tags table
-    tagsCard('TestCase', case_id, {case: case_id}, perm_remove_tag);
+    tagsCard('TestCase', case_id, { case: case_id }, perm_remove_tag);
 
     // components table
     var components_table = $('#components').DataTable({
-        ajax: function(data, callback, settings) {
-            dataTableJsonRPC('Component.filter', [{'cases': case_id}], callback);
+        ajax: function (data, callback, settings) {
+            dataTableJsonRPC('Component.filter', [{ 'cases': case_id }], callback);
         },
         columns: [
             { data: "name" },
@@ -110,7 +110,7 @@ $(document).ready(function() {
                 sortable: false,
                 render: function (data, type, full, meta) {
                     if (perm_remove_component) {
-                        return '<a href="#components" class="remove-component" data-pk="' + data  + '"><span class="pficon-error-circle-o"></span></a>';
+                        return '<a href="#components" class="remove-component" data-pk="' + data + '"><span class="pficon-error-circle-o"></span></a>';
                     }
                     return '';
                 }
@@ -122,26 +122,26 @@ $(document).ready(function() {
             processing: '<div class="spinner spinner-lg"></div>',
             zeroRecords: "No records found"
         },
-        order: [[ 0, 'asc' ]],
+        order: [[0, 'asc']],
     });
 
     // remove component button
-    components_table.on('draw', function() {
-        $('.remove-component').click(function() {
+    components_table.on('draw', function () {
+        $('.remove-component').click(function () {
             var tr = $(this).parents('tr');
 
-            jsonRPC('TestCase.remove_component', [case_id, $(this).data('pk')], function(data) {
+            jsonRPC('TestCase.remove_component', [case_id, $(this).data('pk')], function (data) {
                 components_table.row($(tr)).remove().draw();
             });
         });
     });
 
     // add component button and Enter key
-    $('#add-component').click(function() {
+    $('#add-component').click(function () {
         addComponent(case_id, $('#id_components')[0], components_table);
     });
 
-    $('#id_components').keyup(function(event) {
+    $('#id_components').keyup(function (event) {
         if (event.keyCode === 13) {
             addComponent(case_id, $('#id_components')[0], components_table);
         };
@@ -151,16 +151,16 @@ $(document).ready(function() {
     $('#id_components.typeahead').typeahead({
         minLength: 3,
         highlight: true
-        }, {
+    }, {
         name: 'components-autocomplete',
         // will display up to X results even if more were returned
         limit: 100,
         async: true,
-        display: function(element) {
+        display: function (element) {
             return element.name;
         },
-        source: function(query, processSync, processAsync) {
-            jsonRPC('Component.filter', {name__icontains: query, product: product_id}, function(data) {
+        source: function (query, processSync, processAsync) {
+            jsonRPC('Component.filter', { name__icontains: query, product: product_id }, function (data) {
                 data = arrayToDict(data)
                 return processAsync(Object.values(data));
             });
@@ -169,15 +169,15 @@ $(document).ready(function() {
 
     // testplans table
     var plans_table = $('#plans').DataTable({
-        ajax: function(data, callback, settings) {
-            dataTableJsonRPC('TestPlan.filter', {cases: case_id}, callback);
+        ajax: function (data, callback, settings) {
+            dataTableJsonRPC('TestPlan.filter', { cases: case_id }, callback);
         },
         columns: [
             { data: "id" },
             {
                 data: null,
                 render: function (data, type, full, meta) {
-                    return '<a href="/plan/'+ data.id + '/">' + escapeHTML(data.name) + '</a>';
+                    return '<a href="/plan/' + data.id + '/">' + escapeHTML(data.name) + '</a>';
                 }
             },
             { data: "author__username" },
@@ -188,7 +188,7 @@ $(document).ready(function() {
                 sortable: false,
                 render: function (data, type, full, meta) {
                     if (perm_remove_plan) {
-                        return '<a href="#plans" class="remove-plan" data-pk="' + data.id  + '"><span class="pficon-error-circle-o"></span></a>';
+                        return '<a href="#plans" class="remove-plan" data-pk="' + data.id + '"><span class="pficon-error-circle-o"></span></a>';
                     }
                     return '';
                 }
@@ -200,20 +200,62 @@ $(document).ready(function() {
             processing: '<div class="spinner spinner-lg"></div>',
             zeroRecords: "No records found"
         },
-        order: [[ 0, 'asc' ]],
+        order: [[0, 'asc']],
     });
 
     // remove plan button
-    plans_table.on('draw', function() {
-        $('.remove-plan').click(function() {
+    plans_table.on('draw', function () {
+        $('.remove-plan').click(function () {
             var tr = $(this).parents('tr');
 
-            jsonRPC('TestPlan.remove_case', [$(this).data('pk'), case_id], function(data) {
+            jsonRPC('TestPlan.remove_case', [$(this).data('pk'), case_id], function (data) {
                 plans_table.row($(tr)).remove().draw();
             });
         });
     });
 
+    jsonRPC('Testing.individual_test_case_health', { case_id: case_id }, ress => {
+        console.log(ress)
+
+        let res = {};
+        let planId = 0;
+        ress.forEach(r => {
+            let positive = 0;
+            let negative = 0;
+            let allCount = 0;
+            if (r.status__weight > 0) {
+                positive++
+            } else if (r.status__weight < 0) {
+                negative++
+            }
+            allCount++
+
+            if (r.run__plan !== planId) {
+                planId = r.run__plan;
+                res[planId] = {
+                    "completion_rate": allCount > 0 ? ((positive + negative) / allCount) : 0,
+                    "failure_rate": allCount > 0 ? (negative / allCount) : 0,
+                }
+                positive = 0;
+                negative = 0;
+                allCount = 0;
+            }
+        })
+
+        console.log(res)
+
+        Object.entries(res).forEach(([runId, data]) => {
+            const executionRow = $(`#execution-for-plan-${runId}`)
+            executionRow.find('.completion-rate').html(data.completion_rate)
+            executionRow.find('.completion-rate-container .progress-bar-danger').css('width', `${(1 - data.completion_rate) * 100}%`)
+            executionRow.find('.completion-rate-container .progress-bar-success').css('width', `${(data.completion_rate) * 100}%`)
+
+            executionRow.find('.failure-rate').html(data.failure_rate)
+            executionRow.find('.failure-rate-container .progress-bar-danger').css('width', `${(data.failure_rate) * 100}%`)
+            executionRow.find('.failure-rate-container .progress-bar-success').css('width', `${(1 - data.failure_rate) * 100}%`)
+        })
+    })
+
     // bind add TP to TC widget
     initAddPlan(case_id, plans_table);