Added basic alerts overview filters.

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;