aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/views')
-rw-r--r--frontend/src/views/App.js26
-rw-r--r--frontend/src/views/App.scss2
-rw-r--r--frontend/src/views/Connections.js96
-rw-r--r--frontend/src/views/Connections.scss13
-rw-r--r--frontend/src/views/Footer.js19
-rw-r--r--frontend/src/views/Footer.scss14
-rw-r--r--frontend/src/views/Header.js48
-rw-r--r--frontend/src/views/Header.scss18
-rw-r--r--frontend/src/views/MainPane.js49
-rw-r--r--frontend/src/views/MainPane.scss9
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-23 00:06:35 +0000