mihari 5.7.0 → 5.7.1

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

@@ -1,63 +0,0 @@
-<template>
-  <Alert
-    v-for="(alert, index) in alerts.alerts"
-    :alert="alert"
-    :key="index"
-    @refresh-page="refreshPage"
-    @update-tag="updateTag"
-  ></Alert>
-  <Pagination
-    :total="alerts.total"
-    :currentPage="alerts.currentPage"
-    :pageSize="alerts.pageSize"
-    @update-page="updatePage"
-  ></Pagination>
-  <p class="help">({{ alerts.total }} results in total, {{ alerts.alerts.length }} shown)</p>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-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
-  },
-  props: {
-    alerts: {
-      type: Object as PropType<Alerts>,
-      required: true
-    }
-  },
-  emits: ["update-page", "refresh-page", "update-tag"],
-  setup(_, 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)
-    }
-
-    return { updatePage, updateTag, refreshPage }
-  }
-})
-</script>

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

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

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

@@ -1,169 +0,0 @@
-<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, toRef, 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 updateByQueryParams = () => {
-      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

@@ -1,23 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <span class="tag">
-      {{ autonomousSystem.asn }}
-    </span>
-  </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>