mihari 5.2.4 → 5.3.1

data/frontend/package.json

@@ -1,21 +1,29 @@
 {
-  "name": "mihari-frontend",
+  "name": "mihari",
   "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"
+    "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.0",
-    "@vueuse/router": "^10.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@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.8",
+    "dayjs": "^1.11.9",
+    "font-awesome-animation": "^1.1.1",
     "js-sha256": "^0.9.0",
     "truncate": "^3.0.0",
     "ts-dedent": "^2.2.0",
@@ -25,30 +33,35 @@
     "vue-concurrency": "4.0.1",
     "vue-json-pretty": "^2.2.4",
     "vue-prism-editor": "^2.0.0-alpha.2",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@types/jest": "29.5.2",
+    "@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": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
+    "@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.3.2",
-    "@vue/vue3-jest": "^29.2.4",
-    "eslint": "^8.43.0",
+    "@vue/test-utils": "2.4.0",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "handlebars": "^4.7.7",
+    "eslint-plugin-vue": "^9.15.1",
     "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"
+    "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/src/App.vue

@@ -8,16 +8,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from "vue"
 
-import Navbar from "@/components/Navbar.vue";
+import Navbar from "@/components/Navbar.vue"
 
 export default defineComponent({
   name: "App",
   components: {
-    Navbar,
-  },
-});
+    Navbar
+  }
+})
 </script>
 
 <style>

data/frontend/src/api-helper.ts

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

data/frontend/src/api.ts

@@ -1,6 +1,6 @@
-import axios from "axios";
+import axios from "axios"
 
