Allow hiding jobs based on their status

Hiding finished jobs can save space when there are a lot of them.

Author: pabs3

dashboard/assets/scripts/dashboard.js

@@ -1041,6 +1041,10 @@ class Dashboard {
 		const contextMenu = args.contextMenu ? Boolean(Number(args.contextMenu)) : true;
 		this.initialFilter = args.initialFilter ?? "^$";
 		const showAllHeaders = args.showAllHeaders ? Boolean(Number(args.showAllHeaders)) : true;
+		const showRunningJobs = args.showRunningJobs ? Boolean(Number(args.showRunningJobs)) : true;
+		const showFinishedJobs = args.showFinishedJobs ? Boolean(Number(args.showFinishedJobs)) : true;
+		const showFatalJobs = args.showFatalJobs ? Boolean(Number(args.showFatalJobs)) : true;
+		const showAbortedJobs = args.showAbortedJobs ? Boolean(Number(args.showAbortedJobs)) : true;
 		const loadRecent = args.loadRecent ? Boolean(Number(args.loadRecent)) : true;
 		this.debug = args.debug ? Boolean(Number(args.debug)) : false;
 
@@ -1109,6 +1113,11 @@ class Dashboard {
 
 		this.showAllHeaders(showAllHeaders);
 
+		this.showRunningJobs(showRunningJobs);
+		this.showFinishedJobs(showFinishedJobs);
+		this.showFatalJobs(showFatalJobs);
+		this.showAbortedJobs(showAbortedJobs);
+
 		const finishSetup = () => {
 			byId("meta-info").innerHTML = "";
 
@@ -1235,6 +1244,14 @@ ${String(kbPerSec).padStart(3, "0")} KB/s`;
 			window.open(this.jobsRenderer.firstFilterMatch.url);
 		} else if (ev.which === 104 /* h */) {
 			ds.showAllHeaders(!byId("show-all-headers").checked);
+		} else if (ev.which === 114 /* r */) {
+			ds.showRunningJobs(!byId("show-running-jobs").checked);
+		} else if (ev.which === 100 /* d */) {
+			ds.showFinishedJobs(!byId("show-finished-jobs").checked);
+		} else if (ev.which === 99 /* c */) {
+			ds.showFatalJobs(!byId("show-fatal-jobs").checked);
+		} else if (ev.which === 115 /* s */) {
+			ds.showAbortedJobs(!byId("show-aborted-jobs").checked);
 		}
 	}
 
@@ -1294,6 +1311,26 @@ ${String(kbPerSec).padStart(3, "0")} KB/s`;
 		byId('show-all-headers').checked = value;
 		byId('hide-headers').sheet.disabled = value;
 	}
+
+	showRunningJobs(value) {
+		byId('show-running-jobs').checked = value;
+		byId('hide-running').sheet.disabled = value;
+	}
+
+	showFinishedJobs(value) {
+		byId('show-finished-jobs').checked = value;
+		byId('hide-done').sheet.disabled = value;
+	}
+
+	showFatalJobs(value) {
+		byId('show-fatal-jobs').checked = value;
+		byId('hide-fatal').sheet.disabled = value;
+	}
+
+	showAbortedJobs(value) {
+		byId('show-aborted-jobs').checked = value;
+		byId('hide-aborted').sheet.disabled = value;
+	}
 }
 
 const ds = new Dashboard();

dashboard/dashboard.html

@@ -57,6 +57,14 @@
 	font-size: 18px;
 }
 
+#jobs {
+	display: inline flex;
+}
+
+#show-jobs {
+       float: inline-start;
+}
+
 .padded-page {
 	padding: 20px 27px 20px 27px;
 }
@@ -397,6 +405,34 @@
 	content-visibility: hidden;
 }
 </style>
