MALIO-DEV/Supervisor
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(backup): add backup scripts workflow

Browse Source
This commit is contained in:
Kevin Boudet
2026-03-10 09:48:53 +01:00
parent fb96cc3c32
commit 0863dfad2e
10 changed files with 857 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
layouts/default.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="page-layout">
<aside class="sidebar">
<aside class="sidebar" aria-label="Navigation principale">
<div class="sidebar-header">
<div class="logo-container">
<img
@@ -9,10 +9,42 @@
class="logo"
/>
</div>
<div class="brand-copy">
<p class="brand-title">Supervisor</p>
</div>
<div class="sidebar-divider" />
</div>
<div class="sidebar-content">
<slot name="sidebar" />
<nav class="sidebar-nav" aria-label="Sections">
<p class="nav-label">Navigation</p>
<NuxtLink
v-for="item in navItems"
:key="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(); isMenuOpen = false"
>
<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" />
@@ -30,7 +62,7 @@
<div v-if="isMenuOpen" class="mobile-menu-backdrop" @click="isMenuOpen = false" />
<aside v-if="isMenuOpen" class="mobile-sidebar">
<aside v-if="isMenuOpen" class="mobile-sidebar" aria-label="Navigation mobile">
<div class="sidebar-header">
<div class="logo-container">
<img
@@ -39,13 +71,56 @@
class="logo"
/>
</div>
<div class="brand-copy">
<p class="brand-kicker">Control Center</p>
<p class="brand-title">Supervisor</p>
<p class="brand-description">
Tableau de bord interne pour le monitoring et les sauvegardes.
</p>
</div>
<div class="sidebar-divider" />
</div>
<div class="sidebar-content">
<slot name="sidebar" />
<nav class="sidebar-nav" aria-label="Sections mobiles">
<p class="nav-label">Navigation</p>
<NuxtLink
v-for="item in navItems"
:key="`mobile-${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(); isMenuOpen = false"
>
<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">
Navigation rapide vers les vues principales de supervision.
</p>
</div>
<div class="footer-row">
<p class="font-mono text-[10px] tracking-widest uppercase text-white/40">
Supervisor v1.0
@@ -69,6 +144,22 @@ import { Icon as IconifyIcon } from "@iconify/vue"
import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
const isMenuOpen = ref(false)
const navItems = [
{
to: "/",
label: "Monitoring",
caption: "Etat global et disponibilite",
short: "MON",
icon: "mdi:chart-box-outline"
},
{
to: "/backup",
label: "Backup",
caption: "Scripts et fichiers archives",
short: "BKP",
icon: "mdi:database-arrow-up-outline"
}
]
</script>
<style scoped>
@@ -110,6 +201,35 @@ const isMenuOpen = ref(false)
padding: 0.5rem 0;
}
.brand-copy {
padding: 0.5rem 0 0.75rem;
text-align: center;
}
.brand-kicker {
margin: 0;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgb(var(--m-accent));
}
.brand-title {
margin: 0.45rem 0 0;
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.brand-description {
margin: 0.55rem 0 0;
color: rgb(255 255 255 / 0.58);
line-height: 1.6;
font-size: 0.92rem;
}
.logo {
height: 100px;
width: 100px;
@@ -124,11 +244,12 @@ const isMenuOpen = ref(false)
.sidebar-content {
flex: 1;
padding: 0.5rem 0;
padding: 0.5rem 1rem 1rem;
}
.sidebar-footer {
flex-shrink: 0;
padding-bottom: 0.5rem;
}
.sidebar-divider {
@@ -149,6 +270,139 @@ const isMenuOpen = ref(false)
padding: 0.5rem 1.5rem 0.75rem;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nav-label {
margin: 0;
padding: 0 0.75rem 0.25rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.38);
}
.nav-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 0.9rem;
border-radius: 14px;
border: 1px solid transparent;
color: white;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.nav-link:hover {
background: rgb(255 255 255 / 0.06);
border-color: rgb(var(--m-accent) / 0.14);
transform: translateY(-1px);
}
.nav-link:focus-visible {
outline: 2px solid rgb(var(--m-accent));
outline-offset: 2px;
background: rgb(255 255 255 / 0.08);
}
.nav-link-active {
background:
linear-gradient(135deg, rgb(var(--m-accent) / 0.16), rgb(255 255 255 / 0.04));
border-color: rgb(var(--m-accent) / 0.24);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.nav-link-main {
display: flex;
align-items: center;
gap: 0.8rem;
min-width: 0;
}
.nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 12px;
background: rgb(255 255 255 / 0.06);
color: rgb(var(--m-accent));
flex-shrink: 0;
}
.nav-title,
.nav-caption {
display: block;
}
.nav-title {
font-size: 0.96rem;
font-weight: 600;
color: white;
}
.nav-caption {
margin-top: 0.2rem;
font-size: 0.78rem;
line-height: 1.45;
color: rgb(255 255 255 / 0.5);
}
.nav-pill {
flex-shrink: 0;
padding: 0.28rem 0.45rem;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
color: rgb(255 255 255 / 0.62);
background: rgb(255 255 255 / 0.06);
}
.status-card {
margin: 0 1rem;
padding: 1rem;
border-radius: 16px;
border: 1px solid rgb(var(--m-accent) / 0.14);
background:
radial-gradient(circle at top right, rgb(var(--m-accent) / 0.14), transparent 30%),
rgb(255 255 255 / 0.04);
}
.status-label {
margin: 0;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.42);
}
.status-value {
margin: 0.5rem 0 0;
font-size: 1rem;
font-weight: 700;
color: white;
}
.status-description {
margin: 0.45rem 0 0;
font-size: 0.82rem;
line-height: 1.55;
color: rgb(255 255 255 / 0.54);
}
.content {
background: rgb(var(--m-bg));
overflow-y: auto;
@@ -208,6 +462,11 @@ const isMenuOpen = ref(false)
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
}
.sidebar-content {
padding-right: 0.9rem;
padding-left: 0.9rem;
}
.close-button {
display: inline-flex;
align-items: center;
@@ -219,5 +478,9 @@ const isMenuOpen = ref(false)
background: rgba(255, 255, 255, 0.06);
color: white;
}
.nav-link {
padding: 0.8rem 0.85rem;
}
}
</style>