Complete setup page

7 files changed, 268 insertions, 8 deletions

diff --git a/frontend/src/components/panels/ConfigurationPane.js b/frontend/src/components/panels/ConfigurationPane.js
new file mode 100644
index 0000000..10309f6
--- /dev/null
+++ b/frontend/src/components/panels/ConfigurationPane.js
@@ -0,0 +1,162 @@
+import React, {Component} from 'react';
+import './common.scss';
+import './ConfigurationPane.scss';
+import LinkPopover from "../objects/LinkPopover";
+import {Col, Container, Row} from "react-bootstrap";
+import InputField from "../fields/InputField";
+import TextField from "../fields/TextField";
+import ButtonField from "../fields/ButtonField";
+import CheckField from "../fields/CheckField";
+import {createCurlCommand} from "../../utils";
+import Table from "react-bootstrap/Table";
+import validation from "../../validation";
+import backend from "../../backend";
+
+class ConfigurationPane extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            settings: {
+                "config": {
+                    "server_address": "",
+                    "flag_regex": "",
+                    "auth_required": false
+                },
+                "accounts": {
+                }
+            },
+            newUsername: "",
+            newPassword: ""
+        };
+    }
+
+    saveSettings = () => {
+        if (this.validateSettings(this.state.settings)) {
+            backend.post("/setup", this.state.settings).then(_ => {
+                this.props.onConfigured();
+            }).catch(res => {
+                this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)});
+            });
+        }
+    };
+
+    validateSettings = (settings) => {
+        let valid = true;
+        if (!validation.isValidAddress(settings.config.server_address, true)) {
+            this.setState({serverAddressError: "invalid ip_address"});
+            valid = false;
+        }
+        if (settings.config.flag_regex.length < 8) {
+            this.setState({flagRegexError: "flag_regex.length < 8"});
+            valid = false;
+        }
+
+        return valid;
+    };
+
+    updateParam = (callback) => {
+        callback(this.state.settings);
+        this.setState({settings: this.state.settings});
+    };
+
+    addAccount = () => {
+        if (this.state.newUsername.length !== 0 && this.state.newPassword.length !== 0) {
+            const settings = this.state.settings;
+            settings.accounts[this.state.newUsername] = this.state.newPassword;
+
+            this.setState({
+                newUsername: "",
+                newPassword: "",
+                settings: settings
+            });
+        } else {
+            this.setState({
+                newUsernameActive: this.state.newUsername.length === 0,
+                newPasswordActive: this.state.newPassword.length === 0
+            });
+        }
+    };
+
+    render() {
+        const settings = this.state.settings;
+        const curlCommand = createCurlCommand("/setup", "POST", settings);
+
+        const accounts = Object.entries(settings.accounts).map(([username, password]) =>
+            <tr key={username}>
+                <td>{username}</td>
+                <td><LinkPopover text="******" content={password} /></td>
+                <td><ButtonField variant="red" small rounded name="delete"
+                                 onClick={() => this.updateParam((s) => delete s.accounts[username]) }/></td>
+            </tr>).concat(<tr key={"new_account"}>
+            <td><InputField value={this.state.newUsername} small active={this.state.newUsernameActive}
+                            onChange={(v) => this.setState({newUsername: v})} /></td>
+            <td><InputField value={this.state.newPassword} small active={this.state.newPasswordActive}
+                            onChange={(v) => this.setState({newPassword: v})} /></td>
+            <td><ButtonField variant="green" small rounded name="add" onClick={this.addAccount}/></td>
+        </tr>);
+
+        return (
+            <div className="configuration-pane">
+                <div className="pane">
+                    <div className="pane-container">
+                        <div className="pane-section">
+                            <div className="section-header">
+                                <span className="api-request">POST /setup</span>
+                                <span className="api-response"><LinkPopover text={this.state.setupStatusCode}
+                                                                            content={this.state.setupResponse}
+                                                                            placement="left" /></span>
+                            </div>
+
+                            <div className="section-content">
+                                <Container className="p-0">
+                                    <Row>
+                                        <Col>
+                                            <InputField name="server_address" value={settings.config.server_address}
+                                                        error={this.state.serverAddressError}
+                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)} />
+                                            <InputField name="flag_regex" value={settings.config.flag_regex}
+                                                        onChange={(v) => this.updateParam((s) => s.config.flag_regex = v)}
+                                                        error={this.state.flagRegexError} />
+                                            <div style={{"marginTop": "10px"}}>
+                                                <CheckField checked={settings.config.auth_required} name="auth_required"
+                                                            onChange={(v) => this.updateParam((s) => s.config.auth_required = v)}/>
+                                            </div>
+
+                                        </Col>
+
+                                        <Col>
+                                            accounts:
+                                            <div className="section-table">
+                                                <Table borderless size="sm">
+                                                    <thead>
+                                                    <tr>
+                                                        <th>username</th>
+                                                        <th>password</th>
+                                                        <th>actions</th>
+                                                    </tr>
+                                                    </thead>
+                                                    <tbody>
+                                                    {accounts}
+                                                    </tbody>
+                                                </Table>
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </Container>
+
+                                <TextField value={curlCommand} rows={4} readonly small={true}/>
+                            </div>
+
+                            <div className="section-footer">
+                                <ButtonField variant="green" name="save" bordered onClick={this.saveSettings} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ConfigurationPane;
diff --git a/frontend/src/components/panels/ConfigurationPane.scss b/frontend/src/components/panels/ConfigurationPane.scss
new file mode 100644
index 0000000..955d2bc
--- /dev/null
+++ b/frontend/src/components/panels/ConfigurationPane.scss
@@ -0,0 +1,19 @@
+@import '../../colors';
+
+.configuration-pane {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-primary-0;
+
+  .pane {
+    flex-basis: 900px;
+    margin-bottom: 200px;
+  }
+
+  .pane-container {
+    padding-bottom: 1px;
+  }
+
+}
diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js
new file mode 100644
index 0000000..3202d6d
--- /dev/null
+++ b/frontend/src/components/panels/MainPane.js
@@ -0,0 +1,56 @@
+import React, {Component} from 'react';
+import './common.scss';
+import './MainPane.scss';
+import Connections from "../../views/Connections";
+import ConnectionContent from "../ConnectionContent";
+import {Route, Switch, withRouter} from "react-router-dom";
+import PcapPane from "./PcapPane";
+import backend from "../../backend";
+import RulePane from "./RulePane";
+import ServicePane from "./ServicePane";
+
+class MainPane extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedConnection: null,
+            loading: false
+        };
+    }
+
+    componentDidMount() {
+        const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/);
+        if (match != null) {
+            this.setState({loading: true});
+            backend.get(`/api/connections/${match[1]}`)
+                .then(res => this.setState({selectedConnection: res.json, loading: false}))
+                .catch(error => console.log(error));
+        }
+    }
+
+    render() {
+        return (
+            <div className="main-pane">
+                <div className="pane connections-pane">
+                    {
+                        !this.state.loading &&
+                        <Connections onSelected={(c) => this.setState({selectedConnection: c})}
+                                     initialConnection={this.state.selectedConnection} />
+                    }
+                </div>
+                <div className="pane details-pane">
+                    <Switch>
+                        <Route path="/pcaps" children={<PcapPane />} />
+                        <Route path="/rules" children={<RulePane />} />
+                        <Route path="/services" children={<ServicePane />} />
+                        <Route exact path="/connections/:id" children={<ConnectionContent connection={this.state.selectedConnection} />} />
+                        <Route children={<ConnectionContent />} />
+                    </Switch>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default withRouter(MainPane);
diff --git a/frontend/src/components/panels/MainPane.scss b/frontend/src/components/panels/MainPane.scss
new file mode 100644
index 0000000..04be347
--- /dev/null
+++ b/frontend/src/components/panels/MainPane.scss
@@ -0,0 +1,23 @@
+@import '../../colors';
+
+.main-pane {
+  height: 100%;
+  display: flex;
+  padding: 0 15px;
+  background-color: $color-primary-2;
+
+  .pane {
+    flex: 1;
+  }
+
+  .connections-pane {
+    flex: 1 0;
+    margin-right: 7.5px;
+  }
+
+  .details-pane {
+    flex: 1 1;
+    margin-left: 7.5px;
+  }
+
+}
diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js
index e83e3da..7b3fde6 100644
--- a/frontend/src/components/panels/PcapPane.js
+++ b/frontend/src/components/panels/PcapPane.js
@@ -109,7 +109,7 @@ class PcapPane extends Component {
 
     render() {
         let sessions = this.state.sessions.map(s =>
-            <tr className="table-row">
+            <tr key={s.id} className="table-row">
                 <td>{s["id"].substring(0, 8)}</td>
                 <td>{dateTimeToTime(s["started_at"])}</td>
                 <td>{durationBetween(s["started_at"], s["completed_at"])}</td>
@@ -119,8 +119,7 @@ class PcapPane extends Component {
                 <td><LinkPopover text={Object.keys(s["packets_per_service"]).length + " services"}
                                  content={JSON.stringify(s["packets_per_service"])}
                                  placement="left"/></td>
-                <td className="table-cell-action"><a target="_blank" rel="noopener noreferrer"
-                                                     href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a>
+                <td className="table-cell-action"><a href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a>
                 </td>
             </tr>
         );
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js
index 7cb849c..49364d2 100644
--- a/frontend/src/components/panels/RulePane.js
+++ b/frontend/src/components/panels/RulePane.js
@@ -13,6 +13,7 @@ import ChoiceField from "../fields/ChoiceField";
 import ButtonField from "../fields/ButtonField";
 import validation from "../../validation";
 import LinkPopover from "../objects/LinkPopover";
+import {randomClassName} from "../../utils";
 
 const classNames = require('classnames');
 const _ = require('lodash');
@@ -220,7 +221,7 @@ class RulePane extends Component {
         const pattern = this.state.selectedPattern || this.state.newPattern;
 
         let rules = this.state.rules.map(r =>
-            <tr onClick={() => {
+            <tr key={r.id} onClick={() => {
                 this.reset();
                 this.setState({selectedRule: _.cloneDeep(r)});
             }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id })}>
@@ -235,7 +236,7 @@ class RulePane extends Component {
             rule.patterns.concat(this.state.newPattern) :
             rule.patterns
         ).map(p => p === pattern ?
-            <tr>
+            <tr key={randomClassName()}>
                 <td style={{"width": "500px"}}>
                     <InputField small active={this.state.patternRegexFocused} value={pattern.regex}
                                 onChange={(v) => {
@@ -272,7 +273,7 @@ class RulePane extends Component {
                 </td>
             </tr>
             :
-            <tr className="row-small">
+            <tr key={"new_pattern"} className="row-small">
                 <td>{p.regex}</td>
                 <td>{p.flags.caseless ? "yes": "no"}</td>
                 <td>{p.flags.dot_all ? "yes": "no"}</td>
@@ -377,7 +378,7 @@ class RulePane extends Component {
                                 <thead>
                                 <tr>
                                     <th>regex</th>
-                                    <th>Aa</th>
+                                    <th>!Aa</th>
                                     <th>.*</th>
                                     <th>\n+</th>
                                     <th>UTF8</th>
diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js
index b21ad6c..eaefa64 100644
--- a/frontend/src/components/panels/ServicePane.js
+++ b/frontend/src/components/panels/ServicePane.js
@@ -100,7 +100,7 @@ class ServicePane extends Component {
         const service = this.state.currentService;
 
         let services = this.state.services.map(s =>
-            <tr onClick={() => {
+            <tr key={s.port} onClick={() => {
                 this.reset();
                 this.setState({isUpdate: true, currentService: _.cloneDeep(s)});
             }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port })}>