feat : ajout page monitoring

components/StatusSite.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bg-m-secondary w-[250px] h-auto rounded-md mx-4 shadow-md/50 shadow-black pb-4">
+    <p class="font-bold text-3xl text-m-tertiary my-1 mx-3">
+      Status
+    </p>
+  <div
+      class="bg-m-tertiary w-[200px] h-auto rounded-md shadow-md/50 shadow-m-black mx-[25px] mb-3"
+      v-for="row in rows"
+      :key="`${row.label}-${row.url}`"
+  >
+    <p class="font-bold text-xl text-m-text mt-2 mx-2 mb-1">
+      {{ row.label }}
+    </p>
+    <div class="mx-2 flex items-center">
+    <span
+        class="inline-block h-[24px] w-[24px] rounded-full mr-2"
+        :class="statusClass(row.status)"
+    />
+      <span class="font-semibold text-lg">
+      {{ statusLabel(row.status) }}
+    </span>
+    </div>
+  </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onBeforeUnmount, onMounted, ref} from "vue"
+
+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[]>([])
+let timer: ReturnType<typeof setInterval> | null = null
+
+const statusClass = (status: number) => {
+  if (status === 200) return "bg-m-success"
+  if (status === 0) return "bg-m-error"
+  return "bg-m-error"
+}
+
+const statusLabel = (status: number) => {
+  if (status === 200) return "HTTP 200"
+  if (status === 0) return "Injoignable"
+  return `KO (HTTP ${status})`
+}
+
+const checkStatus = async () => {
+  try {
+    const data = await $fetch<StatusResponse>(props.endpoint)
+    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)
+      }
+    ]
+  }
+}
+
+onMounted(() => {
+  checkStatus()
+  timer = setInterval(checkStatus, props.refreshMs)
+})
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+})
+</script>