pghero 3.7.0 → 4.0.0

data/app/assets/javascripts/pghero/application.js

@@ -1,39 +1,37 @@
-//= require ./jquery
 //= require ./nouislider
 //= require ./Chart.bundle
 //= require ./chartkick
 //= require ./highlight.min
 
 function highlightQueries() {
-  $("pre code").each(function (i, block) {
-    $(block).addClass("language-pgsql");
-    hljs.highlightElement(block);
-  });
+  for (const block of document.querySelectorAll("code.language-pgsql")) {
+    if (!block.dataset.highlighted) {
+      hljs.highlightElement(block);
+    }
+  }
 }
 
 function initSlider() {
   function roundTime(time) {
-    var period = 1000 * 60 * 5;
+    const period = 1000 * 60 * 5;
     return new Date(Math.ceil(time.getTime() / period) * period);
   }
 
   function pad(num) {
-    return (num < 10) ? "0" + num : num;
+    return num < 10 ? "0" + num : num;
   }
 
-  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
-  var days = 1;
-  var now = new Date();
-  var sliderStartAt = roundTime(now) - days * 24 * 60 * 60 * 1000;
-  var sliderMax = 24 * 12 * days;
+  const days = 1;
+  const now = new Date();
+  const sliderStartAt = roundTime(now) - days * 24 * 60 * 60 * 1000;
+  const sliderMax = 24 * 12 * days;
 
   startAt = startAt || sliderStartAt;
-  var min = (startAt > 0) ? (startAt - sliderStartAt) / (1000 * 60 * 5) : 0;
+  const min = startAt > 0 ? (startAt - sliderStartAt) / (1000 * 60 * 5) : 0;
 
-  var max = (endAt > 0) ? (endAt - sliderStartAt) / (1000 * 60 * 5) : sliderMax;
+  const max = endAt > 0 ? (endAt - sliderStartAt) / (1000 * 60 * 5) : sliderMax;
 
-  var slider = document.getElementById("slider");
+  const slider = document.getElementById("slider");
 
   noUiSlider.create(slider, {
     range: {
@@ -46,35 +44,37 @@ function initSlider() {
   });
 
   // remove outline for mouse only
-  $(".noUi-handle").mousedown(function () {
-    $(this).addClass("no-outline");
-  }).blur(function () {
-    $(this).removeClass("no-outline");
+  const handle = document.querySelector(".noUi-handle");
+  handle.addEventListener("mousedown", function (e) {
+    e.target.classList.add("no-outline");
+  });
+  handle.addEventListener("blur", function (e) {
+    e.target.classList.remove("no-outline");
   });
 
   function updateText() {
-    var values = slider.noUiSlider.get();
+    const values = slider.noUiSlider.get();
     setText("#range-start", values[0]);
     setText("#range-end", values[1]);
   }
 
   function setText(selector, offset) {
-    var time = timeAt(offset);
+    const time = timeAt(offset);
 
-    var html = "";
+    let html = "";
     if (time === now) {
       if (selector === "#range-end") {
         html = "Now";
       }
     } else {
-      html = time.getDate() + " " + months[time.getMonth()] + " " + pad(time.getHours()) + ":" + pad(time.getMinutes());
+      html = time.toLocaleDateString(undefined, {month: 'short', day: 'numeric'}) + " " + pad(time.getHours()) + ":" + pad(time.getMinutes());
     }
-    $(selector).text(html);
+    document.querySelector(selector).textContent = html;
   }
 
   function timeAt(offset) {
-    var time = new Date(sliderStartAt + (offset * 5) * 60 * 1000);
-    return (time > now) ? now : time;
+    const time = new Date(sliderStartAt + offset * 5 * 60 * 1000);
+    return time > now ? now : time;
   }
 
   function timeParam(time) {
@@ -82,19 +82,19 @@ function initSlider() {
   }
 
   function queriesPath(params) {
-    var path = "queries";
-    if (params.start_at || params.end_at || params.sort || params.min_average_time || params.min_calls || params.debug) {
-      path += "?" + $.param(params);
+    let path = "queries";
+    if (params.start_at || params.end_at || params.sort || params.min_average_time || params.min_calls || params.user || params.debug) {
+      path += "?" + (new URLSearchParams(params)).toString();
     }
     return path;
   }
 
   function refreshStats(push) {
-    var values = slider.noUiSlider.get();
-    var startAt = push ? timeAt(values[0]) : new Date(window.startAt);
-    var endAt = timeAt(values[1]);
+    const values = slider.noUiSlider.get();
+    const startAt = push ? timeAt(values[0]) : new Date(window.startAt);
+    const endAt = timeAt(values[1]);
 
-    var params = {}
+    const params = {};
     if (startAt.getTime() != sliderStartAt) {
       params.start_at = timeParam(startAt);
     }
@@ -110,38 +110,44 @@ function initSlider() {
     if (minCalls) {
       params.min_calls = minCalls;
     }
+    if (user) {
+      params.user = user;
+    }
     if (debug) {
       params.debug = debug;
     }
 
-    var path = queriesPath(params);
-
-    $(".queries-table th a").each(function () {
-      var p = $.extend({}, params, {sort: $(this).data("sort"), min_average_time: minAverageTime, min_calls: minCalls, debug: debug});
-      if (!p.sort) {
-        delete p.sort;
-      }
-      if (!p.min_average_time) {
-        delete p.min_average_time;
-      }
-      if (!p.min_calls) {
-        delete p.min_calls;
-      }
-      if (!p.debug) {
-        delete p.debug;
-      }
-      $(this).attr("href", queriesPath(p));
-    });
+    const showAll = document.getElementById("show-all");
+    if (showAll) {
+      const showAllParams = Object.assign({}, params);
+      delete showAllParams.user;
+      showAll.setAttribute("href", queriesPath(showAllParams));
+    }
 
+    for (const link of document.querySelectorAll(".queries-table th a")) {
+      const linkParams = Object.assign({}, params, {sort: link.getAttribute("data-sort")});
+      link.setAttribute("href", queriesPath(linkParams));
+    }
 
-    var callback = function (response, status, xhr) {
-      if (status === "error" ) {
-        $(".queries-info").css("color", "red").text(xhr.status + " " + xhr.statusText);
-      } else {
+    const queries = document.getElementById("queries");
+    queries.innerHTML = '<tr><td colspan="3"><p class="queries-info text-muted">...</p></td></tr>';
+    const path = queriesPath(params);
+    fetch(path, {headers: {"X-Requested-With": "XMLHttpRequest"}})
+      .then(function (response) {
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+        return response.text();
+      })
+      .then(function (text) {
+        queries.innerHTML = text;
         highlightQueries();
-      }
-    };
-    $("#queries").html('<tr><td colspan="3"><p class="queries-info text-muted">...</p></td></tr>').load(path, callback);
+      })
+      .catch(function (error) {
+        const queriesInfo = document.querySelector(".queries-info");
+        queriesInfo.style.color = "red";
+        queriesInfo.textContent = error.message;
+      });
 
     if (push && history.pushState) {
       history.pushState(null, null, path);
@@ -153,21 +159,51 @@ function initSlider() {
     refreshStats(true);
   });
   updateText();
-  $(function () {
+  document.addEventListener("DOMContentLoaded", function () {
     refreshStats(false);
   });
 }
 
-$(document).on("click", ".query-code", function () {
-  this.style.maxHeight = "none";
+document.addEventListener("click", function (e) {
+  const target = e.target.closest(".query-code");
+  if (target) {
+    target.style.maxHeight = "none";
+  }
+});
+
+document.addEventListener("click", function (e) {
+  const target = e.target.closest(".migration-link");
+  if (target) {
+    e.preventDefault();
+    target.parentElement.nextElementSibling.style.display = "block";
+  }
+});
+
+document.addEventListener("click", function (e) {
+  const target = e.target.closest(".show-details");
+  if (target) {
+    target.nextElementSibling.nextElementSibling.style.display = "block";
+    target.style.display = "none";
+  }
 });
 
-$(document).on("click", ".migration-link", function (e) {
-  e.preventDefault();
-  $(this).parent().next(".migration").css("display", "block");
+document.addEventListener("click", function (e) {
+  const target = e.target.closest("#copy");
+  if (target) {
+    const explanation = document.getElementById("explanation").textContent;
+    navigator.clipboard.writeText(explanation).then(function () {
+      const buttonText = target.textContent;
+      target.textContent = "Copied!";
+      setTimeout(function () {
+        target.textContent = buttonText;
+      }, 2000);
+    });
+  }
 });
 
-$(document).on("click", ".show-details", function () {
-  $(this).nextAll(".details").css("display", "block");
-  $(this).css("display", "none");
+document.addEventListener("DOMContentLoaded", function () {
+  const copyButton = document.getElementById("copy");
+  if (copyButton && navigator.clipboard) {
+    copyButton.classList.remove("hide");
+  }
 });