mihari 5.2.3 → 5.2.4

data/frontend/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "mihari-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vite",
+    "build": "npx redoc-cli build src/swagger.yaml -o public/redoc-static.html && vite build",
+    "test:unit": "jest",
+    "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore --fix src --fix tests"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@vueuse/core": "^10.2.0",
+    "@vueuse/router": "^10.2.0",
+    "axios": "^1.4.0",
+    "bulma": "^0.9.4",
+    "bulma-helpers": "^0.4.3",
+    "dayjs": "^1.11.8",
+    "js-sha256": "^0.9.0",
+    "truncate": "^3.0.0",
+    "ts-dedent": "^2.2.0",
+    "url-parse": "^1.5.10",
+    "uuidv4": "^6.2.13",
+    "vue": "^3.3.4",
+    "vue-concurrency": "4.0.1",
+    "vue-json-pretty": "^2.2.4",
+    "vue-prism-editor": "^2.0.0-alpha.2",
+    "vue-router": "^4.2.2"
+  },
+  "devDependencies": {
+    "@types/jest": "29.5.2",
+    "@types/prismjs": "^1.26.0",
+    "@types/url-parse": "^1.4.8",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "2.3.2",
+    "@vue/vue3-jest": "^29.2.4",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-vue": "^9.14.1",
+    "handlebars": "^4.7.7",
+    "husky": "^8.0.3",
+    "prettier": "^2.8.8",
+    "redoc": "2.0.0",
+    "redoc-cli": "^0.13.21",
+    "ts-jest": "^29.1.0",
+    "typescript": "~5.1.3",
+    "vite": "^4.3.9"
+  }
+}

data/frontend/scripts/swagger_doc_to_yaml.rb

@@ -0,0 +1,23 @@
+require "http"
+require "json"
+require "yaml"
+
+def recursive_delete(hash, to_remove)
+  hash.delete(to_remove)
+  hash.each_value do |value|
+    recursive_delete(value, to_remove) if value.is_a? Hash
+  end
+end
+
+res = HTTP.get("http://localhost:9292/api/swagger_doc")
+json = JSON.parse(res.body.to_s)
+
+# remove host and operationId because
+# - host: can be varied
+# - operationId: is useless (to me)
+keys_to_remove = ["host", "operationId"]
+keys_to_remove.each do |key|
+  recursive_delete json, key
+end
+
+puts json.to_yaml

data/frontend/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <Navbar></Navbar>
+  <section class="section is-medium">
+    <div class="container">
+      <router-view />
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import Navbar from "@/components/Navbar.vue";
+
+export default defineComponent({
+  name: "App",
+  components: {
+    Navbar,
+  },
+});
+</script>
+
+<style>
+table.is-fullwidth th {
+  width: 120px;
+}
+</style>

data/frontend/src/api-helper.ts

