Add Duration column to ViewEventList

Author: Sugavanas

src/components/common/duration-pill.tsx

@@ -5,47 +5,10 @@ import { TimingEvents } from '../../types';
 import { observableClock } from '../../util/observable';
 
 import { Pill } from './pill';
+import { calculateAndFormatDuration, FormattedDurationProps } from "../../util/utils";
 
-function sigFig(num: number, figs: number): string {
-    return num.toFixed(figs);
-}
-
-type DurationPillProps = { className?: string } & (
-    | { durationMs: number }
-    | { timingEvents: Partial<TimingEvents> }
-);
-
-const calculateDuration = (timingEvents: Partial<TimingEvents>) => {
-    const doneTimestamp = timingEvents.responseSentTimestamp ?? timingEvents.abortedTimestamp;
-
-    if (timingEvents.startTimestamp !== undefined && doneTimestamp !== undefined) {
-        return doneTimestamp - timingEvents.startTimestamp;
-    }
-
-    if (timingEvents.startTime !== undefined) {
-        // This may not be perfect - note that startTime comes from the server so we might be
-        // mildly out of sync (ehhhh, in theory) but this is only for pending requests where
-        // that's unlikely to be an issue - the final time will be correct regardless.
-        return observableClock.getTime() - timingEvents.startTime;
-    }
-}
+type DurationPillProps = { className?: string } & FormattedDurationProps;
 
 export const DurationPill = observer((p: DurationPillProps) => {
-    let duration: number | undefined;
-
-    if ('durationMs' in p) {
-        duration = p.durationMs;
-    } else if (p.timingEvents) {
-        duration = calculateDuration(p.timingEvents);
-    }
-
-    if (duration === undefined) return null;
-
-    return <Pill className={p.className}>{
-        duration < 100 ? sigFig(duration, 1) + 'ms' : // 22.3ms
-        duration < 1000 ? sigFig(duration, 0) + 'ms' : // 999ms
-        duration < 5000 ? sigFig(duration / 1000, 2) + ' seconds' : // 3.04 seconds
-        duration < 9900 ? sigFig(duration / 1000, 1) + ' seconds' : // 8.2 seconds
-        sigFig(duration / 1000, 0) + ' seconds' // 30 seconds
-    }</Pill>;
+    return <Pill className={p.className}>{calculateAndFormatDuration(p)}</Pill>;
 });

src/components/view/view-event-list.tsx

@@ -27,6 +27,7 @@ import {
 } from '../../model/events/categorization';
 import { nameStepClass } from '../../model/rules/rule-descriptions';
 import { getReadableSize } from '../../util/buffer';
+import { calculateAndFormatDuration } from "../../util/utils";
 
 import { UnreachableCheck } from '../../util/error';
 import { filterProps } from '../component-utils';
@@ -212,6 +213,33 @@ const PathAndQuery = styled(Column)`
     flex-basis: 1000px;
 `;
 
+const BaseDuration = observer(({ exchange, role = 'cell', className, children }: {
+    exchange?: HttpExchange, role?: 'columnheader' | 'cell',
+    className?: string,
+    children?: React.ReactNode
+}) => {
+    let duration: string | null | undefined;
+    if (exchange != null) {
+        duration = calculateAndFormatDuration({ timingEvents: exchange.timingEvents });
+    }
+    return (
+        <div role={role} className={className}>
+            {duration ?
+                duration :
+                (children ?? 'Duration')
+            }
+        </div>
+    );
+});
+
+const Duration = styled(BaseDuration)`
+    ${columnStyles};
+    flex-basis: 71px;
+    flex-shrink: 0;
+    flex-grow: 0;
+`;
+
+
 // Match Method + Status, but shrink right margin slightly so that
 // spinner + "WebRTC Media" fits OK.
 const EventTypeColumn = styled(Column)`
@@ -515,6 +543,7 @@ const ExchangeRow = inject('uiStore')(observer(({
         <PathAndQuery role='cell' title={request.parsedUrl.pathname + request.parsedUrl.search}>
             {request.parsedUrl.pathname + request.parsedUrl.search}
         </PathAndQuery>
+        <Duration role='cell' exchange={exchange} />
     </TrafficEventListRow>;
 }));
 
@@ -833,6 +862,7 @@ export class ViewEventList extends React.Component<ViewEventListProps> {
                 <Source role="columnheader">Source</Source>
                 <Host role="columnheader">Host</Host>
                 <PathAndQuery role="columnheader">Path and query</PathAndQuery>
+                <Duration role="columnheader">Duration</Duration>
             </TableHeaderRow>
 
             {

src/util/utils.ts

@@ -0,0 +1,48 @@
+import { TimingEvents } from "../types";
+import { observableClock } from "./observable";
+
+export type FormattedDurationProps =
+    {
+        durationMs?: number,
+        timingEvents: Partial<TimingEvents>
+    };
+
+export const calculateDuration = (timingEvents: Partial<TimingEvents>): number | undefined => {
+    const doneTimestamp = timingEvents.responseSentTimestamp ?? timingEvents.abortedTimestamp ?? timingEvents.wsClosedTimestamp;
+
+    if (timingEvents.startTimestamp !== undefined && doneTimestamp !== undefined) {
+        return doneTimestamp - timingEvents.startTimestamp;
+    }
+
+    if (timingEvents.startTime !== undefined) {
+        // This may not be perfect - note that startTime comes from the server so we might be
+        // mildly out of sync (ehhhh, in theory) but this is only for pending requests where
+        // that's unlikely to be an issue - the final time will be correct regardless.
+        return observableClock.getTime() - timingEvents.startTime;
+    }
+}
+
+export const calculateAndFormatDuration = (props: FormattedDurationProps): string | null | undefined => {
+    let duration: number | undefined;
+
+    if (props.durationMs !== undefined) {
+        duration = props.durationMs;
+    } else if (props.timingEvents) {
+        duration = calculateDuration(props.timingEvents);
+    }
+
+    if (duration === undefined)
+        return null;
+
+    return (
+        duration < 100 ? sigFig(duration, 1) + 'ms' : // 22.3ms
+            duration < 1000 ? sigFig(duration, 0) + 'ms' : // 999ms
+                duration < 5000 ? sigFig(duration / 1000, 2) + 's' : // 3.04s
+                    duration < 59000 ? sigFig(duration / 1000, 1) + 's' : // 30.2s
+                        sigFig(duration / 60000, 1) + 'm' // 1.1m
+    );
+};
+
+function sigFig(num: number, figs: number): string {
+    return num.toFixed(figs);
+}