[v18] web player: make query parameters optional

lib/web/tty_playback.go

@@ -74,6 +74,11 @@ func (h *Handler) sessionLengthHandle(
 		return nil, trace.Wrap(err)
 	}
 
+	type response struct {
+		Duration      int64  `json:"durationMs"`
+		RecordingType string `json:"recordingType"`
+	}
+
 	evts, errs := clt.StreamSessionEvents(ctx, session.ID(sID), 0)
 	for {
 		select {
@@ -83,13 +88,14 @@ func (h *Handler) sessionLengthHandle(
 			if !ok {
 				return nil, trace.NotFound("could not find end event for session %v", sID)
 			}
+
 			switch evt := evt.(type) {
 			case *events.SessionEnd:
-				return map[string]any{"durationMs": evt.EndTime.Sub(evt.StartTime).Milliseconds()}, nil
+				return response{evt.EndTime.Sub(evt.StartTime).Milliseconds(), "ssh"}, nil
 			case *events.WindowsDesktopSessionEnd:
-				return map[string]any{"durationMs": evt.EndTime.Sub(evt.StartTime).Milliseconds()}, nil
+				return response{evt.EndTime.Sub(evt.StartTime).Milliseconds(), "desktop"}, nil
 			case *events.DatabaseSessionEnd:
-				return map[string]any{"durationMs": evt.EndTime.Sub(evt.StartTime).Milliseconds()}, nil
+				return response{evt.EndTime.Sub(evt.StartTime).Milliseconds(), "database"}, nil
 			}
 		}
 	}

web/packages/teleport/src/Player/Player.tsx

@@ -64,8 +64,9 @@ export function Player() {
 
   const validRecordingType = validRecordingTypes.includes(recordingType);
   const durationMs = Number(getUrlParameter('durationMs', search));
-  const shouldFetchSessionDuration =
-    validRecordingType && (!Number.isInteger(durationMs) || durationMs <= 0);
+  const validDuration = Number.isInteger(durationMs) && durationMs > 0;
+
+  const shouldFetchSessionDuration = !validRecordingType || !validDuration;
 
   useEffect(() => {
     if (shouldFetchSessionDuration) {
@@ -75,25 +76,12 @@ export function Player() {
 
   const combinedAttempt = shouldFetchSessionDuration
     ? fetchDurationAttempt
-    : makeSuccessAttempt({ durationMs });
+    : makeSuccessAttempt({ durationMs, recordingType });
 
   function onLogout() {
     session.logout();
   }
 
-  if (!validRecordingType) {
-    return (
-      <StyledPlayer>
-        <Box textAlign="center" mx={10} mt={5}>
-          <Danger mb={0}>
-            Invalid query parameter recordingType: {recordingType}, should be
-            one of {validRecordingTypes.join(', ')}.
-          </Danger>
-        </Box>
-      </StyledPlayer>
-    );
-  }
-
   if (
     combinedAttempt.status === '' ||
     combinedAttempt.status === 'processing'
@@ -119,6 +107,20 @@ export function Player() {
     );
   }
 
+  if (!validRecordingTypes.includes(combinedAttempt.data.recordingType)) {
+    return (
+      <StyledPlayer>
+        <Box textAlign="center" mx={10} mt={5}>
+          <Danger mb={0}>
+            Invalid query parameter recordingType:{' '}
+            {combinedAttempt.data.recordingType}, should be one of{' '}
+            {validRecordingTypes.join(', ')}.
+          </Danger>
+        </Box>
+      </StyledPlayer>
+    );
+  }
+
   return (
     <StyledPlayer>
       <Flex bg="levels.surface" height="38px">
@@ -134,7 +136,7 @@ export function Player() {
           position: 'relative',
         }}
       >
-        {recordingType === 'desktop' ? (
+        {combinedAttempt.data.recordingType === 'desktop' ? (
           <DesktopPlayer
             sid={sid}
             clusterId={clusterId}

web/packages/teleport/src/services/recordings/recordings.ts

@@ -49,7 +49,7 @@ export default class RecordingsService {
   fetchRecordingDuration(
     clusterId: string,
     sessionId: string
-  ): Promise<{ durationMs: number }> {
+  ): Promise<{ durationMs: number; recordingType: string }> {
     return api.get(cfg.getSessionDurationUrl(clusterId, sessionId));
   }
 }