mihari 5.2.4 → 5.3.1

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

@@ -19,18 +19,15 @@
               {{ config.type }}
             </td>
             <td>
-              <button
-                class="button is-success is-small ml-1"
-                v-if="config.isConfigured"
-              >
+              <button class="button is-success is-small ml-1" v-if="config.isConfigured">
                 <span class="icon is-small">
-                  <i class="fas fa-check"></i>
+                  <font-awesome-icon icon="check"></font-awesome-icon>
                 </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>
+                  <font-awesome-icon icon="exclamation"></font-awesome-icon>
                 </span>
                 <span>No</span>
               </button>
@@ -52,17 +49,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue"
 
-import { Config } from "@/types";
+import type { Config } from "@/types"
 
 export default defineComponent({
   name: "ConfigsItem",
   props: {
     configs: {
       type: Array as PropType<Config[]>,
-      required: true,
-    },
-  },
-});
+      required: true
+    }
+  }
+})
 </script>

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

@@ -1,40 +1,34 @@
 <template>
   <Loading v-if="getConfigsTask.isRunning"></Loading>
 
-  <ErrorMessage
-    v-if="getConfigsTask.isError"
-    :error="getConfigsTask.last?.error"
-  ></ErrorMessage>
+  <ErrorMessage v-if="getConfigsTask.isError" :error="getConfigsTask.last?.error"></ErrorMessage>
 
-  <Configs
-    :configs="getConfigsTask.last.value"
-    v-if="getConfigsTask.last?.value"
-  ></Configs>
+  <Configs :configs="getConfigsTask.last.value" v-if="getConfigsTask.last?.value"></Configs>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from "vue";
+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";
+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,
+    ErrorMessage
   },
   setup() {
-    const getConfigsTask = generateGetConfigsTask();
+    const getConfigsTask = generateGetConfigsTask()
 
     onMounted(async () => {
-      await getConfigsTask.perform();
-    });
+      await getConfigsTask.perform()
+    })
 
-    return { getConfigsTask };
-  },
-});
+    return { getConfigsTask }
+  }
+})
 </script>

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

@@ -6,23 +6,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue"
 
-import { Link } from "@/types";
+import type { Link } from "@/types"
 
 export default defineComponent({
   name: "LinkItem",
   props: {
     data: {
       type: String,
-      required: true,
+      required: true
     },
     link: {
       type: Object as PropType<Link>,
-      required: true,
-    },
-  },
-});
+      required: true
+    }
+  }
+})
 </script>
 
 <style scoped>

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

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

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

@@ -8,7 +8,7 @@
       <p class="control">
         <a class="button is-primary" @click="edit">
           <span class="icon is-small">
-            <i class="fas fa-edit"></i>
+            <font-awesome-icon icon="edit"></font-awesome-icon>
           </span>
           <span>Edit</span>
         </a>
@@ -23,52 +23,52 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
-import { useRouter } from "vue-router";
+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 { Rule } from "@/types";
+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,
+    ErrorMessage
   },
   props: {
     rule: {
       type: Object as PropType<Rule>,
-      required: true,
-    },
+      required: true
+    }
   },
   setup(props) {
-    const router = useRouter();
+    const router = useRouter()
 
-    const yaml = ref(props.rule.yaml);
+    const yaml = ref(props.rule.yaml)
 
-    const updateRuleTask = generateUpdateRuleTask();
+    const updateRuleTask = generateUpdateRuleTask()
 
     const updateYAML = (value: string) => {
-      yaml.value = value;
-    };
+      yaml.value = value
+    }
 
     const edit = async () => {
       const rule = await updateRuleTask.perform({
         id: props.rule.id,
-        yaml: yaml.value,
-      });
+        yaml: yaml.value
+      })
 
-      router.push({ name: "Rule", params: { id: rule.id } });
-    };
+      router.push({ name: "Rule", params: { id: rule.id } })
+    }
 
     return {
       edit,
       yaml,
       updateYAML,
-      updateRuleTask,
-    };
-  },
-});
+      updateRuleTask
+    }
+  }
+})
 </script>

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

@@ -1,56 +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>
+  <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 { 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";
+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,
+    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)
+    }
 
     onMounted(async () => {
-      await getRule();
-    });
+      await getRule()
+    })
 
     watch(props, async () => {
-      await getRule();
-    });
+      await getRule()
+    })
 
     return {
-      getRuleTask,
-    };
-  },
-});
+      getRuleTask
+    }
+  }
+})
 </script>

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

@@ -88,46 +88,46 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { defineComponent, type PropType, ref, watch } from "vue"
+import { useRoute } from "vue-router"
 
