64 lines
2.0 KiB
Plaintext
64 lines
2.0 KiB
Plaintext
<!-- frontend/src/App.vue -->
|
|
<template>
|
|
<div class="dashboard">
|
|
<header>
|
|
<h1>WEVIA Dashboard</h1>
|
|
<p>Performance & Monitoring — {{ date }}</p>
|
|
</header>
|
|
<main>
|
|
<section class="metrics">
|
|
<div v-for="m in metrics" :key="m.key" class="card">
|
|
<h3>{{ m.label }}</h3>
|
|
<p class="value">{{ m.value }}</p>
|
|
<small>{{ m.trend }}</small>
|
|
</div>
|
|
</section>
|
|
<section class="logs">
|
|
<h2>Live Logs</h2>
|
|
<pre>{{ logs }}</pre>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
date: new Date().toLocaleDateString(),
|
|
metrics: [
|
|
{ key: 'uptime', label: 'Uptime', value: '99.98%', trend: '↑ +0.02%' },
|
|
{ key: 'requests', label: 'Req/min', value: '1.2k', trend: '↑ 12%' },
|
|
{ key: 'latency', label: 'Latency', value: '47ms', trend: '↓ -5ms' },
|
|
{ key: 'errors', label: 'Errors', value: '3', trend: '↓ 67%' }
|
|
],
|
|
logs: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchLogs()
|
|
setInterval(this.fetchLogs, 5000)
|
|
},
|
|
methods: {
|
|
async fetchLogs() {
|
|
try {
|
|
const res = await fetch('/api/logs')
|
|
this.logs = await res.text()
|
|
} catch (e) {
|
|
this.logs = '[ERR] Connexion au backend'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 0; background: #f5f5f5; }
|
|
.dashboard { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
header { text-align: center; margin-bottom: 30px; }
|
|
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
|
|
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
|
|
.card h3 { margin: 0; color: #333; font-size: 16px; }
|
|
.value { font-size: 28px; font-weight: bold; color: #1a73e8; margin: 10px 0; }
|
|
.logs { background: #1e1e1e; color: #fff; padding: 20px; border-radius: 8px; font-family: monospace; white-space: pre-wrap; }
|
|
</style> |