mihari 5.2.4 → 5.3.0

data/frontend/src/components/alert/Alert.vue

@@ -5,10 +5,7 @@
         <th>ID</th>
         <td>
           {{ alert.id }}
-          <button
-            class="button is-light is-small is-pulled-right"
-            @click="deleteAlert"
-          >
+          <button class="button is-light is-small is-pulled-right" @click="deleteAlert">
             <span>Delete</span>
             <span class="icon is-small">
               <i class="fas fa-times"></i>
@@ -42,51 +39,49 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue"
 
-import { generateDeleteAlertTask } from "@/api-helper";
-import Artifacts from "@/components/artifact/ArtifactTags.vue";
-import Tags from "@/components/tag/Tags.vue";
-import { Alert } from "@/types";
-import { getHumanizedRelativeTime, getLocalDatetime } from "@/utils";
+import { generateDeleteAlertTask } from "@/api-helper"
+import Artifacts from "@/components/artifact/ArtifactTags.vue"
+import Tags from "@/components/tag/Tags.vue"
+import type { Alert } from "@/types"
+import { getHumanizedRelativeTime, getLocalDatetime } from "@/utils"
 
 export default defineComponent({
   name: "AlertItem",
   components: {
     Artifacts,
-    Tags,
+    Tags
   },
   props: {
     alert: {
       type: Object as PropType<Alert>,
-      required: true,
-    },
+      required: true
+    }
   },
   setup(props, context) {
     const updateTag = (tag: string) => {
-      context.emit("update-tag", tag);
-    };
+      context.emit("update-tag", tag)
+    }
 
-    const deleteAlertTask = generateDeleteAlertTask();
+    const deleteAlertTask = generateDeleteAlertTask()
 
     const deleteAlert = async () => {
-      const result = window.confirm(
-        `Are you sure you want to delete ${props.alert.id}?`
-      );
+      const result = window.confirm(`Are you sure you want to delete ${props.alert.id}?`)
 
       if (result) {
-        await deleteAlertTask.perform(props.alert.id);
+        await deleteAlertTask.perform(props.alert.id)
         // refresh the page
-        context.emit("refresh-page");
+        context.emit("refresh-page")
       }
-    };
+    }
 
     return {
       updateTag,
       deleteAlert,
       getLocalDatetime,
-      getHumanizedRelativeTime,
-    };
-  },
-});
+      getHumanizedRelativeTime
+    }
+  }
+})
 </script>

data/frontend/src/components/alert/Alerts.vue

@@ -13,54 +13,52 @@
     :pageSize="alerts.pageSize"
     @update-page="updatePage"
   ></Pagination>
-  <p class="help">
-    ({{ alerts.total }} results in total, {{ alerts.alerts.length }} shown)
-  </p>
+  <p class="help">({{ alerts.total }} results in total, {{ alerts.alerts.length }} shown)</p>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue"
 
-import Alert from "@/components/alert/Alert.vue";
-import Pagination from "@/components/Pagination.vue";
-import { Alerts } from "@/types";
+import Alert from "@/components/alert/Alert.vue"
+import Pagination from "@/components/Pagination.vue"
+import type { Alerts } from "@/types"
 
 export default defineComponent({
   name: "AlertsItem",
   components: {
     Alert,
-    Pagination,
+    Pagination
   },
   props: {
     alerts: {
       type: Object as PropType<Alerts>,
-      required: true,
-    },
+      required: true
+    }
   },
   emits: ["update-page", "refresh-page", "update-tag"],
   setup(_, 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)
+    }
 
-    return { updatePage, updateTag, refreshPage };
-  },
-});
+    return { updatePage, updateTag, refreshPage }
+  }
+})
 </script>

data/frontend/src/components/alert/AlertsWithPagination.vue

@@ -12,32 +12,32 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
+import { defineComponent, nextTick, onMounted, ref, watch } from "vue"
 