@@ -0,0 +1,113 @@
+import { Task, useAsyncTask } from "vue-concurrency";
+
+import { API } from "@/api";
+import {
+  Alerts,
+  AlertSearchParams,
+  ArtifactWithTags,
+  Config,
+  CreateRule,
+  IPInfo,
+  Rule,
+  Rules,
+  RuleSearchParams,
+  UpdateRule,
+} from "@/types";
+
+export function generateGetAlertsTask(): Task<Alerts, [AlertSearchParams]> {
+  return useAsyncTask<Alerts, [AlertSearchParams]>(async (_signal, params) => {
+    return await API.getAlerts(params);
+  });
+}
+
+export function generateDeleteAlertTask(): Task<void, [string]> {
+  return useAsyncTask<void, [string]>(async (_signal, id) => {
+    return await API.deleteAlert(id);
+  });
+}
+
+export function generateGetTagsTask(): Task<string[], []> {
+  return useAsyncTask<string[], []>(async () => {
+    return await API.getTags();
+  });
+}
+
+export function generateDeleteTagTask(): Task<void, [string]> {
+  return useAsyncTask<void, [string]>(async (_signal, tag) => {
+    return await API.deleteTag(tag);
+  });
+}
+
+export function generateGetRuleSetTask(): Task<string[], []> {
+  return useAsyncTask<string[], []>(async () => {
+    return await API.getRuleSet();
+  });
+}
+
+export function generateGetArtifactTask(): Task<ArtifactWithTags, [string]> {
+  return useAsyncTask<ArtifactWithTags, [string]>(async (_signal, id) => {
+    return await API.getArtifact(id);
+  });
+}
+
+export function generateDeleteArtifactTask(): Task<void, [string]> {
+  return useAsyncTask<void, [string]>(async (_signal, id) => {
+    return await API.deleteArtifact(id);
+  });
+}
+
+export function generateEnrichArtifactTask(): Task<void, [string]> {
+  return useAsyncTask<void, [string]>(async (_signal, id) => {
+    return await API.enrichArtifact(id);
+  });
+}
+
+export function generateGetConfigsTask(): Task<Config[], []> {
+  return useAsyncTask<Config[], []>(async () => {
+    return await API.getConfigs();
+  });
+}
+
+export function generateGetIPTask(): Task<IPInfo, [string]> {
+  return useAsyncTask<IPInfo, [string]>(async (_signal, ipAddress: string) => {
+    return await API.getIPInfo(ipAddress);
+  });
+}
+
+export function generateGetRulesTask(): Task<Rules, [RuleSearchParams]> {
+  return useAsyncTask<Rules, [RuleSearchParams]>(
+    async (_signal, params: RuleSearchParams) => {
+      return await API.getRules(params);
+    }
+  );
+}
+
+export function generateGetRuleTask(): Task<Rule, [string]> {
+  return useAsyncTask<Rule, [string]>(async (_signal, id: string) => {
+    return await API.getRule(id);
+  });
+}
+
+export function generateDeleteRuleTask(): Task<void, [string]> {
+  return useAsyncTask<void, [string]>(async (_signal, id: string) => {
+    return await API.deleteRule(id);
+  });
+}
+
+export function generateRunRuleTask(): Task<void, [string]> {
+  return useAsyncTask<void, [string]>(async (_signal, id) => {
+    return await API.runRule(id);
+  });
+}
+
+export function generateCreateRuleTask(): Task<Rule, [CreateRule]> {
+  return useAsyncTask<Rule, [CreateRule]>(async (_signal, payload) => {
+    return await API.createRule(payload);
+  });
+}
+
+export function generateUpdateRuleTask(): Task<Rule, [UpdateRule]> {
+  return useAsyncTask<Rule, [UpdateRule]>(async (_signal, payload) => {
+    return await API.updateRule(payload);
+  });
+}

data/frontend/src/api.ts

@@ -0,0 +1,105 @@
+import axios from "axios";
+
+import {
+  Alerts,
+  AlertSearchParams,
+  ArtifactWithTags,
+  Config,
+  CreateRule,
+  IPInfo,
+  Rule,
+  Rules,
+  RuleSearchParams,
+  RuleSet,
+  Tags,
+  UpdateRule,
+} from "@/types";
+
+const client = axios.create({
+  headers: {
+    Accept: "application/json",
+  },
+});
+
+export const API = {
+  async getConfigs(): Promise<Config[]> {
+    const res = await client.get<Config[]>("/api/configs");
+    return res.data;
+  },
+
+  async getAlerts(params: AlertSearchParams): Promise<Alerts> {
+    params.page = params.page || 1;
+    const res = await client.get<Alerts>("/api/alerts", {
+      params: params,
+    });
+    return res.data;
+  },
+
+  async getTags(): Promise<string[]> {
+    const res = await client.get<Tags>("/api/tags");
+    return res.data.tags;
+  },
+
+  async getRuleSet(): Promise<string[]> {
+    const res = await client.get<RuleSet>("/api/rules/ids");
+    return res.data.ruleIds;
+  },
+
+  async deleteAlert(id: string): Promise<void> {
+    await client.delete(`/api/alerts/${id}`);
+  },
+
+  async getArtifact(id: string): Promise<ArtifactWithTags> {
+    const res = await client.get(`/api/artifacts/${id}`);
+    return res.data;
+  },
+
+  async enrichArtifact(id: string): Promise<void> {
+    await client.get(`/api/artifacts/${id}/enrich`);
+    return;
+  },
+
+  async deleteArtifact(id: string): Promise<void> {
+    await client.delete(`/api/artifacts/${id}`);
+  },
+
+  async getRules(params: RuleSearchParams): Promise<Rules> {
+    params.page = params.page || 1;
+    const res = await client.get<Rules>("/api/rules", {
+      params: params,
+    });
+    return res.data;
+  },
+
+  async getRule(id: string): Promise<Rule> {
+    const res = await client.get<Rule>(`/api/rules/${id}`);
+    return res.data;
+  },
+
+  async runRule(id: string): Promise<void> {
+    await client.get<void>(`/api/rules/${id}/run`);
+  },
+
+  async createRule(payload: CreateRule): Promise<Rule> {
+    const res = await client.post<Rule>("/api/rules/", payload);
+    return res.data;
+  },
+
+  async updateRule(payload: UpdateRule): Promise<Rule> {
+    const res = await client.put<Rule>("/api/rules/", payload);
+    return res.data;
+  },
+
+  async deleteRule(id: string): Promise<void> {
+    await client.delete<void>(`/api/rules/${id}`);
+  },
+
+  async deleteTag(name: string): Promise<void> {
+    await client.delete(`/api/tags/${name}`);
+  },
+
+  async getIPInfo(ipAddress: string): Promise<IPInfo> {
+    const res = await client.get<IPInfo>(`/api/ip_addresses/${ipAddress}`);
+    return res.data;
+  },
+};

