dashboard: display collapsible info sections on the bug page

Instead of showing tons of extra information to the user, only show the
collapsed titles with counts and let user toggle the sections they need.

2 files changed, 43 insertions, 0 deletions

diff --git a/pkg/html/pages/common.js b/pkg/html/pages/common.js
index 95e6c8f61..80db71c8f 100644
--- a/pkg/html/pages/common.js
+++ b/pkg/html/pages/common.js
@@ -99,3 +99,17 @@ function addInputGroup(node) {
 	values.insertBefore(newGroup, lastGroup.nextSibling)
 	return false
 }
+
+document.addEventListener("DOMContentLoaded", function() {
+	document.addEventListener('click', function(event) {
+		const collapsible = event.target.closest('.collapsible')
+		if (!collapsible) {
+			return
+		}
+		const toggle = event.target.closest('.collapsible .head');
+		if (toggle) {
+			collapsible.classList.toggle("collapsible-hide");
+			collapsible.classList.toggle("collapsible-show");
+		}
+	})
+})
diff --git a/pkg/html/pages/style.css b/pkg/html/pages/style.css
index 09bcc90a0..5e19eebef 100644
--- a/pkg/html/pages/style.css
+++ b/pkg/html/pages/style.css
@@ -342,3 +342,32 @@ aside {
 	clear: both;
 	margin-bottom: 10px;
 }
+
+.collapsible {
+	border: 1px solid lightgrey;
+	margin-bottom: 15px;
+}
+
+.collapsible .content {
+	overflow-x: auto;
+}
+
+.collapsible .head {
+	max-width: 100%;
+	background-color: lightgrey;
+	padding: 5pt;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.collapsible-hide .content {
+	display: none;
+}
+
+.collapsible-hide .hide-icon {
+	display: none;
+}
+
+.collapsible-show .show-icon {
+	display: none;
+}