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>
31 lines
915 B
Vue
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>
|