Monitoring alerts (#202)

* Update content pack names in graylog/schema/provision.py * Update wazuh.py to remove commented out code * added monitoring alerts api * added goto composable * added Soc-PendingAlerts page * added monitoring alert type * refactor goto functions * refactor goto agent func * refactor goto index func * refactor goto func * refactor goto func * updated monitoring api/types * improved style * added monitoring alerts components * updated todo * updated monitoring alert components * uncomment non alert removal --------- Co-authored-by: Davide Di Modica <[email protected]>
socfortress · Apr 27, 2024 · d8c53b2 · d8c53b2
1 parent 22fca92
commit d8c53b2
Show file tree

Hide file tree

Showing 37 changed files with 631 additions and 181 deletions.
diff --git a/backend/app/stack_provisioning/graylog/schema/provision.py b/backend/app/stack_provisioning/graylog/schema/provision.py
@@ -14,10 +14,10 @@ class AvailableContentPacks(str, Enum):
         " Pipelines, and Lookup Tables for Wazuh logs and the SOCFortress SIEM stack."
     )
     # ! COMMENTING OUT UNTIL READY ! #
-    # SOCFORTRESS_FORTINET_INPUT_SYSLOG_TCP = "The Fortinet Input Syslog TCP content pack"
-    # SOCFORTRESS_FORTINET_INPUT_SYSLOG_UDP = "The Fortinet Input Syslog UDP content pack"
-    # SOCFORTRESS_FORTINET_PROCESSING_PIPELINE = "The Fortinet Processing Pipeline content pack"
-    # SOCFORTRESS_FORTINET_STREAM = "The Fortinet Stream content pack"
+    SOCFORTRESS_FORTINET_INPUT_SYSLOG_TCP = "The Fortinet Input Syslog TCP content pack"
+    SOCFORTRESS_FORTINET_INPUT_SYSLOG_UDP = "The Fortinet Input Syslog UDP content pack"
+    SOCFORTRESS_FORTINET_PROCESSING_PIPELINE = "The Fortinet Processing Pipeline content pack"
+    SOCFORTRESS_FORTINET_STREAM = "The Fortinet Stream content pack"
 
 
 class ContentPackKeywords(BaseModel):

diff --git a/frontend/src/api/monitoringAlerts.ts b/frontend/src/api/monitoringAlerts.ts
@@ -1,6 +1,6 @@
 import { type FlaskBaseResponse } from "@/types/flask.d"
 import { HttpClient } from "./httpClient"
-import type { AvailableMonitoringAlert } from "@/types/monitoringAlerts.d"
+import type { AvailableMonitoringAlert, MonitoringAlert } from "@/types/monitoringAlerts.d"
 
 export interface ProvisionsMonitoringAlertParams {
 	searchWithinLast: number
@@ -42,5 +42,17 @@ export default {
 	},
 	customProvision(payload: CustomProvisionPayload) {
 		return HttpClient.post<FlaskBaseResponse>(`/monitoring_alert/provision/custom`, payload)
+	},
+	listAll(signal?: AbortSignal) {
+		return HttpClient.get<FlaskBaseResponse & { monitoring_alerts: MonitoringAlert[] }>(
+			`/monitoring_alert/list`,
+			signal ? { signal } : {}
+		)
+	},
+	invoke(alertId: number) {
+		return HttpClient.post<FlaskBaseResponse>(`/monitoring_alert/invoke/${alertId}`)
+	},
+	delete(alertId: number) {
+		return HttpClient.delete<FlaskBaseResponse>(`/monitoring_alert/${alertId}`)
 	}
 }
diff --git a/frontend/src/assets/scss/helpers.scss b/frontend/src/assets/scss/helpers.scss
@@ -69,7 +69,7 @@
 	}
 }
 
