340 lines
9.2 KiB
Vue
340 lines
9.2 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-monitor"></Icon>
|
|
<h1 class="text-xl font-bold text-primary">Queue Monitor</h1>
|
|
</div>
|
|
<rs-button
|
|
variant="outline"
|
|
size="sm"
|
|
@click="refreshData"
|
|
:loading="isLoading"
|
|
>
|
|
<Icon class="mr-1" name="ic:outline-refresh"></Icon>
|
|
Refresh
|
|
</rs-button>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<p class="text-gray-600">Monitor current notification queues and job statuses.</p>
|
|
</template>
|
|
</rs-card>
|
|
|
|
<!-- Error Alert -->
|
|
<rs-alert v-if="error" variant="danger" class="mb-6">
|
|
{{ error }}
|
|
</rs-alert>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="mb-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<rs-card v-for="i in 4" :key="i">
|
|
<div class="p-4 text-center">
|
|
<div class="h-8 bg-gray-200 rounded w-24 mx-auto mb-2 animate-pulse"></div>
|
|
<div class="h-4 bg-gray-200 rounded w-32 mx-auto animate-pulse"></div>
|
|
</div>
|
|
</rs-card>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Basic Stats -->
|
|
<div v-else class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<h3 class="text-2xl font-bold text-blue-600">{{ stats.pending }}</h3>
|
|
<p class="text-sm text-gray-600">Pending</p>
|
|
</div>
|
|
</rs-card>
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<h3 class="text-2xl font-bold text-yellow-600">
|
|
{{ stats.processing || 0 }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600">Processing</p>
|
|
</div>
|
|
</rs-card>
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<h3 class="text-2xl font-bold text-green-600">
|
|
{{ stats.completed }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600">Completed</p>
|
|
</div>
|
|
</rs-card>
|
|
<rs-card>
|
|
<div class="p-4 text-center">
|
|
<h3 class="text-2xl font-bold text-red-600">{{ stats.failed }}</h3>
|
|
<p class="text-sm text-gray-600">Failed</p>
|
|
</div>
|
|
</rs-card>
|
|
</div>
|
|
|
|
<!-- Job List -->
|
|
<rs-card>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-primary">Recent Jobs</h3>
|
|
<div>
|
|
<select
|
|
v-model="statusFilter"
|
|
class="px-2 py-1 border border-gray-300 rounded-md text-sm mr-2"
|
|
@change="fetchJobs()"
|
|
>
|
|
<option value="">All Statuses</option>
|
|
<option value="queued">Pending</option>
|
|
<option value="processing">Processing</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="failed">Failed</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div v-if="isLoadingJobs" class="p-8 text-center">
|
|
<div
|
|
class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"
|
|
></div>
|
|
<p class="mt-2 text-gray-600">Loading jobs...</p>
|
|
</div>
|
|
|
|
<div v-else-if="jobs.length === 0" class="p-8 text-center">
|
|
<Icon name="ic:outline-info" class="text-3xl text-gray-400 mb-2" />
|
|
<p class="text-gray-600">No jobs found</p>
|
|
</div>
|
|
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="(job, index) in jobs"
|
|
:key="index"
|
|
class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
|
|
>
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-3 h-3 rounded-full mr-3"
|
|
:class="getStatusColor(job.status)"
|
|
></div>
|
|
<div>
|
|
<p class="font-medium">{{ job.type }} - {{ truncateId(job.id) }}</p>
|
|
<p class="text-sm text-gray-600">{{ job.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-sm font-medium capitalize">{{ job.status }}</p>
|
|
<p class="text-xs text-gray-500">{{ formatTime(job.createdAt) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="pagination.totalPages > 1" class="flex justify-center mt-4">
|
|
<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 text-sm">
|
|
{{ 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"
|
|
@click="changePage(pagination.page + 1)"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</rs-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
title: "Queue Monitor",
|
|
middleware: ["auth"],
|
|
requiresAuth: true,
|
|
breadcrumb: [
|
|
{
|
|
name: "Notification",
|
|
path: "/notification",
|
|
},
|
|
{
|
|
name: "Queue",
|
|
path: "/notification/queue",
|
|
},
|
|
{
|
|
name: "Monitor",
|
|
path: "/notification/queue/monitor",
|
|
},
|
|
],
|
|
});
|
|
|
|
// Loading and error state
|
|
const isLoading = ref(false);
|
|
const isLoadingJobs = ref(false);
|
|
const error = ref(null);
|
|
const statusFilter = ref("");
|
|
|
|
// Stats data
|
|
const stats = ref({
|
|
pending: 0,
|
|
processing: 0,
|
|
completed: 0,
|
|
failed: 0,
|
|
});
|
|
|
|
// Jobs data with pagination
|
|
const jobs = 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 { data } = await useFetch("/api/notifications/queue/stats");
|
|
|
|
if (!data.value) throw new Error("Failed to fetch statistics");
|
|
|
|
if (data.value?.success) {
|
|
stats.value = {
|
|
pending: data.value.data.pending || 0,
|
|
processing: data.value.data.processing || 0,
|
|
completed: data.value.data.completed || 0,
|
|
failed: data.value.data.failed || 0,
|
|
};
|
|
} else {
|
|
throw new Error(data.value.statusMessage || "Failed to fetch statistics");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching stats:", error);
|
|
error.value = `Failed to load statistics: ${error.message}`;
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// Fetch jobs from API
|
|
const fetchJobs = async () => {
|
|
try {
|
|
isLoadingJobs.value = true;
|
|
|
|
const params = {
|
|
page: pagination.value.page,
|
|
limit: 10,
|
|
};
|
|
|
|
if (statusFilter.value) {
|
|
params.status = statusFilter.value;
|
|
}
|
|
|
|
const { data } = await useFetch("/api/notifications/queue/jobs", {
|
|
query: params,
|
|
});
|
|
|
|
if (!data.value) throw new Error("Failed to fetch jobs");
|
|
|
|
if (data.value?.success) {
|
|
jobs.value = data.value.data.jobs;
|
|
pagination.value = data.value.data.pagination;
|
|
} else {
|
|
throw new Error(data.value.statusMessage || "Failed to fetch jobs");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching jobs:", error);
|
|
error.value = `Failed to load jobs: ${error.message}`;
|
|
jobs.value = [];
|
|
} finally {
|
|
isLoadingJobs.value = false;
|
|
}
|
|
};
|
|
|
|
// Change page
|
|
const changePage = (page) => {
|
|
pagination.value.page = page;
|
|
fetchJobs();
|
|
};
|
|
|
|
// Status color mapping
|
|
const getStatusColor = (status) => {
|
|
const colors = {
|
|
queued: "bg-blue-500",
|
|
pending: "bg-blue-500",
|
|
processing: "bg-yellow-500",
|
|
completed: "bg-green-500",
|
|
sent: "bg-green-500",
|
|
failed: "bg-red-500",
|
|
};
|
|
return colors[status] || "bg-gray-500";
|
|
};
|
|
|
|
// Format time for display
|
|
const formatTime = (timestamp) => {
|
|
if (!timestamp) return "Unknown";
|
|
|
|
try {
|
|
const date = new Date(timestamp);
|
|
const now = new Date();
|
|
const diffMs = now - date;
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
|
|
if (isNaN(diffMins)) return "Unknown";
|
|
|
|
if (diffMins < 1) return "Just now";
|
|
if (diffMins < 60) return `${diffMins} min ago`;
|
|
if (diffMins < 1440) {
|
|
const hours = Math.floor(diffMins / 60);
|
|
return `${hours} hour${hours > 1 ? "s" : ""} ago`;
|
|
}
|
|
|
|
return date.toLocaleString();
|
|
} catch (e) {
|
|
console.error("Error formatting time:", e);
|
|
return "Unknown";
|
|
}
|
|
};
|
|
|
|
// Truncate long IDs
|
|
const truncateId = (id) => {
|
|
if (!id) return "Unknown";
|
|
if (id.length > 8) {
|
|
return id.substring(0, 8) + "...";
|
|
}
|
|
return id;
|
|
};
|
|
|
|
// Refresh data
|
|
const refreshData = async () => {
|
|
await Promise.all([fetchStats(), fetchJobs()]);
|
|
};
|
|
|
|
// Auto-refresh every 30 seconds
|
|
let refreshInterval;
|
|
onMounted(() => {
|
|
refreshData();
|
|
refreshInterval = setInterval(refreshData, 30000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (refreshInterval) {
|
|
clearInterval(refreshInterval);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|