Author: Andy Green <andy@warmcat.com>
Date: Sat Aug 23 09:34:16 2025 +0100

taskbar

Co-developed-by: Gemini 2.5 Pro

diff --git a/assets/sai.css b/assets/sai.css
index 286761f..871cc41 100644
--- a/assets/sai.css
+++ b/assets/sai.css
@@ -1,4 +1,3 @@
-
 @font-face {
   font-family: 'OpenSans';
   src: url('OpenSans-Light.ttf') format('truetype');
@@ -82,7 +81,7 @@ td.waiting {
 	padding:1px;
 	font-size: 9pt;
 	font-weight: bold;
-	border-radius:5px;
+	border-radius:5px
 }
 
 td.waiting_gi {
@@ -97,6 +96,7 @@ td.waiting_gi {
 
 table.comp {
 	border-radius:7px;
+	width: 100%
 }
 
 table.comp_pass {
@@ -603,6 +603,8 @@ td.tn {
 table.nomar {
 	padding: 0px;
 	margin: -3px;
+	width: 100%;
+	text-align:left;
 }
 
 td.nomar {
@@ -856,3 +858,64 @@ img.branch {
 .context-menu li:hover {
 	background-color: #f2f2f2;
 }
+
+.float-right {
+	float: right;
+}
+
+.progress-bar {
+    width: calc(100% - 10px);
+    background-color: #f1f1f1;
+    height: 10px;
+    border-radius: 5px;
+    margin-top: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
+    overflow: hidden;
+    border: 1px solid black;
+}
+
+.w-0 { width: 0%; }
+.w-5 { width: 5%; }
+.w-10 { width: 10%; }
+.w-15 { width: 15%; }
+.w-20 { width: 20%; }
+.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-35 { width: 35%; }
+.w-40 { width: 40%; }
+.w-45 { width: 45%; }
+.w-50 { width: 50%; }
+.w-55 { width: 55%; }
+.w-60 { width: 60%; }
+.w-65 { width: 65%; }
+.w-70 { width: 70%; }
+.w-75 { width: 75%; }
+.w-80 { width: 80%; }
+.w-85 { width: 85%; }
+.w-90 { width: 90%; }
+.w-95 { width: 95%; }
+.w-100 { width: 100%; }
+
+.progress-bar-success {
+    background-color: #4CAF50; /* green */
+    height: 10px;
+    float: left;
+}
+
+.progress-bar-pending {
+    background-color: #ffffff; /* white */
+    height: 10px;
+    float: left;
+}
+
+.progress-bar-ongoing {
+    background-color: #000000; /* black */
+    height: 10px;
+    float: left;
+}
+
+.progress-bar-failed {
+    background-color: #f44336; /* red */
+    height: 10px;
+}
diff --git a/assets/sai.js b/assets/sai.js
index 707caef..838c068 100644
--- a/assets/sai.js
+++ b/assets/sai.js
@@ -613,41 +613,118 @@ function sai_taskinfo_render(t, now_ut)
 	return s;
 }
 
+function update_summary_and_progress(event_uuid) {
+    var sumbs = document.getElementById("sumbs-" + event_uuid);
+    if (!sumbs)
+        return;
+
+    var summary = summarize_build_situation(event_uuid);
+    var summary_html = summary.text;
+
+    if (summary.total > 0) {
+        var good_pct = (summary.good / summary.total) * 100;
+        var pending_pct = (summary.pending / summary.total) * 100;
+        var ongoing_pct = (summary.ongoing / summary.total) * 100;
+        var bad_pct = (summary.bad / summary.total) * 100;
+
+        var roundUpTo5 = function(n) {
+            return Math.ceil(n / 5) * 5;
+        };
+
+        var good_w = roundUpTo5(good_pct);
+        var pending_w = roundUpTo5(pending_pct);
+        var ongoing_w = roundUpTo5(ongoing_pct);
+        var bad_w = roundUpTo5(bad_pct);
+
+        var total_w = good_w + pending_w + ongoing_w + bad_w;
+
+        if (total_w > 100) {
+            var surplus = total_w - 100;
+            var widths = {good: good_w, pending: pending_w, ongoing: ongoing_w, bad: bad_w};
+
+            var largest_key = Object.keys(widths).reduce(function(a, b){ return widths[a] > widths[b] ? a : b });
+
+            widths[largest_key] -= surplus;
+
+            good_w = widths.good;
+            pending_w = widths.pending;
+            ongoing_w = widths.ongoing;
+            bad_w = widths.bad;
+        }
+
+        var good_cls = "w-" + good_w;
+        var pending_cls = "w-" + pending_w;
+        var ongoing_cls = "w-" + ongoing_w;
+        var bad_cls = "w-" + bad_w;
+
+        summary_html += "<div class=\"progress-bar\">" +
+            "<div class=\"progress-bar-success " + good_cls + "\"></div>" +
+            "<div class=\"progress-bar-pending " + pending_cls + "\"></div>" +
+            "<div class=\"progress-bar-ongoing " + ongoing_cls + "\"></div>" +
+            "<div class=\"progress-bar-failed float-right " + bad_cls + "\"></div>" +
+            "</div>";
+    }
+    sumbs.innerHTML = summary_html;
+}
+
 function summarize_build_situation(event_uuid)
 {
-	var good = 0, bad = 0, total = 0,
+	var good = 0, bad = 0, total = 0, ongoing = 0, pending = 0,
 		roo = document.getElementById("taskcont-" + event_uuid),
 		same;
 		
 	if (!roo) 
-		return "";
+		return { text: "" };
 	
 	same = roo.querySelectorAll(".taskstate");
 	if (same)
 		total = same.length;
+	same = roo.querySelectorAll(".taskstate0");
+	if (same)
+		pending = same.length;
+	same = roo.querySelectorAll(".taskstate1");
+	if (same)
+		ongoing += same.length;
+	same = roo.querySelectorAll(".taskstate2");
+	if (same)
+		ongoing += same.length;
 	same = roo.querySelectorAll(".taskstate3");
 	if (same)
 		good = same.length;
 	same = roo.querySelectorAll(".taskstate4");
 	if (same)
-		bad = same.length;
-				
-	if (good == total)
-		return "All " + good + " passed";
-
-	if (bad == total)
-		return "All " + bad + " failed";
-		
-	if (!good && !bad)
-		return total + " pending";
-
-	if (!bad)
-		return good + " passed, " + (total - good) + " pending";
-
-	if (!good)
-		return bad + " failed, " + (total - bad) + " pending";
+		bad += same.length;
+	same = roo.querySelectorAll(".taskstate5");
+	if (same)
+		bad += same.length; // treat cancelled as bad
+	same = roo.querySelectorAll(".taskstate6");
+	if (same)
+		ongoing += same.length;
+
+	var text;
+	if (good == total && total > 0)
+		text = "All " + good + " passed";
+	else if (bad == total && total > 0)
+		text = "All " + bad + " failed";
+	else if (pending == total && total > 0)
+		text = total + " pending";
+	else {
+		var parts = [];
+		if (good) parts.push(good + " passed");
+		if (bad) parts.push(bad + " failed");
+		if (ongoing) parts.push(ongoing + " ongoing");
+		if (pending) parts.push(pending + " pending");
+		text = parts.join(", ");
+	}
 
-	return good + " passed, " + bad + " failed, " + (total - good - bad) + " pending";
+	return {
+		text: text,
+		good: good,
+		bad: bad,
+		ongoing: ongoing,
+		pending: pending,
+		total: total
+	};
 }
 
 function sai_event_summary_render(o, now_ut, reset_all_icon)
@@ -687,7 +764,7 @@ function sai_event_summary_render(o, now_ut, reset_all_icon)
 				"id=\"delete-ev-" + san(e.uuid) + "\">";
 	}
 	s += "</td>";
-	
+
 	if (!gitohashi_integ) {
 		s +=
 		"<td><table class=\"nomar\">" +
@@ -709,15 +786,14 @@ function sai_event_summary_render(o, now_ut, reset_all_icon)
 		        san(e.hash.substr(0, 8)) +
 		     "</td><td class=\"e6 nomar\">" +
 		     agify(now_ut, e.created) + "</td></tr>";
-		     	s += "<tr><td class=\"nomar e6\" colspan=\"2\" id=\"sumbs-" + e.uuid +"\">" + summarize_build_situation(e.uuid) + "</td><tr>";
 		 s += "</table>" +
 		     "</td>";
 	} else {
-		s +="<td><table><tr><td class=\"e6 nomar\">" + san(e.hash.substr(0, 8)) + " " + agify(now_ut, e.created);
-		     	s += "</td></tr><tr><td class=\"e6 nomar\" id=\"sumbs-" + e.uuid +"\">" + summarize_build_situation(e.uuid);
-		s += "</tr></table></td>"; 
+		s +="<td><table><tr><td class=\"e6 nomar\">" + san(e.hash.substr(0, 8)) + " " + agify(now_ut, e.created) +
+		     "</td></tr><tr><td class=\"nomar e6\" id=\"sumbs-" + e.uuid + "\"></td></tr>" +
+		     "</table></td>";
 	}
-	s += "</tr></table>";
+	s += "</tr><tr><td class=\"nomar e6\" colspan=\"2\" id=\"sumbs-" + e.uuid +"\"></td></tr></table>";
 	     
 	return s;
 }
@@ -732,18 +808,6 @@ function sai_event_render(o, now_ut, reset_all_icon)
 	s += "><div id=\"esr-" + san(e.uuid) + "\"></div></td>";
 
 	if (o.t.length) {
-		var all_good, has_bad, all_done;
-		
-		/*
-		 * SAIES_WAITING,
-		 * SAIES_PASSED_TO_BUILDER,
-		 * SAIES_BEING_BUILT,
-		 * SAIES_SUCCESS, done --> 
-		 * SAIES_FAIL,
-		 * SAIES_CANCELLED,
-		 * SAIES_BEING_BUILT_HAS_FAILURES
-		 */
-		
 		s += "<td class=\"tasks\" id=\"taskcont-" + san(e.uuid) + "\">";
 		if (gitohashi_integ)
 			s += "<div class=\"gi_popup\" id=\"gitohashi_sai_details\">";
@@ -755,82 +819,24 @@ function sai_event_render(o, now_ut, reset_all_icon)
 			
 			if (t.taskname !== ctn) {
 				if (ctn !== "") {
-					var st = 0;
-					/*
-					 * We defer issuing the task overview
-					 * until we know the class element to
-					 * use for the container
-					 */
-
-					s += "<div class=\"";
-					/*
-					if (wai)
-						s += " awaiting";
-					if (all_good === 1) {
-						s += " ov_good";
-						st = 3;
-					} else {
-						if (has_bad === 1) {
-							s += " ov_bad";
-							st = 4;
-						} else
-							if (all_done === 0)
-								s += " ov_dunno";
-					}
-					*/
-
-					s += " ib\"><table class=\"nomar\">" +
+					s += "<div class=\"ib\"><table class=\"nomar\">" +
 					     "<tr><td class=\"tn\">" + ctn +
 					     "</td><td class=\"keepline\">" + s1 +
 					     "</td></tr></table></div>";
 					s1 = "";
 				}
-				all_good = 1;
-				has_bad = 0;
-				all_done = 1;
 				ctn = t.taskname;
-				wai = 0;
 			}
 			
-			if (t.state < 3)
-				all_done = 0;
-			if (t.state !== 3)
-				all_good = 0;
-			if (t.state === 4 || t.state == 6)
-				has_bad = 1;
-
 			s1 += "<div id=\"taskstate_" + t.uuid + "\" class=\"taskstate taskstate" + t.state +
 				"\" data-event-uuid=\"" + san(e.uuid) + "\" data-platform=\"" + san(t.platform) + "\">";
-			if (t.state === 0)
-				wai = 1;
-
 			s1 += "<a href=\"/sai/index.html?task=" + t.uuid + "\">" +
 				sai_plat_icon(t.platform, 0) + "</a>";
-
 			s1 += "</div>";
 		}
 
 		if (ctn !== "") {
-			var st = 0;
-
-			s += "<div class=\"";
-			
-			/*
-			if (wai)
-				s += " awaiting";
-			if (all_good === 1) {
-				s += " ov_good";
-				st = 3;
-			} else {
-				if (has_bad === 1) {
-					s += " ov_bad";
-					st = 4;
-				} else
-					if (all_done === 0)
-						s += " ov_dunno";
-			}
-			*/
-			s += " ib\"><table class=\"nomar\">" +
+			s += "<div class=\"ib\"><table class=\"nomar\">" +
 				"<tr><td class=\"tn\">" + ctn +
 				"<td class=\"keepline\">" + s1 +
 				"</td></tr></table></div>";
@@ -865,6 +871,7 @@ function refresh_state(task_uuid, task_state)
 	var tsi = document.getElementById("taskstate_" + task_uuid);
 	
 	if (tsi) {
+		tsi.classList.remove("taskstate0");
 		tsi.classList.remove("taskstate1");
 		tsi.classList.remove("taskstate2");
 		tsi.classList.remove("taskstate3");
@@ -1315,9 +1322,7 @@ function ws_open_sai()
 					for (n = jso.overview[0].t.length - 1; n >= 0; n--)
 						refresh_state(jso.overview[0].t[n].uuid, jso.overview[0].t[n].state);
 					
-					var sumbs = document.getElementById("sumbs-" + jso.overview[0].e.uuid);
-					if (sumbs)
-						sumbs.innerHTML = summarize_build_situation(jso.overview[0].e.uuid);
+					update_summary_and_progress(jso.overview[0].e.uuid);
 						
 					aging();
 				} else
@@ -1337,12 +1342,8 @@ function ws_open_sai()
 						for (n = jso.overview.length - 1; n >= 0; n--) {
 							document.getElementById("esr-" + jso.overview[n].e.uuid).innerHTML =
 								sai_event_summary_render(jso.overview[n], now_ut, 1);
-						}
-						
-						if (jso.overview[0] && jso.overview[0].e) {
-							var sumbs = document.getElementById("sumbs-" + jso.overview[0].e.uuid);
-							if (sumbs)
-								sumbs.innerHTML = summarize_build_situation(jso.overview[0].e.uuid);
+
+							update_summary_and_progress(jso.overview[n].e.uuid);
 						}
 						aging();
 					}
@@ -1452,9 +1453,7 @@ function ws_open_sai()
 					console.log("found taskstate_" + jso.t.uuid);
 					refresh_state(jso.t.uuid, jso.t.state);
 					
-					var sumbs = document.getElementById("sumbs-" + jso.t.uuid.substring(0, 32));
-					if (sumbs)
-						sumbs.innerHTML = summarize_build_situation(jso.t.uuid.substring(0, 32));
+					update_summary_and_progress(jso.t.uuid.substring(0, 32));
 
 				} else
 				
@@ -1507,9 +1506,7 @@ function ws_open_sai()
 							document.getElementById("esr-" + jso.e.uuid).innerHTML =
 								sai_event_summary_render(jso, now_ut, 1);
 								
-						var sumbs = document.getElementById("sumbs-" + jso.e.uuid);
-						if (sumbs)
-							sumbs.innerHTML = summarize_build_situation(jso.e.uuid);
+						update_summary_and_progress(jso.e.uuid);
 					}
 	
 					if (document.getElementById("rebuild-" + san(jso.t.uuid))) {
@@ -1878,4 +1875,3 @@ window.addEventListener("load", function() {
 }, false);
 
 }());
-