feat: add cleanup messages button for websocket data

Author: ceifa

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

@@ -469,6 +469,7 @@ export class HttpDetailsPane extends React.Component<{
             isPaidUser={this.props.accountStore!.isPaidUser}
             filenamePrefix={filenamePrefix}
             messages={exchange.messages}
+            onClearMessages={() => exchange.downstream.cleanupMessages()}
         />;
     }
 

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

@@ -45,6 +45,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
     streamLabel?: string,
     messages: Array<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={['fas', 'ban']}
+                            title="Clear all messages"
+                            onClick={onClearMessages}
+                        /> }
                 </CollapsingButtons>
                 { streamLabel && <Pill
                     color={getSummaryColor('data')}

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
+    cleanupMessages() {
         // Clear all websocket message data too
         this.messages.forEach(msg => msg.cleanup());
         this.messages.length = 0;
     }
+
+    cleanup() {
+        super.cleanup();
+        this.cleanupMessages();
+    }
 }