rails_error_dashboard 0.1.17 → 0.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66993309911427e7fdbddadebfea4a8603fa851ce47c7d5ac6189510c741965b
-  data.tar.gz: 86d88a89e817adcb790a9b83791decfaa13ffeac4d1b744b846d072e6610ebb5
+  metadata.gz: 2cdd815518aac095839eaf937dde33835b52b260cc6494d7e0a904de0c59b614
+  data.tar.gz: 7cd803c5e3ac4e724d3514088d46d8c76316336ce89e233a116a8ba95dad00bc
 SHA512:
-  metadata.gz: 6581ea39ea6340b0df0dcb9835c597367f5c37459462f3ebe6f79315f99771ade90770fd04605477edef545b75aef32ae6d04acffe4caf896390b219ae11380e
-  data.tar.gz: 1dce7070b16addd615deb960d93e3226a448cb776526a17d1f353a1fdd8d25e90c8a2916bba21482b23637bcebf5a34c153b9227113ea6a23eeba79891f6acd7
+  metadata.gz: a5cea12724e61c164845596926c4d6fdebacd4fada853b512c78e8c345b87f18f5347eb53c70b17f911d84963a5c2913415688b23afaebf50a47ece25ec695b5
+  data.tar.gz: a4110c8cf08406f79683e3a923967cd5a5fc3f383893e3a616ebd6a360f079e982e3f2be0bfea0db1c0d406e99d5cd3fada6bcba15294a0355739ccb1854a2c2

data/app/helpers/rails_error_dashboard/application_helper.rb

@@ -130,5 +130,68 @@ module RailsErrorDashboard
         content_tag(:code, display_sha, class: "font-monospace")
       end
     end
+
+    # Renders a timestamp that will be automatically converted to user's local timezone
+    # Server sends UTC timestamp, JavaScript converts to local timezone on page load
+    # @param time [Time, DateTime, nil] The timestamp to display
+    # @param format [Symbol] Format preset (:full, :short, :date_only, :time_only, :datetime)
+    # @param fallback [String] Text to show if time is nil
+    # @return [String] HTML safe span with data attributes for JS conversion
+    def local_time(time, format: :full, fallback: "N/A")
+      return fallback if time.nil?
+
+      # Convert to UTC if not already
+      utc_time = time.respond_to?(:utc) ? time.utc : time
+
+      # ISO 8601 format for JavaScript parsing
+      iso_time = utc_time.iso8601
+
+      # Format presets for data-format attribute
+      format_string = case format
+      when :full
+        "%B %d, %Y %I:%M:%S %p"  # December 31, 2024 11:59:59 PM
+      when :short
+        "%m/%d %I:%M%p"          # 12/31 11:59PM
+      when :date_only
+        "%B %d, %Y"              # December 31, 2024
+      when :time_only
+        "%I:%M:%S %p"            # 11:59:59 PM
+      when :datetime
+        "%b %d, %Y %H:%M"        # Dec 31, 2024 23:59
+      else
+        format.to_s
+      end
+
+      content_tag(
+        :span,
+        utc_time.strftime(format_string + " UTC"),  # Fallback for non-JS browsers
+        class: "local-time",
+        data: {
+          utc: iso_time,
+          format: format_string
+        }
+      )
+    end
+
+    # Renders a relative time ("3 hours ago") that updates automatically
+    # @param time [Time, DateTime, nil] The timestamp to display
+    # @param fallback [String] Text to show if time is nil
+    # @return [String] HTML safe span with data attributes for JS conversion
+    def local_time_ago(time, fallback: "N/A")
+      return fallback if time.nil?
+
+      # Convert to UTC if not already
+      utc_time = time.respond_to?(:utc) ? time.utc : time
+      iso_time = utc_time.iso8601
+
+      content_tag(
+        :span,
+        time_ago_in_words(time) + " ago",  # Fallback for non-JS browsers
+        class: "local-time-ago",
+        data: {
+          utc: iso_time
+        }
+      )
+    end
   end
 end

data/app/views/layouts/rails_error_dashboard.html.erb

@@ -1188,6 +1188,189 @@
             showToast('<%= j flash[:error] %>', 'danger');
           <% end %>
         <% end %>
