graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

color network map nodes by device status

Browse source 
green for online, yellow for unknown, red for offline. previously
nodes were colored by device type which didn't convey health state.
also remove agent last_seen_at display from device detail page since
the offline badge already communicates agent health.
This commit is contained in:
Graham McIntire 2026-02-11 15:41:50 -06:00
parent 92b4f0081a
commit 26bb3d5ca1
No known key found for this signature in database
3 changed files with 14 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/js/app.ts
View file

@ -658,7 +658,10 @@ const NetworkMap = {
selector: 'node',
style: {
'background-color': function(ele: any) {
return deviceColors[ele.data('type')] || deviceColors.unknown
const status = ele.data('status')
if (status === 'down') return '#ef4444' // red
if (status === 'unknown') return '#eab308' // yellow
return '#22c55e' // green (up/online)
},
'label': 'data(label)',
'color': isDark ? '#fff' : '#000',
@ -671,9 +674,10 @@ const NetworkMap = {
'height': 40,
'border-width': 2,
'border-color': function(ele: any) {
if (ele.data('status') === 'down') return '#ef4444'
if (ele.data('status') === 'unknown') return '#6b7280'
return deviceColors[ele.data('type')] || deviceColors.unknown
const status = ele.data('status')
if (status === 'down') return '#dc2626' // darker red
if (status === 'unknown') return '#ca8a04' // darker yellow
return '#16a34a' // darker green
}
}
},
@ -689,7 +693,6 @@ const NetworkMap = {
{
selector: 'node.down',
style: {
'border-color': '#ef4444',
'border-width': 3
}
},

13
lib/towerops_web/live/device_live/show.ex
View file

@ -618,19 +618,6 @@ defmodule ToweropsWeb.DeviceLive.Show do
format_duration(diff) <> " ago"
end
defp format_relative_time(nil), do: "never"
defp format_relative_time(datetime) do
diff = DateTime.diff(DateTime.utc_now(), datetime, :second)
cond do
diff < 60 -> "just now"
diff < 3600 -> "#{div(diff, 60)} min ago"
diff < 86_400 -> "#{div(diff, 3600)} hours ago"
true -> format_duration(diff) <> " ago"
end
end
defp format_event_type(event_type) do
event_type
|> String.replace("_", " ")

20
lib/towerops_web/live/network_map_live.html.heex
View file

@ -199,26 +199,18 @@
<div class="p-4 border-t border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-gray-900">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-6 text-xs">
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
<span class="text-gray-700 dark:text-gray-300">Router</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-purple-500"></div>
<span class="text-gray-700 dark:text-gray-300">Switch</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-gray-700 dark:text-gray-300">Wireless</span>
<span class="text-gray-700 dark:text-gray-300">Online</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-orange-500"></div>
<span class="text-gray-700 dark:text-gray-300">Server</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-gray-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<span class="text-gray-700 dark:text-gray-300">Unknown</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<span class="text-gray-700 dark:text-gray-300">Offline</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 rounded-full border-2 border-dashed border-gray-400"></div>
<span class="text-gray-700 dark:text-gray-300">Discovered (Not Added)</span>