add cleanup websocket messages button

src/components/view/http/http-details-pane.tsx

@@ -4,7 +4,7 @@ import { action, computed } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
-import { CollectedEvent, HtkResponse, HttpExchange, HttpExchangeView } from '../../../types';
+import { CollectedEvent, HtkResponse, HttpExchangeView } from '../../../types';
 import { styled } from '../../../styles';
 import { logError } from '../../../errors';
 
@@ -15,7 +15,7 @@ import { ApiExchange } from '../../../model/api/api-interfaces';
 import { buildRuleFromRequest } from '../../../model/rules/rule-creation';
 import { findItem } from '../../../model/rules/rules-structure';
 import { HtkRule, getRulePartKey } from '../../../model/rules/rules';
-import { WebSocketStream } from '../../../model/websockets/websocket-stream';
+import { WebSocketView } from '../../../model/websockets/websocket-views';
 import { tagsToErrorType } from '../../../model/http/error-types';
 
 import { PaneScrollContainer } from '../view-details-pane';
@@ -448,7 +448,7 @@ export class HttpDetailsPane extends React.Component<{
             />;
     }
 
-    private renderWebSocketMessages(exchange: WebSocketStream) {
+    private renderWebSocketMessages(exchange: WebSocketView) {
         const urlParts = exchange.request.url.split('/');
         const domain = urlParts[2].split(':')[0];
         const baseName = urlParts.length >= 2 ? urlParts[urlParts.length - 1] : undefined;
@@ -469,6 +469,7 @@ export class HttpDetailsPane extends React.Component<{
             isPaidUser={this.props.accountStore!.isPaidUser}
             filenamePrefix={filenamePrefix}
             messages={exchange.messages}
+            onClearMessages={this.clearMessages}
         />;
     }
 
@@ -541,4 +542,11 @@ export class HttpDetailsPane extends React.Component<{
         exchange.hideErrors = true;
     }
 
+    @action.bound
+    private clearMessages() {
+        const { exchange } = this.props;
+        if (!exchange.isWebSocket()) return;
+        exchange.downstream.clearMessages();
+    }
+
 };

src/components/view/stream-message-list-card.tsx

@@ -43,8 +43,9 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
     streamId: string,
     streamType: StreamType,
     streamLabel?: string,
-    messages: Array<StreamMessage>,
+    messages: ReadonlyArray<StreamMessage>,
     editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor>
+    onClearMessages?: () => void,
 }> {
 
     @observable
@@ -67,6 +68,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
             expanded,
             onCollapseToggled,
             onExpandToggled,
+            onClearMessages,
             ariaLabel
         } = this.props;
 
@@ -92,6 +94,12 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
                         disabled={!isPaidUser}
                         onClick={this.exportMessages}
                     />
+                    { onClearMessages &&
+                        <IconButton
+                            icon={['far', 'trash-alt']}
+                            title="Clear all messages"
+                            onClick={onClearMessages}
+                        /> }
                 </CollapsingButtons>
                 { streamLabel && <Pill
                     color={getSummaryColor('data')}

src/model/events/event-base.ts

@@ -4,10 +4,10 @@ import {
     FailedTlsConnection,
     TlsTunnel,
     HttpExchangeView,
+    WebSocketView,
     RTCConnection,
     RTCDataChannel,
-    RTCMediaTrack,
-    WebSocketStream
+    RTCMediaTrack
 } from '../../types';
 
 import { getEventCategory } from './categorization';
@@ -18,7 +18,7 @@ export abstract class HTKEventBase {
 
     // These can be overriden by subclasses to allow easy type narrowing:
     isHttp(): this is HttpExchangeView { return false; }
-    isWebSocket(): this is WebSocketStream { return false; }
+    isWebSocket(): this is WebSocketView { return false; }
 
     isTlsFailure(): this is FailedTlsConnection { return false; }
     isTlsTunnel(): this is TlsTunnel { return false; }

src/model/websockets/websocket-stream.ts

@@ -127,11 +127,15 @@ export class WebSocketStream extends HttpExchange implements WebSocketView {
         this.upstream.updateWithRequestHead(params);
     }
 
-    cleanup() {
-        super.cleanup();
-
+    @action
+    clearMessages() {
         // Clear all websocket message data too
         this.messages.forEach(msg => msg.cleanup());
         this.messages.length = 0;
     }
+
+    cleanup() {
+        super.cleanup();
+        this.clearMessages();
+    }
 }

src/types.d.ts

@@ -39,6 +39,7 @@ import type { HttpExchange, HttpVersion } from './model/http/http-exchange';
 import type { HttpExchangeView } from './model/http/http-exchange-views';
 
 import type { WebSocketStream } from './model/websockets/websocket-stream';
+import type { WebSocketView } from './model/websockets/websocket-views';
 import type { RTCConnection } from './model/webrtc/rtc-connection';
 import type { RTCDataChannel } from './model/webrtc/rtc-data-channel';
 import type { RTCMediaTrack } from './model/webrtc/rtc-media-track';
@@ -227,6 +228,7 @@ export type {
     HttpExchange,
     HttpExchangeView,
     WebSocketStream,
+    WebSocketView,
     RTCConnection,
     RTCDataChannel,
     RTCMediaTrack