diff --git a/apps/client/src/common/components/client-modal/RedirectClientModal.tsx b/apps/client/src/common/components/client-modal/RedirectClientModal.tsx index f577316ee..c30679490 100644 --- a/apps/client/src/common/components/client-modal/RedirectClientModal.tsx +++ b/apps/client/src/common/components/client-modal/RedirectClientModal.tsx @@ -13,6 +13,9 @@ import Select from '../select/Select'; import style from './RedirectClientModal.module.scss'; +/** the first navigator view, used as the initial value of the view select */ +const defaultView = `/${navigatorConstants[0].url}`; + interface RedirectClientModalProps { id: string; name: string; @@ -25,7 +28,7 @@ interface RedirectClientModalProps { export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) { const { data } = useUrlPresets(); const [path, setPath] = useState(currentPath); - const [selected, setSelected] = useState('/'); + const [selected, setSelected] = useState(defaultView); const { setRedirect } = setClientRemote; @@ -97,19 +100,18 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC setName(event.target.value)} /> + setName(event.target.value)} + onKeyDown={(event) => { + if (isKeyEnter(event) && canSubmit) { + handleRename(); + } + }} + /> } footerElements={ <> diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss index a1e036598..7d462ef73 100644 --- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss +++ b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss @@ -117,6 +117,10 @@ $inner-padding: 1rem; td[data-warn='true'] { background-color: $orange-1300; } + + tr[data-highlight='true'] { + background-color: $blue-1100; + } } .listGroup { 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 52c648b7f..3b6e8092e 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 @@ -1,6 +1,7 @@ import { MessageTag } from 'ontime-types'; import { useEffect } from 'react'; +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'; @@ -10,6 +11,9 @@ import * as Panel from '../../panel-utils/PanelUtils'; import ClientControlPanel from './client-control/ClientControlPanel'; import LogExport from './NetworkLogExport'; +/** ping values above this are flagged to the user (ms) */ +const slowPingThreshold = 100; + export default function NetworkLogPanel({ location }: PanelBaseProps) { const clientsRef = useScrollIntoView('clients', location); const logRef = useScrollIntoView('log', location); @@ -17,11 +21,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) { return ( <> Network - {isDocker && ( - - - - )} + {isDocker && }
@@ -51,9 +51,20 @@ function OntimeCloudStats() { }, []); return ( - - Ontime cloud - Current ping: {ping}ms - + + + Ontime cloud + + + + + slowPingThreshold ? 'warning' : 'default'}>{ping}ms + + + + ); } 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 b9a4cebf6..4034cdea5 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 @@ -1,11 +1,3 @@ -.fullWidth { - width: 100%; -} - -.halfWidth { - width: 50%; -} - .halfWidthNoWrap { width: 50%; white-space: nowrap; @@ -15,7 +7,3 @@ cursor: text; user-select: text; } - -.self { - background-color: $blue-1100; -} 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 70e7a5778..ecec1ac30 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 @@ -8,7 +8,6 @@ import { RenameClientModal } from '../../../../../common/components/client-modal import Tag from '../../../../../common/components/tag/Tag'; import { setClientRemote } from '../../../../../common/hooks/useSocket'; import { useClientStore } from '../../../../../common/stores/clientStore'; -import { cx } from '../../../../../common/utils/styleUtils'; import * as Panel from '../../../panel-utils/PanelUtils'; import style from './ClientControlPanel.module.scss'; @@ -32,8 +31,19 @@ export default function ClientList() { redirectHandler.open(); }; - const ontimeClients = Object.entries(clients).filter(([_, { type }]) => type === 'ontime'); - const otherClients = Object.entries(clients).filter(([_, { type }]) => type !== 'ontime'); + /** + * Clients are given by the server in connection order, which means rows move + * as clients come and go. We keep a stable order: self first, then by name + */ + const sortClients = (clientEntries: [string, Client][]) => + clientEntries.sort(([keyA, clientA], [keyB, clientB]) => { + if (keyA === id) return -1; + if (keyB === id) return 1; + return clientA.name.localeCompare(clientB.name); + }); + + const ontimeClients = sortClients(Object.entries(clients).filter(([_, { type }]) => type === 'ontime')); + const otherClients = sortClients(Object.entries(clients).filter(([_, { type }]) => type !== 'ontime')); const targetClient: Client | undefined = clients[targetId]; @@ -62,17 +72,18 @@ export default function ClientList() { - Client Name - Path - + Client Name + Path + + {ontimeClients.length === 0 && } {ontimeClients.map(([key, client]) => { const { identify, name, path } = client; const isCurrent = id === key; return ( - + {isCurrent && SELF} {name} @@ -81,7 +92,6 @@ export default function ClientList() {