From d5f94b76986615b255b77b2a7b7ed336e5ad4838 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Wed, 7 Oct 2020 14:58:48 +0200 Subject: Implement notifications --- frontend/package.json | 5 +- frontend/src/backend.js | 3 +- frontend/src/components/Connection.js | 11 +-- frontend/src/components/ConnectionContent.scss | 9 +- frontend/src/components/Notifications.js | 60 +++++++++++++ frontend/src/components/Notifications.scss | 48 ++++++++++ frontend/src/components/panels/PcapPane.js | 33 +++---- frontend/src/components/panels/RulePane.js | 116 +++++++++++++------------ frontend/src/components/panels/ServicePane.js | 35 ++++---- frontend/src/components/panels/common.scss | 4 +- frontend/src/dispatcher.js | 35 ++++++++ frontend/src/globals.js | 5 -- frontend/src/index.js | 6 +- frontend/src/notifications.js | 40 +++++++++ frontend/src/setupProxy.js | 7 ++ frontend/src/views/App.js | 43 +++++---- frontend/src/views/Connections.js | 57 +++++++----- frontend/src/views/Connections.scss | 3 +- frontend/src/views/Footer.js | 20 ++--- frontend/yarn.lock | 32 ++++++- 20 files changed, 407 insertions(+), 165 deletions(-) create mode 100644 frontend/src/components/Notifications.js create mode 100644 frontend/src/components/Notifications.scss create mode 100644 frontend/src/dispatcher.js delete mode 100644 frontend/src/globals.js create mode 100644 frontend/src/notifications.js create mode 100644 frontend/src/setupProxy.js (limited to 'frontend') diff --git a/frontend/package.json b/frontend/package.json index 5bc13f1..b3ad03a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,7 +14,7 @@ "classnames": "^2.2.6", "dompurify": "^2.1.1", "eslint-config-react-app": "^5.2.1", - "flux": "^3.1.3", + "http-proxy-middleware": "^1.0.5", "lodash": "^4.17.20", "node-sass": "^4.14.0", "pondjs": "^0.9.0", @@ -50,6 +50,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "proxy": "http://localhost:3333" + } } diff --git a/frontend/src/backend.js b/frontend/src/backend.js index 72ee9dd..c7abd80 100644 --- a/frontend/src/backend.js +++ b/frontend/src/backend.js @@ -1,4 +1,3 @@ - async function json(method, url, data, json, headers) { const options = { method: method, @@ -28,7 +27,7 @@ async function json(method, url, data, json, headers) { const backend = { get: (url = "", headers = null) => - json("GET", url, null,null, headers), + json("GET", url, null, null, headers), post: (url = "", data = null, headers = null) => json("POST", url, null, data, headers), put: (url = "", data = null, headers = null) => diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js index 44f9f18..46a0cab 100644 --- a/frontend/src/components/Connection.js +++ b/frontend/src/components/Connection.js @@ -48,10 +48,11 @@ class Connection extends Component { render() { let conn = this.props.data; let serviceName = "/dev/null"; - let serviceColor = "#0F192E"; - if (conn.service.port !== 0) { - serviceName = conn.service.name; - serviceColor = conn.service.color; + let serviceColor = "#0f192e"; + if (this.props.services[conn["port_dst"]]) { + const service = this.props.services[conn["port_dst"]]; + serviceName = service.name; + serviceColor = service.color; } let startedAt = new Date(conn.started_at); let closedAt = new Date(conn.closed_at); @@ -87,7 +88,7 @@ class Connection extends Component { this.props.addServicePortFilter(conn.port_dst)} /> + onClick={() => this.props.addServicePortFilter(conn.port_dst)}/> {conn.ip_src} diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss index de4d699..f4edec9 100644 --- a/frontend/src/components/ConnectionContent.scss +++ b/frontend/src/components/ConnectionContent.scss @@ -2,7 +2,6 @@ .connection-content { height: 100%; - padding: 10px 10px 0; background-color: $color-primary-0; pre { @@ -91,12 +90,12 @@ .connection-content-header { height: 33px; padding: 0; - background-color: $color-primary-2; + background-color: $color-primary-3; .header-info { font-size: 12px; padding-top: 7px; - padding-left: 20px; + padding-left: 25px; } .header-actions { @@ -104,6 +103,10 @@ .choice-field { margin-top: -5px; + + .field-value { + background-color: $color-primary-3; + } } } } diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js new file mode 100644 index 0000000..4d6dcd4 --- /dev/null +++ b/frontend/src/components/Notifications.js @@ -0,0 +1,60 @@ +import React, {Component} from 'react'; +import './Notifications.scss'; +import dispatcher from "../dispatcher"; + +const _ = require('lodash'); +const classNames = require('classnames'); + +class Notifications extends Component { + + state = { + notifications: [], + closedNotifications: [], + }; + + componentDidMount() { + dispatcher.register("notifications", notification => { + const notifications = this.state.notifications; + notifications.push(notification); + this.setState({notifications}); + + setTimeout(() => { + const notifications = this.state.notifications; + notification.open = true; + this.setState({notifications}); + }, 100); + + setTimeout(() => { + const notifications = _.without(this.state.notifications, notification); + const closedNotifications = this.state.closedNotifications.concat([notification]); + notification.closed = true; + this.setState({notifications, closedNotifications}); + }, 5000); + + setTimeout(() => { + const closedNotifications = _.without(this.state.closedNotifications, notification); + this.setState({closedNotifications}); + }, 6000); + }); + } + + render() { + return ( +
+
+ { + this.state.closedNotifications.concat(this.state.notifications).map(n => +
+

{n.event}

+ {JSON.stringify(n.message)} +
+ ) + } +
+
+ ); + } +} + +export default Notifications; diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss new file mode 100644 index 0000000..b0c334b --- /dev/null +++ b/frontend/src/components/Notifications.scss @@ -0,0 +1,48 @@ +@import "../colors.scss"; + +.notifications { + position: absolute; + + left: 30px; + bottom: 50px; + z-index: 50; + + .notifications-list { + + } + + .notification { + background-color: $color-green; + border-left: 5px solid $color-green-dark; + padding: 10px; + margin: 10px 0; + width: 250px; + color: $color-green-light; + transform: translateX(-300px); + transition: all 1s ease; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .notification-title { + font-size: 0.9em; + margin: 0; + } + + .notification-description { + font-size: 0.8em; + } + + &.notification-open { + transform: translateX(0px); + } + + &.notification-closed { + transform: translateY(-50px); + opacity: 0; + } + + } + + +} \ No newline at end of file diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js index 31d8815..13f7cb3 100644 --- a/frontend/src/components/panels/PcapPane.js +++ b/frontend/src/components/panels/PcapPane.js @@ -9,28 +9,31 @@ import CheckField from "../fields/CheckField"; import TextField from "../fields/TextField"; import ButtonField from "../fields/ButtonField"; import LinkPopover from "../objects/LinkPopover"; +import dispatcher from "../../dispatcher"; class PcapPane extends Component { - constructor(props) { - super(props); - - this.state = { - sessions: [], - isUploadFileValid: true, - isUploadFileFocused: false, - uploadFlushAll: false, - isFileValid: true, - isFileFocused: false, - fileValue: "", - processFlushAll: false, - deleteOriginalFile: false - }; - } + state = { + sessions: [], + isUploadFileValid: true, + isUploadFileFocused: false, + uploadFlushAll: false, + isFileValid: true, + isFileFocused: false, + fileValue: "", + processFlushAll: false, + deleteOriginalFile: false + }; componentDidMount() { this.loadSessions(); + dispatcher.register("notifications", payload => { + if (payload.event === "pcap.upload" || payload.event === "pcap.file") { + this.loadSessions(); + } + }); + document.title = "caronte:~/pcaps$"; } diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js index 4641378..76f3ac0 100644 --- a/frontend/src/components/panels/RulePane.js +++ b/frontend/src/components/panels/RulePane.js @@ -14,35 +14,13 @@ import ButtonField from "../fields/ButtonField"; import validation from "../../validation"; import LinkPopover from "../objects/LinkPopover"; import {randomClassName} from "../../utils"; +import dispatcher from "../../dispatcher"; const classNames = require('classnames'); const _ = require('lodash'); class RulePane extends Component { - constructor(props) { - super(props); - - this.state = { - rules: [], - newRule: this.emptyRule, - newPattern: this.emptyPattern - }; - - this.directions = { - 0: "both", - 1: "c->s", - 2: "s->c" - }; - } - - componentDidMount() { - this.reset(); - this.loadRules(); - - document.title = "caronte:~/rules$"; - } - emptyRule = { "name": "", "color": "", @@ -60,7 +38,6 @@ class RulePane extends Component { }, "version": 0 }; - emptyPattern = { "regex": "", "flags": { @@ -74,6 +51,34 @@ class RulePane extends Component { "max_occurrences": 0, "direction": 0 }; + state = { + rules: [], + newRule: this.emptyRule, + newPattern: this.emptyPattern + }; + + constructor(props) { + super(props); + + this.directions = { + 0: "both", + 1: "c->s", + 2: "s->c" + }; + } + + componentDidMount() { + this.reset(); + this.loadRules(); + + dispatcher.register("notifications", payload => { + if (payload.event === "rules.new" || payload.event === "rules.edit") { + this.loadRules(); + } + }); + + document.title = "caronte:~/rules$"; + } loadRules = () => { backend.get("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status})) @@ -226,17 +231,17 @@ class RulePane extends Component { { this.reset(); this.setState({selectedRule: _.cloneDeep(r)}); - }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id })}> + }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}> {r["id"].substring(0, 8)} {r["name"]} - + {r["notes"]} ); let patterns = (this.state.selectedPattern == null && !isUpdate ? - rule.patterns.concat(this.state.newPattern) : - rule.patterns + rule.patterns.concat(this.state.newPattern) : + rule.patterns ).map(p => p === pattern ? @@ -244,7 +249,7 @@ class RulePane extends Component { onChange={(v) => { this.updateParam(() => pattern.regex = v); this.setState({patternRegexFocused: pattern.regex === ""}); - }} /> + }}/> this.updateParam(() => pattern.flags.caseless = v)}/> @@ -259,34 +264,35 @@ class RulePane extends Component { this.updateParam(() => pattern.min_occurrences = v)} /> + onChange={(v) => this.updateParam(() => pattern.min_occurrences = v)}/> this.updateParam(() => pattern.max_occurrences = v)} /> + onChange={(v) => this.updateParam(() => pattern.max_occurrences = v)}/> s", "s->c"]} value={this.directions[pattern.direction]} - onChange={(v) => this.updateParam(() => pattern.direction = v)} /> + onChange={(v) => this.updateParam(() => pattern.direction = v)}/> {this.state.selectedPattern == null ? this.addPattern(p)}/> : - this.updatePattern(p)}/>} + this.updatePattern(p)}/>} : {p.regex} - {p.flags.caseless ? "yes": "no"} - {p.flags.dot_all ? "yes": "no"} - {p.flags.multi_line ? "yes": "no"} - {p.flags.utf_8_mode ? "yes": "no"} - {p.flags.unicode_property ? "yes": "no"} + {p.flags.caseless ? "yes" : "no"} + {p.flags.dot_all ? "yes" : "no"} + {p.flags.multi_line ? "yes" : "no"} + {p.flags.utf_8_mode ? "yes" : "no"} + {p.flags.unicode_property ? "yes" : "no"} {p.min_occurrences} {p.max_occurrences} {this.directions[p.direction]} {!isUpdate && this.editPattern(p) }/>} + onClick={() => this.editPattern(p)}/>} ); @@ -296,9 +302,9 @@ class RulePane extends Component {
GET /api/rules {this.state.rulesStatusCode && - } + }
@@ -327,7 +333,7 @@ class RulePane extends Component { + placement="left"/>
@@ -336,11 +342,11 @@ class RulePane extends Component { this.updateParam((r) => r.name = v)} - error={this.state.ruleNameError} /> + error={this.state.ruleNameError}/> this.updateParam((r) => r.color = v)} /> + onChange={(v) => this.updateParam((r) => r.color = v)}/> this.updateParam((r) => r.notes = v)} /> + onChange={(v) => this.updateParam((r) => r.notes = v)}/> @@ -348,29 +354,29 @@ class RulePane extends Component { this.updateParam((r) => r.filter.service_port = v)} min={0} max={65565} error={this.state.ruleServicePortError} - readonly={isUpdate} /> + readonly={isUpdate}/> this.updateParam((r) => r.filter.client_port = v)} min={0} max={65565} error={this.state.ruleClientPortError} - readonly={isUpdate} /> + readonly={isUpdate}/> this.updateParam((r) => r.filter.client_address = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.client_address = v)}/> this.updateParam((r) => r.filter.min_duration = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.min_duration = v)}/> this.updateParam((r) => r.filter.max_duration = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.max_duration = v)}/> this.updateParam((r) => r.filter.min_bytes = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.min_bytes = v)}/> this.updateParam((r) => r.filter.max_bytes = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.max_bytes = v)}/> @@ -388,7 +394,7 @@ class RulePane extends Component { min max direction - {!isUpdate && actions } + {!isUpdate && actions} @@ -403,7 +409,7 @@ class RulePane extends Component {
{} + bordered onClick={isUpdate ? this.updateRule : this.addRule}/>
diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js index 0e99652..22c6655 100644 --- a/frontend/src/components/panels/ServicePane.js +++ b/frontend/src/components/panels/ServicePane.js @@ -12,28 +12,13 @@ import ButtonField from "../fields/ButtonField"; import validation from "../../validation"; import LinkPopover from "../objects/LinkPopover"; import {createCurlCommand} from "../../utils"; +import dispatcher from "../../dispatcher"; const classNames = require('classnames'); const _ = require('lodash'); class ServicePane extends Component { - constructor(props) { - super(props); - - this.state = { - services: [], - currentService: this.emptyService, - }; - - document.title = "caronte:~/services$"; - } - - componentDidMount() { - this.reset(); - this.loadServices(); - } - emptyService = { "port": 0, "name": "", @@ -41,6 +26,24 @@ class ServicePane extends Component { "notes": "" }; + state = { + services: [], + currentService: this.emptyService, + }; + + componentDidMount() { + this.reset(); + this.loadServices(); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices(); + } + }); + + document.title = "caronte:~/services$"; + } + loadServices = () => { backend.get("/api/services") .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status})) diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss index 121a917..1468f35 100644 --- a/frontend/src/components/panels/common.scss +++ b/frontend/src/components/panels/common.scss @@ -2,11 +2,9 @@ .pane-container { height: 100%; - padding: 10px 10px 0; background-color: $color-primary-3; .pane-section { - margin-bottom: 10px; background-color: $color-primary-0; .section-header { @@ -14,7 +12,7 @@ font-weight: 500; display: flex; padding: 5px 10px; - background-color: $color-primary-2; + background-color: $color-primary-3; .api-request { flex: 1; diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js new file mode 100644 index 0000000..4b8b5a4 --- /dev/null +++ b/frontend/src/dispatcher.js @@ -0,0 +1,35 @@ + +class Dispatcher { + + constructor() { + this.listeners = []; + } + + dispatch = (topic, payload) => { + this.listeners.filter(l => l.topic === topic).forEach(l => l.callback(payload)); + }; + + register = (topic, callback) => { + if (typeof callback !== "function") { + throw new Error("dispatcher callback must be a function"); + } + if (typeof topic === "string") { + this.listeners.push({topic, callback}); + } else if (typeof topic === "object" && Array.isArray(topic)) { + topic.forEach(e => { + if (typeof e !== "string") { + throw new Error("all topics must be strings"); + } + }); + + topic.forEach(e => this.listeners.push({e, callback})); + } else { + throw new Error("topic must be a string or an array of strings"); + } + }; + +} + +const dispatcher = new Dispatcher(); + +export default dispatcher; diff --git a/frontend/src/globals.js b/frontend/src/globals.js deleted file mode 100644 index cd4dc64..0000000 --- a/frontend/src/globals.js +++ /dev/null @@ -1,5 +0,0 @@ -import {Dispatcher} from "flux"; - -const dispatcher = new Dispatcher(); - -export default dispatcher; diff --git a/frontend/src/index.js b/frontend/src/index.js index 2e90371..beb52ae 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -4,6 +4,9 @@ import 'bootstrap/dist/css/bootstrap.css'; import './index.scss'; import App from './views/App'; import * as serviceWorker from './serviceWorker'; +import notifications from "./notifications"; + +notifications.createWebsocket(); ReactDOM.render( @@ -12,7 +15,4 @@ ReactDOM.render( document.getElementById('root') ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); diff --git a/frontend/src/notifications.js b/frontend/src/notifications.js new file mode 100644 index 0000000..2a77ffb --- /dev/null +++ b/frontend/src/notifications.js @@ -0,0 +1,40 @@ +import log from "./log"; +import dispatcher from "./dispatcher"; + +class Notifications { + + constructor() { + const location = document.location; + this.wsUrl = `ws://${location.hostname}${location.port ? ":" + location.port : ""}/ws`; + } + + createWebsocket = () => { + this.ws = new WebSocket(this.wsUrl); + this.ws.onopen = this.onWebsocketOpen; + this.ws.onerror = this.onWebsocketError; + this.ws.onclose = this.onWebsocketClose; + this.ws.onmessage = this.onWebsocketMessage; + }; + + onWebsocketOpen = () => { + log.debug("Connected to backend with websocket"); + }; + + onWebsocketError = (err) => { + this.ws.close(); + log.error("Websocket error", err); + setTimeout(() => this.createWebsocket(), 3000); + }; + + onWebsocketClose = () => { + log.debug("Closed websocket connection with backend"); + }; + + onWebsocketMessage = (message) => { + dispatcher.dispatch("notifications", JSON.parse(message.data)); + }; +} + +const notifications = new Notifications(); + +export default notifications; diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js new file mode 100644 index 0000000..6f082c8 --- /dev/null +++ b/frontend/src/setupProxy.js @@ -0,0 +1,7 @@ +const { createProxyMiddleware } = require('http-proxy-middleware'); + +module.exports = function(app) { + app.use(createProxyMiddleware("/api", { target: "http://localhost:3333" })); + app.use(createProxyMiddleware("/setup", { target: "http://localhost:3333" })); + app.use(createProxyMiddleware("/ws", { target: "http://localhost:3333", ws: true })); +}; diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 00d9110..c14b7f5 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -5,18 +5,22 @@ import MainPane from "../components/panels/MainPane"; import Footer from "./Footer"; import {BrowserRouter as Router} from "react-router-dom"; import Filters from "./Filters"; -import backend from "../backend"; import ConfigurationPane from "../components/panels/ConfigurationPane"; -import log from "../log"; +import Notifications from "../components/Notifications"; +import dispatcher from "../dispatcher"; class App extends Component { state = {}; componentDidMount() { - backend.get("/api/services").then(_ => { - log.debug("Caronte is already configured. Loading main.."); - this.setState({configured: true}); + dispatcher.register("notifications", payload => { + if (payload.event === "connected") { + this.setState({ + connected: true, + configured: payload.message["is_configured"] + }); + } }); setInterval(() => { @@ -36,19 +40,22 @@ class App extends Component { return (
- -
-
this.setState({filterWindowOpen: true})}/> -
-
- {this.state.configured ? : - this.setState({configured: true})}/>} - {modal} -
-
- {this.state.configured &&
} -
- + + {this.state.connected && + +
+
this.setState({filterWindowOpen: true})}/> +
+
+ {this.state.configured ? : + this.setState({configured: true})}/>} + {modal} +
+
+ {this.state.configured &&
} +
+ + }
); } diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index fe655b3..bd631a2 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -6,9 +6,9 @@ import {Redirect} from 'react-router'; import {withRouter} from "react-router-dom"; import backend from "../backend"; import ConnectionMatchedRules from "../components/ConnectionMatchedRules"; -import dispatcher from "../globals"; import log from "../log"; import ButtonField from "../components/fields/ButtonField"; +import dispatcher from "../dispatcher"; class Connections extends Component { @@ -17,8 +17,6 @@ class Connections extends Component { connections: [], firstConnection: null, lastConnection: null, - flagRule: null, - rules: null, queryString: null }; @@ -41,14 +39,24 @@ class Connections extends Component { // TODO: scroll to initial connection } - dispatcher.register((payload) => { - if (payload.actionType === "timeline-update") { - this.connectionsListRef.current.scrollTop = 0; - this.loadConnections({ - started_after: Math.round(payload.from.getTime() / 1000), - started_before: Math.round(payload.to.getTime() / 1000), - limit: this.maxConnections - }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); + dispatcher.register("timeline_updates", payload => { + this.connectionsListRef.current.scrollTop = 0; + this.loadConnections({ + started_after: Math.round(payload.from.getTime() / 1000), + started_before: Math.round(payload.to.getTime() / 1000), + limit: this.maxConnections + }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "rules.new" || payload.event === "rules.edit") { + this.loadRules().then(() => log.debug("Loaded connection rules after notification update")); + } + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices().then(() => log.debug("Services reloaded after notification update")); } }); } @@ -116,6 +124,13 @@ class Connections extends Component { } this.setState({loading: true}); + if (!this.state.rules) { + await this.loadRules(); + } + if (!this.state.services) { + await this.loadServices(); + } + let res = (await backend.get(`${url}?${urlParams}`)).json; let connections = this.state.connections; @@ -154,28 +169,29 @@ class Connections extends Component { } } - let rules = this.state.rules; - if (rules == null) { - rules = (await backend.get("/api/rules")).json; - } - this.setState({ loading: false, connections: connections, - rules: rules, firstConnection: firstConnection, lastConnection: lastConnection }); if (firstConnection != null && lastConnection != null) { - dispatcher.dispatch({ - actionType: "connections-update", + dispatcher.dispatch("connection_updates", { from: new Date(lastConnection["started_at"]), to: new Date(firstConnection["started_at"]) }); } } + loadRules = async () => { + return backend.get("/api/rules").then(res => this.setState({rules: res.json})); + }; + + loadServices = async () => { + return backend.get("/api/services").then(res => this.setState({services: res.json})); + }; + render() { let redirect; let queryString = this.state.queryString !== null ? this.state.queryString : ""; @@ -222,7 +238,8 @@ class Connections extends Component { selected={this.state.selected === c.id} onMarked={marked => c.marked = marked} onEnabled={enabled => c.hidden = !enabled} - addServicePortFilter={this.addServicePortFilter}/>, + addServicePortFilter={this.addServicePortFilter} + services={this.state.services}/>, c.matched_rules.length > 0 && - log.debug("Statistics loaded after mount")); - - dispatcher.register((payload) => { - if (payload.actionType === "connections-update") { - this.setState({ - selection: new TimeRange(payload.from, payload.to), - }); - } + this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); + + dispatcher.register("connection_updates", payload => { + this.setState({ + selection: new TimeRange(payload.from, payload.to), + }); }); } @@ -109,8 +106,7 @@ class Footer extends Component { clearTimeout(this.selectionTimeout); } this.selectionTimeout = setTimeout(() => { - dispatcher.dispatch({ - actionType: "timeline-update", + dispatcher.dispatch("timeline_updates", { from: timeRange.begin(), to: timeRange.end() }); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index fa150ab..e3cade9 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1656,6 +1656,13 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/http-proxy@^1.17.4": + version "1.17.4" + resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.4.tgz#e7c92e3dbe3e13aa799440ff42e6d3a17a9d045b" + integrity sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q== + dependencies: + "@types/node" "*" + "@types/invariant@^2.2.33": version "2.2.34" resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe" @@ -2707,7 +2714,7 @@ braces@^2.3.1, braces@^2.3.2: split-string "^3.0.2" to-regex "^3.0.1" -braces@~3.0.2: +braces@^3.0.1, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -5738,7 +5745,18 @@ http-proxy-middleware@0.19.1: lodash "^4.17.11" micromatch "^3.1.10" -http-proxy@^1.17.0: +http-proxy-middleware@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-1.0.5.tgz#4c6e25d95a411e3d750bc79ccf66290675176dc2" + integrity sha512-CKzML7u4RdGob8wuKI//H8Ein6wNTEQR7yjVEzPbhBLGdOfkfvgTnp2HLnniKBDP9QW4eG10/724iTWLBeER3g== + dependencies: + "@types/http-proxy" "^1.17.4" + http-proxy "^1.18.1" + is-glob "^4.0.1" + lodash "^4.17.19" + micromatch "^4.0.2" + +http-proxy@^1.17.0, http-proxy@^1.18.1: version "1.18.1" resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549" integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ== @@ -7434,6 +7452,14 @@ micromatch@^3.1.10, micromatch@^3.1.4: snapdragon "^0.8.1" to-regex "^3.0.2" +micromatch@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259" + integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q== + dependencies: + braces "^3.0.1" + picomatch "^2.0.5" + miller-rabin@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" @@ -8405,7 +8431,7 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= -picomatch@^2.0.4, picomatch@^2.2.1: +picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== -- cgit v1.2.3-70-g09d2