-import {
+import type {
   Alerts,
   AlertSearchParams,
   ArtifactWithTags,
@@ -12,94 +12,94 @@ import {
   RuleSearchParams,
   RuleSet,
   Tags,
-  UpdateRule,
-} from "@/types";
+  UpdateRule
+} from "@/types"
 
 const client = axios.create({
   headers: {
-    Accept: "application/json",
-  },
-});
+    Accept: "application/json"
+  }
+})
 
 export const API = {
   async getConfigs(): Promise<Config[]> {
-    const res = await client.get<Config[]>("/api/configs");
-    return res.data;
+    const res = await client.get<Config[]>("/api/configs")
+    return res.data
   },
 
   async getAlerts(params: AlertSearchParams): Promise<Alerts> {
-    params.page = params.page || 1;
+    params.page = params.page || 1
     const res = await client.get<Alerts>("/api/alerts", {
-      params: params,
-    });
-    return res.data;
+      params: params
+    })
+    return res.data
   },
 
   async getTags(): Promise<string[]> {
-    const res = await client.get<Tags>("/api/tags");
-    return res.data.tags;
+    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;
+    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}`);
+    await client.delete(`/api/alerts/${id}`)
   },
 
   async getArtifact(id: string): Promise<ArtifactWithTags> {
-    const res = await client.get(`/api/artifacts/${id}`);
-    return res.data;
+    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;
+    await client.get(`/api/artifacts/${id}/enrich`)
+    return
   },
 
   async deleteArtifact(id: string): Promise<void> {
-    await client.delete(`/api/artifacts/${id}`);
+    await client.delete(`/api/artifacts/${id}`)
   },
 
   async getRules(params: RuleSearchParams): Promise<Rules> {
-    params.page = params.page || 1;
+    params.page = params.page || 1
     const res = await client.get<Rules>("/api/rules", {
-      params: params,
-    });
-    return res.data;
+      params: params
+    })
+    return res.data
   },
 
   async getRule(id: string): Promise<Rule> {
-    const res = await client.get<Rule>(`/api/rules/${id}`);
-    return res.data;
+    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`);
+    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;
+    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;
+    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}`);
+    await client.delete<void>(`/api/rules/${id}`)
   },
 
   async deleteTag(name: string): Promise<void> {
-    await client.delete(`/api/tags/${name}`);
+    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;
-  },
-};
+    const res = await client.get<IPInfo>(`/api/ip_addresses/${ipAddress}`)
+    return res.data
+  }
+}

data/frontend/src/components/ErrorMessage.vue

@@ -12,21 +12,21 @@
 </template>
 
 <script lang="ts">
-import "vue-json-pretty/lib/styles.css";
+import "vue-json-pretty/lib/styles.css"
 
-import { defineComponent } from "vue";
-import VueJsonPretty from "vue-json-pretty";
+import { defineComponent } from "vue"
+import VueJsonPretty from "vue-json-pretty"
 
 export default defineComponent({
   name: "ErrorItem",
   props: {
     error: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   components: {
-    VueJsonPretty,
-  },
-});
+    VueJsonPretty
+  }
+})
 </script>

data/frontend/src/components/Loading.vue

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

data/frontend/src/components/Navbar.vue

@@ -1,9 +1,5 @@
 <template>
-  <nav
-    role="navigation"
-    aria-label="main navigation"
-    class="navbar is-fixed-top"
-  >
+  <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"
@@ -14,28 +10,15 @@
     <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
-        >
+        <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 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"
+          ><a href="https://github.com/ninoseki/mihari" target="_blank" class="navbar-item"
             >GitHub</a
           ></a
         >
@@ -45,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from "vue"
 
 export default defineComponent({
-  name: "NavbarItem",
-});
+  name: "NavbarItem"
+})
 </script>
 
 <style scoped>

data/frontend/src/components/Pagination.vue

@@ -21,10 +21,7 @@
         >
       </li>
       <li>
-        <a
-          class="pagination-link mt-2 is-current"
-          @click="updatePage(currentPage)"
-        >
+        <a class="pagination-link mt-2 is-current" @click="updatePage(currentPage)">
           {{ currentPage }}</a
         >
       </li>
@@ -37,80 +34,76 @@
         <span class="pagination-ellipsis">&hellip;</span>
       </li>
       <li v-if="hasNextPage && isNextPageNotLast">
-        <a class="pagination-link mt-2" @click="updatePage(totalPageCount)">{{
-          totalPageCount
-        }}</a>
+        <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";
+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,
+      required: true
     },
     pageSize: {
       type: Number,
-      required: true,
+      required: true
     },
     total: {
       type: Number,
-      required: true,
-    },
+      required: true
+    }
   },
   emits: ["update-page"],
   setup(props, context) {
-    const route = useRoute();
-    const router = useRouter();
-    const options = { route, router };
+    const route = useRoute()
+    const router = useRouter()
+    const options = { route, router }
 
     const totalPageCount = computed(() => {
-      return Math.ceil(props.total / props.pageSize);
-    });
+      return Math.ceil(props.total / props.pageSize)
+    })
 
     const hasOnlyOnePage = computed(() => {
-      return totalPageCount.value === 1;
-    });
+      return totalPageCount.value === 1
+    })
 
     const hasPreviousPage = computed(() => {
-      return props.currentPage > 1;
-    });
+      return props.currentPage > 1
+    })
 
     const isPreviousPageNotFirst = computed(() => {
-      return props.currentPage - 1 !== 1;
-    });
+      return props.currentPage - 1 !== 1
+    })
 
     const hasNextPage = computed(() => {
-      return props.currentPage < totalPageCount.value;
-    });
+      return props.currentPage < totalPageCount.value
+    })
 
     const isNextPageNotLast = computed(() => {
-      return props.currentPage + 1 !== totalPageCount.value;
-    });
+      return props.currentPage + 1 !== totalPageCount.value
+    })
 
     const updatePage = (page: number) => {
-      const pageQuery = useRouteQuery("page", page.toString(), options);
-      pageQuery.value = page.toString();
+      const pageQuery = useRouteQuery("page", page.toString(), options)
+      pageQuery.value = page.toString()
 
-      context.emit("update-page", page);
-    };
+      context.emit("update-page", page)
+    }
 
     onMounted(() => {
-      const pageQuery = useRouteQuery("page", null, options) as Ref<
-        string | null
-      >;
+      const pageQuery = useRouteQuery("page", null, options) as Ref<string | null>
       if (pageQuery.value && parseInt(pageQuery.value) !== props.currentPage) {
-        updatePage(parseInt(pageQuery.value));
+        updatePage(parseInt(pageQuery.value))
       }
-    });
+    })
 
     return {
       updatePage,
@@ -119,8 +112,8 @@ export default defineComponent({
       hasPreviousPage,
       isNextPageNotLast,
       isPreviousPageNotFirst,
-      totalPageCount,
-    };
-  },
-});
+      totalPageCount
+    }
+  }
+})
 </script>