-import { RuleSearchParams } from "@/types";
-import { normalizeQueryParam } from "@/utils";
+import type { RuleSearchParams } from "@/types"
+import { normalizeQueryParam } from "@/utils"
 
 export default defineComponent({
   name: "RulesForm",
   props: {
     tags: {
       type: Array as PropType<string[]>,
-      required: true,
+      required: true
     },
     page: {
       type: Number,
-      required: true,
+      required: true
     },
     tag: {
       type: String,
-      required: false,
-    },
+      required: false
+    }
   },
   setup(props) {
-    const route = useRoute();
+    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 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"];
+      const tag_ = route.query["tag"]
       if (tagInput.value === undefined) {
-        tagInput.value = normalizeQueryParam(tag_);
+        tagInput.value = normalizeQueryParam(tag_)
       }
-    };
+    }
 
     const getSearchParams = (): RuleSearchParams => {
-      updateByQueryParams();
+      updateByQueryParams()
 
       const params: RuleSearchParams = {
         description: description.value === "" ? undefined : description.value,
@@ -135,17 +135,17 @@ export default defineComponent({
         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;
-    };
+        fromAt: fromAt.value === "" ? undefined : fromAt.value
+      }
+      return params
+    }
 
     watch(
       () => props.tag,
       () => {
-        tagInput.value = props.tag;
+        tagInput.value = props.tag
       }
-    );
+    )
 
     return {
       description,
@@ -153,8 +153,8 @@ export default defineComponent({
       getSearchParams,
       title,
       toAt,
-      tagInput,
-    };
-  },
-});
+      tagInput
+    }
+  }
+})
 </script>

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

@@ -11,63 +11,69 @@
 
 <script lang="ts">
 // eslint-disable-next-line simple-import-sort/imports
-import "vue-prism-editor/dist/prismeditor.min.css";
+import "vue-prism-editor/dist/prismeditor.min.css"
 
-import { defineComponent, ref, watchEffect } from "vue";
-import { PrismEditor } from "vue-prism-editor";
+import { defineComponent, ref, watchEffect } from "vue"
+import { PrismEditor } from "vue-prism-editor"
 
-import Prism from "prismjs";
+import Prism from "prismjs"
 
-import "prismjs/components/prism-yaml";
-import "prismjs/plugins/custom-class/prism-custom-class";
-import "prismjs/themes/prism-twilight.css";
+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,
+    PrismEditor
   },
   props: {
     yaml: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   emits: ["update-yaml"],
   setup(props, context) {
-    const yamlInput = ref(props.yaml);
-    const wrapper = ref<HTMLElement | undefined>(undefined);
+    const yamlInput = ref(props.yaml)
+    const wrapper = ref<HTMLElement | undefined>(undefined)
 
     Prism.plugins.customClass.map({
       number: "prism-number",
-      tag: "prism-tag",
-    });
+      tag: "prism-tag"
+    })
 
     const highlighter = (code: string) => {
-      return Prism.highlight(code, Prism.languages.yaml, "yaml");
-    };
+      return Prism.highlight(code, Prism.languages.yaml, "yaml")
+    }
 
     watchEffect(() => {
-      context.emit("update-yaml", yamlInput.value);
+      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)");
+        const strings = wrapper.value.querySelectorAll(":not(span.token)")
         strings.forEach((string) => {
-          (string as HTMLElement).style.color = "white";
-        });
+          ;(string as HTMLElement).style.color = "white"
+        })
       }
-    });
+    })
 
-    return { yamlInput, highlighter, wrapper };
-  },
-});
+    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-family:
+    Fira code,
+    Fira Mono,
+    Consolas,
+    Menlo,
+    Courier,
+    monospace;
   font-size: 1em;
   line-height: 1.5;
   padding: 5px;

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

@@ -8,7 +8,7 @@
       <p class="control">
         <a class="button is-primary" @click="create">
           <span class="icon is-small">
-            <i class="fas fa-plus"></i>
+            <font-awesome-icon icon="plus"></font-awesome-icon>
           </span>
           <span>Create</span>
         </a>
@@ -23,38 +23,38 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
-import { useRouter } from "vue-router";
+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";
+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,
+    ErrorMessage
   },
   setup() {
-    const router = useRouter();
+    const router = useRouter()
 
-    const yaml = ref(getRuleTemplate());
+    const yaml = ref(getRuleTemplate())
 
-    const createRuleTask = generateCreateRuleTask();
+    const createRuleTask = generateCreateRuleTask()
 
     const updateYAML = (value: string) => {
-      yaml.value = value;
-    };
+      yaml.value = value
+    }
 
     const create = async () => {
-      const rule = await createRuleTask.perform({ yaml: yaml.value });
+      const rule = await createRuleTask.perform({ yaml: yaml.value })
 
-      router.push({ name: "Rule", params: { id: rule.id } });
-    };
+      router.push({ name: "Rule", params: { id: rule.id } })
+    }
 
-    return { yaml, create, updateYAML, createRuleTask };
-  },
-});
+    return { yaml, create, updateYAML, createRuleTask }
+  }
+})
 </script>