feat: add pagination in the log detail

src/background/workflow-engine/index.js

@@ -1,8 +1,9 @@
 /* eslint-disable no-underscore-dangle */
 import browser from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
-import { toCamelCase } from '@/utils/helper';
 import { tasks } from '@/utils/shared';
+import { toCamelCase } from '@/utils/helper';
+import { generateJSON } from '@/utils/data-exporter';
 import errorMessage from './error-message';
 import referenceData from '@/utils/reference-data';
 import workflowState from '../workflow-state';
@@ -174,6 +175,7 @@ class WorkflowEngine {
       if (!this.workflow.isTesting) {
         const { logs } = await browser.storage.local.get('logs');
         const { name, icon, id } = this.workflow;
+        const jsonData = generateJSON(Object.keys(this.data), this.data);
 
         logs.push({
           name,
@@ -181,7 +183,7 @@ class WorkflowEngine {
           status,
           id: this.id,
           workflowId: id,
-          data: this.data,
+          data: jsonData,
           history: this.logs,
           endedAt: this.endedTimestamp,
           startedAt: this.startedTimestamp,

src/components/newtab/logs/LogsDataViewer.vue

@@ -23,7 +23,7 @@
     </ui-popover>
   </div>
   <prism-editor
-    :model-value="dataStr"
+    :model-value="jsonData"
     :highlight="highlighter('json')"
     :class="editorClass"
     readonly
@@ -52,6 +52,8 @@ const data = Array.isArray(props.log.data)
   ? props.log.data
   : generateJSON(Object.keys(props.log.data), props.log.data);
 const dataStr = JSON.stringify(data, null, 2);
+const jsonData =
+  dataStr.length >= 5e4 ? `${dataStr.slice(0, 5e4)}\n...` : dataStr;
 
 const fileName = ref(props.log.name);
 

src/newtab/pages/logs.vue

@@ -7,7 +7,7 @@
       @updateSorts="sortsBuilder[$event.key] = $event.value"
       @updateFilters="filtersBuilder[$event.key] = $event.value"
     />
-    <shared-logs-table :logs="logs" class="w-full">
+    <shared-logs-table :logs="logs" class="w-full" style="min-height: 320px">
       <template #item-prepend="{ log }">
         <td class="w-8">
           <ui-checkbox

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

@@ -23,53 +23,81 @@
       <ui-button class="text-red-500" @click="deleteLog"> Delete </ui-button>
     </div>
     <div class="flex items-start">
-      <ui-list class="w-7/12 mr-6">
-        <router-link
-          v-if="collectionLog"
-          :to="activeLog.collectionLogId"
-          class="mb-4 flex block"
-        >
-          <v-remixicon name="riArrowLeftLine" class="mr-2" />
-          Go back
-          <span class="font-semibold mx-1">{{ collectionLog.name }}</span> log
-        </router-link>
-        <ui-list-item v-for="(item, index) in activeLog.history" :key="index">
-          <span
-            :class="logsType[item.type]?.color"
-            class="p-1 rounded-lg align-middle inline-block mr-2"
+      <div class="w-7/12 mr-6">
+        <ui-list>
+          <router-link
+            v-if="collectionLog"
+            :to="activeLog.collectionLogId"
+            class="mb-4 flex"
           >
-            <v-remixicon :name="logsType[item.type]?.icon" size="20" />
-          </span>
-          <div class="flex-1 text-overflow pr-2">
-            <p class="w-full text-overflow leading-tight">
-              {{ item.name }}
-            </p>
-            <p
-              v-if="item.type === 'error'"
-              :title="item.message"
-              class="
-                text-sm
-                leading-tight
-                text-overflow text-gray-600
-                dark:text-gray-200
-              "
+            <v-remixicon name="riArrowLeftLine" class="mr-2" />
+            Go back
+            <span class="font-semibold mx-1">{{ collectionLog.name }}</span> log
+          </router-link>
+          <ui-list-item v-for="(item, index) in history" :key="index">
+            <span
+              :class="logsType[item.type]?.color"
+              class="p-1 rounded-lg align-middle inline-block mr-2"
             >
-              {{ item.message }}
+              <v-remixicon :name="logsType[item.type]?.icon" size="20" />
+            </span>
+            <div class="flex-1 text-overflow pr-2">
+              <p class="w-full text-overflow leading-tight">
+                {{ item.name }}
+              </p>
+              <p
+                v-if="item.type === 'error'"
+                :title="item.message"
+                class="
+                  text-sm
+                  leading-tight
+                  text-overflow text-gray-600
+                  dark:text-gray-200
+                "
+              >
+                {{ item.message }}
+              </p>
+            </div>
+            <router-link
+              v-if="item.logId"
+              :to="'/logs/' + item.logId"
+              class="mr-4"
+              title="Open log detail"
+            >
+              <v-remixicon name="riExternalLinkLine" />
+            </router-link>
+            <p class="text-gray-600">
+              {{ countDuration(0, item.duration || 0) }}
             </p>
+          </ui-list-item>
+        </ui-list>
+        <div
+          v-if="activeLog.history.length >= 10"
+          class="flex items-center justify-between mt-4"
+        >
+          <div>
+            Showing
+            <select
+              v-model="pagination.perPage"
+              class="p-1 rounded-md bg-input"
+            >
+              <option
+                v-for="num in [10, 15, 25, 50, 100]"
+                :key="num"
+                :value="num"
+              >
+                {{ num }}
+              </option>
+            </select>
+            items out of {{ activeLog.history.length }}
           </div>
-          <router-link
-            v-if="item.logId"
-            :to="'/logs/' + item.logId"
-            class="mr-4"
-            title="Open log detail"
-          >
-            <v-remixicon name="riExternalLinkLine" />
-          </router-link>
-          <p class="text-gray-600">
-            {{ countDuration(0, item.duration || 0) }}
-          </p>
-        </ui-list-item>
-      </ui-list>
+          <ui-pagination
+            v-model="pagination.currentPage"
+            :per-page="pagination.perPage"
+            :records="activeLog.history.length"
+          />
+        </div>
+      </div>
       <div class="w-5/12 logs-details sticky top-10">
         <logs-data-viewer :log="activeLog" />
       </div>
@@ -77,7 +105,7 @@
   </div>
 </template>
 <script setup>
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, shallowReactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import Log from '@/models/log';
 import dayjs from '@/lib/dayjs';
@@ -110,7 +138,18 @@ const logsType = {
 const route = useRoute();
 const router = useRouter();
 
+const pagination = shallowReactive({
+  perPage: 10,
+  currentPage: 1,
+});
+
 const activeLog = computed(() => Log.find(route.params.id));
+const history = computed(() =>
+  activeLog.value.history.slice(
+    (pagination.currentPage - 1) * pagination.perPage,
+    pagination.currentPage * pagination.perPage
+  )
+);
 const collectionLog = computed(() => Log.find(activeLog.value.collectionLogId));
 
 function deleteLog() {