Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
99a5758f05 | ||
| 7261f9f0e9 | |||
| 5184e26293 | |||
| 829ac07d38 | |||
| e13e1eb3dd | |||
| 69c192c35a | |||
| f7ac255820 | |||
| 5495e18173 | |||
|
|
3f00c229cb | ||
| f4f38cf6d1 | |||
| 6eddc11253 | |||
| c6d5843022 | |||
| ffb84b41a9 | |||
| 7c3467d85f |
17
.env.example
17
.env.example
@@ -1,8 +1,23 @@
|
|||||||
|
# API_SECRET_KEy sert à sécuriser l'accès à l'API de votre application.
|
||||||
API_SECRET_KEY=
|
API_SECRET_KEY=
|
||||||
|
|
||||||
|
# DISCORD_BOT_TOKEN & DISCORD_CHANNEL_ID pour le bot discord
|
||||||
DISCORD_BOT_TOKEN=
|
DISCORD_BOT_TOKEN=
|
||||||
DISCORD_CHANNEL_ID=
|
DISCORD_CHANNEL_ID=
|
||||||
|
|
||||||
|
# BACKUPS_REMOTE_HOST, BACKUPS_REMOTE_ROOT et BACKUPS_MAX_FILES pour la gestion des backups
|
||||||
BACKUPS_REMOTE_HOST=
|
BACKUPS_REMOTE_HOST=
|
||||||
BACKUPS_REMOTE_ROOT=
|
BACKUPS_REMOTE_ROOT=
|
||||||
BACKUPS_MAX_FILES=
|
BACKUPS_MAX_FILES=
|
||||||
|
|
||||||
|
# DISK_COMMAND_REMOTE et DISK_COMMAND_LOCAL pour les commandes de vérification de l'espace disque
|
||||||
DISK_COMMAND_REMOTE=
|
DISK_COMMAND_REMOTE=
|
||||||
DISK_COMMAND_LOCAL=
|
DISK_COMMAND_LOCAL=
|
||||||
|
|
||||||
|
# BACKUP_SCRIPT_COMMAND_BACKUP_BDD_RECETTE, BACKUP_SCRIPT_COMMAND_CHECK_STATUT_RECETTE et BACKUP_SCRIPT_COMMAND_BACKUP_VAULTWARDEN pour les commandes de backup et de vérification des statuts
|
||||||
|
BACKUP_SCRIPT_COMMAND_BACKUP_BDD_RECETTE=
|
||||||
|
BACKUP_SCRIPT_COMMAND_CHECK_STATUT_RECETTE=
|
||||||
|
BACKUP_SCRIPT_COMMAND_BACKUP_VAULTWARDEN=
|
||||||
|
|
||||||
|
# A quelle heure les backups doivent être effectués (format 24h)
|
||||||
|
BACKUPS_HOUR=19
|
||||||
26
CHANGELOG.md
26
CHANGELOG.md
@@ -1,3 +1,29 @@
|
|||||||
|
# [1.4.0](https://gitea.malio.fr/MALIO-DEV/Supervisor/compare/v1.3.1...v1.4.0) (2026-03-17)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* lint ([69c192c](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/69c192c35ad2a743d01b96d834f509b2b1f0b4e6))
|
||||||
|
* readme ([5184e26](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/5184e26293ef23944e874f4e938f1cc89ec85f82))
|
||||||
|
* use env ([f7ac255](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/f7ac255820ca5a1fded47a6b0071d85c7d3c4214))
|
||||||
|
* use env only ([829ac07](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/829ac07d38e81225017b3c6a33c3f34882ca02d1))
|
||||||
|
* use env only ([e13e1eb](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/e13e1eb3dd48c1b5a6f2fe0347e43dea60e4406f))
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* add check backup ([5495e18](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/5495e18173c0778c6eaba4ae1eb8c30ea46bbef7))
|
||||||
|
|
||||||
|
## [1.3.1](https://gitea.malio.fr/MALIO-DEV/Supervisor/compare/v1.3.0...v1.3.1) (2026-03-16)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* arch-02 make type file ([ffb84b4](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/ffb84b41a9e15b2edc98378c94050c74c9d200c6))
|
||||||
|
* arch-03 worker system metric ([6eddc11](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/6eddc1125316bb0d77a7c71cfc4674cd99c6e296))
|
||||||
|
* arch-03 worker system metric ([c6d5843](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/c6d5843022bbdcf909662c2c9ce47fb14f88b5a2))
|
||||||
|
* extract shared ssh utilities ([7c3467d](https://gitea.malio.fr/MALIO-DEV/Supervisor/commit/7c3467d85f987f1d9b8fe2546a13c2d23ea841b4))
|
||||||
|
|
||||||
# [1.3.0](https://gitea.malio.fr/MALIO-DEV/Supervisor/compare/v1.2.4...v1.3.0) (2026-03-13)
|
# [1.3.0](https://gitea.malio.fr/MALIO-DEV/Supervisor/compare/v1.2.4...v1.3.0) (2026-03-13)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
146
README.md
146
README.md
@@ -1,4 +1,14 @@
|
|||||||
# Projet Monitoring
|
# Supervisor
|
||||||
|
|
||||||
|
`Supervisor` est une application Nuxt qui centralise plusieurs besoins d'exploitation dans une interface web unique :
|
||||||
|
|
||||||
|
- suivi de l'état general d'applications distantes
|
||||||
|
- consultation de l'espace disque local et distant
|
||||||
|
- visualisation de métriques système de la machine qui execute l'application
|
||||||
|
- contrôle et téléchargement de sauvegardes via SSH
|
||||||
|
- lecture de messages Discord depuis un canal configure
|
||||||
|
|
||||||
|
Le nom du package npm visible dans le depot est `disk-monitor`, mais l'interface et la structure du projet exposent clairement le nom `Supervisor`.
|
||||||
|
|
||||||
## Installation du projet
|
## Installation du projet
|
||||||
|
|
||||||
@@ -15,79 +25,105 @@ https://wiki.malio.fr/bookstack/books/environnement-de-dev/chapter/linux
|
|||||||
### Installation du projet
|
### Installation du projet
|
||||||
Une fois les prérequis installés, cloner le dépôt puis installer les dépendances.
|
Une fois les prérequis installés, cloner le dépôt puis installer les dépendances.
|
||||||
|
|
||||||
|
Les étapes ci-dessous sont celles qui sont réellement supportées par le depot.
|
||||||
|
|
||||||
|
### 1. Cloner le depot
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone gitea@gitea.malio.fr:MALIO-DEV/Supervisor.git
|
||||||
|
cd Supervisor
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. Preparer le fichier d'environnement
|
||||||
|
|
||||||
|
Le depot fournit un exemple dans `.env.example`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Renseigner les variables necessaires
|
||||||
|
|
||||||
|
#### Generation d'une valeur pour `API_SECRET_KEY`
|
||||||
|
|
||||||
|
Le depot impose la presence d'un secret, mais ne fournit pas de commande officielle pour le générer.
|
||||||
|
|
||||||
|
Exemple de commande compatible :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
openssl rand -hex 32
|
||||||
|
```
|
||||||
|
Cette commande sert simplement à produire une valeur aléatoire facile à placer dans `.env`.
|
||||||
|
|
||||||
|
Les variables visibles dans le depot sont :
|
||||||
|
|
||||||
|
- `API_SECRET_KEY` : secret attendu par le middleware d'authentification pour toutes les routes `/api/*` sauf `/api/ping`
|
||||||
|
- `DISCORD_BOT_TOKEN` : token du bot utilise par endpoint Discord
|
||||||
|
- `DISCORD_CHANNEL_ID` : identifiant du canal Discord a lire
|
||||||
|
- `BACKUPS_REMOTE_HOST` : hôte SSH cible pour les operations distantes
|
||||||
|
- `BACKUPS_REMOTE_ROOT` : dossier racine des sauvegardes sur l'hôte distant
|
||||||
|
- `BACKUPS_MAX_FILES` : nombre maximal de fichiers retournés par dossier de backup
|
||||||
|
- `DISK_COMMAND_REMOTE` : commande shell utilisée pour la verification disque distante
|
||||||
|
- `DISK_COMMAND_LOCAL` : commande shell utilisée pour la verification disque locale
|
||||||
|
- `BACKUP_SCRIPT_COMMAND_BACKUP_BDD_RECETTE` : commande a exécuter pour le script "Backup BDD recette"
|
||||||
|
- `BACKUP_SCRIPT_COMMAND_CHECK_STATUT_RECETTE` : commande à exécuter pour le script "Check statut recette"
|
||||||
|
- `BACKUP_SCRIPT_COMMAND_BACKUP_VAULTWARDEN` : commande à exécuter pour le script "Backup vault warden"
|
||||||
|
- `BACKUPS_HOUR` : heure attendue des sauvegardes pour le contrôle de fraicheur
|
||||||
|
|
||||||
|
### 4. Installer les dépendances
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
Lancer ensuite le serveur de développement.
|
### 5. Lancer le serveur de développement
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
L’application sera accessible sur :
|
Par défaut, l'application Nuxt sera accessible sûr <http://localhost:3000>.
|
||||||
http://localhost:3000
|
|
||||||
|
|
||||||
Si une erreur liée à la version de Node apparaît, vérifier que Node ≥ 20 est utilisé via nvm.
|
## Configuration necessaire
|
||||||
|
|
||||||
nvm install 20
|
### Authentification API
|
||||||
nvm use 20
|
|
||||||
|
|
||||||
## Utilisation du projet
|
Le middleware `server/middleware/auth.ts` protege toutes les routes `/api/*`, sauf `/api/ping`.
|
||||||
### Frontend
|
|
||||||
|
|
||||||
Lancer le serveur de développement.
|
Consequence visible :
|
||||||
```
|
|
||||||
npm run dev
|
- si `API_SECRET_KEY` est vide, les appels API sont refusés avec `401 Unauthorized`
|
||||||
```
|
- l'application web pose aussi un cookie HTTP-only via `server/middleware/auth-cookie.ts` pour réutiliser ce secret coté navigateur
|
||||||
Compilation pour la production.
|
|
||||||
```
|
### SSH pour les backups
|
||||||
npm run build
|
|
||||||
```
|
Les fonctionnalités de backup utilisent `ssh` avec les options `BatchMode=yes` et `ConnectTimeout=5` dans `server/utils/ssh.ts`. Cela implique un accès sans saisie interactive de mot de passe.
|
||||||
Prévisualisation du build de production.
|
|
||||||
```
|
Elements a preparer cote SSH :
|
||||||
npm run preview
|
|
||||||
```
|
- une cle privée disponible sur la machine qui execute `Supervisor`
|
||||||
|
- une clé ssh pour les différentes machines cibles, si necessaire pour les différents usages (backup BDD, backup Vault warden, check statut recette)
|
||||||
|
|
||||||
|
Le depot ne fixe pas de noms de fichiers de clés SSH ni de chemin obligatoire. Les noms exacts ne sont donc pas vérifiables dans le code.
|
||||||
|
|
||||||
## Commandes utiles
|
## Commandes utiles
|
||||||
|
|
||||||
Installation des dépendances.
|
Commandes déclarées dans `package.json` :
|
||||||
```
|
|
||||||
npm install
|
```bash
|
||||||
```
|
|
||||||
Lancer le serveur de développement.
|
|
||||||
```
|
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
|
||||||
Build de production.
|
|
||||||
```
|
|
||||||
npm run build
|
npm run build
|
||||||
```
|
npm run generate
|
||||||
Prévisualisation du build.
|
|
||||||
```
|
|
||||||
npm run preview
|
npm run preview
|
||||||
|
npm run lint
|
||||||
|
npm run lint:fix
|
||||||
```
|
```
|
||||||
Supprimer les dépendances et réinstaller proprement.
|
|
||||||
```
|
|
||||||
rm -rf node_modules package-lock.json
|
|
||||||
npm install
|
|
||||||
Déploiement
|
|
||||||
```
|
|
||||||
Construire l’application.
|
|
||||||
```
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
Les fichiers générés se trouvent dans :
|
|
||||||
.output/
|
|
||||||
|
|
||||||
Le serveur peut ensuite être lancé avec :
|
Usage :
|
||||||
```
|
|
||||||
node .output/server/index.mjs
|
|
||||||
```
|
|
||||||
Il est recommandé d’utiliser un reverse proxy comme Nginx en production.
|
|
||||||
|
|
||||||
### Notes
|
- `npm run dev` : lance l'application en développement
|
||||||
|
- `npm run build` : construit l'application pour la production
|
||||||
Les accès SSH ou les chemins système utilisés par les endpoints doivent rester côté serveur.
|
- `npm run generate` : généré une sortie statique si ce mode est compatible avec votre usage
|
||||||
Ne jamais exposer de credentials dans le frontend.
|
- `npm run preview` : prévisualisé le build Nuxt
|
||||||
Les variables sensibles doivent être stockées dans un fichier .env.
|
- `npm run lint` : execute ESLint
|
||||||
|
- `npm run lint:fix` : applique les corrections ESLint automatiques : collecte périodique CPU, mémoire et réseau
|
||||||
@@ -34,12 +34,35 @@
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
background: rgb(var(--m-bg));
|
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));
|
color: rgb(var(--m-text));
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
transition: background-color 0.4s ease, color 0.4s ease;
|
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 {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -75,6 +98,13 @@
|
|||||||
transition: box-shadow 0.3s ease;
|
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 {
|
.card-glow-success {
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 1px rgb(var(--m-success) / 0.15),
|
0 0 0 1px rgb(var(--m-success) / 0.15),
|
||||||
@@ -165,3 +195,14 @@
|
|||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: rgb(var(--m-muted));
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -80,7 +80,6 @@
|
|||||||
import { computed, onMounted, ref } from "vue"
|
import { computed, onMounted, ref } from "vue"
|
||||||
import { Icon as IconifyIcon } from "@iconify/vue"
|
import { Icon as IconifyIcon } from "@iconify/vue"
|
||||||
import { apiFetch } from "~/composables/useApiAuth"
|
import { apiFetch } from "~/composables/useApiAuth"
|
||||||
import { useApiAuthHeader } from "~/composables/useApiAuth"
|
|
||||||
|
|
||||||
type BackupScript = {
|
type BackupScript = {
|
||||||
key: string
|
key: string
|
||||||
@@ -120,7 +119,6 @@ const scripts = ref<BackupScript[]>([])
|
|||||||
const output = ref<string>("")
|
const output = ref<string>("")
|
||||||
const message = ref<string>("")
|
const message = ref<string>("")
|
||||||
const isError = ref(false)
|
const isError = ref(false)
|
||||||
const apiAuthHeader = useApiAuthHeader()
|
|
||||||
|
|
||||||
const statusClass = computed(() => (isError.value ? "status-error" : "status-success"))
|
const statusClass = computed(() => (isError.value ? "status-error" : "status-success"))
|
||||||
|
|
||||||
@@ -189,8 +187,7 @@ const runScript = async (key: string) => {
|
|||||||
? error.data.statusMessage
|
? error.data.statusMessage
|
||||||
: null
|
: null
|
||||||
|
|
||||||
message.value = statusMessage || "Erreur lors de l'opération"
|
message.value = statusMessage || "Erreur execution script"
|
||||||
message.value = error?.data?.statusMessage || "Erreur execution script"
|
|
||||||
output.value = ""
|
output.value = ""
|
||||||
emit("result", {
|
emit("result", {
|
||||||
key,
|
key,
|
||||||
|
|||||||
@@ -56,12 +56,15 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.discord-card {
|
.discord-card {
|
||||||
background: rgb(var(--m-secondary));
|
background:
|
||||||
border-radius: 12px;
|
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||||
|
border-radius: 20px;
|
||||||
padding: 1.25rem;
|
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);
|
max-height: calc(100vh - 7rem);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: background-color 0.4s ease;
|
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -83,7 +86,11 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
min-height: 220px;
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgb(var(--m-tertiary) / 0.28);
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-state {
|
.error-state {
|
||||||
@@ -95,7 +102,7 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
|||||||
.message-list {
|
.message-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.65rem;
|
||||||
max-height: calc(100vh - 12rem);
|
max-height: calc(100vh - 12rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
@@ -103,10 +110,10 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
|||||||
.message-row {
|
.message-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
padding: 0.75rem;
|
padding: 0.85rem;
|
||||||
border-radius: 8px;
|
border-radius: 14px;
|
||||||
background: rgb(var(--m-tertiary));
|
background: rgb(var(--m-tertiary) / 0.74);
|
||||||
border: 1px solid rgb(var(--m-accent) / 0.04);
|
border: 1px solid rgb(var(--m-border) / 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-avatar {
|
.message-avatar {
|
||||||
@@ -123,4 +130,20 @@ const { data: messages, error } = await useFetch('/api/discord/messages', {
|
|||||||
color: rgb(var(--m-accent));
|
color: rgb(var(--m-accent));
|
||||||
flex-shrink: 0;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ const metrics = computed(() => [
|
|||||||
|
|
||||||
async function testDownload() {
|
async function testDownload() {
|
||||||
const start = performance.now()
|
const start = performance.now()
|
||||||
const res = await apiRequest('/api/download')
|
const res = await apiRequest('/api/speedtest')
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error(`HTTP ${res.status}`)
|
throw new Error(`HTTP ${res.status}`)
|
||||||
}
|
}
|
||||||
@@ -118,10 +118,13 @@ async function runTests() {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.speedtest-card {
|
.speedtest-card {
|
||||||
background: rgb(var(--m-secondary));
|
background:
|
||||||
border-radius: 12px;
|
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||||
|
border-radius: 20px;
|
||||||
padding: 1.25rem;
|
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 {
|
.card-header {
|
||||||
@@ -152,9 +155,15 @@ async function runTests() {
|
|||||||
transition: all 0.2s ease;
|
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) {
|
.reload-btn:hover:not(:disabled) {
|
||||||
background: rgb(var(--m-accent) / 0.12);
|
background: rgb(var(--m-accent) / 0.12);
|
||||||
border-color: rgb(var(--m-accent) / 0.25);
|
border-color: rgb(var(--m-accent) / 0.25);
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reload-btn:disabled {
|
.reload-btn:disabled {
|
||||||
@@ -169,10 +178,10 @@ async function runTests() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.metric-card {
|
.metric-card {
|
||||||
background: rgb(var(--m-tertiary));
|
background: rgb(var(--m-tertiary) / 0.72);
|
||||||
border-radius: 10px;
|
border-radius: 14px;
|
||||||
padding: 1rem;
|
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;
|
transition: border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -211,12 +220,22 @@ async function runTests() {
|
|||||||
|
|
||||||
.error-text {
|
.error-text {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
border-radius: 8px;
|
border-radius: 14px;
|
||||||
border: 1px solid rgb(var(--m-error) / 0.12);
|
border: 1px solid rgb(var(--m-error) / 0.16);
|
||||||
background: rgb(var(--m-error) / 0.06);
|
background: rgb(var(--m-error) / 0.06);
|
||||||
padding: 0.75rem 0.875rem;
|
padding: 0.75rem 0.875rem;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: rgb(var(--m-error));
|
color: rgb(var(--m-error));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.speedtest-card {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</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>
|
<template>
|
||||||
<div class="status-card card-glow">
|
<div class="status-card card-glow">
|
||||||
<div class="card-header">
|
<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>
|
<span class="font-mono text-[10px] text-m-muted tracking-widest uppercase">Services</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -119,13 +119,16 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.status-card {
|
.status-card {
|
||||||
background: rgb(var(--m-secondary));
|
background:
|
||||||
border-radius: 12px;
|
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||||
|
border-radius: 20px;
|
||||||
padding: 1.25rem;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.625rem;
|
gap: 0.75rem;
|
||||||
transition: background-color 0.4s ease;
|
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -146,10 +149,11 @@ onBeforeUnmount(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0.75rem 1rem;
|
min-height: 3.2rem;
|
||||||
border-radius: 8px;
|
padding: 0.85rem 1rem;
|
||||||
background: rgb(var(--m-tertiary));
|
border-radius: 14px;
|
||||||
border: 1px solid transparent;
|
background: rgb(var(--m-tertiary) / 0.75);
|
||||||
|
border: 1px solid rgb(var(--m-border) / 0.2);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,47 +3,70 @@
|
|||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="card-title">Historique systeme</h2>
|
<h2 class="card-title">Historique systeme</h2>
|
||||||
<p class="card-copy">CPU, RAM et debit reseau sur les derniers releves</p>
|
<p class="card-copy">CPU et RAM avec cache journalier local</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="toggle-group" role="radiogroup" aria-label="Metrique affichee">
|
<div class="controls">
|
||||||
<label
|
<div class="toggle-group" role="group" aria-label="Metriques affichees">
|
||||||
v-for="option in options"
|
<button
|
||||||
:key="option.value"
|
v-for="option in options"
|
||||||
class="toggle-pill"
|
:key="option.value"
|
||||||
:class="{ 'toggle-pill-active': selectedMetric === option.value }"
|
type="button"
|
||||||
>
|
class="toggle-pill"
|
||||||
<input
|
:class="{ 'toggle-pill-active': isMetricActive(option.value) }"
|
||||||
v-model="selectedMetric"
|
@click="toggleMetric(option.value)"
|
||||||
type="radio"
|
|
||||||
name="system-metric"
|
|
||||||
class="sr-only"
|
|
||||||
:value="option.value"
|
|
||||||
>
|
>
|
||||||
<span class="toggle-dot" :style="{ backgroundColor: option.color }" />
|
<span class="toggle-dot" :style="{ backgroundColor: option.color }" />
|
||||||
<span>{{ option.label }}</span>
|
<span>{{ option.label }}</span>
|
||||||
</label>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="history-toolbar">
|
||||||
|
<label class="window-select">
|
||||||
|
<span>Fenetre</span>
|
||||||
|
<select v-model="selectedWindow">
|
||||||
|
<option
|
||||||
|
v-for="windowOption in windowOptions"
|
||||||
|
:key="windowOption.value"
|
||||||
|
:value="windowOption.value"
|
||||||
|
>
|
||||||
|
{{ windowOption.label }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button type="button" class="clear-btn" @click="clearHistory">
|
||||||
|
Vider le cache
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart-shell">
|
<div class="chart-shell">
|
||||||
<template v-if="loading && points.length === 0">
|
<template v-if="loading && visibleHistory.length === 0">
|
||||||
<div class="chart-skeleton animate-shimmer" />
|
<div class="chart-skeleton animate-shimmer" />
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="chart-meta">
|
<div class="chart-meta">
|
||||||
<div>
|
|
||||||
<span class="meta-label">Actuel</span>
|
|
||||||
<strong class="meta-value" :style="{ color: activeOption.color }">{{ formattedCurrentValue }}</strong>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="meta-label">Pic</span>
|
|
||||||
<strong class="meta-value">{{ formattedPeakValue }}</strong>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<span class="meta-label">Echelle</span>
|
<span class="meta-label">Echelle</span>
|
||||||
<strong class="meta-value">{{ scaleLabel }}</strong>
|
<strong class="meta-value">{{ scaleLabel }}</strong>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="meta-label">Periode</span>
|
||||||
|
<strong class="meta-value">{{ activeWindowLabel }}</strong>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="option in displayedOptions"
|
||||||
|
:key="option.value"
|
||||||
|
class="meta-metric"
|
||||||
|
>
|
||||||
|
<span class="meta-label">{{ option.label }}</span>
|
||||||
|
<strong class="meta-value" :style="{ color: option.color }">
|
||||||
|
{{ formatValue(currentMetricValue(option.value)) }}
|
||||||
|
</strong>
|
||||||
|
<span class="meta-subvalue">Pic {{ formatValue(peakMetricValue(option.value)) }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
@@ -53,18 +76,61 @@
|
|||||||
aria-label="Graphique des ressources"
|
aria-label="Graphique des ressources"
|
||||||
>
|
>
|
||||||
<line
|
<line
|
||||||
v-for="line in gridLines"
|
:x1="chartLeft"
|
||||||
:key="line"
|
:y1="chartBottom"
|
||||||
x1="0"
|
:x2="chartRight"
|
||||||
:y1="line"
|
:y2="chartBottom"
|
||||||
x2="960"
|
class="axis-line"
|
||||||
:y2="line"
|
/>
|
||||||
|
<line
|
||||||
|
:x1="chartLeft"
|
||||||
|
:y1="chartTop"
|
||||||
|
:x2="chartLeft"
|
||||||
|
:y2="chartBottom"
|
||||||
|
class="axis-line"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
v-for="line in yAxisTicks"
|
||||||
|
:key="`grid-${line.y}`"
|
||||||
|
:x1="chartLeft"
|
||||||
|
:y1="line.y"
|
||||||
|
:x2="chartRight"
|
||||||
|
:y2="line.y"
|
||||||
class="grid-line"
|
class="grid-line"
|
||||||
/>
|
/>
|
||||||
|
<text
|
||||||
|
v-for="line in yAxisTicks"
|
||||||
|
:key="`y-label-${line.y}`"
|
||||||
|
:x="chartLeft - 12"
|
||||||
|
:y="line.y + 4"
|
||||||
|
class="axis-label axis-label-y"
|
||||||
|
>
|
||||||
|
{{ line.label }}
|
||||||
|
</text>
|
||||||
|
<line
|
||||||
|
v-for="tick in xAxisTicks"
|
||||||
|
:key="`x-grid-${tick.x}`"
|
||||||
|
:x1="tick.x"
|
||||||
|
:y1="chartTop"
|
||||||
|
:x2="tick.x"
|
||||||
|
:y2="chartBottom"
|
||||||
|
class="grid-line grid-line-vertical"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
v-for="tick in xAxisTicks"
|
||||||
|
:key="`x-label-${tick.x}`"
|
||||||
|
:x="tick.x"
|
||||||
|
:y="304"
|
||||||
|
class="axis-label axis-label-x"
|
||||||
|
>
|
||||||
|
{{ tick.label }}
|
||||||
|
</text>
|
||||||
<polyline
|
<polyline
|
||||||
:points="polylinePoints"
|
v-for="option in displayedOptions"
|
||||||
|
:key="option.value"
|
||||||
|
:points="polylinePoints(option.value)"
|
||||||
class="chart-line"
|
class="chart-line"
|
||||||
:style="{ stroke: activeOption.color }"
|
:style="{ stroke: option.color }"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
@@ -73,44 +139,131 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed, ref, watch} from "vue"
|
import { computed, onMounted, ref, watch } from "vue"
|
||||||
|
import type { SystemMetrics } from "~/types/system"
|
||||||
|
|
||||||
type MetricKey = "cpu" | "ram" | "incoming" | "outgoing"
|
type MetricKey = "cpu" | "ram"
|
||||||
|
type WindowKey = "day" | "hour" | "5m" | "1m" | "30s"
|
||||||
type SystemMetrics = {
|
|
||||||
cpuPercent: number
|
|
||||||
memoryPercent: number
|
|
||||||
totalMemory: number
|
|
||||||
usedMemory: number
|
|
||||||
incomingMbps: number
|
|
||||||
outgoingMbps: number
|
|
||||||
sampledAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
type HistoryPoint = {
|
type HistoryPoint = {
|
||||||
sampledAt: string
|
sampledAt: number
|
||||||
cpu: number
|
cpu: number
|
||||||
ram: number
|
ram: number
|
||||||
incoming: number
|
|
||||||
outgoing: number
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const HISTORY_STORAGE_KEY = "supervisor-system-history"
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
metrics: SystemMetrics | null
|
metrics: SystemMetrics | null
|
||||||
loading: boolean
|
loading: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const selectedMetric = ref<MetricKey>("ram")
|
const activeMetrics = ref<MetricKey[]>(["cpu", "ram"])
|
||||||
|
const selectedWindow = ref<WindowKey>("hour")
|
||||||
const history = ref<HistoryPoint[]>([])
|
const history = ref<HistoryPoint[]>([])
|
||||||
const maxPoints = 40
|
|
||||||
|
|
||||||
const options: Array<{value: MetricKey; label: string; color: string}> = [
|
const options: Array<{ value: MetricKey; label: string; color: string }> = [
|
||||||
{value: "cpu", label: "CPU", color: "#5aa9ff"},
|
{ value: "cpu", label: "CPU", color: "#5aa9ff" },
|
||||||
{value: "ram", label: "RAM", color: "#31c48d"},
|
{ value: "ram", label: "RAM", color: "#31c48d" }
|
||||||
{value: "incoming", label: "Entrant", color: "#f59e0b"},
|
|
||||||
{value: "outgoing", label: "Sortant", color: "#ef4444"}
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const windowOptions: Array<{ value: WindowKey; label: string; durationMs: number | null }> = [
|
||||||
|
{ value: "day", label: "Journee", durationMs: null },
|
||||||
|
{ value: "hour", label: "1 h", durationMs: 60 * 60 * 1000 },
|
||||||
|
{ value: "5m", label: "5 min", durationMs: 5 * 60 * 1000 },
|
||||||
|
{ value: "1m", label: "1 min", durationMs: 60 * 1000 },
|
||||||
|
{ value: "30s", label: "30 s", durationMs: 30 * 1000 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const getStartOfToday = (timestamp: number) => {
|
||||||
|
const date = new Date(timestamp)
|
||||||
|
date.setHours(0, 0, 0, 0)
|
||||||
|
return date.getTime()
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalizeHistory = (points: HistoryPoint[]) => {
|
||||||
|
if (points.length === 0) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
const startOfToday = getStartOfToday(Date.now())
|
||||||
|
|
||||||
|
return points
|
||||||
|
.filter((point) => point.sampledAt >= startOfToday)
|
||||||
|
.sort((left, right) => left.sampledAt - right.sampledAt)
|
||||||
|
}
|
||||||
|
|
||||||
|
const persistHistory = () => {
|
||||||
|
if (!import.meta.client) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(history.value))
|
||||||
|
}
|
||||||
|
|
||||||
|
const appendHistoryPoint = (metrics: SystemMetrics) => {
|
||||||
|
const sampledAt = new Date(metrics.sampledAt).getTime()
|
||||||
|
|
||||||
|
if (!Number.isFinite(sampledAt)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextPoint: HistoryPoint = {
|
||||||
|
sampledAt,
|
||||||
|
cpu: metrics.cpuPercent,
|
||||||
|
ram: metrics.memoryPercent
|
||||||
|
}
|
||||||
|
|
||||||
|
const previousPoint = history.value.at(-1)
|
||||||
|
const nextHistory = normalizeHistory(
|
||||||
|
previousPoint?.sampledAt === nextPoint.sampledAt
|
||||||
|
? [...history.value.slice(0, -1), nextPoint]
|
||||||
|
: [...history.value, nextPoint]
|
||||||
|
)
|
||||||
|
|
||||||
|
history.value = nextHistory
|
||||||
|
persistHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearHistory = () => {
|
||||||
|
history.value = []
|
||||||
|
|
||||||
|
if (!import.meta.client) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.removeItem(HISTORY_STORAGE_KEY)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (!import.meta.client) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const rawHistory = localStorage.getItem(HISTORY_STORAGE_KEY)
|
||||||
|
|
||||||
|
if (!rawHistory) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedHistory = JSON.parse(rawHistory) as HistoryPoint[]
|
||||||
|
history.value = normalizeHistory(
|
||||||
|
parsedHistory.filter((point) => {
|
||||||
|
return (
|
||||||
|
point &&
|
||||||
|
Number.isFinite(point.sampledAt) &&
|
||||||
|
Number.isFinite(point.cpu) &&
|
||||||
|
Number.isFinite(point.ram)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
)
|
||||||
|
persistHistory()
|
||||||
|
} catch {
|
||||||
|
localStorage.removeItem(HISTORY_STORAGE_KEY)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.metrics?.sampledAt,
|
() => props.metrics?.sampledAt,
|
||||||
() => {
|
() => {
|
||||||
@@ -118,82 +271,147 @@ watch(
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
history.value = [
|
appendHistoryPoint(props.metrics)
|
||||||
...history.value,
|
|
||||||
{
|
|
||||||
sampledAt: props.metrics.sampledAt,
|
|
||||||
cpu: props.metrics.cpuPercent,
|
|
||||||
ram: props.metrics.memoryPercent,
|
|
||||||
incoming: props.metrics.incomingMbps,
|
|
||||||
outgoing: props.metrics.outgoingMbps
|
|
||||||
}
|
|
||||||
].slice(-maxPoints)
|
|
||||||
},
|
},
|
||||||
{immediate: true}
|
{ immediate: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
const activeOption = computed(() => {
|
const activeWindow = computed(() => {
|
||||||
return options.find((option) => option.value === selectedMetric.value) || options[0]
|
return windowOptions.find((option) => option.value === selectedWindow.value) || windowOptions[0]
|
||||||
})
|
})
|
||||||
|
|
||||||
const points = computed(() => history.value.map((point) => point[selectedMetric.value]))
|
const displayedOptions = computed(() => {
|
||||||
|
return options.filter((option) => activeMetrics.value.includes(option.value))
|
||||||
const peakValue = computed(() => {
|
|
||||||
return points.value.reduce((max, value) => Math.max(max, value), 0)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const scaleMax = computed(() => {
|
const visibleHistory = computed(() => {
|
||||||
if (selectedMetric.value === "cpu" || selectedMetric.value === "ram") {
|
if (activeWindow.value.durationMs === null) {
|
||||||
return 100
|
return history.value
|
||||||
}
|
}
|
||||||
|
|
||||||
return Math.max(1, Math.ceil(peakValue.value))
|
const minTimestamp = Date.now() - activeWindow.value.durationMs
|
||||||
|
return history.value.filter((point) => point.sampledAt >= minTimestamp)
|
||||||
})
|
})
|
||||||
|
|
||||||
const formatValue = (value: number, metric: MetricKey) => {
|
const scaleMax = computed(() => 100)
|
||||||
if (metric === "cpu" || metric === "ram") {
|
|
||||||
return `${Math.round(value)}%`
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${value.toFixed(2)} Mbps`
|
const formatValue = (value: number) => `${Math.round(value)}%`
|
||||||
}
|
|
||||||
|
|
||||||
const formattedCurrentValue = computed(() => {
|
|
||||||
const currentValue = points.value.at(-1) ?? 0
|
|
||||||
return formatValue(currentValue, selectedMetric.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const formattedPeakValue = computed(() => {
|
|
||||||
return formatValue(peakValue.value, selectedMetric.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const scaleLabel = computed(() => {
|
const scaleLabel = computed(() => {
|
||||||
return formatValue(scaleMax.value, selectedMetric.value)
|
return formatValue(scaleMax.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const gridLines = [40, 120, 200, 280]
|
const activeWindowLabel = computed(() => activeWindow.value.label)
|
||||||
|
|
||||||
const polylinePoints = computed(() => {
|
const isMetricActive = (metric: MetricKey) => activeMetrics.value.includes(metric)
|
||||||
if (points.value.length === 0) {
|
|
||||||
return "0,280"
|
const toggleMetric = (metric: MetricKey) => {
|
||||||
|
if (isMetricActive(metric)) {
|
||||||
|
activeMetrics.value = activeMetrics.value.filter((value) => value !== metric)
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (points.value.length === 1) {
|
activeMetrics.value = [...activeMetrics.value, metric]
|
||||||
const normalizedValue = points.value[0] / scaleMax.value
|
}
|
||||||
const y = 280 - normalizedValue * 240
|
|
||||||
return `0,${y} 960,${y}`
|
const currentMetricValue = (metric: MetricKey) => {
|
||||||
|
return visibleHistory.value.at(-1)?.[metric] ?? 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const peakMetricValue = (metric: MetricKey) => {
|
||||||
|
return visibleHistory.value.reduce((max, point) => Math.max(max, point[metric]), 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
const chartLeft = 72
|
||||||
|
const chartRight = 936
|
||||||
|
const chartTop = 24
|
||||||
|
const chartBottom = 280
|
||||||
|
const chartWidth = chartRight - chartLeft
|
||||||
|
const chartHeight = chartBottom - chartTop
|
||||||
|
|
||||||
|
const yAxisTicks = computed(() => {
|
||||||
|
const steps = 4
|
||||||
|
|
||||||
|
return Array.from({ length: steps + 1 }, (_, index) => {
|
||||||
|
const ratio = index / steps
|
||||||
|
const value = scaleMax.value * (1 - ratio)
|
||||||
|
const y = chartTop + chartHeight * ratio
|
||||||
|
|
||||||
|
return {
|
||||||
|
y,
|
||||||
|
label: formatValue(value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const formatTimeLabel = (timestamp: number) => {
|
||||||
|
return new Intl.DateTimeFormat("fr-FR", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
second: activeWindow.value.durationMs !== null && activeWindow.value.durationMs <= 5 * 60 * 1000
|
||||||
|
? "2-digit"
|
||||||
|
: undefined
|
||||||
|
}).format(timestamp)
|
||||||
|
}
|
||||||
|
|
||||||
|
const xAxisTicks = computed(() => {
|
||||||
|
if (visibleHistory.value.length === 0) {
|
||||||
|
return []
|
||||||
}
|
}
|
||||||
|
|
||||||
return points.value
|
if (visibleHistory.value.length === 1) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
x: chartLeft,
|
||||||
|
label: formatTimeLabel(visibleHistory.value[0].sampledAt)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const steps = 3
|
||||||
|
const firstTimestamp = visibleHistory.value[0].sampledAt
|
||||||
|
const lastTimestamp = visibleHistory.value.at(-1)?.sampledAt || firstTimestamp
|
||||||
|
const span = Math.max(1, lastTimestamp - firstTimestamp)
|
||||||
|
|
||||||
|
return Array.from({ length: steps + 1 }, (_, index) => {
|
||||||
|
const ratio = index / steps
|
||||||
|
const targetTimestamp = firstTimestamp + span * ratio
|
||||||
|
const closestPoint = visibleHistory.value.reduce((closest, point) => {
|
||||||
|
const currentDistance = Math.abs(point.sampledAt - targetTimestamp)
|
||||||
|
const closestDistance = Math.abs(closest.sampledAt - targetTimestamp)
|
||||||
|
return currentDistance < closestDistance ? point : closest
|
||||||
|
}, visibleHistory.value[0])
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: chartLeft + chartWidth * ratio,
|
||||||
|
label: formatTimeLabel(closestPoint.sampledAt)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const polylinePoints = (metric: MetricKey) => {
|
||||||
|
const points = visibleHistory.value.map((point) => point[metric])
|
||||||
|
|
||||||
|
if (points.length === 0) {
|
||||||
|
return `${chartLeft},${chartBottom}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (points.length === 1) {
|
||||||
|
const normalizedValue = points[0] / scaleMax.value
|
||||||
|
const y = chartBottom - normalizedValue * chartHeight
|
||||||
|
return `${chartLeft},${y} ${chartRight},${y}`
|
||||||
|
}
|
||||||
|
|
||||||
|
return points
|
||||||
.map((value, index) => {
|
.map((value, index) => {
|
||||||
const x = (index / (points.value.length - 1)) * 960
|
const x = chartLeft + (index / (points.length - 1)) * chartWidth
|
||||||
const normalizedValue = scaleMax.value > 0 ? value / scaleMax.value : 0
|
const normalizedValue = scaleMax.value > 0 ? value / scaleMax.value : 0
|
||||||
const y = 280 - normalizedValue * 240
|
const y = chartBottom - normalizedValue * chartHeight
|
||||||
|
|
||||||
return `${x},${Math.max(24, Math.min(280, y))}`
|
return `${x},${Math.max(chartTop, Math.min(chartBottom, y))}`
|
||||||
})
|
})
|
||||||
.join(" ")
|
.join(" ")
|
||||||
})
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -231,6 +449,13 @@ const polylinePoints = computed(() => {
|
|||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.toggle-group {
|
.toggle-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -252,6 +477,7 @@ const polylinePoints = computed(() => {
|
|||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
color: rgb(var(--m-muted));
|
color: rgb(var(--m-muted));
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -268,6 +494,53 @@ const polylinePoints = computed(() => {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.history-toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-select {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgb(var(--m-muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-select select {
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgb(var(--m-accent) / 0.14);
|
||||||
|
background: rgb(var(--m-tertiary));
|
||||||
|
padding: 0.55rem 0.8rem;
|
||||||
|
font: inherit;
|
||||||
|
color: rgb(var(--m-text));
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn {
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgb(var(--m-error) / 0.18);
|
||||||
|
background: rgb(var(--m-error) / 0.08);
|
||||||
|
padding: 0.55rem 0.85rem;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgb(var(--m-error));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn:hover {
|
||||||
|
border-color: rgb(var(--m-error) / 0.32);
|
||||||
|
background: rgb(var(--m-error) / 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
.chart-shell {
|
.chart-shell {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@@ -278,11 +551,17 @@ const polylinePoints = computed(() => {
|
|||||||
|
|
||||||
.chart-meta {
|
.chart-meta {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.meta-metric {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.meta-label {
|
.meta-label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
@@ -295,23 +574,54 @@ const polylinePoints = computed(() => {
|
|||||||
|
|
||||||
.meta-value {
|
.meta-value {
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: 1.1rem;
|
font-size: 1.35rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: rgb(var(--m-text));
|
color: rgb(var(--m-text));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.meta-subvalue {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgb(var(--m-muted));
|
||||||
|
}
|
||||||
|
|
||||||
.chart-svg {
|
.chart-svg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 320px;
|
height: 320px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.axis-line {
|
||||||
|
stroke: rgb(var(--m-border) / 0.55);
|
||||||
|
stroke-width: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
.grid-line {
|
.grid-line {
|
||||||
stroke: rgb(var(--m-border) / 0.35);
|
stroke: rgb(var(--m-border) / 0.35);
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
stroke-dasharray: 6 10;
|
stroke-dasharray: 6 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-line-vertical {
|
||||||
|
stroke-dasharray: 4 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis-label {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 11px;
|
||||||
|
fill: rgb(var(--m-muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis-label-y {
|
||||||
|
text-anchor: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis-label-x {
|
||||||
|
text-anchor: middle;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-line {
|
.chart-line {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke-width: 4;
|
stroke-width: 4;
|
||||||
@@ -326,6 +636,15 @@ const polylinePoints = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
@media (max-width: 820px) {
|
||||||
|
.controls {
|
||||||
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-toolbar {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-meta {
|
.chart-meta {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -46,16 +46,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed} from "vue"
|
import {computed} from "vue"
|
||||||
|
import type { SystemMetrics } from "~/types/system";
|
||||||
type SystemMetrics = {
|
|
||||||
cpuPercent: number
|
|
||||||
memoryPercent: number
|
|
||||||
totalMemory: number
|
|
||||||
usedMemory: number
|
|
||||||
incomingMbps: number
|
|
||||||
outgoingMbps: number
|
|
||||||
sampledAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
metrics: SystemMetrics | null
|
metrics: SystemMetrics | null
|
||||||
@@ -96,13 +87,16 @@ const metrics = computed(() => [
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.resources-card {
|
.resources-card {
|
||||||
background: rgb(var(--m-secondary));
|
background:
|
||||||
border-radius: 12px;
|
linear-gradient(180deg, rgb(var(--m-secondary) / 0.78), rgb(var(--m-secondary) / 0.92));
|
||||||
|
border-radius: 20px;
|
||||||
padding: 1.25rem;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
transition: background-color 0.4s ease;
|
transition: background-color 0.4s ease, border-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
@@ -130,10 +124,10 @@ const metrics = computed(() => [
|
|||||||
grid-template-columns: minmax(0, 1fr) auto;
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0.875rem 1rem;
|
padding: 0.95rem 1rem;
|
||||||
border-radius: 10px;
|
border-radius: 14px;
|
||||||
background: rgb(var(--m-tertiary));
|
background: rgb(var(--m-tertiary) / 0.72);
|
||||||
border: 1px solid rgb(var(--m-accent) / 0.06);
|
border: 1px solid rgb(var(--m-border) / 0.22);
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-copy {
|
.metric-copy {
|
||||||
@@ -196,4 +190,18 @@ const metrics = computed(() => [
|
|||||||
.tone-error {
|
.tone-error {
|
||||||
background: rgb(var(--m-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>
|
</style>
|
||||||
|
|||||||
@@ -18,34 +18,43 @@
|
|||||||
<slot name="sidebar"/>
|
<slot name="sidebar"/>
|
||||||
<nav class="sidebar-nav" aria-label="Sections">
|
<nav class="sidebar-nav" aria-label="Sections">
|
||||||
<p class="nav-label">Navigation</p>
|
<p class="nav-label">Navigation</p>
|
||||||
<div class="flex flex-col gap-2">
|
<NuxtLink
|
||||||
<div class="bg-m-tertiary rounded-lg border border-m-accent/6">
|
v-for="item in navItems"
|
||||||
<NuxtLink
|
:key="`desktop-${item.to}`"
|
||||||
to="/"
|
v-slot="{ href, navigate, isExactActive }"
|
||||||
class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
|
:to="item.to"
|
||||||
>
|
custom
|
||||||
<IconifyIcon
|
>
|
||||||
icon="mdi:home"
|
<a
|
||||||
class="text-lg"/>
|
:href="href"
|
||||||
<p>Home</p>
|
class="nav-link"
|
||||||
</NuxtLink>
|
:class="{ 'nav-link-active': isExactActive }"
|
||||||
</div>
|
:aria-current="isExactActive ? 'page' : undefined"
|
||||||
<div class="bg-m-tertiary rounded-lg border border-m-accent/6">
|
@click="navigate"
|
||||||
<NuxtLink
|
>
|
||||||
to="/backup"
|
<span class="nav-link-main">
|
||||||
class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
|
<span class="nav-icon">
|
||||||
>
|
<IconifyIcon :icon="item.icon" class="text-lg"/>
|
||||||
<IconifyIcon
|
</span>
|
||||||
icon="mdi:data"
|
<span>
|
||||||
class="text-lg"/>
|
<span class="nav-title">{{ item.label }}</span>
|
||||||
<p>Backup</p>
|
<span class="nav-caption">{{ item.caption }}</span>
|
||||||
</NuxtLink>
|
</span>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<span class="nav-pill">{{ item.short }}</span>
|
||||||
|
</a>
|
||||||
|
</NuxtLink>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="sidebar-footer">
|
<div class="sidebar-footer">
|
||||||
<div class="sidebar-divider"/>
|
<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">
|
<div class="footer-row">
|
||||||
<p class="font-mono text-[10px] tracking-widest uppercase text-white/40">
|
<p class="font-mono text-[10px] tracking-widest uppercase text-white/40">
|
||||||
Supervisor {{ appVersion }}
|
Supervisor {{ appVersion }}
|
||||||
@@ -224,6 +233,10 @@ const navItems = [
|
|||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar .brand-title {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.brand-description {
|
.brand-description {
|
||||||
margin: 0.55rem 0 0;
|
margin: 0.55rem 0 0;
|
||||||
color: rgb(255 255 255 / 0.58);
|
color: rgb(255 255 255 / 0.58);
|
||||||
@@ -245,7 +258,7 @@ const navItems = [
|
|||||||
|
|
||||||
.sidebar-content {
|
.sidebar-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0.5rem 1rem 1rem;
|
padding: 0.75rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-footer {
|
.sidebar-footer {
|
||||||
@@ -274,7 +287,7 @@ const navItems = [
|
|||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-label {
|
.nav-label {
|
||||||
@@ -321,6 +334,16 @@ const navItems = [
|
|||||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
|
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 {
|
.nav-link-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -403,6 +426,9 @@ const navItems = [
|
|||||||
|
|
||||||
.content {
|
.content {
|
||||||
background: rgb(var(--m-bg));
|
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;
|
overflow-y: auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
transition: background-color 0.4s ease;
|
transition: background-color 0.4s ease;
|
||||||
|
|||||||
121
pages/backup.vue
121
pages/backup.vue
@@ -13,10 +13,19 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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
|
<BackupButtonSee
|
||||||
class="animate-fade-in-up backup-selector"
|
class="animate-fade-in-up"
|
||||||
style="animation-delay: 120ms"
|
style="animation-delay: 120ms"
|
||||||
@select="selectedBackup = $event"
|
@select="selectedBackup = $event"
|
||||||
/>
|
/>
|
||||||
@@ -27,24 +36,27 @@
|
|||||||
/>
|
/>
|
||||||
</section>
|
</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 animate-fade-in-up" style="animation-delay: 240ms">
|
||||||
<div class="files-panel-header">
|
<div class="files-panel-header">
|
||||||
<div>
|
<div class="files-panel-copy">
|
||||||
<p class="section-kicker">Fichiers</p>
|
<p class="section-kicker">Fichiers</p>
|
||||||
<h2 id="backup-files-title" class="files-panel-title">
|
<h2 id="backup-files-title" class="files-panel-title">
|
||||||
Historique des sauvegardes
|
Historique des sauvegardes
|
||||||
</h2>
|
</h2>
|
||||||
|
<p class="files-panel-description">
|
||||||
|
Consultez les archives disponibles et telechargez le dernier backup du dossier selectionne.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="files-panel-meta">
|
<span
|
||||||
{{ selectedBackup ? `Source ${selectedBackup}` : "En attente de selection" }}
|
class="selection-pill"
|
||||||
</p>
|
:class="{ 'selection-pill-active': selectedBackup }"
|
||||||
|
>
|
||||||
|
{{ selectedBackup ? `Source ${selectedBackup}` : "Selection requise" }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<BackupList
|
<BackupList :folder="selectedBackup" />
|
||||||
class="backup-list-mobile"
|
|
||||||
:folder="selectedBackup"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
@@ -53,9 +65,12 @@
|
|||||||
aria-labelledby="backup-output-title"
|
aria-labelledby="backup-output-title"
|
||||||
>
|
>
|
||||||
<div class="files-panel-header">
|
<div class="files-panel-header">
|
||||||
<div>
|
<div class="files-panel-copy">
|
||||||
<p class="section-kicker">Execution</p>
|
<p class="section-kicker">Execution</p>
|
||||||
<h2 id="backup-output-title" class="files-panel-title">Resultat du script</h2>
|
<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>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="panel-badge"
|
class="panel-badge"
|
||||||
@@ -170,15 +185,12 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-header {
|
.dashboard-header {
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
|
|
||||||
gap: 1.5rem;
|
|
||||||
align-items: end;
|
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-copy {
|
.header-copy {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
max-width: 70ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-kicker {
|
.section-kicker {
|
||||||
@@ -197,26 +209,37 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
|||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-grid {
|
.status-strip {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.workspace-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 300px minmax(0, 1fr);
|
grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-left,
|
.workspace-sidebar,
|
||||||
.grid-middle {
|
.workspace-main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.workspace-sidebar {
|
||||||
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.files-panel {
|
.files-panel {
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background: rgb(var(--m-secondary) / 0.4);
|
background:
|
||||||
border: 1px solid rgb(var(--m-accent) / 0.08);
|
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 {
|
.output-panel {
|
||||||
@@ -225,12 +248,16 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
|||||||
|
|
||||||
.files-panel-header {
|
.files-panel-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: end;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.files-panel-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.files-panel-title {
|
.files-panel-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
@@ -239,19 +266,41 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
|||||||
color: rgb(var(--m-text));
|
color: rgb(var(--m-text));
|
||||||
}
|
}
|
||||||
|
|
||||||
.files-panel-meta {
|
.files-panel-description {
|
||||||
margin: 0;
|
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-family: var(--font-mono);
|
||||||
font-size: 0.75rem;
|
font-size: 0.68rem;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: rgb(var(--m-muted));
|
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 {
|
.panel-badge {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 2.25rem;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
padding: 0.35rem 0.7rem;
|
padding: 0.35rem 0.7rem;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
@@ -327,18 +376,22 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1180px) {
|
@media (max-width: 1180px) {
|
||||||
.dashboard-header,
|
.workspace-grid {
|
||||||
.dashboard-grid {
|
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.workspace-sidebar {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
.files-panel-header {
|
.files-panel-header {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.files-panel-meta {
|
.selection-pill,
|
||||||
text-align: left;
|
.panel-badge {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -350,5 +403,9 @@ const handleScriptResult = async (payload: ScriptResult) => {
|
|||||||
.files-panel {
|
.files-panel {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.files-panel-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,9 +3,13 @@
|
|||||||
<div class="dashboard-container">
|
<div class="dashboard-container">
|
||||||
<header class="dashboard-header">
|
<header class="dashboard-header">
|
||||||
<div>
|
<div>
|
||||||
|
<p class="section-kicker">Operations</p>
|
||||||
<h1 class="font-display text-3xl font-bold tracking-tight text-m-text">
|
<h1 class="font-display text-3xl font-bold tracking-tight text-m-text">
|
||||||
Monitoring
|
Monitoring
|
||||||
</h1>
|
</h1>
|
||||||
|
<p class="header-description">
|
||||||
|
Visualisez l'etat des applications, des sauvegardes et des ressources systeme depuis une vue unique.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -63,8 +67,10 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed, onMounted, ref} from "vue"
|
import {computed, onMounted, ref} from "vue"
|
||||||
definePageMeta({layout: false})
|
|
||||||
import { apiFetch } from "~/composables/useApiAuth"
|
import { apiFetch } from "~/composables/useApiAuth"
|
||||||
|
import type { SystemMetrics } from "~/types/system";
|
||||||
|
|
||||||
|
definePageMeta({layout: false})
|
||||||
|
|
||||||
type DiskSourceResult = {
|
type DiskSourceResult = {
|
||||||
key: string
|
key: string
|
||||||
@@ -90,16 +96,6 @@ type DiagramItem = {
|
|||||||
totalText: string
|
totalText: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type SystemMetrics = {
|
|
||||||
cpuPercent: number
|
|
||||||
memoryPercent: number
|
|
||||||
totalMemory: number
|
|
||||||
usedMemory: number
|
|
||||||
incomingMbps: number
|
|
||||||
outgoingMbps: number
|
|
||||||
sampledAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const rawResults = ref<DiskSourceResult[]>([])
|
const rawResults = ref<DiskSourceResult[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const systemMetrics = ref<SystemMetrics | null>(null)
|
const systemMetrics = ref<SystemMetrics | null>(null)
|
||||||
@@ -181,7 +177,7 @@ const runScript = async () => {
|
|||||||
try {
|
try {
|
||||||
const output = await apiFetch<DiskApiResponse>("/api/disk")
|
const output = await apiFetch<DiskApiResponse>("/api/disk")
|
||||||
rawResults.value = output.results
|
rawResults.value = output.results
|
||||||
} catch (error) {
|
} catch {
|
||||||
rawResults.value = [
|
rawResults.value = [
|
||||||
{
|
{
|
||||||
key: "error",
|
key: "error",
|
||||||
@@ -229,8 +225,24 @@ onBeforeUnmount(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.25rem;
|
||||||
border-bottom: 1px solid rgba(80, 140, 255, 0.08);
|
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 {
|
.storage-section {
|
||||||
@@ -248,9 +260,11 @@ onBeforeUnmount(() => {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
border-radius: 12px;
|
border-radius: 18px;
|
||||||
background: rgb(var(--m-secondary));
|
background:
|
||||||
padding: 0.75rem;
|
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 {
|
.content-grid {
|
||||||
@@ -289,6 +303,7 @@ onBeforeUnmount(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1180px) {
|
@media (max-width: 1180px) {
|
||||||
|
|||||||
@@ -1,16 +1,8 @@
|
|||||||
import scripts from "../config/backup-script.json"
|
import { backupScripts } from "../utils/backup-scripts"
|
||||||
|
|
||||||
type BackupScript = {
|
|
||||||
key: string
|
|
||||||
label: string
|
|
||||||
icon?: string
|
|
||||||
downloadFolders?: string[]
|
|
||||||
command: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineEventHandler(() => {
|
export default defineEventHandler(() => {
|
||||||
return {
|
return {
|
||||||
scripts: (scripts as BackupScript[]).map(({ key, label, icon, downloadFolders }) => ({
|
scripts: backupScripts.map(({ key, label, icon, downloadFolders }) => ({
|
||||||
key,
|
key,
|
||||||
label,
|
label,
|
||||||
icon: icon || "mdi:play-circle-outline",
|
icon: icon || "mdi:play-circle-outline",
|
||||||
|
|||||||
@@ -1,17 +1,9 @@
|
|||||||
import { execFile } from "node:child_process"
|
import { exec } from "node:child_process"
|
||||||
import scripts from "../config/backup-script.json"
|
import { backupScripts, getBackupScriptCommand } from "../utils/backup-scripts"
|
||||||
|
|
||||||
type BackupScript = {
|
function runCommand(command: string): Promise<string> {
|
||||||
key: string
|
|
||||||
label: string
|
|
||||||
downloadFolders?: string[]
|
|
||||||
command: string
|
|
||||||
args?: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
function runCommand(command: string, args: string[] = []): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
execFile(command, args, { timeout: 10 * 60 * 1000 }, (error, stdout, stderr) => {
|
exec(command, { timeout: 10 * 60 * 1000 }, (error, stdout, stderr) => {
|
||||||
if (error) {
|
if (error) {
|
||||||
reject(stderr || error.message)
|
reject(stderr || error.message)
|
||||||
return
|
return
|
||||||
@@ -32,7 +24,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const script = (scripts as BackupScript[]).find((item) => item.key === key)
|
const script = backupScripts.find((item) => item.key === key)
|
||||||
if (!script) {
|
if (!script) {
|
||||||
throw createError({
|
throw createError({
|
||||||
statusCode: 404,
|
statusCode: 404,
|
||||||
@@ -41,7 +33,15 @@ export default defineEventHandler(async (event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const output = await runCommand(script.command, script.args || [])
|
const command = getBackupScriptCommand(script.key)
|
||||||
|
if (!command) {
|
||||||
|
throw createError({
|
||||||
|
statusCode: 500,
|
||||||
|
statusMessage: "Commande de script manquante"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const output = await runCommand(command)
|
||||||
return {
|
return {
|
||||||
ok: true,
|
ok: true,
|
||||||
key: script.key,
|
key: script.key,
|
||||||
@@ -52,6 +52,15 @@ export default defineEventHandler(async (event) => {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Erreur execution script:", error)
|
console.error("Erreur execution script:", error)
|
||||||
|
|
||||||
|
if (
|
||||||
|
typeof error === "object" &&
|
||||||
|
error !== null &&
|
||||||
|
"statusCode" in error &&
|
||||||
|
"statusMessage" in error
|
||||||
|
) {
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
|
||||||
throw createError({
|
throw createError({
|
||||||
statusCode: 500,
|
statusCode: 500,
|
||||||
statusMessage: "Erreur lors de l'opération"
|
statusMessage: "Erreur lors de l'opération"
|
||||||
|
|||||||
@@ -1,29 +1,15 @@
|
|||||||
import { execFile } from "node:child_process"
|
import {
|
||||||
import folderMap from "../config/backup-folders.json"
|
runSsh,
|
||||||
|
shellQuote,
|
||||||
|
resolveFolderRemoteDir,
|
||||||
|
REMOTE_ROOT,
|
||||||
|
} from "../utils/ssh.ts"
|
||||||
|
|
||||||
|
import {process} from "std-env";
|
||||||
|
|
||||||
const REMOTE_HOST = process.env.BACKUPS_REMOTE_HOST
|
|
||||||
const REMOTE_ROOT = process.env.BACKUPS_REMOTE_ROOT
|
|
||||||
const MAX_FILES_PER_FOLDER = Number(process.env.BACKUPS_MAX_FILES)
|
const MAX_FILES_PER_FOLDER = Number(process.env.BACKUPS_MAX_FILES)
|
||||||
const isSafeFolder = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
const isSafeFolder = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
||||||
const shellQuote = (value: string) => `'${value.replace(/'/g, `'\\''`)}'`
|
|
||||||
const FOLDER_MAP = folderMap as Record<string, string>
|
|
||||||
|
|
||||||
function runSsh(command: string): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
execFile(
|
|
||||||
"ssh",
|
|
||||||
["-o", "BatchMode=yes", "-o", "ConnectTimeout=5", REMOTE_HOST, command],
|
|
||||||
{ maxBuffer: 10 * 1024 * 1024 },
|
|
||||||
(error, stdout, stderr) => {
|
|
||||||
if (error) {
|
|
||||||
reject(stderr || error.message)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
resolve(stdout)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMissingPathError(error: unknown): boolean {
|
function isMissingPathError(error: unknown): boolean {
|
||||||
const message = String(error || "").toLowerCase()
|
const message = String(error || "").toLowerCase()
|
||||||
@@ -72,30 +58,6 @@ async function getLatestRemoteFile(remoteDir: string): Promise<string | null> {
|
|||||||
return files[0] || null
|
return files[0] || null
|
||||||
}
|
}
|
||||||
|
|
||||||
async function remoteDirExists(remoteDir: string): Promise<boolean> {
|
|
||||||
const output = await runSsh(`[ -d ${quoteDir(remoteDir)} ] && echo yes || echo no`)
|
|
||||||
return output.trim() === "yes"
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resolveFolderRemoteDir(folderName: string): Promise<string | null> {
|
|
||||||
const mapped = FOLDER_MAP[folderName]
|
|
||||||
if (mapped) {
|
|
||||||
return `${REMOTE_ROOT}/${mapped}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const direct = `${REMOTE_ROOT}/${folderName}`
|
|
||||||
if (await remoteDirExists(direct)) {
|
|
||||||
return direct
|
|
||||||
}
|
|
||||||
|
|
||||||
const nested = `${REMOTE_ROOT}/bdd_recette/${folderName}`
|
|
||||||
if (await remoteDirExists(nested)) {
|
|
||||||
return nested
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
const { folder } = getQuery(event)
|
const { folder } = getQuery(event)
|
||||||
const folderName = typeof folder === "string" ? folder : null
|
const folderName = typeof folder === "string" ? folder : null
|
||||||
@@ -120,7 +82,7 @@ export default defineEventHandler(async (event) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sinon on récupère le dernier backup de chaque dossier distant.
|
// Sinon, on récupère le dernier backup de chaque dossier distant.
|
||||||
let dirs: string[] = []
|
let dirs: string[] = []
|
||||||
try {
|
try {
|
||||||
dirs = await listRemoteDirs(REMOTE_ROOT)
|
dirs = await listRemoteDirs(REMOTE_ROOT)
|
||||||
|
|||||||
151
server/api/check-backup.get.ts
Normal file
151
server/api/check-backup.get.ts
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
import {
|
||||||
|
runSsh,
|
||||||
|
shellQuote,
|
||||||
|
resolveFolderRemoteDir
|
||||||
|
} from "../utils/ssh.ts"
|
||||||
|
|
||||||
|
import {process} from "std-env";
|
||||||
|
import backupOptions from "../config/backup-options.json"
|
||||||
|
|
||||||
|
export const BACKUP_HOUR = process.env.BACKUPS_HOUR
|
||||||
|
|
||||||
|
type BackupTarget = {
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type LatestBackupInfo = {
|
||||||
|
fileName: string | null
|
||||||
|
modifiedAt: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
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 }
|
||||||
|
})
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
import { exec, execFile } from "child_process"
|
import { exec } from "child_process"
|
||||||
import diskSources from "../config/disk-commands.json"
|
|
||||||
|
|
||||||
type DiskSource = {
|
type DiskSource = {
|
||||||
key: string
|
key: string
|
||||||
@@ -8,6 +7,21 @@ type DiskSource = {
|
|||||||
args?: string[]
|
args?: string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const diskSources: DiskSource[] = [
|
||||||
|
{
|
||||||
|
key: "remote",
|
||||||
|
label: "Serveur distant",
|
||||||
|
command: "ssh",
|
||||||
|
args: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "local",
|
||||||
|
label: "Machine locale",
|
||||||
|
command: "bash",
|
||||||
|
args: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
function getEnvCommand(source: DiskSource) {
|
function getEnvCommand(source: DiskSource) {
|
||||||
const envKey = `DISK_COMMAND_${source.key.toUpperCase()}`
|
const envKey = `DISK_COMMAND_${source.key.toUpperCase()}`
|
||||||
const legacyEnvKey =
|
const legacyEnvKey =
|
||||||
@@ -16,18 +30,6 @@ function getEnvCommand(source: DiskSource) {
|
|||||||
return process.env[envKey] || (legacyEnvKey ? process.env[legacyEnvKey] : undefined) || null
|
return process.env[envKey] || (legacyEnvKey ? process.env[legacyEnvKey] : undefined) || null
|
||||||
}
|
}
|
||||||
|
|
||||||
function runCommand(command: string, args: string[] = []): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
execFile(command, args, (error, stdout, stderr) => {
|
|
||||||
if (error) {
|
|
||||||
reject(stderr || error.message)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
resolve(stdout)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function runShellCommand(command: string): Promise<string> {
|
function runShellCommand(command: string): Promise<string> {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
exec(command, (error, stdout, stderr) => {
|
exec(command, (error, stdout, stderr) => {
|
||||||
@@ -42,12 +44,14 @@ function runShellCommand(command: string): Promise<string> {
|
|||||||
|
|
||||||
export default defineEventHandler(async () => {
|
export default defineEventHandler(async () => {
|
||||||
const results = await Promise.all(
|
const results = await Promise.all(
|
||||||
(diskSources as DiskSource[]).map(async (source) => {
|
diskSources.map(async (source) => {
|
||||||
try {
|
try {
|
||||||
const envCommand = getEnvCommand(source)
|
const envCommand = getEnvCommand(source)
|
||||||
const output = envCommand
|
if (!envCommand) {
|
||||||
? await runShellCommand(envCommand)
|
throw new Error(`Commande disque manquante pour ${source.key}`)
|
||||||
: await runCommand(source.command, source.args || [])
|
}
|
||||||
|
|
||||||
|
const output = await runShellCommand(envCommand)
|
||||||
return {
|
return {
|
||||||
key: source.key,
|
key: source.key,
|
||||||
label: source.label,
|
label: source.label,
|
||||||
|
|||||||
@@ -1,53 +1,13 @@
|
|||||||
import { execFile, spawn } from "node:child_process"
|
import {
|
||||||
import folderMap from "../config/backup-folders.json"
|
runSsh,
|
||||||
|
shellQuote,
|
||||||
|
resolveFolderRemoteDir,
|
||||||
|
REMOTE_HOST,
|
||||||
|
} from "../utils/ssh.ts"
|
||||||
|
|
||||||
const REMOTE_HOST = process.env.BACKUPS_REMOTE_HOST || "malio-b"
|
import {spawn} from "unenv/node/child_process";
|
||||||
const REMOTE_ROOT = process.env.BACKUPS_REMOTE_ROOT || "/home/malio-b/backups"
|
|
||||||
const FOLDER_MAP = folderMap as Record<string, string>
|
|
||||||
|
|
||||||
const isSafeFolder = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
const isSafeFolder = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
||||||
const shellQuote = (value: string) => `'${value.replace(/'/g, `'\\''`)}'`
|
|
||||||
|
|
||||||
function runSsh(command: string): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
execFile(
|
|
||||||
"ssh",
|
|
||||||
["-o", "BatchMode=yes", "-o", "ConnectTimeout=5", REMOTE_HOST, command],
|
|
||||||
{ maxBuffer: 10 * 1024 * 1024 },
|
|
||||||
(error, stdout, stderr) => {
|
|
||||||
if (error) {
|
|
||||||
reject(stderr || error.message)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
resolve(stdout)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function remoteDirExists(remoteDir: string): Promise<boolean> {
|
|
||||||
const output = await runSsh(`[ -d ${shellQuote(remoteDir)} ] && echo yes || echo no`)
|
|
||||||
return output.trim() === "yes"
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resolveFolderRemoteDir(folderName: string): Promise<string | null> {
|
|
||||||
const mapped = FOLDER_MAP[folderName]
|
|
||||||
if (mapped) {
|
|
||||||
return `${REMOTE_ROOT}/${mapped}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const direct = `${REMOTE_ROOT}/${folderName}`
|
|
||||||
if (await remoteDirExists(direct)) {
|
|
||||||
return direct
|
|
||||||
}
|
|
||||||
|
|
||||||
const nested = `${REMOTE_ROOT}/bdd_recette/${folderName}`
|
|
||||||
if (await remoteDirExists(nested)) {
|
|
||||||
return nested
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getLatestRemoteFile(remoteDir: string): Promise<string | null> {
|
async function getLatestRemoteFile(remoteDir: string): Promise<string | null> {
|
||||||
const output = await runSsh(`cd ${shellQuote(remoteDir)} && ls -1A | sort -r | head -n 1`)
|
const output = await runSsh(`cd ${shellQuote(remoteDir)} && ls -1A | sort -r | head -n 1`)
|
||||||
|
|||||||
@@ -1,92 +1,27 @@
|
|||||||
import { execFile, spawn } from "node:child_process"
|
import {
|
||||||
import { Readable } from "node:stream"
|
runSsh,
|
||||||
import folderMap from "../config/backup-folders.json"
|
shellQuote,
|
||||||
|
resolveFolderRemoteDir,
|
||||||
const REMOTE_HOST = process.env.BACKUPS_REMOTE_HOST || "malio-b"
|
REMOTE_HOST,
|
||||||
const REMOTE_ROOT = process.env.BACKUPS_REMOTE_ROOT || "/home/malio-b/backups"
|
} from "../utils/ssh.ts"
|
||||||
const FOLDER_MAP = folderMap as Record<string, string>
|
import {spawn} from "unenv/node/child_process";
|
||||||
|
|
||||||
const isSafeFolder = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
const isSafeFolder = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
||||||
const isSafeFile = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
const isSafeFile = (value: string) => /^[a-zA-Z0-9._-]+$/.test(value)
|
||||||
const shellQuote = (value: string) => `'${value.replace(/'/g, `'\\''`)}'`
|
|
||||||
|
|
||||||
function runSsh(command: string): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
execFile(
|
|
||||||
"ssh",
|
|
||||||
["-o", "BatchMode=yes", "-o", "ConnectTimeout=5", REMOTE_HOST, command],
|
|
||||||
{ maxBuffer: 10 * 1024 * 1024 },
|
|
||||||
(error, stdout, stderr) => {
|
|
||||||
if (error) {
|
|
||||||
reject(stderr || error.message)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
resolve(stdout)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function remoteDirExists(remoteDir: string): Promise<boolean> {
|
|
||||||
const output = await runSsh(`[ -d ${shellQuote(remoteDir)} ] && echo yes || echo no`)
|
|
||||||
return output.trim() === "yes"
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resolveFolderRemoteDir(folderName: string): Promise<string | null> {
|
|
||||||
const mapped = FOLDER_MAP[folderName]
|
|
||||||
if (mapped) {
|
|
||||||
return `${REMOTE_ROOT}/${mapped}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const direct = `${REMOTE_ROOT}/${folderName}`
|
|
||||||
if (await remoteDirExists(direct)) {
|
|
||||||
return direct
|
|
||||||
}
|
|
||||||
|
|
||||||
const nested = `${REMOTE_ROOT}/bdd_recette/${folderName}`
|
|
||||||
if (await remoteDirExists(nested)) {
|
|
||||||
return nested
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildContentDisposition(fileName: string) {
|
function buildContentDisposition(fileName: string) {
|
||||||
const asciiName = fileName.replace(/[^\x20-\x7E]/g, "_").replace(/["\\]/g, "_")
|
const asciiName = fileName.replace(/[^\x20-\x7E]/g, "_").replace(/["\\]/g, "_")
|
||||||
return `attachment; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(fileName)}`
|
return `attachment; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(fileName)}`
|
||||||
}
|
}
|
||||||
|
|
||||||
function speedtestStream(event: H3Event) {
|
|
||||||
const size = 128 * 1024 * 1024
|
|
||||||
let sent = 0
|
|
||||||
|
|
||||||
const stream = new Readable({
|
|
||||||
read(chunkSize) {
|
|
||||||
if (sent >= size) {
|
|
||||||
this.push(null)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const remaining = size - sent
|
|
||||||
const chunk = Buffer.alloc(Math.min(chunkSize, remaining), "a")
|
|
||||||
sent += chunk.length
|
|
||||||
this.push(chunk)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
setHeader(event, "Content-Type", "application/octet-stream")
|
|
||||||
setHeader(event, "Content-Length", size)
|
|
||||||
return stream
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
const { folder, file } = getQuery(event)
|
const { folder, file } = getQuery(event)
|
||||||
const folderName = typeof folder === "string" ? folder : null
|
const folderName = typeof folder === "string" ? folder : null
|
||||||
const fileName = typeof file === "string" ? file : null
|
const fileName = typeof file === "string" ? file : null
|
||||||
|
|
||||||
// Compat mode: utilisé par le test de débit.
|
|
||||||
if (!folderName || !fileName) {
|
if (!folderName || !fileName) {
|
||||||
return speedtestStream(event)
|
throw createError({ statusCode: 400, statusMessage: "Paramètres manquants" })
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isSafeFolder(folderName) || !isSafeFile(fileName)) {
|
if (!isSafeFolder(folderName) || !isSafeFile(fileName)) {
|
||||||
|
|||||||
24
server/api/speedtest.get.ts
Normal file
24
server/api/speedtest.get.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { Readable } from "node:stream"
|
||||||
|
|
||||||
|
export default defineEventHandler((event) => {
|
||||||
|
const size = 128 * 1024 * 1024
|
||||||
|
let sent = 0
|
||||||
|
|
||||||
|
const stream = new Readable({
|
||||||
|
read(chunkSize) {
|
||||||
|
if (sent >= size) {
|
||||||
|
this.push(null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const remaining = size - sent
|
||||||
|
const chunk = Buffer.alloc(Math.min(chunkSize, remaining), "a")
|
||||||
|
sent += chunk.length
|
||||||
|
this.push(chunk)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setHeader(event, "Content-Type", "application/octet-stream")
|
||||||
|
setHeader(event, "Content-Length", size)
|
||||||
|
return stream
|
||||||
|
})
|
||||||
@@ -1,165 +1,5 @@
|
|||||||
import fs from "node:fs"
|
import { getSystemMetricsSnapshot } from "../plugins/metrics-worker"
|
||||||
import os from "node:os"
|
|
||||||
|
|
||||||
type CpuTimesSnapshot = {
|
export default defineEventHandler(() => {
|
||||||
idle: number
|
return getSystemMetricsSnapshot()
|
||||||
total: number
|
|
||||||
}
|
|
||||||
|
|
||||||
type NetworkSnapshot = {
|
|
||||||
rxBytes: number
|
|
||||||
txBytes: number
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
let previousNetworkSnapshot: NetworkSnapshot | null = null
|
|
||||||
|
|
||||||
function getCpuSnapshot(): CpuTimesSnapshot {
|
|
||||||
const cpus = os.cpus()
|
|
||||||
|
|
||||||
return cpus.reduce(
|
|
||||||
(snapshot, cpu) => {
|
|
||||||
const total = Object.values(cpu.times).reduce((sum, value) => sum + value, 0)
|
|
||||||
|
|
||||||
snapshot.idle += cpu.times.idle
|
|
||||||
snapshot.total += total
|
|
||||||
|
|
||||||
return snapshot
|
|
||||||
},
|
|
||||||
{idle: 0, total: 0}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function wait(durationMs: number) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(resolve, durationMs)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getCpuUsagePercent(sampleMs: number) {
|
|
||||||
const start = getCpuSnapshot()
|
|
||||||
await wait(sampleMs)
|
|
||||||
const end = getCpuSnapshot()
|
|
||||||
|
|
||||||
const idleDelta = end.idle - start.idle
|
|
||||||
const totalDelta = end.total - start.total
|
|
||||||
|
|
||||||
if (totalDelta <= 0) {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
|
|
||||||
return Math.max(0, Math.min(100, Math.round((1 - idleDelta / totalDelta) * 100)))
|
|
||||||
}
|
|
||||||
|
|
||||||
function getNetworkTotals() {
|
|
||||||
try {
|
|
||||||
const content = fs.readFileSync("/proc/net/dev", "utf8")
|
|
||||||
const totals = content
|
|
||||||
.split("\n")
|
|
||||||
.slice(2)
|
|
||||||
.map((line) => line.trim())
|
|
||||||
.filter(Boolean)
|
|
||||||
.reduce(
|
|
||||||
(accumulator, line) => {
|
|
||||||
const [namePart, valuesPart] = line.split(":")
|
|
||||||
const interfaceName = namePart?.trim()
|
|
||||||
|
|
||||||
if (!interfaceName || interfaceName === "lo" || !valuesPart) {
|
|
||||||
return accumulator
|
|
||||||
}
|
|
||||||
|
|
||||||
const values = valuesPart.trim().split(/\s+/)
|
|
||||||
const rxBytes = Number.parseInt(values[0] || "0", 10)
|
|
||||||
const txBytes = Number.parseInt(values[8] || "0", 10)
|
|
||||||
|
|
||||||
if (Number.isFinite(rxBytes)) {
|
|
||||||
accumulator.rxBytes += rxBytes
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Number.isFinite(txBytes)) {
|
|
||||||
accumulator.txBytes += txBytes
|
|
||||||
}
|
|
||||||
|
|
||||||
return accumulator
|
|
||||||
},
|
|
||||||
{rxBytes: 0, txBytes: 0}
|
|
||||||
)
|
|
||||||
|
|
||||||
return totals
|
|
||||||
} catch {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getNetworkRatesMbps() {
|
|
||||||
const totals = getNetworkTotals()
|
|
||||||
const now = Date.now()
|
|
||||||
|
|
||||||
if (!totals) {
|
|
||||||
previousNetworkSnapshot = null
|
|
||||||
return {
|
|
||||||
incomingMbps: 0,
|
|
||||||
outgoingMbps: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentSnapshot: NetworkSnapshot = {
|
|
||||||
...totals,
|
|
||||||
timestamp: now
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!previousNetworkSnapshot) {
|
|
||||||
previousNetworkSnapshot = currentSnapshot
|
|
||||||
|
|
||||||
return {
|
|
||||||
incomingMbps: 0,
|
|
||||||
outgoingMbps: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const elapsedSeconds = (currentSnapshot.timestamp - previousNetworkSnapshot.timestamp) / 1000
|
|
||||||
|
|
||||||
if (elapsedSeconds <= 0) {
|
|
||||||
previousNetworkSnapshot = currentSnapshot
|
|
||||||
|
|
||||||
return {
|
|
||||||
incomingMbps: 0,
|
|
||||||
outgoingMbps: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const incomingMbps = Math.max(
|
|
||||||
0,
|
|
||||||
Number((((currentSnapshot.rxBytes - previousNetworkSnapshot.rxBytes) * 8) / elapsedSeconds / 1000000).toFixed(2))
|
|
||||||
)
|
|
||||||
const outgoingMbps = Math.max(
|
|
||||||
0,
|
|
||||||
Number((((currentSnapshot.txBytes - previousNetworkSnapshot.txBytes) * 8) / elapsedSeconds / 1000000).toFixed(2))
|
|
||||||
)
|
|
||||||
|
|
||||||
previousNetworkSnapshot = currentSnapshot
|
|
||||||
|
|
||||||
return {
|
|
||||||
incomingMbps,
|
|
||||||
outgoingMbps
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineEventHandler(async () => {
|
|
||||||
const totalMemory = os.totalmem()
|
|
||||||
const freeMemory = os.freemem()
|
|
||||||
const usedMemory = totalMemory - freeMemory
|
|
||||||
const memoryPercent = totalMemory > 0 ? Math.round((usedMemory / totalMemory) * 100) : 0
|
|
||||||
const cpuPercent = await getCpuUsagePercent(200)
|
|
||||||
const {incomingMbps, outgoingMbps} = getNetworkRatesMbps()
|
|
||||||
|
|
||||||
return {
|
|
||||||
cpuPercent,
|
|
||||||
memoryPercent,
|
|
||||||
totalMemory,
|
|
||||||
usedMemory,
|
|
||||||
incomingMbps,
|
|
||||||
outgoingMbps,
|
|
||||||
sampledAt: new Date().toISOString()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,34 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"key": "backup-bdd-recette",
|
|
||||||
"label": "Backup BDD recette",
|
|
||||||
"icon": "mdi:database-export",
|
|
||||||
"downloadFolders": ["ferme", "inventory", "sirh", "user"],
|
|
||||||
"command": "ssh",
|
|
||||||
"args": [
|
|
||||||
"ferme",
|
|
||||||
"cd /home/malio/Malio-ops/RecetteScripts && bash backup-bdd-recette.sh"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"key": "check-statut-recette",
|
|
||||||
"label": "Check statut recette",
|
|
||||||
"icon": "mdi:server-network",
|
|
||||||
"command": "ssh",
|
|
||||||
"args": [
|
|
||||||
"ferme",
|
|
||||||
"cd /home/malio/Malio-ops/RecetteScripts && bash check-statut-recette.sh"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"key": "backup-vaultwarden",
|
|
||||||
"label": "Backup vaultwarden",
|
|
||||||
"icon": "mdi:data",
|
|
||||||
"downloadFolders": ["bitwarden"],
|
|
||||||
"command": "ssh",
|
|
||||||
"args": [
|
|
||||||
"bitwarden",
|
|
||||||
"cd /home/matt/vaultwarden/Malio-ops/BackupVaultWarden && bash backup-vaultwarden.sh"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"key": "remote",
|
|
||||||
"label": "Serveur distant",
|
|
||||||
"command": "ssh",
|
|
||||||
"args": [
|
|
||||||
"malio-b",
|
|
||||||
"cd /home/malio-b/Malio-ops/CheckStorage && bash check-storage.sh"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"key": "local",
|
|
||||||
"label": "Machine locale",
|
|
||||||
"command": "bash",
|
|
||||||
"args": [
|
|
||||||
"/home/kevin/check_storage.sh"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
195
server/plugins/metrics-worker.ts
Normal file
195
server/plugins/metrics-worker.ts
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
import fs from "node:fs"
|
||||||
|
import os from "node:os"
|
||||||
|
import type { SystemMetrics } from "~/types/system"
|
||||||
|
|
||||||
|
type CpuTimesSnapshot = {
|
||||||
|
idle: number
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type NetworkTotals = {
|
||||||
|
rxBytes: number
|
||||||
|
txBytes: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type NetworkSnapshot = NetworkTotals & {
|
||||||
|
timestamp: number
|
||||||
|
}
|
||||||
|
|
||||||
|
let lastCpuSnapshot: CpuTimesSnapshot | null = null
|
||||||
|
let lastNetworkSnapshot: NetworkSnapshot | null = null
|
||||||
|
let intervalId: NodeJS.Timeout | null = null
|
||||||
|
let latestSnapshot: SystemMetrics = createSnapshot({
|
||||||
|
cpuPercent: 0,
|
||||||
|
incomingMbps: 0,
|
||||||
|
outgoingMbps: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
function createSnapshot(overrides: {
|
||||||
|
cpuPercent: number
|
||||||
|
incomingMbps: number
|
||||||
|
outgoingMbps: number
|
||||||
|
}): SystemMetrics {
|
||||||
|
const totalMemory = os.totalmem()
|
||||||
|
const freeMemory = os.freemem()
|
||||||
|
const usedMemory = totalMemory - freeMemory
|
||||||
|
const memoryPercent = totalMemory > 0 ? Math.round((usedMemory / totalMemory) * 100) : 0
|
||||||
|
|
||||||
|
return {
|
||||||
|
cpuPercent: overrides.cpuPercent,
|
||||||
|
memoryPercent,
|
||||||
|
totalMemory,
|
||||||
|
usedMemory,
|
||||||
|
incomingMbps: overrides.incomingMbps,
|
||||||
|
outgoingMbps: overrides.outgoingMbps,
|
||||||
|
sampledAt: new Date().toISOString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCpuSnapshot(): CpuTimesSnapshot {
|
||||||
|
return os.cpus().reduce(
|
||||||
|
(snapshot, cpu) => {
|
||||||
|
const total = Object.values(cpu.times).reduce((sum, value) => sum + value, 0)
|
||||||
|
|
||||||
|
snapshot.idle += cpu.times.idle
|
||||||
|
snapshot.total += total
|
||||||
|
|
||||||
|
return snapshot
|
||||||
|
},
|
||||||
|
{ idle: 0, total: 0 }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCpuUsagePercent() {
|
||||||
|
const currentSnapshot = getCpuSnapshot()
|
||||||
|
|
||||||
|
if (!lastCpuSnapshot) {
|
||||||
|
lastCpuSnapshot = currentSnapshot
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const idleDelta = currentSnapshot.idle - lastCpuSnapshot.idle
|
||||||
|
const totalDelta = currentSnapshot.total - lastCpuSnapshot.total
|
||||||
|
lastCpuSnapshot = currentSnapshot
|
||||||
|
|
||||||
|
if (totalDelta <= 0) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return Math.max(0, Math.min(100, Math.round((1 - idleDelta / totalDelta) * 100)))
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNetworkTotals(): NetworkTotals | null {
|
||||||
|
try {
|
||||||
|
const content = fs.readFileSync("/proc/net/dev", "utf8")
|
||||||
|
|
||||||
|
return content
|
||||||
|
.split("\n")
|
||||||
|
.slice(2)
|
||||||
|
.map((line) => line.trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
.reduce(
|
||||||
|
(totals, line) => {
|
||||||
|
const [namePart, valuesPart] = line.split(":")
|
||||||
|
const interfaceName = namePart?.trim()
|
||||||
|
|
||||||
|
if (!interfaceName || interfaceName === "lo" || !valuesPart) {
|
||||||
|
return totals
|
||||||
|
}
|
||||||
|
|
||||||
|
const values = valuesPart.trim().split(/\s+/)
|
||||||
|
const rxBytes = Number.parseInt(values[0] || "0", 10)
|
||||||
|
const txBytes = Number.parseInt(values[8] || "0", 10)
|
||||||
|
|
||||||
|
if (Number.isFinite(rxBytes)) {
|
||||||
|
totals.rxBytes += rxBytes
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Number.isFinite(txBytes)) {
|
||||||
|
totals.txBytes += txBytes
|
||||||
|
}
|
||||||
|
|
||||||
|
return totals
|
||||||
|
},
|
||||||
|
{ rxBytes: 0, txBytes: 0 }
|
||||||
|
)
|
||||||
|
} catch {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNetworkRatesMbps() {
|
||||||
|
const totals = getNetworkTotals()
|
||||||
|
const now = Date.now()
|
||||||
|
|
||||||
|
if (!totals) {
|
||||||
|
lastNetworkSnapshot = null
|
||||||
|
return {
|
||||||
|
incomingMbps: 0,
|
||||||
|
outgoingMbps: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentSnapshot: NetworkSnapshot = {
|
||||||
|
...totals,
|
||||||
|
timestamp: now
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!lastNetworkSnapshot) {
|
||||||
|
lastNetworkSnapshot = currentSnapshot
|
||||||
|
return {
|
||||||
|
incomingMbps: 0,
|
||||||
|
outgoingMbps: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const elapsedSeconds = (currentSnapshot.timestamp - lastNetworkSnapshot.timestamp) / 1000
|
||||||
|
|
||||||
|
if (elapsedSeconds <= 0) {
|
||||||
|
lastNetworkSnapshot = currentSnapshot
|
||||||
|
return {
|
||||||
|
incomingMbps: 0,
|
||||||
|
outgoingMbps: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const incomingMbps = Math.max(
|
||||||
|
0,
|
||||||
|
Number((((currentSnapshot.rxBytes - lastNetworkSnapshot.rxBytes) * 8) / elapsedSeconds / 1000000).toFixed(2))
|
||||||
|
)
|
||||||
|
const outgoingMbps = Math.max(
|
||||||
|
0,
|
||||||
|
Number((((currentSnapshot.txBytes - lastNetworkSnapshot.txBytes) * 8) / elapsedSeconds / 1000000).toFixed(2))
|
||||||
|
)
|
||||||
|
|
||||||
|
lastNetworkSnapshot = currentSnapshot
|
||||||
|
|
||||||
|
return {
|
||||||
|
incomingMbps,
|
||||||
|
outgoingMbps
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshSnapshot() {
|
||||||
|
const cpuPercent = getCpuUsagePercent()
|
||||||
|
const { incomingMbps, outgoingMbps } = getNetworkRatesMbps()
|
||||||
|
|
||||||
|
latestSnapshot = createSnapshot({
|
||||||
|
cpuPercent,
|
||||||
|
incomingMbps,
|
||||||
|
outgoingMbps
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSystemMetricsSnapshot() {
|
||||||
|
return latestSnapshot
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineNitroPlugin(() => {
|
||||||
|
if (intervalId) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshSnapshot()
|
||||||
|
intervalId = setInterval(refreshSnapshot, 2000)
|
||||||
|
})
|
||||||
31
server/utils/backup-scripts.ts
Normal file
31
server/utils/backup-scripts.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
export type BackupScript = {
|
||||||
|
key: string
|
||||||
|
label: string
|
||||||
|
icon?: string
|
||||||
|
downloadFolders?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const backupScripts: BackupScript[] = [
|
||||||
|
{
|
||||||
|
key: "backup-bdd-recette",
|
||||||
|
label: "Backup BDD recette",
|
||||||
|
icon: "mdi:database-export",
|
||||||
|
downloadFolders: ["ferme", "inventory", "sirh", "user"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "check-statut-recette",
|
||||||
|
label: "Check statut recette",
|
||||||
|
icon: "mdi:server-network"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "backup-vaultwarden",
|
||||||
|
label: "Backup vaultwarden",
|
||||||
|
icon: "mdi:data",
|
||||||
|
downloadFolders: ["bitwarden"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export function getBackupScriptCommand(key: string) {
|
||||||
|
const envKey = `BACKUP_SCRIPT_COMMAND_${key.toUpperCase().replace(/-/g, "_")}`
|
||||||
|
return process.env[envKey] || null
|
||||||
|
}
|
||||||
51
server/utils/ssh.ts
Normal file
51
server/utils/ssh.ts
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import { execFile } from "node:child_process"
|
||||||
|
import {process} from "std-env";
|
||||||
|
import folderMap from "#server/config/backup-folders.json";
|
||||||
|
|
||||||
|
export const REMOTE_HOST = process.env.BACKUPS_REMOTE_HOST
|
||||||
|
export const REMOTE_ROOT = process.env.BACKUPS_REMOTE_ROOT || "/home/malio-b/backups"
|
||||||
|
export const FOLDER_MAP = folderMap as Record<string, string>
|
||||||
|
|
||||||
|
|
||||||
|
export const shellQuote = (value: string) => `'${value.replace(/'/g, `'\\''`)}'`
|
||||||
|
|
||||||
|
export function runSsh(command: string): Promise<string> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
execFile(
|
||||||
|
"ssh",
|
||||||
|
["-o", "BatchMode=yes", "-o", "ConnectTimeout=5", REMOTE_HOST, command],
|
||||||
|
{ maxBuffer: 10 * 1024 * 1024 },
|
||||||
|
(error, stdout, stderr) => {
|
||||||
|
if (error) {
|
||||||
|
reject(stderr || error.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
resolve(stdout)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remoteDirExists(remoteDir: string): Promise<boolean> {
|
||||||
|
const output = await runSsh(`[ -d ${shellQuote(remoteDir)} ] && echo yes || echo no`)
|
||||||
|
return output.trim() === "yes"
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function resolveFolderRemoteDir(folderName: string): Promise<string | null> {
|
||||||
|
const mapped = FOLDER_MAP[folderName]
|
||||||
|
if (mapped) {
|
||||||
|
return `${REMOTE_ROOT}/${mapped}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const direct = `${REMOTE_ROOT}/${folderName}`
|
||||||
|
if (await remoteDirExists(direct)) {
|
||||||
|
return direct
|
||||||
|
}
|
||||||
|
|
||||||
|
const nested = `${REMOTE_ROOT}/bdd_recette/${folderName}`
|
||||||
|
if (await remoteDirExists(nested)) {
|
||||||
|
return nested
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
9
types/system.ts
Normal file
9
types/system.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export type SystemMetrics = {
|
||||||
|
cpuPercent: number
|
||||||
|
memoryPercent: number
|
||||||
|
totalMemory: number
|
||||||
|
usedMemory: number
|
||||||
|
incomingMbps: number
|
||||||
|
outgoingMbps: number
|
||||||
|
sampledAt: string
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user