+ );
+};
+HistoryMenu.propTypes = {
+ popperPlacement: PropTypes.string,
+ popperRef: PropTypes.func,
+ popperStyle: PropTypes.object,
+ filters: PropTypes.array.isRequired,
+ alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+ afterClick: PropTypes.func.isRequired
+};
+
+const History = observer(
+ class History extends Component {
+ static propTypes = {
+ alertStore: PropTypes.instanceOf(AlertStore).isRequired
+ };
+
+ // how many filter sets do we store in local storage and render in the
+ // dropdown menu
+ maxSize = 8;
+ // this will be dumped to local storage via mbox-stored
+ history = localStored("history.filters", defaultHistory, { delay: 100 });
+
+ collapse = observable(
+ {
+ value: true,
+ toggle() {
+ this.value = !this.value;
+ },
+ hide() {
+ this.value = true;
+ }
+ },
+ { toggle: action.bound, hide: action.bound },
+ { name: "History menu toggle" }
+ );
+
+ appendToHistory = action(() => {
+ const { alertStore } = this.props;
+
+ // we don't store unapplied (we only have raw text for those, we need
+ // name & value for coloring) or invalid filters
+ const validAppliedFilters = alertStore.filters.values
+ .filter(f => f.applied === true && f.isValid === true)
+ .map(f => reduceFilter(f));
+
+ // don't store empty filters in history
+ if (validAppliedFilters.length === 0) return;
+ // make a JSON dump for comparing later with what's already stored
+ const filtersJSON = JSON.stringify(validAppliedFilters);
+
+ // dump observable array with stored filters to JS objects, without this
+ // we'll be passing around and comparing proxy objects that might mutate
+ // while we do so
+ const storedFilters = toJS(this.history.filters);
+
+ // rewrite history putting current filter set on top, this will move
+ // it up if user selects a filter set that was already in history
+ let newHistory = [
+ ...[validAppliedFilters],
+ ...storedFilters.filter(f => JSON.stringify(f) !== filtersJSON)
+ ].slice(0, this.maxSize);
+ this.history.filters = newHistory;
+ });
+
+ componentDidUpdate() {
+ // every time this component updates we will rewrite history
+ // (if there are changes)
+ this.appendToHistory();
+ }
+
+ render() {
+ const { alertStore } = this.props;
+
+ return (
+ // data-filters is there to register filters for observation in mobx
+ // it needs to be using full filter object to notice changes to
+ // name & value but ignore hits
+ // using it this way will force re-render on every change, which is
+ // needed to keep track of all filter changes
+ reduceFilter(f))
+ .join(" ")}
+ >
+
+ {({ ref }) => (
+
+ )}
+
+
+ {this.collapse.value
+ ? ({ placement, ref, style }) =>
+ : ({ placement, ref, style }) => (
+
+ )}
+
+
+ );
+ }
+ }
+);
+
+export { History };
diff --git a/ui/src/Components/NavBar/FilterInput/index.css b/ui/src/Components/NavBar/FilterInput/index.css
index b94387790..ec22f61d8 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/ui/src/Components/NavBar/FilterInput/index.css
@@ -11,3 +11,15 @@
padding: 0;
vertical-align: middle;
}
+
+.dropdown-menu.components-navbar-historymenu {
+ max-width: 400px;
+}
+
+.dropdown-menu.components-navbar-historymenu > .dropdown-item {
+ white-space: normal;
+}
+
+.components-navbar-historymenu-labels {
+ border-left: 3px solid;
+}
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index 30b636083..191c7a878 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -16,6 +16,7 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
import { AlertStore, FormatUnseeBackendURI } from "Stores/AlertStore";
import { FilterInputLabel } from "Components/Labels/FilterInputLabel";
import { AutosuggestTheme } from "./Constants";
+import { History } from "./History";
import "./index.css";
@@ -124,6 +125,9 @@ const FilterInput = observer(
{...otherProps}
/>
+