mihari 5.2.4 → 5.3.1

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

@@ -17,7 +17,7 @@
         <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>
+            <font-awesome-icon icon="arrow-right"></font-awesome-icon>
           </span>
         </button>
         <router-link
@@ -26,13 +26,13 @@
         >
           <span>Edit</span>
           <span class="icon is-small">
-            <i class="fas fa-edit"></i>
+            <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">
-            <i class="fas fa-times"></i>
+            <font-awesome-icon icon="times"></font-awesome-icon>
           </span>
         </button>
       </span>
@@ -51,58 +51,56 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
-import { useRouter } from "vue-router";
+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 { Rule } from "@/types";
+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,
-    },
+      required: true
+    }
   },
   components: {
     YAML,
     Alerts,
     Loading,
-    ErrorMessage,
+    ErrorMessage
   },
   emits: ["refresh"],
   setup(props, context) {
-    const router = useRouter();
+    const router = useRouter()
 
-    const deleteRuleTask = generateDeleteRuleTask();
-    const runRuleTask = generateRunRuleTask();
+    const deleteRuleTask = generateDeleteRuleTask()
+    const runRuleTask = generateRunRuleTask()
 
     const deleteRule = async () => {
-      const result = window.confirm(
-        `Are you sure you want to delete ${props.rule.id}?`
-      );
+      const result = window.confirm(`Are you sure you want to delete ${props.rule.id}?`)
 
       if (result) {
-        await deleteRuleTask.perform(props.rule.id);
-        router.push("/");
+        await deleteRuleTask.perform(props.rule.id)
+        router.push("/")
       }
-    };
+    }
 
     const runRule = async () => {
-      await runRuleTask.perform(props.rule.id);
-      context.emit("refresh");
-    };
+      await runRuleTask.perform(props.rule.id)
+      context.emit("refresh")
+    }
 
     return {
       deleteRule,
       runRule,
-      runRuleTask,
-    };
-  },
-});
+      runRuleTask
+    }
+  }
+})
 </script>

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

@@ -1,62 +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>
+  <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 { 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";
+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,
+    ErrorMessage
   },
   props: {
     id: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   setup(props) {
-    const getRuleTask = generateGetRuleTask();
+    const getRuleTask = generateGetRuleTask()
 
     const getRule = async () => {
-      await getRuleTask.perform(props.id);
-    };
+      await getRuleTask.perform(props.id)
+    }
 
     const refresh = async () => {
-      await getRule();
-    };
+      await getRule()
+    }
 
     onMounted(async () => {
-      await getRule();
-    });
+      await getRule()
+    })
 
     watch(props, async () => {
-      await getRule();
-    });
+      await getRule()
+    })
 
     return {
       getRuleTask,
-      refresh,
-    };
-  },
-});
+      refresh
+    }
+  }
+})
 </script>

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

@@ -9,9 +9,7 @@
       </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>
+          <router-link :to="{ name: 'Rule', params: { id: rule.id } }">{{ rule.id }}</router-link>
         </td>
         <td>
           {{ rule.title }}
@@ -31,58 +29,56 @@
     :pageSize="rules.pageSize"
     @update-page="updatePage"
   ></Pagination>
-  <p class="help">
-    ({{ rules.total }} results in total, {{ rules.rules.length }} shown)
-  </p>
+  <p class="help">({{ rules.total }} results in total, {{ rules.rules.length }} shown)</p>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue"
 
-import Pagination from "@/components/Pagination.vue";
-import Tags from "@/components/tag/Tags.vue";
-import { Rules } from "@/types";
+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,
-    },
+      required: true
+    }
   },
   components: {
     Pagination,
-    Tags,
+    Tags
   },
   emits: ["update-page", "refresh-page", "update-tag"],
   setup(props, context) {
     const scrollToTop = () => {
       window.scrollTo({
-        top: 0,
-      });
-    };
+        top: 0
+      })
+    }
 
     const updatePage = (page: number) => {
-      scrollToTop();
-      context.emit("update-page", page);
-    };
+      scrollToTop()
+      context.emit("update-page", page)
+    }
 
     const refreshPage = () => {
-      scrollToTop();
-      context.emit("refresh-page");
-    };
+      scrollToTop()
+      context.emit("refresh-page")
+    }
 
     const updateTag = (tag: string) => {
-      scrollToTop();
-      context.emit("update-tag", tag);
-    };
+      scrollToTop()
+      context.emit("update-tag", tag)
+    }
 
     const hasRules = computed(() => {
-      return props.rules.rules.length > 0;
-    });
+      return props.rules.rules.length > 0
+    })
 
-    return { updatePage, refreshPage, updateTag, hasRules };
-  },
-});
+    return { updatePage, refreshPage, updateTag, hasRules }
+  }
+})
 </script>

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

@@ -14,7 +14,7 @@
         <p class="control">
           <a class="button is-primary" @click="search">
             <span class="icon is-small">
-              <i class="fas fa-search"></i>
+              <font-awesome-icon icon="search"></font-awesome-icon>
             </span>
             <span>Search</span>
           </a>
@@ -28,10 +28,7 @@
 
     <Loading v-if="getRulesTask.isRunning"></Loading>
 
-    <ErrorMessage
-      v-if="getRulesTask.isError"
-      :error="getRulesTask.last?.error"
-    ></ErrorMessage>
+    <ErrorMessage v-if="getRulesTask.isError" :error="getRulesTask.last?.error"></ErrorMessage>
 
     <Rules
       :rules="getRulesTask.last.value"
