diff --git a/lib/towerops_web/live/site_live/show.html.heex b/lib/towerops_web/live/site_live/show.html.heex index 6b473ae7..f897d710 100644 --- a/lib/towerops_web/live/site_live/show.html.heex +++ b/lib/towerops_web/live/site_live/show.html.heex @@ -22,167 +22,319 @@ - <%!-- Metrics Bar --%> -
- - <.icon name="hero-server" class="h-3.5 w-3.5" /> - {@site_summary.device_count} {if @site_summary.device_count == 1, - do: "device", - else: "devices"} - - <%= if @site_summary.devices_down > 0 do %> - - - {@site_summary.devices_down} down - - <% end %> - <%= if @site_summary.alert_count > 0 do %> - - <.icon name="hero-bell-alert" class="h-3.5 w-3.5" /> - {@site_summary.alert_count} {if @site_summary.alert_count == 1, - do: "alert", - else: "alerts"} - - <% end %> - <%= if @site_summary.subscribers do %> - - <.icon name="hero-users" class="h-3.5 w-3.5" /> - {@site_summary.subscribers} subscribers - - <%= if @site_summary.mrr do %> - - <.icon name="hero-currency-dollar" class="h-3.5 w-3.5" /> - {format_mrr(@site_summary.mrr)}/mo MRR - - <% end %> - <% end %> + <%!-- Summary Stat Cards --%> +
+ <%!-- Subscribers --%> +
+
+
+ <.icon name="hero-users" class="h-4 w-4" /> + Subscribers +
+

+ {format_number(@site_summary.subscribers || 0)} +

+
+
+ <%!-- MRR --%> +
+
+
+ <.icon name="hero-currency-dollar" class="h-4 w-4" /> + Monthly Revenue +
+

+ {format_mrr(@site_summary.mrr)} +

+
+
+ <%!-- Device Count --%> +
+
+
+ <.icon name="hero-server" class="h-4 w-4" /> + Devices +
+

+ {format_number(@site_summary.device_count)} + <%= if @site_summary.devices_down > 0 do %> + + ({@site_summary.devices_down} down) + + <% end %> +

+
+
+ <%!-- Active Alerts --%> +
+
+
+ <.icon name="hero-bell-alert" class="h-4 w-4" /> + Active Alerts +
+

+ {length(@active_alerts)} +

+
+
-
-
-

Site Details

-
- <%= if @site.parent_site do %> -
-
Parent Site
-
- <.link - navigate={~p"/sites/#{@site.parent_site.id}"} - class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" - > - {@site.parent_site.name} - -
-
- <% end %> - <%= if @site.location do %> -
-
Location
-
{@site.location}
-
- <% end %> - <%= if @site.description do %> -
-
Description
-
{@site.description}
-
- <% end %> -
- - <%= if @site.child_sites != [] do %> -
-

Child Sites

-
    -
  • - <.link - navigate={~p"/sites/#{child.id}"} - class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300" - > - {child.name} - -
    • -
+ <%!-- QoE Summary Card --%> + <%= if @qoe_summary do %> +
+
+
+

Preseem QoE Score

+

+ {if @qoe_summary[:score], do: :erlang.float_to_binary(@qoe_summary[:score], decimals: 1), else: "—"} +

- <% end %> + <%= if @qoe_summary[:capacity_score] do %> +
+

Capacity

+
+
+
+
+

{@qoe_summary[:capacity_score]}%

+
+
+ <% end %> +
+ <% end %> -
-
-

Device

- <.button - navigate={~p"/devices/new?site_id=#{@site.id}"} - variant="primary" - > - <.icon name="hero-plus" class="h-4 w-4" /> Add Device - +
+ <%!-- Left Column --%> +
+ <%!-- Site Details --%> +
+
+

Site Details

+
+ <%= if @site.parent_site do %> +
+
Parent Site
+
+ <.link + navigate={~p"/sites/#{@site.parent_site.id}"} + class="link link-primary text-sm" + > + {@site.parent_site.name} + +
+
+ <% end %> + <%= if @site.location do %> +
+
Location
+
{@site.location}
+
+ <% end %> + <%= if @site.description do %> +
+
Description
+
{@site.description}
+
+ <% end %> +
+ <%= if @site.child_sites != [] do %> +
+

