| 1 | <template> |
| 2 | <div class="flex flex-col gap-6"> |
| 3 | <header class="flex flex-col gap-4"> |
| 4 | <div class="flex flex-wrap items-end justify-between gap-3"> |
| 5 | <div class="flex flex-col gap-1"> |
| 6 | <div class="flex items-center gap-3"> |
| 7 | <Icon :name="CatalogIcon" :size="22" /> |
| 8 | <h2 class="text-2xl font-semibold">Detections Catalog</h2> |
| 9 | </div> |
| 10 | <p class="text-sm"> |
| 11 | Discovery surface for the CoPilot detection corpus and the Wazuh ruleset. Browse the CoPilot |
| 12 | Searches grouped by analytic story, inspect every Wazuh rule shipped by the manager, see your |
| 13 | MITRE coverage gaps, and pivot by compliance framework. |
| 14 | </p> |
| 15 | </div> |
| 16 | </div> |
| 17 | |
| 18 | <DetectionCatalogStats /> |
| 19 | </header> |
| 20 | |
| 21 | <n-tabs type="line" animated> |
| 22 | <n-tab-pane name="stories" tab="CoPilot Searches" display-directive="show:lazy"> |
| 23 | <StoriesIndex /> |
| 24 | </n-tab-pane> |
| 25 | <n-tab-pane name="wazuh" tab="Wazuh Rules" display-directive="show:lazy"> |
| 26 | <WazuhRulesIndex /> |
| 27 | </n-tab-pane> |
| 28 | <n-tab-pane name="gaps" tab="Coverage Gaps" display-directive="show:lazy"> |
| 29 | <CoverageGapsIndex /> |
| 30 | </n-tab-pane> |
| 31 | <n-tab-pane name="compliance" tab="Compliance" display-directive="show:lazy"> |
| 32 | <ComplianceIndex /> |
| 33 | </n-tab-pane> |
| 34 | </n-tabs> |
| 35 | </div> |
| 36 | </template> |
| 37 | |
| 38 | <script setup lang="ts"> |
| 39 | import { NTabPane, NTabs } from "naive-ui" |
| 40 | import Icon from "@/components/common/Icon.vue" |
| 41 | import ComplianceIndex from "./ComplianceIndex.vue" |
| 42 | import CoverageGapsIndex from "./CoverageGapsIndex.vue" |
| 43 | import DetectionCatalogStats from "./DetectionCatalogStats.vue" |
| 44 | import StoriesIndex from "./StoriesIndex.vue" |
| 45 | import WazuhRulesIndex from "./WazuhRulesIndex.vue" |
| 46 | |
| 47 | const CatalogIcon = "carbon:catalog" |
| 48 | </script> |