sidekiq 6.5.12 → 7.3.9

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

@@ -0,0 +1,106 @@
+if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  Chart.defaults.borderColor = "#333";
+  Chart.defaults.color = "#aaa";
+}
+
+class Colors {
+  constructor() {
+    this.assignments = {};
+    this.success = "#006f68";
+    this.failure = "#af0014";
+    this.fallback = "#999";
+    this.primary = "#537bc4";
+    this.available = [
+      // Colors taken from https://www.chartjs.org/docs/latest/samples/utils.html
+      "#537bc4",
+      "#4dc9f6",
+      "#f67019",
+      "#f53794",
+      "#acc236",
+      "#166a8f",
+      "#00a950",
+      "#58595b",
+      "#8549ba",
+      "#991b1b",
+    ];
+  }
+
+  checkOut(assignee) {
+    const color =
+      this.assignments[assignee] || this.available.shift() || this.fallback;
+    this.assignments[assignee] = color;
+    return color;
+  }
+
+  checkIn(assignee) {
+    const color = this.assignments[assignee];
+    delete this.assignments[assignee];
+
+    if (color && color != this.fallback) {
+      this.available.unshift(color);
+    }
+  }
+}
+
+class BaseChart {
+  constructor(el, options) {
+    this.el = el;
+    this.options = options;
+    this.colors = new Colors();
+  }
+
+  init() {
+    this.chart = new Chart(this.el, {
+      type: this.options.chartType,
+      data: { labels: this.options.labels, datasets: this.datasets },
+      options: this.chartOptions,
+    });
+  }
+
+  update() {
+    this.chart.options = this.chartOptions;
+    this.chart.update();
+  }
+
+  get chartOptions() {
+    let chartOptions = {
+      interaction: {
+        mode: "nearest",
+        axis: "x",
+        intersect: false,
+      },
+      scales: {
+        x: {
+          ticks: {
+            autoSkipPadding: 10,
+          },
+        },
+      },
+      plugins: {
+        legend: {
+          display: false,
+        },
+        annotation: {
+          annotations: {},
+        },
+        tooltip: {
+          animation: false,
+        },
+      },
+    };
+
+    if (this.options.marks) {
+      this.options.marks.forEach(([bucket, label], i) => {
+        chartOptions.plugins.annotation.annotations[`deploy-${i}`] = {
+          type: "line",
+          xMin: bucket,
+          xMax: bucket,
+          borderColor: "rgba(220, 38, 38, 0.4)",
+          borderWidth: 2,
+        };
+      });
+    }
+
+    return chartOptions;
+  }
+}

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

