feat: implement naive client ping

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx

@@ -3,7 +3,7 @@ import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
 import { openLink } from '../../../../common/utils/linkUtils';
-import { serverPort } from '../../../../externals';
+import { isLocalhost, serverPort } from '../../../../externals';
 
 import style from './NetworkInterfaces.module.scss';
 
@@ -14,9 +14,11 @@ export default function InfoNif() {
 
   return (
     <div className={style.interfaces}>
-      {data?.networkInterfaces?.map((nif) => {
-        const address = `http://${nif.address}:${serverPort}`;
+      {data.networkInterfaces?.map((nif) => {
+        // interfaces outside localhost wont have access
+        if (nif.name === 'localhost' && !isLocalhost) return null;
 
+        const address = `http://${nif.address}:${serverPort}`;
         return (
           <CopyTag
             key={nif.name}

apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx

@@ -1,4 +1,8 @@
+import { useEffect } from 'react';
+
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { usePing } from '../../../../common/hooks/useSocket';
+import { socketSendJson } from '../../../../common/utils/socket';
 import { isOntimeCloud } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +19,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
     <>
       <Panel.Header>Network</Panel.Header>
       <Panel.Section>
-        {isOntimeCloud && <Panel.SubHeader>Ontime cloud</Panel.SubHeader>}
+        {isOntimeCloud && <OntimeCloudStats />}
         <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
       </Panel.Section>
       <InfoNif />
@@ -28,3 +32,29 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
     </>
   );
 }
+
+function OntimeCloudStats() {
+  const { ping } = usePing();
+
+  /**
+   * Send immediate ping request, and keep sending on an interval
+   */
+  useEffect(() => {
+    socketSendJson('ping', new Date());
+
+    const doPing = setInterval(() => {
+      socketSendJson('ping', new Date());
+    }, 5000);
+
+    return () => {
+      clearInterval(doPing);
+    };
+  }, []);
+
+  return (
+    <Panel.SubHeader>
+      Ontime cloud
+      <Panel.Description>Current ping: {ping}ms</Panel.Description>
+    </Panel.SubHeader>
+  );
+}