sidekiq 7.1.6 → 7.2.1

data/lib/sidekiq/web/application.rb

@@ -15,7 +15,7 @@ module Sidekiq
       "manifest-src 'self'",
       "media-src 'self'",
       "object-src 'none'",
-      "script-src 'self' https: http: 'unsafe-inline'",
+      "script-src 'self' https: http:",
       "style-src 'self' https: http: 'unsafe-inline'",
       "worker-src 'self'",
       "base-uri 'self'"
@@ -330,6 +330,22 @@ module Sidekiq
 
     ########
     # Filtering
+
+    get "/filter/metrics" do
+      redirect "#{root_path}metrics"
+    end
+
+    post "/filter/metrics" do
+      x = params[:substr]
+      q = Sidekiq::Metrics::Query.new
+      @period = h((params[:period] || "")[0..1])
+      @periods = METRICS_PERIODS
+      minutes = @periods.fetch(@period, @periods.values.first)
+      @query_result = q.top_jobs(minutes: minutes, class_filter: Regexp.new(Regexp.escape(x), Regexp::IGNORECASE))
+
+      erb :metrics
+    end
+
     get "/filter/retries" do
       x = params[:substr]
       return redirect "#{root_path}retries" unless x && x != ""

data/lib/sidekiq/web/csrf_protection.rb

@@ -27,7 +27,6 @@
 # SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 require "securerandom"
-require "base64"
 require "rack/request"
 
 module Sidekiq
@@ -143,7 +142,7 @@ module Sidekiq
         one_time_pad = SecureRandom.random_bytes(token.length)
         encrypted_token = xor_byte_strings(one_time_pad, token)
         masked_token = one_time_pad + encrypted_token
-        Base64.urlsafe_encode64(masked_token)
+        encode_token(masked_token)
       end
 
       # Essentially the inverse of +mask_token+.
@@ -168,8 +167,12 @@ module Sidekiq
         ::Rack::Utils.secure_compare(token.to_s, decode_token(local).to_s)
       end
 
+      def encode_token(token)
+        [token].pack("m0").tr("+/", "-_")
+      end
+
       def decode_token(token)
-        Base64.urlsafe_decode64(token)
+        token.tr("-_", "+/").unpack1("m0")
       end
 
       def xor_byte_strings(s1, s2)

data/lib/sidekiq/web/helpers.rb

@@ -21,6 +21,10 @@ module Sidekiq
       end
     end
 
+    def to_json(x)
+      Sidekiq.dump_json(x)
+    end
+
     def singularize(str, count)
       if count == 1 && str.respond_to?(:singularize) # rails
         str.singularize
@@ -292,23 +296,13 @@ module Sidekiq
       elsif rss_kb < 10_000_000
         "#{number_with_delimiter((rss_kb / 1024.0).to_i)} MB"
       else
-        "#{number_with_delimiter((rss_kb / (1024.0 * 1024.0)).round(1))} GB"
+        "#{number_with_delimiter((rss_kb / (1024.0 * 1024.0)), precision: 1)} GB"
       end
     end
 
-    def number_with_delimiter(number)
-      return "" if number.nil?
-
-      begin
-        Float(number)
-      rescue ArgumentError, TypeError
-        return number
-      end
-
-      options = {delimiter: ",", separator: "."}
-      parts = number.to_s.to_str.split(".")
-      parts[0].gsub!(/(\d)(?=(\d\d\d)+(?!\d))/, "\\1#{options[:delimiter]}")
-      parts.join(options[:separator])
+    def number_with_delimiter(number, options = {})
+      precision = options[:precision] || 0
+      %(<span data-nwp="#{precision}">#{number.round(precision)}</span>)
     end
 
     def h(text)

data/sidekiq.gemspec

@@ -23,7 +23,7 @@ Gem::Specification.new do |gem|
     "rubygems_mfa_required" => "true"
   }
 
-  gem.add_dependency "redis-client", ">= 0.14.0"
+  gem.add_dependency "redis-client", ">= 0.19.0"
   gem.add_dependency "connection_pool", ">= 2.3.0"
   gem.add_dependency "rack", ">= 2.2.4"
   gem.add_dependency "concurrent-ruby", "< 2"

data/web/assets/javascripts/application.js

