From c7d470c051dabfc48ec8da91a8d9320946010608 Mon Sep 17 00:00:00 2001 From: Kim Brose Date: Thu, 5 Dec 2024 18:29:23 +0100 Subject: [PATCH 1/5] format devtools table Signed-off-by: Kim Brose --- .../CommunicationChannelStatisticsView.tsx | 4 ++-- .../DeveloperTools/PeerConnectionDetail.tsx | 4 ++-- .../components/DeveloperTools/StyledDevtoolsTable.tsx | 11 +++++++++-- .../components/DeveloperTools/WhiteboardSessions.tsx | 11 +++++++---- 4 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx b/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx index c30a47d8..46489bf8 100644 --- a/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx @@ -56,10 +56,10 @@ export function CommunicationChannelStatisticsView({ - + {communicationChannel.localSessionId} - + {Object.keys(communicationChannel.peerConnections).length} diff --git a/packages/react-sdk/src/components/DeveloperTools/PeerConnectionDetail.tsx b/packages/react-sdk/src/components/DeveloperTools/PeerConnectionDetail.tsx index c5974a13..26edebbe 100644 --- a/packages/react-sdk/src/components/DeveloperTools/PeerConnectionDetail.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/PeerConnectionDetail.tsx @@ -42,7 +42,7 @@ export function PeerConnectionDetail({ 'Remote Session Id', )} - + {peerConnection.remoteSessionId} @@ -53,7 +53,7 @@ export function PeerConnectionDetail({ 'User Id', )} - + {peerConnection.remoteUserId} diff --git a/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx b/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx index 685e2491..e1878f17 100644 --- a/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx @@ -22,13 +22,18 @@ const StyledTable = styled(Table)({ borderCollapse: 'collapse', }); -const StyledTableCell = styled(TableCell)(({ theme }) => ({ +interface StyledTableCellProps { + monospace?: boolean; +} + +const StyledTableCell = styled(TableCell)(({ monospace, theme }) => ({ fontSize: '0.875rem', padding: '8px 16px', borderBottom: `1px solid ${theme.palette.divider}`, '&:not(:last-child)': { borderRight: `1px solid ${theme.palette.divider}`, }, + ...(monospace ? {fontFamily: 'monospace'} : undefined) })); const HeaderCell = styled(StyledTableCell)(({ theme }) => ({ @@ -54,12 +59,14 @@ export function StyledDevtoolsTableCell({ children, colSpan, align, + monospace, }: PropsWithChildren<{ colSpan?: number; align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; + monospace?: boolean; }>) { return ( - + {children} ); diff --git a/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx b/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx index 80885568..d7dee282 100644 --- a/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx @@ -64,14 +64,17 @@ export function WhiteboardSessionsTable({ sessions .sort((a, b) => a.userId.localeCompare(b.userId)) .map((session) => ( - - + + {session.userId} - + {session.sessionId} - + + {session.status} + + {t( 'boardBar.developerToolsDialog.communicationChannelStatistics.whiteboardSessionsTable.expire', 'Session will expire in {{expire}}.', From a4168c3d71d5b692812358a8590736fa7eafb6a9 Mon Sep 17 00:00:00 2001 From: Kim Brose Date: Thu, 5 Dec 2024 18:43:55 +0100 Subject: [PATCH 2/5] show the current connection state per sessions event in the devtools Signed-off-by: Kim Brose --- .../CommunicationChannelStatisticsView.tsx | 2 +- .../DeveloperTools/DeveloperToolsDialog.tsx | 18 ++++++--- .../DocumentSyncStatisticsView.tsx | 2 +- .../DeveloperTools/PeerConnectionDetail.tsx | 4 +- .../DeveloperTools/WhiteboardSessions.tsx | 40 ++++++++++++++----- .../react-sdk/src/locales/de/neoboard.json | 11 ++--- .../react-sdk/src/locales/en/neoboard.json | 13 +++--- 7 files changed, 61 insertions(+), 29 deletions(-) diff --git a/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx b/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx index 46489bf8..1b543c28 100644 --- a/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/CommunicationChannelStatisticsView.tsx @@ -43,7 +43,7 @@ export function CommunicationChannelStatisticsView({ - s.sessionId !== communicationChannel.localSessionId && - s.expiresTs - Date.now() > 0, - )} + sessions={communicationChannel.sessions + ?.filter( + (s) => + s.sessionId !== communicationChannel.localSessionId && + s.expiresTs - Date.now() > 0, + ) + .map((s) => ({ + ...s, + status: Object.values( + communicationChannel.peerConnections, + ).find((p) => p.remoteSessionId === s.sessionId) + ?.connectionState, + }))} /> diff --git a/packages/react-sdk/src/components/DeveloperTools/DocumentSyncStatisticsView.tsx b/packages/react-sdk/src/components/DeveloperTools/DocumentSyncStatisticsView.tsx index ba10af80..7827002c 100644 --- a/packages/react-sdk/src/components/DeveloperTools/DocumentSyncStatisticsView.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/DocumentSyncStatisticsView.tsx @@ -42,7 +42,7 @@ export function DocumentSyncStatisticsView({ {t( 'boardBar.developerToolsDialog.communicationChannelStatistics.remoteSessionId', - 'Remote Session Id', + 'Remote Session ID', )} @@ -50,7 +50,7 @@ export function PeerConnectionDetail({ {t( 'boardBar.developerToolsDialog.communicationChannelStatistics.userId', - 'User Id', + 'User ID', )} diff --git a/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx b/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx index d7dee282..3618911d 100644 --- a/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx @@ -15,6 +15,7 @@ */ import { TableBody, TableHead, TableRow } from '@mui/material'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { SessionState } from '../../state/communication/discovery/sessionManagerImpl'; import { @@ -26,9 +27,18 @@ import { export function WhiteboardSessionsTable({ sessions, }: { - sessions: SessionState[] | undefined; + sessions: (SessionState & { status?: string })[] | undefined; }) { const { t } = useTranslation('neoboard'); + const [now, setNow] = useState(Date.now()); + useEffect(() => { + const intervalId = setInterval(() => { + setNow(Date.now()); + }, 1000); + return () => { + clearInterval(intervalId); + }; + }, []); return ( + @@ -77,8 +93,8 @@ export function WhiteboardSessionsTable({ {t( 'boardBar.developerToolsDialog.communicationChannelStatistics.whiteboardSessionsTable.expire', - 'Session will expire in {{expire}}.', - { expire: formatTime(session.expiresTs - Date.now()) }, + '{{minutes}}:{{seconds}}', + formatTime(Math.max(0, session.expiresTs - now)), )} @@ -98,9 +114,15 @@ export function WhiteboardSessionsTable({ ); } -function formatTime(milliseconds: number): string { - const minutes = Math.floor(milliseconds / 60000); - const seconds = Math.floor((milliseconds % 60000) / 1000); - - return `${minutes}m ${seconds}s`; +function formatTime(milliseconds: number): { + minutes: string; + seconds: string; +} { + const minutes = Math.floor(milliseconds / 60000) + .toString() + .padStart(2, '0'); + const seconds = Math.floor((milliseconds % 60000) / 1000) + .toString() + .padStart(2, '0'); + return { minutes, seconds }; } diff --git a/packages/react-sdk/src/locales/de/neoboard.json b/packages/react-sdk/src/locales/de/neoboard.json index a432c0b2..5da0a7dd 100644 --- a/packages/react-sdk/src/locales/de/neoboard.json +++ b/packages/react-sdk/src/locales/de/neoboard.json @@ -24,17 +24,18 @@ "true": "wahr", "userId": "Benutzer-ID", "whiteboardSessionsTable": { - "expire": "Die Sitzung läuft in {{expire}} ab.", - "expiresState": "Status", + "expire": "{{minutes}}:{{seconds}}", + "lifetime": "Läuft ab in", "noData": "Keine Whiteboard-Sitzungen verfügbar", - "sessionId": "Sitzungs", + "sessionId": "Sitzungs-ID", + "state": "Status", "tableAriaLabel": "Whiteboard-Sitzungen", "userId": "Benutzer-ID" } }, "communicationChannelStatisticsTitle": "Statistiken der Kommunikationskanäle (WRTC)", "documentSyncStatistics": { - "binaryJsonSize": "Binär / JSON-Größe (Bytes)", + "binaryJsonSize": "Binär-Größe / JSON-Größe", "false": "falsch", "noData": "Keine Daten verfügbar", "outstanding": "Ausstehend", @@ -44,7 +45,7 @@ "true": "wahr" }, "documentSyncStatisticsTitle": "Statistiken der Dokumentensynchronisation (Snapshots)", - "sessions": "Sitzungs-ID", + "sessions": "Sitzungen", "title": "Entwicklerwerkzeuge" }, "exportWhiteboardDialog": { diff --git a/packages/react-sdk/src/locales/en/neoboard.json b/packages/react-sdk/src/locales/en/neoboard.json index 39a415a2..f04a141c 100644 --- a/packages/react-sdk/src/locales/en/neoboard.json +++ b/packages/react-sdk/src/locales/en/neoboard.json @@ -14,27 +14,28 @@ "dataChannel": "Data Channel", "dataTransfer": "Data Transfer", "impolite": "Impolite", - "localSessionId": "Local Session Id", + "localSessionId": "Local Session ID", "messagesReceived": "Messages Received", "peers": "Peers", "received": "Received", - "remoteSessionId": "Remote Session Id", + "remoteSessionId": "Remote Session ID", "signaling": "Signaling", "tableAriaLabel": "Communication Channel Statistics", "true": "true", - "userId": "User Id", + "userId": "User ID", "whiteboardSessionsTable": { - "expire": "Session will expire in {{expire}}.", - "expiresState": "State", + "expire": "{{minutes}}:{{seconds}}", + "lifetime": "Remaining", "noData": "No whiteboard sessions available", "sessionId": "Session ID", + "state": "State", "tableAriaLabel": "Whiteboard Sessions", "userId": "User ID" } }, "communicationChannelStatisticsTitle": "Communication Channel Statistics (WRTC)", "documentSyncStatistics": { - "binaryJsonSize": "Binary / JSON Size (bytes)", + "binaryJsonSize": "Binary Size / JSON Size", "false": "false", "noData": "No data available", "outstanding": "Outstanding", From a9aeeeea57d63c2ab5c5cd8de1603410a67db876 Mon Sep 17 00:00:00 2001 From: Kim Brose Date: Fri, 6 Dec 2024 10:06:56 +0100 Subject: [PATCH 3/5] prettier Signed-off-by: Kim Brose --- .../DeveloperTools/StyledDevtoolsTable.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx b/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx index e1878f17..c3049361 100644 --- a/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/StyledDevtoolsTable.tsx @@ -26,15 +26,17 @@ interface StyledTableCellProps { monospace?: boolean; } -const StyledTableCell = styled(TableCell)(({ monospace, theme }) => ({ - fontSize: '0.875rem', - padding: '8px 16px', - borderBottom: `1px solid ${theme.palette.divider}`, - '&:not(:last-child)': { - borderRight: `1px solid ${theme.palette.divider}`, - }, - ...(monospace ? {fontFamily: 'monospace'} : undefined) -})); +const StyledTableCell = styled(TableCell)( + ({ monospace, theme }) => ({ + fontSize: '0.875rem', + padding: '8px 16px', + borderBottom: `1px solid ${theme.palette.divider}`, + '&:not(:last-child)': { + borderRight: `1px solid ${theme.palette.divider}`, + }, + ...(monospace ? { fontFamily: 'monospace' } : undefined), + }), +); const HeaderCell = styled(StyledTableCell)(({ theme }) => ({ fontWeight: 'bold', From 6524a218a2060c2f1603647c4dcb407fe847650b Mon Sep 17 00:00:00 2001 From: Kim Brose Date: Fri, 6 Dec 2024 14:22:37 +0100 Subject: [PATCH 4/5] switch to useInterval per PR review Signed-off-by: Kim Brose --- .../DeveloperTools/WhiteboardSessions.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx b/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx index 3618911d..b149aff5 100644 --- a/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/WhiteboardSessions.tsx @@ -15,8 +15,9 @@ */ import { TableBody, TableHead, TableRow } from '@mui/material'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useInterval } from 'react-use'; import { SessionState } from '../../state/communication/discovery/sessionManagerImpl'; import { StyledDevtoolsHeaderCell, @@ -31,14 +32,9 @@ export function WhiteboardSessionsTable({ }) { const { t } = useTranslation('neoboard'); const [now, setNow] = useState(Date.now()); - useEffect(() => { - const intervalId = setInterval(() => { - setNow(Date.now()); - }, 1000); - return () => { - clearInterval(intervalId); - }; - }, []); + useInterval(() => { + setNow(Date.now()); + }, 1000); return ( Date: Tue, 10 Dec 2024 17:55:33 +0100 Subject: [PATCH 5/5] useMemo per review Signed-off-by: Kim Brose --- .../DeveloperTools/DeveloperToolsDialog.tsx | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx b/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx index bad6e7d4..9f26b360 100644 --- a/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx +++ b/packages/react-sdk/src/components/DeveloperTools/DeveloperToolsDialog.tsx @@ -29,6 +29,7 @@ import { Typography, } from '@mui/material'; import { unstable_useId as useId } from '@mui/utils'; +import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useActiveWhiteboardInstanceStatistics } from '../../state'; import { CommunicationChannelStatisticsView } from './CommunicationChannelStatisticsView'; @@ -47,6 +48,27 @@ export function DeveloperToolsDialog({ const { document, communicationChannel } = useActiveWhiteboardInstanceStatistics(); + const sessions = useMemo( + () => + communicationChannel.sessions + ?.filter( + (s) => + s.sessionId !== communicationChannel.localSessionId && + s.expiresTs - Date.now() > 0, + ) + .map((s) => ({ + ...s, + status: Object.values(communicationChannel.peerConnections).find( + (p) => p.remoteSessionId === s.sessionId, + )?.connectionState, + })), + [ + communicationChannel.sessions, + communicationChannel.localSessionId, + communicationChannel.peerConnections, + ], + ); + const dialogTitleId = useId(); const dialogDescriptionId = useId(); @@ -132,21 +154,7 @@ export function DeveloperToolsDialog({ - - s.sessionId !== communicationChannel.localSessionId && - s.expiresTs - Date.now() > 0, - ) - .map((s) => ({ - ...s, - status: Object.values( - communicationChannel.peerConnections, - ).find((p) => p.remoteSessionId === s.sessionId) - ?.connectionState, - }))} - /> +