diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/Connection.js | 7 | ||||
| -rw-r--r-- | frontend/src/components/ConnectionContent.js | 146 | ||||
| -rw-r--r-- | frontend/src/components/ConnectionContent.scss | 101 | ||||
| -rw-r--r-- | frontend/src/components/MessageAction.js | 45 | ||||
| -rw-r--r-- | frontend/src/components/MessageAction.scss | 11 |
5 files changed, 252 insertions, 58 deletions
diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js index e41f542..93c6438 100644 --- a/frontend/src/components/Connection.js +++ b/frontend/src/components/Connection.js @@ -57,6 +57,11 @@ class Connection extends Component { let closedAt = new Date(conn.closed_at); let processedAt = new Date(conn.processed_at); let duration = ((closedAt - startedAt) / 1000).toFixed(3); + if (duration > 1000 || duration < -1000) { + duration = "∞"; + } else { + duration += "s"; + } let timeInfo = <div> <span>Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}</span><br/> <span>Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}</span><br/> @@ -106,7 +111,7 @@ class Connection extends Component { <td className="clickable" onClick={this.props.onSelected}> <OverlayTrigger trigger={["focus", "hover"]} placement="right" overlay={popoverFor("duration", timeInfo)}> - <span className="test-tooltip">{duration}s</span> + <span className="test-tooltip">{duration}</span> </OverlayTrigger> </td> <td className="clickable" onClick={this.props.onSelected}>{conn.client_bytes}</td> 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 <span>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">{m.host}{m.url}</a></u></i>; + return <span className="type-http-request"> + <p style={{"margin-bottom": "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={{"margin-bottom": "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" 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.from_client - ? - <div id="content">{c.content}</div> - : - <> - {c.decoded_content - ? - <> - <div style={{display: this.state.decoded ? 'none':'inherit'}} id="content">{c.content}</div> - <div style={{display: this.state.decoded ? 'inherit':'none'}} id="decoded_content">{c.decoded_content}</div> - </> - : - <div id="content">{c.content}</div> - } - </> - } - </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.decoded ? 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> - <Button onClick={() => this.toggleDecoded()}>{this.state.decoded ? "Encode" : "Decode"}</Button> - - - </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="col-auto"> + <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> + <Button size="sm" onClick={() => this.toggleDecoded()}>{this.state.decoded ? "Encode" : "Decode"}</Button> + + + </Dropdown> + </div> + </Row> </div> <pre>{payload}</pre> + {this.state.messageActionDialog} </div> ); } 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 ( + <Modal + {...this.props} + show="true" + size="lg" + aria-labelledby="message-action-dialog" + centered + > + <Modal.Header> + <Modal.Title id="message-action-dialog"> + {this.props.actionName} + </Modal.Title> + </Modal.Header> + <Modal.Body> + <div className="message-action-value"> + <pre> + {this.props.actionValue} + </pre> + </div> + + {/*<InputGroup>*/} + {/* <FormControl as="textarea" className="message-action-value" readOnly={true}*/} + {/* style={{"height": "300px"}}*/} + {/* value={this.props.actionValue}/>*/} + {/*</InputGroup>*/} + </Modal.Body> + <Modal.Footer className="dialog-footer"> + <Button variant="green" onClick={this.copyActionValue}>copy</Button> + <Button variant="red" onClick={this.props.onHide}>close</Button> + </Modal.Footer> + </Modal> + ); + } +} + +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 |