rails_error_dashboard 0.1.0 → 0.1.1

data/app/views/rails_error_dashboard/errors/index.html.erb

@@ -1,97 +1,122 @@
+<!-- Subscribe to Turbo Stream updates -->
+<%= turbo_stream_from "error_list" %>
+
 <div class="py-4">
   <div class="d-flex justify-content-between align-items-center mb-4">
     <h2 class="mb-0"><i class="bi bi-bug-fill text-primary"></i> Error Overview</h2>
     <div class="text-muted">
-      <small>Last updated: <%= Time.current.strftime("%B %d, %Y %I:%M %p") %></small>
+      <small>
+        Last updated: <%= Time.current.strftime("%B %d, %Y %I:%M %p") %>
+        <span class="badge bg-success ms-2" id="live-indicator">
+          <i class="bi bi-broadcast"></i> Live
+        </span>
+      </small>
     </div>
   </div>
 
   <!-- Stats Cards -->
-  <div class="row g-4 mb-4">
-    <div class="col-md-3">
-      <div class="card stat-card">
-        <div class="card-body">
-          <div class="stat-label mb-2">Today</div>
-          <div class="stat-value text-info"><%= @stats[:total_today] %></div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="card stat-card">
-        <div class="card-body">
-          <div class="stat-label mb-2">This Week</div>
-          <div class="stat-value text-primary"><%= @stats[:total_week] %></div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="card stat-card">
-        <div class="card-body">
-          <div class="stat-label mb-2">Unresolved</div>
-          <div class="stat-value text-danger"><%= @stats[:unresolved] %></div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-3">
-      <div class="card stat-card">
-        <div class="card-body">
-          <div class="stat-label mb-2">Resolved</div>
-          <div class="stat-value text-success"><%= @stats[:resolved] %></div>
+  <div id="dashboard_stats" class="mb-4">
+    <%= render "stats", stats: @stats %>
+  </div>
+
+  <!-- Top Error Types (Only show if there are errors) -->
+  <% if @stats[:top_errors].any? %>
+    <div class="row g-4 mb-4">
+      <div class="col-md-12">
+        <div class="card">
+          <div class="card-header bg-white">
+            <h5 class="mb-0">Top Error Types</h5>
+          </div>
+          <div class="card-body">
+            <div class="row">
+              <% @stats[:top_errors].first(5).each do |error_type, count| %>
+                <div class="col-md-2">
+                  <div class="text-center p-3 border rounded">
+                    <div class="fw-bold text-danger" style="font-size: 1.5rem;"><%= count %></div>
+                    <small class="text-muted text-truncate d-block" title="<%= error_type %>"><%= error_type.split('::').last %></small>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  <% end %>
 
-  <!-- Platform & Environment Breakdown -->
-  <div class="row g-4 mb-4">
-    <div class="col-md-6">
-      <div class="card">
-        <div class="card-header bg-white">
-          <h5 class="mb-0">Platform Breakdown</h5>
-        </div>
-        <div class="card-body">
-          <% if @stats[:by_platform].any? %>
-            <% @stats[:by_platform].each do |platform, count| %>
-              <div class="d-flex justify-content-between align-items-center mb-2">
-                <span>
-                  <% if platform == 'iOS' %>
-                    <span class="badge badge-ios">iOS</span>
-                  <% elsif platform == 'Android' %>
-                    <span class="badge badge-android">Android</span>
-                  <% else %>
-                    <span class="badge badge-api">API</span>
-                  <% end %>
-                </span>
-                <span class="fw-bold"><%= count %></span>
-              </div>
+  <!-- Spike Detection Alert -->
+  <% if @stats[:spike_detected] %>
+    <div class="alert alert-warning mb-4" role="alert">
+      <div class="d-flex align-items-center">
+        <i class="bi bi-exclamation-triangle-fill fs-3 me-3"></i>
+        <div>
+          <h5 class="alert-heading mb-1">
+            <% case @stats[:spike_info][:severity] %>
+            <% when :critical %>
+              🚨 Critical Error Spike Detected!
+            <% when :high %>
+              ⚠️ High Error Spike Detected
+            <% when :elevated %>
+              📈 Elevated Error Activity
             <% end %>
-          <% else %>
-            <p class="text-muted mb-0">No errors recorded yet</p>
-          <% end %>
+          </h5>
+          <p class="mb-0">
+            Today: <strong><%= @stats[:spike_info][:today_count] %> errors</strong>
+            (7-day avg: <%= @stats[:spike_info][:avg_count] %>) —
+            <strong><%= @stats[:spike_info][:multiplier] %>x normal levels</strong>
+          </p>
         </div>
       </div>
     </div>
+  <% end %>
 
