feat: improve web-ui and add details

3 files changed, 36 insertions, 16 deletions

diff --git a/assets/index.css b/assets/index.css
index 9c170e4..dff7a03 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -32,10 +32,17 @@ tr {
 }
 td {
   padding: 5px;
+  vertical-align: top;
 }
 td:first-of-type + td {
   text-align: right;
 }
+td > details > summary {
+  text-align: right;
+}
+td > details {
+  text-align: left;
+}
 .ok {
   color: #228b22;
 }
diff --git a/assets/index.html b/assets/index.html
index b0a6c18..c03a7b7 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -19,7 +19,7 @@
           <td id="issues">No issues detected</td>
         </tr>
       </table>
-      <hr></hr>
+      <hr />
       <table id="services"></table>
     </main>
   </body>
diff --git a/assets/index.js b/assets/index.js
index 8813539..12bce67 100644
--- a/assets/index.js
+++ b/assets/index.js
@@ -1,7 +1,7 @@
 const serviceMap = new Map();
 
 async function getServices() {
-	const url = "api/v1/status";
+	const url = "api/v1/list";
 	try {
 		const response = await fetch(url);
 		if (!response.ok) {
@@ -9,6 +9,7 @@ async function getServices() {
 		}
 
 		const json = await response.json();
+		console.log(json);
 		return json;
 	} catch (error) {
 		console.error(error.message);
@@ -27,19 +28,32 @@ function updateStatus() {
 	}
 }
 
-function updateService(name, node, data) {
+function updateService(statusElm, name, data) {
 	switch (data.status) {
-		case "ok":
-			node.textContent = "Ok";
-			node.setAttribute("class", "ok");
+		case "ok": {
+			statusElm.innerHTML = "";
+			statusElm.textContent = "Ok";
+			statusElm.setAttribute("class", "ok");
 			serviceMap.set(name, true);
 			break;
-		case "error":
-			node.textContent = "Error";
-			node.title = data.output;
-			node.setAttribute("class", "error");
+		}
+		case "error": {
+			const summaryElm = document.createElement("summary");
+			summaryElm.textContent = "Error";
+
+			const expandElm = document.createElement("code");
+			expandElm.textContent = data.output;
+
+			const detailsElm = document.createElement("details");
+			detailsElm.appendChild(summaryElm);
+			detailsElm.appendChild(expandElm);
+
+			statusElm.innerHTML = "";
+			statusElm.appendChild(detailsElm);
+			statusElm.setAttribute("class", "error");
 			serviceMap.set(name, false);
 			break;
+		}
 	}
 
 	updateStatus();
@@ -51,17 +65,16 @@ getServices().then((services) => {
 		console.log(event.data);
 	};
 
-	for (const [service, status] of Object.entries(services)) {
+	for (const service of services) {
 		const table = document.getElementById("services");
 		const row = table.insertRow();
-		const nameNode = row.insertCell();
-		nameNode.textContent = service;
-		const node = row.insertCell();
-		updateService(service, node, status);
+		const nameElm = row.insertCell();
+		nameElm.textContent = service;
+		const statusElm = row.insertCell();
 
 		evtSource.addEventListener(service, (event) => {
 			data = JSON.parse(event.data);
-			updateService(service, node, data);
+			updateService(statusElm, service, data);
 			console.log(`service: ${service}, event: ${event}`);
 		});
 	}