Supervisor/components/StatusSite.vue

<template>
  <div class="status-card card-glow">
    <div class="card-header">
      <h2 class="card-title">Status</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-else
      v-for="row in rows"
      :key="`${row.label}-${row.url}`"
      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>
      <span class="font-mono text-xs" :class="row.status === 200 ? 'text-m-success' : 'text-m-error'">
        {{ statusLabel(row.status) }}
      </span>
    </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 { useApiAuthHeader } from "~/composables/useApiAuth"

interface StatusRow {
  label: string
  url: string
  ok: boolean
  status: number
  checkedAt: string
  error?: string
}

interface StatusResponse {
  results: StatusRow[]
}

const props = withDefaults(
    defineProps<{
      endpoint?: string
      refreshMs?: number
    }>(),
    {
      endpoint: "/api/version-status",
      refreshMs: 30000
    }
)

const rows = ref<StatusRow[]>([])
const loading = ref(true)
const initialized = ref(false)
const apiAuthHeader = useApiAuthHeader()
let timer: ReturnType<typeof setInterval> | null = null

const statusLabel = (status: number) => {
  if (status === 200) return "HTTP 200"
  if (status === 0) return "Injoignable"
  return `KO (${status})`
}

const checkStatus = async () => {
  if (!initialized.value) {
    loading.value = true
  }
  try {
    const data = await $fetch<StatusResponse>(props.endpoint, {
      headers: apiAuthHeader
    })
    rows.value = data.results
  } catch (error) {
    rows.value = [
      {
        label: "Erreur",
        url: props.endpoint,
        ok: false,
        status: 0,
        checkedAt: new Date().toISOString(),
        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: rgb(var(--m-secondary));
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: background-color 0.4s 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;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgb(var(--m-tertiary));
  border: 1px solid transparent;
  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>