Merge pull request #1018 from ninoseki/unify-tags

refactor: unify tags behavior

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)
   })
 }

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
   },
 

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>

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>

frontend/src/components/alert/AlertsWrapper.vue

@@ -120,6 +120,13 @@ export default defineComponent({
       await getAlerts()
     })
 
+    watch(q, async () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      })
+    })
+
     return {
       getAlertsTask,
       page,

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>()

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
     }
   },

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,

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">

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>

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,

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
     }
   }
 })

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() {}

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"

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")
   })
 })

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 }