mihari 5.2.3 → 5.3.0

data/frontend/src/components/rule/Rule.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="column">
+    <div v-if="runRuleTask.isRunning">
+      <Loading></Loading>
+      <hr />
+    </div>
+
+    <div v-if="runRuleTask.last?.error">
+      <ErrorMessage :error="runRuleTask.last.error"></ErrorMessage>
+      <hr />
+    </div>
+
+    <h2 class="is-size-2 mb-4">Rule</h2>
+
+    <p class="is-clearfix">
+      <span class="buttons is-pulled-right">
+        <button class="button is-primary is-light is-small" @click="runRule">
+          <span>Run</span>
+          <span class="icon is-small">
+            <i class="fas fa-arrow-right"></i>
+          </span>
+        </button>
+        <router-link
+          class="button is-info is-light is-small"
+          :to="{ name: 'EditRule', params: { id: rule.id } }"
+        >
+          <span>Edit</span>
+          <span class="icon is-small">
+            <i class="fas fa-edit"></i>
+          </span>
+        </router-link>
+        <button class="button is-light is-small" @click="deleteRule">
+          <span>Delete</span>
+          <span class="icon is-small">
+            <i class="fas fa-times"></i>
+          </span>
+        </button>
+      </span>
+    </p>
+
+    <YAML :yaml="rule.yaml"></YAML>
+  </div>
+
+  <hr />
+
+  <div class="column">
+    <h2 class="is-size-2 mb-4">Related alerts</h2>
+
+    <Alerts :ruleId="rule.id"></Alerts>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
+import { useRouter } from "vue-router"
+
+import { generateDeleteRuleTask, generateRunRuleTask } from "@/api-helper"
+import Alerts from "@/components/alert/AlertsWithPagination.vue"
+import ErrorMessage from "@/components/ErrorMessage.vue"
+import Loading from "@/components/Loading.vue"
+import YAML from "@/components/rule/YAML.vue"
+import type { Rule } from "@/types"
+
+export default defineComponent({
+  name: "RuleItem",
+  props: {
+    rule: {
+      type: Object as PropType<Rule>,
+      required: true
+    }
+  },
+  components: {
+    YAML,
+    Alerts,
+    Loading,
+    ErrorMessage
+  },
+  emits: ["refresh"],
+  setup(props, context) {
+    const router = useRouter()
+
+    const deleteRuleTask = generateDeleteRuleTask()
+    const runRuleTask = generateRunRuleTask()
+
+    const deleteRule = async () => {
+      const result = window.confirm(`Are you sure you want to delete ${props.rule.id}?`)
+
+      if (result) {
+        await deleteRuleTask.perform(props.rule.id)
+        router.push("/")
+      }
+    }
+
+    const runRule = async () => {
+      await runRuleTask.perform(props.rule.id)
+      context.emit("refresh")
+    }
+
+    return {
+      deleteRule,
+      runRule,
+      runRuleTask
+    }
+  }
+})
+</script>

data/frontend/src/components/rule/RuleWrapper.vue

@@ -0,0 +1,55 @@
+<template>
+  <Loading v-if="getRuleTask.isRunning"></Loading>
+
+  <ErrorMessage v-if="getRuleTask.isError" :error="getRuleTask.last?.error"></ErrorMessage>
+
+  <Rule :rule="getRuleTask.last.value" @refresh="refresh" v-if="getRuleTask.last?.value"></Rule>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, watch } from "vue"
+
+import { generateGetRuleTask } from "@/api-helper"
+import ErrorMessage from "@/components/ErrorMessage.vue"
+import Loading from "@/components/Loading.vue"
+import Rule from "@/components/rule/Rule.vue"
+
+export default defineComponent({
+  name: "RuleWrapper",
+  components: {
+    Rule,
+    Loading,
+    ErrorMessage
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const getRuleTask = generateGetRuleTask()
+
+    const getRule = async () => {
+      await getRuleTask.perform(props.id)
+    }
+
+    const refresh = async () => {
+      await getRule()
+    }
+
+    onMounted(async () => {
+      await getRule()
+    })
+
+    watch(props, async () => {
+      await getRule()
+    })
+
+    return {
+      getRuleTask,
+      refresh
+    }
+  }
+})
+</script>

