mihari 5.2.3 → 5.3.0

data/frontend/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "mihari",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build-only": "vite build",
+    "build-redoc": "npx @redocly/cli build-docs src/swagger.yaml -o public/redoc-static.html",
+    "build": "run-p type-check build-only build-redoc",
+    "dev": "vite",
+    "format": "prettier --write src/",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@vueuse/core": "^10.2.1",
+    "@vueuse/router": "^10.2.1",
+    "axios": "^1.4.0",
+    "bulma": "^0.9.4",
+    "bulma-helpers": "^0.4.3",
+    "dayjs": "^1.11.9",
+    "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.4"
+  },
+  "devDependencies": {
+    "@redocly/cli": "^1.0.0-beta.131",
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@tsconfig/node20": "^1.0.2",
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^20.4.2",
+    "@types/prismjs": "^1.26.0",
+    "@types/url-parse": "^1.4.8",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/test-utils": "2.4.0",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-vue": "^9.15.1",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.0",
+    "typescript": "~5.1.6",
+    "vite": "^4.4.4",
+    "vitest": "^0.33.0",
+    "vue-tsc": "^1.8.5"
+  }
+}

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,111 @@
+import { type Task, useAsyncTask } from "vue-concurrency"
+
+import { API } from "@/api"
+import type {
+  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 type {
+  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,42 @@
+<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,119 @@
+<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, type 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,87 @@
+<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, type PropType } from "vue"
+
+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
+  },
+  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>

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

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