Fix payload visualization on metadata continuation

3 files changed, 15 insertions, 5 deletions

diff --git a/connection_streams_controller.go b/connection_streams_controller.go
index 038c2c5..d55c2fd 100644
--- a/connection_streams_controller.go
+++ b/connection_streams_controller.go
@@ -179,7 +179,7 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context,
 			var isMetadataContinuation bool
 			for _, elem := range messagesBuffer {
 				elem.Metadata = metadata
-				elem.IsMetadataContinuation = isMetadataContinuation
+				elem.IsMetadataContinuation = metadata != nil && isMetadataContinuation
 				isMetadataContinuation = true
 			}
 
diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js
index cdfe185..dd1765d 100644
--- a/frontend/src/components/panels/RulesPane.js
+++ b/frontend/src/components/panels/RulesPane.js
@@ -252,7 +252,7 @@ class RulesPane extends Component {
                 this.reset();
                 this.setState({selectedRule: _.cloneDeep(r)});
             }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}>
-                <CopyLinkPopover text={r["id"].substring(0, 8)} value={r["id"]}/>
+                <td><CopyLinkPopover text={r["id"].substring(0, 8)} value={r["id"]}/></td>
                 <td>{r["name"]}</td>
                 <td><ButtonField name={r["color"]} color={r["color"]} small/></td>
                 <td>{r["notes"]}</td>
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index 29aff71..8276949 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -78,6 +78,14 @@ class StreamsPane extends Component {
         }
     };
 
+    viewAs = (mode) => {
+        if (mode === "decoded") {
+            this.setState({tryParse: true});
+        } else if (mode === "raw") {
+            this.setState({tryParse: false});
+        }
+    };
+
     tryParseConnectionMessage = (connectionMessage) => {
         const isClient = connectionMessage["from_client"];
         if (connectionMessage.metadata == null) {
@@ -212,7 +220,8 @@ class StreamsPane extends Component {
         };
         const content = this.state.messages || [];
 
-        let payload = content.filter((c) => !c["is_metadata_continuation"]).map((c, i) =>
+        let payload = content.filter((c) => !this.state.tryParse || (this.state.tryParse && !c["is_metadata_continuation"]))
+            .map((c, i) =>
             <div key={`content-${i}`}
                  className={classNames("connection-message", c["from_client"] ? "from-client" : "from-server")}>
                 <div className="connection-message-header container-fluid">
@@ -244,9 +253,10 @@ class StreamsPane extends Component {
                             <ChoiceField name="format" inline small onlyName
                                          keys={["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]}
                                          values={["plain", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]}
-                                         onChange={this.setFormat} value={this.state.value}/>
+                                         onChange={this.setFormat} />
 
-                            <ChoiceField name="view_as" inline small onlyName keys={["default"]} values={["default"]}/>
+                            <ChoiceField name="view_as" inline small onlyName onChange={this.viewAs}
+                                         keys={["decoded", "raw"]} values={["decoded", "raw"]} />
 
                             <ChoiceField name="download_as" inline small onlyName onChange={this.downloadStreamRaw}
                                          keys={["nl_separated", "only_client", "only_server", "pwntools"]}