Tighten up message & connection rows for raw tunnels

Author: pimterry

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

@@ -7,12 +7,15 @@ import { getReadableIP } from '../../model/network';
 import { RawTunnel } from '../../model/raw-tunnel';
 import { UiStore } from '../../model/ui/ui-store';
 
+import { formatDuration } from '../../util/text';
+import { getReadableSize } from '../../util/buffer';
+
 import { MediumCard } from '../common/card';
+
 import { ContentLabelBlock, Content, CopyableMonoValue } from '../common/text-content';
 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
@@ -39,7 +42,7 @@ export class RawTunnelDetailsPane extends React.Component<{
             cardHeading='Raw Data'
             streamLabel={tunnel.upstreamHostname}
             editorNode={this.props.streamMessageEditor}
-            filenamePrefix={`Raw Tunnel ${tunnel.upstreamHostname} ${tunnel.id}`}
+            filenamePrefix={`Raw Tunnel ${tunnel.upstreamHostname} ${tunnel.upstreamPort} ${tunnel.id}`}
             messages={tunnel.packets}
         />;
 

src/components/view/stream-message-rows.tsx

@@ -66,13 +66,15 @@ export const StreamMessageCollapsedRow = React.memo((p: {
             )
         }
     </CollapsedStreamContent>
-    {
-        p.message.isBinary &&
-            <Pill color={warningColor}>Binary</Pill>
-    }
-    <Pill>
-        { getReadableSize(p.message.content.byteLength) }
-    </Pill>
+    <RowTags>
+        {
+            p.message.isBinary &&
+                <Pill color={warningColor}>Binary</Pill>
+        }
+        <Pill>
+            { getReadableSize(p.message.content.byteLength) }
+        </Pill>
+    </RowTags>
 </CollapsedStreamRowContainer>);
 
 const MessageArrow = styled(React.memo((p: {
@@ -141,6 +143,12 @@ const CollapsedStreamContent = styled(ContentMonoValue)`
     padding: 3px 0 4px;
 `;
 
+const RowTags = styled.div`
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+`;
+
 interface MessageEditorRowProps {
     streamId: string,
     message: StreamMessage,

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

@@ -724,7 +724,9 @@ const RawTunnelRow = observer((p: {
 }) => {
     const { event } = p;
 
-    const connectionTarget = event.upstreamHostname || 'unknown domain';
+    const connectionTarget = event.upstreamHostname
+        ? `${event.upstreamHostname}:${event.upstreamPort}`
+        : 'unknown destination';
 
     return <TlsListRow
         role="row"