Add MainPane

7 files changed, 134 insertions, 14 deletions

diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 038ef8f..1f79ab8 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -27,6 +27,8 @@ import log from "../../log";
 import ButtonField from "../fields/ButtonField";
 import dispatcher from "../../dispatcher";
 
+const classNames = require('classnames');
+
 class ConnectionsPane extends Component {
 
     state = {
@@ -81,6 +83,11 @@ class ConnectionsPane extends Component {
                 this.loadServices().then(() => log.debug("Services reloaded after notification update"));
             }
         });
+
+        dispatcher.register("pulse_connections_view", payload => {
+            this.setState({pulseConnectionsView: true});
+            setTimeout(() => this.setState({pulseConnectionsView: false}), payload.duration);
+        });
     }
 
     connectionSelected = (c, doRedirect = true) => {
@@ -246,7 +253,7 @@ class ConnectionsPane extends Component {
         return (
             <div className="connections-container">
                 {this.state.showMoreRecentButton && <div className="most-recent-button">
-                    <ButtonField name="most_recent" variant="green" onClick={() => {
+                    <ButtonField name="most_recent" variant="green" bordered onClick={() => {
                         this.disableScrollHandler = true;
                         this.connectionsListRef.current.scrollTop = 0;
                         this.loadConnections({limit: this.queryLimit})
@@ -257,7 +264,8 @@ class ConnectionsPane extends Component {
                     }}/>
                 </div>}
 
-                <div className="connections" onScroll={this.handleScroll} ref={this.connectionsListRef}>
+                <div className={classNames("connections", {"connections-pulse": this.state.pulseConnectionsView})}
+                     onScroll={this.handleScroll} ref={this.connectionsListRef}>
                     <Table borderless size="sm">
                         <thead>
                         <tr>
diff --git a/frontend/src/components/panels/ConnectionsPane.scss b/frontend/src/components/panels/ConnectionsPane.scss
index 06f5827..59fe372 100644
--- a/frontend/src/components/panels/ConnectionsPane.scss
+++ b/frontend/src/components/panels/ConnectionsPane.scss
@@ -33,6 +33,9 @@
     z-index: 20;
     top: 45px;
     left: calc(50% - 50px);
-    background-color: red;
+  }
+
+  .connections-pulse {
+    animation: pulse 2s infinite;
   }
 }
diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js
index 74c859c..8aa8ad8 100644
--- a/frontend/src/components/panels/MainPane.js
+++ b/frontend/src/components/panels/MainPane.js
@@ -17,17 +17,91 @@
 
 import React, {Component} from 'react';
 import './common.scss';
-import './ServicesPane.scss';
+import './MainPane.scss';
+import Typed from "typed.js";
+import dispatcher from "../../dispatcher";
+import RulesPane from "./RulesPane";
+import StreamsPane from "./StreamsPane";
+import PcapsPane from "./PcapsPane";
+import ServicesPane from "./ServicesPane";
 
 class MainPane extends Component {
 
     state = {};
 
+    componentDidMount() {
+        const nl = "^600\n^400";
+        const options = {
+            strings: [
+                `welcome to caronte!^1000 the current version is ${this.props.version}` + nl +
+                "caronte is a network analyzer,^300 it is able to read pcaps and extract connections", // 0
+                "the left panel lists all connections that have already been closed" + nl +
+                "scrolling up the list will load the most recent connections,^300 downward the oldest ones", // 1
+                "by selecting a connection you can view its content,^300 which will be shown in the right panel" + nl +
+                "you can choose the display format,^300 or decide to download the connection content", // 2
+                "below there is the timeline,^300 which shows the number of connections per minute per service" + nl +
+                "you can use the sliding window to move the time range of the connections to be displayed", // 3
+                "there are also additional metrics,^300 selectable from the drop-down menu", // 4
+                "at the top are the filters,^300 which can be used to select only certain types of connections" + nl +
+                "you can choose which filters to display in the top bar from the filters window", // 5
+                "in the pcaps panel it is possible to analyze new pcaps,^300 or to see the pcaps already analyzed" + nl +
+                "you can load pcaps from your browser,^300 or process pcaps already present on the filesystem", // 6
+                "in the rules panel you can see the rules already created,^300 or create new ones" + nl +
+                "the rules inserted will be used only to label new connections, not those already analyzed" + nl +
+                "a connection is tagged if it meets all the requirements specified by the rule", // 7
+                "in the services panel you can assign new services or edit existing ones" + nl +
+                "each service is associated with a port number,^300 and will be shown in the connection list", // 8
+                "from the configuration panel you can change the settings of the frontend application", // 9
+                "that's all! and have fun!" + nl + "created by @eciavatta" // 10
+            ],
+            typeSpeed: 40,
+            cursorChar: "_",
+            backSpeed: 5,
+            smartBackspace: false,
+            backDelay: 1500,
+            preStringTyped: (arrayPos) => {
+                switch (arrayPos) {
+                    case 1:
+                        return dispatcher.dispatch("pulse_connections_view", {duration: 12000});
+                    case 2:
+                        return this.setState({backgroundPane: <StreamsPane/>});
+                    case 3:
+                        this.setState({backgroundPane: null});
+                        return dispatcher.dispatch("pulse_timeline", {duration: 12000});
+                    case 6:
+                        return this.setState({backgroundPane: <PcapsPane/>});
+                    case 7:
+                        return this.setState({backgroundPane: <RulesPane/>});
+                    case 8:
+                        return this.setState({backgroundPane: <ServicesPane/>});
+                    case 10:
+                        return this.setState({backgroundPane: null});
+                    default:
+                        return;
+                }
+            },
+        };
+        this.typed = new Typed(this.el, options);
+    }
+
+    componentWillUnmount() {
+        this.typed.destroy();
+    }
+
     render() {
         return (
-            <div className="pane-container main-pane">
-                <div className="pane-section">
-                    MainPane
+            <div className="pane-container">
+                <div className="main-pane">
+                    <div className="pane-section">
+                        <div className="tutorial">
+                            <span style={{whiteSpace: 'pre'}} ref={(el) => {
+                                this.el = el;
+                            }}/>
+                        </div>
+                    </div>
+                </div>
+                <div className="background-pane">
+                    {this.state.backgroundPane}
                 </div>
             </div>
         );
diff --git a/frontend/src/components/panels/MainPane.scss b/frontend/src/components/panels/MainPane.scss
index c8460f2..8f99b3c 100644
--- a/frontend/src/components/panels/MainPane.scss
+++ b/frontend/src/components/panels/MainPane.scss
@@ -1,5 +1,30 @@
 @import "../../colors";
 
-.main-pane {
+.pane-container {
+  background-color: $color-primary-0;
 
+  .main-pane {
+    position: absolute;
+    z-index: 50;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+
+    .tutorial {
+      flex-basis: 100%;
+      padding: 5px 10px;
+      text-align: center;
+      background-color: $color-primary-2;
+    }
+  }
+
+  .background-pane {
+    height: 100%;
+    opacity: 0.4;
+  }
 }
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index c8bd121..bd1964e 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -208,8 +208,8 @@ class StreamsPane extends Component {
         );
 
         return (
-            <div className="connection-content">
-                <div className="connection-content-header container-fluid">
+            <div className="pane-container stream-pane">
+                <div className="stream-pane-header container-fluid">
                     <Row>
                         <div className="header-info col">
                             <span><strong>flow</strong>: {conn["ip_src"]}:{conn["port_src"]} -> {conn["ip_dst"]}:{conn["port_dst"]}</span>
@@ -235,7 +235,6 @@ class StreamsPane extends Component {
             </div>
         );
     }
-
 }
 
 
diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss
index d5510cf..1f641f3 100644
--- a/frontend/src/components/panels/StreamsPane.scss
+++ b/frontend/src/components/panels/StreamsPane.scss
@@ -1,7 +1,6 @@
 @import "../../colors";
 
-.connection-content {
-  height: 100%;
+.stream-pane {
   background-color: $color-primary-0;
 
   pre {
@@ -15,6 +14,10 @@
       margin: 0;
       padding: 0;
     }
+
+    &:hover::-webkit-scrollbar-thumb {
+      background: $color-secondary-2;
+    }
   }
 
   .connection-message {
@@ -87,7 +90,7 @@
     }
   }
 
-  .connection-content-header {
+  .stream-pane-header {
     height: 33px;
     padding: 0;
     background-color: $color-primary-3;
diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss
index 1468f35..335e65b 100644
--- a/frontend/src/components/panels/common.scss
+++ b/frontend/src/components/panels/common.scss
@@ -32,6 +32,10 @@
         margin-left: 10px;
         color: $color-secondary-0;
       }
+
+      &:hover::-webkit-scrollbar-thumb {
+        background: $color-secondary-2;
+      }
     }
 
     table {
@@ -96,4 +100,8 @@
       margin-left: 5px;
     }
   }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: $color-secondary-2;
+  }
 }