diff options
Diffstat (limited to 'frontend/src/components/panels')
| -rw-r--r-- | frontend/src/components/panels/ConnectionsPane.js | 12 | ||||
| -rw-r--r-- | frontend/src/components/panels/ConnectionsPane.scss | 5 | ||||
| -rw-r--r-- | frontend/src/components/panels/MainPane.js | 82 | ||||
| -rw-r--r-- | frontend/src/components/panels/MainPane.scss | 27 | ||||
| -rw-r--r-- | frontend/src/components/panels/StreamsPane.js | 5 | ||||
| -rw-r--r-- | frontend/src/components/panels/StreamsPane.scss | 9 | ||||
| -rw-r--r-- | frontend/src/components/panels/common.scss | 8 |
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; + } } |