-import { generateGetAlertsTask } from "@/api-helper";
-import Alerts from "@/components/alert/Alerts.vue";
-import Loading from "@/components/Loading.vue";
-import { AlertSearchParams } from "@/types";
+import { generateGetAlertsTask } from "@/api-helper"
+import Alerts from "@/components/alert/Alerts.vue"
+import Loading from "@/components/Loading.vue"
+import type { AlertSearchParams } from "@/types"
 
 export default defineComponent({
   name: "AlertsWithPagination",
   props: {
     ruleId: {
-      type: String,
+      type: String
     },
     artifact: {
-      type: String,
-    },
+      type: String
+    }
   },
   components: {
     Alerts,
-    Loading,
+    Loading
   },
   setup(props) {
-    const page = ref(1);
-    const tag = ref<string | undefined>(undefined);
+    const page = ref(1)
+    const tag = ref<string | undefined>(undefined)
 
-    const getAlertsTask = generateGetAlertsTask();
+    const getAlertsTask = generateGetAlertsTask()
 
     const getAlerts = async () => {
       const params: AlertSearchParams = {
@@ -46,46 +46,46 @@ export default defineComponent({
         ruleId: props.ruleId,
         tag: tag.value,
         toAt: undefined,
-        fromAt: undefined,
-      };
-      return await getAlertsTask.perform(params);
-    };
+        fromAt: undefined
+      }
+      return await getAlertsTask.perform(params)
+    }
 
     const updatePage = (newPage: number) => {
-      page.value = newPage;
-    };
+      page.value = newPage
+    }
 
     const resetPage = () => {
-      page.value = 1;
-    };
+      page.value = 1
+    }
 
     const refreshPage = async () => {
-      resetPage();
-      await getAlerts();
-    };
+      resetPage()
+      await getAlerts()
+    }
 
     const updateTag = (newTag: string | undefined) => {
       if (tag.value === newTag) {
-        tag.value = undefined;
+        tag.value = undefined
       } else {
-        tag.value = newTag;
+        tag.value = newTag
       }
-    };
+    }
 
     onMounted(async () => {
-      await getAlerts();
-    });
+      await getAlerts()
+    })
 
     watch([props, page, tag], async () => {
-      nextTick(async () => await getAlerts());
-    });
+      nextTick(async () => await getAlerts())
+    })
 
     return {
       getAlertsTask,
       refreshPage,
       updatePage,
-      updateTag,
-    };
-  },
-});
+      updateTag
+    }
+  }
+})
 </script>

data/frontend/src/components/alert/AlertsWrapper.vue

@@ -31,10 +31,7 @@
 
     <Loading v-if="getAlertsTask.isRunning"></Loading>
 
-    <ErrorMessage
-      v-if="getAlertsTask.isError"
-      :error="getAlertsTask.last?.error"
-    ></ErrorMessage>
+    <ErrorMessage v-if="getAlertsTask.isError" :error="getAlertsTask.last?.error"></ErrorMessage>
 
     <AlertsComponent
       :alerts="getAlertsTask.last.value"
@@ -47,18 +44,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
-
-import {
-  generateGetAlertsTask,
-  generateGetRuleSetTask,
-  generateGetTagsTask,
-} from "@/api-helper";
-import AlertsComponent from "@/components/alert/Alerts.vue";
-import FormComponent from "@/components/alert/Form.vue";
-import ErrorMessage from "@/components/ErrorMessage.vue";
-import Loading from "@/components/Loading.vue";
-import { AlertSearchParams } from "@/types";
+import { defineComponent, nextTick, onMounted, ref, watch } from "vue"
+
+import { generateGetAlertsTask, generateGetRuleSetTask, generateGetTagsTask } from "@/api-helper"
+import AlertsComponent from "@/components/alert/Alerts.vue"
+import FormComponent from "@/components/alert/Form.vue"
+import ErrorMessage from "@/components/ErrorMessage.vue"
+import Loading from "@/components/Loading.vue"
+import type { AlertSearchParams } from "@/types"
 
 export default defineComponent({
   name: "AlertsWrapper",
@@ -66,63 +59,63 @@ export default defineComponent({
     AlertsComponent,
     FormComponent,
     Loading,
-    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 getAlertsTask = generateGetAlertsTask();
-    const getTagsTask = generateGetTagsTask();
-    const getRuleSetTask = generateGetRuleSetTask();
+    const getAlertsTask = generateGetAlertsTask()
+    const getTagsTask = generateGetTagsTask()
+    const getRuleSetTask = generateGetRuleSetTask()
 
     const getAlerts = async () => {
-      const params = form.value?.getSearchParams() as AlertSearchParams;
-      return await getAlertsTask.perform(params);
-    };
+      const params = form.value?.getSearchParams() as AlertSearchParams
+      return await getAlertsTask.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 getAlerts();
-    };
+      await getAlerts()
+    }
 
     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 an alert is deleted
-      await search();
-    };
+      await search()
+    }
 
     onMounted(async () => {
-      getTagsTask.perform();
-      getRuleSetTask.perform();
+      getTagsTask.perform()
+      getRuleSetTask.perform()
 
-      await getAlerts();
-    });
+      await getAlerts()
+    })
 
     watch([page, tag], async () => {
-      nextTick(async () => await getAlerts());
-    });
+      nextTick(async () => await getAlerts())
+    })
 
     return {
       getAlertsTask,
@@ -134,8 +127,8 @@ export default defineComponent({
       updatePage,
       updateTag,
       form,
-      page,
-    };
-  },
-});
+      page
+    }
+  }
+})
 </script>

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

