mihari 5.7.0 → 5.7.1

data/frontend/src/components/config/ConfigsWrapper.vue

@@ -1,32 +0,0 @@
-<template>
-  <Loading v-if="getConfigsTask.isRunning"></Loading>
-  <ErrorMessage v-if="getConfigsTask.isError" :error="getConfigsTask.last?.error"></ErrorMessage>
-  <Configs :configs="getConfigsTask.last.value" v-if="getConfigsTask.last?.value"></Configs>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted } from "vue"
-
-import { generateGetConfigsTask } from "@/api-helper"
-import Configs from "@/components/config/Configs.vue"
-import ErrorMessage from "@/components/ErrorMessage.vue"
-import Loading from "@/components/Loading.vue"
-
-export default defineComponent({
-  name: "ConfigsWrapper",
-  components: {
-    Configs,
-    Loading,
-    ErrorMessage
-  },
-  setup() {
-    const getConfigsTask = generateGetConfigsTask()
-
-    onMounted(async () => {
-      await getConfigsTask.perform()
-    })
-
-    return { getConfigsTask }
-  }
-})
-</script>

data/frontend/src/components/link/Link.vue

@@ -1,32 +0,0 @@
-<template>
-  <a :href="link.href(data)" class="tag is-white" target="_blank">
-    <img :src="link.favicon()" alt="favicon" />
-    <span>{{ link.name }}</span>
-  </a>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { Link } from "@/types"
-
-export default defineComponent({
-  name: "LinkItem",
-  props: {
-    data: {
-      type: String,
-      required: true
-    },
-    link: {
-      type: Object as PropType<Link>,
-      required: true
-    }
-  }
-})
-</script>
-
-<style scoped>
-.tag img {
-  margin-right: 5px;
-}
-</style>

data/frontend/src/components/link/Links.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <LinkComponent :data="data" :link="link" v-for="link in selectedLinks" :key="link.name" />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from "vue"
-
-import LinkComponent from "@/components/link/Link.vue"
-import { Links } from "@/links"
-import type { Link } from "@/types"
-
-export default defineComponent({
-  name: "LinksItem",
-  components: {
-    LinkComponent
-  },
-  props: {
-    data: {
-      type: String,
-      required: true
-    },
-    type: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const links = Links
-    const selectedLinks = computed((): Link[] => {
-      if (props.type === undefined) {
-        return links
-      }
-
-      return links.filter((link) => link.type === props.type)
-    })
-
-    return { selectedLinks }
-  }
-})
-</script>

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

@@ -1,72 +0,0 @@
-<template>
-  <div class="column">
-    <h2 class="is-size-2 mb-4">Edit rule: {{ rule.id }}</h2>
-    <InputForm v-model:yaml="yaml" @update-yaml="updateYAML"></InputForm>
-    <div class="field is-grouped is-grouped-centered">
-      <p class="control">
-        <a class="button is-primary" @click="edit">
-          <span class="icon is-small">
-            <font-awesome-icon icon="edit"></font-awesome-icon>
-          </span>
-          <span>Edit</span>
-        </a>
-      </p>
-    </div>
-    <div v-if="updateRuleTask.last?.error">
-      <hr />
-      <ErrorMessage :error="updateRuleTask.last?.error"></ErrorMessage>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType, toRef } from "vue"
-import { useRouter } from "vue-router"
-
-import { generateUpdateRuleTask } from "@/api-helper"
-import ErrorMessage from "@/components/ErrorMessage.vue"
-import InputForm from "@/components/rule/InputForm.vue"
-import type { Rule } from "@/types"
-
-export default defineComponent({
-  name: "EditRule",
-  components: {
-    InputForm,
-    ErrorMessage
-  },
-  props: {
-    rule: {
-      type: Object as PropType<Rule>,
-      required: true
-    }
-  },
-  setup(props) {
-    const router = useRouter()
-
-    const rule = toRef(props, "rule")
-    const yaml = toRef(rule.value, "yaml")
-
-    const updateRuleTask = generateUpdateRuleTask()
-
-    const updateYAML = (value: string) => {
-      yaml.value = value
-    }
-
-    const edit = async () => {
-      const rule = await updateRuleTask.perform({
-        id: props.rule.id,
-        yaml: yaml.value
-      })
-
-      router.push({ name: "Rule", params: { id: rule.id } })
-    }
-
-    return {
-      edit,
-      yaml,
-      updateYAML,
-      updateRuleTask
-    }
-  }
-})
-</script>

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

@@ -1,48 +0,0 @@
-<template>
-  <Loading v-if="getRuleTask.isRunning"></Loading>
-  <ErrorMessage v-if="getRuleTask.isError" :error="getRuleTask.last?.error"></ErrorMessage>
-  <EditRule :rule="getRuleTask.last.value" v-if="getRuleTask.last?.value"></EditRule>
-</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 EditRule from "@/components/rule/EditRule.vue"
-
-export default defineComponent({
-  name: "EditRuleWrapper",
-  components: {
-    EditRule,
-    Loading,
-    ErrorMessage
-  },
-  props: {
-    id: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const getRuleTask = generateGetRuleTask()
-
-    const getRule = async () => {
-      await getRuleTask.perform(props.id)
-    }
-
-    onMounted(async () => {
-      await getRule()
-    })
-
-    watch(props, async () => {
-      await getRule()
-    })
-
-    return {
-      getRuleTask
-    }
-  }
-})
-</script>

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

