towerops/lib/towerops_web/live/alert_live/index.html.heex

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  active_page="alerts"
  unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
>
  <%!-- Compact header --%>
  <div class="flex items-center justify-between mb-1">
    <div class="flex items-center gap-3">
      <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">{t("Alerts")}</h1>
      <span class="rounded px-2 py-0.5 text-xs font-medium bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/20 dark:text-cerulean-400">
        {t("Experimental")}
      </span>
    </div>
  </div>
  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-4">
    {t("Monitor and triage network alerts, grouped by site with subscriber impact.")}
  </p>

  <%!-- Filter pills --%>
  <div class="flex items-center gap-2 mb-3 flex-wrap">
    <.link
      patch={~p"/alerts?filter=unresolved&sort=#{@sort_by}"}
      class={[
        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
        @filter == "unresolved" &&
          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
        @filter != "unresolved" &&
          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
      ]}
    >
      {t("Unresolved")}
      <span class={[
        "rounded-full px-1.5 py-0.5 text-xs",
        @filter == "unresolved" && "bg-white/20 dark:bg-cool-steel-900/30",
        @filter != "unresolved" && "bg-cool-steel-200 dark:bg-cool-steel-700"
      ]}>
        {@counts.unresolved}
      </span>
    </.link>
    <.link
      patch={~p"/alerts?filter=critical&sort=#{@sort_by}"}
      class={[
        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
        @filter == "critical" && "bg-sweet-salmon-600 text-white",
        @filter != "critical" &&
          "bg-sweet-salmon-50 text-sweet-salmon-700 hover:bg-sweet-salmon-100 dark:bg-sweet-salmon-900/20 dark:text-sweet-salmon-400 dark:hover:bg-sweet-salmon-900/40"
      ]}
    >
      {t("Critical")}
      <span class={[
        "rounded-full px-1.5 py-0.5 text-xs",
        @filter == "critical" && "bg-white/20",
        @filter != "critical" && "bg-sweet-salmon-100 dark:bg-sweet-salmon-900/40"
      ]}>
        {@counts.critical}
      </span>
    </.link>
    <.link
      patch={~p"/alerts?filter=all&sort=#{@sort_by}"}
      class={[
        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
        @filter == "all" && "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
        @filter != "all" &&
          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
      ]}
    >
      {t("All")}
      <span class={[
        "rounded-full px-1.5 py-0.5 text-xs",
        @filter == "all" && "bg-white/20 dark:bg-cool-steel-900/30",
        @filter != "all" && "bg-cool-steel-200 dark:bg-cool-steel-700"
      ]}>
        {@counts.all}
      </span>
    </.link>
    <.link
      patch={~p"/alerts?filter=resolved&sort=#{@sort_by}"}
      class={[
        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
        @filter == "resolved" &&
          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
        @filter != "resolved" &&
          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
      ]}
    >
      {t("Resolved")}
      <span class={[
        "rounded-full px-1.5 py-0.5 text-xs",
        @filter == "resolved" && "bg-white/20 dark:bg-cool-steel-900/30",
        @filter != "resolved" && "bg-cool-steel-200 dark:bg-cool-steel-700"
      ]}>
        {@counts.resolved}
      </span>
    </.link>

    <span class="text-cool-steel-300 dark:text-cool-steel-600 mx-1">|</span>

    <%!-- Sort controls --%>
    <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">{t("Sort")}:</span>
    <.link
      patch={~p"/alerts?filter=#{@filter}&sort=severity"}
      class={[
        "text-xs px-2 py-1 rounded transition-colors",
        @sort_by == "severity" &&
          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300 font-medium",
        @sort_by != "severity" &&
          "text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
      ]}
    >
      {t("Severity")}
    </.link>
    <.link
      patch={~p"/alerts?filter=#{@filter}&sort=age"}
      class={[
        "text-xs px-2 py-1 rounded transition-colors",
        @sort_by == "age" &&
          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300 font-medium",
        @sort_by != "age" &&
          "text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
      ]}
    >
      {t("Oldest")}
    </.link>
    <.link
      patch={~p"/alerts?filter=#{@filter}&sort=impact"}
      class={[
        "text-xs px-2 py-1 rounded transition-colors",
        @sort_by == "impact" &&
          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300 font-medium",
        @sort_by != "impact" &&
          "text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
      ]}
    >
      {t("Impact")}
    </.link>
  </div>

  <%!-- Bulk actions bar --%>
  <div
    :if={MapSet.size(@selected_alerts) > 0}
    class="flex items-center gap-3 mb-3 px-3 py-2 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800"
  >
    <span class="text-xs font-medium text-cerulean-800 dark:text-cerulean-300">
      {MapSet.size(@selected_alerts)} {t("selected")}
    </span>
    <.button type="button" phx-click="bulk_acknowledge" variant="primary">
      <.icon name="hero-check" class="h-3.5 w-3.5" /> {t("Ack Selected")}
    </.button>
    <.button type="button" phx-click="bulk_resolve" data-confirm={t("Resolve selected alerts?")}>
      <.icon name="hero-check-circle" class="h-3.5 w-3.5" /> {t("Resolve Selected")}
    </.button>
    <button
      type="button"
      phx-click="select_none"
      class="text-xs text-cerulean-600 dark:text-cerulean-400 hover:underline ml-auto"
    >
      {t("Clear selection")}
    </button>
  </div>

  <%= if Enum.empty?(@alerts) do %>
    <div class="flex items-center justify-center py-16">
      <div class="text-center">
        <div class="inline-flex items-center justify-center rounded-full bg-green-100 dark:bg-green-900/40 p-4 mb-4">
          <.icon
            name="hero-check-circle-solid"
            class="h-12 w-12 text-green-500 dark:text-green-400"
          />
        </div>
        <h3 class="text-lg font-semibold text-green-700 dark:text-green-400">
          {t("All Clear!")}
        </h3>
        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 max-w-sm">
          <%= case @filter do %>
            <% "unresolved" -> %>
              {t("No active alerts. Your network is looking good!")}
            <% "critical" -> %>
              {t("No critical alerts. Nice work keeping things healthy!")}
            <% "resolved" -> %>
              {t("No resolved alerts yet.")}
            <% _ -> %>
              {t("No active alerts. Your network is looking good!")}
          <% end %>
        </p>
      </div>
    </div>
  <% else %>
    <%!-- Alert table --%>
    <div class="flow-root">
      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
          <table class="min-w-full">
            <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
              <tr>
                <th scope="col" class="py-2 pl-4 pr-2 w-8">
                  <button
                    type="button"
                    phx-click="select_all"
                    class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
                    title={t("Select all")}
                  >
                    <.icon name="hero-check-circle" class="h-4 w-4" />
                  </button>
                </th>
                <th scope="col" class="w-1 px-0 py-2"></th>
                <th
                  scope="col"
                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
                >
                  {t("Device")}
                </th>
                <th
                  scope="col"
                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
                >
                  {t("Site")}
                </th>
                <th
                  scope="col"
                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
                >
                  {t("Message")}
                </th>
                <th
                  scope="col"
                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
                >
                  {t("Duration")}
                </th>
                <th
                  scope="col"
                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
                >
                  {t("Impact")}
                </th>
                <th
                  scope="col"
                  class="px-3 py-2 text-right text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
                >
                  {t("Actions")}
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5">
              <%= for alert <- @alerts do %>
                <tr
                  class={[
                    "hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/30 transition-colors cursor-pointer",
                    MapSet.member?(@selected_alerts, alert.id) &&
                      "bg-cerulean-50/50 dark:bg-cerulean-900/10",
                    rem(Enum.find_index(@alerts, &(&1.id == alert.id)) || 0, 2) == 1 &&
                      "bg-cool-steel-50/40 dark:bg-cool-steel-800/20"
                  ]}
                  phx-click="toggle_alert"
                  phx-value-id={alert.id}
                >
                  <%!-- Checkbox --%>
                  <td class="py-2 pl-4 pr-2" phx-click="toggle_select" phx-value-id={alert.id}>
                    <div class={[
                      "h-4 w-4 rounded border flex items-center justify-center transition-colors",
                      MapSet.member?(@selected_alerts, alert.id) &&
                        "bg-cerulean-500 border-cerulean-500",
                      !MapSet.member?(@selected_alerts, alert.id) &&
                        "border-cool-steel-300 dark:border-cool-steel-600"
                    ]}>
                      <.icon
                        :if={MapSet.member?(@selected_alerts, alert.id)}
                        name="hero-check"
                        class="h-3 w-3 text-white"
                      />
                    </div>
                  </td>

                  <%!-- Severity bar --%>
                  <td class="px-0 py-0 w-1">
                    <div class={"h-full w-1 min-h-[2.5rem] #{severity_badge_class(alert)} rounded-sm"} />
                  </td>

                  <%!-- Device --%>
                  <td class="px-3 py-2 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                      <span class={[
                        "inline-flex items-center gap-1 text-xs font-medium px-1.5 py-0.5 rounded",
                        alert.alert_type == "device_down" && is_nil(alert.resolved_at) &&
                          "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/40 dark:text-sweet-salmon-300",
                        alert.alert_type == "device_down" && alert.resolved_at &&
                          "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400",
                        alert.alert_type == "device_up" &&
                          "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300"
                      ]}>
                        <%= if alert.alert_type == "device_down" do %>
                          <.icon name="hero-arrow-down" class="h-3 w-3" /> DOWN
                        <% else %>
                          <.icon name="hero-arrow-up" class="h-3 w-3" /> UP
                        <% end %>
                      </span>
                      <.link
                        navigate={~p"/devices/#{alert.device.id}"}
                        class="text-sm font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
                      >
                        {alert.device.name}
                      </.link>
                      <span class="text-xs font-mono text-cool-steel-500 dark:text-cool-steel-400">
                        {alert.device.ip_address}
                      </span>
                    </div>
                  </td>

                  <%!-- Site --%>
                  <td class="px-3 py-2 whitespace-nowrap text-xs text-cool-steel-600 dark:text-cool-steel-400">
                    <%= if alert.device.site do %>
                      <.link
                        navigate={~p"/sites/#{alert.device.site.id}"}
                        class="hover:text-cerulean-600 dark:hover:text-cerulean-400"
                      >
                        {alert.device.site.name}
                      </.link>
                    <% else %>
                      <span class="text-cool-steel-400 dark:text-cool-steel-600">—</span>
                    <% end %>
                  </td>

                  <%!-- Message --%>
                  <td
                    class="px-3 py-2 text-xs text-cool-steel-600 dark:text-cool-steel-400 max-w-xs truncate"
                    title={alert.message}
                  >
                    {alert.message || "—"}
                  </td>

                  <%!-- Duration --%>
                  <td class="px-3 py-2 whitespace-nowrap">
                    <span class={[
                      "text-xs font-mono",
                      severity_color(alert) == "red" &&
                        "text-sweet-salmon-600 dark:text-sweet-salmon-400 font-medium",
                      severity_color(alert) == "orange" && "text-orange-600 dark:text-orange-400",
                      severity_color(alert) not in ["red", "orange"] &&
                        "text-cool-steel-600 dark:text-cool-steel-400"
                    ]}>
                      {duration_text(alert)}
                    </span>
                  </td>

                  <%!-- Impact --%>
                  <td class="px-3 py-2 whitespace-nowrap">
                    <%= if impact = impact_text(alert, @site_subscribers) do %>
                      <span class="inline-flex items-center gap-1 text-xs text-wheat-700 dark:text-wheat-400">
                        <.icon name="hero-users" class="h-3 w-3" />
                        {impact}
                      </span>
                    <% else %>
                      <span class="text-xs text-cool-steel-300 dark:text-cool-steel-600">—</span>
                    <% end %>
                  </td>

                  <%!-- Actions --%>
                  <td class="px-3 py-2 whitespace-nowrap text-right">
                    <div class="flex items-center justify-end gap-1">
                      <%= if alert.acknowledged_at && is_nil(alert.resolved_at) do %>
                        <span class="text-xs text-cerulean-600 dark:text-cerulean-400 px-1.5 py-0.5 rounded bg-cerulean-50 dark:bg-cerulean-900/20">
                          Ack'd
                        </span>
                      <% end %>
                      <%= if alert.resolved_at do %>
                        <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400 px-1.5 py-0.5 rounded bg-cool-steel-100 dark:bg-cool-steel-800">
                          {t("Resolved")}
                        </span>
                      <% end %>
                      <%= if alert.alert_type == "device_down" && is_nil(alert.acknowledged_at) && is_nil(alert.resolved_at) do %>
                        <button
                          type="button"
                          phx-click="acknowledge"
                          phx-value-id={alert.id}
                          class="text-xs px-2 py-1 rounded bg-cerulean-100 text-cerulean-700 hover:bg-cerulean-200 dark:bg-cerulean-900/30 dark:text-cerulean-300 dark:hover:bg-cerulean-900/50 transition-colors"
                        >
                          Ack
                        </button>
                      <% end %>
                      <%= if is_nil(alert.resolved_at) do %>
                        <button
                          type="button"
                          phx-click="resolve"
                          phx-value-id={alert.id}
                          data-confirm={t("Resolve this alert?")}
                          class="text-xs px-2 py-1 rounded bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700 transition-colors"
                        >
                          Resolve
                        </button>
                      <% end %>
                    </div>
                  </td>
                </tr>

                <%!-- Expanded alert detail --%>
                <%= if @expanded_alert == alert.id do %>
                  <tr class="bg-cool-steel-50 dark:bg-cool-steel-800/40">
                    <td colspan="8" class="px-4 py-3">
                      <div class="flex gap-8 text-xs">
                        <%!-- Timeline --%>
                        <div class="flex-1">
                          <h4 class="font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
                            {t("Timeline")}
                          </h4>
                          <div class="space-y-1.5">
                            <div class="flex items-center gap-2">
                              <span class="inline-block h-2 w-2 rounded-full bg-sweet-salmon-500 flex-shrink-0">
                              </span>
                              <span class="text-cool-steel-500 dark:text-cool-steel-400 w-20 flex-shrink-0">
                                {t("Triggered")}
                              </span>
                              <span class="font-mono text-cool-steel-900 dark:text-white">
                                {ToweropsWeb.TimeHelpers.format_iso8601(
                                  alert.triggered_at,
                                  @timezone
                                )}
                              </span>
                            </div>
                            <%= if alert.acknowledged_at do %>
                              <div class="flex items-center gap-2">
                                <span class="inline-block h-2 w-2 rounded-full bg-cerulean-500 flex-shrink-0">
                                </span>
                                <span class="text-cool-steel-500 dark:text-cool-steel-400 w-20 flex-shrink-0">
                                  {t("Ack'd")}
                                </span>
                                <span class="font-mono text-cool-steel-900 dark:text-white">
                                  {ToweropsWeb.TimeHelpers.format_iso8601(
                                    alert.acknowledged_at,
                                    @timezone
                                  )}
                                </span>
                                <%= if alert.acknowledged_by do %>
                                  <span class="text-cool-steel-500 dark:text-cool-steel-400">
                                    by {alert.acknowledged_by.email}
                                  </span>
                                <% end %>
                              </div>
                            <% end %>
                            <%= if alert.resolved_at do %>
                              <div class="flex items-center gap-2">
                                <span class="inline-block h-2 w-2 rounded-full bg-green-500 flex-shrink-0">
                                </span>
                                <span class="text-cool-steel-500 dark:text-cool-steel-400 w-20 flex-shrink-0">
                                  {t("Resolved")}
                                </span>
                                <span class="font-mono text-cool-steel-900 dark:text-white">
                                  {ToweropsWeb.TimeHelpers.format_iso8601(
                                    alert.resolved_at,
                                    @timezone
                                  )}
                                </span>
                              </div>
                            <% end %>
                          </div>
                        </div>

                        <%!-- Impact details --%>
                        <%= if alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] && alert.gaiia_impact["total_subscribers"] > 0 do %>
                          <div>
                            <h4 class="font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
                              {t("Impact")}
                            </h4>
                            <div class="space-y-1">
                              <div class="flex items-center gap-2">
                                <.icon name="hero-users" class="h-3.5 w-3.5 text-wheat-500" />
                                <span class="text-cool-steel-900 dark:text-white font-medium">
                                  {format_number(alert.gaiia_impact["total_subscribers"])} subscribers affected
                                </span>
                              </div>
                              <%!-- Financial data: role-gated --%>
                              <%= if @can_view_financials && alert.gaiia_impact["total_mrr"] && alert.gaiia_impact["total_mrr"] != "0" do %>
                                <div class="flex items-center gap-2">
                                  <.icon
                                    name="hero-currency-dollar"
                                    class="h-3.5 w-3.5 text-wheat-500"
                                  />
                                  <span class="text-cool-steel-900 dark:text-white font-medium">
                                    ${alert.gaiia_impact["total_mrr"]}/mo at risk
                                  </span>
                                </div>
                              <% end %>
                            </div>
                          </div>
                        <% end %>

                        <%!-- Message --%>
                        <%= if alert.message do %>
                          <div class="flex-1">
                            <h4 class="font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
                              {t("Details")}
                            </h4>
                            <p class="text-cool-steel-600 dark:text-cool-steel-400">
                              {alert.message}
                            </p>
                          </div>
                        <% end %>
                      </div>
                    </td>
                  </tr>
                <% end %>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  <% end %>
</Layouts.authenticated>