-    <div class="col-md-6">
-      <div class="card">
-        <div class="card-header bg-white">
-          <h5 class="mb-0">Top Error Types</h5>
-        </div>
-        <div class="card-body">
-          <% if @stats[:top_errors].any? %>
-            <% @stats[:top_errors].first(5).each do |error_type, count| %>
-              <div class="d-flex justify-content-between align-items-center mb-2">
-                <small class="text-truncate" style="max-width: 70%;"><%= error_type %></small>
-                <span class="badge bg-secondary"><%= count %></span>
-              </div>
+  <!-- 7-Day Error Trend -->
+  <% if @stats[:errors_trend_7d]&.any? %>
+    <div class="row g-4 mb-4">
+      <div class="col-md-8">
+        <div class="card">
+          <div class="card-header bg-white d-flex justify-content-between align-items-center">
+            <h5 class="mb-0"><i class="bi bi-graph-up"></i> 7-Day Error Trend</h5>
+            <%= link_to analytics_errors_path, class: "btn btn-sm btn-outline-primary" do %>
+              <i class="bi bi-bar-chart"></i> Full Analytics
             <% end %>
-          <% else %>
-            <p class="text-muted mb-0">No errors recorded yet</p>
-          <% end %>
+          </div>
+          <div class="card-body">
+            <%= line_chart @stats[:errors_trend_7d],
+                color: "#8B5CF6",
+                curve: false,
+                points: true,
+                height: "250px",
+                library: {
+                  plugins: {
+                    legend: { display: false }
+                  },
+                  scales: {
+                    y: {
+                      beginAtZero: true,
+                      ticks: { precision: 0 }
+                    }
+                  }
+                } %>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card">
+          <div class="card-header bg-white">
+            <h5 class="mb-0"><i class="bi bi-pie-chart"></i> By Severity (7d)</h5>
+          </div>
+          <div class="card-body">
+            <%= pie_chart @stats[:errors_by_severity_7d],
+                colors: ["#EF4444", "#F59E0B", "#3B82F6", "#6B7280"],
+                height: "250px",
+                legend: "bottom",
+                donut: true %>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  <% end %>
 
   <!-- Filters -->
   <div class="card mb-4">
@@ -100,24 +125,38 @@
     </div>
     <div class="card-body">
       <%= form_with url: errors_path, method: :get, class: "row g-3" do %>
-        <div class="col-md-3">
+        <div class="col-md-4">
           <%= text_field_tag :search, params[:search], placeholder: "Search errors...", class: "form-control" %>
         </div>
+
+        <% if @platforms.size > 1 %>
+          <div class="col-md-2">
+            <%= select_tag :platform, options_for_select([['All Platforms', '']] + @platforms.map { |p| [p, p] }, params[:platform]), class: "form-select" %>
+          </div>
+        <% end %>
+
         <div class="col-md-2">
-          <%= select_tag :environment, options_for_select([['All Environments', '']] + @environments.map { |e| [e.titleize, e] }, params[:environment]), class: "form-select" %>
-        </div>
-        <div class="col-md-2">
-          <%= select_tag :platform, options_for_select([['All Platforms', '']] + @platforms.map { |p| [p, p] }, params[:platform]), class: "form-select" %>
-        </div>
-        <div class="col-md-3">
           <%= select_tag :error_type, options_for_select([['All Types', '']] + @error_types.map { |t| [t, t] }, params[:error_type]), class: "form-select" %>
         </div>
+
         <div class="col-md-2">
-          <div class="form-check">
-            <%= check_box_tag :unresolved, true, params[:unresolved] == 'true', class: "form-check-input" %>
+          <%= select_tag :severity, options_for_select([
+            ['All Severities', ''],
+            ['🔴 Critical', 'critical'],
+            ['🟠 High', 'high'],
+            ['🟡 Medium', 'medium'],
+            ['⚪ Low', 'low']
+          ], params[:severity]), class: "form-select" %>
+        </div>
+
+        <div class="col-auto">
+          <div class="form-check mt-2">
+            <%= check_box_tag :unresolved, "true", params[:unresolved] != "false" && params[:unresolved] != "0", class: "form-check-input", data: { uncheck_value: "false" } %>
             <%= label_tag :unresolved, "Unresolved only", class: "form-check-label" %>
+            <%= hidden_field_tag :unresolved, "false", id: nil %>
           </div>
         </div>
+
         <div class="col-12">
           <%= submit_tag "Apply Filters", class: "btn btn-primary" %>
           <%= link_to "Clear", errors_path, class: "btn btn-outline-secondary" %>
@@ -168,67 +207,21 @@
                 <th style="width: 40px;">
                   <input type="checkbox" id="select-all" class="form-check-input">
                 </th>
-                <th>Time</th>
+                <th>Severity</th>
                 <th>Error Type</th>
                 <th>Message</th>
-                <th>Platform</th>
-                <th>Environment</th>
-                <th>User</th>
+                <th>Occurrences</th>
+                <th>First / Last Seen</th>
+                <% if @platforms.size > 1 %>
+                  <th>Platform</th>
+                <% end %>
                 <th>Status</th>
                 <th></th>
               </tr>
             </thead>
-            <tbody>
+            <tbody id="error_list">
               <% @errors.each do |error| %>