@@ -1,158 +0,0 @@
-<template>
-  <div class="columns">
-    <div class="column">
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label">Title</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control">
-              <input class="input" type="text" v-model="title" />
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column">
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label">Description</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control">
-              <input class="input" type="text" v-model="description" />
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="columns">
-    <div class="column">
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label">Tag</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <div class="control">
-              <div class="select">
-                <select v-model="tagInput">
-                  <option></option>
-                  <option v-for="tag_ in tags" :key="tag_">
-                    {{ tag_ }}
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column"></div>
-  </div>
-  <div class="columns">
-    <div class="column">
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label">From</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control">
-              <input class="input" type="date" v-model="fromAt" />
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="column">
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label">To</label>
-        </div>
-        <div class="field-body">
-          <div class="field">
-            <p class="control">
-              <input class="input" type="date" v-model="toAt" />
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType, ref, toRef, watch } from "vue"
-import { useRoute } from "vue-router"
-
-import type { RuleSearchParams } from "@/types"
-import { normalizeQueryParam } from "@/utils"
-
-export default defineComponent({
-  name: "RulesForm",
-  props: {
-    tags: {
-      type: Array as PropType<string[]>,
-      required: true
-    },
-    page: {
-      type: Number,
-      required: true
-    },
-    tag: {
-      type: String,
-      required: false
-    }
-  },
-  setup(props) {
-    const route = useRoute()
-
-    const description = ref<string | undefined>(undefined)
-    const fromAt = ref<string | undefined>(undefined)
-    const tagInput = toRef(props, "tag")
-    const title = ref<string | undefined>(undefined)
-    const toAt = ref<string | undefined>(undefined)
-
-    const updateByQueryParams = () => {
-      const tag_ = route.query["tag"]
-      if (tagInput.value === undefined) {
-        tagInput.value = normalizeQueryParam(tag_)
-      }
-    }
-
-    const getSearchParams = (): RuleSearchParams => {
-      updateByQueryParams()
-
-      const params: RuleSearchParams = {
-        description: description.value === "" ? undefined : description.value,
-        page: props.page,
-        tag: tagInput.value === "" ? undefined : tagInput.value,
-        title: title.value === "" ? undefined : title.value,
-        toAt: toAt.value === "" ? undefined : toAt.value,
-        fromAt: fromAt.value === "" ? undefined : fromAt.value
-      }
-      return params
-    }
-
-    watch(
-      () => props.tag,
-      () => {
-        tagInput.value = props.tag
-      }
-    )
-
-    return {
-      description,
-      fromAt,
-      getSearchParams,
-      title,
-      toAt,
-      tagInput
-    }
-  }
-})
-</script>

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

@@ -1,45 +0,0 @@
-<template>
-  <div class="block">
-    <VAceEditor
-      class="vue-ace-editor"
-      v-model:value="yamlInput"
-      lang="yaml"
-      theme="monokai"
-      :options="{
-        fontSize: 16,
-        minLines: 6,
-        maxLines: 10000
-      }"
-    ></VAceEditor>
-  </div>
-</template>
-
-<script lang="ts">
-import "@/ace-config"
-
-import { defineComponent, toRef, watchEffect } from "vue"
-import { VAceEditor } from "vue3-ace-editor"
-
-export default defineComponent({
-  name: "RuleInputForm",
-  components: {
-    VAceEditor
-  },
-  props: {
-    yaml: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ["update-yaml"],
-  setup(props, context) {
-    const yamlInput = toRef(props, "yaml")
-
-    watchEffect(() => {
-      context.emit("update-yaml", yamlInput.value)
-    })
-
-    return { yamlInput }
-  }
-})
-</script>

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

@@ -1,57 +0,0 @@
-<template>
-  <div class="column">
-    <h2 class="is-size-2 mb-4">New rule</h2>
-    <InputForm v-model:yaml="yaml" @update-yaml="updateYAML"></InputForm>
-    <div class="field is-grouped is-grouped-centered">
-      <p class="control">
-        <a class="button is-primary" @click="create">
-          <span class="icon is-small">
-            <font-awesome-icon icon="plus"></font-awesome-icon>
-          </span>
-          <span>Create</span>
-        </a>
-      </p>
-    </div>
-    <div v-if="createRuleTask.last?.error">
-      <hr />
-      <ErrorMessage :error="createRuleTask.last?.error"></ErrorMessage>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue"
-import { useRouter } from "vue-router"
-
-import { generateCreateRuleTask } from "@/api-helper"
-import ErrorMessage from "@/components/ErrorMessage.vue"
-import InputForm from "@/components/rule/InputForm.vue"
-import { getRuleTemplate } from "@/rule"
-
-export default defineComponent({
-  name: "NewRule",
-  components: {
-    InputForm,
-    ErrorMessage
-  },
-  setup() {
-    const router = useRouter()
-
-    const yaml = ref(getRuleTemplate())
-
-    const createRuleTask = generateCreateRuleTask()
-
-    const updateYAML = (value: string) => {
-      yaml.value = value
-    }
-
-    const create = async () => {
-      const rule = await createRuleTask.perform({ yaml: yaml.value })
-
-      router.push({ name: "Rule", params: { id: rule.id } })
-    }
-
-    return { yaml, create, updateYAML, createRuleTask }
-  }
-})
-</script>

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

@@ -1,100 +0,0 @@
-<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="block 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">
-            <font-awesome-icon icon="arrow-right"></font-awesome-icon>
-          </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">
-            <font-awesome-icon icon="edit"></font-awesome-icon>
-          </span>
-        </router-link>
-        <button class="button is-light is-small" @click="deleteRule">
-          <span>Delete</span>
-          <span class="icon is-small">
-            <font-awesome-icon icon="times"></font-awesome-icon>
-          </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

@@ -1,53 +0,0 @@
-<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>