diff options
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/filters/FiltersDefinitions.js | 86 | ||||
| -rw-r--r-- | frontend/src/components/panels/MainPane.js | 34 |
2 files changed, 56 insertions, 64 deletions
diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js index 02ccb42..d4f2912 100644 --- a/frontend/src/components/filters/FiltersDefinitions.js +++ b/frontend/src/components/filters/FiltersDefinitions.js @@ -1,12 +1,4 @@ -import { - cleanNumber, - timestampToTime, - timeToTimestamp, - validate24HourTime, - validateIpAddress, - validateMin, - validatePort -} from "../../utils"; +import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; import StringConnectionsFilter from "./StringConnectionsFilter"; import React from "react"; import RulesConnectionsFilter from "./RulesConnectionsFilter"; @@ -22,69 +14,69 @@ export const filtersDefinitions = { replaceFunc={cleanNumber} validateFunc={validatePort} key="service_port_filter" - width={200} />, - matched_rules: <RulesConnectionsFilter />, + width={200}/>, + matched_rules: <RulesConnectionsFilter/>, client_address: <StringConnectionsFilter filterName="client_address" defaultFilterValue="all_addresses" validateFunc={validateIpAddress} key="client_address_filter" - width={320} />, + width={320}/>, client_port: <StringConnectionsFilter filterName="client_port" defaultFilterValue="all_ports" replaceFunc={cleanNumber} validateFunc={validatePort} key="client_port_filter" - width={200} />, + width={200}/>, min_duration: <StringConnectionsFilter filterName="min_duration" defaultFilterValue="0" replaceFunc={cleanNumber} validateFunc={validateMin(0)} key="min_duration_filter" - width={200} />, + width={200}/>, max_duration: <StringConnectionsFilter filterName="max_duration" defaultFilterValue="∞" replaceFunc={cleanNumber} key="max_duration_filter" - width={200} />, + width={200}/>, min_bytes: <StringConnectionsFilter filterName="min_bytes" defaultFilterValue="0" replaceFunc={cleanNumber} validateFunc={validateMin(0)} key="min_bytes_filter" - width={200} />, + width={200}/>, max_bytes: <StringConnectionsFilter filterName="max_bytes" defaultFilterValue="∞" replaceFunc={cleanNumber} key="max_bytes_filter" - width={200} />, - started_after: <StringConnectionsFilter filterName="started_after" - defaultFilterValue="00:00:00" - validateFunc={validate24HourTime} - encodeFunc={timeToTimestamp} - decodeFunc={timestampToTime} - key="started_after_filter" - width={200} />, - started_before: <StringConnectionsFilter filterName="started_before" - defaultFilterValue="00:00:00" - validateFunc={validate24HourTime} - encodeFunc={timeToTimestamp} - decodeFunc={timestampToTime} - key="started_before_filter" - width={200} />, - closed_after: <StringConnectionsFilter filterName="closed_after" - defaultFilterValue="00:00:00" - validateFunc={validate24HourTime} - encodeFunc={timeToTimestamp} - decodeFunc={timestampToTime} - key="closed_after_filter" - width={200} />, - closed_before: <StringConnectionsFilter filterName="closed_before" - defaultFilterValue="00:00:00" - validateFunc={validate24HourTime} - encodeFunc={timeToTimestamp} - decodeFunc={timestampToTime} - key="closed_before_filter" - width={200} />, - marked: <BooleanConnectionsFilter filterName={"marked"} />, - hidden: <BooleanConnectionsFilter filterName={"hidden"} /> + width={200}/>, + // started_after: <StringConnectionsFilter filterName="started_after" + // defaultFilterValue="00:00:00" + // validateFunc={validate24HourTime} + // encodeFunc={timeToTimestamp} + // decodeFunc={timestampToTime} + // key="started_after_filter" + // width={230} />, + // started_before: <StringConnectionsFilter filterName="started_before" + // defaultFilterValue="00:00:00" + // validateFunc={validate24HourTime} + // encodeFunc={timeToTimestamp} + // decodeFunc={timestampToTime} + // key="started_before_filter" + // width={230} />, + // closed_after: <StringConnectionsFilter filterName="closed_after" + // defaultFilterValue="00:00:00" + // validateFunc={validate24HourTime} + // encodeFunc={timeToTimestamp} + // decodeFunc={timestampToTime} + // key="closed_after_filter" + // width={230} />, + // closed_before: <StringConnectionsFilter filterName="closed_before" + // defaultFilterValue="00:00:00" + // validateFunc={validate24HourTime} + // encodeFunc={timeToTimestamp} + // decodeFunc={timestampToTime} + // key="closed_before_filter" + // width={230} />, + marked: <BooleanConnectionsFilter filterName={"marked"}/>, + // hidden: <BooleanConnectionsFilter filterName={"hidden"} /> }; diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js index 3202d6d..bd25e0c 100644 --- a/frontend/src/components/panels/MainPane.js +++ b/frontend/src/components/panels/MainPane.js @@ -8,24 +8,23 @@ import PcapPane from "./PcapPane"; import backend from "../../backend"; import RulePane from "./RulePane"; import ServicePane from "./ServicePane"; +import log from "../../log"; class MainPane extends Component { - constructor(props) { - super(props); - this.state = { - selectedConnection: null, - loading: false - }; - } + state = {}; componentDidMount() { const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/); if (match != null) { - this.setState({loading: true}); + this.loading = true; backend.get(`/api/connections/${match[1]}`) - .then(res => this.setState({selectedConnection: res.json, loading: false})) - .catch(error => console.log(error)); + .then(res => { + this.loading = false; + this.setState({selectedConnection: res.json}); + log.debug(`Initial connection ${match[1]} loaded`); + }) + .catch(error => log.error("Error loading initial connection", error)); } } @@ -34,18 +33,19 @@ class MainPane extends Component { <div className="main-pane"> <div className="pane connections-pane"> { - !this.state.loading && + !this.loading && <Connections onSelected={(c) => this.setState({selectedConnection: c})} - initialConnection={this.state.selectedConnection} /> + 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 />} /> + <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> |