ca8791cc0d
- Nouveau domaine System/Domain/Model/SystemStatus (value object) - QueryHandler agrégeant métriques mangas, chapitres, jobs (global/24h/7j), stockage et sources - Endpoint GET /api/system/status via API Platform (singleton) - Calcul de l'espace disque par RecursiveDirectoryIterator sur public/images - Page Vue /system/status avec 6 cards (Mangas, Chapitres, Jobs, Stockage, Sources, Système) - Nettoyage du router : suppression des PlaceholderComponent et routes placeholder - Sidebar : suppression des entrées sans page réelle
105 lines
3.9 KiB
Vue
105 lines
3.9 KiB
Vue
<template>
|
|
<StatusCard title="Jobs" :icon="CpuChipIcon">
|
|
<!-- Onglets -->
|
|
<div class="flex gap-1 mb-3 border-b border-gray-200 dark:border-gray-700">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
@click="activeTab = tab.key"
|
|
class="px-3 py-1.5 text-xs font-medium transition-colors"
|
|
:class="activeTab === tab.key
|
|
? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
|
|
: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'">
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<template v-if="activeTab === 'global'">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<Metric label="Total" :value="status.totalJobs" />
|
|
<Metric label="En cours" :value="status.inProgressJobs" color="blue" />
|
|
<Metric label="Terminés" :value="status.completedJobs" color="green" />
|
|
<Metric label="En attente" :value="status.pendingJobs" color="yellow" />
|
|
<Metric label="Échoués" :value="status.failedJobs" color="red" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="activeTab === '24h'">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<Metric label="Total" :value="status.totalJobsLast24h" />
|
|
<Metric label="Terminés" :value="status.completedJobsLast24h" color="green" />
|
|
<Metric label="Échoués" :value="status.failedJobsLast24h" color="red" />
|
|
<div class="col-span-2">
|
|
<p class="text-xs text-gray-500 mb-1">Taux de succès</p>
|
|
<span class="text-xl font-bold" :class="rateColor(status.successRateLast24h)">
|
|
{{ status.successRateLast24h }}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<Metric label="Total" :value="status.totalJobsLast7d" />
|
|
<Metric label="Terminés" :value="status.completedJobsLast7d" color="green" />
|
|
<Metric label="Échoués" :value="status.failedJobsLast7d" color="red" />
|
|
<div class="col-span-2">
|
|
<p class="text-xs text-gray-500 mb-1">Taux de succès</p>
|
|
<span class="text-xl font-bold" :class="rateColor(status.successRateLast7d)">
|
|
{{ status.successRateLast7d }}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</StatusCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { CpuChipIcon } from '@heroicons/vue/24/outline';
|
|
import StatusCard from './StatusCard.vue';
|
|
|
|
defineProps({
|
|
status: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const activeTab = ref('global');
|
|
|
|
const tabs = [
|
|
{ key: 'global', label: 'Global' },
|
|
{ key: '24h', label: '24h' },
|
|
{ key: '7j', label: '7 jours' },
|
|
];
|
|
|
|
function rateColor(rate) {
|
|
if (rate >= 80) return 'text-green-600 dark:text-green-400';
|
|
if (rate >= 50) return 'text-yellow-600 dark:text-yellow-400';
|
|
return 'text-red-600 dark:text-red-400';
|
|
}
|
|
|
|
const Metric = {
|
|
props: {
|
|
label: String,
|
|
value: Number,
|
|
color: { type: String, default: 'gray' },
|
|
},
|
|
template: `
|
|
<div>
|
|
<p class="text-xs text-gray-500">{{ label }}</p>
|
|
<p class="text-lg font-semibold"
|
|
:class="{
|
|
'text-gray-900 dark:text-white': color === 'gray',
|
|
'text-green-600 dark:text-green-400': color === 'green',
|
|
'text-red-600 dark:text-red-400': color === 'red',
|
|
'text-yellow-600 dark:text-yellow-400': color === 'yellow',
|
|
'text-blue-600 dark:text-blue-400': color === 'blue',
|
|
}">{{ value }}</p>
|
|
</div>
|
|
`,
|
|
};
|
|
</script>
|