+
+        // Local Timezone Conversion
+        // Converts UTC timestamps to user's local timezone on page load
+        function convertToLocalTime() {
+          // Convert all .local-time elements (formatted timestamps)
+          document.querySelectorAll('.local-time').forEach(function(element) {
+            const utcString = element.dataset.utc;
+            const formatString = element.dataset.format;
+
+            if (!utcString) return;
+
+            try {
+              const date = new Date(utcString);
+              if (isNaN(date.getTime())) return; // Invalid date
+
+              // Parse the format string and convert to local time
+              const formatted = formatDateTime(date, formatString);
+
+              // Get timezone abbreviation
+              const timezone = getTimezoneAbbreviation(date);
+
+              // Update element text
+              element.textContent = formatted + ' ' + timezone;
+              element.title = 'Your local time (click to see UTC)';
+
+              // Add click handler to toggle between local and UTC
+              element.style.cursor = 'pointer';
+              element.dataset.originalUtc = utcString;
+              element.dataset.localFormatted = formatted + ' ' + timezone;
+              element.dataset.showingLocal = 'true';
+
+              element.addEventListener('click', function() {
+                if (this.dataset.showingLocal === 'true') {
+                  // Show UTC
+                  const utcDate = new Date(this.dataset.originalUtc);
+                  const utcFormatted = formatDateTime(utcDate, formatString);
+                  this.textContent = utcFormatted + ' UTC';
+                  this.title = 'UTC time (click to see local time)';
+                  this.dataset.showingLocal = 'false';
+                } else {
+                  // Show local
+                  this.textContent = this.dataset.localFormatted;
+                  this.title = 'Your local time (click to see UTC)';
+                  this.dataset.showingLocal = 'true';
+                }
+              });
+            } catch (e) {
+              console.error('Error converting timestamp:', e);
+            }
+          });
+
+          // Convert all .local-time-ago elements (relative time)
+          document.querySelectorAll('.local-time-ago').forEach(function(element) {
+            const utcString = element.dataset.utc;
+            if (!utcString) return;
+
+            try {
+              const date = new Date(utcString);
+              if (isNaN(date.getTime())) return; // Invalid date
+
+              // Calculate relative time
+              const now = new Date();
+              const diffMs = now - date;
+              const formatted = formatRelativeTime(diffMs);
+
+              // Update element text
+              element.textContent = formatted;
+              element.title = 'Click to see exact time';
+
+              // Add click handler to toggle between relative and absolute
+              element.style.cursor = 'pointer';
+              element.dataset.originalUtc = utcString;
+              element.dataset.showingRelative = 'true';
+
+              element.addEventListener('click', function() {
+                if (this.dataset.showingRelative === 'true') {
+                  // Show absolute time
+                  const absoluteDate = new Date(this.dataset.originalUtc);
+                  const absoluteFormatted = formatDateTime(absoluteDate, '%B %d, %Y %I:%M:%S %p');
+                  const timezone = getTimezoneAbbreviation(absoluteDate);
+                  this.textContent = absoluteFormatted + ' ' + timezone;
+                  this.title = 'Click to see relative time';
+                  this.dataset.showingRelative = 'false';
+                } else {
+                  // Show relative time
+                  const now = new Date();
+                  const date = new Date(this.dataset.originalUtc);
+                  const diffMs = now - date;
+                  this.textContent = formatRelativeTime(diffMs);
+                  this.title = 'Click to see exact time';
+                  this.dataset.showingRelative = 'true';
+                }
+              });
+            } catch (e) {
+              console.error('Error converting relative time:', e);
+            }
+          });
+        }
+
+        // Format date according to strftime-like format string
+        function formatDateTime(date, formatString) {
+          const months = ['January', 'February', 'March', 'April', 'May', 'June',
+                          'July', 'August', 'September', 'October', 'November', 'December'];
+          const monthsShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                               'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+          const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+          const daysShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+          const year = date.getFullYear();
+          const month = date.getMonth();
+          const day = date.getDate();
+          const hours = date.getHours();
+          const minutes = date.getMinutes();
+          const seconds = date.getSeconds();
+          const dayOfWeek = date.getDay();
+
+          // 12-hour format
+          const hours12 = hours % 12 || 12;
+          const ampm = hours >= 12 ? 'PM' : 'AM';
+
+          // Padding helper
+          const pad = (n) => n.toString().padStart(2, '0');
+
+          // Replace format specifiers
+          let result = formatString
+            .replace('%Y', year)
+            .replace('%y', year.toString().substr(2))
+            .replace('%B', months[month])
+            .replace('%b', monthsShort[month])
+            .replace('%m', pad(month + 1))
+            .replace('%d', pad(day))
+            .replace('%e', day)
+            .replace('%A', days[dayOfWeek])
+            .replace('%a', daysShort[dayOfWeek])
+            .replace('%H', pad(hours))
+            .replace('%I', pad(hours12))
+            .replace('%M', pad(minutes))
+            .replace('%S', pad(seconds))
+            .replace('%p', ampm)
+            .replace('%P', ampm.toLowerCase());
+
+          return result;
+        }
+
+        // Get timezone abbreviation (e.g., "PST", "EST", "UTC+2")
+        function getTimezoneAbbreviation(date) {
+          const timeZoneString = date.toLocaleTimeString('en-US', { timeZoneName: 'short' });
+          const parts = timeZoneString.split(' ');
+          return parts[parts.length - 1]; // Last part is timezone abbreviation
+        }
+
+        // Format relative time ("3 hours ago", "2 days ago")
+        function formatRelativeTime(diffMs) {
+          const seconds = Math.floor(diffMs / 1000);
+          const minutes = Math.floor(seconds / 60);
+          const hours = Math.floor(minutes / 60);
+          const days = Math.floor(hours / 24);
+          const months = Math.floor(days / 30);
+          const years = Math.floor(days / 365);
+
+          if (seconds < 60) {
+            return seconds <= 1 ? '1 second ago' : seconds + ' seconds ago';
+          } else if (minutes < 60) {
+            return minutes === 1 ? '1 minute ago' : minutes + ' minutes ago';
+          } else if (hours < 24) {
+            return hours === 1 ? '1 hour ago' : hours + ' hours ago';
+          } else if (days < 30) {
+            return days === 1 ? '1 day ago' : days + ' days ago';
+          } else if (months < 12) {
+            return months === 1 ? '1 month ago' : months + ' months ago';
+          } else {
+            return years === 1 ? '1 year ago' : years + ' years ago';
+          }
+        }
+
+        // Run conversion on page load
+        convertToLocalTime();
+
+        // Also run after Turbo navigation (if using Turbo/Hotwire)
+        if (typeof Turbo !== 'undefined') {
+          document.addEventListener('turbo:load', convertToLocalTime);
+          document.addEventListener('turbo:frame-load', convertToLocalTime);
+        }
       });
     </script>
   </body>

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

