Artifact.vue in mihari-5.3.0

- old
+ new

@@ -17,16 +17,11 @@
             Geolocation
             <span class="has-text-grey">{{
               countryCode || artifact.geolocation?.countryCode
             }}</span>
           </h4>
-          <iframe
-            class="mb-4"
-            :src="googleMapSrc"
-            width="100%"
-            height="240px"
-          ></iframe>
+          <iframe class="mb-4" :src="googleMapSrc" width="100%" height="240px"></iframe>
         </div>
 
         <div v-if="urlscanLiveshotSrc">
           <h4 class="is-size-4 mb-2">
             Live screenshot
@@ -44,14 +39,11 @@
             <tr>
               <th>ID</th>
               <td>
                 {{ artifact.id }}
                 <span class="buttons is-pulled-right">
-                  <button
-                    class="button is-primary is-light is-small"
-                    @click="enrichArtifact"
-                  >
+                  <button class="button is-primary is-light is-small" @click="enrichArtifact">
                     <span>Enrich</span>
                     <span class="icon is-small">
                       <i class="fas fa-lightbulb"></i>
                     </span>
                   </button>
@@ -65,14 +57,11 @@
                     <span class="icon is-small">
                       <i class="fas fa-info-circle"></i>
                     </span>
                   </button>
 
-                  <button
-                    class="button is-light is-small"
-                    @click="deleteArtifact"
-                  >
+                  <button class="button is-light is-small" @click="deleteArtifact">
                     <span>Delete</span>
                     <span class="icon is-small">
                       <i class="fas fa-times"></i>
                     </span>
                   </button>
@@ -102,18 +91,14 @@
           <div class="modal is-active">
             <div class="modal-background" @click="flipShowMetadata"></div>
             <div class="modal-card">
               <header class="modal-card-head">
                 <p class="modal-card-title">Metadata</p>
-                <button
-                  class="delete"
-                  aria-label="close"
-                  @click="flipShowMetadata"
-                ></button>
+                <button class="delete" aria-label="close" @click="flipShowMetadata"></button>
               </header>
               <section class="modal-card-body">
-                <VueJsonPretty :data="artifact.metadata"></VueJsonPretty>
+                <VueJsonPretty :data="artifact.metadata as any"></VueJsonPretty>
               </section>
             </div>
           </div>
         </div>
       </div>
@@ -124,13 +109,11 @@
       <AS :autonomousSystem="artifact.autonomousSystem"></AS>
     </div>
 
     <div class="block" v-if="artifact.reverseDnsNames">
       <h4 class="is-size-4 mb-2">Reverse DNS</h4>
-      <ReverseDnsNames
-        :reverseDnsNames="artifact.reverseDnsNames"
-      ></ReverseDnsNames>
+      <ReverseDnsNames :reverseDnsNames="artifact.reverseDnsNames"></ReverseDnsNames>
     </div>
 
     <div class="block" v-if="artifact.dnsRecords">
       <h4 class="is-size-4 mb-2">DNS records</h4>
       <DnsRecords :dnsRecords="artifact.dnsRecords"></DnsRecords>
@@ -164,42 +147,42 @@
     <Alerts :artifact="artifact.data"></Alerts>
   </div>
 </template>
 
 <script lang="ts">
-import "vue-json-pretty/lib/styles.css";
+import "vue-json-pretty/lib/styles.css"
 