@@ -44,14 +41,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
+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";
+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",
@@ -59,60 +56,60 @@ export default defineComponent({
     Rules,
     Loading,
     FormComponent,
-    ErrorMessage,
+    ErrorMessage
   },
   setup() {
-    const page = ref(1);
-    const tag = ref<string | undefined>(undefined);
-    const form = ref<InstanceType<typeof FormComponent>>();
+    const page = ref(1)
+    const tag = ref<string | undefined>(undefined)
+    const form = ref<InstanceType<typeof FormComponent>>()
 
-    const getRulesTask = generateGetRulesTask();
-    const getTagsTask = generateGetTagsTask();
+    const getRulesTask = generateGetRulesTask()
+    const getTagsTask = generateGetTagsTask()
 
     const getRules = async () => {
-      const params = form.value?.getSearchParams() as RuleSearchParams;
-      return await getRulesTask.perform(params);
-    };
+      const params = form.value?.getSearchParams() as RuleSearchParams
+      return await getRulesTask.perform(params)
+    }
 
     const updatePage = (newPage: number) => {
-      page.value = newPage;
-    };
+      page.value = newPage
+    }
 
     const resetPage = () => {
-      page.value = 1;
-    };
+      page.value = 1
+    }
 
     const search = async () => {
       // reset page
-      resetPage();
+      resetPage()
 
-      await getRules();
-    };
+      await getRules()
+    }
 
     const updateTag = (newTag: string | undefined) => {
       if (tag.value === newTag) {
-        tag.value = undefined;
+        tag.value = undefined
       } else {
-        tag.value = newTag;
+        tag.value = newTag
       }
 
-      nextTick(async () => await search());
-    };
+      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();
-    };
+      await search()
+    }
 
     onMounted(async () => {
-      getTagsTask.perform();
-      await getRules();
-    });
+      getTagsTask.perform()
+      await getRules()
+    })
 
     watch([page, tag], async () => {
-      nextTick(async () => await getRules());
-    });
+      nextTick(async () => await getRules())
+    })
 
     return {
       form,
@@ -123,8 +120,8 @@ export default defineComponent({
       refreshPage,
       search,
       updatePage,
-      updateTag,
-    };
-  },
-});
+      updateTag
+    }
+  }
+})
 </script>

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

@@ -1,47 +1,44 @@
 <template>
-  <pre
-    ref="pre"
-    class="line-numbers"
-  ><code class="language-yaml">{{ yaml }}</code></pre>
+  <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 { defineComponent, onMounted, ref } from "vue"
 
-import Prism from "prismjs";
+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";
+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,
-    },
+      required: true
+    }
   },
   setup() {
-    const pre = ref<HTMLElement | undefined>(undefined);
+    const pre = ref<HTMLElement | undefined>(undefined)
 
     Prism.plugins.customClass.map({
       number: "prism-number",
-      tag: "prism-tag",
-    });
+      tag: "prism-tag"
+    })
 
     onMounted(() => {
       if (pre.value) {
         pre.value.querySelectorAll("code").forEach((elem) => {
-          Prism.highlightElement(elem);
-        });
+          Prism.highlightElement(elem)
+        })
       }
-    });
+    })
 
-    return { pre };
-  },
-});
+    return { pre }
+  }
+})
 </script>

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

@@ -5,60 +5,52 @@
       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>
+      <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 { defineComponent, type PropType, ref } from "vue"
 
-import { generateDeleteTagTask } from "@/api-helper";
-import { Tag } from "@/types";
+import { generateDeleteTagTask } from "@/api-helper"
+import type { Tag } from "@/types"
 
 export default defineComponent({
   name: "TagItem",
   props: {
     tag: {
       type: Object as PropType<Tag>,
-      required: true,
-    },
+      required: true
+    }
   },
   setup(props, context) {
-    const isDeleted = ref(false);
-    const isDeleteButtonEnabled = ref(false);
+    const isDeleted = ref(false)
+    const isDeleteButtonEnabled = ref(false)
 
-    const deleteTagTask = generateDeleteTagTask();
+    const deleteTagTask = generateDeleteTagTask()
 
     const deleteTag = async () => {
-      const result = window.confirm(
-        `Are you sure you want to delete ${props.tag.name}?`
-      );
+      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;
+        await deleteTagTask.perform(props.tag.name)
+        isDeleted.value = true
       }
-    };
+    }
 
     const showDeleteButton = () => {
-      isDeleteButtonEnabled.value = true;
-    };
+      isDeleteButtonEnabled.value = true
+    }
 
     const hideDeleteButton = () => {
-      isDeleteButtonEnabled.value = false;
-    };
+      isDeleteButtonEnabled.value = false
+    }
 
     const updateTag = () => {
-      context.emit("update-tag", props.tag.name);
-    };
+      context.emit("update-tag", props.tag.name)
+    }
 
     return {
       updateTag,
@@ -66,8 +58,8 @@ export default defineComponent({
       deleteTag,
       showDeleteButton,
       hideDeleteButton,
-      isDeleteButtonEnabled,
-    };
-  },
-});
+      isDeleteButtonEnabled
+    }
+  }
+})
 </script>

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

@@ -10,28 +10,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue"
 
-import TagComponent from "@/components/tag/Tag.vue";
-import { Tag } from "@/types";
+import TagComponent from "@/components/tag/Tag.vue"
+import type { Tag } from "@/types"
 
 export default defineComponent({
   name: "TagsItem",
   components: {
-    TagComponent,
+    TagComponent
   },
   props: {
     tags: {
       type: Array as PropType<Tag[]>,
-      required: true,
-    },
+      required: true
+    }
   },
   setup(_, context) {
     const updateTag = (tag: string) => {
-      context.emit("update-tag", tag);
-    };
+      context.emit("update-tag", tag)
+    }
 
-    return { updateTag };
-  },
-});
+    return { updateTag }
+  }
+})
 </script>