mihari 5.6.2 → 5.7.1

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>

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

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

@@ -1,121 +0,0 @@
-<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">
-              <font-awesome-icon icon="search"></font-awesome-icon>
-            </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

@@ -1,37 +0,0 @@
-<template>
-  <div class="block">
-    <VAceEditor
-      class="vue-ace-editor"
-      :value="yaml"
-      lang="yaml"
-      theme="monokai"
-      :options="{
-        readOnly: true,
-        fontSize: 16,
-        maxLines: 10000,
-        minLines: 6
-      }"
-    ></VAceEditor>
-  </div>
-</template>
-
-<script lang="ts">
-import "@/ace-config"
-
-import { defineComponent } from "vue"
-import { VAceEditor } from "vue3-ace-editor"
-
-export default defineComponent({
-  name: "YAML",
-  components: {
-    VAceEditor
-  },
-  props: {
-    yaml: {
-      type: String,
-      required: true
-    }
-  },
-  setup() {}
-})
-</script>

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

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

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