From c745263e1b28e4cedffa88de764f11d6379d745d Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 15 Oct 2020 13:50:37 +0200 Subject: Update rules filters --- frontend/src/components/Timeline.js | 77 ++++++------- frontend/src/components/dialogs/Filters.js | 2 +- frontend/src/components/fields/TagField.js | 29 +++-- frontend/src/components/fields/TagField.scss | 99 +++++++++++------ frontend/src/components/fields/common.scss | 1 + .../components/filters/RulesConnectionsFilter.js | 23 +--- .../components/filters/RulesConnectionsFilter.scss | 121 --------------------- frontend/src/components/objects/MessageAction.js | 2 +- frontend/src/components/panels/PcapsPane.js | 6 +- frontend/src/components/panels/SearchPane.js | 14 +-- frontend/src/components/panels/StreamsPane.js | 2 +- 11 files changed, 137 insertions(+), 239 deletions(-) delete mode 100644 frontend/src/components/filters/RulesConnectionsFilter.scss (limited to 'frontend/src/components') diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index bc42a01..1d88bcb 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -35,7 +35,6 @@ import log from "../log"; import dispatcher from "../dispatcher"; const minutes = 60 * 1000; -const _ = require('lodash'); const classNames = require('classnames'); const leftSelectionPaddingMultiplier = 24; @@ -54,19 +53,26 @@ class Timeline extends Component { this.selectionTimeout = null; } - additionalFilters = () => { + componentDidMount() { const urlParams = new URLSearchParams(this.props.location.search); - if (this.state.metric === "matched_rules") { - return urlParams.getAll("matched_rules") || []; - } else { - return urlParams.get("service_port"); - } - }; + this.setState({ + servicePortFilter: urlParams.get("service_port") || null, + matchedRulesFilter: urlParams.getAll("matched_rules") || null + }); - componentDidMount() { - const additionalFilters = this.additionalFilters(); - this.setState({filters: additionalFilters}); - this.loadStatistics(this.state.metric, additionalFilters).then(() => log.debug("Statistics loaded after mount")); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics loaded after mount")); + + this.connectionsFiltersCallback = payload => { + if ("service_port" in payload && this.state.servicePortFilter !== payload["service_port"]) { + this.setState({servicePortFilter: payload["service_port"]}); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after service port changed")); + } + if ("matched_rules" in payload && this.state.matchedRulesFilter !== payload["matched_rules"]) { + this.setState({matchedRulesFilter: payload["matched_rules"]}); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after matched rules changed")); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); dispatcher.register("connection_updates", payload => { this.setState({ @@ -76,8 +82,10 @@ class Timeline extends Component { }); dispatcher.register("notifications", payload => { - if (payload.event === "services.edit") { - this.loadServices().then(() => this.adjustSelection()); + if (payload.event === "services.edit" && this.state.metric !== "matched_rules") { + this.loadServices().then(() => log.debug("Statistics reloaded after services updates")); + } else if (payload.event.startsWith("rules") && this.state.metric === "matched_rules") { + this.loadServices().then(() => log.debug("Statistics reloaded after rules updates")); } }); @@ -87,41 +95,29 @@ class Timeline extends Component { }); } - componentDidUpdate(prevProps, prevState, snapshot) { - const additionalFilters = this.additionalFilters(); - const updateStatistics = () => { - this.setState({filters: additionalFilters}); - this.loadStatistics(this.state.metric, additionalFilters).then(() => - log.debug("Statistics reloaded after filters changes")); - }; - - if (this.state.metric === "matched_rules") { - if (!Array.isArray(this.state.filters) || - !_.isEqual(_.sortBy(additionalFilters), _.sortBy(this.state.filters))) { - updateStatistics(); - } - } else { - if (this.state.filters !== additionalFilters) { - updateStatistics(); - } - } + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); } - loadStatistics = async (metric, filters) => { + loadStatistics = async (metric) => { const urlParams = new URLSearchParams(); urlParams.set("metric", metric); let columns = []; if (metric === "matched_rules") { let rules = await this.loadRules(); - filters.forEach(id => { - urlParams.append("matched_rules", id); - }); - columns = rules.map(r => r.id); + if (this.state.matchedRulesFilter.length > 0) { + this.state.matchedRulesFilter.forEach(id => { + urlParams.append("rules_ids", id); + }); + columns = this.state.matchedRulesFilter; + } else { + columns = rules.map(r => r.id); + } } else { let services = await this.loadServices(); - const filteredPort = filters; - if (filteredPort && services[filters]) { + const filteredPort = this.state.servicePortFilter; + if (filteredPort && services[filteredPort]) { const service = services[filteredPort]; services = {}; services[filteredPort] = service; @@ -172,7 +168,6 @@ class Timeline extends Component { start, end }); - log.debug(`Loaded statistics for metric "${metric}"`); }; loadServices = async () => { @@ -279,7 +274,7 @@ class Timeline extends Component { "server_bytes_per_service", "duration_per_service", "matched_rules"]} values={["connections_per_service", "client_bytes_per_service", "server_bytes_per_service", "duration_per_service", "matched_rules"]} - onChange={(metric) => this.loadStatistics(metric, this.state.filters) + onChange={(metric) => this.loadStatistics(metric) .then(() => log.debug("Statistics loaded after metric changes"))} value={this.state.metric}/> diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js index d2cce4f..a35ece2 100644 --- a/frontend/src/components/dialogs/Filters.js +++ b/frontend/src/components/dialogs/Filters.js @@ -16,7 +16,7 @@ */ import React, {Component} from 'react'; -import {Col, Container, Modal, Row} from "react-bootstrap"; +import {Modal} from "react-bootstrap"; import ButtonField from "../fields/ButtonField"; import './Filters.scss'; import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js index f1a48bd..89445b6 100644 --- a/frontend/src/components/fields/TagField.js +++ b/frontend/src/components/fields/TagField.js @@ -26,50 +26,47 @@ const _ = require('lodash'); class TagField extends Component { + state = {}; + constructor(props) { super(props); this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; } - state = { - - }; - onAddition = (tag) => { if (typeof this.props.onChange === "function") { - const tags = [].concat(this.wrappedTags(), tag); - this.props.onChange(tags.map(t => t.name), true, tag); // true == addition + this.props.onChange([].concat(this.props.tags, tag), true, tag); // true == addition } }; onDelete = (i) => { if (typeof this.props.onChange === "function") { - const tags = this.wrappedTags(); + const tags = _.clone(this.props.tags); const tag = tags[i]; tags.splice(i, 1); - this.props.onChange(tags.map(t => t.name), true, tag); // false == delete + this.props.onChange(tags, true, tag); // false == delete } }; - wrappedTags = () => this.props.tags.map(t => new Object({"name": t})); render() { const small = this.props.small || false; const name = this.props.name || null; return ( -
- { name && +
+ {name &&
} - +
+ +
); } diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss index e77db97..737f11f 100644 --- a/frontend/src/components/fields/TagField.scss +++ b/frontend/src/components/fields/TagField.scss @@ -1,31 +1,68 @@ @import "../../colors.scss"; .tag-field { + font-size: 0.9em; + margin: 5px 0; + + .field-name { + label { + margin: 0; + } + } + + &.field-small { + font-size: 0.8em; + } + + &.field-inline { + display: flex; + + .field-name { + padding: 6px 0 6px 7px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + background-color: $color-primary-2; + } + + .field-input { + flex: 1; + + .react-tags { + padding-left: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &:focus-within .field-name { + background-color: $color-primary-1; + } + } + .react-tags { - font-size: 12px; position: relative; - z-index: 10; - padding: 0 6px; - cursor: text; + display: flex; border-radius: 4px; background-color: $color-primary-2; - } - .react-tags.is-focused { - border-color: #b1b1b1; + &:focus-within, + &:focus-within .react-tags__search-input { + background-color: $color-primary-1; + } } .react-tags__selected { - display: inline; + display: inline-block; + flex: 0 1; + margin: 6px 0; + white-space: nowrap; } .react-tags__selected-tag { - font-size: 11px; - display: inline-block; - margin: 0 6px 6px 0; + font-size: 0.75em; + margin: 0 3px; padding: 2px 4px; color: $color-primary-3; - border: none; border-radius: 2px; background: $color-primary-4; } @@ -39,12 +76,15 @@ .react-tags__selected-tag:hover, .react-tags__selected-tag:focus { border-color: #b1b1b1; + background-color: $color-primary-0; + + &::after { + color: $color-primary-4; + } } .react-tags__search { - display: inline-block; - max-width: 100%; - padding: 7px 10px; + flex: 1 0; } @media screen and (min-width: 30em) { @@ -54,14 +94,7 @@ } .react-tags__search-input { - font-size: inherit; - line-height: inherit; - max-width: 100%; - margin: 0; - padding: 0; color: $color-primary-4; - border: 0; - outline: none; background-color: $color-primary-2; } @@ -71,6 +104,7 @@ .react-tags__suggestions { position: absolute; + z-index: 50; top: 100%; left: 0; width: 100%; @@ -87,30 +121,33 @@ margin: 4px -1px; padding: 0; list-style: none; - color: $color-primary-1; - border-radius: 2px; - background: $color-primary-4; + border-radius: 3px; + background: $color-primary-2; } .react-tags__suggestions li { - padding: 3px 5px; - border-bottom: 1px solid #ddd; + padding: 5px 10px; } .react-tags__suggestions li mark { font-weight: 600; - text-decoration: underline; + padding: 0; + color: $color-primary-4; background: none; } .react-tags__suggestions li:hover { cursor: pointer; - color: $color-primary-4; - background: $color-primary-0; + border-radius: 3px; + background: $color-primary-1; + + mark { + color: $color-primary-4; + } } .react-tags__suggestions li.is-active { - background: #b7cfe0; + background: $color-primary-3; } .react-tags__suggestions li.is-disabled { diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss index 8fbef0d..e5dc65c 100644 --- a/frontend/src/components/fields/common.scss +++ b/frontend/src/components/fields/common.scss @@ -3,6 +3,7 @@ .field { input, textarea { + font-family: "Fira Code", monospace; width: 100%; padding: 7px 10px; color: $color-primary-4; diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js index 4c993dc..8e40d30 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.js +++ b/frontend/src/components/filters/RulesConnectionsFilter.js @@ -17,10 +17,9 @@ import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; -import './RulesConnectionsFilter.scss'; -import ReactTags from 'react-tag-autocomplete'; import backend from "../../backend"; import dispatcher from "../../dispatcher"; +import TagField from "../fields/TagField"; const classNames = require('classnames'); const _ = require('lodash'); @@ -59,16 +58,8 @@ class RulesConnectionsFilter extends Component { dispatcher.unregister(this.connectionsFiltersCallback); } - onDelete = (i) => { - const activeRules = _.clone(this.state.activeRules); - activeRules.splice(i, 1); - this.setState({activeRules}); - dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)}); - }; - - onAddition = (rule) => { - if (!this.state.activeRules.includes(rule)) { - const activeRules = [].concat(this.state.activeRules, rule); + onChange = (activeRules) => { + if (!_.isEqual(activeRules.sort(), this.state.activeRules.sort())) { this.setState({activeRules}); dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)}); } @@ -79,11 +70,9 @@ class RulesConnectionsFilter extends Component {
- - suggestion.name.startsWith(query) && !this.state.activeRules.includes(suggestion)}/> +
); diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss deleted file mode 100644 index 0bb4952..0000000 --- a/frontend/src/components/filters/RulesConnectionsFilter.scss +++ /dev/null @@ -1,121 +0,0 @@ -@import "../../colors"; - -.filter-rules { - .react-tags { - font-size: 12px; - position: relative; - z-index: 10; - padding: 0 6px; - cursor: text; - border-radius: 4px; - background-color: $color-primary-2; - } - - .react-tags.is-focused { - border-color: #b1b1b1; - } - - .react-tags__selected { - display: inline; - } - - .react-tags__selected-tag { - font-size: 11px; - display: inline-block; - margin: 0 6px 6px 0; - padding: 2px 4px; - color: $color-primary-3; - border: none; - border-radius: 2px; - background: $color-primary-4; - } - - .react-tags__selected-tag::after { - margin-left: 8px; - content: "\2715"; - color: $color-primary-3; - } - - .react-tags__selected-tag:hover, - .react-tags__selected-tag:focus { - border-color: #b1b1b1; - } - - .react-tags__search { - display: inline-block; - max-width: 100%; - padding: 7px 10px; - } - - @media screen and (min-width: 30em) { - .react-tags__search { - position: relative; - } - } - - .react-tags__search-input { - font-size: inherit; - line-height: inherit; - max-width: 100%; - margin: 0; - padding: 0; - color: $color-primary-4; - border: 0; - outline: none; - background-color: $color-primary-2; - } - - .react-tags__search-input::-ms-clear { - display: none; - } - - .react-tags__suggestions { - position: absolute; - top: 100%; - left: 0; - width: 100%; - } - - @media screen and (min-width: 30em) { - .react-tags__suggestions { - width: 240px; - } - } - - .react-tags__suggestions ul { - font-size: 12px; - margin: 4px -1px; - padding: 0; - list-style: none; - color: $color-primary-1; - border-radius: 2px; - background: $color-primary-4; - } - - .react-tags__suggestions li { - padding: 3px 5px; - border-bottom: 1px solid #ddd; - } - - .react-tags__suggestions li mark { - font-weight: 600; - text-decoration: underline; - background: none; - } - - .react-tags__suggestions li:hover { - cursor: pointer; - color: $color-primary-4; - background: $color-primary-0; - } - - .react-tags__suggestions li.is-active { - background: #b7cfe0; - } - - .react-tags__suggestions li.is-disabled { - cursor: auto; - opacity: 0.5; - } - -} diff --git a/frontend/src/components/objects/MessageAction.js b/frontend/src/components/objects/MessageAction.js index 9f199b7..2b46320 100644 --- a/frontend/src/components/objects/MessageAction.js +++ b/frontend/src/components/objects/MessageAction.js @@ -43,7 +43,7 @@ class MessageAction extends Component { return ( - + {s["id"].substring(0, 8)} {dateTimeToTime(s["started_at"])} {durationBetween(s["started_at"], s["completed_at"])} @@ -166,13 +166,13 @@ class PcapsPane extends Component { }); }; - const uploadCurlCommand = createCurlCommand("pcap/upload", "POST", null, { + const uploadCurlCommand = createCurlCommand("/pcap/upload", "POST", null, { file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ? this.state.uploadSelectedFile.name : "invalid.pcap"), flush_all: this.state.uploadFlushAll }); - const fileCurlCommand = createCurlCommand("pcap/file", "POST", { + const fileCurlCommand = createCurlCommand("/pcap/file", "POST", { file: this.state.fileValue, flush_all: this.state.processFlushAll, delete_original_file: this.state.deleteOriginalFile diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js index 21ba139..1fb48ef 100644 --- a/frontend/src/components/panels/SearchPane.js +++ b/frontend/src/components/panels/SearchPane.js @@ -29,7 +29,6 @@ import dispatcher from "../../dispatcher"; import TagField from "../fields/TagField"; import CheckField from "../fields/CheckField"; -const classNames = require('classnames'); const _ = require('lodash'); class SearchPane extends Component { @@ -161,7 +160,7 @@ class SearchPane extends Component { const options = this.state.currentSearchOptions; let searches = this.state.searches.map(s => - + {s.id.substring(0, 8)} {this.extractPattern(s["search_options"])} {s["affected_connections_count"]} @@ -223,13 +222,14 @@ class SearchPane extends Component {
- {return {name: t};})} + name="terms" min={3} inline allowNew={true} readonly={regexOptionsModified || options.text_search.exact_phrase} - onChange={(tags) => this.updateParam(s => s.text_search.terms = tags)}/> - this.updateParam(s => s.text_search.terms = tags.map(t => t.name))}/> + {return {name: t};})} + name="excluded_terms" min={3} inline allowNew={true} readonly={regexOptionsModified || options.text_search.exact_phrase} - onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags)}/> + onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags.map(t => t.name))}/> or diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js index 1aa5c53..be39777 100644 --- a/frontend/src/components/panels/StreamsPane.js +++ b/frontend/src/components/panels/StreamsPane.js @@ -65,7 +65,7 @@ class StreamsPane extends Component { } loadStream = (connectionId) => { - this.setState({messages: []}); + this.setState({messages: [], currentId: connectionId}); backend.get(`/api/streams/${connectionId}?format=${this.state.format}`) .then(res => this.setState({messages: res.json})); }; -- cgit v1.2.3-70-g09d2