-.overlay {
+.over-layer {
 	background-color: rgba(var(--bg-body-rgb), 0.8);
 	position: absolute;
 	top: 0;

diff --git a/frontend/src/components/agents/OverviewSection.vue b/frontend/src/components/agents/OverviewSection.vue
@@ -7,7 +7,7 @@
 					<template v-if="item.key === 'customer_code'">
 						<code
 							class="cursor-pointer text-primary-color"
-							@click="gotoCustomer(item.val)"
+							@click="gotoCustomer({ code: item.val })"
 							v-if="item.val && item.val !== '-'"
 						>
 							{{ item.val }}
@@ -31,16 +31,16 @@ import { type Agent } from "@/types/agents.d"
 import { useSettingsStore } from "@/stores/settings"
 import KVCard from "@/components/common/KVCard.vue"
 import Icon from "@/components/common/Icon.vue"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{
 	agent: Agent
 }>()
 const { agent } = toRefs(props)
 
 const LinkIcon = "carbon:launch"
-const router = useRouter()
 const dFormats = useSettingsStore().dateFormat
+const { gotoCustomer } = useGoto()
 
 const propsSanitized = computed(() => {
 	const obj = []
@@ -56,10 +56,6 @@ const propsSanitized = computed(() => {
 
 	return obj
 })
-
-function gotoCustomer(code: string | number) {
-	router.push({ name: "Customers", query: { code } })
-}
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/components/alerts/Alert.vue b/frontend/src/components/alerts/Alert.vue
@@ -47,7 +47,7 @@
 								agent_id:
 								<code
 									class="cursor-pointer text-primary-color"
-									@click="gotoAgentPage(alert._source.agent_id)"
+									@click="gotoAgent(alert._source.agent_id)"
 								>
 									{{ alert._source.agent_id }}
 									<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
@@ -65,7 +65,7 @@
 								agent_labels_customer:
 								<code
 									class="cursor-pointer text-primary-color"
-									@click="gotoCustomer(alert._source.agent_labels_customer)"
+									@click="gotoCustomer({ code: alert._source.agent_labels_customer })"
 								>
 									{{ alert._source.agent_labels_customer }}
 									<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
@@ -131,13 +131,16 @@
 							<template #key>{{ key }}</template>
 							<template #value>
 								<template v-if="key === 'agent_id'">
-									<code class="cursor-pointer text-primary-color" @click="gotoAgentPage(value + '')">
+									<code class="cursor-pointer text-primary-color" @click="gotoAgent(value + '')">
 										{{ value }}
 										<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 									</code>
 								</template>
 								<template v-else-if="key === 'agent_labels_customer'">
-									<code class="cursor-pointer text-primary-color" @click="gotoCustomer(value + '')">
+									<code
+										class="cursor-pointer text-primary-color"
+										@click="gotoCustomer(value ? { code: value.toString() } : undefined)"
+									>
 										{{ value }}
 										<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 									</code>
@@ -226,9 +229,9 @@ const AlertActions = defineAsyncComponent(() => import("./AlertActions.vue"))
 import type { Alert } from "@/types/alerts.d"
 import { SimpleJsonViewer } from "vue-sjv"
 import "@/assets/scss/vuesjv-override.scss"
-import { useRouter } from "vue-router"
 import _pick from "lodash/pick"
 import KVCard from "@/components/common/KVCard.vue"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{ alert: Alert; hideActions?: boolean }>()
 const { alert, hideActions } = toRefs(props)
@@ -240,7 +243,7 @@ const MailIcon = "carbon:email"
 const AgentIcon = "carbon:police"
 const LinkIcon = "carbon:launch"
 
-const router = useRouter()
+const { gotoCustomer, gotoAgent } = useGoto()
 const loading = ref(false)
 const showDetails = ref(false)
 const dFormats = useSettingsStore().dateFormat
@@ -257,14 +260,6 @@ const agentProperties = computed(() => {
 		"agent_name"
 	])
 })
-
-function gotoAgentPage(agentId: string) {
-	router.push({ name: "Agent", params: { id: agentId } })
-}
-
-function gotoCustomer(code: string | number) {
-	router.push({ name: "Customers", query: { code } })
-}
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/components/alerts/AlertsSummary.vue b/frontend/src/components/alerts/AlertsSummary.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="alert-summary flex flex-col">
 		<div class="header-box flex justify-between gap-4">
-			<div class="id flex items-center gap-2" @click="gotoIndicesPage(alertsSummary.index_name)">
+			<div class="id flex items-center gap-2" @click="gotoIndex(alertsSummary.index_name)">
 				<IndexIcon :health="alertsSummary.indexStats?.health" color v-if="alertsSummary.indexStats?.health" />
 				<Icon :name="PlaceholderIcon" v-else :size="18" />
 
@@ -50,8 +50,8 @@ import Alert from "./Alert.vue"
 import IndexIcon from "@/components/indices/IndexIcon.vue"
 import Icon from "@/components/common/Icon.vue"
 import type { IndexStats } from "@/types/indices.d"
-import { useRouter } from "vue-router"
 import { ref } from "vue"
+import { useGoto } from "@/composables/useGoto"
 
 export interface AlertsSummaryExt extends AlertsSummary {
 	indexStats?: IndexStats
@@ -63,12 +63,8 @@ const ExpandIcon = "carbon:chevron-down"
 const PlaceholderIcon = "ph:question"
 const LinkIcon = "carbon:launch"
 
-const router = useRouter()
 const showAllAlerts = ref(false)
-
-function gotoIndicesPage(index: string) {
-	router.push({ name: "Indices", query: { index_name: index } })
-}
+const { gotoIndex } = useGoto()
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/components/common/Badge.vue b/frontend/src/components/common/Badge.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+// TODO: refactor
 const { type, hintCursor, pointCursor, color, href, fluid } = defineProps<{
 	type?: "splitted" | "muted" | "active" | "cursor"
 	hintCursor?: boolean

diff --git a/frontend/src/components/common/SearchDialog.vue b/frontend/src/components/common/SearchDialog.vue
@@ -75,13 +75,13 @@ import { computed, onMounted, ref } from "vue"
 import { NText, NModal, NCard, NDivider, NAvatar, NScrollbar, type ScrollbarInst } from "naive-ui"
 import { useMagicKeys, whenever } from "@vueuse/core"
 import Highlighter from "vue-highlight-words"
-import { useRouter } from "vue-router"
 import { useThemeSwitch } from "@/composables/useThemeSwitch"
 import { useFullscreenSwitch } from "@/composables/useFullscreenSwitch"
 import { useSearchDialog } from "@/composables/useSearchDialog"
 import { getOS } from "@/utils"
 import Icon from "@/components/common/Icon.vue"
 import { emitter } from "@/emitter"
+import { useGoto } from "@/composables/useGoto"
 
 const SearchIcon = "ion:search-outline"
 const ArrowEnterIcon = "fluent:arrow-enter-left-24-regular"
@@ -111,13 +111,12 @@ interface Group {
 }
 type Groups = Group[]
 
-const router = useRouter()
-
 const showSearchBox = ref(false)
 const search = ref("")
 const activeItem = ref<null | string | number>(null)
 const commandIcon = ref("⌘")
 const scrollContent = ref<(ScrollbarInst & { $el: any }) | null>(null)
+const { gotoCustomer, gotoSocAlerts, gotoAlerts, gotoConnectors } = useGoto()
 
 const groups = ref<Groups>([
 	{
@@ -130,7 +129,7 @@ const groups = ref<Groups>([
 				title: "Add a Customer",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Customers", query: { action: "add-customer" } })
+					gotoCustomer({ action: "add-customer" })
 					emitter.emit("action:add-customer")
 				}
 			},
@@ -141,7 +140,7 @@ const groups = ref<Groups>([
 				title: "Configure a connector",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Connectors" })
+					gotoConnectors()
 				}
 			},
 			{
@@ -151,7 +150,7 @@ const groups = ref<Groups>([
 				title: "View Escalated Alerts",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Soc-Alerts" })
+					gotoSocAlerts()
 				}
 			},
 			{
@@ -161,7 +160,7 @@ const groups = ref<Groups>([
 				title: "View Identified Alerts",
 				label: "Shortcut",
 				action() {
-					router.push({ name: "Alerts" })
+					gotoAlerts()
 				}
 			}
 		]

diff --git a/frontend/src/components/customers/CustomerAgents.vue b/frontend/src/components/customers/CustomerAgents.vue
@@ -8,7 +8,7 @@
 				bg-secondary
 				show-actions
 				@delete="getAgents()"
-				@click="gotoAgentPage(agent)"
+				@click="gotoAgent(agent.agent_id)"
 				class="item-appear item-appear-bottom item-appear-005"
 			/>
 			<n-empty v-if="!list.length" description="No Agents found" class="justify-center h-48" />
@@ -22,23 +22,19 @@ import AgentCard from "@/components/agents/AgentCard.vue"
 import Api from "@/api"
 import { useMessage, NSpin, NEmpty } from "naive-ui"
 import type { Customer } from "@/types/customers.d"
-import { useRouter } from "vue-router"
 import type { Agent } from "@/types/agents.d"
+import { useGoto } from "@/composables/useGoto"
 
 const props = defineProps<{
 	customer: Customer
 }>()
 const { customer } = toRefs(props)
 
 const loading = ref(false)
-const router = useRouter()
+const { gotoAgent } = useGoto()
 const message = useMessage()
 const list = ref<Agent[] | []>([])
 
-function gotoAgentPage(agent: Agent) {
-	router.push({ name: "Agent", params: { id: agent.agent_id } })
-}
-
 function getAgents() {
 	loading.value = true
 

diff --git a/frontend/src/components/customers/healthcheck/CustomerHealthcheckItem.vue b/frontend/src/components/customers/healthcheck/CustomerHealthcheckItem.vue
@@ -49,7 +49,7 @@
 					<div class="flex flex-col gap-1">
 						<div class="box">
 							agent_id:
-							<code class="cursor-pointer text-primary-color" @click="gotoAgentPage(healthData.agent_id)">
+							<code class="cursor-pointer text-primary-color" @click="gotoAgent(healthData.agent_id)">
 								{{ healthData.agent_id }}
 								<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 							</code>
@@ -92,7 +92,7 @@ import type { CustomerAgentHealth, CustomerHealthcheckSource } from "@/types/cus
 import dayjs from "@/utils/dayjs"
 import { iconFromOs } from "@/utils"
 import { useSettingsStore } from "@/stores/settings"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const { healthData, source, bgSecondary, type } = defineProps<{
 	healthData: CustomerAgentHealth
@@ -106,7 +106,7 @@ const AgentIcon = "carbon:police"
 const LinkIcon = "carbon:launch"
 
 const showDetails = ref(false)
-const router = useRouter()
+const { gotoAgent } = useGoto()
 
 const agentVersion = computed(() => {
 	let agent = ""
@@ -142,10 +142,6 @@ const dFormats = useSettingsStore().dateFormat
 function formatDate(timestamp: string | number, utc: boolean = true): string {
 	return dayjs(timestamp).utc(utc).format(dFormats.datetimesec)
 }
-
-function gotoAgentPage(agentId: string) {
-	router.push({ name: "Agent", params: { id: agentId } })
-}
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/components/graylog/Alerts/Item.vue b/frontend/src/components/graylog/Alerts/Item.vue
@@ -30,10 +30,7 @@
 						</div>
 						<div class="box">
 							index_name:
-							<code
-								class="cursor-pointer text-primary-color"
-								@click="gotoIndicesPage(alertsEvent.index_name)"
-							>
+							<code class="cursor-pointer text-primary-color" @click="gotoIndex(alertsEvent.index_name)">
 								{{ alertsEvent.index_name }}
 								<Icon :name="LinkIcon" :size="13" class="relative top-0.5" />
 							</code>
@@ -95,7 +92,7 @@ import { NPopover, NTimeline, NTimelineItem } from "naive-ui"
 import { useSettingsStore } from "@/stores/settings"
 import { formatDate } from "@/utils"
 import Icon from "@/components/common/Icon.vue"
-import { useRouter } from "vue-router"
+import { useGoto } from "@/composables/useGoto"
 
 const { alertsEvent } = defineProps<{ alertsEvent: AlertsEventElement }>()
 
@@ -107,17 +104,13 @@ const InfoIcon = "carbon:information"
 const TimeIcon = "carbon:time"
 const LinkIcon = "carbon:launch"
 
-const router = useRouter()
 const dFormats = useSettingsStore().dateFormat
+const { gotoIndex } = useGoto()
 
 function formatDateTime(timestamp: string): string {
 	return formatDate(timestamp, dFormats.datetimesec).toString()
 }
 
-function gotoIndicesPage(index: string) {
-	router.push({ name: "Indices", query: { index_name: index } })
-}
-
 function gotoEventsPage(event_definition_id: string) {
 	emit("clickEvent", event_definition_id)
 }