+<style id="hide-running">
+.log-container:not(
+	:has(.job-info-done),
+	:has(.job-info-fatal),
+	:has(.job-info-aborted)
+) {
+	display: none;
+	content-visibility: hidden;
+}
+</style>
+<style id="hide-done">
+.log-container:has(.job-info-done) {
+	display: none;
+	content-visibility: hidden;
+}
+</style>
+<style id="hide-fatal">
+.log-container:has(.job-info-fatal) {
+	display: none;
+	content-visibility: hidden;
+}
+</style>
+<style id="hide-aborted">
+.log-container:has(.job-info-aborted) {
+	display: none;
+	content-visibility: hidden;
+}
+</style>
 <div id="context-menu"></div>
 <div class="padded-page">
 	<div class="header">
@@ -409,6 +445,19 @@
 			<input id="set-filter-none" onclick="ds.setFilter('^$');" type="button" value="None" class="button">
 			<input type="checkbox" id="show-all-headers" onclick="ds.showAllHeaders(this.checked);">
 			<label for="show-all-headers">All headers</label>
+			<details id="jobs">
+			<summary>Jobs</summary>
+			<div id="show-jobs">
+			<input type="checkbox" id="show-running-jobs" onclick="ds.showRunningJobs(this.checked);" accesskey="r">
+			<label for="show-running-jobs">Running</label><br>
+			<input type="checkbox" id="show-finished-jobs" onclick="ds.showFinishedJobs(this.checked);" accesskey="d">
+			<label class="job-info-done" for="show-finished-jobs">Finished</label><br>
+			<input type="checkbox" id="show-fatal-jobs" onclick="ds.showFatalJobs(this.checked);" accesskey="c">
+			<label class="job-info-fatal" for="show-fatal-jobs">Fatal</label><br>
+			<input type="checkbox" id="show-aborted-jobs" onclick="ds.showAbortedJobs(this.checked);" accesskey="s">
+			<label class="job-info-aborted" for="show-aborted-jobs">Aborted</label><br>
+			</div>
+			</details>
 		</div>
 		<div id="header-right">
 			<div id="meta-info"><span class="adbox">😊</span></div>
@@ -458,6 +507,10 @@
 				<li><kbd>i</kbd> - use the initial job log filter
 				<li><kbd>v</kbd> - open the job URL of the first-shown job log
 				<li><kbd>h</kbd> - show/hide headers for hidden job logs
+				<li><kbd>r</kbd> - show/hide header+log for running jobs
+				<li><kbd>d</kbd> - show/hide header+log for finished jobs
+				<li><kbd>c</kbd> - show/hide header+log for fatal jobs
+				<li><kbd>s</kbd> - show/hide header+log for aborted jobs
 				<li><kbd>?</kbd> - show/hide help text
 			</ul>
 			<p>
@@ -475,6 +528,12 @@
 			<ul>
 				<li>To specify an initial filter, add <kbd><span class="url-q-or-amp">?</span>initialFilter=TEXT</kbd> to the dashboard URL. The default is <kbd>^$</kbd>.</li>
 				<li>To initially hide headers for hidden job logs, add <kbd><span class="url-q-or-amp">?</span>showAllHeaders=0</kbd> to the dashboard URL. The default is to show them.</li>
+				<li>To initially hide different job types, add these to the dashboard URL. The default is to show them.
+					<kbd><span class="url-q-or-amp">?</span>showRunningJobs=0</kbd>
+					<kbd><span class="url-q-or-amp">?</span>showFinishedJobs=0</kbd>
+					<kbd><span class="url-q-or-amp">?</span>showFatalJobs=0</kbd>
+					<kbd><span class="url-q-or-amp">?</span>showAbortedJobs=0</kbd>
+				</li>
 				<li>To retain more lines in the log windows, add <kbd><span class="url-q-or-amp">?</span>historyLines=1000</kbd> to the dashboard URL. The default is <code>500</code>, or <code>250</code> on mobile.</li>
 				<li>To update the dashboard more frequently, add <kbd><span class="url-q-or-amp">?</span>batchTimeWhenVisible=33</kbd> to the dashboard URL. The default is <code>125</code> (8 Hz).</li>
 				<li>To skip loading of recent (buffered) log data for jobs, add <kbd><span class="url-q-or-amp">?</span>loadRecent=0</kbd> to the dashboard URL. Inactive jobs will not appear.</li>