From 68e6c78c22e318f7de0dd64d5683c87f76efb659 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:30:30 +0200
Subject: [PATCH] refactor: rework async ToolLogs

---
 app/src/types/core/api.ts       | 11 +++++++
 app/src/views/tool/ToolLogs.vue | 53 ++++++++++++---------------------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/app/src/types/core/api.ts b/app/src/types/core/api.ts
index 14190b2c..2afcbc9b 100644
--- a/app/src/types/core/api.ts
+++ b/app/src/types/core/api.ts
@@ -244,6 +244,17 @@ export type Firewall = {
 
 // LOGS
 
+export type LogList = {
+  operation: {
+    name: string
+    path: string
+    description: string
+    started_at: string
+    success: boolean | '?'
+    parent: string | null
+  }[]
+}
+
 export type LogInfo = {
   description: string
   name: string
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 6fc34eb3..56fb7ad6 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,56 +1,41 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import { useInitialQueries } from '@/composables/useInitialQueries'
+import api from '@/api'
 import { useSearch } from '@/composables/useSearch'
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import type { Obj } from '@/types/commons'
+import type { LogList } from '@/types/core/api'
 
-const { loading } = useInitialQueries(
-  [{ uri: `logs?limit=${25}&with_details` }],
-  { onQueriesResponse },
-)
+const operations = await api
+  .fetch<LogList>({ uri: `logs?limit=${25}&with_details` })
+  .then((logs) => {
+    const iconAndClass = {
+      '?': { icon: 'question', class: 'text-warning' },
+      true: { icon: 'check', class: 'text-success' },
+      false: { icon: 'close', class: 'text-danger' },
+    } as Obj<{ icon: string; class: string }>
+    return logs.operation.map((log) => ({
+      ...log,
+      ...iconAndClass[String(log.success) as keyof typeof iconAndClass],
+    }))
+  })
 
-const operations = ref<Obj[] | undefined>()
 const [search, filteredOperations] = useSearch(operations, (s, op) => {
   return op.description.toLowerCase().includes(s)
 })
-
-function onQueriesResponse({ operation }: any) {
-  operation.forEach((log, index) => {
-    if (log.success === '?') {
-      operation[index].icon = 'question'
-      operation[index].class = 'warning'
-    } else if (log.success) {
-      operation[index].icon = 'check'
-      operation[index].class = 'success'
-    } else {
-      operation[index].icon = 'close'
-      operation[index].class = 'danger'
-    }
-  })
-  operations.value = operation
-}
 </script>
 
 <template>
-  <ViewSearch
-    v-model="search"
-    :items="filteredOperations"
-    items-name="logs"
-    :loading="loading"
-    skeleton="CardListSkeleton"
-  >
+  <ViewSearch v-model="search" :items="filteredOperations" items-name="logs">
     <YCard :title="$t('logs_operation')" icon="wrench" no-body>
       <BListGroup flush>
         <BListGroupItem
           v-for="log in filteredOperations"
           :key="log.name"
-          :to="{ name: 'tool-log', params: { name: log.name || log.log_path } }"
+          :to="{ name: 'tool-log', params: { name: log.name || log.path } }"
           :title="readableDate(log.started_at)"
         >
-          <small class="me-3">{{ distanceToNow(log.started_at) }} </small>
-          <YIcon :iname="log.icon" :class="'text-' + log.class" />
+          <small class="me-3">{{ distanceToNow(log.started_at) }}</small>
+          <YIcon :iname="log.icon" :class="log.class" />
           {{ log.description }}
         </BListGroupItem>
       </BListGroup>