Show latency if status 200

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>
 

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>
     );
   }

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";
 
@@ -13,11 +15,14 @@ export default async function handler(req, res) {
         });
     }
     
+    const startTime = performance.now();
     const [status] = await httpProxy(pingURL, {
       method: "HEAD"
     });
+    const endTime = performance.now();
 
     return res.status(200).json({
       status,
+      latency: endTime - startTime
     });
 }