-                <tr>
-                  <td onclick="event.stopPropagation();">
-                    <input type="checkbox" class="error-checkbox form-check-input" value="<%= error.id %>" data-error-id="<%= error.id %>">
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <small><%= error.occurred_at.strftime("%m/%d %I:%M%p") %></small>
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <code class="text-danger"><%= error.error_type.split('::').last %></code>
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <div class="text-truncate" style="max-width: 300px;" title="<%= error.message %>">
-                      <%= error.message %>
-                    </div>
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <% if error.platform == 'iOS' %>
-                      <span class="badge badge-ios">iOS</span>
-                    <% elsif error.platform == 'Android' %>
-                      <span class="badge badge-android">Android</span>
-                    <% else %>
-                      <span class="badge badge-api"><%= error.platform || 'API' %></span>
-                    <% end %>
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <span class="badge <%= error.environment == 'production' ? 'bg-danger' : 'bg-info' %>">
-                      <%= error.environment %>
-                    </span>
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <% if error.user %>
-                      <small><%= error.user.email %></small>
-                    <% else %>
-                      <small class="text-muted">Guest</small>
-                    <% end %>
-                  </td>
-                  <td onclick="window.location='<%= error_path(error) %>';">
-                    <% if error.resolved? %>
-                      <i class="bi bi-check-circle-fill text-success" title="Resolved"></i>
-                    <% else %>
-                      <i class="bi bi-exclamation-circle-fill text-danger" title="Unresolved"></i>
-                    <% end %>
-                  </td>
-                  <td onclick="event.stopPropagation();">
-                    <%= link_to error_path(error), class: "btn btn-sm btn-outline-primary" do %>
-                      <i class="bi bi-eye"></i>
-                    <% end %>
-                  </td>
-                </tr>
+                <%= render "error_row", error: error, show_platform: @platforms.size > 1 %>
               <% end %>
             </tbody>
           </table>
@@ -240,8 +233,20 @@
         </div>
       <% else %>
         <div class="text-center py-5">
-          <i class="bi bi-inbox display-1 text-muted"></i>
-          <p class="text-muted mt-3">No errors found</p>
+          <i class="bi bi-check-circle display-1 text-success mb-3"></i>
+          <h4 class="text-muted">All Clear!</h4>
+          <p class="text-muted">
+            <% if params[:search].present? || params[:error_type].present? || params[:platform].present? || params[:severity].present? %>
+              No errors match your current filters. Try adjusting your search criteria.
+            <% else %>
+              No errors have been logged yet. Your application is running smoothly!
+            <% end %>
+          </p>
+          <% unless params.values.compact.any? %>
+            <small class="text-muted d-block mt-3">
+              <i class="bi bi-lightbulb"></i> Errors will appear here automatically when they occur.
+            </small>
+          <% end %>
         </div>
       <% end %>
     </div>
@@ -331,4 +336,76 @@
       });
     }
   });
+
+  // Turbo Stream animation for new errors
+  document.addEventListener('turbo:before-stream-render', (event) => {
+    const { target, action } = event.detail.newStream;
+
+    // Highlight new errors when prepended
+    if (action === 'prepend' && target === 'error_list') {
+      setTimeout(() => {
+        const firstRow = document.querySelector('#error_list tr:first-child');
+        if (firstRow) {
+          firstRow.classList.add('new-error');
+
+          // Remove class after animation completes
+          setTimeout(() => {
+            firstRow.classList.remove('new-error');
+          }, 3000);
+        }
+      }, 10);
+    }
+
+    // Pulse stats cards when updated
+    if (action === 'replace' && target === 'dashboard_stats') {
+      setTimeout(() => {
+        const statCards = document.querySelectorAll('.stat-card');
+        statCards.forEach(card => {
+          card.classList.add('updated');
+          setTimeout(() => card.classList.remove('updated'), 500);
+        });
+      }, 10);
+    }
+  });
+
+  // Initialize Bootstrap tooltips
+  document.addEventListener('DOMContentLoaded', function() {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+  });
+
+  // Keyboard shortcuts
+  document.addEventListener('keydown', function(e) {
+    // Ignore if typing in input/textarea
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+    // 'r' - Refresh page
+    if (e.key === 'r') {
+      location.reload();
+    }
+
+    // '/' - Focus search
+    if (e.key === '/') {
+      e.preventDefault();
+      const searchInput = document.querySelector('input[name="search"]');
+      if (searchInput) searchInput.focus();
+    }
+
+    // 'a' - Go to analytics
+    if (e.key === 'a') {
+      window.location.href = '<%= analytics_errors_path %>';
+    }
+
+    // '?' - Show keyboard shortcuts help
+    if (e.key === '?') {
+      e.preventDefault();
+      alert('Keyboard Shortcuts:\n\n' +
+            'r - Refresh page\n' +
+            '/ - Focus search\n' +
+            'a - Analytics page\n' +
+            '? - Show this help');
+    }
+  });
 </script>