feat(newtab): add logs on dashboard

src/components/newtab/workflow/WorkflowCard.vue

@@ -2,7 +2,7 @@
   <ui-card class="hover:ring-accent hover:ring-2">
     <div class="mb-4 flex items-center">
       <span class="p-2 rounded-lg bg-box-transparent inline-block">
-        <v-remixicon name="riGlobalLine" />
+        <v-remixicon :name="workflow.icon" />
       </span>
       <div class="flex-grow"></div>
       <button @click="$emit('execute', workflow)">

src/newtab/pages/Home.vue

@@ -23,25 +23,30 @@
           </div>
           <table class="w-full table-fixed">
             <tbody class="divide-y">
-              <tr v-for="i in 10" :key="i" class="hoverable">
+              <tr v-for="log in logs" :key="log.id" class="hoverable">
                 <td class="p-2 w-6/12 text-overflow">
-                  Lorem ipsum dolor sit amet
+                  <router-link
+                    :to="`/logs/${log.id}`"
+                    class="block w-full h-full"
+                  >
+                    {{ log.name }}
+                  </router-link>
                 </td>
                 <td class="p-2 text-gray-600 dark:text-gray-200">
-                  {{ i + 1 }} Days ago
+                  {{ dayjs(log.startedAt).fromNow() }}
                 </td>
                 <td class="p-2 text-right">
                   <span
+                    :class="statusColors[log.status]"
                     class="
                       inline-block
                       py-1
-                      px-2
-                      text-sm text-green-700
-                      bg-green-500/10
+                      w-16
+                      text-center text-sm
                       rounded-lg
                     "
                   >
-                    Success
+                    {{ log.status }}
                   </span>
                 </td>
               </tr>
@@ -73,7 +78,10 @@
 </template>
 <script setup>
 import { computed } from 'vue';
+import { statusColors } from '@/utils/shared';
 import Workflow from '@/models/workflow';
+import Log from '@/models/log';
+import dayjs from '@/lib/dayjs';
 import SharedTaskList from '@/components/shared/SharedTaskList.vue';
 import WorkflowCard from '@/components/newtab/workflow/WorkflowCard.vue';
 
@@ -86,4 +94,7 @@ const tasks = [
 const workflows = computed(() =>
   Workflow.query().orderBy('createdAt', 'desc').limit(3).get()
 );
+const logs = computed(() =>
+  Log.query().orderBy('startedAt', 'desc').limit(10).get()
+);
 </script>

src/newtab/pages/logs.vue

@@ -102,6 +102,7 @@ import { useStore } from 'vuex';
 import dayjs from '@/lib/dayjs';
 import Log from '@/models/log';
 import { countDuration } from '@/utils/helper';
+import { statusColors } from '@/utils/shared';
 import LogsDataViewer from '@/components/newtab/logs/LogsDataViewer.vue';
 
 const filters = ['all', 'success', 'stopped', 'error'];
@@ -109,11 +110,6 @@ const sorts = [
   { id: 'name', name: 'Alphabetical' },
   { id: 'startedAt', name: 'Created date' },
 ];
-const statusColors = {
-  error: 'bg-red-200',
-  success: 'bg-green-200',
-  stopped: 'bg-yellow-200',
-};
 
 const store = useStore();
 

src/newtab/pages/logs/[id].vue

@@ -23,7 +23,7 @@
       <ui-input prepend-icon="riSearch2Line" placeholder="Search..." />
     </div>
     <div class="flex items-start">
-      <ui-list class="w-7/12 mr-6" style="height: 900px">
+      <ui-list class="w-7/12 mr-6">
         <ui-list-item v-for="(item, index) in activeLog.history" :key="index">
           <span
             :title="item.message || item.type"

src/utils/shared.js

@@ -356,3 +356,9 @@ export const dataExportTypes = [
   { name: 'CSV', id: 'csv' },
   { name: 'Plain text', id: 'plain-text' },
 ];
+
+export const statusColors = {
+  error: 'bg-red-200',
+  success: 'bg-green-200',
+  stopped: 'bg-yellow-200',
+};