fix: hosted workflow log

src/newtab/pages/Logs.vue

@@ -11,7 +11,7 @@
     <div v-if="logs" style="min-height: 320px">
       <shared-logs-table
         :logs="logs"
-        :running="workflowStore.workflowState"
+        :running="workflowStore.states"
         class="w-full"
       >
         <template #item-prepend="{ log }">

src/newtab/pages/workflows/Host.vue

@@ -35,7 +35,16 @@
         style="height: 48px"
       >
         <ui-tab value="editor">{{ t('common.editor') }}</ui-tab>
-        <ui-tab value="logs">{{ t('common.log', 2) }}</ui-tab>
+        <ui-tab value="logs">
+          {{ t('common.log', 2) }}
+          <span
+            v-if="workflowStates.length > 0"
+            class="ml-2 p-1 text-center inline-block text-xs rounded-full bg-accent text-white dark:text-black"
+            style="min-width: 25px"
+          >
+            {{ workflowStates.length }}
+          </span>
+        </ui-tab>
       </ui-tabs>
       <div class="flex-grow"></div>
       <ui-card padding="p-1">
@@ -93,17 +102,10 @@
         />
       </ui-tab-panel>
       <ui-tab-panel value="logs">
-        <shared-logs-table :logs="logs" class="w-full">
-          <template #item-append="{ log: itemLog }">
-            <td class="text-right">
-              <v-remixicon
-                name="riDeleteBin7Line"
-                class="inline-block text-red-500 cursor-pointer dark:text-red-400"
-                @click="deleteLog(itemLog.id)"
-              />
-            </td>
-          </template>
-        </shared-logs-table>
+        <editor-logs
+          :workflow-id="workflowId"
+          :workflow-states="workflowStates"
+        />
       </ui-tab-panel>
     </ui-tab-panels>
   </div>
@@ -115,15 +117,14 @@ import { useRoute, useRouter } from 'vue-router';
 import { sendMessage } from '@/utils/message';
 import { useDialog } from '@/composable/dialog';
 import { useShortcut } from '@/composable/shortcut';
-import { useLiveQuery } from '@/composable/liveQuery';
 import { useGroupTooltip } from '@/composable/groupTooltip';
 import { findTriggerBlock } from '@/utils/helper';
 import convertWorkflowData from '@/utils/convertWorkflowData';
+import { useWorkflowStore } from '@/stores/workflow';
 import { useHostedWorkflowStore } from '@/stores/hostedWorkflow';
-import dbLogs from '@/db/logs';
 import getTriggerText from '@/utils/triggerText';
+import EditorLogs from '@/components/newtab/workflow/editor/EditorLogs.vue';
 import WorkflowEditor from '@/components/newtab/workflow/WorkflowEditor.vue';
-import SharedLogsTable from '@/components/newtab/shared/SharedLogsTable.vue';
 
 useGroupTooltip();
 
@@ -131,6 +132,7 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const dialog = useDialog();
+const workflowStore = useWorkflowStore();
 const hostedWorkflowStore = useHostedWorkflowStore();
 
 const workflowId = route.params.id;
@@ -145,9 +147,6 @@ const editorOptions = {
 
 /* eslint-disable-next-line */
 const shortcut = useShortcut('editor:execute-workflow', executeWorkflow);
-const logs = useLiveQuery(() =>
-  dbLogs.items.where('workflowId').equals(workflowId).toArray()
-);
 
 const state = reactive({
   editorKey: 0,
@@ -158,6 +157,9 @@ const state = reactive({
 });
 
 const workflow = computed(() => hostedWorkflowStore.getById(workflowId));
+const workflowStates = computed(() =>
+  workflowStore.getWorkflowStates(workflowId)
+);
 
 function syncWorkflow() {
   state.loadingSync = true;
@@ -205,9 +207,6 @@ function executeWorkflow() {
 
   sendMessage('workflow:execute', payload, 'background');
 }
-function deleteLog(logId) {
-  dbLogs.items.where('id').equals(logId);
-}
 async function retrieveTriggerText() {
   const triggerBlock = findTriggerBlock(workflow.value.drawflow);
   if (!triggerBlock) return;

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

@@ -45,11 +45,11 @@
           <ui-tab value="logs" class="flex items-center">
             {{ t('common.log', 2) }}
             <span
-              v-if="workflowStore.states.length > 0"
+              v-if="workflowStates.length > 0"
               class="ml-2 p-1 text-center inline-block text-xs rounded-full bg-accent text-white dark:text-black"
               style="min-width: 25px"
             >
-              {{ workflowStore.states.length }}
+              {{ workflowStates.length }}
             </span>
           </ui-tab>
         </ui-tabs>
@@ -91,7 +91,7 @@
         <ui-tab-panel value="logs" class="mt-24 container">
           <editor-logs
             :workflow-id="route.params.id"
-            :workflow-states="workflowStore.states"
+            :workflow-states="workflowStates"
           />
         </ui-tab-panel>
       </ui-tab-panels>
@@ -125,6 +125,7 @@
 </template>
 <script setup>
 import {
+  watch,
   provide,
   reactive,
   computed,
@@ -243,6 +244,9 @@ const workflowModals = {
 };
 
 const workflow = computed(() => workflowStore.getById(route.params.id));
+const workflowStates = computed(() =>
+  workflowStore.getWorkflowStates(route.params.id)
+);
 const activeWorkflowModal = computed(
   () => workflowModals[modalState.name] || {}
 );
@@ -408,6 +412,25 @@ function onEditorInit(instance) {
     instance.removeEdges([edge]);
   });
   instance.onNodesChange(onNodesChange);
+
+  const { blockId } = route.query;
+  if (blockId) {
+    const block = instance.getNode.value(blockId);
+    if (!block) return;
+
+    instance.addSelectedNodes([block]);
+    setTimeout(() => {
+      const editorContainer = document.querySelector('.vue-flow');
+      const { height, width } = editorContainer.getBoundingClientRect();
+      const { x, y } = block.position;
+
+      instance.setTransform({
+        y: -(y - height / 2),
+        x: -(x - width / 2) - 200,
+        zoom: 1,
+      });
+    }, 200);
+  }
 }
 function clearHighlightedElements() {
   const elements = document.querySelectorAll(
@@ -613,6 +636,13 @@ const shortcut = useShortcut([
   getShortcut('editor:duplicate-block', duplicateElements),
 ]);
 
+watch(
+  () => state.activeTab,
+  (value) => {
+    router.replace({ ...route, query: { tab: value } });
+  }
+);
+
 /* eslint-disable consistent-return */
 onBeforeRouteLeave(() => {
   updateHostedWorkflow();

src/stores/folder.js

@@ -41,7 +41,7 @@ export const useFolderStore = defineStore('folder', {
     },
     load() {
       return browser.storage.local.get('folders').then(({ folders }) => {
-        this.items = folders;
+        this.items = folders || [];
         this.retrieved = true;
         return folders;
       });

src/stores/workflow.js

@@ -93,6 +93,8 @@ export const useWorkflowStore = defineStore('workflow', {
   getters: {
     getById: (state) => (id) => state.workflows[id],
     getWorkflows: (state) => Object.values(state.workflows),
+    getWorkflowStates: (state) => (id) =>
+      state.states.filter(({ workflowId }) => workflowId === id),
   },
   actions: {
     async loadData() {