@@ -95,64 +95,63 @@
 </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 { AlertSearchParams } from "@/types";
-import { normalizeQueryParam } from "@/utils";
+import type { AlertSearchParams } from "@/types"
+import { normalizeQueryParam } from "@/utils"
 
 export default defineComponent({
   name: "AlertsForm",
   props: {
     tags: {
       type: Array as PropType<string[]>,
-      required: true,
+      required: true
     },
     ruleSet: {
       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 artifact = ref<string | undefined>(undefined);
-    const fromAt = ref<string | undefined>(undefined);
-    const tagInput = ref<string | undefined>(props.tag);
-    const ruleId = ref<string | undefined>(undefined);
-    const toAt = ref<string | undefined>(undefined);
-    const asn = ref<number | undefined>(undefined);
-    const dnsRecord = ref<string | undefined>(undefined);
-    const reverseDnsName = ref<string | undefined>(undefined);
+    const artifact = ref<string | undefined>(undefined)
+    const fromAt = ref<string | undefined>(undefined)
+    const tagInput = ref<string | undefined>(props.tag)
+    const ruleId = ref<string | undefined>(undefined)
+    const toAt = ref<string | undefined>(undefined)
+    const asn = ref<number | undefined>(undefined)
+    const dnsRecord = ref<string | undefined>(undefined)
+    const reverseDnsName = ref<string | undefined>(undefined)
 
     const updateByQueryParams = () => {
-      const asn_ = route.query["asn"];
-      const normalizedAsn = normalizeQueryParam(asn_);
-      asn.value =
-        normalizedAsn === undefined ? undefined : parseInt(normalizedAsn);
+      const asn_ = route.query["asn"]
+      const normalizedAsn = normalizeQueryParam(asn_)
+      asn.value = normalizedAsn === undefined ? undefined : parseInt(normalizedAsn)
 
-      const dnsRecord_ = route.query["dnsRecord"];
-      dnsRecord.value = normalizeQueryParam(dnsRecord_);
+      const dnsRecord_ = route.query["dnsRecord"]
+      dnsRecord.value = normalizeQueryParam(dnsRecord_)
 
-      const reverseDnsName_ = route.query["reverseDnsName"];
-      reverseDnsName.value = normalizeQueryParam(reverseDnsName_);
+      const reverseDnsName_ = route.query["reverseDnsName"]
+      reverseDnsName.value = normalizeQueryParam(reverseDnsName_)
 
-      const tag_ = route.query["tag"];
+      const tag_ = route.query["tag"]
       if (tagInput.value === undefined) {
-        tagInput.value = normalizeQueryParam(tag_);
+        tagInput.value = normalizeQueryParam(tag_)
       }
-    };
+    }
 
     const getSearchParams = (): AlertSearchParams => {
-      updateByQueryParams();
+      updateByQueryParams()
 
       const params: AlertSearchParams = {
         artifact: artifact.value === "" ? undefined : artifact.value,
@@ -160,17 +159,17 @@ export default defineComponent({
         ruleId: ruleId.value === "" ? undefined : ruleId.value,
         tag: tagInput.value === "" ? undefined : tagInput.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 {
       artifact,
@@ -178,8 +177,8 @@ export default defineComponent({
       getSearchParams,
       ruleId,
       toAt,
-      tagInput,
-    };
-  },
-});
+      tagInput
+    }
+  }
+})
 </script>

data/frontend/src/components/artifact/AS.vue

@@ -4,7 +4,7 @@
       class="tag"
       :to="{
         name: 'Alerts',
-        query: { asn: autonomousSystem.asn },
+        query: { asn: autonomousSystem.asn }
       }"
     >
       {{ autonomousSystem.asn }}
@@ -13,17 +13,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue"
 
-import { AutonomousSystem } from "@/types";
+import type { AutonomousSystem } from "@/types"
 
 export default defineComponent({
   name: "AS",
   props: {
     autonomousSystem: {
       type: Object as PropType<AutonomousSystem>,
-      required: true,
-    },
-  },
-});
+      required: true
+    }
+  }
+})
 </script>