| 1 | <template> |
| 2 | <n-tabs type="line" animated :tabs-padding="24"> |
| 3 | <n-tab-pane name="Wazuh Rules" tab="Wazuh Rules" display-directive="show"> |
| 4 | <div class="p-6 pt-3"> |
| 5 | <CodeSource :code="wazuh_rule" lang="xml" /> |
| 6 | </div> |
| 7 | </n-tab-pane> |
| 8 | <n-tab-pane name="Explanation" tab="Explanation" display-directive="show"> |
| 9 | <div class="p-6 pt-3"> |
| 10 | <n-input |
| 11 | :value="data.explanation" |
| 12 | type="textarea" |
| 13 | size="large" |
| 14 | readonly |
| 15 | placeholder="Empty" |
| 16 | :autosize="{ |
| 17 | minRows: 3 |
| 18 | }" |
| 19 | /> |
| 20 | </div> |
| 21 | </n-tab-pane> |
| 22 | </n-tabs> |
| 23 | </template> |
| 24 | |
| 25 | <script setup lang="ts"> |
| 26 | import type { WazuhRuleExclude } from "@/types/alerts.d" |
| 27 | import { NInput, NTabPane, NTabs } from "naive-ui" |
| 28 | import { computed, defineAsyncComponent, toRefs } from "vue" |
| 29 | |
| 30 | const props = defineProps<{ data: WazuhRuleExclude }>() |
| 31 | |
| 32 | const CodeSource = defineAsyncComponent(() => import("@/components/common/CodeSource.vue")) |
| 33 | |
| 34 | const { data } = toRefs(props) |
| 35 | |
| 36 | const WAZUH_RULE_BACKSLASH_REGEX = /\\\\/g |
| 37 | |
| 38 | const wazuh_rule = computed(() => data.value.wazuh_rule.replace(WAZUH_RULE_BACKSLASH_REGEX, "\\\\\\\\")) |
| 39 | </script> |
| 40 | |
| 41 | <style lang="scss" scoped> |
| 42 | .scrollbar-styled { |
| 43 | :deep() { |
| 44 | pre { |
| 45 | background-color: var(--bg-secondary-color) !important; |
| 46 | border-radius: var(--border-radius); |
| 47 | border: 1px solid var(--border-color); |
| 48 | overflow: hidden; |
| 49 | } |
| 50 | code { |
| 51 | background-color: transparent; |
| 52 | } |
| 53 | } |
| 54 | } |
| 55 | </style> |