Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}
@@ -106,7 +111,7 @@ class Connection extends Component {
- {duration}s
+ {duration}
|
{conn.client_bytes} |
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 2100a68..51dbb67 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,7 +1,11 @@
import React, {Component} from 'react';
import './ConnectionContent.scss';
-import {Dropdown, Button} from 'react-bootstrap';
+import {Button, Dropdown, Row} from 'react-bootstrap';
import axios from 'axios';
+import {timestampToDateTime, timestampToTime} from "../utils";
+import MessageAction from "./MessageAction";
+
+const classNames = require('classnames');
class ConnectionContent extends Component {
@@ -12,6 +16,7 @@ class ConnectionContent extends Component {
connectionContent: null,
format: "default",
decoded: false,
+ messageActionDialog: null
};
this.validFormats = ["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"];
@@ -42,62 +47,115 @@ class ConnectionContent extends Component {
this.setState({decoded: !this.state.decoded});
}
+ tryParseConnectionMessage(connectionMessage) {
+ if (connectionMessage.metadata == null) {
+ return connectionMessage.content;
+ }
+ if (connectionMessage["is_metadata_continuation"]) {
+ return
already parsed in previous messages;
+ }
+
+ let unrollMap = (obj) => obj == null ? null : Object.entries(obj).map(([key, value]) =>
+
{key}: {value}
+ );
+
+ let m = connectionMessage.metadata;
+ switch (m.type) {
+ case "http-request":
+ let url =
{m.host}{m.url};
+ return
+ {m.method} {url} {m.protocol}
+ {unrollMap(m.headers)}
+ {m.body}
+ {unrollMap(m.trailers)}
+ ;
+ case "http-response":
+ return
+ {m.protocol} {m.status}
+ {unrollMap(m.headers)}
+ {m.body}
+ {unrollMap(m.trailers)}
+ ;
+ 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]) =>
+
+ );
+ }
+
render() {
let content = this.state.connectionContent;
- if (content === null) {
- return
nope
;
+ if (content == null) {
+ return
select a connection to view
;
}
let payload = content.map((c, i) =>
-
- {c.from_client
- ?
- {c.content}
- :
- <>
- {c.decoded_content
- ?
- <>
- {c.content}
- {c.decoded_content}
-
- :
- {c.content}
- }
-
- }
-
+
+
+
+
+ offset: {c.index} | timestamp: {c.timestamp}
+ | retransmitted: {c["is_retransmitted"] ? "yes" : "no"}
+
+
{this.connectionsActions(c)}
+
+
+
{c.from_client ? "client" : "server"}
+
+ {this.state.decoded ? this.tryParseConnectionMessage(c) : c.content}
+
+
);
return (
-
-
-
- format
-
-
-
- plain
- hex
- hexdump
- base32
- base64
- ascii
- binary
- decimal
- octal
-
-
-
-
-
-
-
+
+
+
+ flow: {this.props.connection.ip_src}:{this.props.connection.port_src} -> {this.props.connection.ip_dst}:{this.props.connection.port_dst}
+ | timestamp: {this.props.connection.started_at}
+
+
+
+
+ format
+
+
+
+ plain
+ hex
+ hexdump
+ base32
+ base64
+ ascii
+ binary
+ decimal
+ octal
+
+
+
+
+
+
+
{payload}
+ {this.state.messageActionDialog}
);
}
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
index 5a17066..6354bee 100644
--- a/frontend/src/components/ConnectionContent.scss
+++ b/frontend/src/components/ConnectionContent.scss
@@ -1,29 +1,104 @@
@import '../colors.scss';
.connection-content {
- background-color: $color-primary-3;
+ background-color: $color-primary-0;
+ padding: 10px 10px 0;
height: 100%;
- overflow: fixed;
pre {
- background-color: $color-primary-0;
- padding: 10px 20px;
word-break: break-word;
- max-width: 100%;
white-space: pre-wrap;
- height: 95%;
+ overflow-x: hidden;
+ height: calc(100% - 31px);
+ padding: 0 10px;
}
- .from-client {
- color: #d4e0fc;
- }
+ .connection-message {
+ border: 4px solid $color-primary-3;
+ border-top: 0;
+ margin: 10px 0;
+ position: relative;
+
+ .connection-message-header {
+ background-color: $color-primary-3;
+ height: 25px;
+
+ .connection-message-info {
+ font-size: 11px;
+ margin-left: -10px;
+ margin-top: 6px;
+ }
- .from-server {
- color: $color-secondary-4;
+ .connection-message-actions {
+ margin-right: -18px;
+ display: none;
- &:hover {
+ button {
+ margin: 0 3px;
+ font-size: 11px;
+ padding: 5px;
+ }
+ }
+ }
+
+ .message-content {
+ padding: 10px;
+ }
+
+ .message-parsed {
+ p {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ &:hover .connection-message-actions {
+ display: block;
+ }
+
+ .connection-message-label {
+ position: absolute;
background-color: $color-primary-3;
- border-top: 1px solid $color-primary-1;
+ top: 0;
+ padding: 10px 0;
+ font-size: 12px;
+
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
}
+
+ &.from-client {
+ color: $color-primary-4;
+ margin-right: 100px;
+
+ .connection-message-label {
+ right: -22px;
+ }
+ }
+
+ &.from-server {
+ color: $color-primary-4;
+ margin-left: 100px;
+
+ .connection-message-label {
+ left: -22px;
+ transform: rotate(-180deg);
+ }
+ }
+
}
+
+ .connection-content-header {
+ background-color: $color-primary-2;
+ padding: 0;
+ height: 31px;
+
+ .header-info {
+ padding-top: 5px;
+ padding-left: 20px;
+ font-size: 13px;
+ }
+ }
+
+
}
diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js
new file mode 100644
index 0000000..66350c6
--- /dev/null
+++ b/frontend/src/components/MessageAction.js
@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import './MessageAction.scss';
+import {Button, FormControl, InputGroup, Modal} from "react-bootstrap";
+
+class MessageAction extends Component {
+
+
+
+ render() {
+ return (
+
+
+
+ {this.props.actionName}
+
+
+
+
+
+ {this.props.actionValue}
+
+
+ );
+ }
+}
+
+export default MessageAction;
diff --git a/frontend/src/components/MessageAction.scss b/frontend/src/components/MessageAction.scss
new file mode 100644
index 0000000..df3af8d
--- /dev/null
+++ b/frontend/src/components/MessageAction.scss
@@ -0,0 +1,11 @@
+@import '../colors.scss';
+
+.message-action-value {
+ pre {
+ font-size: 13px;
+ padding: 15px;
+ background-color: $color-primary-2;
+ color: $color-primary-4;
+ }
+
+}
\ No newline at end of file
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 26c10d3..7381f69 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -59,3 +59,8 @@ export function timestampToTime(timestamp) {
let seconds = "0" + d.getSeconds();
return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
}
+
+export function timestampToDateTime(timestamp) {
+ let d = new Date(timestamp);
+ return d.toLocaleDateString() + " " + d.toLocaleTimeString();
+}
--
cgit v1.2.3-70-g09d2
From dfd6d543074b4a30c2fc990063ca69ebf8a734e1 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 16 Sep 2020 17:49:50 +0200
Subject: Fix body decoding bugs. Improve frontend
---
connection_streams_controller.go | 37 +++++++-----
frontend/src/components/ConnectionContent.js | 82 +++++++++++++++++---------
frontend/src/components/ConnectionContent.scss | 20 ++++---
frontend/src/components/MessageAction.js | 31 ++++++----
frontend/src/components/MessageAction.scss | 11 ++--
parsers/http_request_parser.go | 21 ++++---
parsers/http_response_parser.go | 31 ++++++----
7 files changed, 144 insertions(+), 89 deletions(-)
(limited to 'frontend/src')
diff --git a/connection_streams_controller.go b/connection_streams_controller.go
index c4876b1..9d73b0e 100644
--- a/connection_streams_controller.go
+++ b/connection_streams_controller.go
@@ -93,7 +93,7 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c
if clientBlocksIndex < len(clientStream.BlocksIndexes)-1 {
end = clientStream.BlocksIndexes[clientBlocksIndex+1]
} else {
- end = len(clientStream.Payload) - 1
+ end = len(clientStream.Payload)
}
size := uint64(end - start)
@@ -117,7 +117,7 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c
if serverBlocksIndex < len(serverStream.BlocksIndexes)-1 {
end = serverStream.BlocksIndexes[serverBlocksIndex+1]
} else {
- end = len(serverStream.Payload) - 1
+ end = len(serverStream.Payload)
}
size := uint64(end - start)
@@ -137,7 +137,18 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c
sideChanged, lastClient, lastServer = lastClient, false, true
}
- if sideChanged {
+ if !hasClientBlocks() {
+ clientDocumentIndex++
+ clientBlocksIndex = 0
+ clientStream = csc.getConnectionStream(c, connectionID, true, clientDocumentIndex)
+ }
+ if !hasServerBlocks() {
+ serverDocumentIndex++
+ serverBlocksIndex = 0
+ serverStream = csc.getConnectionStream(c, connectionID, false, serverDocumentIndex)
+ }
+
+ updateMetadata := func() {
metadata := parsers.Parse(contentChunkBuffer.Bytes())
var isMetadataContinuation bool
for _, elem := range payloadsBuffer {
@@ -149,28 +160,26 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c
payloadsBuffer = payloadsBuffer[:0]
contentChunkBuffer.Reset()
}
+
+ if sideChanged {
+ updateMetadata()
+ }
payloadsBuffer = append(payloadsBuffer, payload)
contentChunkBuffer.Write(lastContentSlice)
+ if clientStream.ID.IsZero() && serverStream.ID.IsZero() {
+ updateMetadata()
+ }
+
if globalIndex > format.Skip {
// problem: waste of time if the payload is discarded
payloads = append(payloads, payload)
}
if globalIndex > format.Skip+format.Limit {
// problem: the last chunk is not parsed, but can be ok because it is not finished
+ updateMetadata()
return payloads
}
-
- if !hasClientBlocks() {
- clientDocumentIndex++
- clientBlocksIndex = 0
- clientStream = csc.getConnectionStream(c, connectionID, true, clientDocumentIndex)
- }
- if !hasServerBlocks() {
- serverDocumentIndex++
- serverBlocksIndex = 0
- serverStream = csc.getConnectionStream(c, connectionID, false, serverDocumentIndex)
- }
}
return payloads
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 51dbb67..20ec92b 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
import './ConnectionContent.scss';
import {Button, Dropdown, Row} from 'react-bootstrap';
import axios from 'axios';
-import {timestampToDateTime, timestampToTime} from "../utils";
import MessageAction from "./MessageAction";
const classNames = require('classnames');
@@ -15,7 +14,7 @@ class ConnectionContent extends Component {
loading: false,
connectionContent: null,
format: "default",
- decoded: false,
+ tryParse: true,
messageActionDialog: null
};
@@ -43,16 +42,12 @@ class ConnectionContent extends Component {
}
}
- toggleDecoded() {
- this.setState({decoded: !this.state.decoded});
- }
-
tryParseConnectionMessage(connectionMessage) {
if (connectionMessage.metadata == null) {
return connectionMessage.content;
}
if (connectionMessage["is_metadata_continuation"]) {
- return
already parsed in previous messages;
+ return
**already parsed in previous messages**;
}
let unrollMap = (obj) => obj == null ? null : Object.entries(obj).map(([key, value]) =>
@@ -62,16 +57,17 @@ class ConnectionContent extends Component {
let m = connectionMessage.metadata;
switch (m.type) {
case "http-request":
- let url =
{m.host}{m.url};
+ let url =
{m.host}{m.url};
return
- {m.method} {url} {m.protocol}
+ {m.method} {url} {m.protocol}
{unrollMap(m.headers)}
{m.body}
{unrollMap(m.trailers)}
;
case "http-response":
return
- {m.protocol} {m.status}
+ {m.protocol} {m.status}
{unrollMap(m.headers)}
{m.body}
{unrollMap(m.trailers)}
@@ -87,9 +83,10 @@ class ConnectionContent extends Component {
}
return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) =>
-