Implement Timestamp/Duration columns in view-event-list.tsx

src/components/common/duration-pill.tsx

@@ -1,46 +1,12 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 
-import { TimingEvents } from '../../types';
-import { observableClock } from '../../util/observable';
-
 import { Pill } from './pill';
-import { formatDuration } from '../../util/text';
-
-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;
-    }
+import { calculateAndFormatDuration, FormattedDurationProps } from "../../util/utils";
 
-    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}>{formatDuration(duration)}</Pill>;
+    return <Pill className={p.className}>{calculateAndFormatDuration(p)}</Pill>;
 });

src/components/view/view-context-menu-builder.ts

@@ -27,8 +27,10 @@ export class ViewEventContextMenuBuilder {
         private onPin: (event: CollectedEvent) => void,
         private onDelete: (event: CollectedEvent) => void,
         private onBuildRuleFromExchange: (exchange: HttpExchangeView) => void,
-        private onPrepareToResendRequest?: (exchange: HttpExchangeView) => void
-    ) {}
+        private onPrepareToResendRequest?: (exchange: HttpExchangeView) => void,
+        private onHeaderColumnOptionChange?: (visibleViewColumns: Map<string, boolean>, columnName: string, show: boolean) => void,
+    ) {
+    }
 
     private readonly BaseOptions = {
         Pin: {
@@ -142,4 +144,28 @@ export class ViewEventContextMenuBuilder {
         };
     }
 
+    getHeaderToggleContextMenu(enabledColumns: Map<string, boolean>) {
+        let menuOptions: ContextMenuItem<void>[] = [];
+
+        enabledColumns.forEach((enabled, columnName) => {
+            menuOptions.push({
+                type: 'option',
+                label: (!enabled ? "Show " : "Hide ") + columnName,
+                callback: () => {
+                    this.onHeaderColumnOptionChange ? this.onHeaderColumnOptionChange(enabledColumns, columnName, !enabled) : console.log('onHeaderColumnOptionChange callback not set');
+                }
+            });
+        });
+
+        return (mouseEvent: React.MouseEvent) => {
+            const sortedOptions = _.sortBy(menuOptions, (o: ContextMenuItem<void>) =>
+                o.type === 'separator' || !(o.enabled ?? true)
+            ) as Array<ContextMenuItem<void>>;
+
+            this.uiStore.handleContextMenuEvent(
+                mouseEvent,
+                sortedOptions
+            )
+        };
+    }
 }