Pretty ui numbers (#187)

fast-programmer · Nov 23, 2024 · 6944aef · 6944aef
1 parent f341f61
commit 6944aef
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/lib/outboxer/web.rb b/lib/outboxer/web.rb
@@ -27,10 +27,18 @@ def outboxer_path(path)
         "#{request.script_name}#{path}"
       end
 
+      def pretty_number(number:, delimiter: ',', separator: '.')
+        return "-" if number.nil?
+
+        integer, decimal = number.to_s.split('.')
+        formatted_integer = integer.chars.reverse.each_slice(3).map(&:join).join(delimiter).reverse
+        [formatted_integer, decimal].compact.join(separator)
+      end
+
       def pretty_throughput(per_second: 0)
         return "-" if per_second == 0
 
-        "#{per_second} /s"
+        "#{pretty_number(number: per_second)} /s"
       end
 
       def pretty_duration_from_period(start_time:, end_time: ::Process.clock_gettime(::Process::CLOCK_MONOTONIC))
@@ -62,7 +70,7 @@ def pretty_duration_from_seconds(seconds:)
         if seconds < 1
           sub_second_units.reverse_each do |unit|
             value = seconds / unit[:scale]
-            return "#{value.to_i}#{unit[:name]}" if value >= 1
+            return "#{pretty_number(number: value.to_i)}#{unit[:name]}" if value >= 1
           end
         end
 
@@ -72,7 +80,7 @@ def pretty_duration_from_seconds(seconds:)
           next if seconds < unit[:scale] && result.empty? # Skip smaller units until the first significant one
 
           value, seconds = seconds.divmod(unit[:scale])
-          result << "#{value.to_i}#{unit[:name]}" if value > 0
+          result << "#{pretty_number(number: value.to_i)}#{unit[:name]}" if value > 0
         end
 
         result.join(" ")
@@ -104,7 +112,7 @@ def pretty_duration_from_seconds_to_milliseconds(seconds:)
 
         # Handle milliseconds explicitly
         milliseconds = (seconds * 1_000).round
-        result << "#{milliseconds}ms" if milliseconds > 0 || result.empty?
+        result << "#{pretty_number(number: milliseconds)}ms" if milliseconds > 0 || result.empty?
 
         result.join(" ")
       end
@@ -119,7 +127,7 @@ def human_readable_size(kilobytes:)
           unit = units.shift
         end
 
-        "#{size.round(0)} #{unit}"
+        "#{pretty_number(number: size.round(0))} #{unit}"
       end
 
       def time_ago_in_words(time)

diff --git a/lib/outboxer/web/views/home.erb b/lib/outboxer/web/views/home.erb
@@ -129,11 +129,11 @@
                                         <%= status %>
                                     </a>
                                 </td>
-                                <td><%= messages_metrics[status.to_sym][:count][:current] %></td>
+                                <td><%= pretty_number(number: messages_metrics[status.to_sym][:count][:current]) %></td>
                                 <td><%= pretty_throughput(per_second: messages_metrics[status.to_sym][:throughput]) %></td>
                                 <td><%= pretty_duration_from_seconds(seconds: messages_metrics[status.to_sym][:latency]) %></td>
-                                <td><%= messages_metrics[status.to_sym][:count][:historic] || '-' %></td>
-                                <td><%= messages_metrics[status.to_sym][:count][:total] || '-' %></td>
+                                <td><%= pretty_number(number: messages_metrics[status.to_sym][:count][:historic]) %></td>
+                                <td><%= pretty_number(number: messages_metrics[status.to_sym][:count][:total]) %></td>
                             </tr>
                         <% end %>
                     </tbody>

diff --git a/lib/outboxer/web/views/layout.erb b/lib/outboxer/web/views/layout.erb
@@ -55,7 +55,7 @@
         <div class="container-fluid">
             <a class="navbar-brand" href="<%= outboxer_path('') %>">
                 <i class="bi bi-envelope-open-fill"></i> Outboxer
-                <span class="badge bg-secondary"><%= messages_metrics[:published][:count][:historic] + messages_metrics[:published][:count][:current] %></span>
+                <span class="badge bg-secondary"><%= pretty_number(number: messages_metrics[:published][:count][:historic] + messages_metrics[:published][:count][:current]) %></span>
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
@@ -73,15 +73,15 @@
                     <li class="nav-item">
                         <a class="nav-link <%= 'active' if denormalised_query_params[:status] == nil %>"
                            href="<%= outboxer_path("/messages#{normalise_query_string(status: nil, time_zone: denormalised_query_params[:time_zone])}") %>">
-                            All (<%= messages_metrics[:all][:count][:current] %>)
+                            All (<%= pretty_number(number: messages_metrics[:all][:count][:current]) %>)
                         </a>
                     </li>
 
                     <% statuses.each do |status| %>
                         <li class="nav-item">
                             <a class="nav-link <%= 'active' if denormalised_query_params[:status] == status[:key] %>"
                                href="<%= outboxer_path("/messages#{normalise_query_string(status: status[:key], time_zone: params[:time_zone])}") %>">
-                                <%= status[:name] %> (<%= messages_metrics[status[:key].to_sym][:count][:current] %>)
+                                <%= status[:name] %> (<%= pretty_number(number: messages_metrics[status[:key].to_sym][:count][:current]) %>)
                             </a>
                         </li>
                     <% end %>