@@ -33,6 +33,7 @@ function addListeners() {
 
   addShiftClickListeners()
   updateFuzzyTimes();
+  updateNumbers();
   setLivePollFromUrl();
 
   var buttons = document.querySelectorAll(".live-poll");
@@ -102,6 +103,20 @@ function updateFuzzyTimes() {
   t.cancel();
 }
 
+function updateNumbers() {
+  document.querySelectorAll("[data-nwp]").forEach(node => {
+    let number = parseFloat(node.textContent);
+    let precision = parseInt(node.dataset["nwp"] || 0);
+    if (typeof number === "number") {
+      let formatted = number.toLocaleString(undefined, {
+        minimumFractionDigits: precision,
+        maximumFractionDigits: precision,
+      });
+      node.textContent = formatted;
+    }
+  });
+}
+
 function setLivePollFromUrl() {
   var url_params = new URL(window.location.href).searchParams
 

data/web/assets/javascripts/dashboard-charts.js

@@ -86,6 +86,7 @@ class RealtimeChart extends DashboardChart {
     updateStatsSummary(this.stats.sidekiq);
     updateRedisStats(this.stats.redis);
     updateFooterUTCTime(this.stats.server_utc_time);
+    updateNumbers();
     pulseBeacon();
 
     this.stats = stats;
@@ -166,3 +167,16 @@ class RealtimeChart extends DashboardChart {
     };
   }
 }
+
+  var rc = document.getElementById("realtime-chart")
+  if (rc != null) {
+    var rtc = new RealtimeChart(rc, JSON.parse(rc.textContent))
+    rtc.registerLegend(document.getElementById("realtime-legend"))
+    window.realtimeChart = rtc
+  }
+
+  var hc = document.getElementById("history-chart")
+  if (hc != null) {
+    var htc = new DashboardChart(hc, JSON.parse(hc.textContent))
+    window.historyChart = htc
+  }

data/web/assets/javascripts/dashboard.js

@@ -1,15 +1,13 @@
 Sidekiq = {};
 
-var nf = new Intl.NumberFormat();
-
 var updateStatsSummary = function(data) {
-  document.getElementById("txtProcessed").innerText = nf.format(data.processed);
-  document.getElementById("txtFailed").innerText = nf.format(data.failed);
-  document.getElementById("txtBusy").innerText = nf.format(data.busy);
-  document.getElementById("txtScheduled").innerText = nf.format(data.scheduled);
-  document.getElementById("txtRetries").innerText = nf.format(data.retries);
-  document.getElementById("txtEnqueued").innerText = nf.format(data.enqueued);
-  document.getElementById("txtDead").innerText = nf.format(data.dead);
+  document.getElementById("txtProcessed").innerText = data.processed;
+  document.getElementById("txtFailed").innerText = data.failed;
+  document.getElementById("txtBusy").innerText = data.busy;
+  document.getElementById("txtScheduled").innerText = data.scheduled;
+  document.getElementById("txtRetries").innerText = data.retries;
+  document.getElementById("txtEnqueued").innerText = data.enqueued;
+  document.getElementById("txtDead").innerText = data.dead;
 }
 
 var updateRedisStats = function(data) {

data/web/assets/javascripts/metrics.js

@@ -262,3 +262,37 @@ class HistBubbleChart extends BaseChart {
     };
   }
 }
+
+var ch = document.getElementById("job-metrics-overview-chart");
+if (ch != null) {
+  var jm = new JobMetricsOverviewChart(ch, JSON.parse(ch.textContent));
+  document.querySelectorAll(".metrics-swatch-wrapper > input[type=checkbox]").forEach((imp) => {
+    jm.registerSwatch(imp.id)
+  });
+  window.jobMetricsChart = jm;
+}
+
+var htc = document.getElementById("hist-totals-chart");
+if (htc != null) {
+  var tc = new HistTotalsChart(htc, JSON.parse(htc.textContent));
+  window.histTotalsChart = tc
+}
+
+var hbc = document.getElementById("hist-bubble-chart");
+if (hbc != null) {
+  var bc = new HistBubbleChart(hbc, JSON.parse(hbc.textContent));
+  window.histBubbleChart = bc
+}
+
+var form = document.getElementById("metrics-form")
+document.querySelectorAll("#period-selector").forEach(node => {
+  node.addEventListener("input", debounce(() => form.submit()))
+})
+
+function debounce(func, timeout = 300) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(this, args); }, timeout);
+  };
+}

data/web/assets/stylesheets/application.css