@@ -0,0 +1,194 @@
+class DashboardChart extends BaseChart {
+  constructor(el, options) {
+    super(el, { ...options, chartType: "line" });
+    this.init();
+  }
+
+  get data() {
+    return [this.options.processed, this.options.failed];
+  }
+
+  get datasets() {
+    return [
+      {
+        label: this.options.processedLabel,
+        data: this.data[0],
+        borderColor: this.colors.success,
+        backgroundColor: this.colors.success,
+        borderWidth: 2,
+        pointRadius: 2,
+      },
+      {
+        label: this.options.failedLabel,
+        data: this.data[1],
+        borderColor: this.colors.failure,
+        backgroundColor: this.colors.failure,
+        borderWidth: 2,
+        pointRadius: 2,
+      },
+    ];
+  }
+
+  get chartOptions() {
+    return {
+      ...super.chartOptions,
+      aspectRatio: 4,
+      scales: {
+        ...super.chartOptions.scales,
+        x: {
+          ...super.chartOptions.scales.x,
+          ticks: {
+            ...super.chartOptions.scales.x.ticks,
+            callback: function (value, index, ticks) {
+              // Remove the year from the date string
+              return this.getLabelForValue(value).split("-").slice(1).join("-");
+            },
+          },
+        },
+        y: {
+          ...super.chartOptions.scales.y,
+          beginAtZero: true,
+        },
+      },
+    };
+  }
+}
+
+class RealtimeChart extends DashboardChart {
+  constructor(el, options) {
+    super(el, options);
+    let d = parseInt(localStorage.sidekiqTimeInterval) || 5000;
+    if (d < 2000) { d = 2000; }
+    this.delay = d
+    this.startPolling();
+    document.addEventListener("interval:update", this.handleUpdate.bind(this));
+  }
+
+  async startPolling() {
+    // Fetch initial values so we can show diffs moving forward
+    this.stats = await this.fetchStats();
+    this._interval = setInterval(this.poll.bind(this), this.delay);
+  }
+
+  async poll() {
+    const stats = await this.fetchStats();
+    const processed = stats.sidekiq.processed - this.stats.sidekiq.processed;
+    const failed = stats.sidekiq.failed - this.stats.sidekiq.failed;
+
+    this.chart.data.labels.shift();
+    this.chart.data.datasets[0].data.shift();
+    this.chart.data.datasets[1].data.shift();
+    this.chart.data.labels.push(new Date().toUTCString().split(" ")[4]);
+    this.chart.data.datasets[0].data.push(processed);
+    this.chart.data.datasets[1].data.push(failed);
+    this.chart.update();
+
+    updateScreenReaderDashboardValues(processed, failed);
+
+    updateStatsSummary(this.stats.sidekiq);
+    updateRedisStats(this.stats.redis);
+    updateFooterUTCTime(this.stats.server_utc_time);
+    updateNumbers();
+    pulseBeacon();
+
+    this.stats = stats;
+  }
+
+  async fetchStats() {
+    const response = await fetch(this.options.updateUrl);
+    return await response.json();
+  }
+
+  handleUpdate(e) {
+    this.delay = parseInt(e.detail);
+    clearInterval(this._interval);
+    this.startPolling();
+  }
+
+  registerLegend(el) {
+    this.legend = el;
+  }
+
+  renderLegend(dp) {
+    const entry1 = this.legendEntry(dp[0]);
+    const entry2 = this.legendEntry(dp[1]);
+    const time = document.createElement("span");
+    time.classList.add("time");
+    time.innerText = dp[0].label;
+
+    this.legend.replaceChildren(entry1, entry2, time)
+  }
+
+  legendEntry(dp) {
+    const wrapper = document.createElement("span");
+
+    const swatch = document.createElement("span");
+    swatch.classList.add("swatch");
+    swatch.style.backgroundColor = dp.dataset.borderColor;
+    wrapper.appendChild(swatch)
+    
+    const label = document.createElement("span");
+    label.innerText = `${dp.dataset.label}: ${dp.formattedValue}`;
+    wrapper.appendChild(label)
+    return wrapper;
+  }
+
+  renderCursor(dp) {
+    if (this.cursorX != dp[0].label) {
+      this.cursorX = dp[0].label;
+      this.update()
+    }
+  }
+
+  get chartOptions() {
+    return {
+      ...super.chartOptions,
+      scales: {
+        ...super.chartOptions.scales,
+        x: {
+          ...super.chartOptions.scales.x,
+          display: false,
+        },
+      },
+      plugins: {
+        ...super.chartOptions.plugins,
+        tooltip: {
+          ...super.chartOptions.plugins.tooltip,
+          enabled: false,
+          external: (context) => {
+            const dp = context.tooltip.dataPoints;
+            if (dp && dp.length == 2 && this.legend) {
+              this.renderLegend(dp);
+              this.renderCursor(dp);
+            }
+          },
+        },
+        annotation: {
+          annotations: {
+            ...super.chartOptions.plugins.annotation.annotations,
+            cursor: this.cursorX && {
+              type: "line",
+              borderColor: "rgba(0, 0, 0, 0.3)",
+              xMin: this.cursorX,
+              xMax: this.cursorX,
+              borderWidth: 1,
+            },
+          },
+        },
+      },
+    };
+  }
+}
+
+  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,197 +1,13 @@
 Sidekiq = {};
 
