Merge branch 'feature/decode-gzip' into develop

1 files changed, 136 insertions, 27 deletions

diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 905a56d..20ec92b 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,7 +1,10 @@
 import React, {Component} from 'react';
 import './ConnectionContent.scss';
-import {Dropdown} from 'react-bootstrap';
+import {Button, Dropdown, Row} from 'react-bootstrap';
 import axios from 'axios';
+import MessageAction from "./MessageAction";
+
+const classNames = require('classnames');
 
 class ConnectionContent extends Component {
 
@@ -10,7 +13,9 @@ class ConnectionContent extends Component {
         this.state = {
             loading: false,
             connectionContent: null,
-            format: "default"
+            format: "default",
+            tryParse: true,
+            messageActionDialog: null
         };
 
         this.validFormats = ["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"];
@@ -37,44 +42,148 @@ class ConnectionContent extends Component {
         }
     }
 
+    tryParseConnectionMessage(connectionMessage) {
+        if (connectionMessage.metadata == null) {
+            return connectionMessage.content;
+        }
+        if (connectionMessage["is_metadata_continuation"]) {
+            return <span style={{"fontSize": "12px"}}>**already parsed in previous messages**</span>;
+        }
+
+        let unrollMap = (obj) => obj == null ? null : Object.entries(obj).map(([key, value]) =>
+            <p><strong>{key}</strong>: {value}</p>
+        );
+
+        let m = connectionMessage.metadata;
+        switch (m.type) {
+            case "http-request":
+                let url = <i><u><a href={"http://" + m.host + m.url} target="_blank"
+                                   rel="noopener noreferrer">{m.host}{m.url}</a></u></i>;
+                return <span className="type-http-request">
+                    <p style={{"marginBottom": "7px"}}><strong>{m.method}</strong> {url} {m.protocol}</p>
+                    {unrollMap(m.headers)}
+                    <div style={{"margin": "20px 0"}}>{m.body}</div>
+                    {unrollMap(m.trailers)}
+                </span>;
+            case "http-response":
+                return <span className="type-http-response">
+                    <p style={{"marginBottom": "7px"}}>{m.protocol} <strong>{m.status}</strong></p>
+                    {unrollMap(m.headers)}
+                    <div style={{"margin": "20px 0"}}>{m.body}</div>
+                    {unrollMap(m.trailers)}
+                </span>;
+            default:
+                return connectionMessage.content;
+        }
+    }
+
+    connectionsActions(connectionMessage) {
+        if (connectionMessage.metadata == null || connectionMessage.metadata["reproducers"] === undefined) {
+            return null;
+        }
+
+        return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) =>
+            <Button size="sm" key={actionName + "_button"} onClick={() => {
+                this.setState({
+                    messageActionDialog: <MessageAction actionName={actionName} actionValue={actionValue}
+                                                        onHide={() => this.setState({messageActionDialog: null})}/>
+                });
+            }}>{actionName}</Button>
+        );
+    }
+
     render() {
         let content = this.state.connectionContent;
 
-        if (content === null) {
-            return <div>nope</div>;
+        if (content == null) {
+            return <div>select a connection to view</div>;
         }
 
         let payload = content.map((c, i) =>
-            <span key={`content-${i}`} className={c.from_client ? "from-client" : "from-server"}>
-                {c.content}
-            </span>
+            <div key={`content-${i}`}
+                 className={classNames("connection-message", c.from_client ? "from-client" : "from-server")}>
+                <div className="connection-message-header container-fluid">
+                    <div className="row">
+                        <div className="connection-message-info col">
+                            <span><strong>offset</strong>: {c.index}</span> | <span><strong>timestamp</strong>: {c.timestamp}
+                        </span> | <span><strong>retransmitted</strong>: {c["is_retransmitted"] ? "yes" : "no"}</span>
+                        </div>
+                        <div className="connection-message-actions col-auto">{this.connectionsActions(c)}</div>
+                    </div>
+                </div>
+                <div className="connection-message-label">{c.from_client ? "client" : "server"}</div>
+                <div
+                    className={classNames("message-content", this.state.decoded ? "message-parsed" : "message-original")}>
+                    {this.state.tryParse && this.state.format === "default" ? this.tryParseConnectionMessage(c) : c.content}
+                </div>
+            </div>
         );
 
         return (
             <div className="connection-content">
-                <div className="connection-content-options">
-                    <Dropdown onSelect={this.setFormat} >
-                        <Dropdown.Toggle size="sm" id="dropdown-basic">
-                            format
-                        </Dropdown.Toggle>
-
-                        <Dropdown.Menu>
-                            <Dropdown.Item eventKey="default" active={this.state.format === "default"}>plain</Dropdown.Item>
-                            <Dropdown.Item eventKey="hex" active={this.state.format === "hex"}>hex</Dropdown.Item>
-                            <Dropdown.Item eventKey="hexdump" active={this.state.format === "hexdump"}>hexdump</Dropdown.Item>
-                            <Dropdown.Item eventKey="base32" active={this.state.format === "base32"}>base32</Dropdown.Item>
-                            <Dropdown.Item eventKey="base64" active={this.state.format === "base64"}>base64</Dropdown.Item>
-                            <Dropdown.Item eventKey="ascii" active={this.state.format === "ascii"}>ascii</Dropdown.Item>
-                            <Dropdown.Item eventKey="binary" active={this.state.format === "binary"}>binary</Dropdown.Item>
-                            <Dropdown.Item eventKey="decimal" active={this.state.format === "decimal"}>decimal</Dropdown.Item>
-                            <Dropdown.Item eventKey="octal" active={this.state.format === "octal"}>octal</Dropdown.Item>
-                        </Dropdown.Menu>
-                    </Dropdown>
-
-
+                <div className="connection-content-header container-fluid">
+                    <Row>
+                        <div className="header-info col">
+                            <span><strong>flow</strong>: {this.props.connection.ip_src}:{this.props.connection.port_src} -> {this.props.connection.ip_dst}:{this.props.connection.port_dst}</span>
+                            <span> | <strong>timestamp</strong>: {this.props.connection.started_at}</span>
+                        </div>
+                        <div className="header-actions col-auto">
+                            <Dropdown onSelect={this.setFormat}>
+                                <Dropdown.Toggle size="sm" id="connection-content-format">
+                                    format
+                                </Dropdown.Toggle>
+
+                                <Dropdown.Menu>
+                                    <Dropdown.Item eventKey="default"
+                                                   active={this.state.format === "default"}>plain</Dropdown.Item>
+                                    <Dropdown.Item eventKey="hex"
+                                                   active={this.state.format === "hex"}>hex</Dropdown.Item>
+                                    <Dropdown.Item eventKey="hexdump"
+                                                   active={this.state.format === "hexdump"}>hexdump</Dropdown.Item>
+                                    <Dropdown.Item eventKey="base32"
+                                                   active={this.state.format === "base32"}>base32</Dropdown.Item>
+                                    <Dropdown.Item eventKey="base64"
+                                                   active={this.state.format === "base64"}>base64</Dropdown.Item>
+                                    <Dropdown.Item eventKey="ascii"
+                                                   active={this.state.format === "ascii"}>ascii</Dropdown.Item>
+                                    <Dropdown.Item eventKey="binary"
+                                                   active={this.state.format === "binary"}>binary</Dropdown.Item>
+                                    <Dropdown.Item eventKey="decimal"
+                                                   active={this.state.format === "decimal"}>decimal</Dropdown.Item>
+                                    <Dropdown.Item eventKey="octal"
+                                                   active={this.state.format === "octal"}>octal</Dropdown.Item>
+                                </Dropdown.Menu>
+                            </Dropdown>
+
+                            <Dropdown>
+                                <Dropdown.Toggle size="sm" id="connection-content-view">
+                                    view_as
+                                </Dropdown.Toggle>
+
+                                <Dropdown.Menu>
+                                    <Dropdown.Item eventKey="default" active={true}>default</Dropdown.Item>
+                                </Dropdown.Menu>
+
+                            </Dropdown>
+
+                            <Dropdown>
+                                <Dropdown.Toggle size="sm" id="connection-content-download">
+                                    download_as
+                                </Dropdown.Toggle>
+
+                                <Dropdown.Menu>
+                                    <Dropdown.Item eventKey="nl_separated">nl_separated</Dropdown.Item>
+                                    <Dropdown.Item eventKey="only_client">only_client</Dropdown.Item>
+                                    <Dropdown.Item eventKey="only_server">only_server</Dropdown.Item>
+                                </Dropdown.Menu>
+
+                            </Dropdown>
+                        </div>
+                    </Row>
                 </div>
 
                 <pre>{payload}</pre>
+                {this.state.messageActionDialog}
             </div>
         );
     }