From 1618480319c3a720d17ce8bd3f9ad197cea44cf8 Mon Sep 17 00:00:00 2001
From: asankov <a.sankov96@gmail.com>
Date: Fri, 21 Feb 2020 17:49:45 +0200
Subject: [PATCH] Add status bar to Test Run page

---
 tcms/testruns/static/testruns/js/get.js   | 79 +++++++++++++++++++++++
 tcms/testruns/templates/testruns/get.html | 26 +++++++-
 2 files changed, 103 insertions(+), 2 deletions(-)

diff --git a/tcms/testruns/static/testruns/js/get.js b/tcms/testruns/static/testruns/js/get.js
index b4af3883b1..9ab16a8edb 100644
--- a/tcms/testruns/static/testruns/js/get.js
+++ b/tcms/testruns/static/testruns/js/get.js
@@ -1,3 +1,5 @@
+let executionStatuses;
+
 $(document).ready(() => {
 
     $('.bootstrap-switch').bootstrapSwitch();
@@ -8,4 +10,81 @@ $(document).ready(() => {
 
     // bind everything in tags table
     tagsCard('TestRun', testRunId, { run: testRunId }, permRemoveTag);
+    
+    jsonRPC('TestExecutionStatus.filter', {}, data => {
+        executionStatuses = data
+        drawPercentBar(testRunId)
+    })
 })
+
+function drawPercentBar(testRunId) {
+
+    jsonRPC('TestExecution.filter', { 'run_id': testRunId }, testExecutions => {
+
+        let positiveCount = 0;
+        let negativeCount = 0;
+        let allCount = testExecutions.length;
+        let statusCount = {}
+        executionStatuses.forEach(s => statusCount[s.name] = { count: 0, id: s.id })
+
+        testExecutions.forEach(testExecution => {
+            const executionStatus = executionStatuses.find(s => s.id === testExecution.status_id)
+
+            if (executionStatus.weight > 0) {
+                positiveCount++
+            } else if (executionStatus.weight < 0) {
+                negativeCount++
+            }
+
+            statusCount[executionStatus.name].count++
+        })
+
+        renderProgressBars(positiveCount, negativeCount, allCount)
+        renderCountPerStatusList(statusCount)
+    })
+}
+
+function renderProgressBars(positiveCount, negativeCount, allCount) {
+
+    const positivePercent = +(positiveCount / allCount * 100).toFixed(2)
+    const positiveBar = $(".progress > .progress-completed")
+    if (positivePercent) {
+        positiveBar.text(`${positivePercent}%`)
+    }
+    positiveBar.css('width', `${positivePercent}%`)
+    positiveBar.attr('aria-valuenow', `${positivePercent}`)
+
+    const negativePercent = +(negativeCount / allCount * 100).toFixed(2)
+    const negativeBar = $('.progress > .progress-failed')
+    if (negativePercent) {
+        negativeBar.text(`${negativePercent}%`)
+    }
+    negativeBar.css('width', `${negativePercent}%`)
+    negativeBar.attr('aria-valuenow', `${negativePercent}`)
+
+    const neutralPercent = +(100 - (negativePercent + positivePercent)).toFixed(2)
+    const neutralBar = $('.progress > .progress-bar-remaining')
+    if (neutralPercent) {
+        neutralBar.text(`${neutralPercent}%`)
+    }
+    neutralBar.css('width', `${neutralPercent}%`)
+    neutralBar.attr('aria-valuenow', `${neutralPercent}`)
+
+    $(".total-execution-count").text(allCount)
+}
+
+function renderCountPerStatusList(statusCount) {
+    $(".count-per-status-list").remove()
+    $(".count-per-status-container").prepend('<span class="count-per-status-list"></span>')
+
+    for (var status in statusCount) {
+        const count = statusCount[status].count
+        const element = count ? `<a href="?status_id=${statusCount[status].id}">${count}</a>` : '0'
+
+        $(".count-per-status-list").append(`
+      <li class="list-group-item" style="padding: 0;">
+        <label>${status}</label> - ${element}
+      </li>
+      `)
+    }
+}
diff --git a/tcms/testruns/templates/testruns/get.html b/tcms/testruns/templates/testruns/get.html
index 2e012f3821..66ef33cb79 100644
--- a/tcms/testruns/templates/testruns/get.html
+++ b/tcms/testruns/templates/testruns/get.html
@@ -19,8 +19,29 @@ <h1 class="col-md-12" style="margin-top: 0">
     </h1>
 </div>
 
-<div class="col-xs-12 col-sm-12 col-md-3">
-    <div class="card-pf card-pf-accented card-pf-aggregate-status">
+<div class="row row-cards-pf">
+
+    <div class="col-xs-6 col-sm-4 col-md-4">
+        <div class="card-pf card-pf-accented card-pf-aggregate-status">
+            <div class="card-pf-body">
+                <div class="progress">
+                    <div class="progress-bar progress-completed progress-bar-success progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="font-weight: bold;" data-toggle="tooltip"></div>
+                    <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="font-weight: bold; color: black;" data-toggle="tooltip"></div>
+                    <div class="progress-bar progress-failed progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="font-weight: bold;" data-toggle="tooltip"></div>
+                </div>
+                <div>
+                    <ul class="count-per-status-container list-group" style="columns: 2; margin: 0;">
+                    </ul>
+                    <li class="list-group-item" style="text-align: center; padding: 0;">
+                        <label>{% trans "TOTAL" %}</label>-<a href="#" class="total-execution-count"></a>
+                    </li>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-xs-12 col-sm-12 col-md-3">
+        <div class="card-pf card-pf-accented card-pf-aggregate-status">
 
         <h2 class="card-pf-title" style="text-align: left">
             <span class="fa fa pficon-topology"></span>{% trans 'Test plan' %}:
@@ -75,6 +96,7 @@ <h2 class="card-pf-title" style="text-align: left">
             {% endif %}
         </h2>
 
+
         <div class="card-pf-body"></div>
     </div>
 </div>