data/frontend/src/components/ErrorMessage.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="notification is-danger is-light">
+    <p v-if="error.response.data?.message">{{ error.response.data.message }}</p>
+    <p v-else>{{ error }}</p>
+  </div>
+
+  <article class="message" v-if="error.response.data?.details">
+    <div class="message-body">
+      <VueJsonPretty :data="error.response.data.details"></VueJsonPretty>
+    </div>
+  </article>
+</template>
+
+<script lang="ts">
+import "vue-json-pretty/lib/styles.css";
+
+import { defineComponent } from "vue";
+import VueJsonPretty from "vue-json-pretty";
+
+export default defineComponent({
+  name: "ErrorItem",
+  props: {
+    error: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    VueJsonPretty,
+  },
+});
+</script>

data/frontend/src/components/Loading.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="has-text-centered">
+    <div class="fa-3x">
+      <i class="fas fa-spinner fa-spin"></i>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "LoadingItem",
+});
+</script>

data/frontend/src/components/Navbar.vue

@@ -0,0 +1,59 @@
+<template>
+  <nav
+    role="navigation"
+    aria-label="main navigation"
+    class="navbar is-fixed-top"
+  >
+    <div class="navbar-brand">
+      <a class="navbar-item"><h1 class="title">Mihari</h1></a
+      ><a role="button" aria-label="menu" class="navbar-burger burger"
+        ><span aria-hidden="true"></span><span aria-hidden="true"></span
+        ><span aria-hidden="true"></span
+      ></a>
+    </div>
+    <div class="navbar-menu">
+      <div class="navbar-start"></div>
+      <div class="navbar-end">
+        <router-link class="navbar-item" :to="{ name: 'Alerts' }"
+          >Alerts</router-link
+        >
+        <router-link class="navbar-item" :to="{ name: 'NewRule' }"
+          >New rule</router-link
+        >
+        <router-link class="navbar-item" :to="{ name: 'Rules' }"
+          >Rules</router-link
+        >
+        <router-link class="navbar-item" :to="{ name: 'Configs' }"
+          >Configs</router-link
+        >
+        <a class="navbar-item"
+          ><a href="/redoc-static.html" target="_blank" class="navbar-item"
+            >API</a
+          ></a
+        >
+        <a class="navbar-item"
+          ><a
+            href="https://github.com/ninoseki/mihari"
+            target="_blank"
+            class="navbar-item"
+            >GitHub</a
+          ></a
+        >
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "NavbarItem",
+});
+</script>
+
+<style scoped>
+.navbar {
+  border-bottom: 1px solid lightgray;
+}
+</style>

data/frontend/src/components/Pagination.vue

