Add service ping

src/components/services/item.jsx

@@ -4,6 +4,7 @@ import { useContext, useState } from "react";
 
 import Status from "./status";
 import Widget from "./widget";
+import Ping from "./ping";
 
 import Docker from "widgets/docker/component";
 import { SettingsContext } from "utils/contexts/settings";
@@ -102,11 +103,18 @@ export default function Item({ service }) {
             </div>
           )}
 
+          {service.ping && (
+            <div className="flex-shrink-0 flex items-center justify-center w-5 mr-4 cursor-pointer">
+              <Ping service={service} />
+              <span className="sr-only">Ping status</span>
+            </div>
+          )}
+
           {service.container && (
             <button
               type="button"
               onClick={() => (statsOpen ? closeStats() : setStatsOpen(true))}
-              className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
+              className="flex-shrink-0 flex items-center justify-center w-5 mr-4 cursor-pointer"
             >
               <Status service={service} />
               <span className="sr-only">View container stats</span>

src/components/services/ping.jsx

@@ -0,0 +1,35 @@
+import { BsArrowDownCircle, BsArrowUpCircle } from "react-icons/bs";
+import useSWR from "swr";
+
+export default function Ping({ service }) {
+  const { data, error } = useSWR(`/api/ping?${new URLSearchParams({ping: service.ping}).toString()}`, {
+    refreshInterval: 5000
+  });
+
+  if (error) {
+    return <div className="w-3 h-3 text-xs text-rose-300 dark:text-rose-500" title={data.status}>&darr;</div>;
+  }
+  
+  if (!data) {
+    return <div className="w-3 h-3 text-[10px] text-black/20 dark:text-white/40">PING</div>;
+  }
+
+  const statusText = `${service.ping}: HTTP status ${data.status}`;
+  
+  if (data && data.status !== 200) {
+    return (
+      <div className="w-3 h-3 text-xs text-rose-300 dark:text-rose-500" title={statusText}>
+        <BsArrowDownCircle />
+      </div>
+    );
+  }
+  
+  if (data && data.status === 200) {
+    return (
+      <div className="w-3 h-3 text-xs text-emerald-300 dark:text-emerald-500" title={statusText}>
+        <BsArrowUpCircle />
+      </div>
+    );
+  }
+
+}

src/pages/api/ping.js

@@ -0,0 +1,22 @@
+import { servicesFromConfig } from "utils/config/service-helpers";
+import createLogger from "utils/logger";
+import { httpProxy } from "utils/proxy/http";
+
+const logger = createLogger("ping");
+
+export default async function handler(req, res) {
+    const { ping: pingURL } = req.query;
+
+    if (!pingURL) {
+        logger.debug("No ping URL specified");
+        return res.status(400).send({
+        error: "No ping URL given",
+        });
+    }
+
+    const [status] = await httpProxy(pingURL);
+
+    return res.status(200).json({
+      status: status,
+    });
+}

src/utils/proxy/http.js

@@ -96,7 +96,7 @@ export async function httpProxy(url, params = {}) {
     return [status, contentType, data, responseHeaders];
   }
   catch (err) {
-    logger.error("Error calling %s//%s%s...", url.protocol, url.hostname, url.pathname);
+    logger.error("Error calling %s//%s%s...", constructedUrl.protocol, constructedUrl.hostname, constructedUrl.pathname);
     logger.error(err);
     return [500, "application/json", { error: "Unexpected error" }, null];
   }