Merge pull request #561 from JazzFisch/docker-health

Add container health details to status

src/components/services/status.jsx

@@ -13,9 +13,25 @@ export default function Status({ service }) {
   }
 
   if (data && data.status === "running") {
+    if (data.health === "starting") {
+      return (
+        <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.health}>
+          <div className="text-[8px] font-bold text-blue-500/80 uppercase">{data.health}</div>
+        </div>
+      );
+    }
+
+    if (data.health === "unhealthy") {
+      return (
+        <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.health}>
+          <div className="text-[8px] font-bold text-orange-400/50 dark:text-orange-400/80 uppercase">{data.health}</div>
+        </div>
+      );
+    }
+
     return (
-      <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.status}>
+      <div className="w-auto px-1.5 py-0.5 text-center bg-theme-500/10 dark:bg-theme-900/50 rounded-b-[3px] overflow-hidden" title={data.health ?? data.status}>
-        <div className="text-[8px] font-bold text-emerald-500/80 uppercase">{data.status}</div>
+        <div className="text-[8px] font-bold text-emerald-500/80 uppercase">{data.health ?? data.status}</div>
       </div>
     );
   }

src/pages/api/docker/status/[...service].js

@@ -40,6 +40,7 @@ export default async function handler(req, res) {
 
     return res.status(200).json({
       status: info.State.Status,
+      health: info.State.Health?.Status
     });
   } catch {
     return res.status(500).send({