olivier/stupid-simple-network-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace ping dots with labeled UP/DOWN pills in topology view

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Olivier
2026-05-23 07:36:48 +02:00
parent be64727d48
commit c94d318cc3
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "network-topology",
"version": "1.1.0",
"version": "1.1.1",
"scripts": {
"dev": "vite",
"build": "vite build",
frontend/src/components/TopologyGraph.vue
+7 -10
View File
@@ -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 {