@@ -0,0 +1,126 @@
+<template>
+  <article class="message is-warning" v-if="total === 0">
+    <div class="message-body">There is no result to show.</div>
+  </article>
+  <nav class="pagination" role="navigation" aria-label="pagination" v-else>
+    <ul class="pagination-list" v-if="hasOnlyOnePage">
+      <li>
+        <a class="pagination-link mt-2 is-current" @click="updatePage(1)">1</a>
+      </li>
+    </ul>
+    <ul class="pagination-list" v-else>
+      <li v-if="hasPreviousPage && isPreviousPageNotFirst">
+        <a class="pagination-link mt-2" @click="updatePage(1)"> 1</a>
+      </li>
+      <li v-if="hasPreviousPage && isPreviousPageNotFirst">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li v-if="hasPreviousPage">
+        <a class="pagination-link mt-2" @click="updatePage(currentPage - 1)">
+          {{ currentPage - 1 }}</a
+        >
+      </li>
+      <li>
+        <a
+          class="pagination-link mt-2 is-current"
+          @click="updatePage(currentPage)"
+        >
+          {{ currentPage }}</a
+        >
+      </li>
+      <li v-if="hasNextPage">
+        <a class="pagination-link mt-2" @click="updatePage(currentPage + 1)">
+          {{ currentPage + 1 }}</a
+        >
+      </li>
+      <li v-if="hasNextPage && isNextPageNotLast">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li v-if="hasNextPage && isNextPageNotLast">
+        <a class="pagination-link mt-2" @click="updatePage(totalPageCount)">{{
+          totalPageCount
+        }}</a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts">
+import { useRouteQuery } from "@vueuse/router";
+import { computed, defineComponent, onMounted, Ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+export default defineComponent({
+  name: "AlertsPagination",
+  props: {
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+    pageSize: {
+      type: Number,
+      required: true,
+    },
+    total: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ["update-page"],
+  setup(props, context) {
+    const route = useRoute();
+    const router = useRouter();
+    const options = { route, router };
+
+    const totalPageCount = computed(() => {
+      return Math.ceil(props.total / props.pageSize);
+    });
+
+    const hasOnlyOnePage = computed(() => {
+      return totalPageCount.value === 1;
+    });
+
+    const hasPreviousPage = computed(() => {
+      return props.currentPage > 1;
+    });
+
+    const isPreviousPageNotFirst = computed(() => {
+      return props.currentPage - 1 !== 1;
+    });
+
+    const hasNextPage = computed(() => {
+      return props.currentPage < totalPageCount.value;
+    });
+
+    const isNextPageNotLast = computed(() => {
+      return props.currentPage + 1 !== totalPageCount.value;
+    });
+
+    const updatePage = (page: number) => {
+      const pageQuery = useRouteQuery("page", page.toString(), options);
+      pageQuery.value = page.toString();
+
+      context.emit("update-page", page);
+    };
+
+    onMounted(() => {
+      const pageQuery = useRouteQuery("page", null, options) as Ref<
+        string | null
+      >;
+      if (pageQuery.value && parseInt(pageQuery.value) !== props.currentPage) {
+        updatePage(parseInt(pageQuery.value));
+      }
+    });
+
+    return {
+      updatePage,
+      hasNextPage,
+      hasOnlyOnePage,
+      hasPreviousPage,
+      isNextPageNotLast,
+      isPreviousPageNotFirst,
+      totalPageCount,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="box">
+    <table class="table is-fullwidth is-completely-borderless">
+      <tr>
+        <th>ID</th>
+        <td>
+          {{ alert.id }}
+          <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>
+            </span>
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <th>Rule</th>
+        <td>
+          <router-link :to="{ name: 'Rule', params: { id: alert.ruleId } }">{{
+            alert.ruleId
+          }}</router-link>
+        </td>
+      </tr>
+      <tr>
+        <th>Artifacts</th>
+        <td>
+          <Artifacts :artifacts="alert.artifacts"></Artifacts>
+        </td>
+      </tr>
+      <tr v-if="alert.tags.length > 0">
+        <th>Tags</th>
+        <td>
+          <Tags :tags="alert.tags" @update-tag="updateTag"></Tags>
+        </td>
+      </tr>
+    </table>
+    <p class="help">Created at: {{ alert.createdAt }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, 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";
+
+export default defineComponent({
+  name: "AlertItem",
+  components: {
+    Artifacts,
+    Tags,
+  },
+  props: {
+    alert: {
+      type: Object as PropType<Alert>,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const updateTag = (tag: string) => {
+      context.emit("update-tag", tag);
+    };
+
+    const deleteAlertTask = generateDeleteAlertTask();
+
+    const deleteAlert = async () => {
+      const result = window.confirm(
+        `Are you sure you want to delete ${props.alert.id}?`
+      );
+
+      if (result) {
+        await deleteAlertTask.perform(props.alert.id);
+        // refresh the page
+        context.emit("refresh-page");
+      }
+    };
+
+    return {
+      updateTag,
+      deleteAlert,
+      getLocalDatetime,
+      getHumanizedRelativeTime,
+    };
+  },
+});
+</script>