From 98e1368f8e586c785c60aaea3676e1f03fe80d6c Mon Sep 17 00:00:00 2001 From: ceifa Date: Thu, 5 Jun 2025 13:48:42 -0300 Subject: [PATCH 1/2] feat: add cleanup messages button for websocket data --- src/components/view/http/http-details-pane.tsx | 1 + src/components/view/stream-message-list-card.tsx | 8 ++++++++ src/model/websockets/websocket-stream.ts | 10 +++++++--- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/components/view/http/http-details-pane.tsx b/src/components/view/http/http-details-pane.tsx index 971c80e6..6202f498 100644 --- a/src/components/view/http/http-details-pane.tsx +++ b/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()} />; } diff --git a/src/components/view/stream-message-list-card.tsx b/src/components/view/stream-message-list-card.tsx index 719a6694..c328aa9a 100644 --- a/src/components/view/stream-message-list-card.tsx +++ b/src/components/view/stream-message-list-card.tsx @@ -45,6 +45,7 @@ export class StreamMessageListCard extends React.Component, editorNode: portals.HtmlPortalNode + onClearMessages?: () => void, }> { @observable @@ -67,6 +68,7 @@ export class StreamMessageListCard extends React.Component + { onClearMessages && + } { streamLabel && msg.cleanup()); this.messages.length = 0; } + + cleanup() { + super.cleanup(); + this.cleanupMessages(); + } } \ No newline at end of file From ac69e1125e178834c12b03fd662e7b068118f823 Mon Sep 17 00:00:00 2001 From: Tim Perry Date: Mon, 23 Jun 2025 19:59:20 +0200 Subject: [PATCH 2/2] Fix websocket view typing & tweak cleanup button slightly --- src/components/view/http/http-details-pane.tsx | 15 +++++++++++---- src/components/view/stream-message-list-card.tsx | 4 ++-- src/model/events/event-base.ts | 6 +++--- src/model/websockets/websocket-stream.ts | 4 ++-- src/types.d.ts | 2 ++ 5 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/view/http/http-details-pane.tsx b/src/components/view/http/http-details-pane.tsx index 6202f498..7b8afc01 100644 --- a/src/components/view/http/http-details-pane.tsx +++ b/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,7 +469,7 @@ export class HttpDetailsPane extends React.Component<{ isPaidUser={this.props.accountStore!.isPaidUser} filenamePrefix={filenamePrefix} messages={exchange.messages} - onClearMessages={() => exchange.downstream.cleanupMessages()} + onClearMessages={this.clearMessages} />; } @@ -542,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(); + } + }; \ No newline at end of file diff --git a/src/components/view/stream-message-list-card.tsx b/src/components/view/stream-message-list-card.tsx index c328aa9a..aa1495b9 100644 --- a/src/components/view/stream-message-list-card.tsx +++ b/src/components/view/stream-message-list-card.tsx @@ -43,7 +43,7 @@ export class StreamMessageListCard extends React.Component, + messages: ReadonlyArray, editorNode: portals.HtmlPortalNode onClearMessages?: () => void, }> { @@ -96,7 +96,7 @@ export class StreamMessageListCard extends React.Component { onClearMessages && } diff --git a/src/model/events/event-base.ts b/src/model/events/event-base.ts index db7b52c1..bcc1b9cd 100644 --- a/src/model/events/event-base.ts +++ b/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; } diff --git a/src/model/websockets/websocket-stream.ts b/src/model/websockets/websocket-stream.ts index b6bf5e16..74a45701 100644 --- a/src/model/websockets/websocket-stream.ts +++ b/src/model/websockets/websocket-stream.ts @@ -128,7 +128,7 @@ export class WebSocketStream extends HttpExchange implements WebSocketView { } @action - cleanupMessages() { + clearMessages() { // Clear all websocket message data too this.messages.forEach(msg => msg.cleanup()); this.messages.length = 0; @@ -136,6 +136,6 @@ export class WebSocketStream extends HttpExchange implements WebSocketView { cleanup() { super.cleanup(); - this.cleanupMessages(); + this.clearMessages(); } } \ No newline at end of file diff --git a/src/types.d.ts b/src/types.d.ts index ed0ee636..a9977817 100644 --- a/src/types.d.ts +++ b/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