mihari 5.2.3 → 5.2.4

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

@@ -0,0 +1,108 @@
+<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, 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 { 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,62 @@
+<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,88 @@
+<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, PropType } from "vue";
+
+import Pagination from "@/components/Pagination.vue";
+import Tags from "@/components/tag/Tags.vue";
+import { 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,130 @@
+<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 { 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,47 @@
+<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,73 @@
+<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, PropType, ref } from "vue";
+
+import { generateDeleteTagTask } from "@/api-helper";
+import { 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, PropType } from "vue";
+
+import TagComponent from "@/components/tag/Tag.vue";
+import { 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>