From ec949ffea86a14526a7142d048022a4a07f684ff Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Wed, 16 Sep 2020 15:41:04 +0200 Subject: Improve frontend connection visualization --- frontend/src/components/MessageAction.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 frontend/src/components/MessageAction.scss (limited to 'frontend/src/components/MessageAction.scss') 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 -- 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/components/MessageAction.scss') 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]) => - ); @@ -115,8 +112,9 @@ class ConnectionContent extends Component {
{c.from_client ? "client" : "server"}
-
- {this.state.decoded ? this.tryParseConnectionMessage(c) : c.content} +
+ {this.state.tryParse && this.state.format === "default" ? this.tryParseConnectionMessage(c) : c.content}
); @@ -129,25 +127,55 @@ class ConnectionContent extends Component { 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 + plain + hex + hexdump + base32 + base64 + ascii + binary + decimal + octal + + + + + + view_as + + + + default - + + + + + download_as + + + + nl_separated + only_client + only_server +
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss index 6354bee..8ee31ec 100644 --- a/frontend/src/components/ConnectionContent.scss +++ b/frontend/src/components/ConnectionContent.scss @@ -11,6 +11,11 @@ overflow-x: hidden; height: calc(100% - 31px); padding: 0 10px; + + p { + margin: 0; + padding: 0; + } } .connection-message { @@ -45,13 +50,6 @@ padding: 10px; } - .message-parsed { - p { - margin: 0; - padding: 0; - } - } - &:hover .connection-message-actions { display: block; } @@ -96,7 +94,13 @@ .header-info { padding-top: 5px; padding-left: 20px; - font-size: 13px; + font-size: 12px; + } + + .header-actions { + .dropdown { + display: inline-block; + } } } diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js index 66350c6..2c85d84 100644 --- a/frontend/src/components/MessageAction.js +++ b/frontend/src/components/MessageAction.js @@ -4,7 +4,21 @@ import {Button, FormControl, InputGroup, Modal} from "react-bootstrap"; class MessageAction extends Component { + constructor(props) { + super(props); + this.state = { + copyButtonText: "copy" + }; + this.actionValue = React.createRef(); + this.copyActionValue = this.copyActionValue.bind(this); + } + copyActionValue() { + this.actionValue.current.select(); + document.execCommand('copy'); + this.setState({copyButtonText: "copied!"}); + setTimeout(() => this.setState({copyButtonText: "copy"}), 3000); + } render() { return ( @@ -21,20 +35,13 @@ class MessageAction extends Component { -
- 
-                            {this.props.actionValue}
-
-
- - {/**/} - {/* */} - {/**/} + + + - + diff --git a/frontend/src/components/MessageAction.scss b/frontend/src/components/MessageAction.scss index df3af8d..f3a8772 100644 --- a/frontend/src/components/MessageAction.scss +++ b/frontend/src/components/MessageAction.scss @@ -1,11 +1,8 @@ @import '../colors.scss'; .message-action-value { - pre { - font-size: 13px; - padding: 15px; - background-color: $color-primary-2; - color: $color-primary-4; - } - + font-size: 13px; + padding: 15px; + background-color: $color-primary-2; + color: $color-primary-4; } \ No newline at end of file diff --git a/parsers/http_request_parser.go b/parsers/http_request_parser.go index cfac196..e2224b8 100644 --- a/parsers/http_request_parser.go +++ b/parsers/http_request_parser.go @@ -4,6 +4,7 @@ import ( "bufio" "bytes" "encoding/json" + log "github.com/sirupsen/logrus" "io/ioutil" "moul.io/http2curl" "net/http" @@ -41,12 +42,13 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata { return nil } var body string - if request.Body != nil { - if buffer, err := ioutil.ReadAll(request.Body); err == nil { - body = string(buffer) - } - _ = request.Body.Close() + if buffer, err := ioutil.ReadAll(request.Body); err == nil { + body = string(buffer) + } else { + log.WithError(err).Error("failed to read body in http_request_parser") + return nil } + _ = request.Body.Close() _ = request.ParseForm() return HttpRequestMetadata{ @@ -62,18 +64,21 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata { Body: body, Trailer: JoinArrayMap(request.Trailer), Reproducers: HttpRequestMetadataReproducers{ - CurlCommand: curlCommand(request), + CurlCommand: curlCommand(content), RequestsCode: requestsCode(request), FetchRequest: fetchRequest(request, body), }, } } -func curlCommand(request *http.Request) string { +func curlCommand(content []byte) string { + // a new reader is required because all the body is read before and GetBody() doesn't works + reader := bufio.NewReader(bytes.NewReader(content)) + request, _ := http.ReadRequest(reader) if command, err := http2curl.GetCurlCommand(request); err == nil { return command.String() } else { - return "invalid-request" + return err.Error() } } diff --git a/parsers/http_response_parser.go b/parsers/http_response_parser.go index a639dec..1770116 100644 --- a/parsers/http_response_parser.go +++ b/parsers/http_response_parser.go @@ -4,6 +4,7 @@ import ( "bufio" "bytes" "compress/gzip" + log "github.com/sirupsen/logrus" "io/ioutil" "net/http" ) @@ -33,23 +34,27 @@ func (p HttpResponseParser) TryParse(content []byte) Metadata { } var body string var compressed bool - if response.Body != nil { - switch response.Header.Get("Content-Encoding") { - case "gzip": - if gzipReader, err := gzip.NewReader(response.Body); err == nil { - if buffer, err := ioutil.ReadAll(gzipReader); err == nil { - body = string(buffer) - compressed = true - } - _ = gzipReader.Close() - } - default: - if buffer, err := ioutil.ReadAll(response.Body); err == nil { + switch response.Header.Get("Content-Encoding") { + case "gzip": + if gzipReader, err := gzip.NewReader(response.Body); err == nil { + if buffer, err := ioutil.ReadAll(gzipReader); err == nil { body = string(buffer) + compressed = true + } else { + log.WithError(err).Error("failed to read gzipped body in http_response_parser") + return nil } + _ = gzipReader.Close() + } + default: + if buffer, err := ioutil.ReadAll(response.Body); err == nil { + body = string(buffer) + } else { + log.WithError(err).Error("failed to read body in http_response_parser") + return nil } - _ = response.Body.Close() } + _ = response.Body.Close() var location string if locationUrl, err := response.Location(); err == nil { -- cgit v1.2.3-70-g09d2