@@ -36,8 +36,8 @@
   </td>
   <td onclick="window.location='<%= error_path(error) %>';">
     <small>
-      <strong>First:</strong> <%= error.first_seen_at&.strftime("%m/%d %I:%M%p") || 'N/A' %><br>
-      <strong>Last:</strong> <%= error.last_seen_at&.strftime("%m/%d %I:%M%p") || 'N/A' %>
+      <strong>First:</strong> <%= local_time(error.first_seen_at, format: :short) %><br>
+      <strong>Last:</strong> <%= local_time(error.last_seen_at, format: :short) %>
     </small>
   </td>
   <% if local_assigns[:show_platform] %>

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

@@ -48,7 +48,7 @@
                 </div>
 
                 <small class="text-muted">
-                  <%= time_ago_in_words(error.occurred_at) %> ago
+                  <%= local_time_ago(error.occurred_at) %>
                 </small>
               </div>
 

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

@@ -386,8 +386,8 @@
                   <td><code class="small"><%= error[:error_type] %></code></td>
                   <td><span class="badge bg-danger"><%= error[:total_occurrences] %></span></td>
                   <td><%= error[:duration_days] %> days</td>
-                  <td><small class="text-muted"><%= error[:first_seen].strftime("%b %d, %Y") %></small></td>
-                  <td><small class="text-muted"><%= error[:last_seen].strftime("%b %d, %Y %H:%M") %></small></td>
+                  <td><small class="text-muted"><%= local_time(error[:first_seen], format: :date_only) %></small></td>
+                  <td><small class="text-muted"><%= local_time(error[:last_seen], format: :datetime) %></small></td>
                   <td>
                     <% if error[:still_active] %>
                       <span class="badge bg-warning">Active</span>

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

@@ -10,7 +10,7 @@
     <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") %>
+        Last updated: <%= local_time(Time.current, format: :full) %>
         <span class="badge bg-success ms-2" id="live-indicator">
           <i class="bi bi-broadcast"></i> Live
         </span>

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

@@ -8,7 +8,7 @@
     </h1>
     <div class="text-muted">
       <small>
-        Last updated: <%= Time.current.strftime("%B %d, %Y %I:%M %p") %>
+        Last updated: <%= local_time(Time.current, format: :full) %>
       </small>
     </div>
   </div>
@@ -199,7 +199,7 @@
                 <p class="mb-1 small"><%= error.message&.truncate(100) %></p>
                 <small class="text-muted">
                   <i class="bi bi-clock me-1"></i>
-                  <%= time_ago_in_words(error.occurred_at) %> ago
+                  <%= local_time_ago(error.occurred_at) %>
                   •
                   <i class="bi bi-arrow-repeat me-1"></i>
                   <%= error.occurrence_count %> occurrence<%= error.occurrence_count != 1 ? 's' : '' %>

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

@@ -436,8 +436,8 @@
                         <% end %>
                       </div>
                       <small class="text-muted">
-                        <%= comment.formatted_time %>
-                        <span class="ms-1 text-muted">(<%= time_ago_in_words(comment.created_at) %> ago)</span>
+                        <%= local_time(comment.created_at, format: :datetime) %>
+                        <span class="ms-1 text-muted">(<%= local_time_ago(comment.created_at) %>)</span>
                       </small>
                     </div>
                     <div class="text-break">
