Add Duration/Size columns to the header of view-event list.

Author: Haoxiqiang

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

@@ -23,7 +23,11 @@ import {
 } from '../../model/events/categorization';
 
 import { UnreachableCheck } from '../../util/error';
-import { getReadableSize } from '../../model/events/bodies';
+import {
+    getReadableSize,
+    sigFig
+} from '../../model/events/bodies';
+
 import { filterProps } from '../component-utils';
 
 import { EmptyState } from '../common/empty-state';
@@ -166,6 +170,18 @@ const PathAndQuery = styled(Column)`
     flex-basis: 1000px;
 `;
 
+const Duration = styled(Column)`
+  flex-basis: 80px;
+  flex-shrink: 0;
+  flex-grow: 0;
+`;
+
+const Size = styled(Column)`
+  flex-basis: 80px;
+  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)`
@@ -372,6 +388,10 @@ const ExchangeRow = observer(({
         category
     } = exchange;
 
+    let durationMs = ('startTime' in exchange.timingEvents) ? (
+        (exchange.timingEvents.responseSentTimestamp || exchange.timingEvents.abortedTimestamp || 0) - exchange.timingEvents.startTimestamp
+    ) : 0;
+
     return <TrafficEventListRow
         role="row"
         aria-label='row'
@@ -420,6 +440,18 @@ const ExchangeRow = observer(({
         <PathAndQuery title={ request.parsedUrl.pathname + request.parsedUrl.search }>
             { request.parsedUrl.pathname + request.parsedUrl.search }
         </PathAndQuery>
+        <Duration>
+            {durationMs > 0
+                ? (
+                    (durationMs < 100) ?
+                        (sigFig(durationMs, 2) + 'ms') :
+                        (durationMs < 1000 ? sigFig(durationMs, 1) + 'ms' : (durationMs < 10000 ? sigFig(durationMs / 1000, 3) + ' s' : sigFig(durationMs / 1000, 1) + ' s'))
+                )
+                : ''}
+        </Duration>
+        <Size>
+            { exchange.isSuccessfulExchange() ? getReadableSize(exchange.response.body.encoded.byteLength) : ''}
+        </Size>
     </TrafficEventListRow>;
 });
 
@@ -666,6 +698,8 @@ export class ViewEventList extends React.Component<ViewEventListProps> {
                 <Source>Source</Source>
                 <Host>Host</Host>
                 <PathAndQuery>Path and query</PathAndQuery>
+                <Duration>Duration</Duration>
+                <Size>Size</Size>
             </TableHeader>
 
             {
@@ -869,4 +903,4 @@ export class ViewEventList extends React.Component<ViewEventListProps> {
 
         event.preventDefault();
     }
-}
+}

src/model/events/bodies.ts

@@ -18,6 +18,10 @@ export function getReadableSize(bytes: number, siUnits = true) {
     return (bytes / Math.pow(thresh, unitIndex)).toFixed(1).replace(/\.0$/, '') + ' ' + unitName;
 }
 
+export function sigFig(num: number, figs: number): number {
+    return parseFloat(num.toFixed(figs));
+}
+
 const EncodedSizesCacheKey = Symbol('encoded-body-test');
 type EncodedBodySizes = { [encoding: string]: number };
 type EncodedSizesCache = Map<typeof EncodedSizesCacheKey,
@@ -45,4 +49,4 @@ export function testEncodings(message: ExchangeMessage): EncodedBodySizes | unde
         // Will be undefined, but ensures we're subscribed to the observable
         return sizesObservable.get();
     }
-}
+}