Add button to show status matrix columns in reverse. Closes #1682

kiwitcms · Jul 5, 2020 · 0fd76a0 · 0fd76a0
1 parent 3ead9d4
commit 0fd76a0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/tcms/telemetry/static/telemetry/js/testing/status-matrix.js b/tcms/telemetry/static/telemetry/js/testing/status-matrix.js
@@ -26,6 +26,7 @@ $(document).ready(() => {
     document.getElementById('id_version').onchange = drawTable;
     document.getElementById('id_build').onchange = drawTable;
     document.getElementById('id_test_plan').onchange = drawTable;
+    document.getElementById('id_order').onchange = drawTable;
 
     $('#id_after').on('dp.change', drawTable);
     $('#id_before').on('dp.change', drawTable);
@@ -35,6 +36,8 @@ $(document).ready(() => {
     $('#table').on('draw.dt', function(){
         setMaxHeight($(this));
     })
+
+    $('.bootstrap-switch').bootstrapSwitch();
 });
 
 $(window).on('resize', function(){
@@ -88,10 +91,15 @@ function drawTable() {
     }
 
     jsonRPC('Testing.status_matrix', query, data => {
-
         const table_columns = [initial_column];
+        const testRunIds = Object.keys(data.columns);
+
+        // reverse the TR-xy order to show newest ones first
+        if (! $('#id_order').is(':checked')) {
+            testRunIds.reverse();
+        }
 
-        Object.keys(data.columns).forEach(testRunId => {
+        testRunIds.forEach(testRunId => {
             const testRunSummary = data.columns[testRunId];
             $('.table > thead > tr').append(`
             <th class="header-test-run">

diff --git a/tcms/telemetry/templates/telemetry/testing/status-matrix.html b/tcms/telemetry/templates/telemetry/testing/status-matrix.html
@@ -8,6 +8,16 @@
     <div class="container-fluid container-cards-pf">
         {% include "telemetry/include/filters.html" %}
 
+        <form class="form-horizontal">
+            <div class="form-group">
+                <label class="col-md-1 col-lg-1" for="id_order">{% trans "Order" %}</label>
+                <div class="col-md-3 col-lg-3">
+                    <input class="bootstrap-switch" id="id_order" type="checkbox" checked
+                    data-on-text="{% trans 'Ascending' %}" data-off-text="{% trans 'Descending' %}">
+                </div>
+            </div>
+        </form>
+
         <table class="table table-bordered table-with-horizontal-scroll" id="table">
             <thead>
             <tr>
@@ -20,6 +30,8 @@
 
     <link rel="stylesheet" type="text/css" href="{% static 'telemetry/css/testing/status-matrix.css' %}"/>
 
+    <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>