up

frontend/src/views/Dashboard.vue

@@ -103,7 +103,7 @@
         <div class="space-y-4">
           <div v-for="service in systemServices" :key="service.name" class="flex items-center justify-between">
             <div class="flex items-center space-x-3">
-              <div :class="['w-2 h-2 rounded-full', service.status === 'healthy' ? 'bg-green-500' : 'bg-red-500']"></div>
+              <div :class="['w-2 h-2 rounded-full', service.status === 'up' ? 'bg-green-500' : 'bg-red-500']"></div>
               <span class="text-gray-700">{{ service.name }}</span>
             </div>
             <span class="text-sm text-gray-500">{{ service.latency }}ms</span>
@@ -115,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import AppLayout from '../components/Layout/AppLayout.vue'
 
 const stats = ref({
@@ -126,12 +126,34 @@ const stats = ref({
 })
 
 const recentUsers = ref([])
-const systemServices = ref([
-  { name: 'Database', status: 'healthy', latency: 12 },
-  { name: 'Redis Cache', status: 'healthy', latency: 3 },
-  { name: 'API Gateway', status: 'healthy', latency: 45 },
-  { name: 'File Storage', status: 'healthy', latency: 28 }
-])
+const systemServices = ref([])
+
+async function loadHealth() {
+  try {
+    const res = await fetch('/api/health')
+    const data = await res.json()
+    if (data.checks) {
+      systemServices.value = data.checks.map(check => ({
+        name: check.data?.name || check.id,
+        status: check.status.toLowerCase(),
+        latency: check.data?.latency_ms || 0
+      }))
+    }
+  } catch (e) {
+    console.error('Health check failed', e)
+  }
+}
+
+let interval: number
+onMounted(async () => {
+  await loadData()
+  await loadHealth()
+  interval = window.setInterval(loadHealth, 5000)
+})
+
+onUnmounted(() => {
+  if (interval) clearInterval(interval)
+})
 
 onMounted(async () => {
   await loadData()