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

Author: Haoxiqiang

src/components/view/http/http-performance-card.tsx

@@ -5,7 +5,6 @@ import { get } from 'typesafe-get';
 
 import { styled } from '../../../styles';
 import {
-    Omit,
     HttpExchange,
     TimingEvents,
     ExchangeMessage
@@ -14,7 +13,7 @@ import { asHeaderArray, joinAnd } from '../../../util';
 import { Icon, WarningIcon, SuggestionIcon } from '../../../icons';
 
 import { AccountStore } from '../../../model/account/account-store';
-import { getReadableSize, testEncodings } from '../../../model/events/bodies';
+import {getReadableDuration, getReadableSize, testEncodings} from '../../../model/events/bodies';
 import {
     explainCacheability,
     explainCacheLifetime,
@@ -41,23 +40,14 @@ interface HttpPerformanceCardProps extends CollapsibleCardProps {
     accountStore?: AccountStore;
 }
 
-function sigFig(num: number, figs: number): number {
-    return parseFloat(num.toFixed(figs));
-}
-
 const TimingPill = observer((p: { className?: string, timingEvents: TimingEvents }) => {
     // We can't show timing info if the request is still going
     const doneTimestamp = p.timingEvents.responseSentTimestamp || p.timingEvents.abortedTimestamp;
     if (!doneTimestamp) return null;
 
     const durationMs = doneTimestamp - p.timingEvents.startTimestamp;
 
-    return <Pill className={p.className}>{
-        durationMs < 100 ? sigFig(durationMs, 2) + 'ms' : // 22.34ms
-        durationMs < 1000 ? sigFig(durationMs, 1) + 'ms' : // 999.5ms
-        durationMs < 10000 ? sigFig(durationMs / 1000, 3) + ' seconds' : // 3.045 seconds
-        sigFig(durationMs / 1000, 1) + ' seconds' // 11.2 seconds
-    }</Pill>;
+    return <Pill className={p.className}>{getReadableDuration(durationMs)}</Pill>;
 });
 
 export const HttpPerformanceCard = inject('accountStore')(observer((props: HttpPerformanceCardProps) => {
@@ -342,4 +332,4 @@ const CachingPerformance = observer((p: { exchange: HttpExchange }) => {
             </CollapsibleSection>
         ) }
     </>;
-});
+});

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,
+    getReadableDuration
+} 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,12 @@ const ExchangeRow = observer(({
         <PathAndQuery title={ request.parsedUrl.pathname + request.parsedUrl.search }>
             { request.parsedUrl.pathname + request.parsedUrl.search }
         </PathAndQuery>
+        <Duration>
+            {durationMs > 0 ? getReadableDuration(durationMs) : ''}
+        </Duration>
+        <Size>
+            { exchange.isSuccessfulExchange() ? getReadableSize(exchange.response.body.encoded.byteLength) : ''}
+        </Size>
     </TrafficEventListRow>;
 });
 
@@ -666,6 +692,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 +897,4 @@ export class ViewEventList extends React.Component<ViewEventListProps> {
 
         event.preventDefault();
     }
-}
+}

src/model/events/bodies.ts

@@ -18,6 +18,17 @@ export function getReadableSize(bytes: number, siUnits = true) {
     return (bytes / Math.pow(thresh, unitIndex)).toFixed(1).replace(/\.0$/, '') + ' ' + unitName;
 }
 
+function sigFig(num: number, figs: number): number {
+    return parseFloat(num.toFixed(figs));
+}
+
+export function getReadableDuration(durationMs: number): string {
+    return (durationMs < 100) ? (sigFig(durationMs, 2) + 'ms') // 22.34ms
+        : (durationMs < 1000 ? sigFig(durationMs, 1) + 'ms' // 999.5ms
+            : (durationMs < 10000 ? sigFig(durationMs / 1000, 3) + ' s' // 3.045 seconds
+                : sigFig(durationMs / 1000, 1) + ' s')) // 11.2 seconds
+}
+
 const EncodedSizesCacheKey = Symbol('encoded-body-test');
 type EncodedBodySizes = { [encoding: string]: number };
 type EncodedSizesCache = Map<typeof EncodedSizesCacheKey,
@@ -45,4 +56,4 @@ export function testEncodings(message: ExchangeMessage): EncodedBodySizes | unde
         // Will be undefined, but ensures we're subscribed to the observable
         return sizesObservable.get();
     }
-}
+}