add alert item highlight feature

frontend/src/components/incidentManagement/alerts/AlertItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="alert-item"
-		:class="['status-' + alert?.status, { compact, embedded, 'cursor-pointer': compact }]"
+		:class="['status-' + alert?.status, { compact, embedded, 'cursor-pointer': compact, highlight }]"
 		@click="compact ? openDetails() : undefined"
 	>
 		<n-spin :show="loading">
@@ -229,7 +229,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, toRefs } from "vue"
+import { computed, onBeforeMount, onMounted, ref, toRefs } from "vue"
 import { NModal, NPopover, NButton, NSpin, NTooltip, NCard, useMessage, useDialog } from "naive-ui"
 import { useSettingsStore } from "@/stores/settings"
 import { useGoto } from "@/composables/useGoto"
@@ -253,10 +253,13 @@ const props = defineProps<{
 	alertId?: number
 	compact?: boolean
 	embedded?: boolean
+	detailsOnMounted?: boolean
+	highlight?: boolean
 }>()
-const { alertData, alertId, compact, embedded } = toRefs(props)
+const { alertData, alertId, compact, embedded, detailsOnMounted, highlight } = toRefs(props)
 
 const emit = defineEmits<{
+	(e: "opened"): void
 	(e: "deleted"): void
 	(e: "updated", value: Alert): void
 }>()
@@ -327,6 +330,7 @@ function emitDelete() {
 }
 
 function openDetails() {
+	emit("opened")
 	showDetails.value = true
 }
 
@@ -343,6 +347,12 @@ onBeforeMount(() => {
 		alert.value = _clone(alertData.value)
 	}
 })
+
+onMounted(() => {
+	if (detailsOnMounted.value) {
+		openDetails()
+	}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -387,6 +397,10 @@ onBeforeMount(() => {
 		box-shadow: 0px 0px 0px 1px var(--primary-color);
 	}
 
+	&.highlight {
+		box-shadow: 0px 0px 0px 1px var(--primary-color);
+	}
+
 	&:not(.compact) {
 		.header-box {
 			.id {

frontend/src/components/incidentManagement/alerts/AlertsList.vue

@@ -126,7 +126,10 @@
 						v-for="alert of alertsList"
 						:key="alert.id"
 						:alertData="alert"
+						:highlight="highlight === alert.id.toString()"
+						:detailsOnMounted="highlight === alert.id.toString() && !highlightedItemOpened"
 						class="item-appear item-appear-bottom item-appear-005"
+						@opened="highlightedItemOpened = true"
 						@deleted="getData()"
 						@updated="updateAlert($event)"
 					/>
@@ -149,7 +152,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeMount, computed, watch, provide } from "vue"
+import { ref, onBeforeMount, computed, watch, provide, toRefs, nextTick } from "vue"
 import {
 	useMessage,
 	NSpin,
@@ -177,6 +180,9 @@ export interface AlertsListFilter {
 	value: string | AlertStatus
 }
 
+const props = defineProps<{ highlight: string | null | undefined }>()
+const { highlight } = toRefs(props)
+
 const FilterIcon = "carbon:filter-edit"
 const InfoIcon = "carbon:information"
 
@@ -223,6 +229,9 @@ const statusOptions: { label: string; value: AlertStatus }[] = [
 
 const usersOptions = computed(() => availableUsers.value.map(o => ({ label: o, value: o })))
 
+const highlightedItemFound = ref(!highlight.value)
+const highlightedItemOpened = ref(!highlight.value)
+
 watch(showFilters, val => {
 	if (!val) {
 		filters.value = _cloneDeep(lastFilters.value)
@@ -248,6 +257,27 @@ watch(pageSize, () => {
 	}
 })
 
+watch(
+	alertsList,
+	() => {
+		if (
+			alertsList.value.length &&
+			!alertsList.value.find(o => o.id.toString() === highlight.value) &&
+			currentPage.value < total.value &&
+			!highlightedItemFound.value
+		) {
+			nextTick(() => {
+				currentPage.value++
+			})
+		}
+
+		if (alertsList.value.find(o => o.id.toString() === highlight.value)) {
+			highlightedItemFound.value = true
+		}
+	},
+	{ immediate: true }
+)
+
 provide("assignable-users", availableUsers)
 
 provide("linkable-cases", linkableCases)

frontend/src/components/incidentManagement/cases/CaseItem.vue

@@ -220,12 +220,12 @@ import { useSettingsStore } from "@/stores/settings"
 const props = defineProps<{
 	caseData?: Case
 	caseId?: number
-	detailsOnMounted?: boolean
 	compact?: boolean
 	embedded?: boolean
+	detailsOnMounted?: boolean
 	highlight?: boolean
 }>()
-const { caseData, caseId, detailsOnMounted, compact, embedded, highlight } = toRefs(props)
+const { caseData, caseId, compact, embedded, detailsOnMounted, highlight } = toRefs(props)
 
 const emit = defineEmits<{
 	(e: "opened"): void

frontend/src/components/incidentManagement/cases/CasesList.vue

@@ -159,7 +159,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeMount, computed, watch, toRefs, provide } from "vue"
+import { ref, onBeforeMount, computed, watch, toRefs, provide, nextTick } from "vue"
 import {
 	useMessage,
 	NSpin,
@@ -196,11 +196,11 @@ const showFilters = ref(false)
 const casesList = ref<Case[]>([])
 const availableUsers = ref<string[]>([])
 
-const pageSize = ref(5)
+const pageSize = ref(25)
 const currentPage = ref(1)
 const simpleMode = ref(false)
 const showSizePicker = ref(true)
-const pageSizes = [5, 10, 25, 50, 100]
+const pageSizes = [10, 25, 50, 100]
 const header = ref()
 const pageSlot = ref(8)
 
@@ -280,11 +280,14 @@ watch(
 		const totalPages = Math.ceil(casesList.value.length / pageSize.value)
 
 		if (
+			itemsPaginated.value.length &&
 			!itemsPaginated.value.find(o => o.id.toString() === highlight.value) &&
 			currentPage.value < totalPages &&
 			!highlightedItemFound.value
 		) {
-			currentPage.value++
+			nextTick(() => {
+				currentPage.value++
+			})
 		}
 
 		if (itemsPaginated.value.find(o => o.id.toString() === highlight.value)) {

frontend/src/views/incidentManagement/Alerts.vue

@@ -1,9 +1,21 @@
 <template>
 	<div class="page">
-		<AlertsList />
+		<AlertsList :highlight />
 	</div>
 </template>
 
 <script setup lang="ts">
 import AlertsList from "@/components/incidentManagement/alerts/AlertsList.vue"
+import { onBeforeMount, ref } from "vue"
+import { useRoute } from "vue-router"
+
+const route = useRoute()
+
+const highlight = ref<string | undefined>(undefined)
+
+onBeforeMount(() => {
+	if (route.query?.alert_id) {
+		highlight.value = route.query.alert_id.toString() || undefined
+	}
+})
 </script>