@@ -370,6 +370,15 @@ img.smallogo {
 .stat p {
   font-size: 0.9em;
 }
+
+.num {
+  font-family: monospace;
+}
+
+td.num {
+  text-align: right;
+}
+
 @media (max-width: 767px) {
   .stats-container {
     display: block;

data/web/views/_metrics_period_select.erb

@@ -1,5 +1,5 @@
 <div>
-  <select class="form-control" onchange="window.location.href = '<%= path %>?period=' + event.target.value">
+  <select class="form-control" data-metric-period="<%= path %>">
     <% periods.each_key do |code| %>
 
       <% if code == period %>

data/web/views/_summary.erb

@@ -1,39 +1,39 @@
 <ul class="list-unstyled summary row">
   <li class="processed col-sm-1">
-    <span id="txtProcessed" class="count"><%= number_with_delimiter(stats.processed) %></span>
+    <span id="txtProcessed" class="count" data-nwp><%= stats.processed %></span>
     <span class="desc"><%= t('Processed') %></span>
   </li>
   <li class="failed col-sm-1">
-    <span id="txtFailed" class="count"><%= number_with_delimiter(stats.failed) %></span>
+    <span id="txtFailed" class="count" data-nwp><%= stats.failed %></span>
     <span class="desc"><%= t('Failed') %></span>
   </li>
   <li class="busy col-sm-1">
     <a href="<%= root_path %>busy">
-      <span id="txtBusy" class="count"><%= number_with_delimiter(workset.size) %></span>
+      <span id="txtBusy" class="count" data-nwp><%= workset.size %></span>
       <span class="desc"><%= t('Busy') %></span>
     </a>
   </li>
   <li class="enqueued col-sm-1">
     <a href="<%= root_path %>queues">
-      <span id="txtEnqueued" class="count"><%= number_with_delimiter(stats.enqueued) %></span>
+      <span id="txtEnqueued" class="count" data-nwp><%= stats.enqueued %></span>
       <span class="desc"><%= t('Enqueued') %></span>
     </a>
   </li>
   <li class="retries col-sm-1">
     <a href="<%= root_path %>retries">
-      <span id="txtRetries" class="count"><%= number_with_delimiter(stats.retry_size) %></span>
+      <span id="txtRetries" class="count" data-nwp><%= stats.retry_size %></span>
       <span class="desc"><%= t('Retries') %></span>
     </a>
   </li>
   <li class="scheduled col-sm-1">
     <a href="<%= root_path %>scheduled">
-      <span id="txtScheduled" class="count"><%= number_with_delimiter(stats.scheduled_size) %></span>
+      <span id="txtScheduled" class="count" data-nwp><%= stats.scheduled_size %></span>
       <span class="desc"><%= t('Scheduled') %></span>
     </a>
   </li>
   <li class="dead col-sm-1">
     <a href="<%= root_path %>morgue">
-      <span id="txtDead" class="count"><%= number_with_delimiter(stats.dead_size) %></span>
+      <span id="txtDead" class="count" data-nwp><%= stats.dead_size %></span>
       <span class="desc"><%= t('Dead') %></span>
     </a>
   </li>

data/web/views/busy.erb

@@ -86,9 +86,9 @@
           <% end %>
         </td>
         <td><%= relative_time(Time.at(process['started_at'])) %></td>
-        <td><%= format_memory(process['rss'].to_i) %></td>
-        <td><%= process['concurrency'] %></td>
-        <td><%= process['busy'] %></td>
+        <td class="num"><%= format_memory(process['rss'].to_i) %></td>
+        <td class="num"><%= number_with_delimiter(process['concurrency']) %></td>
+        <td class="num"><%= number_with_delimiter(process['busy']) %></td>
         <td>
           <% unless process.embedded? %>
             <form method="POST">
@@ -125,14 +125,14 @@
       <th><%= t('Arguments') %></th>
       <th><%= t('Started') %></th>
     </thead>
-    <% @workset.each do |process, thread, msg| %>
-      <% job = Sidekiq::JobRecord.new(msg['payload']) %>
+    <% @workset.each do |process, thread, work| %>
+      <% job = work.job %>
       <tr>
         <td><%= process %></td>
         <td><%= thread %></td>
         <td><%= job.jid %></td>
         <td>
-          <a href="<%= root_path %>queues/<%= msg['queue'] %>"><%= msg['queue'] %></a>
+          <a href="<%= root_path %>queues/<%= work.queue %>"><%= work.queue %></a>
         </td>
         <td>
           <%= job.display_class %>
@@ -141,7 +141,7 @@
         <td>
           <div class="args"><%= display_args(job.display_args) %></div>
         </td>
-        <td><%= relative_time(Time.at(msg['run_at'])) %></td>
+        <td><%= relative_time(work.run_at) %></td>
       </tr>
     <% end %>
   </table>

data/web/views/dashboard.erb

@@ -1,7 +1,3 @@
-<script type="text/javascript" src="<%= root_path %>javascripts/chart.min.js"></script>
-<script type="text/javascript" src="<%= root_path %>javascripts/chartjs-plugin-annotation.min.js"></script>
-<script type="text/javascript" src="<%= root_path %>javascripts/base-charts.js"></script>
-<script type="text/javascript" src="<%= root_path %>javascripts/dashboard-charts.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/dashboard.js"></script>
 <div class= "dashboard clearfix">
   <h3 >
@@ -20,26 +16,19 @@
 </div>
 
 <div class="row chart">
-  <canvas id="realtime-chart"></canvas>
-  <script>
-    window.realtimeChart = new RealtimeChart(
-      document.getElementById("realtime-chart"),
-      <%= Sidekiq.dump_json({
-        processedLabel: t('Processed'),
-        failedLabel: t('Failed'),
-        labels: Array.new(50, ""),
-        processed: Array.new(50),
-        failed: Array.new(50),
-        updateUrl: "#{root_path}stats",
-      }) %>
-    )
-  </script>
+  <canvas id="realtime-chart">
+    <%= to_json({
+      processedLabel: t('Processed'),
+      failedLabel: t('Failed'),
+      labels: Array.new(50, ""),
+      processed: Array.new(50),
+      failed: Array.new(50),
+      updateUrl: "#{root_path}stats",
+    }) %>
+  </canvas>
 
   <!-- start with a space in the legend so the height doesn't change when we add content dynamically -->
   <div id="realtime-legend">&nbsp;</div>
-  <script>
-    realtimeChart.registerLegend(document.getElementById("realtime-legend"))
-  </script>
 </div>
 
 <div class="row header">
@@ -55,18 +44,14 @@
     <a href="<%= root_path %>?days=180" class="history-graph <%= "active" if params[:days] == "180" %>"><%= t('SixMonths') %></a>
   </div>
 
-  <canvas id="history-chart"></canvas>
-  <script>
-    window.historyChart = new DashboardChart(
-      document.getElementById("history-chart"),
-      <%= Sidekiq.dump_json({
-        processedLabel: t('Processed'),
-        failedLabel: t('Failed'),
-        processed: @processed_history.to_a.reverse,
-        failed: @failed_history.to_a.reverse,
-      }) %>
-    )
-  </script>
+  <canvas id="history-chart">
+    <%= to_json({
+      processedLabel: t('Processed'),
+      failedLabel: t('Failed'),
+      processed: @processed_history.to_a.reverse,
+      failed: @failed_history.to_a.reverse,
+    }) %>
+  </canvas>
 </div>
 
 <br/>
@@ -113,3 +98,8 @@
     <% end %>
   </div>
 </div>
+
+<script type="text/javascript" src="<%= root_path %>javascripts/chart.min.js"></script>
+<script type="text/javascript" src="<%= root_path %>javascripts/chartjs-plugin-annotation.min.js"></script>
+<script type="text/javascript" src="<%= root_path %>javascripts/base-charts.js"></script>
+<script type="text/javascript" src="<%= root_path %>javascripts/dashboard-charts.js"></script>

data/web/views/filtering.erb

@@ -1,7 +1,7 @@
-<div class="sm-col-3 pull-right" style="display: inline; margin: 25px 15px 0 0;">
-  <%= t('Filter') %>:
-  <form method="POST" action='<%= root_path %>filter/<%= which %>' style="display: inline-block">
+<div>
+  <form method="post" class="form-inline" action='<%= root_path %>filter/<%= which %>'>
     <%= csrf_tag %>
-    <input class="search" type="search" name="substr" value="<%= h params[:substr] %>" placeholder="<%= t('AnyJobContent') %>"/>
+    <label for="substr"><%= t('Filter') %></label>
+    <input class="search form-control" type="search" name="substr" value="<%= h params[:substr] %>" placeholder="<%= t('AnyJobContent') %>"/>
   </form>
 </div>

data/web/views/metrics.erb

@@ -1,16 +1,29 @@
 <script type="text/javascript" src="<%= root_path %>javascripts/chart.min.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/chartjs-plugin-annotation.min.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/base-charts.js"></script>
-<script type="text/javascript" src="<%= root_path %>javascripts/metrics.js"></script>
 
 <div class="header-container">
   <div class="page-title-container">
     <h1><%= t('Metrics') %></h1>
-
     <a target="blank" href="https://github.com/sidekiq/sidekiq/wiki/Metrics"><span class="info-circle" title="Click to learn more about metrics">?</span></a>
   </div>
 
-  <%= erb :_metrics_period_select, locals: { periods: @periods, period: @period, path: "#{root_path}metrics" } %>
+  <div>
+    <form id="metrics-form" class="form-inline" action="<%= root_path %>filter/metrics" method="post">
+      <%= csrf_tag %>
+      <label for="substr"><%= t('Filter') %></label>
+      <input id="class-filter" class="form-control" type="text" name="substr" placeholder="<%= t('Name') %>" value="<%= params[:substr] %>">
+      <select id="period-selector" class="form-control" name="period">
+        <% @periods.each_key do |code| %>
+          <% if code == @period %>
+            <option selected value="<%= code %>"><%= code %></option>
+          <% else %>
+            <option value="<%= code %>"><%= code %></option>
+          <% end %>
+        <% end %>
+      </select>
+    </form>
+  </div>
 </div>
 
 <%
@@ -21,22 +34,17 @@
 %>
 
 <% if job_results.any? %>
-  <canvas id="job-metrics-overview-chart"></canvas>
-
-  <script>
-    window.jobMetricsChart = new JobMetricsOverviewChart(
-      document.getElementById("job-metrics-overview-chart"),
-      <%= Sidekiq.dump_json({
-        series: job_results.map { |(kls, jr)| [kls, jr.dig("series", "s")] }.to_h,
-        marks: @query_result.marks.map { |m| [m.bucket, m.label] },
-        labels: @query_result.buckets,
-        visibleKls: visible_kls,
-        yLabel: t('TotalExecutionTime'),
-        units: t('Seconds').downcase,
-        markLabel: t('Deploy'),
-      }) %>
-    )
-  </script>
+  <canvas id="job-metrics-overview-chart">
+    <%= to_json({
+      series: job_results.map { |(kls, jr)| [kls, jr.dig("series", "s")] }.to_h,
+      marks: @query_result.marks.map { |m| [m.bucket, m.label] },
+      labels: @query_result.buckets,
+      visibleKls: visible_kls,
+      yLabel: t('TotalExecutionTime'),
+      units: t('Seconds').downcase,
+      markLabel: t('Deploy'),
+    }) %>
+  </canvas>
 <% end %>
 
 <div class="table_container">
@@ -46,8 +54,8 @@
         <th><%= t('Name') %></th>
         <th><%= t('Success') %></th>
         <th><%= t('Failure') %></th>
-        <th><%= t('TotalExecutionTime') %></th>
-        <th><%= t('AvgExecutionTime') %></th>
+        <th><%= t('TotalExecutionTime') %> (Seconds)</th>
+        <th><%= t('AvgExecutionTime') %> (Seconds)</th>
       </tr>
       <% if job_results.any? %>
         <% job_results.each_with_index do |(kls, jr), i| %>
@@ -64,12 +72,11 @@
                 />
                 <code><a href="<%= root_path %>metrics/<%= kls %>?period=<%= @period %>"><%= kls %></a></code>
               </div>
-              <script>jobMetricsChart.registerSwatch("<%= id %>")</script>
             </td>
-            <td><%= jr.dig("totals", "p") - jr.dig("totals", "f") %></td>
-            <td><%= jr.dig("totals", "f") %></td>
-            <td><%= jr.dig("totals", "s").round(2) %> seconds</td>
-            <td><%= jr.total_avg("s").round(2) %> seconds</td>
+            <td class="num"><%= number_with_delimiter(jr.dig("totals", "p") - jr.dig("totals", "f")) %></td>
+            <td class="num"><%= number_with_delimiter(jr.dig("totals", "f")) %></td>
+            <td class="num"><%= number_with_delimiter(jr.dig("totals", "s"), precision: 2) %></td>
+            <td class="num"><%= number_with_delimiter(jr.total_avg("s"), precision: 2) %></td>
           </tr>
         <% end %>
       <% else %>
@@ -79,4 +86,6 @@
   </table>
 </div>
 
-<p><small>Data from <%= @query_result.starts_at %> to <%= @query_result.ends_at %></small></p>
+<!--p><small>Data from <%= @query_result.starts_at %> to <%= @query_result.ends_at %></small></p-->
+
+<script type="text/javascript" src="<%= root_path %>javascripts/metrics.js"></script>

data/web/views/metrics_for_job.erb

@@ -1,7 +1,6 @@
 <script type="text/javascript" src="<%= root_path %>javascripts/chart.min.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/chartjs-plugin-annotation.min.js"></script>
 <script type="text/javascript" src="<%= root_path %>javascripts/base-charts.js"></script>
-<script type="text/javascript" src="<%= root_path %>javascripts/metrics.js"></script>
 
 <%
   job_result = @query_result.job_results[@name]
@@ -24,40 +23,30 @@
     <%= erb :_metrics_period_select, locals: { periods: @periods, period: @period, path: "#{root_path}metrics/#{@name}" } %>
   </div>
 
-  <canvas id="hist-totals-chart"></canvas>
-
-  <script>
-    window.histTotalsChart = new HistTotalsChart(
-      document.getElementById("hist-totals-chart"),
-      <%= Sidekiq.dump_json({
-        series: hist_totals,
-        labels: bucket_labels,
-        xLabel: t('ExecutionTime'),
-        yLabel: t('Jobs'),
-        units: t('Jobs').downcase,
-      }) %>
-    )
-  </script>
-
-  <canvas id="hist-bubble-chart"></canvas>
-
-  <script>
-    window.histBubbleChart = new HistBubbleChart(
-      document.getElementById("hist-bubble-chart"),
-      <%= Sidekiq.dump_json({
-        hist: job_result.hist,
-        marks: @query_result.marks.map { |m| [m.bucket, m.label] },
-        labels: @query_result.buckets,
-        histIntervals: bucket_intervals,
-        yLabel: t('ExecutionTime'),
-        markLabel: t('Deploy'),
-        yUnits: t('Seconds').downcase,
-        zUnits: t('Jobs').downcase,
-      }) %>
-    )
-  </script>
-
-  <p><small>Data from <%= @query_result.starts_at %> to <%= @query_result.ends_at %></small></p>
+  <canvas id="hist-totals-chart">
+    <%= to_json({
+      series: hist_totals,
+      labels: bucket_labels,
+      xLabel: t('ExecutionTime'),
+      yLabel: t('Jobs'),
+      units: t('Jobs').downcase,
+    }) %>
+  </canvas>
+
+  <canvas id="hist-bubble-chart">
+    <%= to_json({
+      hist: job_result.hist,
+      marks: @query_result.marks.map { |m| [m.bucket, m.label] },
+      labels: @query_result.buckets,
+      histIntervals: bucket_intervals,
+      yLabel: t('ExecutionTime'),
+      markLabel: t('Deploy'),
+      yUnits: t('Seconds').downcase,
+      zUnits: t('Jobs').downcase,
+    }) %>
+  </canvas>
+
+  <!--p><small>Data from <%= @query_result.starts_at %> to <%= @query_result.ends_at %></small></p-->
 <% else %>
   <h1>
     <a href="<%= root_path %>/metrics"><%= t('Metrics') %></a> /
@@ -66,3 +55,5 @@
 
   <div class="alert alert-success"><%= t('NoJobMetricsFound') %></div>
 <% end %>
+
+<script type="text/javascript" src="<%= root_path %>javascripts/metrics.js"></script>

data/web/views/queues.erb

@@ -18,8 +18,12 @@
             <span class="label label-danger"><%= t('Paused') %></span>
           <% end %>
         </td>
-        <td><%= number_with_delimiter(queue.size) %> </td>
-        <td><% queue_latency = queue.latency %><%= number_with_delimiter(queue_latency.round(2)) %><%= (queue_latency < 60) ? '' : " (#{relative_time(Time.at(Time.now.to_f - queue_latency))})" %> </td>
+        <td class="num"><%= number_with_delimiter(queue.size) %> </td>
+        <td class="num">
+          <% queue_latency = queue.latency %>
+          <%= (queue_latency < 60) ? '' : " (#{relative_time(Time.at(Time.now.to_f - queue_latency))})" %>
+          <%= number_with_delimiter(queue_latency, precision: 2) %>
+        </td>
         <td class="delete-confirm">
           <form action="<%=root_path %>queues/<%= CGI.escape(queue.name) %>" method="post">
             <%= csrf_tag %>