From 8eca0011db1b23d3d464682452f7ed9ec385303d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 14 Oct 2022 14:25:59 -0700
Subject: [PATCH] Show latency if status 200

---
 src/components/services/item.jsx | 14 +++++++-------
 src/components/services/ping.jsx |  4 ++--
 src/pages/api/ping.js            |  7 ++++++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index a4b54ad3..1959df3a 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -104,6 +104,13 @@ export default function Item({ service }) {
           )}
 
           <div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2">
+              {service.ping && (
+                <div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
+                  <Ping service={service} />
+                  <span className="sr-only">Ping status</span>
+                </div>
+              )}
+
               {service.container && (
                 <button
                   type="button"
@@ -114,13 +121,6 @@ export default function Item({ service }) {
                   <span className="sr-only">View container stats</span>
                 </button>
               )}
-              
-              {service.ping && (
-                <div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
-                  <Ping service={service} />
-                  <span className="sr-only">Ping status</span>
-                </div>
-              )}
           </div>
         </div>
 
diff --git a/src/components/services/ping.jsx b/src/components/services/ping.jsx
index 18ad8696..e3056232 100644
--- a/src/components/services/ping.jsx
+++ b/src/components/services/ping.jsx
@@ -4,7 +4,7 @@ import useSWR from "swr";
 export default function Ping({ service }) {
   const { t } = useTranslation();
   const { data, error } = useSWR(`/api/ping?${new URLSearchParams({ping: service.ping}).toString()}`, {
-    refreshInterval: 5000
+    refreshInterval: 30000
   });
 
   if (error) {
@@ -36,7 +36,7 @@ export default function Ping({ service }) {
   if (data && data.status === 200) {
     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={statusText}>
-        <div className="text-[8px] font-bold text-emerald-500/80">{data.status}</div>
+        <div className="text-[8px] font-bold text-emerald-500/80">{t("common.ms", { value: data.latency, style: "unit", unit: "millisecond", unitDisplay: "narrow", maximumFractionDigits: 0 })}</div>
       </div>
     );
   }
diff --git a/src/pages/api/ping.js b/src/pages/api/ping.js
index 8c919f0a..79c7da0c 100644
--- a/src/pages/api/ping.js
+++ b/src/pages/api/ping.js
@@ -1,3 +1,5 @@
+import { performance } from "perf_hooks";
+
 import createLogger from "utils/logger";
 import { httpProxy } from "utils/proxy/http";
 
@@ -12,12 +14,15 @@ export default async function handler(req, res) {
         error: "No ping URL given",
         });
     }
-
+    
+    const startTime = performance.now();
     const [status] = await httpProxy(pingURL, {
       method: "HEAD"
     });
+    const endTime = performance.now();
 
     return res.status(200).json({
       status,
+      latency: endTime - startTime
     });
 }