feat : ajout page monitoring

components/DiagramStorage.vue

@@ -0,0 +1,50 @@
+<template>
+  <section class="flex flex-col items-center p-4">
+    <p class="text-center text-xl font-semibold uppercase">{{ hostName }}</p>
+    <div class="relative h-[140px] w-[140px]" :class="statusColorClass">
+      <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-label="Pourcentage restant">
+        <circle
+          class="fill-none stroke-[rgba(255,255,255,0.22)] [stroke-width:10]"
+          cx="60"
+          cy="60"
+          :r="chartRadius"
+        />
+        <circle
+          class="fill-none stroke-[currentColor] [stroke-linecap:round] [stroke-width:10] transition-[stroke-dashoffset] duration-300"
+          cx="60"
+          cy="60"
+          :r="chartRadius"
+          :style="{ strokeDasharray: `${chartCircumference}`, strokeDashoffset: `${chartOffset}` }"
+        />
+      </svg>
+      <div class="absolute inset-0 flex flex-col items-center justify-center">
+        <strong class="text-2xl leading-none">{{ remainingPercentText }}</strong>
+      </div>
+    </div>
+
+    <p class="mt-1 text-center text-sm font-semibold">{{ usedText }} / {{ totalText }}</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  hostName: string
+  statusColorClass: string
+  chartRadius: number
+  chartCircumference: number
+  chartOffset: number
+  remainingPercentText: string
+  usedText: string
+  totalText: string
+}>()
+</script>
+
+<style scoped>
+.m-success {
+  color: rgb(var(--m-success));
+}
+
+.m-error {
+  color: rgb(var(--m-error));
+}
+</style>