Show a 'closed' card with timing info on raw connections

Author: pimterry

src/components/common/duration-pill.tsx

@@ -5,6 +5,7 @@ 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);
@@ -41,11 +42,5 @@ export const DurationPill = observer((p: DurationPillProps) => {
 
     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}>{formatDuration(duration)}</Pill>;
 });

src/components/view/raw-tunnel-details-pane.tsx

@@ -12,6 +12,7 @@ import { ContentLabelBlock, Content, CopyableMonoValue } from '../common/text-co
 import { PaneScrollContainer } from './view-details-pane';
 import { StreamMessageListCard } from './stream-message-list-card';
 import { SelfSizedEditor } from '../editor/base-editor';
+import { formatDuration } from '../../util/text';
 
 @inject('uiStore')
 @observer
@@ -54,7 +55,7 @@ export class RawTunnelDetailsPane extends React.Component<{
                 <Content>
                     <p>
                         This connection was not intercepted by HTTP Toolkit, as it contains
-                        an unrecognized (non-HTTP) protocol.
+                        an unrecognized non-HTTP protocol, so was tunnelled directly to its destination.
                     </p>
                 </Content>
                 <Content>
@@ -72,6 +73,22 @@ export class RawTunnelDetailsPane extends React.Component<{
                 </Content>
             </MediumCard>
             { packetsListCard }
+            {
+                !tunnel.isOpen() &&
+                <MediumCard>
+                    <header>
+                        <h1>Connection Closed</h1>
+                    </header>
+                    <Content>
+                        This tunnel was closed {
+                            tunnel.timingEvents.disconnectTimestamp
+                            ? <>after {formatDuration(
+                                tunnel.timingEvents.disconnectTimestamp - tunnel.timingEvents.connectTimestamp
+                            )}</> : <></>
+                        }.
+                    </Content>
+                </MediumCard>
+            }
         </PaneScrollContainer>;
     }
 }

src/model/raw-tunnel.ts

@@ -74,7 +74,11 @@ export class RawTunnel extends HTKEventBase {
 
     @action
     markClosed(closeEvent: InputRawPassthrough) {
-        this.timingEvents.disconnectTimestamp = closeEvent.timingEvents.disconnectTimestamp;
+        this.timingEvents.disconnectTimestamp = (
+            // Work around for incorrect timing field name:
+            (closeEvent.timingEvents as any).disconnectedTimestamp ||
+            closeEvent.timingEvents.disconnectTimestamp
+        );
         this.open = false;
     }
 

src/model/tls/tls-tunnel.ts

@@ -35,7 +35,11 @@ export class TlsTunnel extends HTKEventBase {
     private open = true;
 
     markClosed(closeEvent: InputTlsPassthrough) {
-        this.timingEvents.disconnectTimestamp = closeEvent.timingEvents.disconnectTimestamp;
+        this.timingEvents.disconnectTimestamp = (
+            // Work around for incorrect timing field name:
+            (closeEvent.timingEvents as any).disconnectedTimestamp ||
+            closeEvent.timingEvents.disconnectTimestamp
+        );
         this.open = false;
     }
 

src/util/text.ts

@@ -27,4 +27,14 @@ export function camelToSentenceCase(value: string) {
         value.replace(/([a-z])([A-Z])/g, '$1 $2')
             .toLowerCase()
     );
-}
+}
+
+const sigFig = (num: number, figs: number): string =>
+    num.toFixed(figs);
+
+export const formatDuration = (duration: number) =>
+    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