Prismatic Perimeter Web

Overview

Prismatic Perimeter Web provides the LiveView-based dashboard for External Attack Surface Management. It presents security ratings, asset inventories, compliance assessments, and risk trend visualizations through real-time interactive interfaces that update automatically as new intelligence is collected. The dashboard enables security teams to monitor their organization's external attack surface without manual refresh cycles.

The interface is structured around four primary views: the overview dashboard with summary metrics and grade displays, the asset inventory with filtering, sorting, and drill-down capabilities, the compliance assessment view with framework-level and article-level detail, and the advanced EASM view for power users requiring full analytical access. Each view renders server-side through Phoenix LiveView, delivering a rich interactive experience without the complexity of a client-side JavaScript framework.

All visualization components are built with TailwindCSS and Flowbite, following the platform's design system for consistent styling across dashboard applications. Security rating gauges, asset topology maps, compliance heatmaps, and risk trend charts are server-rendered with minimal JavaScript, ensuring fast load times and accessibility compliance.

Architecture

Prismatic Perimeter Core (Business Logic)
        | PubSub Events
Perimeter Web LiveView Processes
        | WebSocket Push
Browser Dashboard (Server-Rendered HTML)
        |
TailwindCSS + Flowbite Components + Chart.js

Each dashboard session runs as an independent LiveView process under OTP supervision. Real-time updates flow through PubSub subscriptions, so security rating changes, new asset discoveries, and compliance status updates appear instantly across all connected operator sessions.

The server-side rendering architecture provides critical security advantages for an EASM dashboard. No sensitive security rating data needs to be serialized to JSON and sent to a client-side framework -- the server computes the HTML diff and pushes only changed bytes over the WebSocket connection, minimizing the risk of intelligence data exposure in client-side state.

Key Modules

Key Features

Dashboard Views

The overview dashboard provides immediate situational awareness with the security grade prominently displayed alongside key metrics:

defmodule PrismaticPerimeterWeb.DashboardLive do
  use PrismaticPerimeterWeb, :live_view

  @impl true
  def mount(_params, session, socket) do
    if connected?(socket) do
      PrismaticPerimeter.subscribe(:rating_updates)
      PrismaticPerimeter.subscribe(:asset_discoveries)
      PrismaticPerimeter.subscribe(:compliance_changes)
    end

    {:ok, assign(socket,
      rating: load_current_rating(),
      assets: load_asset_summary(),
      compliance: load_compliance_status(),
      trends: load_rating_trends()
    )}
  end

  @impl true
  def handle_info({:rating_updated, new_rating}, socket) do
    {:noreply, assign(socket,
      rating: new_rating,
      trends: update_trends(socket.assigns.trends, new_rating)
    )}
  end

  @impl true
  def handle_info({:asset_discovered, asset}, socket) do
    assets = update_asset_summary(socket.assigns.assets, asset)
    {:noreply, assign(socket, assets: assets)}
  end
end

• Overview dashboard with security grade gauge and key metrics summary
• Asset inventory with multi-criteria filtering, sorting, and bulk operations
• Compliance assessment detail views with article-level gap analysis
• Security rating history with trend lines and trajectory projections

Real-Time Updates

• LiveView WebSocket connections for sub-second update delivery
• Real-time asset discovery notifications as scanners complete
• Live security rating changes reflected immediately on grade gauge
• Compliance status change alerts with severity indicators

Visualization Components

• Security rating gauge with animated grade transitions and numeric score display
• Asset topology map showing infrastructure relationships and service dependencies
• Compliance framework coverage heatmap with drill-down to article-level detail
• Risk trend charts with configurable time windows and overlay comparison

Compliance Assessment Views

The compliance view provides hierarchical detail from framework-level overview down to individual article requirements:

Asset Inventory Filtering

The asset inventory view supports multi-criteria filtering that enables security teams to quickly isolate specific asset categories, risk levels, or discovery sources. Filter state is maintained in the LiveView socket assigns, and filter changes trigger server-side re-query with immediate DOM updates through WebSocket push. The filtering engine supports compound conditions combining asset type, risk severity, discovery date range, and scanner source:

