first commit
This commit is contained in:
Tengku Yusof
parent
bcbf2f0958
commit
5275289942
1
.node-version
Normal file
1
.node-version
Normal file
@ -0,0 +1 @@
|
||||
20.11.1
|
||||
183
pages/BF-PRF/AS/QUEUE/index.vue
Normal file
183
pages/BF-PRF/AS/QUEUE/index.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useToast } from 'vue-toastification';
|
||||
|
||||
const toast = useToast();
|
||||
const loading = ref(true);
|
||||
const refreshInterval = ref(null);
|
||||
|
||||
// Use useFetch for queue data
|
||||
const { data: queueData, refresh: refreshQueueData } = await useFetch('/api/queue/asnaf-analysis', {
|
||||
onResponse({ response }) {
|
||||
loading.value = false;
|
||||
},
|
||||
onResponseError({ error }) {
|
||||
console.error('Error fetching queue data:', error);
|
||||
toast.error('Gagal memuat data queue');
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Start auto-refresh
|
||||
onMounted(() => {
|
||||
// Refresh every 30 seconds
|
||||
refreshInterval.value = setInterval(() => {
|
||||
refreshQueueData();
|
||||
}, 30000);
|
||||
});
|
||||
|
||||
// Clean up interval on component unmount
|
||||
onUnmounted(() => {
|
||||
if (refreshInterval.value) {
|
||||
clearInterval(refreshInterval.value);
|
||||
}
|
||||
});
|
||||
|
||||
// Retry failed job
|
||||
async function retryJob(jobId) {
|
||||
try {
|
||||
await useFetch(`/api/queue/asnaf-analysis/${jobId}/retry`, {
|
||||
method: 'POST',
|
||||
onResponse() {
|
||||
toast.success('Job akan diproses semula');
|
||||
refreshQueueData();
|
||||
},
|
||||
onResponseError({ error }) {
|
||||
console.error('Error retrying job:', error);
|
||||
toast.error('Gagal memproses semula job');
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error retrying job:', error);
|
||||
toast.error('Gagal memproses semula job');
|
||||
}
|
||||
}
|
||||
|
||||
// Remove job
|
||||
async function removeJob(jobId) {
|
||||
try {
|
||||
await useFetch(`/api/queue/asnaf-analysis/${jobId}`, {
|
||||
method: 'DELETE',
|
||||
onResponse() {
|
||||
toast.success('Job telah dipadam');
|
||||
refreshQueueData();
|
||||
},
|
||||
onResponseError({ error }) {
|
||||
console.error('Error removing job:', error);
|
||||
toast.error('Gagal memadam job');
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error removing job:', error);
|
||||
toast.error('Gagal memadam job');
|
||||
}
|
||||
}
|
||||
|
||||
// Page metadata
|
||||
definePageMeta({
|
||||
title: "Queue Analisis Asnaf",
|
||||
middleware: ["auth"],
|
||||
requiresAuth: true,
|
||||
breadcrumb: [
|
||||
{
|
||||
name: "Dashboard",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "BF-PRF",
|
||||
path: "/BF-PRF",
|
||||
},
|
||||
{
|
||||
name: "Asnaf",
|
||||
path: "/BF-PRF/AS",
|
||||
},
|
||||
{
|
||||
name: "Queue",
|
||||
path: "/BF-PRF/AS/QUEUE",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<LayoutsBreadcrumb />
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-primary">Queue Analisis Asnaf</h1>
|
||||
<rs-button variant="primary" @click="refreshQueueData">
|
||||
<Icon name="mdi:refresh" size="18" class="mr-1" />
|
||||
Refresh
|
||||
</rs-button>
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="flex justify-center items-center py-20">
|
||||
<div class="text-center">
|
||||
<Loading />
|
||||
<p class="mt-4 text-gray-600">Memuat data queue...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<rs-card>
|
||||
<template #body>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
|
||||
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asnaf ID</th>
|
||||
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
|
||||
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Updated</th>
|
||||
<th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tr v-for="job in queueData" :key="job.id" class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ job.id }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<rs-badge
|
||||
:variant="job.status === 'completed' ? 'success' :
|
||||
job.status === 'failed' ? 'danger' :
|
||||
job.status === 'active' ? 'primary' :
|
||||
'warning'">
|
||||
{{ job.status }}
|
||||
</rs-badge>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ job.data.asnafId }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ new Date(job.timestamp).toLocaleString('ms-MY') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ new Date(job.processedOn || job.finishedOn).toLocaleString('ms-MY') }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="flex space-x-2">
|
||||
<rs-button
|
||||
v-if="job.status === 'failed'"
|
||||
variant="warning"
|
||||
size="sm"
|
||||
@click="retryJob(job.id)">
|
||||
<Icon name="mdi:refresh" size="16" class="mr-1" />
|
||||
Retry
|
||||
</rs-button>
|
||||
<rs-button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
@click="removeJob(job.id)">
|
||||
<Icon name="mdi:delete" size="16" class="mr-1" />
|
||||
Remove
|
||||
</rs-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</rs-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
45
server/api/queue/asnaf-analysis/index.get.js
Normal file
45
server/api/queue/asnaf-analysis/index.get.js
Normal file
@ -0,0 +1,45 @@
|
||||
import Queue from 'bull';
|
||||
|
||||
// Create a Bull queue instance
|
||||
const asnafAnalysisQueue = new Queue('asnaf-analysis', {
|
||||
redis: {
|
||||
host: process.env.REDIS_HOST || 'localhost',
|
||||
port: process.env.REDIS_PORT || 6379,
|
||||
password: process.env.REDIS_PASSWORD
|
||||
}
|
||||
});
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
try {
|
||||
// Get all jobs from different states
|
||||
const [waiting, active, completed, failed] = await Promise.all([
|
||||
asnafAnalysisQueue.getWaiting(),
|
||||
asnafAnalysisQueue.getActive(),
|
||||
asnafAnalysisQueue.getCompleted(),
|
||||
asnafAnalysisQueue.getFailed()
|
||||
]);
|
||||
|
||||
// Combine all jobs and format them
|
||||
const allJobs = [...waiting, ...active, ...completed, ...failed]
|
||||
.map(job => ({
|
||||
id: job.id,
|
||||
status: job.finishedOn ? 'completed' :
|
||||
job.failedReason ? 'failed' :
|
||||
job.processedOn ? 'active' : 'waiting',
|
||||
data: job.data,
|
||||
timestamp: job.timestamp,
|
||||
processedOn: job.processedOn,
|
||||
finishedOn: job.finishedOn,
|
||||
failedReason: job.failedReason
|
||||
}))
|
||||
.sort((a, b) => b.timestamp - a.timestamp); // Sort by timestamp, newest first
|
||||
|
||||
return allJobs;
|
||||
} catch (error) {
|
||||
console.error('Error fetching queue data:', error);
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: 'Failed to fetch queue data'
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user