Child Sites

+
    +
  • + <.link navigate={~p"/sites/#{child.id}"} class="link link-primary text-sm"> + {child.name} + +
    • +
+
+ <% end %> +
- <%= if @device == [] do %> -
- <.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" /> -

- Add your first device -

-

- Start monitoring by adding network devices to this site. -

-

- You can add routers, switches, servers, or any device with an IP address. -

-
+ <%!-- Active Alerts Panel --%> +
+
+

+ <.icon name="hero-bell-alert" class="h-5 w-5" /> + Active Alerts + <%= if @active_alerts != [] do %> + {length(@active_alerts)} + <% end %> +

+ <%= if @active_alerts == [] do %> +
+ <.icon name="hero-check-circle" class="mx-auto h-8 w-8 text-green-500" /> +

No active alerts

+
+ <% else %> +
+
+ <.icon + name={insight_urgency_icon(alert.severity)} + class={["h-5 w-5 mt-0.5 shrink-0", insight_urgency_class(alert.severity)]} + /> +
+

{alert.message}

+

+ {time_ago(alert.triggered_at)} +

+
+
+
+ <% end %> +
+
+ + <%!-- Recent Config Changes Panel --%> +
+
+

+ <.icon name="hero-document-text" class="h-5 w-5" /> + Recent Config Changes +

+ <%= if @config_changes == [] do %> +
+

No config changes in the last 30 days

+
+ <% else %> +
+
+
+

+ {change.device_name || "Unknown device"} +

+

+ {time_ago(change.detected_at)} +

+
+ + {change_size_label(change.diff_size || 0)} + +
+
+ <% end %> +
+
+
+ + <%!-- Right Column --%> +
+ <%!-- Device Health Grid --%> +
+
+
+

+ <.icon name="hero-server" class="h-5 w-5" /> + Device Health +

<.button navigate={~p"/devices/new?site_id=#{@site.id}"} variant="primary" + class="btn-sm" > - <.icon name="hero-plus" class="h-5 w-5" /> Add Device + <.icon name="hero-plus" class="h-4 w-4" /> Add
-
- <% else %> -
- <.link - :for={eq <- @device} - navigate={~p"/devices/#{eq.id}"} - class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-white/20 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer" - > -
-

{eq.name}

-

{eq.ip_address}

+ <%= if @device == [] do %> +
+ <.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" /> +

+ Add your first device +

+

+ Start monitoring by adding network devices to this site. +

+
+ <.button navigate={~p"/devices/new?site_id=#{@site.id}"} variant="primary"> + <.icon name="hero-plus" class="h-5 w-5" /> Add Device + +
- - {eq.status |> to_string() |> String.upcase()} - - + <% else %> +
+ <.link + :for={eq <- @device} + navigate={~p"/devices/#{eq.id}"} + class="flex items-center gap-3 rounded-lg border border-base-300 p-3 hover:bg-base-200 transition-colors cursor-pointer" + > + +
+

{eq.name}

+

{eq.ip_address}

+
+ + {format_response_time(@response_times[eq.id])} + + +
+ <% end %> +
+
+ + <%!-- Insights Panel --%> + <%= if @insights != [] do %> +
+
+

+ <.icon name="hero-light-bulb" class="h-5 w-5" /> + Preseem Insights +

+
+
+ <.icon + name={insight_urgency_icon(insight.urgency)} + class={["h-5 w-5 mt-0.5 shrink-0", insight_urgency_class(insight.urgency)]} + /> +
+

{insight.title}

+ <%= if insight.description do %> +

+ {insight.description} +

+ <% end %> +
+
+
+
<% end %>
- + + <%!-- Latency Chart --%> <%= if @latency_chart_data do %> -
-
-
-

- Site Latency - Last 24 Hours +
+
+
+

+ <.icon name="hero-chart-bar" class="h-5 w-5" /> + Site Latency — Last 24 Hours

-
-
-
- +
+
+ +