diff --git a/webapp/src/Alerts.tsx b/webapp/src/Alerts.tsx
index 4b551cab..5a558a98 100644
--- a/webapp/src/Alerts.tsx
+++ b/webapp/src/Alerts.tsx
@@ -42,13 +42,12 @@ import {
eventSetEscalated,
Tag,
} from "./event";
-import { AddressCell, TimestampCell } from "./TimestampCell";
import { IdleTimer } from "./idletimer";
import { eventStore } from "./eventstore";
import { Logger } from "./util";
import { SensorSelect } from "./common/SensorSelect";
import * as bootstrap from "bootstrap";
-import { FilterStrip } from "./components";
+import { AddressCell, FilterStrip, TimestampCell } from "./components";
const DEFAULT_SORTBY = "timestamp";
const DEFAULT_SORTORDER = "desc";
@@ -374,7 +373,6 @@ export function Alerts() {
untrack(() => {
const logger = new Logger("Alerts.refreshEvents", true);
let qFilters = getFilters();
- console.log(qFilters);
let q: undefined | string = qFilters.join(" ");
if (searchParams.q) {
@@ -670,34 +668,8 @@ export function Alerts() {
});
}
- function removeFilter(filter: string) {
- // TODO: There is a cleaner way with closure to do this.
- let newFilters = filters();
- newFilters = newFilters.filter((f: any) => f !== filter);
-
- // But we have an effect to do this.. But it might not happen
- // until after the refresh. Need to revisit effect/reactive
- // dependency chains here.
- setFilters(newFilters);
-
- if (newFilters.length == 0) {
- console.log("Setting filters to null");
- setSearchParams({
- filters: undefined,
- });
- } else {
- setSearchParams({
- filters: newFilters,
- });
- }
- }
-
- const clearFilters = () => {
- setFilters([]);
- setSearchParams({ filters: null });
- };
-
- // Getter for searchParams.filters to convert to an array if there is only one "filters" parameter.
+ // Getter for searchParams.filters to convert to an array if there
+ // is only one "filters" parameter.
const getFilters = createMemo(() => {
let filters = searchParams.filters || [];
@@ -713,6 +685,13 @@ export function Alerts() {
setFilters(getFilters());
});
+ // Effect to update the query parameters when the filters signal updates.
+ createEffect(() => {
+ setSearchParams({
+ filters: filters().length == 0 ? undefined : filters(),
+ });
+ });
+
function updateSort(key: string) {
console.log("Sorting by " + key);
let order = getSortOrder();
@@ -872,11 +851,7 @@ export function Alerts() {
{/* Filter strip. */}
0}>
-
+
// SPDX-License-Identifier: MIT
-import { TIME_RANGE, Top } from "./Top";
+import { Top } from "./Top";
import * as API from "./api";
import {
createEffect,
+ createMemo,
createSignal,
For,
Match,
@@ -15,16 +16,16 @@ import {
} from "solid-js";
import { EventWrapper } from "./types";
import { Button, Col, Container, Form, Row } from "solid-bootstrap";
-import { AddressCell, TimestampCell } from "./TimestampCell";
import { useNavigate, useSearchParams } from "@solidjs/router";
import { formatEventDescription } from "./formatters";
-import { BiCaretRightFill } from "./icons";
+import { BiCaretRightFill, BiDashCircle, BiPlusCircle } from "./icons";
import tinykeys from "tinykeys";
import { scrollToClass } from "./scroll";
import { Transition } from "solid-transition-group";
import { eventIsArchived, eventSetArchived } from "./event";
import { AlertDescription } from "./Alerts";
import { EventsQueryParams } from "./api";
+import { AddressCell, FilterStrip, TimestampCell } from "./components";
// The list of event types that will be shown in dropdowns.
export const EVENT_TYPES: { name: string; eventType: string }[] = [
@@ -87,8 +88,10 @@ export function Events() {
event_type?: string;
from?: string;
to?: string;
+ filters?: string[];
}>();
const [cursor, setCursor] = createSignal(0);
+ const [filters, setFilters] = createSignal([]);
let keybindings: any = null;
onMount(() => {
@@ -131,6 +134,23 @@ export function Events() {
}
});
+ // Getter for searchParams.filters to convert to an array if there
+ // is only one "filters" parameter.
+ const getFilters = createMemo(() => {
+ let filters = searchParams.filters || [];
+
+ if (!Array.isArray(filters)) {
+ return [filters];
+ } else {
+ return filters;
+ }
+ });
+
+ // Effect to update the filter strip based on the filters in the query string.
+ createEffect(() => {
+ setFilters(getFilters());
+ });
+
createEffect(() => {
loadEvents();
});
@@ -144,15 +164,23 @@ export function Events() {
}
function loadEvents() {
- let params: EventsQueryParams = {};
+ let params: EventsQueryParams = {
+ query_string: searchParams.q || "",
+ };
if (searchParams.event_type) {
params.event_type = searchParams.event_type;
setEventType(params.event_type);
}
- if (searchParams.q) {
- params.query_string = searchParams.q;
+ /* if (searchParams.q) {
+ * params.query_string = searchParams.q;
+ * } */
+
+ //const filterQuery: string = getFilters()?.join(" ");
+ const filterQuery: string = filters()?.join(" ");
+ if (filterQuery && filterQuery.length > 0) {
+ params.query_string += " " + filterQuery;
}
if (searchParams.order) {
@@ -252,6 +280,39 @@ export function Events() {
});
}
+ function addFilter(what: string, op: string, value: any) {
+ if (op == "+") {
+ op = "";
+ }
+ let entry: string = "";
+ if (typeof value === "number") {
+ entry = `${op}${what}:${value}`;
+ } else if (value.includes(" ")) {
+ entry = `${op}${what}:"${value}"`;
+ } else {
+ entry = `${op}${what}:${value}`;
+ }
+
+ let newFilters = filters();
+
+ // If if entry already exists.
+ if (newFilters.indexOf(entry) > -1) {
+ return;
+ }
+
+ newFilters.push(entry);
+ setSearchParams({
+ filters: newFilters,
+ });
+ }
+
+ // Effect to update the query parameters when the filters signal updates.
+ createEffect(() => {
+ setSearchParams({
+ filters: filters().length == 0 ? undefined : filters(),
+ });
+ });
+
return (
<>
@@ -357,6 +418,10 @@ export function Events() {
+
+
+
+