From 97ff6e253191d3a96f66499f5a778e6cc2c5f7c5 Mon Sep 17 00:00:00 2001
From: Manabu Niseki <manabu.niseki@gmail.com>
Date: Sun, 14 Jan 2024 10:06:30 +0900
Subject: [PATCH 1/5] refactor: unify tags behavior

---
 frontend/src/components/alert/Alert.vue       |  2 +-
 frontend/src/components/alert/AlertDetail.vue |  2 +-
 .../src/components/alert/AlertsWrapper.vue    |  8 +++++
 frontend/src/components/artifact/Artifact.vue |  9 ++++-
 .../components/artifact/ArtifactDetail.vue    |  8 ++---
 .../components/artifact/ArtifactsWrapper.vue  |  7 ++++
 frontend/src/components/artifact/Tags.vue     | 35 -------------------
 .../src/components/rule/ActionButtons.vue     |  7 ++--
 frontend/src/components/rule/Rule.vue         |  2 +-
 frontend/src/components/rule/RulesWrapper.vue |  7 ++++
 frontend/src/components/tag/Tag.vue           | 19 ++++++++--
 frontend/src/components/tag/Tags.vue          |  7 +++-
 frontend/src/types.ts                         |  4 +--
 lib/mihari/entities/artifact.rb               |  4 +--
 14 files changed, 68 insertions(+), 53 deletions(-)
 delete mode 100644 frontend/src/components/artifact/Tags.vue

diff --git a/frontend/src/components/alert/Alert.vue b/frontend/src/components/alert/Alert.vue
index 5e0ae1de6..eff098662 100644
--- a/frontend/src/components/alert/Alert.vue
+++ b/frontend/src/components/alert/Alert.vue
@@ -31,7 +31,7 @@
       <tr v-if="alert.tags.length > 0">
         <th>Tags</th>
         <td>
-          <Tags :tags="alert.tags"></Tags>
+          <Tags :tags="alert.tags" :navigate-to="'Alerts'"></Tags>
         </td>
       </tr>
     </table>
diff --git a/frontend/src/components/alert/AlertDetail.vue b/frontend/src/components/alert/AlertDetail.vue
index d2f67fd40..6e5d5065c 100644
--- a/frontend/src/components/alert/AlertDetail.vue
+++ b/frontend/src/components/alert/AlertDetail.vue
@@ -29,7 +29,7 @@
       <tr v-if="alert.tags.length > 0">
         <th>Tags</th>
         <td>
-          <Tags :tags="alert.tags"></Tags>
+          <Tags :tags="alert.tags" :navigate-to="'Alerts'"></Tags>
         </td>
       </tr>
     </table>
diff --git a/frontend/src/components/alert/AlertsWrapper.vue b/frontend/src/components/alert/AlertsWrapper.vue
index ac91cf0c5..ffbbb82d8 100644
--- a/frontend/src/components/alert/AlertsWrapper.vue
+++ b/frontend/src/components/alert/AlertsWrapper.vue
@@ -67,6 +67,7 @@
 </template>
 
 <script lang="ts">
+import { watchThrottled } from "@vueuse/core"
 import { useRouteQuery } from "@vueuse/router"
 import { defineComponent, onMounted, ref, watch } from "vue"
 
@@ -120,6 +121,13 @@ export default defineComponent({
       await getAlerts()
     })
 