data/frontend/src/components/rule/Rules.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="hasRules">
+    <table class="table is-fullwidth">
+      <tr>
+        <th>ID</th>
+        <th>Title</th>
+        <th>Description</th>
+        <th>Tags</th>
+      </tr>
+      <tr v-for="rule in rules.rules" :key="rule.id">
+        <td>
+          <router-link :to="{ name: 'Rule', params: { id: rule.id } }">{{ rule.id }}</router-link>
+        </td>
+        <td>
+          {{ rule.title }}
+        </td>
+        <td>
+          {{ rule.description }}
+        </td>
+        <td>
+          <Tags :tags="rule.tags" @update-tag="updateTag"></Tags>
+        </td>
+      </tr>
+    </table>
+  </div>
+  <Pagination
+    :currentPage="rules.currentPage"
+    :total="rules.total"
+    :pageSize="rules.pageSize"
+    @update-page="updatePage"
+  ></Pagination>
+  <p class="help">({{ rules.total }} results in total, {{ rules.rules.length }} shown)</p>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue"
+
+import Pagination from "@/components/Pagination.vue"
+import Tags from "@/components/tag/Tags.vue"
+import type { Rules } from "@/types"
+
+export default defineComponent({
+  name: "RulesItem",
+  props: {
+    rules: {
+      type: Object as PropType<Rules>,
+      required: true
+    }
+  },
+  components: {
+    Pagination,
+    Tags
+  },
+  emits: ["update-page", "refresh-page", "update-tag"],
+  setup(props, context) {
+    const scrollToTop = () => {
+      window.scrollTo({
+        top: 0
+      })
+    }
+
+    const updatePage = (page: number) => {
+      scrollToTop()
+      context.emit("update-page", page)
+    }
+
+    const refreshPage = () => {
+      scrollToTop()
+      context.emit("refresh-page")
+    }
+
+    const updateTag = (tag: string) => {
+      scrollToTop()
+      context.emit("update-tag", tag)
+    }
+
+    const hasRules = computed(() => {
+      return props.rules.rules.length > 0
+    })
+
+    return { updatePage, refreshPage, updateTag, hasRules }
+  }
+})
+</script>

data/frontend/src/components/rule/RulesWrapper.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="box mb-6">
+    <FormComponent
+      ref="form"
+      :tags="getTagsTask.last?.value || []"
+      :page="page"
+      :tag="tag"
+    ></FormComponent>
+
+    <hr />
+
+    <div class="column">
+      <div class="field is-grouped is-grouped-centered">
+        <p class="control">
+          <a class="button is-primary" @click="search">
+            <span class="icon is-small">
+              <i class="fas fa-search"></i>
+            </span>
+            <span>Search</span>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="getRulesTask.performCount > 0">
+    <hr />
+
+    <Loading v-if="getRulesTask.isRunning"></Loading>
+
+    <ErrorMessage v-if="getRulesTask.isError" :error="getRulesTask.last?.error"></ErrorMessage>
+
+    <Rules
+      :rules="getRulesTask.last.value"
+      v-if="getRulesTask.last?.value"
+      @refresh-page="refreshPage"
+      @update-page="updatePage"
+      @update-tag="updateTag"
+    ></Rules>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, ref, watch } from "vue"
+
+import { generateGetRulesTask, generateGetTagsTask } from "@/api-helper"
+import ErrorMessage from "@/components/ErrorMessage.vue"
+import Loading from "@/components/Loading.vue"
+import FormComponent from "@/components/rule/Form.vue"
+import Rules from "@/components/rule/Rules.vue"
+import type { RuleSearchParams } from "@/types"
+
+export default defineComponent({
+  name: "RulesWrapper",
+  components: {
+    Rules,
+    Loading,
+    FormComponent,
+    ErrorMessage
+  },
+  setup() {
+    const page = ref(1)
+    const tag = ref<string | undefined>(undefined)
+    const form = ref<InstanceType<typeof FormComponent>>()
+
+    const getRulesTask = generateGetRulesTask()
+    const getTagsTask = generateGetTagsTask()
+
+    const getRules = async () => {
+      const params = form.value?.getSearchParams() as RuleSearchParams
+      return await getRulesTask.perform(params)
+    }
+
+    const updatePage = (newPage: number) => {
+      page.value = newPage
+    }
+
+    const resetPage = () => {
+      page.value = 1
+    }
+
+    const search = async () => {
+      // reset page
+      resetPage()
+
+      await getRules()
+    }
+
+    const updateTag = (newTag: string | undefined) => {
+      if (tag.value === newTag) {
+        tag.value = undefined
+      } else {
+        tag.value = newTag
+      }
+
+      nextTick(async () => await search())
+    }
+
+    const refreshPage = async () => {
+      // it is just an alias of search
+      // this function will be invoked when a rule is deleted
+      await search()
+    }
+
+    onMounted(async () => {
+      getTagsTask.perform()
+      await getRules()
+    })
+
+    watch([page, tag], async () => {
+      nextTick(async () => await getRules())
+    })
+
+    return {
+      form,
+      getRulesTask,
+      getTagsTask,
+      page,
+      tag,
+      refreshPage,
+      search,
+      updatePage,
+      updateTag
+    }
+  }
+})
+</script>

