Merge pull request #1015 from ninoseki/set-q-links

feat: set q links
ninoseki · Jan 13, 2024 · de8102d · de8102d
2 parents 63127d6 + 9ae29e1
commit de8102d
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 29 deletions.
diff --git a/frontend/src/components/artifact/AS.vue b/frontend/src/components/artifact/AS.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="tags are-medium">
-    <span class="tag">
-      {{ autonomousSystem.number }}
-    </span>
+    <router-link
+      class="tag"
+      :to="{ name: 'Artifacts', query: { q: getQuery(autonomousSystem.number) } }"
+      >{{ autonomousSystem.number }}</router-link
+    >
   </div>
 </template>
 
@@ -18,6 +20,12 @@ export default defineComponent({
       type: Object as PropType<AutonomousSystem>,
       required: true
     }
+  },
+  setup() {
+    const getQuery = (number: number) => {
+      return `asn:${number}`
+    }
+    return { getQuery }
   }
 })
 </script>
diff --git a/frontend/src/components/artifact/ArtifactDetail.vue b/frontend/src/components/artifact/ArtifactDetail.vue
@@ -66,6 +66,9 @@
       <p class="help">Created at: {{ artifact.createdAt }}</p>
     </div>
   </div>
+  <div class="block">
+    <Links :data="artifact.data" :type="artifact.dataType"></Links>
+  </div>
   <div class="block">
     <div class="block" v-if="artifact.autonomousSystem">
       <h4 class="is-size-4 mb-2">AS</h4>
@@ -95,10 +98,6 @@
       <h4 class="is-size-4 mb-2">Whois record</h4>
       <WhoisRecord :whoisRecord="artifact.whoisRecord"></WhoisRecord>
     </div>
-    <div class="block">
-      <h4 class="is-size-4 mb-2">Links</h4>
-      <Links :data="artifact.data" :type="artifact.dataType"></Links>
-    </div>
   </div>
 </template>
 

diff --git a/frontend/src/components/artifact/CPEs.vue b/frontend/src/components/artifact/CPEs.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="tags are-medium">
-    <span class="tag" v-for="cpe in cpes" :key="cpe.name">
-      {{ cpe.name }}
-    </span>
+    <router-link
+      class="tag"
+      v-for="cpe in cpes"
+      :key="cpe.name"
+      :to="{ name: 'Artifacts', query: { q: getQuery(cpe.name) } }"
+      >{{ cpe.name }}</router-link
+    >
   </div>
 </template>
 
@@ -18,6 +22,12 @@ export default defineComponent({
       type: Array as PropType<CPE[]>,
       required: true
     }
+  },
+  setup() {
+    const getQuery = (name: string) => {
+      return `cpe:"${name}"`
+    }
+    return { getQuery }
   }
 })
 </script>
diff --git a/frontend/src/components/artifact/DnsRecords.vue b/frontend/src/components/artifact/DnsRecords.vue
@@ -3,9 +3,15 @@
     <div class="control" v-for="(dnsRecord, index) in dnsRecords" :key="index">
       <div class="tags has-addons are-medium">
         <span class="tag is-dark"> {{ dnsRecord.resource }}</span>
-        <span class="tag">
-          {{ truncate(dnsRecord.value, 50) }}
-        </span>
+        <router-link
+          class="tag"
+          :to="{
+            name: 'Artifacts',
+            query: { q: getQuery({ resource: dnsRecord.resource, value: dnsRecord.value }) }
+          }"
+        >
+          {{ truncate(dnsRecord.value, 50) }}</router-link
+        >
       </div>
     </div>
   </div>
@@ -26,7 +32,11 @@ export default defineComponent({
     }
   },
   setup() {
-    return { truncate }
+    const getQuery = ({ resource, value }: { resource: string; value: string }) => {
+      return `dns_record.value:"${value}" AND dns_record.resource:"${resource}"`
+    }
+
+    return { truncate, getQuery }
   }
 })
 </script>
diff --git a/frontend/src/components/artifact/Ports.vue b/frontend/src/components/artifact/Ports.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="tags are-medium">
-    <span class="tag" v-for="port in ports" :key="port.number">
-      {{ port.number }}
-    </span>
+    <router-link
+      class="tag"
+      v-for="port in ports"
+      :key="port.number"
+      :to="{ name: 'Artifacts', query: { q: getQuery(port.number) } }"
+      >{{ port.number }}</router-link
+    >
   </div>
 </template>
 
@@ -18,6 +22,13 @@ export default defineComponent({
       type: Array as PropType<Port[]>,
       required: true
     }
+  },
+  setup() {
+    const getQuery = (port: number) => {
+      return `port:${port}`
+    }
+
+    return { getQuery }
   }
 })
 </script>
diff --git a/frontend/src/components/artifact/ReverseDnsNames.vue b/frontend/src/components/artifact/ReverseDnsNames.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="tags are-medium">
-    <span class="tag" v-for="reverseDnsName in reverseDnsNames" :key="reverseDnsName.name">
-      {{ reverseDnsName.name }}
-    </span>
+    <router-link
+      class="tag"
+      v-for="reverseDnsName in reverseDnsNames"
+      :key="reverseDnsName.name"
+      :to="{ name: 'Artifacts', query: { q: getQuery(reverseDnsName.name) } }"
+      >{{ reverseDnsName.name }}</router-link
+    >
   </div>
 </template>
 
@@ -18,6 +22,13 @@ export default defineComponent({
       type: Array as PropType<ReverseDnsName[]>,
       required: true
     }
+  },
+  setup() {
+    const getQuery = (name: string) => {
+      return `reverse_dns_name:"${name}"`
+    }
+
+    return { getQuery }
   }
 })
 </script>
diff --git a/frontend/src/components/artifact/Tags.vue b/frontend/src/components/artifact/Tags.vue
@@ -1,13 +1,10 @@
 <template>
   <div class="tags are-medium">
     <router-link
-      class="tag is-info is-light"
+      class="tag"
       v-for="tag in tags"
       :key="tag.id"
-      :to="{
-        name: 'Alerts',
-        query: { tag: tag.name }
-      }"
+      :to="{ name: 'Artifacts', query: { q: getQuery(tag.name) } }"
     >
       {{ tag.name }}
     </router-link>
@@ -26,6 +23,13 @@ export default defineComponent({
       type: Array as PropType<Tag[]>,
       required: true
     }
+  },
+  setup() {
+    const getQuery = (name: string) => {
+      return `tag:"${name}"`
+    }
+
+    return { getQuery }
   }
 })
 </script>
diff --git a/frontend/src/components/artifact/Vulnerabilities.vue b/frontend/src/components/artifact/Vulnerabilities.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="tags are-medium">
-    <span class="tag" v-for="vuln in vulnerabilities" :key="vuln.name">
-      {{ vuln.name }}
-    </span>
+    <router-link
+      class="tag"
+      v-for="vuln in vulnerabilities"
+      :key="vuln.name"
+      :to="{ name: 'Artifacts', query: { q: getQuery(vuln.name) } }"
+      >{{ vuln.name }}</router-link
+    >
   </div>
 </template>
 
@@ -18,6 +22,12 @@ export default defineComponent({
       type: Array as PropType<Vulnerability[]>,
       required: true
     }
+  },
+  setup() {
+    const getQuery = (name: string) => {
+      return `vuln:"${name}"`
+    }
+    return { getQuery }
   }
 })
 </script>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -70,7 +70,7 @@ export interface Vulnerability {
 }
 
 export interface Port {
-  number: string
+  number: number
 }
 
 export interface Artifact {