Packages

raxol

0.6.0
2.6.0 2.4.0 2.3.0 2.2.0 2.1.0 2.0.1 2.0.0 1.5.4 1.4.1 1.0.1 1.0.0 0.9.0 0.6.0 0.5.0 0.4.0 0.3.0 0.2.0 0.1.0

Multi-surface application runtime for Elixir. One TEA module renders to terminal, browser (LiveView), SSH, and MCP (agents). 30+ widgets, flexbox + CSS grid, AI agent runtime, distributed swarm with CRDTs, time-travel debugging, session recording, sandboxed REPL, and agentic commerce.

HexDocs

Current section

Files

Jump to
Readme
18 Versions
40 Dependencies
2 Dependants
Files
Activity
raxol lib raxol_web live monitoring_live.html.heex
Raw

lib/raxol_web/live/monitoring_live.html.heex 

<div class="monitoring-container">

  <div class="monitoring-header">

    <h1 class="monitoring-title">System Monitoring Dashboard</h1>

    <div class="monitoring-controls">

      <button phx-click="refresh" class="refresh-button">

        Refresh

      </button>

      <div class="last-updated">

        Last updated: <%= @metrics.last_updated %>

      </div>

    </div>

  </div>



  <div class="metrics-grid">

    <div class="metric-card">

      <h3 class="metric-title">CPU Usage</h3>

      <div class="metric-value"><%= @metrics.cpu_usage %>%</div>

      <div class="metric-gauge">

        <div class="gauge-fill" style={"width: #{@metrics.cpu_usage}%"}>

        </div>

      </div>

    </div>



    <div class="metric-card">

      <h3 class="metric-title">Memory Usage</h3>

      <div class="metric-value"><%= @metrics.memory_usage %>%</div>

      <div class="metric-gauge">

        <div class="gauge-fill" style={"width: #{@metrics.memory_usage}%"}>

        </div>

      </div>

    </div>



    <div class="metric-card">

      <h3 class="metric-title">Active Sessions</h3>

      <div class="metric-value"><%= @metrics.active_sessions %></div>

      <div class="metric-gauge">

        <div class="gauge-fill" style={"width: #{@metrics.active_sessions * 10}%"}>

        </div>

      </div>

    </div>



    <div class="metric-card">

      <h3 class="metric-title">Network Traffic</h3>

      <div class="metric-value"><%= @metrics.network_traffic %> MB/s</div>

      <div class="metric-gauge">

        <div class="gauge-fill" style={"width: #{@metrics.network_traffic * 5}%"}>

        </div>

      </div>

    </div>



    <div class="metric-card">

      <h3 class="metric-title">Database Connections</h3>

      <div class="metric-value"><%= @metrics.database_connections %></div>

      <div class="metric-trend">

        <span class="trend-indicator">→</span>

        <span class="trend-value">stable</span>

      </div>

    </div>

  </div>



  <div class="charts-section">

    <div class="chart-card">

      <h3 class="chart-title">Response Times (ms)</h3>

      <div class="chart-container">

        <canvas id="responseTimeChart" phx-hook="LineChart"></canvas>

      </div>

    </div>



    <div class="chart-card">

      <h3 class="chart-title">Error Rates</h3>

      <div class="chart-container">

        <canvas id="errorRateChart" phx-hook="BarChart"></canvas>

      </div>

    </div>

  </div>



  <div class="alerts-section">

    <h3 class="section-title">Recent Alerts</h3>

    <div class="alerts-list">

      <div class="alert-item warning">

        <div class="alert-icon">⚠️</div>

        <div class="alert-content">

          <div class="alert-title">High CPU Usage</div>

          <div class="alert-time">2 minutes ago</div>

        </div>

      </div>

      <div class="alert-item info">

        <div class="alert-icon">ℹ️</div>

        <div class="alert-content">

          <div class="alert-title">New Session Started</div>

          <div class="alert-time">5 minutes ago</div>

        </div>

      </div>

    </div>

  </div>

</div>