-import { computed, defineComponent, onMounted, PropType, ref } from "vue";
-import VueJsonPretty from "vue-json-pretty";
-import { useRouter } from "vue-router";
+import { computed, defineComponent, onMounted, type PropType, ref } from "vue"
+import VueJsonPretty from "vue-json-pretty"
+import { useRouter } from "vue-router"
 
 import {
   generateDeleteArtifactTask,
   generateEnrichArtifactTask,
   generateGetAlertsTask,
-  generateGetIPTask,
-} from "@/api-helper";
-import Alerts from "@/components/alert/AlertsWithPagination.vue";
-import AS from "@/components/artifact/AS.vue";
-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 WhoisRecord from "@/components/artifact/WhoisRecord.vue";
-import Links from "@/components/link/Links.vue";
-import Loading from "@/components/Loading.vue";
-import { ArtifactWithTags, GCS } from "@/types";
-import { getGCSByCountryCode, getGCSByIPInfo } from "@/utils";
+  generateGetIPTask
+} from "@/api-helper"
+import Alerts from "@/components/alert/AlertsWithPagination.vue"
+import AS from "@/components/artifact/AS.vue"
+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 WhoisRecord from "@/components/artifact/WhoisRecord.vue"
+import Links from "@/components/link/Links.vue"
+import Loading from "@/components/Loading.vue"
+import type { ArtifactWithTags, GCS } from "@/types"
+import { getGCSByCountryCode, getGCSByIPInfo } from "@/utils"
 
 export default defineComponent({
   name: "ArtifactItem",
   props: {
     artifact: {
       type: Object as PropType<ArtifactWithTags>,
-      required: true,
-    },
+      required: true
+    }
   },
   components: {
     Alerts,
     AS,
     DnsRecords,
@@ -208,96 +191,94 @@
     ReverseDnsNames,
     Tags,
     VueJsonPretty,
     WhoisRecord,
     CPEs,
-    Ports,
+    Ports
   },
   emits: ["refresh"],
   setup(props, context) {
-    const googleMapSrc = ref<string | undefined>(undefined);
-    const countryCode = ref<string | undefined>(undefined);
-    const showMetadata = ref(false);
+    const googleMapSrc = ref<string | undefined>(undefined)
+    const countryCode = ref<string | undefined>(undefined)
+    const showMetadata = ref(false)
 
-    const router = useRouter();
+    const router = useRouter()
 
     const urlscanLiveshotSrc = computed<string | undefined>(() => {
       if (props.artifact.dataType === "domain") {
-        const url = `http://${props.artifact.data}`;
-        return `https://urlscan.io/liveshot/?url=${url}`;
+        const url = `http://${props.artifact.data}`
+        return `https://urlscan.io/liveshot/?url=${url}`
       }
 
       if (props.artifact.dataType === "url") {
-        return `https://urlscan.io/liveshot/?url=${props.artifact.data}`;
+        return `https://urlscan.io/liveshot/?url=${props.artifact.data}`
       }
 
-      return undefined;
-    });
+      return undefined
+    })
 
     const getGoogleMapSrc = (gcs: GCS | undefined): string | undefined => {
       if (gcs !== undefined) {
-        return `https://maps.google.co.jp/maps?output=embed&q=${gcs.lat},${gcs.long}&z=3`;
+        return `https://maps.google.co.jp/maps?output=embed&q=${gcs.lat},${gcs.long}&z=3`
       }
 
-      return undefined;
-    };
+      return undefined
+    }
 
-    const getIPInfoTask = generateGetIPTask();
-    const getAlertsTask = generateGetAlertsTask();
-    const deleteArtifactTask = generateDeleteArtifactTask();
-    const enrichArtifactTask = generateEnrichArtifactTask();
+    const getIPInfoTask = generateGetIPTask()
+    const getAlertsTask = generateGetAlertsTask()
+    const deleteArtifactTask = generateDeleteArtifactTask()
+    const enrichArtifactTask = generateEnrichArtifactTask()
 
     const deleteArtifact = async () => {
-      const result = window.confirm(
-        `Are you sure you want to delete ${props.artifact.data}?`
-      );
+      const result = window.confirm(`Are you sure you want to delete ${props.artifact.data}?`)
 
       if (result) {
-        await deleteArtifactTask.perform(props.artifact.id);
-        router.push("/");
+        await deleteArtifactTask.perform(props.artifact.id)
+        router.push("/")
       }
-    };
+    }
 
     const enrichArtifact = async () => {
-      await enrichArtifactTask.perform(props.artifact.id);
-      context.emit("refresh");
-    };
+      await enrichArtifactTask.perform(props.artifact.id)
+      context.emit("refresh")
+    }
 
     onMounted(async () => {
       if (props.artifact.dataType === "ip") {
-        let gcs: GCS | undefined = undefined;
+        let gcs: GCS | undefined = undefined
 
         if (props.artifact.geolocation === null) {
           // Use IPInfo if an artifact does not have geolocation
-          const ipinfo = await getIPInfoTask.perform(props.artifact.data);
-          gcs = getGCSByIPInfo(ipinfo);
-          countryCode.value = ipinfo.countryCode;
+          const ipinfo = await getIPInfoTask.perform(props.artifact.data)
+          gcs = getGCSByIPInfo(ipinfo)
+          countryCode.value = ipinfo.countryCode
         } else {
-          gcs = getGCSByCountryCode(props.artifact.geolocation.countryCode);
+          gcs = getGCSByCountryCode(props.artifact.geolocation.countryCode)
         }
 
-        googleMapSrc.value = getGoogleMapSrc(gcs);
+        googleMapSrc.value = getGoogleMapSrc(gcs)
       }
-    });
+    })
 
     const flipShowMetadata = () => {
-      showMetadata.value = !showMetadata.value;
-    };
+      showMetadata.value = !showMetadata.value
+    }
 
     return {
       countryCode,
       enrichArtifactTask,
       getAlertsTask,
       googleMapSrc,
       showMetadata,
       urlscanLiveshotSrc,
       deleteArtifact,
       enrichArtifact,
-      flipShowMetadata,
-    };
-  },
-});
+      flipShowMetadata
+    }
+  }
+})
 </script>
 
 <style scoped>
 img.liveshot {
   border: 1px solid #aaa;
@@ -306,10 +287,12 @@
   max-height: 250px;
   object-fit: cover;
   object-position: top;
   display: block;
   overflow: hidden;
-  transition: max-height 1s, height 1s;
+  transition:
+    max-height 1s,
+    height 1s;
 }
 
 img.liveshot:hover {
   max-height: none;
 }