| 1 | <template> |
| 2 | <div class="page"> |
| 3 | <n-tabs v-model:value="activeTab" type="line" animated> |
| 4 | <n-tab-pane name="messages" tab="Messages" display-directive="show:lazy"> |
| 5 | <Messages /> |
| 6 | </n-tab-pane> |
| 7 | <n-tab-pane name="alerts" tab="Alerts" display-directive="show:lazy"> |
| 8 | <Alerts @click-event="gotoEventsPage($event)" /> |
| 9 | </n-tab-pane> |
| 10 | <n-tab-pane name="events" tab="Events" display-directive="show:lazy"> |
| 11 | <Events :highlight="highlightEvent" @loaded="events = $event" /> |
| 12 | </n-tab-pane> |
| 13 | <n-tab-pane name="streams" tab="Streams" display-directive="show:lazy"> |
| 14 | <Streams /> |
| 15 | </n-tab-pane> |
| 16 | <n-tab-pane name="provisioning" tab="Alert Provisioning" display-directive="show:lazy"> |
| 17 | <MonitoringAlerts :events-list="events" /> |
| 18 | </n-tab-pane> |
| 19 | <template #suffix> |
| 20 | <n-button ghost type="primary" size="small" @click="showInputDrawer = true">Inputs</n-button> |
| 21 | </template> |
| 22 | </n-tabs> |
| 23 | |
| 24 | <n-drawer |
| 25 | v-model:show="showInputDrawer" |
| 26 | :width="700" |
| 27 | style="max-width: 90vw" |
| 28 | :trap-focus="false" |
| 29 | display-directive="show" |
| 30 | > |
| 31 | <n-drawer-content title="Inputs" closable body-content-style="padding:0"> |
| 32 | <Inputs /> |
| 33 | </n-drawer-content> |
| 34 | </n-drawer> |
| 35 | </div> |
| 36 | </template> |
| 37 | |
| 38 | <script setup lang="ts"> |
| 39 | import type { EventDefinition } from "@/types/graylog/event-definition.d" |
| 40 | import { NButton, NDrawer, NDrawerContent, NTabPane, NTabs } from "naive-ui" |
| 41 | import { defineAsyncComponent, onBeforeMount, ref, watch } from "vue" |
| 42 | import { useRoute, useRouter } from "vue-router" |
| 43 | |
| 44 | const Messages = defineAsyncComponent(() => import("@/components/graylog/Messages/List.vue")) |
| 45 | const Alerts = defineAsyncComponent(() => import("@/components/graylog/Alerts/List.vue")) |
| 46 | const Events = defineAsyncComponent(() => import("@/components/graylog/Events/List.vue")) |
| 47 | const Streams = defineAsyncComponent(() => import("@/components/graylog/Streams/List.vue")) |
| 48 | const MonitoringAlerts = defineAsyncComponent(() => import("@/components/graylog/MonitoringAlerts/List.vue")) |
| 49 | const Inputs = defineAsyncComponent(() => import("@/components/graylog/Inputs/List.vue")) |
| 50 | |
| 51 | const tabsList = ["messages", "alerts", "events", "streams", "provisioning"] |
| 52 | const drawersList = ["inputs"] |
| 53 | |
| 54 | const activeTab = ref<string>(tabsList[0] || "") |
| 55 | const highlightEvent = ref<string | undefined>(undefined) |
| 56 | const showInputDrawer = ref(false) |
| 57 | const events = ref<EventDefinition[]>([]) |
| 58 | const route = useRoute() |
| 59 | const router = useRouter() |
| 60 | |
| 61 | function gotoEventsPage(event_definition_id: string) { |
| 62 | activeTab.value = "events" |
| 63 | highlightEvent.value = event_definition_id |
| 64 | } |
| 65 | |
| 66 | watch(activeTab, val => { |
| 67 | router.replace({ hash: `#${val}` }) |
| 68 | }) |
| 69 | |
| 70 | onBeforeMount(() => { |
| 71 | const hash = route.hash ? route.hash.slice(1) : "" |
| 72 | if (hash && tabsList.includes(hash)) { |
| 73 | activeTab.value = hash |
| 74 | } |
| 75 | if (hash && drawersList.includes(hash)) { |
| 76 | if (hash === "inputs") { |
| 77 | showInputDrawer.value = true |
| 78 | } |
| 79 | } |
| 80 | }) |
| 81 | </script> |