sidekiq 6.4.0 → 7.0.8

data/web/assets/javascripts/application.js

@@ -9,7 +9,9 @@ var ready = (callback) => {
   else document.addEventListener("DOMContentLoaded", callback);
 }
 
-ready(() => {
+ready(addListeners)
+
+function addListeners() {
   document.querySelectorAll(".check_all").forEach(node => {
     node.addEventListener("click", event => {
       node.closest('table').querySelectorAll('input[type=checkbox]').forEach(inp => { inp.checked = !!node.checked; });
@@ -26,42 +28,66 @@ ready(() => {
   })
 
   document.querySelectorAll("[data-toggle]").forEach(node => {
-    node.addEventListener("click", event => {
-      var targName = node.getAttribute("data-toggle");
-      var full = document.getElementById(targName + "_full");
-      if (full.style.display == "block") {
-        full.style.display = 'none';
-      } else {
-        full.style.display = 'block';
-      }
-    })
+    node.addEventListener("click", addDataToggleListeners)
   })
 
+  addShiftClickListeners()
   updateFuzzyTimes();
+  setLivePollFromUrl();
 
   var buttons = document.querySelectorAll(".live-poll");
   if (buttons.length > 0) {
     buttons.forEach(node => {
-      node.addEventListener("click", event => {
-        if (localStorage.sidekiqLivePoll == "enabled") {
-          localStorage.sidekiqLivePoll = "disabled";
-          clearTimeout(livePollTimer);
-          livePollTimer = null;
-        } else {
-          localStorage.sidekiqLivePoll = "enabled";
-          livePollCallback();
-        }
-
-        updateLivePollButton();
-      })
+      node.addEventListener("click", addPollingListeners)
     });
 
     updateLivePollButton();
-    if (localStorage.sidekiqLivePoll == "enabled") {
+    if (localStorage.sidekiqLivePoll == "enabled" && !livePollTimer) {
       scheduleLivePoll();
     }
   }
-})
+}
+
+function addPollingListeners(_event)  {
+  if (localStorage.sidekiqLivePoll == "enabled") {
+    localStorage.sidekiqLivePoll = "disabled";
+    clearTimeout(livePollTimer);
+    livePollTimer = null;
+  } else {
+    localStorage.sidekiqLivePoll = "enabled";
+    livePollCallback();
+  }
+
+  updateLivePollButton();
+}
+
+function addDataToggleListeners(event) {
+  var source = event.target || event.srcElement;
+  var targName = source.getAttribute("data-toggle");
+  var full = document.getElementById(targName);
+  if (full.style.display == "block") {
+    full.style.display = 'none';
+  } else {
+    full.style.display = 'block';
+  }
+}
+
+function addShiftClickListeners() {
+  let checkboxes = Array.from(document.querySelectorAll(".shift_clickable"));
+  let lastChecked = null;
+  checkboxes.forEach(checkbox => {
+    checkbox.addEventListener("click", (e) => {
+      if (e.shiftKey && lastChecked) {
+        let myIndex = checkboxes.indexOf(checkbox);
+        let lastIndex = checkboxes.indexOf(lastChecked);
+        let [min, max] = [myIndex, lastIndex].sort();
+        let newState = checkbox.checked;
+        checkboxes.slice(min, max).forEach(c => c.checked = newState);
+      }
+      lastChecked = checkbox;
+    });
+  });
+}
 
 function updateFuzzyTimes() {
   var locale = document.body.getAttribute("data-locale");
@@ -76,6 +102,14 @@ function updateFuzzyTimes() {
   t.cancel();
 }
 
+function setLivePollFromUrl() {
+  var url_params = new URL(window.location.href).searchParams
+
+  if (url_params.get("poll") == "true") {
+    localStorage.sidekiqLivePoll = "enabled";
+  }
+}
+
 function updateLivePollButton() {
   if (localStorage.sidekiqLivePoll == "enabled") {
     document.querySelectorAll('.live-poll-stop').forEach(box => { box.style.display = "inline-block" })
@@ -89,7 +123,19 @@ function updateLivePollButton() {
 function livePollCallback() {
   clearTimeout(livePollTimer);
 
-  fetch(window.location.href).then(resp => resp.text()).then(replacePage).finally(scheduleLivePoll)
+  fetch(window.location.href)
+  .then(checkResponse)
+  .then(resp => resp.text())
+  .then(replacePage)
+  .catch(showError)
+  .finally(scheduleLivePoll)
+}
+
+function checkResponse(resp) {
+  if (!resp.ok) {
+    throw response.error();
+  }
+  return resp
 }
 
 function scheduleLivePoll() {
@@ -107,5 +153,9 @@ function replacePage(text) {
   var header_status = doc.querySelector('.status')
   document.querySelector('.status').replaceWith(header_status)
 
-  updateFuzzyTimes();
+  addListeners();
+}
+
+function showError(error) {
+  console.error(error)
 }

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;
+  }
+}