mihari 5.2.3 → 5.3.0

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="box">
+    <div class="table-container">
+      <table class="table is-fullwidth">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Configured</th>
+            <th>Key-value(s)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="config in configs" :key="config.name">
+            <td>
+              {{ config.name }}
+            </td>
+            <td>
+              {{ config.type }}
+            </td>
+            <td>
+              <button class="button is-success is-small ml-1" v-if="config.isConfigured">
+                <span class="icon is-small">
+                  <i class="fas fa-check"></i>
+                </span>
+                <span>Yes</span>
+              </button>
+              <button class="button is-warning is-small ml-1" v-else>
+                <span class="icon is-small">
+                  <i class="fas fa-exclamation"></i>
+                </span>
+                <span>No</span>
+              </button>
+            </td>
+            <td>
+              <ul>
+                <li v-for="(kv, index) in config.values" :key="index">
+                  <strong> {{ kv.key }} </strong>:
+                  <code v-if="kv.value">{{ kv.value }}</code>
+                  <span v-else>N/A</span>
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
+
+import type { Config } from "@/types"
+
+export default defineComponent({
+  name: "ConfigsItem",
+  props: {
+    configs: {
+      type: Array as PropType<Config[]>,
+      required: true
+    }
+  }
+})
+</script>

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

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

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

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

@@ -0,0 +1,74 @@
+<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">
+            <i class="fas fa-edit"></i>
+          </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, ref } 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 yaml = ref(props.rule.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

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

@@ -0,0 +1,160 @@
+<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, 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 = ref<string | undefined>(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

@@ -0,0 +1,86 @@
+<template>
+  <div class="block my-editor-wrapper" ref="wrapper">
+    <PrismEditor
+      class="my-editor"
+      v-model="yamlInput"
+      :highlight="highlighter"
+      line-numbers
+    ></PrismEditor>
+  </div>
+</template>
+
+<script lang="ts">
+// eslint-disable-next-line simple-import-sort/imports
+import "vue-prism-editor/dist/prismeditor.min.css"
+
+import { defineComponent, ref, watchEffect } from "vue"
+import { PrismEditor } from "vue-prism-editor"
+
+import Prism from "prismjs"
+
+import "prismjs/components/prism-yaml"
+import "prismjs/plugins/custom-class/prism-custom-class"
+import "prismjs/themes/prism-twilight.css"
+
+export default defineComponent({
+  name: "RuleInputForm",
+  components: {
+    PrismEditor
+  },
+  props: {
+    yaml: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update-yaml"],
+  setup(props, context) {
+    const yamlInput = ref(props.yaml)
+    const wrapper = ref<HTMLElement | undefined>(undefined)
+
+    Prism.plugins.customClass.map({
+      number: "prism-number",
+      tag: "prism-tag"
+    })
+
+    const highlighter = (code: string) => {
+      return Prism.highlight(code, Prism.languages.yaml, "yaml")
+    }
+
+    watchEffect(() => {
+      context.emit("update-yaml", yamlInput.value)
+
+      // TODO: a dirty hack to change the default text color
+      if (wrapper.value) {
+        const strings = wrapper.value.querySelectorAll(":not(span.token)")
+        strings.forEach((string) => {
+          ;(string as HTMLElement).style.color = "white"
+        })
+      }
+    })
+
+    return { yamlInput, highlighter, wrapper }
+  }
+})
+</script>
+
+<style scoped>
+.my-editor {
+  background: hsl(0, 0%, 8%);
+  font-family:
+    Fira code,
+    Fira Mono,
+    Consolas,
+    Menlo,
+    Courier,
+    monospace;
+  font-size: 1em;
+  line-height: 1.5;
+  padding: 5px;
+}
+
+.my-editor-wrapper {
+  background: hsl(0, 0%, 8%);
+  padding: 10px;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<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">
+            <i class="fas fa-plus"></i>
+          </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>