feat : ajout page monitoring

components/Speedtest.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="bg-m-secondary w-[509px] h-[184px]  mx-4 rounded-md shadow-md/50 shadow-black p-2">
+    <div class="mb-2 flex items-center justify-between">
+      <p class="font-bold text-3xl text-m-tertiary">
+        Speedtest
+      </p>
+      <IconifyIcon
+          icon="mdi:reload"
+          class="bg-m-tertiary text-2xl text-black rounded-md shadow-md/50 mr-1 cursor-pointer"
+          @Click="runTests"
+      />
+    </div>
+    <div class="grid grid-cols-3 gap-3">
+      <div class="bg-m-tertiary w-[153px] h-[120px] rounded-md shadow-md/50 shadow-m-black">
+        <div class="flex items-center justify-center">
+          <IconifyIcon
+              icon="mdi:download"
+              class="text-m-primary text-2xl mt-2 ml-1"
+          />
+          <p class="font-bold uppercase text-xl text-m-text mt-2 mr-1">
+            download
+          </p>
+        </div>
+        <div class="mx-2 flex flex-col items-center justify-center">
+          <span class="text-4xl">
+            {{ download !== null ? `${download}` : "..." }}
+          </span>
+          <p class="font-bold text-xl leading-tight">
+            Mbps
+          </p>
+        </div>
+      </div>
+      <div class="bg-m-tertiary w-[153px] h-[120px] rounded-md shadow-md/50 shadow-m-black">
+        <div class="flex items-center justify-center">
+          <IconifyIcon
+              icon="mdi:upload"
+              class="text-m-primary text-2xl mt-2 ml-1"
+          />
+          <p class="font-bold uppercase text-xl text-m-text mt-2 mr-1">
+            upload
+          </p>
+        </div>
+        <div class="mx-2 flex flex-col items-center justify-center">
+          <span class="text-4xl">
+            {{ upload !== null ? `${upload}` : "..." }}
+          </span>
+          <p class="font-bold text-xl leading-tight">
+            Mbps
+          </p>
+        </div>
+      </div>
+      <div class="bg-m-tertiary w-[153px] h-[120px] rounded-md shadow-md/50 shadow-m-black">
+        <div class="flex items-center justify-center">
+          <IconifyIcon
+              icon="mdi:wifi"
+              class="text-m-primary text-2xl mt-2 ml-1"
+          />
+          <p class="font-bold uppercase text-xl text-m-text mt-2 mr-1">
+            ping
+          </p>
+        </div>
+        <div class="mx-2 flex flex-col items-center justify-center">
+          <span class="text-4xl">
+            {{ ping !== null ? `${ping}` : "..." }}
+          </span>
+          <p class="font-bold text-xl leading-tight">
+            Ms
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import {Icon as IconifyIcon} from "@iconify/vue"
+
+const ping = ref<number | null>(null)
+const download = ref<number | null>(null)
+const upload = ref<number | null>(null)
+
+async function testDownload() {
+  const start = performance.now()
+
+  const res = await fetch('/api/download')
+  const blob = await res.blob()
+
+  const end = performance.now()
+
+  const size = blob.size
+  const seconds = (end - start) / 1000
+  download.value = Math.round((size * 8) / seconds / 1000000)
+}
+
+async function testUpload() {
+  const size = 5 * 1024 * 1024
+  const data = new Uint8Array(size)
+
+  const start = performance.now()
+
+  await fetch('/api/upload', {
+    method: 'POST',
+    body: data
+  })
+
+  const end = performance.now()
+
+  const seconds = (end - start) / 1000
+  upload.value = Math.round((size * 8) / seconds / 1000000)
+}
+
+
+async function testPing() {
+  const start = performance.now()
+
+  await fetch('/api/ping')
+
+  const end = performance.now()
+
+  ping.value = Math.round(end - start)
+}
+
+async function runTests() {
+  await testDownload()
+  await testUpload()
+  await testPing()
+}
+onMounted(() => {
+  runTests()
+})
+</script>