+    watch(q, async () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      })
+    })
+
     return {
       getAlertsTask,
       page,
diff --git a/frontend/src/components/artifact/Artifact.vue b/frontend/src/components/artifact/Artifact.vue
index 6849af84b..d7ba8c279 100644
--- a/frontend/src/components/artifact/Artifact.vue
+++ b/frontend/src/components/artifact/Artifact.vue
@@ -50,6 +50,12 @@
         <th>Query</th>
         <td>{{ truncate(artifact.query || "N/A", 64) }}</td>
       </tr>
+      <tr v-if="artifact.tags.length > 0">
+        <th>Tags</th>
+        <td>
+          <Tags :tags="artifact.tags" :navigate-to="'Artifacts'"></Tags>
+        </td>
+      </tr>
     </table>
     <p class="block is-clearfix"></p>
     <p class="help">Created at: {{ artifact.createdAt }}</p>
@@ -64,6 +70,7 @@ import { defineComponent, type PropType, ref } from "vue"
 import ActionButtons from "@/components/artifact/ActionButtons.vue"
 import ErrorMessage from "@/components/ErrorMessage.vue"
 import Message from "@/components/Message.vue"
+import Tags from "@/components/tag/Tags.vue"
 import type { Artifact, QueueMessage } from "@/types"
 
 export default defineComponent({
@@ -74,7 +81,7 @@ export default defineComponent({
       required: true
     }
   },
-  components: { ErrorMessage, ActionButtons, Message },
+  components: { ErrorMessage, ActionButtons, Message, Tags },
   emits: ["delete"],
   setup(_, context) {
     const error = ref<AxiosError>()
diff --git a/frontend/src/components/artifact/ArtifactDetail.vue b/frontend/src/components/artifact/ArtifactDetail.vue
index 10a37c150..1dd043503 100644
--- a/frontend/src/components/artifact/ArtifactDetail.vue
+++ b/frontend/src/components/artifact/ArtifactDetail.vue
@@ -60,7 +60,7 @@
         </tr>
         <tr v-if="artifact.tags.length > 0">
           <th>Tags</th>
-          <td><Tags :tags="artifact.tags"></Tags></td>
+          <td><Tags :tags="artifact.tags" :navigate-to="'Artifacts'"></Tags></td>
         </tr>
       </table>
       <p class="help">Created at: {{ artifact.createdAt }}</p>
@@ -113,20 +113,20 @@ import CPEs from "@/components/artifact/CPEs.vue"
 import DnsRecords from "@/components/artifact/DnsRecords.vue"
 import Ports from "@/components/artifact/Ports.vue"
 import ReverseDnsNames from "@/components/artifact/ReverseDnsNames.vue"
-import Tags from "@/components/artifact/Tags.vue"
 import Vulnerabilities from "@/components/artifact/Vulnerabilities.vue"
 import WhoisRecord from "@/components/artifact/WhoisRecord.vue"
 import ErrorMessage from "@/components/ErrorMessage.vue"
 import Links from "@/components/link/Links.vue"
 import Message from "@/components/Message.vue"
-import type { ArtifactWithTags, GCS, QueueMessage } from "@/types"
+import Tags from "@/components/tag/Tags.vue"
+import type { Artifact, GCS, QueueMessage } from "@/types"
 import { getGCSByCountryCode, getGCSByIPInfo } from "@/utils"
 
 export default defineComponent({
   name: "ArtifactDetail",
   props: {
     artifact: {
-      type: Object as PropType<ArtifactWithTags>,
+      type: Object as PropType<Artifact>,
       required: true
     }
   },
diff --git a/frontend/src/components/artifact/ArtifactsWrapper.vue b/frontend/src/components/artifact/ArtifactsWrapper.vue
index 7dcb20242..ce1634330 100644
--- a/frontend/src/components/artifact/ArtifactsWrapper.vue
+++ b/frontend/src/components/artifact/ArtifactsWrapper.vue
@@ -108,6 +108,13 @@ export default defineComponent({
       await getArtifacts()
     })
 
+    watch(q, async () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      })
+    })
+
     return {
       getArtifactsTask,
       page,
diff --git a/frontend/src/components/artifact/Tags.vue b/frontend/src/components/artifact/Tags.vue
deleted file mode 100644
index 2828799f3..000000000
--- a/frontend/src/components/artifact/Tags.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <router-link
-      class="tag"
-      v-for="tag in tags"
-      :key="tag.id"
-      :to="{ name: 'Artifacts', query: { q: getQuery(tag.name) } }"
-    >
-      {{ tag.name }}
-    </router-link>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { Tag } from "@/types"
-
-export default defineComponent({
-  name: "TagsItem",
-  props: {
-    tags: {
-      type: Array as PropType<Tag[]>,
-      required: true
-    }
-  },
-  setup() {
-    const getQuery = (name: string) => {
-      return `tag:"${name}"`
-    }
-
-    return { getQuery }
-  }
-})
-</script>
diff --git a/frontend/src/components/rule/ActionButtons.vue b/frontend/src/components/rule/ActionButtons.vue
index 621eb0e24..bc1436661 100644
--- a/frontend/src/components/rule/ActionButtons.vue
+++ b/frontend/src/components/rule/ActionButtons.vue
@@ -7,10 +7,13 @@
       <span>Alerts:</span>
       <span>{{ getAlertsTask.last?.value?.total }}</span>
     </router-link>
-    <a class="button is-small is-success is-rounded">
+    <router-link
+      class="button is-success is-small is-rounded"
+      :to="{ name: 'Artifacts', query: { q: q } }"
+    >
       <span>Artifacts:</span>
       <span>{{ getArtifactsTask.last?.value?.total }}</span>
-    </a>
+    </router-link>
     <a class="button is-link is-light is-small" :href="href" target="_blank">
       <span>JSON</span>
       <span class="icon is-small">
diff --git a/frontend/src/components/rule/Rule.vue b/frontend/src/components/rule/Rule.vue
index 2ddb0a720..d77c4a1b2 100644
--- a/frontend/src/components/rule/Rule.vue
+++ b/frontend/src/components/rule/Rule.vue
@@ -43,7 +43,7 @@
       <tr v-if="rule.tags.length > 0">
         <th>Tags</th>
         <td>
-          <Tags :tags="rule.tags" />
+          <Tags :tags="rule.tags" :navigate-to="'Rules'" />
         </td>
       </tr>
     </table>
diff --git a/frontend/src/components/rule/RulesWrapper.vue b/frontend/src/components/rule/RulesWrapper.vue
index f3882b9ce..3e79294e1 100644
--- a/frontend/src/components/rule/RulesWrapper.vue
+++ b/frontend/src/components/rule/RulesWrapper.vue
@@ -109,6 +109,13 @@ export default defineComponent({
       await getRules()
     })
 
+    watch(q, async () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      })
+    })
+
     return {
       getRulesTask,
       page,
diff --git a/frontend/src/components/tag/Tag.vue b/frontend/src/components/tag/Tag.vue
index 680769d1e..0431d5af7 100644
--- a/frontend/src/components/tag/Tag.vue
+++ b/frontend/src/components/tag/Tag.vue
@@ -5,7 +5,11 @@
       v-on:mouseover="showDeleteButton"
       v-on:mouseleave="hideDeleteButton"
     >
-      <span class="tag is-info is-light">{{ tag.name }}</span>
+      <router-link
+        class="tag is-info is-light"
+        :to="{ name: navigateTo, query: { q: getQuery(tag.name) } }"
+        >{{ tag.name }}</router-link
+      >
       <a class="tag is-delete" v-if="isDeleteButtonEnabled && deletable" @click="deleteTag"></a>
     </div>
   </div>
@@ -15,7 +19,7 @@
 import { defineComponent, type PropType, ref } from "vue"
 
 import { generateDeleteTagTask } from "@/api-helper"
-import type { Tag } from "@/types"
+import type { NavigateTo, Tag } from "@/types"
 
 export default defineComponent({
   name: "TagItem",
@@ -27,6 +31,10 @@ export default defineComponent({
     deletable: {
       type: Boolean,
       default: false
+    },
+    navigateTo: {
+      type: String as PropType<NavigateTo>,
+      required: true
     }
   },
   setup(props) {
@@ -54,12 +62,17 @@ export default defineComponent({
       isDeleteButtonEnabled.value = false
     }
 
+    const getQuery = (name: string) => {
+      return `tag:"${name}"`
+    }
+
     return {
       isDeleted,
       deleteTag,
       showDeleteButton,
       hideDeleteButton,
-      isDeleteButtonEnabled
+      isDeleteButtonEnabled,
+      getQuery
     }
   }
 })
diff --git a/frontend/src/components/tag/Tags.vue b/frontend/src/components/tag/Tags.vue
index 9c36a9c97..56415b815 100644
--- a/frontend/src/components/tag/Tags.vue
+++ b/frontend/src/components/tag/Tags.vue
@@ -5,6 +5,7 @@
       :tag="tag"
       :key="tag.name"
       :deletable="deletable"
+      :navigate-to="navigateTo"
     ></TagComponent>
   </div>
 </template>
@@ -13,7 +14,7 @@
 import { defineComponent, type PropType } from "vue"
 
 import TagComponent from "@/components/tag/Tag.vue"
-import type { Tag } from "@/types"
+import type { NavigateTo, Tag } from "@/types"
 
 export default defineComponent({
   name: "TagsItem",
@@ -28,6 +29,10 @@ export default defineComponent({
     deletable: {
       type: Boolean,
       default: false
+    },
+    navigateTo: {
+      type: String as PropType<NavigateTo>,
+      required: true
     }
   },
   setup() {}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 801e18f66..57ae509f1 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -91,9 +91,7 @@ export interface Artifact {
   cpes?: CPE[]
   ports?: Port[]
   vulnerabilities?: Vulnerability[]
-}
 
-export interface ArtifactWithTags extends Artifact {
   tags: Tag[]
 }
 
@@ -187,3 +185,5 @@ export interface ErrorMessage extends Message {
 export interface QueueMessage extends Message {
   queued: boolean
 }
+
+export type NavigateTo = "Alerts" | "Rules" | "Artifacts"
diff --git a/lib/mihari/entities/artifact.rb b/lib/mihari/entities/artifact.rb
index d2507eb62..6e8d8c2fb 100644
--- a/lib/mihari/entities/artifact.rb
+++ b/lib/mihari/entities/artifact.rb
@@ -8,12 +8,12 @@ class BaseArtifact < Grape::Entity
       expose :data_type, documentation: { type: String, required: true }, as: :dataType
       expose :source, documentation: { type: String, required: true }
       expose :query, documentation: { type: String, required: false }
-      expose :metadata, documentation: { type: Hash }
       expose :created_at, documentation: { type: DateTime, required: true }, as: :createdAt
+      expose :tags, using: Entities::Tag, documentation: { type: Entities::Tag, is_array: true, required: true }
     end
 
     class Artifact < BaseArtifact
-      expose :tags, using: Entities::Tag, documentation: { type: Entities::Tag, is_array: true, required: true }
+      expose :metadata, documentation: { type: Hash }
       expose :autonomous_system, using: Entities::AutonomousSystem,
         documentation: { type: Entities::AutonomousSystem, required: false }, as: :autonomousSystem
       expose :geolocation, using: Entities::Geolocation, documentation: { type: Entities::Geolocation, required: false }

From fbed3f3dedeb202c808043d5bd2651965208c757 Mon Sep 17 00:00:00 2001
From: Manabu Niseki <manabu.niseki@gmail.com>
Date: Sun, 14 Jan 2024 10:10:48 +0900
Subject: [PATCH 2/5]  fix: remove unused func

---
 frontend/src/components/alert/AlertsWrapper.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/alert/AlertsWrapper.vue b/frontend/src/components/alert/AlertsWrapper.vue
index ffbbb82d8..1b16c48fc 100644
--- a/frontend/src/components/alert/AlertsWrapper.vue
+++ b/frontend/src/components/alert/AlertsWrapper.vue
@@ -67,7 +67,6 @@
 </template>
 
 <script lang="ts">
-import { watchThrottled } from "@vueuse/core"
 import { useRouteQuery } from "@vueuse/router"
 import { defineComponent, onMounted, ref, watch } from "vue"
 

From 89ef9ce84d7e92f9abb58812a67b1049868f4983 Mon Sep 17 00:00:00 2001
From: Manabu Niseki <manabu.niseki@gmail.com>
Date: Sun, 14 Jan 2024 10:12:51 +0900
Subject: [PATCH 3/5] fix: fix typo error

---
 frontend/src/api.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index a59fba999..143bb32a7 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -3,8 +3,8 @@ import axios from "axios"
 import type {
   Alert,
   Alerts,
+  Artifact,
   Artifacts,
-  ArtifactWithTags,
   Config,
   CreateRule,
   IPInfo,
@@ -48,8 +48,8 @@ export const API = {
     return res.data
   },
 
-  async getArtifact(id: number): Promise<ArtifactWithTags> {
-    const res = await client.get<ArtifactWithTags>(`/api/artifacts/${id}`)
+  async getArtifact(id: number): Promise<Artifact> {
+    const res = await client.get<Artifact>(`/api/artifacts/${id}`)
     return res.data
   },
 

From 9193263800239999cd53d6ed1d7e5df3c6e0266c Mon Sep 17 00:00:00 2001
From: Manabu Niseki <manabu.niseki@gmail.com>
Date: Sun, 14 Jan 2024 10:17:59 +0900
Subject: [PATCH 4/5] fix: fix type error (again!)

---
 frontend/src/api-helper.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api-helper.ts b/frontend/src/api-helper.ts
index b4d1c3d1c..a669293e3 100644
--- a/frontend/src/api-helper.ts
+++ b/frontend/src/api-helper.ts
@@ -4,8 +4,8 @@ import { API } from "@/api"
 import type {
   Alert,
   Alerts,
+  Artifact,
   Artifacts,
-  ArtifactWithTags,
   Config,
   CreateRule,
   IPInfo,
@@ -42,8 +42,8 @@ export function generateDeleteTagTask(): Task<Message, [number]> {
   })
 }
 
-export function generateGetArtifactTask(): Task<ArtifactWithTags, [number]> {
-  return useAsyncTask<ArtifactWithTags, [number]>(async (_signal, id) => {
+export function generateGetArtifactTask(): Task<Artifact, [number]> {
+  return useAsyncTask<Artifact, [number]>(async (_signal, id) => {
     return await API.getArtifact(id)
   })
 }

From a82cb5ceb39c4a3e127d97036e3ba9c53d4d9391 Mon Sep 17 00:00:00 2001
From: Manabu Niseki <manabu.niseki@gmail.com>
Date: Sun, 14 Jan 2024 10:18:13 +0900
Subject: [PATCH 5/5] chore: apply ESLint & Prettier

---
 frontend/tests/utils.spec.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/tests/utils.spec.ts b/frontend/tests/utils.spec.ts
index b35459b87..bddb8d673 100644
--- a/frontend/tests/utils.spec.ts
+++ b/frontend/tests/utils.spec.ts
@@ -1,9 +1,9 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it } from "vitest"
 
-import { getHumanizedRelativeTime } from '@/utils'
+import { getHumanizedRelativeTime } from "@/utils"
 
-describe('getHumanizedRelativeTime', () => {
-  it('returns a relative time in humanized format', () => {
-    expect(getHumanizedRelativeTime('1970-01-01 00:00:00')).toContain('years')
+describe("getHumanizedRelativeTime", () => {
+  it("returns a relative time in humanized format", () => {
+    expect(getHumanizedRelativeTime("1970-01-01 00:00:00")).toContain("years")
   })
 })