rails_error_dashboard 0.1.0 → 0.1.3

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

@@ -1,123 +1,208 @@
+<!-- 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">
+  <div class="card mb-4" id="filters-section">
     <div class="card-header bg-white">
       <h5 class="mb-0">Filters & Search</h5>
     </div>
     <div class="card-body">
-      <%= form_with url: errors_path, method: :get, class: "row g-3" do %>
-        <div class="col-md-3">
+      <%= form_with url: errors_path, method: :get, class: "row g-3", data: { turbo: false } do %>
+        <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 :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">
-          <%= select_tag :environment, options_for_select([['All Environments', '']] + @environments.map { |e| [e.titleize, e] }, params[:environment]), class: "form-select" %>
+          <%= select_tag :severity, options_for_select([
+            ['All Severities', ''],
+            ['🔴 Critical', 'critical'],
+            ['🟠 High', 'high'],
+            ['🟡 Medium', 'medium'],
+            ['⚪ Low', 'low']
+          ], params[:severity]), class: "form-select" %>
         </div>
+
+        <!-- Phase 3: Workflow Filters -->
         <div class="col-md-2">
-          <%= select_tag :platform, options_for_select([['All Platforms', '']] + @platforms.map { |p| [p, p] }, params[:platform]), class: "form-select" %>
+          <%= select_tag :status, options_for_select([
+            ['All Statuses', ''],
+            ['🆕 New', 'new'],
+            ['🔵 In Progress', 'in_progress'],
+            ['🟡 Investigating', 'investigating'],
+            ['✅ Resolved', 'resolved'],
+            ['⚫ Won\'t Fix', 'wont_fix']
+          ], params[:status]), 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 class="col-md-2">
+          <%= select_tag :assigned_to, options_for_select([
+            ['All Assignments', ''],
+            ['Unassigned', '__unassigned__'],
+            ['Assigned', '__assigned__']
+          ], params[:assigned_to]), 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 :priority_level, options_for_select([
+            ['All Priorities', ''],
+            ['🔴 Critical (P3)', 3],
+            ['🟠 High (P2)', 2],
+            ['🟡 Medium (P1)', 1],
+            ['⚪ Low (P0)', 0]
+          ], params[:priority_level]), class: "form-select" %>
+        </div>
+
+        <div class="col-auto">
+          <div class="form-check mt-2">
+            <%
+              # Determine checkbox state based on params
+              # If unresolved param is missing or nil, default to checked (true)
+              # If unresolved param is explicitly "false" or "0", uncheck it
+              is_checked = if params[:unresolved].nil?
+                true  # Default to checked when first loading
+              else
+                params[:unresolved] != "false" && params[:unresolved] != "0"
+              end
+            %>
+            <%= check_box_tag :unresolved, "1", is_checked, class: "form-check-input", id: "unresolved_checkbox" %>
             <%= label_tag :unresolved, "Unresolved only", class: "form-check-label" %>
           </div>
         </div>
+
+        <div class="col-auto">
+          <div class="form-check mt-2">
+            <%= check_box_tag :hide_snoozed, "1", params[:hide_snoozed] == "1", class: "form-check-input" %>
+            <%= label_tag :hide_snoozed, "Hide snoozed", class: "form-check-label" %>
+          </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 +253,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 +279,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 +382,109 @@
       });
     }
   });
+
+  // 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');
+    }
+  });
+
+  // Preserve scroll position on page load
+  document.addEventListener('DOMContentLoaded', function() {
+    const scrollPos = sessionStorage.getItem('scrollPos');
+    if (scrollPos) {
+      window.scrollTo(0, parseInt(scrollPos));
+      sessionStorage.removeItem('scrollPos');
+    }
+  });
+
+  // Handle filter form submission
+  document.addEventListener('DOMContentLoaded', function() {
+    const filterForm = document.querySelector('form[action="<%= errors_path %>"]');
+    if (filterForm) {
+      filterForm.addEventListener('submit', function(e) {
+        // Save scroll position before form submission
+        sessionStorage.setItem('scrollPos', window.pageYOffset);
+
+        // Handle unchecked checkbox - when unchecked, send "0" explicitly
+        const unresolvedCheckbox = document.getElementById('unresolved_checkbox');
+        if (unresolvedCheckbox && !unresolvedCheckbox.checked) {
+          // Create hidden input to send "0" when unchecked
+          const hiddenInput = document.createElement('input');
+          hiddenInput.type = 'hidden';
+          hiddenInput.name = 'unresolved';
+          hiddenInput.value = '0';
+          filterForm.appendChild(hiddenInput);
+          // Remove the checkbox from form submission to avoid sending empty value
+          unresolvedCheckbox.disabled = true;
+        }
+      });
+    }
+  });
 </script>