feature: Read discovery logs

frontend/src/localization/en.json

@@ -181,7 +181,9 @@
       "profile": "Profile",
       "discovery_status": "Discovery Status",
       "message": "Message",
-      "updated_at": "Last Scan"
+      "updated_at": "Last Scan",
+      "start_scan": "Start Scan",
+      "read_logs": "Read Logs"
     },
     "fetch": {
       "messages": {

frontend/src/localization/tr.json

@@ -181,7 +181,9 @@
       "profile": "Profil",
       "discovery_status": "Keşif Durumu",
       "message": "Mesaj",
-      "updated_at": "Son Tarama"
+      "updated_at": "Son Tarama",
+      "start_scan": "Tarama Başlat",
+      "read_logs": "Logları Görüntüle"
     },
     "fetch": {
       "messages": {

frontend/src/views/modals/Logs.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import http from "@/utils/http-common"
+import { nextTick, ref } from "vue"
+import { useI18n } from "vue-i18n"
+import useEmitter from "@/utils/emitter"
+
+const { t } = useI18n()
+const show = ref(false)
+const discovery_id = ref("")
+const logs = ref("")
+const logContainer = ref<HTMLElement | null>(null)
+const emitter = useEmitter()
+
+emitter.on("showLogsModal", (id: string) => {
+  discovery_id.value = id
+  query()
+})
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    logContainer.value = document.querySelector(".log-viewer")
+    logContainer.value?.scrollTo(0, logContainer.value.scrollHeight)
+  })
+}
+
+const query = () => {
+  http.get(`discoveries/logs/${discovery_id.value}`).then((res) => {
+    if (res.status == 200) {
+      logs.value = res.data.content
+      show.value = true
+      scrollToBottom()
+    } else {
+      window.$notification.error({
+        title: t("common.error"),
+        content: res.data.message,
+        duration: 5000,
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <n-modal v-model:show="show">
+    <n-card style="width: 900px">
+      <n-space justify="end" class="mb-3">
+        <n-button @click="query">
+          <i class="fas fa-refresh mr-2" />
+          {{ t("common.refresh") }}
+        </n-button>
+      </n-space>
+      <pre class="log-viewer" v-html="logs" style="height: 500px"></pre>
+    </n-card>
+  </n-modal>
+</template>
+
+<style lang="scss">
+.log-viewer {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: "Fira Code", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #fff;
+  background-color: #000;
+  padding: 10px;
+  margin: 0;
+  height: 100%;
+  overflow: auto;
+  border-radius: 3px;
+}
+</style>

frontend/src/views/pages/Discoveries.vue

@@ -5,6 +5,7 @@ import { NButton, NTag } from "naive-ui"
 import AsyncStore from "@/components/Table/AsyncStore.vue"
 import { DropdownMenu } from "@limanmys/frontend-kit"
 import DiscoveryModal from "@/views/modals/Discovery.vue"
+import LogsModal from "@/views/modals/Logs.vue"
 import { useDiscoveryStore } from "@/stores/discovery"
 import useEmitter from "@/utils/emitter"
 import type { IColumn } from "@limanmys/frontend-kit"
@@ -120,18 +121,32 @@ const columns: IColumn[] = reactive([
           {
             size: "small",
             onClick: () => {
-              store.run(row.id)
+              store.run(row.id).then(() => {
+                setTimeout(() => {
+                  emitter.emit("showLogsModal", row.id)
+                }, 500)
+              })
             },
           },
           {
             default: () => [
               h("i", { class: "fas fa-satellite-dish mr-2" }),
-              h("span", "Tarama Başlat"),
+              h("span", t("discovery.table.start_scan")),
             ],
           },
         ),
         h(DropdownMenu, {
           options: [
+            {
+              label: t("discovery.table.read_logs"),
+              key: "read_logs",
+              icon: () => h("i", { class: "fas fa-file-lines" }),
+              props: {
+                onClick: () => {
+                  emitter.emit("showLogsModal", row.id)
+                },
+              },
+            },
             {
               label: t("common.delete"),
               key: "delete",
@@ -169,4 +184,5 @@ const columns: IColumn[] = reactive([
     </template>
   </AsyncStore>
   <DiscoveryModal />
+  <LogsModal />
 </template>