From a1b03ea762b48397abc51de4df9fa0ea86db5fd9 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 12 Oct 2022 14:32:22 -0700
Subject: [PATCH] Add service ping

---
 src/components/services/item.jsx | 10 ++++++++-
 src/components/services/ping.jsx | 35 ++++++++++++++++++++++++++++++++
 src/pages/api/ping.js            | 22 ++++++++++++++++++++
 src/utils/proxy/http.js          |  2 +-
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/components/services/ping.jsx
 create mode 100644 src/pages/api/ping.js

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index ed0cef2d..25e94266 100644
--- a/src/components/services/item.jsx
+++ b/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>
diff --git a/src/components/services/ping.jsx b/src/components/services/ping.jsx
new file mode 100644
index 00000000..951a624d
--- /dev/null
+++ b/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>
+    );
+  }
+
+}
diff --git a/src/pages/api/ping.js b/src/pages/api/ping.js
new file mode 100644
index 00000000..548f1d9b
--- /dev/null
+++ b/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,
+    });
+}
diff --git a/src/utils/proxy/http.js b/src/utils/proxy/http.js
index 4eba83f3..8f180a7f 100644
--- a/src/utils/proxy/http.js
+++ b/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];
   }