Added basic alerts overview filters.

assets/img/icons/regexp.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="21" height="16" viewBox="0 0 21 16">
+<path d="M14.964 7.134c-0.809-0.467-1.915-0.854-2.865-1.134 0.95-0.28 2.056-0.667 2.865-1.134 0.478-0.276 0.642-0.888 0.366-1.366s-0.888-0.642-1.366-0.366c-0.809 0.467-1.697 1.232-2.415 1.914 0.232-0.963 0.45-2.114 0.45-3.048 0-0.552-0.448-1-1-1s-1 0.448-1 1c0 0.934 0.218 2.086 0.45 3.048-0.717-0.683-1.606-1.447-2.415-1.914-0.478-0.276-1.090-0.112-1.366 0.366s-0.112 1.090 0.366 1.366c0.809 0.467 1.915 0.854 2.865 1.134-0.95 0.28-2.056 0.667-2.865 1.134-0.478 0.276-0.642 0.888-0.366 1.366s0.888 0.642 1.366 0.366c0.809-0.467 1.697-1.232 2.415-1.914-0.232 0.963-0.45 2.114-0.45 3.048 0 0.552 0.448 1 1 1s1-0.448 1-1c0-0.934-0.218-2.086-0.45-3.048 0.717 0.683 1.606 1.447 2.415 1.914 0.478 0.276 1.090 0.112 1.366-0.366s0.112-1.090-0.366-1.366z"></path>
+<path d="M7 13.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
+<path d="M0 16l4-16h2l-4 16z"></path>
+<path d="M15 16l4-16h2l-4 16z"></path>
+</svg>

assets/img/icons/regexp2.svg

@@ -0,0 +1,4 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<path d="M15.15 0h-11.235c-0.562 0-1.106 0.442-1.21 0.983l-2.688 14.034c-0.104 0.541 0.271 0.983 0.833 0.983h11.235c0.562 0 1.106-0.442 1.21-0.983l2.688-14.034c0.104-0.541-0.271-0.983-0.833-0.983zM11.964 9.134c0.478 0.276 0.642 0.888 0.366 1.366s-0.888 0.642-1.366 0.366c-0.809-0.467-1.697-1.232-2.415-1.914 0.232 0.963 0.45 2.114 0.45 3.048 0 0.552-0.448 1-1 1s-1-0.448-1-1c0-0.934 0.218-2.085 0.45-3.048-0.717 0.683-1.606 1.447-2.415 1.914-0.478 0.276-1.090 0.112-1.366-0.366s-0.112-1.090 0.366-1.366c0.809-0.467 1.915-0.854 2.865-1.134-0.95-0.28-2.056-0.667-2.865-1.134-0.478-0.276-0.642-0.888-0.366-1.366s0.888-0.642 1.366-0.366c0.809 0.467 1.697 1.232 2.415 1.914-0.232-0.963-0.45-2.114-0.45-3.048 0-0.552 0.448-1 1-1s1 0.448 1 1c0 0.934-0.218 2.086-0.45 3.048 0.717-0.683 1.606-1.447 2.415-1.914 0.478-0.276 1.090-0.112 1.366 0.366s0.112 1.090-0.366 1.366c-0.809 0.467-1.915 0.854-2.865 1.134 0.95 0.28 2.056 0.667 2.865 1.134z"></path>
+</svg>

components/alerts/alerts.vue

@@ -12,9 +12,60 @@
 			</button>
 		</div>
 
+		<div class="filters">
+			<input
+				v-model="query"
+				type="search"
+				class="input filters-search"
+				placeholder="Search alerts"
+			>
+
+			<div class="filters-filters">
+				<Icon
+					icon="star"
+					title="Only show actor alerts"
+					class="noselect"
+					:class="{ active: filterActors }"
+					@click="filterActors = !filterActors"
+				/>
+
+				<Icon
+					icon="price-tags"
+					title="Only show tag alerts"
+					class="noselect"
+					:class="{ active: filterTags }"
+					@click="filterTags = !filterTags"
+				/>
+
+				<Icon
+					icon="device_hub"
+					title="Only show channel alerts"
+					class="noselect"
+					:class="{ active: filterEntities }"
+					@click="filterEntities = !filterEntities"
+				/>
+
+				<Icon
+					icon="regexp"
+					title="Only show expression alerts"
+					class="noselect"
+					:class="{ active: filterExpressions }"
+					@click="filterExpressions = !filterExpressions"
+				/>
+
+				<Icon
+					icon="target3"
+					title="Only show uncombined alerts"
+					class="noselect uncombined"
+					:class="{ active: filterCombined }"
+					@click="filterCombined = !filterCombined"
+				/>
+			</div>
+		</div>
+
 		<ul class="alerts nolist">
 			<li
-				v-for="alert in alerts"
+				v-for="alert in filteredAlerts"
 				:key="`alert-${alert.id}`"
 				class="alert"
 			>
@@ -168,7 +219,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 import { format } from 'date-fns';
 
 import AlertDialog from '#/components/alerts/create.vue';
@@ -181,6 +232,57 @@ const alerts = ref(pageContext.pageProps.alerts);
 const showAlertDialog = ref(false);
 const done = ref(true);
 
+const query = ref('');
+const filterActors = ref(false);
+const filterEntities = ref(false);
+const filterTags = ref(false);
+const filterExpressions = ref(false);
+const filterCombined = ref(false);
+
+const filteredAlerts = computed(() => {
+	const queryRegex = new RegExp(query.value, 'i');
+
+	return alerts.value.filter((alert) => {
+		if (filterActors.value && alert.actors.length === 0) {
+			return false;
+		}
+
+		if (filterEntities.value && alert.entities.length === 0) {
+			return false;
+		}
+
+		if (filterTags.value && alert.tags.length === 0) {
+			return false;
+		}
+
+		if (filterExpressions.value && alert.matches.length === 0) {
+			return false;
+		}
+
+		if (filterCombined.value && [...alert.actors, ...alert.entities, ...alert.tags, ...alert.matches].length > 1) {
+			return false;
+		}
+
+		if (alert.actors.some((actor) => queryRegex.test(actor.name))) {
+			return true;
+		}
+
+		if (alert.tags.some((tag) => queryRegex.test(tag.name))) {
+			return true;
+		}
+
+		if (alert.entities.some((entity) => queryRegex.test(entity.name))) {
+			return true;
+		}
+
+		if (alert.matches.some((match) => queryRegex.test(match.expression))) {
+			return true;
+		}
+
+		return false;
+	});
+});
+
 async function reloadAlerts() {
 	alerts.value = await get('/alerts');
 }
@@ -223,6 +325,37 @@ async function removeAlert(alert) {
 	margin-bottom: 1rem;
 }
 
+.filters {
+	display: flex;
+	align-items: center;
+	padding-left: .5rem;
+	margin-bottom: .5rem;
+
+	.input {
+		margin-right: 1rem;
+	}
+
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		padding: .25rem .5rem;
+		fill: var(--glass);
+
+		&:hover {
+			fill: var(--primary);
+			cursor: pointer;
+		}
+
+		&.active {
+			fill: var(--primary);
+		}
+	}
+
+	.uncombined {
+		margin-left: .5rem;
+	}
+}
+
 .alert {
 	padding: 0 0 0 .5rem;
 	display: flex;