Packages

elixir_dashboard

0.2.0
0.2.0 0.1.0

A Phoenix LiveView performance monitoring dashboard for tracking slow endpoints and database queries during development.

HexDocs

Current section

Files

Jump to
Readme
2 Versions
7 Dependencies
Dependants
Files
Activity
elixir_dashboard lib elixir_dashboard_web controllers page_html home.html.heex
Raw

lib/elixir_dashboard_web/controllers/page_html/home.html.heex 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Elixir Dashboard - Performance Monitoring</title>

    <script src="https://cdn.tailwindcss.com">

    </script>

  </head>

  <body class="bg-gray-50">

    <div class="min-h-screen flex items-center justify-center px-4">

      <div class="max-w-2xl w-full">

        <!-- Dev Mode Banner -->

        <div class="mb-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg p-4 text-white shadow-lg">

          <div class="flex items-center justify-between">

            <div class="flex items-center">

              <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 20 20">

                <path

                  fill-rule="evenodd"

                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"

                  clip-rule="evenodd"

                />

              </svg>

              <div>

                <div class="font-bold">Demo Mode Active</div>

                <div class="text-sm text-purple-100">

                  Using real database with slow query endpoints for testing

                </div>

              </div>

            </div>

            <div class="bg-white bg-opacity-20 rounded px-3 py-1 text-sm font-mono">DEV</div>

          </div>

        </div>



        <div class="bg-white rounded-lg shadow-xl p-8">

          <h1 class="text-4xl font-bold text-gray-900 mb-4">

            Elixir Dashboard

          </h1>

          <p class="text-lg text-gray-600 mb-8">

            Performance monitoring for your Phoenix application

          </p>



          <div class="space-y-4">

            <a

              href="/dev/performance/endpoints"

              class="block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition text-center"

            >

              View Slow Endpoints

            </a>



            <a

              href="/dev/performance/queries"

              class="block bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition text-center"

            >

              View Slow Queries

            </a>



            <a

              href="/dev/dashboard"

              class="block bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition text-center"

            >

              Phoenix LiveDashboard

            </a>

          </div>



          <div class="mt-8 pt-6 border-t border-gray-200">

            <h2 class="text-lg font-semibold text-gray-900 mb-2">Features</h2>

            <ul class="list-disc list-inside text-gray-600 space-y-1">

              <li>Real-time monitoring of slow API endpoints (>100ms)</li>

              <li>Track slow SQL queries (>50ms)</li>

              <li>Correlate queries with their originating endpoints</li>

              <li>Auto-refresh every 5 seconds</li>

              <li>DETS-based persistent storage (survives restarts)</li>

            </ul>

          </div>



          <div class="mt-6 pt-6 border-t border-gray-200">

            <h2 class="text-lg font-semibold text-gray-900 mb-3">Test Endpoints</h2>

            <div class="grid grid-cols-2 gap-2 text-sm">

              <a

                href="/demo/slow_cpu?ms=200"

                class="text-blue-600 hover:text-blue-800 font-mono"

              >

                /demo/slow_cpu

              </a>

              <a

                href="/demo/slow_query?seconds=0.15"

                class="text-blue-600 hover:text-blue-800 font-mono"

              >

                /demo/slow_query

              </a>

              <a

                href="/demo/complex_query"

                class="text-blue-600 hover:text-blue-800 font-mono"

              >

                /demo/complex_query

              </a>

              <a

                href="/demo/multiple_queries"

                class="text-blue-600 hover:text-blue-800 font-mono"

              >

                /demo/multiple_queries

              </a>

            </div>

            <div class="mt-3 p-3 bg-gray-50 rounded text-xs font-mono text-gray-700">

              <div>$ mix dashboard.test 20  # Generate 20 test requests</div>

              <div>$ mix dashboard.stats    # View statistics</div>

              <div>$ mix dashboard.clear    # Clear all data</div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>