mihari 5.2.3 → 5.3.0

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

@@ -0,0 +1,91 @@
+<template>
+  <Loading v-if="getAlertsTask.isRunning"></Loading>
+
+  <Alerts
+    :alerts="getAlertsTask.last.value"
+    v-if="getAlertsTask.last?.value"
+    @refresh-page="refreshPage"
+    @update-page="updatePage"
+    @update-tag="updateTag"
+  >
+  </Alerts>
+</template>
+
+<script lang="ts">
+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 type { AlertSearchParams } from "@/types"
+
+export default defineComponent({
+  name: "AlertsWithPagination",
+  props: {
+    ruleId: {
+      type: String
+    },
+    artifact: {
+      type: String
+    }
+  },
+  components: {
+    Alerts,
+    Loading
+  },
+  setup(props) {
+    const page = ref(1)
+    const tag = ref<string | undefined>(undefined)
+
+    const getAlertsTask = generateGetAlertsTask()
+
+    const getAlerts = async () => {
+      const params: AlertSearchParams = {
+        artifact: props.artifact,
+        page: page.value,
+        ruleId: props.ruleId,
+        tag: tag.value,
+        toAt: undefined,
+        fromAt: undefined
+      }
+      return await getAlertsTask.perform(params)
+    }
+
+    const updatePage = (newPage: number) => {
+      page.value = newPage
+    }
+
+    const resetPage = () => {
+      page.value = 1
+    }
+
+    const refreshPage = async () => {
+      resetPage()
+      await getAlerts()
+    }
+
+    const updateTag = (newTag: string | undefined) => {
+      if (tag.value === newTag) {
+        tag.value = undefined
+      } else {
+        tag.value = newTag
+      }
+    }
+
+    onMounted(async () => {
+      await getAlerts()
+    })
+
+    watch([props, page, tag], async () => {
+      nextTick(async () => await getAlerts())
+    })
+
+    return {
+      getAlertsTask,
+      refreshPage,
+      updatePage,
+      updateTag
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,134 @@
+<template>
+  <div class="box mb-6">
+    <FormComponent
+      ref="form"
+      :ruleSet="getRuleSetTask.last?.value || []"
+      :tags="getTagsTask.last?.value || []"
+      :page="page"
+      :tag="tag"
+    ></FormComponent>
+
+    <hr />
+
+    <div class="columns">
+      <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">
+                <i class="fas fa-search"></i>
+              </span>
+              <span>Search</span>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-if="getAlertsTask.performCount > 0">
+    <hr />
+
+    <Loading v-if="getAlertsTask.isRunning"></Loading>
+
+    <ErrorMessage v-if="getAlertsTask.isError" :error="getAlertsTask.last?.error"></ErrorMessage>
+
+    <AlertsComponent
+      :alerts="getAlertsTask.last.value"
+      v-if="getAlertsTask.last?.value"
+      @refresh-page="refreshPage"
+      @update-page="updatePage"
+      @update-tag="updateTag"
+    ></AlertsComponent>
+  </div>
+</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 type { AlertSearchParams } from "@/types"
+
+export default defineComponent({
+  name: "AlertsWrapper",
+  components: {
+    AlertsComponent,
+    FormComponent,
+    Loading,
+    ErrorMessage
+  },
+  setup() {
+    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 getAlerts = async () => {
+      const params = form.value?.getSearchParams() as AlertSearchParams
+      return await getAlertsTask.perform(params)
+    }
+
+    const updatePage = (newPage: number) => {
+      page.value = newPage
+    }
+
+    const resetPage = () => {
+      page.value = 1
+    }
+
+    const search = async () => {
+      // reset page
+      resetPage()
+
+      await getAlerts()
+    }
+
+    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 an alert is deleted
+      await search()
+    }
+
+    onMounted(async () => {
+      getTagsTask.perform()
+      getRuleSetTask.perform()
+
+      await getAlerts()
+    })
+
+    watch([page, tag], async () => {
+      nextTick(async () => await getAlerts())
+    })
+
+    return {
+      getAlertsTask,
+      getRuleSetTask,
+      getTagsTask,
+      refreshPage,
+      search,
+      tag,
+      updatePage,
+      updateTag,
+      form,
+      page
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,184 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Rule</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <div class="control">
+              <div class="select">
+                <select v-model="ruleId">
+                  <option></option>
+                  <option v-for="ruleId_ in ruleSet" :key="ruleId_">
+                    {{ ruleId_ }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Artifact</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control">
+              <input class="input" type="text" v-model="artifact" />
+            </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 { AlertSearchParams } from "@/types"
+import { normalizeQueryParam } from "@/utils"
+
+export default defineComponent({
+  name: "AlertsForm",
+  props: {
+    tags: {
+      type: Array as PropType<string[]>,
+      required: true
+    },
+    ruleSet: {
+      type: Array as PropType<string[]>,
+      required: true
+    },
+    page: {
+      type: Number,
+      required: true
+    },
+    tag: {
+      type: String,
+      required: false
+    }
+  },
+  setup(props) {
+    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 updateByQueryParams = () => {
+      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 reverseDnsName_ = route.query["reverseDnsName"]
+      reverseDnsName.value = normalizeQueryParam(reverseDnsName_)
+
+      const tag_ = route.query["tag"]
+      if (tagInput.value === undefined) {
+        tagInput.value = normalizeQueryParam(tag_)
+      }
+    }
+
+    const getSearchParams = (): AlertSearchParams => {
+      updateByQueryParams()
+
+      const params: AlertSearchParams = {
+        artifact: artifact.value === "" ? undefined : artifact.value,
+        page: props.page,
+        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
+    }
+
+    watch(
+      () => props.tag,
+      () => {
+        tagInput.value = props.tag
+      }
+    )
+
+    return {
+      artifact,
+      fromAt,
+      getSearchParams,
+      ruleId,
+      toAt,
+      tagInput
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="tags are-medium">
+    <router-link
+      class="tag"
+      :to="{
+        name: 'Alerts',
+        query: { asn: autonomousSystem.asn }
+      }"
+    >
+      {{ autonomousSystem.asn }}
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue"
+
+import type { AutonomousSystem } from "@/types"
+
+export default defineComponent({
+  name: "AS",
+  props: {
+    autonomousSystem: {
+      type: Object as PropType<AutonomousSystem>,
+      required: true
+    }
+  }
+})
+</script>