defmodule PrismaticPerimeterWeb.AssetsLive do
  use PrismaticPerimeterWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    if connected?(socket), do: PrismaticPerimeter.subscribe(:asset_discoveries)

    {:ok, assign(socket,
      assets: PrismaticPerimeter.list_assets(limit: 50),
      filters: %{type: :all, severity: :all, source: :all},
      sort_by: :discovered_at,
      sort_order: :desc,
      page: 1
    )}
  end

  @impl true
  def handle_event("apply_filters", params, socket) do
    filters = %{
      type: parse_filter(params["type"], :all),
      severity: parse_filter(params["severity"], :all),
      source: parse_filter(params["source"], :all)
    }
    assets = PrismaticPerimeter.filter_assets(filters, limit: 50, page: 1)
    {:noreply, assign(socket, assets: assets, filters: filters, page: 1)}
  end
end

Security Rating Grade Scale

The security rating gauge translates numeric scores into letter grades following an industry-standard scale that enables quick comparative assessment across monitored organizations:

Grade transitions are animated using CSS transitions on the gauge component, providing visual feedback when security posture changes. The numeric score, letter grade, and industry percentile ranking are all displayed simultaneously to give operators both absolute and relative context for the assessment.

Routes

Usage

# LiveView mount subscribes to real-time events
def mount(_params, session, socket) do
  if connected?(socket) do
    PrismaticPerimeter.subscribe(:rating_updates)
    PrismaticPerimeter.subscribe(:asset_discoveries)
    PrismaticPerimeter.subscribe(:compliance_changes)
  end

  {:ok, assign(socket,
    rating: load_current_rating(),
    assets: load_asset_summary(),
    compliance: load_compliance_status()
  )}
end

# Handle asset filtering
def handle_event("filter_assets", %{"type" => type, "status" => status}, socket) do
  filtered = PrismaticPerimeter.filter_assets(type: type, status: status)
  {:noreply, assign(socket, assets: filtered)}
end

# Handle compliance drill-down
def handle_event("show_article", %{"framework" => fw, "article" => art}, socket) do
  detail = PrismaticPerimeterCore.article_detail(fw, art)
  {:noreply, assign(socket, article_detail: detail, show_detail: true)}
end

NABLA Compliance

Testing

LiveView tests verify component rendering, PubSub event handling, and WebSocket state management across all four dashboard views. Route tests verify authentication and RBAC enforcement on all perimeter paths. Component tests verify correct rendering of security rating gauges, compliance heatmaps, and risk trend charts with known data fixtures.

Integration tests exercise the full pipeline from Prismatic Perimeter Core rating computation through PubSub delivery to LiveView DOM updates. Performance tests verify that dashboard mount time stays under 150ms and event processing under 50ms.

Integration Points

Performance

Telemetry events: [:prismatic, :perimeter_web, :page_load], [:prismatic, :perimeter_web, :event_processed], [:prismatic, :perimeter_web, :compliance_viewed].

Related Resources

• Prismatic Hawkeye Web -- Sibling dashboard for visitor intelligence, sharing design patterns
• Prismatic IR PVM Web -- Incident response dashboard with similar architecture
• Elixir Architect -- Designs the OTP process topology for LiveView dashboard sessions and PubSub event handling
• API Design Specialist Agent -- Ensures dashboard data interfaces follow consistent API patterns
• Alert Management Specialist -- Manages real-time alert notification delivery to connected dashboard sessions
• Real-Time Monitoring -- LiveView WebSocket connections delivering sub-second security rating and asset discovery updates
• Telemetry Integration -- Dashboard performance metrics including mount time, WebSocket latency, and DOM diff size
• Quality Gates -- TailwindCSS-first design system enforcement and component accessibility compliance

Connect & Contribute

Created by Tomáš Korcak (korczis) | Open Source under GHL

• GitHub | GitLab | LinkedIn | Contact
• Developer Portal | Architecture | Meet the Creator