Added basic alerts overview filters.
This commit is contained in:
parent
57d3615f71
commit
5c03b59082
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue