Files
dance-lessons-coach/frontend/components/HealthDashboardView.vue
Gabriel Radureau 7c3617c9d7
Some checks failed
CI/CD Pipeline / Build Docker Cache (push) Successful in 12s
CI/CD Pipeline / CI Pipeline (push) Failing after 4m34s
CI/CD Pipeline / Trigger Docker Push (push) Has been skipped
♻️ refactor(frontend): split HealthDashboard into smart wrapper + dumb View for state-based stories (#33)
SRP split: HealthDashboardView (presentational, props-based) + HealthDashboard (smart wrapper, useFetch). Enables 4 Storybook stories per state + unit testability per branch. Existing testids preserved, Playwright tests still pass.

Co-authored-by: Gabriel Radureau <arcodange@gmail.com>
Co-committed-by: Gabriel Radureau <arcodange@gmail.com>
2026-05-03 17:55:47 +02:00

31 lines
915 B
Vue

<script setup lang="ts">
export interface HealthInfo {
status: string
version: string
uptime_seconds: number
timestamp: string
}
defineProps<{
data: HealthInfo | null | undefined
pending: boolean
error: { message: string } | null | undefined
}>()
</script>
<template>
<section data-testid="health-dashboard">
<h2>Server Health</h2>
<p v-if="pending" data-testid="health-loading">Loading...</p>
<p v-else-if="error" data-testid="health-error">
Error loading health: {{ error.message }}
</p>
<ul v-else-if="data" data-testid="health-info">
<li><strong>Status:</strong> <span data-testid="health-status">{{ data.status }}</span></li>
<li><strong>Version:</strong> {{ data.version }}</li>
<li><strong>Uptime:</strong> {{ data.uptime_seconds }} seconds</li>
<li><strong>Last check:</strong> {{ data.timestamp }}</li>
</ul>
</section>
</template>