mihari 5.2.3 → 5.2.4

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

@@ -0,0 +1,66 @@
+<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, PropType } from "vue";
+
+import Alert from "@/components/alert/Alert.vue";
+import Pagination from "@/components/Pagination.vue";
+import { 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

@@ -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 { 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,141 @@
+<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 { 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,185 @@
+<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, PropType, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import { 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, PropType } from "vue";
+
+import { AutonomousSystem } from "@/types";
+
+export default defineComponent({
+  name: "AS",
+  props: {
+    autonomousSystem: {
+      type: Object as PropType<AutonomousSystem>,
+      required: true,
+    },
+  },
+});
+</script>