diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx index e8df91f07..493cc322c 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx +++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx @@ -19,10 +19,12 @@ export default function InfoNif() { // interfaces outside localhost wont have access if (nif.name === 'localhost' && !isLocalhost) return null; const address = linkToOtherHost(nif.address); + // we show the address as it would be typed in a browser, including the port + const label = new URL(address).host; return ( - handleClick(address)}> - {`${nif.name} - ${nif.address}`} + handleClick(address)}> + {`${nif.name} - ${label}`} ); })} diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx b/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx index 3b6e8092e..3f8cab908 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx +++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx @@ -5,16 +5,18 @@ import Tag from '../../../../common/components/tag/Tag'; import useScrollIntoView from '../../../../common/hooks/useScrollIntoView'; import { usePing } from '../../../../common/hooks/useSocket'; import { sendSocket } from '../../../../common/utils/socket'; -import { isDocker } from '../../../../externals'; +import { isDocker, isOntimeCloud } from '../../../../externals'; import type { PanelBaseProps } from '../../panel-list/PanelList'; import * as Panel from '../../panel-utils/PanelUtils'; import ClientControlPanel from './client-control/ClientControlPanel'; +import InfoNif from './NetworkInterfaces'; import LogExport from './NetworkLogExport'; /** ping values above this are flagged to the user (ms) */ const slowPingThreshold = 100; export default function NetworkLogPanel({ location }: PanelBaseProps) { + const interfacesRef = useScrollIntoView('interfaces', location); const clientsRef = useScrollIntoView('clients', location); const logRef = useScrollIntoView('log', location); @@ -22,6 +24,21 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) { <> Network {isDocker && } + {!isOntimeCloud && ( +
+ + + Network interfaces + + + Addresses which can be used to reach Ontime from other devices in the network.
+ Click an address to open it in a new window, or use the icon to copy it to the clipboard. +
+ +
+
+
+ )}
diff --git a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss index 4034cdea5..156f31dca 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss +++ b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss @@ -7,3 +7,12 @@ cursor: text; user-select: text; } + +.muted { + color: $label-gray; +} + +// align section notes with the table contents +.note { + padding: 0 2rem; +} diff --git a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx index ecec1ac30..36a7c0df5 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx +++ b/apps/client/src/features/app-settings/panel/network-panel/client-control/ClientList.tsx @@ -5,13 +5,42 @@ import { useState } from 'react'; import Button from '../../../../../common/components/buttons/Button'; import { RedirectClientModal } from '../../../../../common/components/client-modal/RedirectClientModal'; import { RenameClientModal } from '../../../../../common/components/client-modal/RenameClientModal'; +import CopyTag from '../../../../../common/components/copy-tag/CopyTag'; import Tag from '../../../../../common/components/tag/Tag'; +import Tooltip from '../../../../../common/components/tooltip/Tooltip'; import { setClientRemote } from '../../../../../common/hooks/useSocket'; import { useClientStore } from '../../../../../common/stores/clientStore'; +import { openLink } from '../../../../../common/utils/linkUtils'; import * as Panel from '../../../panel-utils/PanelUtils'; import style from './ClientControlPanel.module.scss'; +/** + * Shows the path a client is showing + * The full URL is available for copying or opening in a new window + */ +function ClientPath({ origin, path }: { origin: string; path: string }) { + // clients report their path on connection, we may not have it yet + if (!path) { + return unknown; + } + + // origin is empty for clients which have not reported their location + if (!origin) { + return {path}; + } + + const fullUrl = `${origin}${path}`; + + return ( + }> + openLink(fullUrl)}> + {path} + + + ); +} + export default function ClientList() { const id = useClientStore((store) => store.id); const clients = useClientStore((store) => store.clients); @@ -69,6 +98,12 @@ export default function ClientList() { )} Ontime Clients ({ontimeClients.length}) +
+ + Ontime views connected to this server. Identify shows a marker in the client screen until you turn it off, + redirect sends the client to a different view. + +
@@ -88,7 +123,9 @@ export default function ClientList() { {isCurrent && SELF} {name} - {path} + + +