Add connections display formats

3 files changed, 75 insertions, 17 deletions

diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
index d3003bd..5ad195d 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -58,4 +58,4 @@
   .arrow::after {
     border-right-color: $color-primary-4;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index db63cbe..ece4bd6 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,37 +1,90 @@
 import React, {Component} from 'react';
 import './ConnectionContent.scss';
-import {Dropdown} from 'react-bootstrap';
+import {Col, Container, Dropdown, Row} from 'react-bootstrap';
+import axios from 'axios';
+import {withRouter} from "react-router-dom";
+import {Redirect} from "react-router";
 
 class ConnectionContent extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            loading: false,
+            connectionContent: null,
+            format: "default"
+        };
+
+        this.validFormats = ["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"];
+        this.setFormat = this.setFormat.bind(this);
+    }
+
+    componentDidMount() {
+        if ('format' in this.props.match.params) {
+            this.setFormat(this.props.match.params.format);
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.props.connection !== null && (
+            this.props.connection !== prevProps.connection || this.state.format !== prevState.format)) {
+            this.setState({loading: true});
+            axios.get(`/api/streams/${this.props.connection.id}?format=${this.state.format}`).then(res => {
+                this.setState({
+                    connectionContent: res.data,
+                    loading: false
+                });
+            });
+        }
+    }
+
+    setFormat(format) {
+        if (this.validFormats.includes(format)) {
+            this.setState({format: format});
+        }
+    }
+
     render() {
-        let content = this.props.connectionPayload;
+        let content = this.state.connectionContent;
 
-        if (content === undefined) {
+        if (content === null) {
             return <div>nope</div>;
         }
 
-        let payload = content.map(c =>
-            <span key={c.id} className={c.from_client ? "from-client" : "from-server"} title="cccccc">
-                {c.content}
+        const format = this.state.format !== "default" ? `/${this.state.format}` : "";
+        const redirect = <Redirect push to={`/connections/${this.props.connection.id}${format}`}/>;
 
+        let payload = content.map((c, i) =>
+            <span key={`content-${i}`} className={c.from_client ? "from-client" : "from-server"} title="cccccc">
+                {c.content}
             </span>
         );
 
         return (
             <div className="connection-content">
                 <div className="connection-content-options">
-                    <Dropdown>
-                        <Dropdown.Toggle variant="success" id="dropdown-basic">
+                    <Container>
+                        <Row>
+                            <Col md={2}>ciao</Col>
+                        </Row>
+                    </Container>
+
+
+                    <Dropdown onSelect={this.setFormat} >
+                        <Dropdown.Toggle size="sm" id="dropdown-basic">
                             format
                         </Dropdown.Toggle>
 
                         <Dropdown.Menu>
-                            <Dropdown.Item href="#/action-1">plain</Dropdown.Item>
-                            <Dropdown.Item href="#/action-2">hex</Dropdown.Item>
-                            <Dropdown.Item href="#/action-3">hexdump</Dropdown.Item>
-                            <Dropdown.Item href="#/action-3">base32</Dropdown.Item>
-                            <Dropdown.Item href="#/action-3">base64</Dropdown.Item>
-                            <Dropdown.Item href="#/action-3">ascii</Dropdown.Item>
+                            <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>
 
@@ -40,6 +93,8 @@ class ConnectionContent extends Component {
 
                 <pre>{payload}</pre>
 
+                {redirect}
+
 
             </div>
         );
@@ -48,4 +103,4 @@ class ConnectionContent extends Component {
 }
 
 
-export default ConnectionContent;
+export default withRouter(ConnectionContent);
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
index 61d9f63..a1b4afd 100644
--- a/frontend/src/components/ConnectionContent.scss
+++ b/frontend/src/components/ConnectionContent.scss
@@ -8,7 +8,10 @@
   pre {
     background-color: $color-primary-0;
     padding: 10px 20px;
-    word-break: break-all;
+    word-break: break-word;
+    max-width: 100%;
+    white-space: pre-wrap;
+    height: 100%;
   }
 
   .from-client {