564 lines
16 KiB
Vue
564 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<LayoutsBreadcrumb />
|
|
|
|
<!-- Header Section -->
|
|
<rs-card class="mb-6">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<Icon class="mr-2 text-primary" name="ic:outline-refresh"></Icon>
|
|
<h1 class="text-xl font-bold text-primary">Failed Jobs</h1>
|
|
</div>
|
|
<rs-button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="refreshJobs"
|
|
:loading="isLoading"
|
|
:disabled="isLoading"
|
|
>
|
|
<Icon class="mr-1" name="ic:outline-refresh"></Icon>
|
|
Refresh
|
|
</rs-button>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<p class="text-gray-600">Handle and retry failed notification jobs.</p>
|
|
</template>
|
|
</rs-card>
|
|
|
|
<!-- Error Alert -->
|
|
<rs-alert v-if="error" variant="danger" class="mb-6">
|
|
{{ error }}
|
|
</rs-alert>
|
|
|
|
<!-- Basic Statistics -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<div v-if="isLoading" class="animate-pulse">
|
|
<div class="h-8 bg-gray-200 rounded w-24 mx-auto mb-2"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
|
|
</div>
|
|
<template v-else>
|
|
<h3 class="text-2xl font-bold text-red-600">{{ stats.failed }}</h3>
|
|
<p class="text-sm text-gray-600">Failed Jobs</p>
|
|
</template>
|
|
</div>
|
|
</rs-card>
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<div v-if="isLoading" class="animate-pulse">
|
|
<div class="h-8 bg-gray-200 rounded w-24 mx-auto mb-2"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
|
|
</div>
|
|
<template v-else>
|
|
<h3 class="text-2xl font-bold text-yellow-600">
|
|
{{ stats.retrying }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600">Retrying</p>
|
|
</template>
|
|
</div>
|
|
</rs-card>
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<div v-if="isLoading" class="animate-pulse">
|
|
<div class="h-8 bg-gray-200 rounded w-24 mx-auto mb-2"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
|
|
</div>
|
|
<template v-else>
|
|
<h3 class="text-2xl font-bold text-green-600">
|
|
{{ stats.recovered }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600">Recovered</p>
|
|
</template>
|
|
</div>
|
|
</rs-card>
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<div v-if="isLoading" class="animate-pulse">
|
|
<div class="h-8 bg-gray-200 rounded w-24 mx-auto mb-2"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-32 mx-auto"></div>
|
|
</div>
|
|
<template v-else>
|
|
<h3 class="text-2xl font-bold text-gray-600">
|
|
{{ stats.deadLetter }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600">Dead Letter</p>
|
|
</template>
|
|
</div>
|
|
</rs-card>
|
|
</div>
|
|
|
|
<!-- Failed Jobs -->
|
|
<rs-card>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-primary">Failed Jobs</h3>
|
|
<div class="flex items-center gap-2">
|
|
<rs-button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="confirmRetryAll"
|
|
:loading="isRetryingAll"
|
|
:disabled="isRetryingAll || failedJobs.length === 0"
|
|
>
|
|
<Icon class="mr-1" name="ic:outline-refresh"></Icon>
|
|
Retry All
|
|
</rs-button>
|
|
<rs-button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="refreshJobs"
|
|
:loading="isLoading"
|
|
:disabled="isLoading"
|
|
>
|
|
<Icon class="mr-1" name="ic:outline-sync"></Icon>
|
|
Refresh
|
|
</rs-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div v-if="isLoading" class="flex justify-center py-8">
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
|
|
<span class="ml-2">Loading...</span>
|
|
</div>
|
|
<div v-else-if="failedJobs.length === 0" class="text-center py-8 text-gray-500">
|
|
<Icon name="ic:outline-check-circle" class="text-3xl text-gray-400 mb-2" />
|
|
<p>No failed jobs found</p>
|
|
</div>
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="(job, index) in failedJobs"
|
|
:key="index"
|
|
class="border border-gray-200 rounded-lg p-4"
|
|
>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full mr-3 bg-red-500"></div>
|
|
<div>
|
|
<h4 class="font-semibold">{{ job.type }} - {{ truncateId(job.id) }}</h4>
|
|
<p class="text-sm text-gray-600">{{ job.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<rs-button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="confirmRetryJob(job)"
|
|
:loading="retryingJobs[job.id]"
|
|
:disabled="retryingJobs[job.id]"
|
|
>
|
|
<Icon class="mr-1" name="ic:outline-refresh"></Icon>
|
|
Retry
|
|
</rs-button>
|
|
<rs-button variant="outline" size="sm" @click="viewError(job)">
|
|
<Icon class="mr-1" name="ic:outline-visibility"></Icon>
|
|
View
|
|
</rs-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-sm text-gray-600">
|
|
<div>
|
|
<span class="font-medium">Attempts:</span> {{ job.attempts }}/{{
|
|
job.maxAttempts
|
|
}}
|
|
</div>
|
|
<div><span class="font-medium">Error Type:</span> {{ job.errorType }}</div>
|
|
<div>
|
|
<span class="font-medium">Failed At:</span>
|
|
{{ formatDateTime(job.failedAt) }}
|
|
</div>
|
|
<div><span class="font-medium">Next Retry:</span> {{ job.nextRetry }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="failedJobs.length > 0" class="mt-4 flex justify-center">
|
|
<button
|
|
class="px-3 py-1 border border-gray-300 rounded-l-md disabled:opacity-50"
|
|
:disabled="pagination.page === 1"
|
|
@click="changePage(pagination.page - 1)"
|
|
>
|
|
Previous
|
|
</button>
|
|
<div class="px-3 py-1 border-t border-b border-gray-300">
|
|
{{ pagination.page }} / {{ pagination.totalPages }}
|
|
</div>
|
|
<button
|
|
class="px-3 py-1 border border-gray-300 rounded-r-md disabled:opacity-50"
|
|
:disabled="pagination.page === pagination.totalPages || !pagination.hasMore"
|
|
@click="changePage(pagination.page + 1)"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
|
|
<!-- Error Details Modal -->
|
|
<rs-modal v-model="showErrorModal" title="Job Error Details">
|
|
<div v-if="selectedJob" class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Job ID</label>
|
|
<p class="text-sm text-gray-900">{{ selectedJob.id }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Type</label>
|
|
<p class="text-sm text-gray-900">{{ selectedJob.type }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2"
|
|
>Error Message</label
|
|
>
|
|
<div class="bg-red-50 border border-red-200 rounded p-3 max-h-48 overflow-y-auto">
|
|
<pre class="text-sm text-red-800 whitespace-pre-wrap">{{ selectedJob.errorMessage }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="selectedJob.attempts && selectedJob.maxAttempts">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Retry Attempts</label>
|
|
<div class="bg-gray-50 p-3 rounded">
|
|
<div class="relative h-2 bg-gray-200 rounded-full">
|
|
<div
|
|
class="absolute top-0 left-0 h-2 rounded-full"
|
|
:class="selectedJob.attempts >= selectedJob.maxAttempts ? 'bg-red-500' : 'bg-yellow-500'"
|
|
:style="{width: `${(selectedJob.attempts / selectedJob.maxAttempts) * 100}%`}"
|
|
></div>
|
|
</div>
|
|
<p class="text-sm mt-1 text-gray-600">
|
|
{{ selectedJob.attempts }} of {{ selectedJob.maxAttempts }} attempts used
|
|
({{ selectedJob.attempts >= selectedJob.maxAttempts ? 'Max attempts reached' : `${selectedJob.maxAttempts - selectedJob.attempts} remaining` }})
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<rs-button variant="outline" @click="showErrorModal = false">Close</rs-button>
|
|
<rs-button
|
|
@click="confirmRetrySelectedJob"
|
|
:loading="retryingJobs[selectedJob?.id]"
|
|
:disabled="retryingJobs[selectedJob?.id]"
|
|
>
|
|
<Icon class="mr-1" name="ic:outline-refresh"></Icon>
|
|
Retry Job
|
|
</rs-button>
|
|
</div>
|
|
</template>
|
|
</rs-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
title: "Failed Jobs",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "Notification",
|
|
path: "/notification",
|
|
},
|
|
{
|
|
name: "Queue",
|
|
path: "/notification/queue",
|
|
},
|
|
{
|
|
name: "Failed Jobs",
|
|
path: "/notification/queue/retry",
|
|
},
|
|
],
|
|
});
|
|
|
|
// Basic stats
|
|
const stats = ref({
|
|
failed: 0,
|
|
retrying: 0,
|
|
recovered: 0,
|
|
deadLetter: 0,
|
|
});
|
|
|
|
// Modal state
|
|
const showErrorModal = ref(false);
|
|
const selectedJob = ref(null);
|
|
|
|
// Loading states
|
|
const isLoading = ref(false);
|
|
const isRetrying = ref(false);
|
|
const isRetryingAll = ref(false);
|
|
const retryingJobs = ref({});
|
|
|
|
// Error state
|
|
const error = ref(null);
|
|
|
|
// Failed jobs with pagination
|
|
const failedJobs = ref([]);
|
|
const pagination = ref({
|
|
page: 1,
|
|
totalPages: 1,
|
|
totalItems: 0,
|
|
hasMore: false,
|
|
});
|
|
|
|
// Fetch stats from API
|
|
const fetchStats = async () => {
|
|
try {
|
|
isLoading.value = true;
|
|
error.value = null;
|
|
|
|
const response = await useFetch("/api/notifications/queue/retry/stats");
|
|
|
|
if (!response.data.value) {
|
|
throw new Error("Failed to fetch statistics");
|
|
}
|
|
|
|
if (response.data.value?.success) {
|
|
stats.value = response.data.value.data;
|
|
} else {
|
|
throw new Error(response.data.value.statusMessage || "Failed to fetch statistics");
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching stats:", err);
|
|
error.value = "Failed to load statistics";
|
|
}
|
|
};
|
|
|
|
// Fetch jobs from API
|
|
const fetchJobs = async () => {
|
|
try {
|
|
isLoading.value = true;
|
|
error.value = null;
|
|
|
|
const response = await useFetch("/api/notifications/queue/retry/jobs", {
|
|
query: {
|
|
page: pagination.value.page,
|
|
limit: 10,
|
|
},
|
|
});
|
|
|
|
if (!response.data.value) {
|
|
throw new Error("Failed to fetch jobs");
|
|
}
|
|
|
|
if (response.data.value?.success) {
|
|
failedJobs.value = response.data.value.data.jobs;
|
|
pagination.value = response.data.value.data.pagination;
|
|
} else {
|
|
throw new Error(response.data.value.statusMessage || "Failed to fetch jobs");
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching jobs:", err);
|
|
error.value = "Failed to load failed jobs";
|
|
failedJobs.value = [];
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// Change pagination page
|
|
const changePage = (page) => {
|
|
pagination.value.page = page;
|
|
fetchJobs();
|
|
};
|
|
|
|
// Refresh jobs and stats
|
|
const refreshJobs = async () => {
|
|
await Promise.all([fetchStats(), fetchJobs()]);
|
|
};
|
|
|
|
// Format date/time
|
|
const formatDateTime = (timestamp) => {
|
|
if (!timestamp) return "N/A";
|
|
|
|
try {
|
|
const date = new Date(timestamp);
|
|
if (isNaN(date.getTime())) return "Invalid Date";
|
|
|
|
const now = new Date();
|
|
const diffMs = now - date;
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
|
|
if (diffMins < 60) {
|
|
return `${diffMins} minutes ago`;
|
|
} else if (diffMins < 1440) {
|
|
return `${Math.floor(diffMins / 60)} hours ago`;
|
|
} else {
|
|
return date.toLocaleString();
|
|
}
|
|
} catch (err) {
|
|
console.error("Error formatting date:", err);
|
|
return "N/A";
|
|
}
|
|
};
|
|
|
|
// Truncate long IDs
|
|
const truncateId = (id) => {
|
|
if (!id) return "Unknown";
|
|
if (id.length > 8) {
|
|
return id.substring(0, 8) + '...';
|
|
}
|
|
return id;
|
|
};
|
|
|
|
// Show confirmation dialog for retry all
|
|
const confirmRetryAll = async () => {
|
|
const { $swal } = useNuxtApp();
|
|
const result = await $swal.fire({
|
|
title: "Retry All Jobs",
|
|
text: `Are you sure you want to retry all ${stats.value.failed} failed jobs?`,
|
|
icon: "question",
|
|
showCancelButton: true,
|
|
confirmButtonText: "Yes, retry all",
|
|
cancelButtonText: "Cancel",
|
|
});
|
|
|
|
if (result.isConfirmed) {
|
|
retryAll();
|
|
}
|
|
};
|
|
|
|
// Show confirmation dialog for retry single job
|
|
const confirmRetryJob = async (job) => {
|
|
const { $swal } = useNuxtApp();
|
|
const result = await $swal.fire({
|
|
title: "Retry Job",
|
|
text: `Are you sure you want to retry this job?`,
|
|
icon: "question",
|
|
showCancelButton: true,
|
|
confirmButtonText: "Yes, retry",
|
|
cancelButtonText: "Cancel",
|
|
});
|
|
|
|
if (result.isConfirmed) {
|
|
retryJob(job);
|
|
}
|
|
};
|
|
|
|
// Retry all failed jobs
|
|
const retryAll = async () => {
|
|
try {
|
|
isRetryingAll.value = true;
|
|
error.value = null;
|
|
|
|
const { data } = await useFetch("/api/notifications/queue/retry/all", {
|
|
method: "POST",
|
|
});
|
|
|
|
if (!data.value?.success) {
|
|
throw new Error(data.value?.statusMessage || "Failed to retry all jobs");
|
|
}
|
|
|
|
await refreshJobs();
|
|
|
|
// Show success message
|
|
const { $swal } = useNuxtApp();
|
|
await $swal.fire({
|
|
title: "Success",
|
|
text: data.value.data.message || `${data.value.data.count} jobs queued for retry`,
|
|
icon: "success",
|
|
});
|
|
} catch (err) {
|
|
console.error("Error retrying all jobs:", err);
|
|
error.value = err.message || "Failed to retry all jobs";
|
|
|
|
// Show error message
|
|
const { $swal } = useNuxtApp();
|
|
await $swal.fire({
|
|
title: "Error",
|
|
text: err.message || "Failed to retry all jobs. Please try again.",
|
|
icon: "error",
|
|
});
|
|
} finally {
|
|
isRetryingAll.value = false;
|
|
}
|
|
};
|
|
|
|
// Retry a specific job
|
|
const retryJob = async (job) => {
|
|
try {
|
|
// Set loading state for this specific job
|
|
retryingJobs.value = {
|
|
...retryingJobs.value,
|
|
[job.id]: true
|
|
};
|
|
|
|
error.value = null;
|
|
|
|
const { data } = await useFetch(`/api/notifications/queue/retry/${job.id}`, {
|
|
method: "POST",
|
|
});
|
|
|
|
if (!data.value?.success) {
|
|
throw new Error(data.value?.statusMessage || "Failed to retry job");
|
|
}
|
|
|
|
await refreshJobs();
|
|
|
|
// Show success message
|
|
const { $swal } = useNuxtApp();
|
|
await $swal.fire({
|
|
title: "Success",
|
|
text: data.value.data?.message || "Job queued for retry",
|
|
icon: "success",
|
|
});
|
|
} catch (err) {
|
|
console.error("Error retrying job:", err);
|
|
error.value = err.message || "Failed to retry job";
|
|
|
|
// Show error message
|
|
const { $swal } = useNuxtApp();
|
|
await $swal.fire({
|
|
title: "Error",
|
|
text: err.message || "Failed to retry job. Please try again.",
|
|
icon: "error",
|
|
});
|
|
} finally {
|
|
retryingJobs.value = {
|
|
...retryingJobs.value,
|
|
[job.id]: false
|
|
};
|
|
}
|
|
};
|
|
|
|
// View error details for a job
|
|
const viewError = (job) => {
|
|
selectedJob.value = job;
|
|
showErrorModal.value = true;
|
|
};
|
|
|
|
// Retry selected job from modal
|
|
const confirmRetrySelectedJob = async () => {
|
|
if (selectedJob.value) {
|
|
await confirmRetryJob(selectedJob.value);
|
|
}
|
|
showErrorModal.value = false;
|
|
};
|
|
|
|
// Initialize data
|
|
onMounted(async () => {
|
|
await refreshJobs();
|
|
});
|
|
|
|
// Auto-refresh every 30 seconds
|
|
let refreshInterval;
|
|
onMounted(() => {
|
|
refreshInterval = setInterval(refreshJobs, 30000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (refreshInterval) {
|
|
clearInterval(refreshInterval);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|