-var nf = new Intl.NumberFormat();
-var poller;
-var realtimeGraph = function(updatePath) {
-  var timeInterval = parseInt(localStorage.sidekiqTimeInterval) || 5000;
-  var graphElement = document.getElementById("realtime");
-
-  var graph = new Rickshaw.Graph( {
-    element: graphElement,
-    width: responsiveWidth(),
-    height: 200,
-    renderer: 'line',
-    interpolation: 'linear',
-
-    series: new Rickshaw.Series.FixedDuration([{ name: graphElement.dataset.failedLabel, color: '#af0014' }, { name: graphElement.dataset.processedLabel, color: '#006f68' }], undefined, {
-      timeInterval: timeInterval,
-      maxDataPoints: 100,
-    })
-  });
-
-  var y_axis = new Rickshaw.Graph.Axis.Y( {
-    graph: graph,
-    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-    ticksTreatment: 'glow'
-  });
-
-  graph.render();
-
-  var legend = document.getElementById('realtime-legend');
-  var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
-    render: function(args) {
-      legend.innerHTML = "";
-
-      var timestamp = document.createElement('div');
-      timestamp.className = 'timestamp';
-      timestamp.innerHTML = args.formattedXValue;
-      legend.appendChild(timestamp);
-
-      args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {
-        var line = document.createElement('div');
-        line.className = 'line';
-
-        var swatch = document.createElement('div');
-        swatch.className = 'swatch';
-        swatch.style.backgroundColor = d.series.color;
-
-        var label = document.createElement('div');
-        label.className = 'tag';
-        label.innerHTML = d.name + ": " + nf.format(Math.floor(d.formattedYValue));
-
-        line.appendChild(swatch);
-        line.appendChild(label);
-        legend.appendChild(line);
-
-        var dot = document.createElement('div');
-        dot.className = 'dot';
-        dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
-        dot.style.borderColor = d.series.color;
-
-        this.element.appendChild(dot);
-        dot.className = 'dot active';
-        this.show();
-      }, this );
-    }
-  });
-  var hover = new Hover( { graph: graph } );
-
-  var i = 0;
-  poller = setInterval(function() {
-    var url = document.getElementById("history").getAttribute("data-update-url");
-
-    fetch(url).then(response => response.json()).then(data => {
-      if (i === 0) {
-        var processed = data.sidekiq.processed;
-        var failed = data.sidekiq.failed;
-      } else {
-        var processed = data.sidekiq.processed - Sidekiq.processed;
-        var failed = data.sidekiq.failed - Sidekiq.failed;
-      }
-
-      dataPoint = {};
-      dataPoint[graphElement.dataset.failedLabel] = failed;
-      dataPoint[graphElement.dataset.processedLabel] = processed;
-
-      graph.series.addData(dataPoint);
-      graph.render();
-
-      Sidekiq.processed = data.sidekiq.processed;
-      Sidekiq.failed = data.sidekiq.failed;
-
-      updateStatsSummary(data.sidekiq);
-      updateRedisStats(data.redis);
-      updateFooterUTCTime(data.server_utc_time)
-
-      pulseBeacon();
-    });
-
-    i++;
-  }, timeInterval);
-}
-
-var historyGraph = function() {
-  var h = document.getElementById("history");
-  processed = createSeries(h.getAttribute("data-processed"));
-  failed = createSeries(h.getAttribute("data-failed"));
-
-  var graphElement = h;
-  var graph = new Rickshaw.Graph( {
-    element: graphElement,
-    width: responsiveWidth(),
-    height: 200,
-    renderer: 'line',
-    interpolation: 'linear',
-    series: [
-      {
-        color: "#af0014",
-        data: failed,
-        name: graphElement.dataset.failedLabel
-      }, {
-        color: "#006f68",
-        data: processed,
-        name: graphElement.dataset.processedLabel
-      }
-    ]
-  } );
-  var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
-  var y_axis = new Rickshaw.Graph.Axis.Y({
-    graph: graph,
-    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
-    ticksTreatment: 'glow'
-  });
-
-  graph.render();
-
-  var legend = document.getElementById('history-legend');
-  var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
-    render: function(args) {
-      legend.innerHTML = "";
-
-      var timestamp = document.createElement('div');
-      timestamp.className = 'timestamp';
-      timestamp.innerHTML = args.formattedXValue;
-      legend.appendChild(timestamp);
-
-      args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {
-        var line = document.createElement('div');
-        line.className = 'line';
-
-        var swatch = document.createElement('div');
-        swatch.className = 'swatch';
-        swatch.style.backgroundColor = d.series.color;
-
-        var label = document.createElement('div');
-        label.className = 'tag';
-        label.innerHTML = d.name + ": " + nf.format(Math.floor(d.formattedYValue));
-
-        line.appendChild(swatch);
-        line.appendChild(label);
-        legend.appendChild(line);
-
-        var dot = document.createElement('div');
-        dot.className = 'dot';
-        dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
-        dot.style.borderColor = d.series.color;
-
-        this.element.appendChild(dot);
-        dot.className = 'dot active';
-        this.show();
-      }, this );
-    }
-  });
-  var hover = new Hover( { graph: graph } );
-}
-
-var createSeries = function(data) {
-  var obj = JSON.parse(data);
-  var series = [];
-  for (var date in obj) {
-    var value = obj[date];
-    var point = { x: Date.parse(date)/1000, y: value };
-    series.unshift(point);
-  }
-  return series;
-};
-
 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) {
@@ -211,14 +27,8 @@ var pulseBeacon = function() {
   window.setTimeout(() => { document.getElementById('beacon').classList.remove('pulse'); }, 1000);
 }
 
-// Render graphs
-var renderGraphs = function() {
-  realtimeGraph();
-  historyGraph();
-};
-
 var setSliderLabel = function(val) {
-  document.getElementById('sldr-text').innerText = Math.round(parseFloat(val) / 1000) + ' sec';
+  document.getElementById('sldr-text').innerText = Math.round(parseFloat(val) / 1000) + ' s';
 }
 
 var ready = (callback) => {
@@ -226,9 +36,13 @@ var ready = (callback) => {
   else document.addEventListener("DOMContentLoaded", callback);
 }
 
-ready(() => {
-  renderGraphs();
+var updateScreenReaderDashboardValues = function(processed, failed) {
+  let lastDashboardUpdateSpan = document.getElementById("sr-last-dashboard-update");
+  var updateText = document.getElementById("sr-last-dashboard-update-template").innerText;
+  lastDashboardUpdateSpan.innerText = updateText.replace("PROCESSED_COUNT", processed).replace("FAILED_COUNT", failed);
+}
 
+ready(() => {
   var sldr = document.getElementById('sldr');
   if (typeof localStorage.sidekiqTimeInterval !== 'undefined') {
     sldr.value = localStorage.sidekiqTimeInterval;
@@ -236,44 +50,14 @@ ready(() => {
   }
 
   sldr.addEventListener("change", event => {
-    clearInterval(poller);
     localStorage.sidekiqTimeInterval = sldr.value;
     setSliderLabel(sldr.value);
-    resetGraphs();
-    renderGraphs();
+    sldr.dispatchEvent(
+      new CustomEvent("interval:update", { bubbles: true, detail: sldr.value })
+    );
   });
 
   sldr.addEventListener("mousemove", event => {
     setSliderLabel(sldr.value);
   });
 });
-
-// Reset graphs
-var resetGraphs = function() {
-  document.getElementById('realtime').innerHTML = '';
-  document.getElementById('history').innerHTML = '';
-};
-
-// Resize graphs after resizing window
-var debounce = function(fn, timeout) {
-  var timeoutID = -1;
-  return function() {
-    if (timeoutID > -1) {
-      window.clearTimeout(timeoutID);
-    }
-    timeoutID = window.setTimeout(fn, timeout);
-  }
-};
-
-window.onresize = function() {
-  var prevWidth = window.innerWidth;
-  return debounce(function () {
-    var currWidth = window.innerWidth;
-    if (prevWidth !== currWidth) {
-      prevWidth = currWidth;
-      clearInterval(poller);
-      resetGraphs();
-      renderGraphs();
-    }
-  }, 125);
-}();