diff options
Diffstat (limited to 'frontend/src/views')
| -rw-r--r-- | frontend/src/views/App.js | 43 | ||||
| -rw-r--r-- | frontend/src/views/Connections.js | 57 | ||||
| -rw-r--r-- | frontend/src/views/Connections.scss | 3 | ||||
| -rw-r--r-- | frontend/src/views/Footer.js | 20 |
4 files changed, 71 insertions, 52 deletions
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 ( <div className="main"> - <Router> - <div className="main-header"> - <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/> - </div> - <div className="main-content"> - {this.state.configured ? <MainPane/> : - <ConfigurationPane onConfigured={() => this.setState({configured: true})}/>} - {modal} - </div> - <div className="main-footer"> - {this.state.configured && <Footer/>} - </div> - </Router> + <Notifications/> + {this.state.connected && + <Router> + <div className="main-header"> + <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/> + </div> + <div className="main-content"> + {this.state.configured ? <MainPane/> : + <ConfigurationPane onConfigured={() => this.setState({configured: true})}/>} + {modal} + </div> + <div className="main-footer"> + {this.state.configured && <Footer/>} + </div> + </Router> + } </div> ); } 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 && <ConnectionMatchedRules key={c.id + "_m"} matchedRules={c.matched_rules} rules={this.state.rules} diff --git a/frontend/src/views/Connections.scss b/frontend/src/views/Connections.scss index 9e2b6ba..de06096 100644 --- a/frontend/src/views/Connections.scss +++ b/frontend/src/views/Connections.scss @@ -3,7 +3,6 @@ .connections-container { position: relative; height: 100%; - padding: 10px; background-color: $color-primary-3; .connections { @@ -21,7 +20,7 @@ top: 0; padding: 5px; border: none; - background-color: $color-primary-2; + background-color: $color-primary-3; } &:hover::-webkit-scrollbar-thumb { diff --git a/frontend/src/views/Footer.js b/frontend/src/views/Footer.js index ad1e4f7..dcf9cf8 100644 --- a/frontend/src/views/Footer.js +++ b/frontend/src/views/Footer.js @@ -13,9 +13,9 @@ import { import {TimeRange, TimeSeries} from "pondjs"; import backend from "../backend"; import ChoiceField from "../components/fields/ChoiceField"; -import dispatcher from "../globals"; import {withRouter} from "react-router-dom"; import log from "../log"; +import dispatcher from "../dispatcher"; class Footer extends Component { @@ -39,15 +39,12 @@ class Footer extends Component { componentDidMount() { const filteredPort = this.filteredPort(); this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => - 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() }); |