Update status bar dinamically

when changing status of an execution. Fixes kiwitcms#1326

Rework the logic entirelly
- leverage the API for fetching data, instead of parsing HTML
- redraw all elements when user updates the status of an execution

tcms/static/js/testrun_actions.js

@@ -222,7 +222,7 @@ Nitrate.TestRuns.Details.on_load = function() {
   jQ('.js-caserun-total').bind('click', function() {
     showCaseRunsWithSelectedStatus(jQ('#id_filter')[0], '');
   });
-  jQ('.js-status-subtotal').bind('click', function() {
+  jQ('.status-link-button').bind('click', function() {
     showCaseRunsWithSelectedStatus(jQ('#id_filter')[0], jQ(this).data('param'));
   });
 };
@@ -305,6 +305,7 @@ function updateExecutionStatus(updateForm, executionId, caseId, executionStatusP
     const submitButtons = updateForm.find('.submit_button')
 
     bindSubmitButtons(updateForm, data.status_id, submitButtons, executionId, caseId)
+    drawPercentBar()
   });
 };
 
@@ -652,7 +653,10 @@ function showCommentForm() {
 
 jQ(document).ready(function(){
 
-  jsonRPC('TestExecutionStatus.filter', {}, data => executionStatuses = data)
+  jsonRPC('TestExecutionStatus.filter', {}, data => {
+    executionStatuses = data
+    drawPercentBar()
+  })
 
   jQ('.btnBlueCaserun').mouseover(function() {
     jQ(this).find('ul').show();
@@ -683,6 +687,62 @@ jQ(document).ready(function(){
   });
 });
 
+function drawPercentBar() {
+
+  // TODO: better way to do this
+  const testRunId = window.location.pathname.split('/')[2]
+
+  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++
+    })
+
+    const completeCount = positiveCount + negativeCount;
+    const completePercent = completeCount / allCount * 100;
+    const failurePercent = negativeCount / completeCount * 100;
+    $(".progress-bar > .percent > .complete-percent").text(`${completePercent}%`)
+    $(".progress-bar > .progress-inner").css("width", `${completePercent}%`)
+    $(".progress-bar > .progress-inner > .progress-failed").css("width", `${failurePercent}%`)
+    $(".js-caserun-total").text(allCount)
+
+    $(".count-per-status-list").remove()
+    $(".count-per-status-container").prepend('<span class="count-per-status-list"></span>')
+    renderCountPerStatusList(statusCount)
+  })
+}
+
+function renderCountPerStatusList(statusCount) {
+  for (var status in statusCount) {
+    const count = statusCount[status].count
+    let className = "";
+    if (count !== 0) {
+      className = "status-link-button link"
+    }
+
+    $(".count-per-status-list").append(`
+    <li>
+      <label>${status}</label>
+      [<span class="${className}" style="padding: 0" data-param=${statusCount[status].id}>${count}</span>]
+    </li>
+    `)
+  }
+}
+
 
 function bulkAddLinkToTestExecution() {
     var execution_ids = serializeCaseRunFromInputList(jQ('#id_table_cases')[0]);

tcms/static/style/base.css

@@ -128,6 +128,11 @@ hr.dotted{ border:dotted #ccc 0px;border-top-width:1px;}
 .commentdelete{float:right; display:block; background-position:0 -15px;padding-left:13px; margin:-20px 5px 0 0;cursor:pointer;}
 table.noborder,table.noborder td{border:none;background:transparent;}
 
+.link {
+    color: #004481 !important;
+    text-decoration: none;
+    cursor: pointer
+}
 
 /*****************************LAYOUT****************/
 #content{width:100%; z-index:1;}

tcms/templates/run/status_progress.html

@@ -1 +1,8 @@
-<div class='progress-bar' style='float:none'><div class='percent'><span id='complete_percent'>{{ status_stats.CompletedPercentage|floatformat:0 }}</span>%</div><div class='progress-inner' style='width:{{ status_stats.CompletedPercentage|floatformat:0 }}%;'><div class='progress-failed' style='width:{{ status_stats.FailurePercentage|floatformat:0 }}%;'></div></div></div>
+<div class='progress-bar'>
+	<div class='percent'>
+		<span class='complete-percent'></span>
+	</div>
+	<div class='progress-inner'>
+		<div class='progress-failed'></div>
+	</div>
+</div>

tcms/templates/run/status_statistics.html

@@ -2,32 +2,22 @@
 {% load static %}
 
 <div class="statu" style="float:left;" >
-    {% include "run/status_progress.html" %}
-	<ul>
-		{% for status_pk, total_info in status_stats.StatusSubtotal.items %}
-		<li>
-			<label>{{ total_info.1.name }}</label>
-			{% ifnotequal total_info.0 0 %}
-			<span id='{{ total_info.1.name }}'>[<a href="javascript:void(0)" class="js-status-subtotal" data-param="{{ total_info.1.pk }}">{{ total_info.0 }}</a>]</span>
-			{% else %}
-			<span id='{{ total_info.1.name }}'>[<a>{{ total_info.0 }}</a>]</span>
-			{% endifnotequal %}
-		</li>
-		{% endfor %}
+	{% include "run/status_progress.html" %}
+	<ul class="count-per-status-container">
 		<li>
-                    <label>{% trans "TOTAL" %}</label>
-			<span id="TOTAL">[</span><a href="javascript:void(0)" class="js-caserun-total">{{ status_stats.CaseRunsTotalCount }}</a><span>]</span>
+			<label>{% trans "TOTAL" %}</label>
+			[<span style="padding: 0;" class="js-caserun-total link"></span>]
 		</li>
 	</ul>
 	<div class="clear"></div>
 	<ul>
-            <li style="background:url({% static 'images/btn_bg_report.png' %}) no-repeat; height:25px; line-height:25px; width:57px; padding-left:30px; margin-right:15px;"><a href="{% url "run-report" test_run.run_id %}" title="report of test caserun">{% trans "Report" %}</a></li>
+		<li style="background:url({% static 'images/btn_bg_report.png' %}) no-repeat; height:25px; line-height:25px; width:57px; padding-left:30px; margin-right:15px;"><a href="{% url "run-report" test_run.run_id %}" title="report of test caserun">{% trans "Report" %}</a></li>
 		<li style="background:url({% static 'images/btn_bg_showbug.png' %}) no-repeat; height:25px; line-height:25px; width:133px; padding-left:30px;">
 		{% ifnotequal execution_bugs_count 0 %}
-                <span id="total_run_bug_count"><a href="{% url "run-report" test_run.run_id %}#buglist" title="Show All Bugs">{% trans "Bugs" %} [{{ execution_bugs_count }}]</a></span>
+			<span id="total_run_bug_count"><a href="{% url "run-report" test_run.run_id %}#buglist" title="Show All Bugs">{% trans "Bugs" %} [{{ execution_bugs_count }}]</a></span>
 		{% else %}
-                <span id="total_run_bug_count"><a>{% trans "No Bugs" %}</a></span>
-			{% endifnotequal %}
+			<span id="total_run_bug_count"><a>{% trans "No Bugs" %}</a></span>
+		{% endifnotequal %}
 		</li>
 	</ul>
 </div>