From c94d318cc3bc3e0f380ccd32e136a95932e75c1f Mon Sep 17 00:00:00 2001
From: Olivier <olivier@raspot.in>
Date: Sat, 23 May 2026 07:36:48 +0200
Subject: [PATCH] feat: replace ping dots with labeled UP/DOWN pills in
 topology view

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/package.json                     |  2 +-
 frontend/src/components/TopologyGraph.vue | 17 +++++++----------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 299d153..df8664b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "network-topology",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/frontend/src/components/TopologyGraph.vue b/frontend/src/components/TopologyGraph.vue
index 8733579..26804b9 100644
--- a/frontend/src/components/TopologyGraph.vue
+++ b/frontend/src/components/TopologyGraph.vue
@@ -33,7 +33,7 @@
               </div>
             </div>
             <a v-if="d.url" :href="d.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
-            <span v-if="pingStatus[d.id]" class="ping-dot" :class="'ping-' + pingStatus[d.id]" :title="pingStatus[d.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+            <span v-if="pingStatus[d.id]" class="chip-tag" :class="pingStatus[d.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[d.id] === 'up' ? 'UP' : 'DOWN' }}</span>
           </div>
         </div>
       </div>
@@ -54,7 +54,7 @@
               </div>
             </div>
             <a v-if="d.url" :href="d.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
-            <span v-if="pingStatus[d.id]" class="ping-dot" :class="'ping-' + pingStatus[d.id]" :title="pingStatus[d.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+            <span v-if="pingStatus[d.id]" class="chip-tag" :class="pingStatus[d.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[d.id] === 'up' ? 'UP' : 'DOWN' }}</span>
           </div>
         </div>
       </div>
@@ -100,7 +100,7 @@
               </div>
             </div>
             <div class="chip-tags">
-              <span v-if="pingStatus[item.device.id]" class="ping-dot" :class="'ping-' + pingStatus[item.device.id]" :title="pingStatus[item.device.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+              <span v-if="pingStatus[item.device.id]" class="chip-tag" :class="pingStatus[item.device.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[item.device.id] === 'up' ? 'UP' : 'DOWN' }}</span>
               <a v-if="item.device.url" :href="item.device.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
               <span v-if="item.device.is_gateway" class="chip-tag tag-gw">{{ t('tagGw') }}</span>
               <span v-if="item.device.virt_type === 'lxc'" class="chip-tag tag-lxc">{{ t('tagLxc') }}</span>
@@ -140,7 +140,7 @@
               </div>
             </div>
             <a v-if="d.url" :href="d.url" target="_blank" rel="noreferrer noopener" class="chip-tag tag-link" :title="t('openWebUI')">{{ t('tagLink') }}</a>
-            <span v-if="pingStatus[d.id]" class="ping-dot" :class="'ping-' + pingStatus[d.id]" :title="pingStatus[d.id] === 'up' ? t('reachable') : t('unreachable')"></span>
+            <span v-if="pingStatus[d.id]" class="chip-tag" :class="pingStatus[d.id] === 'up' ? 'ping-up' : 'ping-down'">{{ pingStatus[d.id] === 'up' ? 'UP' : 'DOWN' }}</span>
           </div>
         </div>
       </div>
@@ -289,12 +289,9 @@ async function pingAll() {
 
 .ping-summary { font-size: 12px; color: var(--text-muted); }
 
-/* ── Dot ping ────────────────────────────────────────────────────────────── */
-.ping-dot {
-  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
-}
-.ping-up   { background: #22C55E; }
-.ping-down { background: #EF4444; }
+/* ── Pastilles ping ──────────────────────────────────────────────────────── */
+.ping-up   { background: #22C55E; color: #fff; }
+.ping-down { background: #EF4444; color: #fff; }
 
 /* ── Cartes spéciales (WAN + Passerelle) ─────────────────────────────────── */
 .special-row {