chore: wip

Author: glennmichael123

resources/components/Queue/QueueTable.vue

@@ -1,9 +1,78 @@
 <script setup lang="ts">
 const queueStore = useQueueStore()
 
+interface QueuePayload {
+  path: string
+  name: string
+  maxTries: number
+  timeOut: number | null
+  timeOutAt: Date | null
+  params: any
+  classPayload: string
+}
+
 onMounted(async () => {
   await queueStore.fetchQueues()
 })
+
+function parseName(payload: string): string {
+  try {
+    const parsedPayload = JSON.parse(payload) as QueuePayload
+
+    return parsedPayload.name
+
+  } catch (e) {
+    console.error('Error parsing classPayload:', e)
+
+    return ''
+  }
+}
+
+function parseDescription(payload: string): string {
+  try {
+    const parsedPayload = JSON.parse(payload) as QueuePayload
+
+    const parsedClassPayload = JSON.parse(parsedPayload.classPayload) as any
+
+    return parsedClassPayload.description
+
+  } catch (e) {
+    console.error('Error parsing classPayload:', e)
+
+    return ''
+  }
+}
+
+function parseTries(payload: string): number {
+  try {
+    const parsedPayload = JSON.parse(payload) as QueuePayload
+
+    const parsedClassPayload = JSON.parse(parsedPayload.classPayload) as any
+
+    return Number(parsedClassPayload.tries)
+
+  } catch (e) {
+    console.error('Error parsing classPayload:', e)
+
+    return 0
+  }
+}
+
+
+
+function parsePath(payload: string): string {
+  try {
+    const parsedPayload = JSON.parse(payload) as QueuePayload
+
+    return parsedPayload.path
+
+  } catch (e) {
+    console.error('Error parsing classPayload:', e)
+
+    return ''
+  }
+}
+
 </script>
 <template>
   <div class="px-4 pt-12 lg:px-8 sm:px-6">
@@ -62,29 +131,29 @@ onMounted(async () => {
               </thead>
 
               <tbody class="bg-white divide-y divide-gray-200">
-                <tr>
+                <tr v-for="queue in queueStore.queues" :key="queue.id">
                   <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 font-medium sm:pl-6">
-                    Example Job
+                    {{  parseName(queue.payload)  }}
                   </td>
 
                   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                    Demo job that runs every minute
+                    {{ parseDescription(queue.payload) }}
                   </td>
 
                   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
-                    ./app/Jobs/ExampleJob.ts
+                    {{ parsePath(queue.payload) }}
                   </td>
 
                   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                    3
+                    {{ parseTries(queue.payload) }}
                   </td>
 
                   <td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
-                    01-03-2023 08:23:15
+                    {{ queue.created_at }}
                   </td>
 
                   <td class="whitespace-nowrap px-3 py-4 text-right text-sm text-gray-500">
-                    04-19-2022 09:04:20
+                    {{ queue.updated_at }}
                   </td>
 
                   <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">

resources/stores/queue.ts

@@ -1,3 +1,5 @@
+import { ref, type Ref } from 'vue'
+
 interface Queue {
   id?: number
   queue: string
@@ -9,19 +11,11 @@ interface Queue {
   updated_at?: string | null
 }
 
-interface State {
-  queues: Queue[]
-}
 
-export const useQueueStore = defineStore('queue', {
-  state: (): State => {
-    return {
-      queues: [],
-    }
-  },
+export const useQueueStore = defineStore('queue', () => {
+    const queues: Ref<Queue[]> = ref([])
 
-  actions: {
-    async fetchQueues(): Promise<void> {
+    async function fetchQueues(): Promise<void> {
       const url = `http://localhost:3008/queues`
 
       const response = await fetch(url, {
@@ -32,15 +26,15 @@ export const useQueueStore = defineStore('queue', {
         },
       })
 
-      const queues = await response.json() as Queue[]
+      const res = await response.json() as Queue[]
 
-      this.queues = queues
-    },
-  },
+      queues.value = res
+    }
 
-  getters: {
-    getQueues: state => state.queues
-  },
+    return {
+      queues,
+      fetchQueues
+    }
 })
 
 if (import.meta.hot)

storage/framework/core/queue/src/process.ts

@@ -6,12 +6,13 @@ import { Job } from '../../../orm/src/models/Job'
 import { runJob } from './job'
 
 interface QueuePayload {
-  displayName: string
+  path: string
   name: string
   maxTries: number
   timeOut: number | null
   timeOutAt: Date | null
-  payload: any
+  params: any,
+  classPayload: string
 }
 
 export async function processJobs(queue: string | undefined): Promise<Ok<string, never>> {
@@ -44,27 +45,27 @@ async function executeJobs(queue: string | undefined): Promise<void> {
     const body: QueuePayload = JSON.parse(job.payload)
     const currentAttempts = job.attempts || 0
 
-    log.info(`Running job: ${body.displayName}`)
+    log.info(`Running job: ${body.path}`)
 
     await updateJobAttempts(job, currentAttempts)
 
     try {
       await runJob(body.name, {
         queue: job.queue,
-        payload: body.payload,
+        payload: body.params,
         context: '',
         maxTries: body.maxTries,
         timeout: 60,
       })
 
       await job.delete()
-      log.info(`Successfully ran job: ${body.displayName}`)
+      log.info(`Successfully ran job: ${body.path}`)
     }
     catch (error) {
       const stringifiedError = JSON.stringify(error)
 
       storeFailedJob(job, stringifiedError)
-      log.error(`Job failed: ${body.displayName}`, stringifiedError)
+      log.error(`Job failed: ${body.path}`, stringifiedError)
     }
   }
 }

storage/framework/core/queue/src/utils.ts

@@ -11,12 +11,12 @@ export async function storeJob(name: string, options: QueueOption): Promise<void
   const importedJob = (await import(path.appPath(`Jobs/${name}.ts`))).default
 
   const payloadJson = JSON.stringify({
-    displayName: `app/Jobs/${name}.ts`,
+    path: `app/Jobs/${name}.ts`,
     name,
     maxTries: options.tries || 1,
     timeout: null,
     timeoutAt: null,
-    payload: options.payload || {},
+    params: options.payload || {},
     classPayload: JSON.stringify(importedJob),
   })