side_bro 0.2.2 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2882e3f5f9428e6068b4a7a96b5ff253454dd60692a11eb53e1054399df0a6f4
-  data.tar.gz: 840234c4510a1af907e837e36ab1308419438194b5a8e205a9eb194e5292644e
+  metadata.gz: 0c5694dd3d4c5847cffd789314b1f343d15246c0c80758173153026fad0544e8
+  data.tar.gz: c80886ec41afd7f842e78982b4ade79d55d9657fa7061056f99c3e9186000509
 SHA512:
-  metadata.gz: 74635e64db2372ac7013e346a50361b126e10082da20a1c199c9f476f58f84bde3c2de46e6a7ecfe8ef088eaee94bba198b735f138add225e66fbe8f56fe7d0b
-  data.tar.gz: f2bc7ca9cde7caed603b8ffa73abd624ca8e51c2b189145b2c8d063ee5000c8409ee31b56726d296c878a1df077d53b7521caff7d47158ab2587edda11163ea4
+  metadata.gz: 06f6f13e9152e3e7992a353d22a9d518f81562f627ccd7336a9718bba5039333a9217aa3ab31b0ec1b86c09776a80b83a3eb2f9392305cffcad304934b957fa1
+  data.tar.gz: a4ba97aa3c4fac898b94852dbd81400f8c194efd0e2c07762c926c26c0dc52f0c4c7624f8cce64f501e953701220a7aaed430cbbe5967e6c19b6cabcf644eee5

data/README.md

@@ -48,3 +48,7 @@ end
 ## Session Secret
 
 Set `SIDE_BRO_SESSION_SECRET` env var for a stable session secret across restarts.
