feat: add check backup
This commit is contained in:
@@ -34,12 +34,35 @@
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-display);
|
||||
background: rgb(var(--m-bg));
|
||||
background-image:
|
||||
radial-gradient(circle at top left, rgb(var(--m-accent) / 0.1), transparent 24%),
|
||||
radial-gradient(circle at top right, rgb(var(--m-success) / 0.08), transparent 18%);
|
||||
color: rgb(var(--m-text));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgb(var(--m-accent) / 0.28);
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid rgb(var(--m-accent) / 0.85);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
@@ -75,6 +98,13 @@
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.card-glow:hover {
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(var(--m-accent) / calc(var(--m-card-border-opacity) + 0.04)),
|
||||
0 10px 30px -10px rgba(0, 0, 0, calc(var(--m-shadow-opacity) + 0.08)),
|
||||
0 0 56px -14px rgb(var(--m-accent) / 0.1);
|
||||
}
|
||||
|
||||
.card-glow-success {
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(var(--m-success) / 0.15),
|
||||
@@ -165,3 +195,14 @@
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--m-muted));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,12 +56,15 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
||||
|
||||
<style scoped>
|
||||
.discord-card {
|
||||
background: rgb(var(--m-secondary));
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
|
||||
max-height: calc(100vh - 7rem);
|
||||
overflow: hidden;
|
||||
transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -83,7 +86,11 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 220px;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: rgb(var(--m-tertiary) / 0.28);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
@@ -95,7 +102,7 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
||||
.message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.65rem;
|
||||
max-height: calc(100vh - 12rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -103,10 +110,10 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
||||
.message-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: rgb(var(--m-tertiary));
|
||||
border: 1px solid rgb(var(--m-accent) / 0.04);
|
||||
padding: 0.85rem;
|
||||
border-radius: 14px;
|
||||
background: rgb(var(--m-tertiary) / 0.74);
|
||||
border: 1px solid rgb(var(--m-border) / 0.22);
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
@@ -123,4 +130,20 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
||||
color: rgb(var(--m-accent));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.discord-card {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
max-height: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.discord-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -118,10 +118,13 @@ async function runTests() {
|
||||
|
||||
<style scoped>
|
||||
.speedtest-card {
|
||||
background: rgb(var(--m-secondary));
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
transition: background-color 0.4s ease;
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
|
||||
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -152,9 +155,15 @@ async function runTests() {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.reload-btn:focus-visible {
|
||||
outline: 2px solid rgb(var(--m-accent) / 0.8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.reload-btn:hover:not(:disabled) {
|
||||
background: rgb(var(--m-accent) / 0.12);
|
||||
border-color: rgb(var(--m-accent) / 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.reload-btn:disabled {
|
||||
@@ -169,10 +178,10 @@ async function runTests() {
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: rgb(var(--m-tertiary));
|
||||
border-radius: 10px;
|
||||
background: rgb(var(--m-tertiary) / 0.72);
|
||||
border-radius: 14px;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgb(var(--m-accent) / 0.06);
|
||||
border: 1px solid rgb(var(--m-border) / 0.22);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -211,12 +220,22 @@ async function runTests() {
|
||||
|
||||
.error-text {
|
||||
margin-top: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgb(var(--m-error) / 0.12);
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgb(var(--m-error) / 0.16);
|
||||
background: rgb(var(--m-error) / 0.06);
|
||||
padding: 0.75rem 0.875rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: rgb(var(--m-error));
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.speedtest-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
224
components/StatusBackup.vue
Normal file
224
components/StatusBackup.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="status-card card-glow">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Status Backup</h2>
|
||||
<span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Services</span>
|
||||
</div>
|
||||
|
||||
<template v-if="loading">
|
||||
<div
|
||||
v-for="n in 3"
|
||||
:key="`skeleton-${n}`"
|
||||
class="status-row animate-shimmer"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<CircleSkeleton custom-class="h-3 w-3" />
|
||||
<TextSkeleton custom-class="h-4 w-20" />
|
||||
</div>
|
||||
<TextSkeleton custom-class="h-4 w-16" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-for="row in rows"
|
||||
v-else
|
||||
:key="`${row.label}-${row.folder}`"
|
||||
class="status-row"
|
||||
:class="row.status === 200 ? 'row-ok' : 'row-error'"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="status-dot" :class="row.status === 200 ? 'dot-ok' : 'dot-error'" />
|
||||
<span class="font-display text-sm font-semibold text-m-text">
|
||||
{{ row.label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1 text-right">
|
||||
<span class="font-mono text-xs" :class="row.status === 200 ? 'text-m-success' : 'text-m-error'">
|
||||
{{ statusLabel(row.status) }}
|
||||
</span>
|
||||
<span class="font-mono text-[10px] text-m-muted">
|
||||
{{ formatBackupLabel(row) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
|
||||
import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
|
||||
import {onBeforeUnmount, onMounted, ref} from "vue"
|
||||
import { apiFetch } from "~/composables/useApiAuth"
|
||||
|
||||
interface StatusRow {
|
||||
label: string
|
||||
folder: string
|
||||
ok: boolean
|
||||
status: number
|
||||
checkedAt: string
|
||||
latestBackup: string | null
|
||||
latestBackupAt: string | null
|
||||
backupDate: string | null
|
||||
expectedBackupDate: string
|
||||
error?: string
|
||||
}
|
||||
|
||||
interface StatusResponse {
|
||||
results: StatusRow[]
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
endpoint?: string
|
||||
refreshMs?: number
|
||||
}>(),
|
||||
{
|
||||
endpoint: "/api/check-backup",
|
||||
refreshMs: 30000
|
||||
}
|
||||
)
|
||||
|
||||
const rows = ref<StatusRow[]>([])
|
||||
const loading = ref(true)
|
||||
const initialized = ref(false)
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
const statusLabel = (status: number) => {
|
||||
if (status === 200) return "Backup OK"
|
||||
if (status === 0) return "Backup KO"
|
||||
return `KO (${status})`
|
||||
}
|
||||
|
||||
const formatBackupLabel = (row: StatusRow) => {
|
||||
if (!row.ok && row.backupDate) {
|
||||
return `Trouve ${row.backupDate} · attendu ${row.expectedBackupDate}`
|
||||
}
|
||||
|
||||
if (row.latestBackupAt) {
|
||||
const backupDate = new Date(row.latestBackupAt)
|
||||
if (!Number.isNaN(backupDate.getTime())) {
|
||||
return backupDate.toLocaleString("fr-FR", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (row.backupDate) {
|
||||
return row.backupDate
|
||||
}
|
||||
|
||||
return row.error || "Aucun backup"
|
||||
}
|
||||
|
||||
const checkStatus = async () => {
|
||||
if (!initialized.value) {
|
||||
loading.value = true
|
||||
}
|
||||
try {
|
||||
const data = await apiFetch<StatusResponse>(props.endpoint)
|
||||
rows.value = data.results
|
||||
} catch (error) {
|
||||
rows.value = [
|
||||
{
|
||||
label: "Erreur",
|
||||
folder: "error",
|
||||
ok: false,
|
||||
status: 0,
|
||||
checkedAt: new Date().toISOString(),
|
||||
latestBackup: null,
|
||||
latestBackupAt: null,
|
||||
backupDate: null,
|
||||
expectedBackupDate: "",
|
||||
error: error instanceof Error ? error.message : String(error)
|
||||
}
|
||||
]
|
||||
} finally {
|
||||
initialized.value = true
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkStatus()
|
||||
timer = setInterval(checkStatus, props.refreshMs)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-card {
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 3.2rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: rgb(var(--m-tertiary) / 0.75);
|
||||
border: 1px solid rgb(var(--m-border) / 0.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.row-ok {
|
||||
border-color: rgb(var(--m-success) / 0.08);
|
||||
}
|
||||
|
||||
.row-error {
|
||||
border-color: rgb(var(--m-error) / 0.1);
|
||||
background: rgb(var(--m-error) / 0.04);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dot-ok {
|
||||
background: rgb(var(--m-success));
|
||||
box-shadow: 0 0 6px rgb(var(--m-success) / 0.5);
|
||||
}
|
||||
|
||||
.dot-error {
|
||||
background: rgb(var(--m-error));
|
||||
box-shadow: 0 0 6px rgb(var(--m-error) / 0.5);
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="status-card card-glow">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Status</h2>
|
||||
<h2 class="card-title">Status App</h2>
|
||||
<span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Services</span>
|
||||
</div>
|
||||
|
||||
@@ -119,13 +119,16 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style scoped>
|
||||
.status-card {
|
||||
background: rgb(var(--m-secondary));
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
transition: background-color 0.4s ease;
|
||||
gap: 0.75rem;
|
||||
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -146,10 +149,11 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
background: rgb(var(--m-tertiary));
|
||||
border: 1px solid transparent;
|
||||
min-height: 3.2rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: rgb(var(--m-tertiary) / 0.75);
|
||||
border: 1px solid rgb(var(--m-border) / 0.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
@@ -87,13 +87,16 @@ const metrics = computed(() => [
|
||||
|
||||
<style scoped>
|
||||
.resources-card {
|
||||
background: rgb(var(--m-secondary));
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||
border-radius: 20px;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -121,10 +124,10 @@ const metrics = computed(() => [
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: 10px;
|
||||
background: rgb(var(--m-tertiary));
|
||||
border: 1px solid rgb(var(--m-accent) / 0.06);
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 14px;
|
||||
background: rgb(var(--m-tertiary) / 0.72);
|
||||
border: 1px solid rgb(var(--m-border) / 0.22);
|
||||
}
|
||||
|
||||
.metric-copy {
|
||||
@@ -187,4 +190,18 @@ const metrics = computed(() => [
|
||||
.tone-error {
|
||||
background: rgb(var(--m-error));
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.resources-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.metric-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.metric-value-area {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,34 +18,43 @@
|
||||
<slot name="sidebar"/>
|
||||
<nav class="sidebar-nav" aria-label="Sections">
|
||||
<p class="nav-label">Navigation</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="bg-m-tertiary rounded-lg border border-m-accent/6">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:home"
|
||||
class="text-lg"/>
|
||||
<p>Home</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="bg-m-tertiary rounded-lg border border-m-accent/6">
|
||||
<NuxtLink
|
||||
to="/backup"
|
||||
class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
|
||||
>
|
||||
<IconifyIcon
|
||||
icon="mdi:data"
|
||||
class="text-lg"/>
|
||||
<p>Backup</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="`desktop-${item.to}`"
|
||||
v-slot="{ href, navigate, isExactActive }"
|
||||
:to="item.to"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
:href="href"
|
||||
class="nav-link"
|
||||
:class="{ 'nav-link-active': isExactActive }"
|
||||
:aria-current="isExactActive ? 'page' : undefined"
|
||||
@click="navigate"
|
||||
>
|
||||
<span class="nav-link-main">
|
||||
<span class="nav-icon">
|
||||
<IconifyIcon :icon="item.icon" class="text-lg"/>
|
||||
</span>
|
||||
<span>
|
||||
<span class="nav-title">{{ item.label }}</span>
|
||||
<span class="nav-caption">{{ item.caption }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="nav-pill">{{ item.short }}</span>
|
||||
</a>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-divider"/>
|
||||
<div class="status-card">
|
||||
<p class="status-label">Environnement</p>
|
||||
<p class="status-value">Production</p>
|
||||
<p class="status-description">
|
||||
Acces rapide au monitoring, aux sauvegardes et aux cartes systeme.
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer-row">
|
||||
<p class="font-mono text-[10px] tracking-widest uppercase text-white/40">
|
||||
Supervisor {{ appVersion }}
|
||||
@@ -224,6 +233,10 @@ const navItems = [
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.sidebar .brand-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.brand-description {
|
||||
margin: 0.55rem 0 0;
|
||||
color: rgb(255 255 255 / 0.58);
|
||||
@@ -245,7 +258,7 @@ const navItems = [
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
padding: 0.5rem 1rem 1rem;
|
||||
padding: 0.75rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
@@ -274,7 +287,7 @@ const navItems = [
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
@@ -321,6 +334,16 @@ const navItems = [
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
|
||||
}
|
||||
|
||||
.nav-link-active .nav-icon {
|
||||
background: rgb(var(--m-accent) / 0.18);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-link-active .nav-pill {
|
||||
background: rgb(var(--m-accent) / 0.18);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-link-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -403,6 +426,9 @@ const navItems = [
|
||||
|
||||
.content {
|
||||
background: rgb(var(--m-bg));
|
||||
background-image:
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.01), transparent 18%),
|
||||
radial-gradient(circle at top right, rgb(var(--m-accent) / 0.08), transparent 20%);
|
||||
overflow-y: auto;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.4s ease;
|
||||
|
||||
121
pages/backup.vue
121
pages/backup.vue
@@ -13,10 +13,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<div class="dashboard-grid">
|
||||
<section class="grid-left" aria-label="Commandes de sauvegarde">
|
||||
|
||||
<section
|
||||
class="status-strip animate-fade-in-up"
|
||||
style="animation-delay: 100ms"
|
||||
aria-label="Statut des sauvegardes"
|
||||
>
|
||||
<StatusBackup />
|
||||
</section>
|
||||
|
||||
<div class="workspace-grid">
|
||||
<section class="workspace-sidebar" aria-label="Commandes de sauvegarde">
|
||||
<BackupButtonSee
|
||||
class="animate-fade-in-up backup-selector"
|
||||
class="animate-fade-in-up"
|
||||
style="animation-delay: 120ms"
|
||||
@select="selectedBackup = $event"
|
||||
/>
|
||||
@@ -27,24 +36,27 @@
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="grid-middle" aria-labelledby="backup-files-title">
|
||||
<section class="workspace-main" aria-labelledby="backup-files-title">
|
||||
<div class="files-panel animate-fade-in-up" style="animation-delay: 240ms">
|
||||
<div class="files-panel-header">
|
||||
<div>
|
||||
<div class="files-panel-copy">
|
||||
<p class="section-kicker">Fichiers</p>
|
||||
<h2 id="backup-files-title" class="files-panel-title">
|
||||
Historique des sauvegardes
|
||||
</h2>
|
||||
<p class="files-panel-description">
|
||||
Consultez les archives disponibles et telechargez le dernier backup du dossier selectionne.
|
||||
</p>
|
||||
</div>
|
||||
<p class="files-panel-meta">
|
||||
{{ selectedBackup ? `Source ${selectedBackup}` : "En attente de selection" }}
|
||||
</p>
|
||||
<span
|
||||
class="selection-pill"
|
||||
:class="{ 'selection-pill-active': selectedBackup }"
|
||||
>
|
||||
{{ selectedBackup ? `Source ${selectedBackup}` : "Selection requise" }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<BackupList
|
||||
class="backup-list-mobile"
|
||||
:folder="selectedBackup"
|
||||
/>
|
||||
<BackupList :folder="selectedBackup" />
|
||||
</div>
|
||||
|
||||
<section
|
||||
@@ -53,9 +65,12 @@
|
||||
aria-labelledby="backup-output-title"
|
||||
>
|
||||
<div class="files-panel-header">
|
||||
<div>
|
||||
<div class="files-panel-copy">
|
||||
<p class="section-kicker">Execution</p>
|
||||
<h2 id="backup-output-title" class="files-panel-title">Resultat du script</h2>
|
||||
<p class="files-panel-description">
|
||||
Le retour du script apparait ici apres execution avec un etat clair en succes ou en erreur.
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="panel-badge"
|
||||
@@ -170,15 +185,12 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
|
||||
gap: 1.5rem;
|
||||
align-items: end;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header-copy {
|
||||
min-width: 0;
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
@@ -197,26 +209,37 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
.status-strip {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 300px minmax(0, 1fr);
|
||||
grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.grid-left,
|
||||
.grid-middle {
|
||||
.workspace-sidebar,
|
||||
.workspace-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.files-panel {
|
||||
padding: 1.25rem;
|
||||
border-radius: 20px;
|
||||
background: rgb(var(--m-secondary) / 0.4);
|
||||
border: 1px solid rgb(var(--m-accent) / 0.08);
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.76), rgb(var(--m-secondary) / 0.92));
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
|
||||
}
|
||||
|
||||
.output-panel {
|
||||
@@ -225,12 +248,16 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
||||
|
||||
.files-panel-header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.files-panel-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.files-panel-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
@@ -239,19 +266,41 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
||||
color: rgb(var(--m-text));
|
||||
}
|
||||
|
||||
.files-panel-meta {
|
||||
margin: 0;
|
||||
.files-panel-description {
|
||||
margin: 0.5rem 0 0;
|
||||
max-width: 54ch;
|
||||
color: rgb(var(--m-muted));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.selection-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.25rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgb(var(--m-border) / 0.36);
|
||||
background: rgb(var(--m-tertiary) / 0.45);
|
||||
padding: 0.45rem 0.8rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(var(--m-muted));
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.selection-pill-active {
|
||||
border-color: rgb(var(--m-accent) / 0.2);
|
||||
background: rgb(var(--m-accent) / 0.08);
|
||||
color: rgb(var(--m-accent));
|
||||
}
|
||||
|
||||
.panel-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.25rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.7rem;
|
||||
font-family: var(--font-mono);
|
||||
@@ -327,18 +376,22 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.dashboard-header,
|
||||
.dashboard-grid {
|
||||
.workspace-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.workspace-sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.files-panel-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.files-panel-meta {
|
||||
text-align: left;
|
||||
.selection-pill,
|
||||
.panel-badge {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -350,5 +403,9 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
||||
.files-panel {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.files-panel-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,9 +3,13 @@
|
||||
<div class="dashboard-container">
|
||||
<header class="dashboard-header">
|
||||
<div>
|
||||
<p class="section-kicker">Operations</p>
|
||||
<h1 class="font-display text-3xl font-bold tracking-tight text-m-text">
|
||||
Monitoring
|
||||
</h1>
|
||||
<p class="header-description">
|
||||
Visualisez l'etat des applications, des sauvegardes et des ressources systeme depuis une vue unique.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -221,8 +225,24 @@ onBeforeUnmount(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid rgba(80, 140, 255, 0.08);
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom: 1px solid rgba(80, 140, 255, 0.1);
|
||||
}
|
||||
|
||||
.section-kicker {
|
||||
margin: 0 0 0.45rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(var(--m-accent));
|
||||
}
|
||||
|
||||
.header-description {
|
||||
max-width: 62ch;
|
||||
margin-top: 0.9rem;
|
||||
color: rgb(var(--m-muted));
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.storage-section {
|
||||
@@ -240,9 +260,11 @@ onBeforeUnmount(() => {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
border-radius: 12px;
|
||||
background: rgb(var(--m-secondary));
|
||||
padding: 0.75rem;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||
border: 1px solid rgb(var(--m-border) / 0.32);
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
@@ -281,6 +303,7 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
149
server/api/check-backup.get.ts
Normal file
149
server/api/check-backup.get.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
import {
|
||||
runSsh,
|
||||
shellQuote,
|
||||
resolveFolderRemoteDir
|
||||
} from "../utils/ssh.ts"
|
||||
|
||||
import backupOptions from "../config/backup-options.json"
|
||||
|
||||
type BackupTarget = {
|
||||
name: string
|
||||
}
|
||||
|
||||
type LatestBackupInfo = {
|
||||
fileName: string | null
|
||||
modifiedAt: string | null
|
||||
}
|
||||
|
||||
const BACKUP_HOUR = 19
|
||||
const backupTargets = backupOptions as BackupTarget[]
|
||||
|
||||
function toLabel(name: string) {
|
||||
if (name === "sirh") return "SIRH"
|
||||
return name.charAt(0).toUpperCase() + name.slice(1)
|
||||
}
|
||||
|
||||
function pad(value: number) {
|
||||
return String(value).padStart(2, "0")
|
||||
}
|
||||
|
||||
function formatDateKey(date: Date) {
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
|
||||
}
|
||||
|
||||
function getExpectedBackupDate(now: Date) {
|
||||
const expected = new Date(now)
|
||||
if (now.getHours() < BACKUP_HOUR) {
|
||||
expected.setDate(expected.getDate() - 1)
|
||||
}
|
||||
|
||||
expected.setHours(BACKUP_HOUR, 0, 0, 0)
|
||||
return expected
|
||||
}
|
||||
|
||||
function extractBackupDate(fileName: string | null) {
|
||||
if (!fileName) return null
|
||||
|
||||
const normalized = fileName.replace(/[^0-9]/g, "")
|
||||
|
||||
const yearFirst = normalized.match(/(20\d{2})(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])/)
|
||||
if (yearFirst) {
|
||||
return `${yearFirst[1]}-${yearFirst[2]}-${yearFirst[3]}`
|
||||
}
|
||||
|
||||
const dayFirst = normalized.match(/(0[1-9]|[12]\d|3[01])(0[1-9]|1[0-2])(20\d{2})/)
|
||||
if (dayFirst) {
|
||||
return `${dayFirst[3]}-${dayFirst[2]}-${dayFirst[1]}`
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function parseRemoteTimestamp(value: string) {
|
||||
const timestamp = Number(value)
|
||||
if (!Number.isFinite(timestamp) || timestamp <= 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return new Date(timestamp * 1000).toISOString()
|
||||
}
|
||||
|
||||
async function getLatestBackupInfo(remoteDir: string): Promise<LatestBackupInfo> {
|
||||
const output = await runSsh(
|
||||
`cd ${shellQuote(remoteDir)} && for file in *; do [ -e "$file" ] || continue; printf '%s\\t%s\\n' "$(stat -c '%Y' "$file")" "$file"; done | sort -rn | head -n 1`
|
||||
)
|
||||
|
||||
const line = output.trim()
|
||||
if (!line) {
|
||||
return { fileName: null, modifiedAt: null }
|
||||
}
|
||||
|
||||
const [timestamp, ...nameParts] = line.split("\t")
|
||||
const fileName = nameParts.join("\t").trim() || null
|
||||
|
||||
return {
|
||||
fileName,
|
||||
modifiedAt: parseRemoteTimestamp(timestamp)
|
||||
}
|
||||
}
|
||||
|
||||
export default defineEventHandler(async () => {
|
||||
const now = new Date()
|
||||
const expectedBackupDate = getExpectedBackupDate(now)
|
||||
const expectedDateKey = formatDateKey(expectedBackupDate)
|
||||
const checkedAt = now.toISOString()
|
||||
|
||||
const results = await Promise.all(
|
||||
backupTargets.map(async (target) => {
|
||||
try {
|
||||
const remoteDir = await resolveFolderRemoteDir(target.name)
|
||||
if (!remoteDir) {
|
||||
return {
|
||||
label: toLabel(target.name),
|
||||
folder: target.name,
|
||||
ok: false,
|
||||
status: 0,
|
||||
checkedAt,
|
||||
latestBackup: null,
|
||||
latestBackupAt: null,
|
||||
backupDate: null,
|
||||
expectedBackupDate: expectedDateKey,
|
||||
error: "Dossier de backup introuvable"
|
||||
}
|
||||
}
|
||||
|
||||
const latestBackupInfo = await getLatestBackupInfo(remoteDir)
|
||||
const backupDate = extractBackupDate(latestBackupInfo.fileName)
|
||||
const ok = backupDate === expectedDateKey
|
||||
|
||||
return {
|
||||
label: toLabel(target.name),
|
||||
folder: target.name,
|
||||
ok,
|
||||
status: ok ? 200 : 0,
|
||||
checkedAt,
|
||||
latestBackup: latestBackupInfo.fileName,
|
||||
latestBackupAt: latestBackupInfo.modifiedAt,
|
||||
backupDate,
|
||||
expectedBackupDate: expectedDateKey,
|
||||
error: latestBackupInfo.fileName ? undefined : "Aucun backup trouve"
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
label: toLabel(target.name),
|
||||
folder: target.name,
|
||||
ok: false,
|
||||
status: 0,
|
||||
checkedAt,
|
||||
latestBackup: null,
|
||||
latestBackupAt: null,
|
||||
backupDate: null,
|
||||
expectedBackupDate: expectedDateKey,
|
||||
error: error instanceof Error ? error.message : String(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
return { results }
|
||||
})
|
||||
Reference in New Issue
Block a user