data/frontend/src/components/rule/YAML.vue

@@ -0,0 +1,44 @@
+<template>
+  <pre ref="pre" class="line-numbers"><code class="language-yaml">{{ yaml }}</code></pre>
+</template>
+
+<script lang="ts">
+// eslint-disable-next-line simple-import-sort/imports
+import { defineComponent, onMounted, ref } from "vue"
+
+import Prism from "prismjs"
+
+import "prismjs/components/prism-yaml"
+import "prismjs/plugins/custom-class/prism-custom-class"
+import "prismjs/plugins/line-numbers/prism-line-numbers.css"
+import "prismjs/plugins/line-numbers/prism-line-numbers"
+import "prismjs/themes/prism-twilight.css"
+
+export default defineComponent({
+  name: "YAML",
+  props: {
+    yaml: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    const pre = ref<HTMLElement | undefined>(undefined)
+
+    Prism.plugins.customClass.map({
+      number: "prism-number",
+      tag: "prism-tag"
+    })
+
+    onMounted(() => {
+      if (pre.value) {
+        pre.value.querySelectorAll("code").forEach((elem) => {
+          Prism.highlightElement(elem)
+        })
+      }
+    })
+
+    return { pre }
+  }
+})
+</script>

data/frontend/src/components/tag/Tag.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="control" v-if="!isDeleted">
+    <div
+      class="tags has-addons are-medium"
+      v-on:mouseover="showDeleteButton"
+      v-on:mouseleave="hideDeleteButton"
+    >
+      <span class="tag is-info is-light" @click="updateTag">{{ tag.name }}</span>
+      <a class="tag is-delete" v-if="isDeleteButtonEnabled" @click="deleteTag"></a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref } from "vue"
+
+import { generateDeleteTagTask } from "@/api-helper"
+import type { Tag } from "@/types"
+
+export default defineComponent({
+  name: "TagItem",
+  props: {
+    tag: {
+      type: Object as PropType<Tag>,
+      required: true
+    }
+  },
+  setup(props, context) {
+    const isDeleted = ref(false)
+    const isDeleteButtonEnabled = ref(false)
+
+    const deleteTagTask = generateDeleteTagTask()
+
+    const deleteTag = async () => {
+      const result = window.confirm(`Are you sure you want to delete ${props.tag.name}?`)
+
+      if (result) {
+        await deleteTagTask.perform(props.tag.name)
+        isDeleted.value = true
+      }
+    }
+
+    const showDeleteButton = () => {
+      isDeleteButtonEnabled.value = true
+    }
+
+    const hideDeleteButton = () => {
+      isDeleteButtonEnabled.value = false
+    }
+
+    const updateTag = () => {
+      context.emit("update-tag", props.tag.name)
+    }
+
+    return {
+      updateTag,
+      isDeleted,
+      deleteTag,
+      showDeleteButton,
+      hideDeleteButton,
+      isDeleteButtonEnabled
+    }
+  }
+})
+</script>

data/frontend/src/components/tag/Tags.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="field is-grouped is-grouped-multiline">
+    <TagComponent
+      v-for="tag in tags"
+      :tag="tag"
+      :key="tag.name"
+      @update-tag="updateTag"
+    ></TagComponent>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
+
+import TagComponent from "@/components/tag/Tag.vue"
+import type { Tag } from "@/types"
+
+export default defineComponent({
+  name: "TagsItem",
+  components: {
+    TagComponent
+  },
+  props: {
+    tags: {
+      type: Array as PropType<Tag[]>,
+      required: true
+    }
+  },
+  setup(_, context) {
+    const updateTag = (tag: string) => {
+      context.emit("update-tag", tag)
+    }
+
+    return { updateTag }
+  }
+})
+</script>