Frontend checkpoint

10 files changed, 294 insertions, 0 deletions

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
new file mode 100644
index 0000000..4d80da5
--- /dev/null
+++ b/frontend/src/views/App.js
@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import Header from "./Header";
+import './App.scss';
+import MainPane from "./MainPane";
+import Footer from "./Footer";
+import {Route, BrowserRouter as Router, Switch} from "react-router-dom";
+
+class App extends Component {
+
+    render() {
+        return (
+            <div className="app">
+                <Router>
+                    <Header/>
+                    <Switch>
+                        <Route path="/" children={<MainPane/>} />
+                        <Route path="/connection/:id" children={<MainPane/>} />
+                    </Switch>
+                    <Footer/>
+                </Router>
+            </div>
+        );
+    }
+}
+
+export default App;
diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss
new file mode 100644
index 0000000..2ee17ac
--- /dev/null
+++ b/frontend/src/views/App.scss
@@ -0,0 +1,2 @@
+.app {
+}
\ No newline at end of file
diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
new file mode 100644
index 0000000..5876a40
--- /dev/null
+++ b/frontend/src/views/Connections.js
@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import './Connections.scss';
+import axios from 'axios'
+import Connection from "../components/Connection";
+import {Link} from "react-router-dom";
+import Table from 'react-bootstrap/Table';
+
+class Connections extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            connections: [],
+        };
+    }
+
+
+    componentDidMount() {
+        axios.get("/api/connections").then(res => this.setState({connections: res.data}))
+    }
+
+    render() {
+        let connection = {
+            "id": "5dd95ff0fe7ae01ae7f419c2",
+            "ip_src": "10.62.82.1",
+            "ip_dst": "10.62.82.2",
+            "port_src": 59113,
+            "port_dst": 23179,
+            "started_at": "2019-11-23T16:36:00.1Z",
+            "closed_at": "2019-11-23T16:36:00.971Z",
+            "client_bytes": 331,
+            "server_bytes": 85,
+            "client_documents": 1,
+            "server_documents": 1,
+            "processed_at": "2020-04-21T17:10:29.532Z",
+            "matched_rules": [],
+            "hidden": false,
+            "marked": true,
+            "comment": "",
+            "service": {
+                "port": 23179,
+                "name": "kaboom",
+                "color": "#3C6D3C",
+                "notes": "wdddoddddddw"
+            }
+        }
+
+        return (
+            <div className="connections">
+                <Table striped hover>
+                    <thead>
+                    <tr>
+                        <th>service</th>
+                        <th>srcip</th>
+                        <th>dstip</th>
+                        <th>srcport</th>
+                        <th>dstport</th>
+                        <th>duration</th>
+                        <th>up</th>
+                        <th>down</th>
+                        <th>actions</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>1</td>
+                        <td>Mark</td>
+                        <td>Otto</td>
+                        <td>@mdo</td>
+                    </tr>
+                    <tr>
+                        <td>2</td>
+                        <td>Jacob</td>
+                        <td>Thornton</td>
+                        <td>@fat</td>
+                    </tr>
+                    <tr>
+                        <td>3</td>
+                        <td colSpan="2">Larry the Bird</td>
+                        <td>@twitter</td>
+                    </tr>
+                    </tbody>
+                </Table>
+
+                {
+                    this.state.connections.map(c =>
+                        <Link to={"/connection/" + c.id}><Connection data={c} /></Link>
+                    )
+                }
+            </div>
+        );
+    }
+
+}
+
+
+export default Connections;
diff --git a/frontend/src/views/Connections.scss b/frontend/src/views/Connections.scss
new file mode 100644
index 0000000..da74e11
--- /dev/null
+++ b/frontend/src/views/Connections.scss
@@ -0,0 +1,13 @@
+@import '../colors.scss';
+
+.connections {
+  background-color: $color-primary-3;
+  padding: 10px 10px 10px 10px;
+
+  height: 100%;
+  overflow: auto;
+
+  .table {
+    color: $color-primary-4;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/views/Footer.js b/frontend/src/views/Footer.js
new file mode 100644
index 0000000..b6ffd9d
--- /dev/null
+++ b/frontend/src/views/Footer.js
@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+import './Footer.scss';
+
+class Footer extends Component {
+
+    render() {
+        return (
+            <footer className="footer container-fluid">
+                <div className="row">
+                    <div className="col-12">
+                        <div className="footer-timeline">timeline</div>
+                    </div>
+                </div>
+            </footer>
+        )
+    }
+}
+
+export default Footer;
diff --git a/frontend/src/views/Footer.scss b/frontend/src/views/Footer.scss
new file mode 100644
index 0000000..9a8cacb
--- /dev/null
+++ b/frontend/src/views/Footer.scss
@@ -0,0 +1,14 @@
+@import '../colors.scss';
+
+.footer {
+  padding: 15px 30px;
+
+  >.row {
+    background-color: $color-primary-0;
+  }
+
+  .footer-timeline {
+    height: 100px;
+  }
+
+}
\ No newline at end of file
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
new file mode 100644
index 0000000..b3f919b
--- /dev/null
+++ b/frontend/src/views/Header.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import Typed from 'typed.js';
+import './Header.scss';
+
+class Header extends Component {
+
+    componentDidMount() {
+        const options = {
+            strings: ["caronte$ "],
+            typeSpeed: 50,
+            cursorChar: "❚"
+        };
+        this.typed = new Typed(this.el, options);
+    }
+
+    componentWillUnmount() {
+        this.typed.destroy();
+    }
+
+    render() {
+        return (
+            <header className="header container-fluid">
+                <div className="row">
+                    <div className="col">
+                        <h1 className="header-title type-wrap">
+                            <span style={{ whiteSpace: 'pre' }} ref={(el) => { this.el = el; }} />
+                        </h1>
+                    </div>
+                    <div className="col">
+                        <div className="header-buttons">
+                            <button className="btn-primary">
+                                ➕ pcaps
+                            </button>
+                            <button className="btn-primary">
+                                ➕ rules
+                            </button>
+                            <button className="btn-primary">
+                                ➕ services
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        )
+    }
+}
+
+export default Header;
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
new file mode 100644
index 0000000..16c2dbd
--- /dev/null
+++ b/frontend/src/views/Header.scss
@@ -0,0 +1,18 @@
+@import '../colors.scss';
+
+.header {
+  padding: 15px 30px;
+
+  >.row {
+    background-color: $color-primary-0;
+  }
+
+  .header-title {
+    margin: 5px 0 5px -5px;
+  }
+
+  .header-buttons {
+    margin: 5px 0;
+    text-align: right;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js
new file mode 100644
index 0000000..88b5376
--- /dev/null
+++ b/frontend/src/views/MainPane.js
@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import './MainPane.scss';
+import Connections from "./Connections";
+import ConnectionContent from "../components/ConnectionContent";
+import {withRouter} from "react-router-dom";
+import axios from 'axios'
+
+class MainPane extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            id: null,
+        };
+    }
+
+    componentDidUpdate() {
+        if (this.props.match.params.id !== this.state.id) {
+            const id = this.props.match.params.id;
+            this.setState({id: id});
+
+            axios.get(`/api/streams/${id}`).then(res => this.setState({connectionContent: res.data}))
+
+
+        }
+    }
+
+    componentDidMount() {
+    }
+
+    render() {
+        return (
+            <div className="main-pane">
+                <div className="container-fluid">
+                    <div className="row">
+                        <div className="col-md-6 pane">
+                            <Connections/>
+                        </div>
+                        <div className="col-md-6 pl-0 pane">
+                            <ConnectionContent connectionPayload={this.state.connectionContent}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default withRouter(MainPane);
diff --git a/frontend/src/views/MainPane.scss b/frontend/src/views/MainPane.scss
new file mode 100644
index 0000000..c1a2f7f
--- /dev/null
+++ b/frontend/src/views/MainPane.scss
@@ -0,0 +1,9 @@
+.main-pane {
+
+  .pane {
+    height: calc(100vh - 210px);
+    position: relative;
+  }
+
+
+}
\ No newline at end of file