gigafibre-fsm/apps/field/src/pages/DiagnosticPage.vue

<template>
  <q-page padding>
    <div class="text-h6 q-mb-md">Diagnostic réseau</div>

    <!-- Speed test -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-subtitle1 q-mb-sm">Test de vitesse</div>
        <div class="row q-gutter-md q-mb-sm">
          <div class="col text-center">
            <div class="text-h4 text-primary">{{ speedTest.downloadSpeed.value ?? '—' }}</div>
            <div class="text-caption">Mbps (API)</div>
          </div>
          <div class="col text-center">
            <div class="text-h4 text-secondary">{{ speedTest.latency.value ?? '—' }}</div>
            <div class="text-caption">ms latence</div>
          </div>
        </div>
        <q-btn color="primary" icon="speed" label="Lancer le test" :loading="speedTest.running.value"
          @click="speedTest.runSpeedTest()" class="full-width" />
        <div v-if="speedTest.error.value" class="text-negative text-caption q-mt-xs">{{ speedTest.error.value }}</div>
      </q-card-section>
    </q-card>

    <!-- HTTP Resolve -->
    <q-card class="q-mb-md">
      <q-card-section>
        <div class="text-subtitle1 q-mb-sm">Résolution HTTP</div>
        <q-input v-model="resolveHost" label="Hostname (ex: google.ca)" outlined dense class="q-mb-sm"
          @keyup.enter="doResolve">
          <template v-slot:append>
            <q-btn flat dense icon="dns" @click="doResolve" />
          </template>
        </q-input>

        <!-- Quick hosts -->
        <div class="row q-gutter-xs q-mb-sm">
          <q-chip v-for="h in quickHosts" :key="h" dense clickable @click="resolveHost = h; doResolve()">{{ h }}</q-chip>
        </div>

        <!-- Results -->
        <div v-if="resolveResults.length > 0">
          <q-list dense separator>
            <q-item v-for="r in resolveResults" :key="r.host">
              <q-item-section avatar>
                <q-icon :name="r.status === 'ok' ? 'check_circle' : 'error'" :color="r.status === 'ok' ? 'positive' : 'negative'" />
              </q-item-section>
              <q-item-section>
                <q-item-label>{{ r.host }}</q-item-label>
                <q-item-label caption>
                  {{ r.status === 'ok' ? r.time + 'ms' : r.error }}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </q-card-section>
    </q-card>

    <!-- Batch check -->
    <q-card>
      <q-card-section>
        <div class="text-subtitle1 q-mb-sm">Check complet</div>
        <q-btn color="secondary" icon="fact_check" label="Tester tous les services" :loading="batchRunning"
          @click="runBatchCheck" class="full-width" />
        <div v-if="batchResults.length > 0" class="q-mt-sm">
          <q-list dense separator>
            <q-item v-for="r in batchResults" :key="r.host">
              <q-item-section avatar>
                <q-icon :name="r.status === 'ok' ? 'check_circle' : 'error'" :color="r.status === 'ok' ? 'positive' : 'negative'" />
              </q-item-section>
              <q-item-section>
                <q-item-label>{{ r.host }}</q-item-label>
                <q-item-label caption>{{ r.status === 'ok' ? r.time + 'ms' : r.error }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </q-card-section>
    </q-card>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'
import { useSpeedTest } from 'src/composables/useSpeedTest'

const speedTest = useSpeedTest()
const resolveHost = ref('')
const resolveResults = ref([])
const batchRunning = ref(false)
const batchResults = ref([])

// 1.1.1.1/cdn-cgi/trace instead of bare cloudflare.com — the bare host
// redirects 301 → www.cloudflare.com, doubling the handshake cost. The
// trace endpoint is 88 bytes, no redirect, canonical "internet is up" probe.
const quickHosts = ['google.ca', 'erp.gigafibre.ca', '1.1.1.1/cdn-cgi/trace', '8.8.8.8']
const batchHosts = [
  'erp.gigafibre.ca',
  'dispatch.gigafibre.ca',
  'auth.targo.ca',
  'id.gigafibre.ca',
  'oss.gigafibre.ca',
  'n8n.gigafibre.ca',
  'www.gigafibre.ca',
  'google.ca',
]

async function doResolve () {
  if (!resolveHost.value.trim()) return
  await speedTest.resolveHost(resolveHost.value.trim())
  if (speedTest.resolveResult.value) {
    // Prepend to results, avoid duplicates
    resolveResults.value = [
      speedTest.resolveResult.value,
      ...resolveResults.value.filter(r => r.host !== speedTest.resolveResult.value.host),
    ]
  }
}

async function runBatchCheck () {
  batchRunning.value = true
  batchResults.value = await speedTest.checkHosts(batchHosts)
  batchRunning.value = false
}
</script>