@@ -682,20 +682,20 @@
             <small class="text-muted d-block mb-1">First Seen</small>
             <% if @related_errors.any? %>
               <%= link_to "#timeline", class: "text-decoration-none", data: { bs_toggle: "tooltip" }, title: "Jump to timeline" do %>
-                <strong><%= @error.first_seen_at&.strftime("%B %d, %Y") || 'N/A' %></strong><br>
-                <small><%= @error.first_seen_at&.strftime("%I:%M:%S %p %Z") || 'N/A' %></small>
+                <strong><%= local_time(@error.first_seen_at, format: :date_only) %></strong><br>
+                <small><%= local_time(@error.first_seen_at, format: :time_only) %></small>
                 <i class="bi bi-arrow-down-circle ms-1"></i>
               <% end %>
             <% else %>
-              <strong><%= @error.first_seen_at&.strftime("%B %d, %Y") || 'N/A' %></strong><br>
-              <small><%= @error.first_seen_at&.strftime("%I:%M:%S %p %Z") || 'N/A' %></small>
+              <strong><%= local_time(@error.first_seen_at, format: :date_only) %></strong><br>
+              <small><%= local_time(@error.first_seen_at, format: :time_only) %></small>
             <% end %>
           </div>
 
           <div class="mb-3">
             <small class="text-muted d-block mb-1">Last Seen</small>
-            <strong><%= @error.last_seen_at&.strftime("%B %d, %Y") || 'N/A' %></strong><br>
-            <small><%= @error.last_seen_at&.strftime("%I:%M:%S %p %Z") || 'N/A' %></small>
+            <strong><%= local_time(@error.last_seen_at, format: :date_only) %></strong><br>
+            <small><%= local_time(@error.last_seen_at, format: :time_only) %></small>
           </div>
 
           <div class="mb-3">
@@ -751,7 +751,7 @@
               <% if @error.resolved_at.present? %>
                 <br>
                 <small class="text-muted mt-1 d-block">
-                  <%= @error.resolved_at.strftime("%B %d, %Y at %I:%M %p") %>
+                  <%= local_time(@error.resolved_at, format: :full) %>
                 </small>
               <% end %>
             <% else %>
@@ -773,7 +773,7 @@
                     <% if @error.assigned_at.present? %>
                       <br>
                       <small class="text-muted">
-                        <%= time_ago_in_words(@error.assigned_at) %> ago
+                        <%= local_time_ago(@error.assigned_at) %>
                       </small>
                     <% end %>
                   </div>
@@ -809,7 +809,7 @@
                 <div class="alert alert-warning py-2 mb-2">
                   <i class="bi bi-alarm"></i>
                   <strong>Snoozed</strong><br>
-                  <small>Until <%= @error.snoozed_until&.strftime("%b %d at %I:%M %p") %></small>
+                  <small>Until <%= local_time(@error.snoozed_until, format: :datetime) %></small>
                 </div>
                 <%= button_to unsnooze_error_path(@error), method: :patch, class: "btn btn-sm btn-outline-warning" do %>
                   <i class="bi bi-alarm-fill"></i> Unsnooze
@@ -971,7 +971,7 @@
                   <small class="text-muted">
                     Sample: <%= baseline.respond_to?(:sample_size) ? baseline.sample_size : 'N/A' %> periods
                     <span class="text-muted">|</span>
-                    Updated: <%= baseline.respond_to?(:updated_at) ? baseline.updated_at&.strftime("%m/%d %I:%M%p") : 'N/A' %>
+                    Updated: <%= baseline.respond_to?(:updated_at) ? local_time(baseline.updated_at, format: :short) : 'N/A' %>
                   </small>
                 </div>
               </div>

data/lib/rails_error_dashboard/version.rb

@@ -1,3 +1,3 @@
 module RailsErrorDashboard
-  VERSION = "0.1.17"
+  VERSION = "0.1.18"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_error_dashboard
 version: !ruby/object:Gem::Version
-  version: 0.1.17
+  version: 0.1.18
 platform: ruby
 authors:
 - Anjan Jagirdar
@@ -379,7 +379,7 @@ metadata:
   source_code_uri: https://github.com/AnjanJ/rails_error_dashboard
   changelog_uri: https://github.com/AnjanJ/rails_error_dashboard/blob/main/CHANGELOG.md
 post_install_message: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n
-  \ Rails Error Dashboard v0.1.17\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n\U0001F195
+  \ Rails Error Dashboard v0.1.18\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n\U0001F195
   First time? Quick start:\n   rails generate rails_error_dashboard:install\n   rails
   db:migrate\n   # Add to config/routes.rb:\n   mount RailsErrorDashboard::Engine
   => '/error_dashboard'\n\n\U0001F504 Upgrading from v0.1.x?\n   rails db:migrate\n