+
+---
+
+**Maintained by [Ruby Dev](https://www.rubydev.ro)** — works great with **[Dead Bro](https://www.deadbro.com)**, APM for Rails apps.

data/lib/side_bro/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SideBro
-  VERSION = "0.2.2"
+  VERSION = "0.2.3"
 end

data/lib/side_bro/web/application.rb

@@ -126,11 +126,15 @@ module SideBro
           @filter_job  = params["filter_job"].to_s.strip
           @filter_args = params["filter_args"].to_s.strip
           @filtering   = !@filter_job.empty? || !@filter_args.empty?
+          @search      = params["q"].to_s.strip
+          @searching   = !@search.empty?
+          needle       = @search.downcase
 
-          if @filtering
+          if @filtering || @searching
             @jobs = @queue.lazy.select { |j|
               (@filter_job.empty?  || job_display_class(j).include?(@filter_job)) &&
-              (@filter_args.empty? || display_args(j).include?(@filter_args))
+              (@filter_args.empty? || display_args(j).include?(@filter_args)) &&
+              (!@searching || [j.jid, job_display_class(j), display_args(j)].any? { |f| f.to_s.downcase.include?(needle) })
             }.first(@per_page)
             @total = nil
           else

data/lib/side_bro/web/helpers.rb

@@ -30,6 +30,13 @@ module SideBro
       script.end_with?("/") ? script : "#{script}/"
     end
 
+    # Appends the file mtime so browsers refetch an asset when it changes
+    def asset_path(path)
+      file = File.join(SideBro::Web::ASSETS_PATH, path)
+      version = File.exist?(file) ? File.mtime(file).to_i : SideBro::VERSION
+      "#{root_path}assets/#{path}?v=#{version}"
+    end
+
     def locale
       session[:locale] || "en"
     end

data/web/assets/javascripts/dashboard.js

@@ -41,68 +41,71 @@
   var prevProcessed = null;
   var prevFailed = null;
 
+  // Draws in real pixels so text and lines are never stretched
+  function sizeSvg(svg) {
+    var W = Math.max(200, Math.round(svg.clientWidth));
+    var H = Math.max(120, Math.round(svg.clientHeight));
+    svg.setAttribute("viewBox", "0 0 " + W + " " + H);
+    return { W: W, H: H };
+  }
+
+  // Flat area chart: thin line over a translucent fill, four edge-aligned x labels
+  var PAD_T = 8, PAD_B = 26;
+
+  function drawAreaChart(svg, series, labels) {
+    var size = sizeSvg(svg);
+    var W = size.W, H = size.H, ch = H - PAD_T - PAD_B;
+    var len = series[0].data.length;
+    var all = [];
+    series.forEach(function (s) { all = all.concat(s.data); });
+    var maxY = Math.max(1, Math.max.apply(null, all)) * 1.15;
+    var x = function (i) { return (i / Math.max(len - 1, 1)) * W; };
+    var y = function (v) { return PAD_T + (1 - v / maxY) * ch; };
+    var base = PAD_T + ch;
+
+    var body = "";
+    series.forEach(function (s) {
+      var line = "";
+      s.data.forEach(function (v, i) { line += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " "; });
+      var area = line + "L" + W + "," + base + " L0," + base + " Z";
+      body += "<path d=\"" + area + "\" fill=\"" + s.color + "\" fill-opacity=\"0.16\"/>";
+      body += "<path d=\"" + line + "\" stroke=\"" + s.color + "\" stroke-width=\"1.5\" fill=\"none\" stroke-linejoin=\"round\"/>";
+    });
+
+    var text = "";
+    labels.forEach(function (l, j) {
+      var anchor = j === 0 ? "start" : (j === labels.length - 1 ? "end" : "middle");
+      var xx = (j / (labels.length - 1)) * W;
+      text += "<text x=\"" + xx + "\" y=\"" + (H - 6) + "\" font-size=\"10\" fill=\"#4f567c\" text-anchor=\"" + anchor + "\" font-family=\"Geist Mono\">" + l + "</text>";
+    });
+
+    svg.innerHTML = body + text;
+  }
+
+  function clock(d) {
+    return [d.getHours(), d.getMinutes(), d.getSeconds()].map(function (n) { return n < 10 ? "0" + n : n; }).join(":");
+  }
+
   // ---- live chart ----
   function renderLiveChart() {
     var svg = document.getElementById("liveChart");
     if (!svg) return;
-    var W = 1200, H = 280, PAD_L = 54, PAD_R = 20, PAD_T = 18, PAD_B = 28;
-    var cw = W - PAD_L - PAD_R, ch = H - PAD_T - PAD_B;
     var interval = getInterval();
     var totalSec = (N - 1) * interval;
     var chartWindow = document.getElementById("chartWindow");
     if (chartWindow) chartWindow.textContent = totalSec >= 60 ? Math.round(totalSec / 60) + " min" : totalSec + "s";
-    var all = seriesProcessed.concat(seriesFailed);
-    var maxY = Math.max(12, Math.ceil(Math.max.apply(null, all)));
-    var x = function (i) { return PAD_L + (i / (N - 1)) * cw; };
-    var y = function (v) { return PAD_T + (1 - v / maxY) * ch; };
-
-    function makePath(s) {
-      var d = "";
-      s.forEach(function (v, i) { d += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " "; });
-      return d;
-    }
-    function makeArea(s) {
-      var d = "M" + x(0) + "," + y(0) + " ";
-      s.forEach(function (v, i) { d += "L" + x(i).toFixed(1) + "," + y(v).toFixed(1) + " "; });
-      d += "L" + x(N - 1) + "," + y(0) + " Z";
-      return d;
-    }
-
-    var grid = "";
-    for (var i = 0; i <= 4; i++) {
-      var yy = PAD_T + (i / 4) * ch;
-      var val = Math.round(maxY - (i / 4) * maxY);
-      grid += "<line x1=\"" + PAD_L + "\" y1=\"" + yy + "\" x2=\"" + (W - PAD_R) + "\" y2=\"" + yy + "\" stroke=\"#1f1638\" stroke-dasharray=\"3 4\"/>";
-      grid += "<text x=\"" + (PAD_L - 8) + "\" y=\"" + (yy + 4) + "\" font-size=\"11\" fill=\"#6a5f8a\" text-anchor=\"end\" font-family=\"JetBrains Mono\">" + val + "</text>";
-    }
-    var xLabels = "";
-    for (var j = 0; j <= 4; j++) {
-      var xx = PAD_L + (j / 4) * cw;
-      var sec = Math.round(((4 - j) / 4) * totalSec);
-      xLabels += "<text x=\"" + xx + "\" y=\"" + (H - 8) + "\" font-size=\"11\" fill=\"#6a5f8a\" text-anchor=\"middle\" font-family=\"JetBrains Mono\">" + (sec === 0 ? "now" : "-" + sec + "s") + "</text>";
-    }
 
-    svg.innerHTML =
-      "<defs>" +
-        "<linearGradient id=\"gradProc\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" +
-          "<stop offset=\"0%\" stop-color=\"#4be3ff\" stop-opacity=\"0.45\"/>" +
-          "<stop offset=\"100%\" stop-color=\"#4be3ff\" stop-opacity=\"0\"/>" +
-        "</linearGradient>" +
-        "<filter id=\"glow\"><feGaussianBlur stdDeviation=\"2\"/></filter>" +
-      "</defs>" +
-      grid + xLabels +
-      "<path d=\"" + makeArea(seriesProcessed) + "\" fill=\"url(#gradProc)\"/>" +
-      "<path d=\"" + makePath(seriesProcessed) + "\" stroke=\"#4be3ff\" stroke-width=\"2\" fill=\"none\" filter=\"url(#glow)\" opacity=\"0.6\"/>" +
-      "<path d=\"" + makePath(seriesProcessed) + "\" stroke=\"#4be3ff\" stroke-width=\"2\" fill=\"none\"/>" +
-      "<path d=\"" + makePath(seriesFailed) + "\" stroke=\"#ff5470\" stroke-width=\"2\" fill=\"none\"/>" +
-      "<circle cx=\"" + x(N - 1) + "\" cy=\"" + y(seriesProcessed[N - 1]) + "\" r=\"4\" fill=\"#4be3ff\"/>" +
-      "<circle cx=\"" + x(N - 1) + "\" cy=\"" + y(seriesProcessed[N - 1]) + "\" r=\"8\" fill=\"#4be3ff\" opacity=\"0.25\"/>";
+    var now = Date.now();
+    var labels = [0, 1, 2, 3].map(function (j) { return clock(new Date(now - ((3 - j) / 3) * totalSec * 1000)); });
+    drawAreaChart(svg, [
+      { data: seriesFailed, color: "#f2708a" },
+      { data: seriesProcessed, color: "#7c6cf6" }
+    ], labels);
 
     var tip = document.getElementById("chartTip");
     svg.onmousemove = function (e) {
       var rect = svg.getBoundingClientRect();
-      var px = (e.clientX - rect.left) / rect.width * W;
-      var idx = Math.max(0, Math.min(N - 1, Math.round(((px - PAD_L) / cw) * (N - 1))));
+      var idx = Math.max(0, Math.min(N - 1, Math.round(((e.clientX - rect.left) / rect.width) * (N - 1))));
       document.getElementById("tipProc").textContent = seriesProcessed[idx].toFixed(1);
       document.getElementById("tipFail").textContent = seriesFailed[idx].toFixed(1);
       var ageSec = (N - 1 - idx) * getInterval();
@@ -117,101 +120,33 @@
     svg.onmouseleave = function () { tip.style.display = "none"; };
   }
 
-  function formatVal(v) {
-    if (v >= 1000000) return (v / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-    if (v >= 1000) return Math.round(v / 1000) + "K";
-    return String(v);
-  }
-
   // ---- history chart ----
   var currentRange = "month";
 
   function renderHistoryChart() {
     var svg = document.getElementById("historyChart");
     if (!svg) return;
-    var W = 1200, H = 320, PAD_L = 60, PAD_R = 30, PAD_T = 20, PAD_B = 40;
-    var cw = W - PAD_L - PAD_R, ch = H - PAD_T - PAD_B;
-
     var histData = window.HISTORY_DATA;
     if (!histData) return;
 
-    // select subset based on range
-    var allPoints = histData.processed;
-    var allFailed = histData.failed;
-    var allLabels = histData.labels;
-    var total = allPoints.length;
-
+    var total = histData.processed.length;
     var sliceLen = total;
     if (currentRange === "week") sliceLen = Math.min(7, total);
     else if (currentRange === "month") sliceLen = Math.min(30, total);
     else if (currentRange === "3m") sliceLen = Math.min(90, total);
     else if (currentRange === "6m") sliceLen = Math.min(180, total);
 
-    var points = allPoints.slice(0, sliceLen);
-    var failed = allFailed.slice(0, sliceLen);
-    var labels = allLabels.slice(0, sliceLen);
+    var points = histData.processed.slice(0, sliceLen);
+    var failed = histData.failed.slice(0, sliceLen);
+    var labels = histData.labels.slice(0, sliceLen);
     if (points.length === 0) return;
 
-    var maxY = Math.max(1, Math.max.apply(null, points.concat(failed)));
-    var x = function (i) { return PAD_L + (i / Math.max(points.length - 1, 1)) * cw; };
-    var y = function (v) { return PAD_T + (1 - v / maxY) * ch; };
-
-    var line = "", area = "M" + x(0) + "," + y(0) + " ";
-    var failLine = "", failArea = "M" + x(0) + "," + y(0) + " ";
-    points.forEach(function (v, i) {
-      line += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
-      area += "L" + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
-    });
-    area += "L" + x(points.length - 1) + "," + y(0) + " Z";
-    failed.forEach(function (v, i) {
-      failLine += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
-      failArea += "L" + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
-    });
-    failArea += "L" + x(failed.length - 1) + "," + y(0) + " Z";
-
-    var grid = "";
-    for (var i = 0; i <= 4; i++) {
-      var yy = PAD_T + (i / 4) * ch;
-      var val = Math.round(maxY - (i / 4) * maxY);
-      grid += "<line x1=\"" + PAD_L + "\" y1=\"" + yy + "\" x2=\"" + (W - PAD_R) + "\" y2=\"" + yy + "\" stroke=\"#1f1638\" stroke-dasharray=\"2 4\"/>";
-      if (i > 0) grid += "<text x=\"" + (PAD_L - 10) + "\" y=\"" + (yy + 4) + "\" font-size=\"11\" fill=\"#6a5f8a\" text-anchor=\"end\" font-family=\"JetBrains Mono\">" + formatVal(val) + "</text>";
-    }
-
-    // label thinning
-    var labelStep = Math.max(1, Math.floor(labels.length / 6));
-    var xLabels = "";
-    labels.forEach(function (l, i) {
-      if (i % labelStep !== 0 && i !== labels.length - 1) return;
-      var xx = x(i);
-      xLabels += "<line x1=\"" + xx + "\" y1=\"" + PAD_T + "\" x2=\"" + xx + "\" y2=\"" + (H - PAD_B) + "\" stroke=\"#1f1638\" stroke-dasharray=\"2 4\"/>";
-      xLabels += "<text x=\"" + xx + "\" y=\"" + (H - 14) + "\" font-size=\"12\" fill=\"#a98cff\" text-anchor=\"middle\" font-family=\"JetBrains Mono\">" + l + "</text>";
-    });
-
-    svg.innerHTML =
-      "<defs>" +
-        "<linearGradient id=\"gradHist\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" +
-          "<stop offset=\"0%\" stop-color=\"#a98cff\" stop-opacity=\"0.35\"/>" +
-          "<stop offset=\"60%\" stop-color=\"#a98cff\" stop-opacity=\"0.05\"/>" +
-          "<stop offset=\"100%\" stop-color=\"#a98cff\" stop-opacity=\"0\"/>" +
-        "</linearGradient>" +
-        "<linearGradient id=\"gradHistLine\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">" +
-          "<stop offset=\"0%\" stop-color=\"#a98cff\"/>" +
-          "<stop offset=\"60%\" stop-color=\"#ff5cd6\"/>" +
-          "<stop offset=\"100%\" stop-color=\"#7a3dff\"/>" +
-        "</linearGradient>" +
-        "<linearGradient id=\"gradFail\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" +
-          "<stop offset=\"0%\" stop-color=\"#ff5470\" stop-opacity=\"0.25\"/>" +
-          "<stop offset=\"100%\" stop-color=\"#ff5470\" stop-opacity=\"0\"/>" +
-        "</linearGradient>" +
-      "</defs>" +
-      grid + xLabels +
-      "<path d=\"" + area + "\" fill=\"url(#gradHist)\"/>" +
-      "<path d=\"" + failArea + "\" fill=\"url(#gradFail)\"/>" +
-      "<path d=\"" + line + "\" stroke=\"url(#gradHistLine)\" stroke-width=\"2.4\" fill=\"none\" stroke-linejoin=\"round\" stroke-linecap=\"round\"/>" +
-      "<path d=\"" + failLine + "\" stroke=\"#ff5470\" stroke-width=\"1.6\" fill=\"none\" stroke-linejoin=\"round\" stroke-linecap=\"round\"/>" +
-      points.map(function (v, i) {
-        return "<circle cx=\"" + x(i).toFixed(1) + "\" cy=\"" + y(v).toFixed(1) + "\" r=\"2.4\" fill=\"#170f29\" stroke=\"#a98cff\" stroke-width=\"1.5\"/>";
-      }).join("");
+    var last = labels.length - 1;
+    var picked = [0, 1, 2, 3].map(function (j) { return labels[Math.round((j / 3) * last)]; });
+    drawAreaChart(svg, [
+      { data: failed, color: "#f2708a" },
+      { data: points, color: "#7c6cf6" }
+    ], picked);
   }
 
   // ---- live polling via fetch ----
@@ -259,4 +194,10 @@
   renderLiveChart();
   renderHistoryChart();
   restartTimer();
+
+  var resizeTimer = null;
+  window.addEventListener("resize", function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () { renderLiveChart(); renderHistoryChart(); }, 100);
+  });
 })();