solid_objects 0.12.0 → 0.13.0

data/web/assets/javascripts/charts.js

@@ -0,0 +1,190 @@
+// Draws the dashboard charts. Each canvas carries its own data in a
+// data-chart-values attribute, so this file never fetches on load and the page
+// needs no script-src exception for an inline block.
+//
+// Two of the three charts redraw when the Live poller reports new totals. The
+// third counts instances per actor type, which /stats does not carry, so it
+// stays as the page rendered it.
+(function () {
+  "use strict";
+
+  // Every status gets its own colour. Related statuses stay in the same
+  // family, because a legend with two identical swatches reads as a defect
+  // even when the two statuses genuinely mean the same thing.
+  var STATUS_COLORS = {
+    pending: "#d29922",
+    paused: "#e07b39",
+    processing: "#4493f8",
+    scheduled: "#7c72ff",
+    completed: "#3fb950",
+    delivered: "#2ea8a0",
+    dead: "#f85149"
+  };
+
+  var SERIES_COLOR = "#4493f8";
+  var charts = {};
+
+  function palette() {
+    var styles = window.getComputedStyle(document.body);
+    return {
+      text: styles.getPropertyValue("--text-muted").trim() || "#626d7a",
+      grid: styles.getPropertyValue("--border").trim() || "#dfe3e8"
+    };
+  }
+
+  function values(canvas) {
+    try {
+      return JSON.parse(canvas.getAttribute("data-chart-values"));
+    } catch (error) {
+      return null;
+    }
+  }
+
+  function baseOptions(colors) {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 200 },
+      plugins: { legend: { display: false } },
+      scales: {
+        x: { ticks: { color: colors.text }, grid: { color: colors.grid } },
+        y: {
+          beginAtZero: true,
+          ticks: { color: colors.text, precision: 0 },
+          grid: { color: colors.grid }
+        }
+      }
+    };
+  }
+
+  function barChart(canvas, data, colors, options) {
+    var labels = Object.keys(data);
+    var settings = baseOptions(colors);
+    if (options && options.horizontal) settings.indexAxis = "y";
+
+    return new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            data: labels.map(function (label) {
+              return data[label];
+            }),
+            backgroundColor: SERIES_COLOR,
+            borderRadius: 4,
+            maxBarThickness: 36
+          }
+        ]
+      },
+      options: settings
+    });
+  }
+
+  // One dataset per status so each row shows only the statuses its subsystem
+  // actually has; a subsystem without a status contributes zero to it.
+  function stackedChart(canvas, data, colors) {
+    var rows = Object.keys(data);
+    var statuses = [];
+    rows.forEach(function (row) {
+      Object.keys(data[row]).forEach(function (status) {
+        if (statuses.indexOf(status) === -1) statuses.push(status);
+      });
+    });
+
+    var settings = baseOptions(colors);
+    settings.indexAxis = "y";
+    settings.plugins.legend = { display: true, labels: { color: colors.text } };
+    settings.scales.x.stacked = true;
+    settings.scales.y.stacked = true;
+
+    return new window.Chart(canvas, {
+      type: "bar",
+      data: {
+        labels: rows,
+        datasets: statuses.map(function (status) {
+          return {
+            label: status,
+            backgroundColor: STATUS_COLORS[status] || SERIES_COLOR,
+            borderRadius: 2,
+            data: rows.map(function (row) {
+              return data[row][status] || 0;
+            })
+          };
+        })
+      },
+      options: settings
+    });
+  }
+
+  function build(canvas) {
+    var name = canvas.getAttribute("data-chart");
+    var data = values(canvas);
+    if (!data) return;
+
+    var colors = palette();
+    if (name === "work_by_status") {
+      charts[name] = stackedChart(canvas, data, colors);
+      return;
+    }
+
+    charts[name] = barChart(canvas, data, colors, {
+      horizontal: name === "instances_by_type"
+    });
+  }
+
+  function replace(chart, data) {
+    chart.data.datasets.forEach(function (dataset) {
+      if (!dataset.label) {
+        dataset.data = chart.data.labels.map(function (label) {
+          return data[label] || 0;
+        });
+        return;
+      }
+
+      dataset.data = chart.data.labels.map(function (row) {
+        return (data[row] || {})[dataset.label] || 0;
+      });
+    });
+    chart.update();
+  }
+
+  function refresh(statistics) {
+    if (charts.mailbox_depth) {
+      replace(charts.mailbox_depth, {
+        Ready: statistics.mailbox.ready,
+        Due: statistics.mailbox.due,
+        Claimed: statistics.mailbox.claimed
+      });
+    }
+
+    if (charts.work_by_status) {
+      replace(charts.work_by_status, {
+        Effects: statistics.effects,
+        Broadcasts: statistics.broadcasts,
+        Reminders: statistics.reminders
+      });
+    }
+  }
+
+  function start() {
+    if (!window.Chart) return;
+
+    var canvases = document.querySelectorAll("[data-chart]");
+    Array.prototype.forEach.call(canvases, build);
+
+    document.addEventListener("solid-objects:statistics", function (event) {
+      try {
+        refresh(event.detail);
+      } catch (error) {
+        // A payload missing a section leaves the drawn chart alone.
+      }
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start, { once: true });
+  } else {
+    start();
+  }
+})();

data/web/assets/stylesheets/application.css

@@ -0,0 +1,527 @@
+:root {
+  color-scheme: light dark;
+
+  --page: #f6f7f9;
+  --surface: #ffffff;
+  --surface-sunken: #f0f2f5;
+  --border: #dfe3e8;
+  --text: #1b1f24;
+  --text-muted: #626d7a;
+  --accent: #1f6feb;
+  --accent-contrast: #ffffff;
+  --danger: #b32d2e;
+  --warning: #9a6700;
+  --success: #1a7f37;
+  --radius: 8px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page: #0d1117;
+    --surface: #161b22;
+    --surface-sunken: #0b0f14;
+    --border: #2b3138;
+    --text: #e6edf3;
+    --text-muted: #99a3ad;
+    --accent: #4493f8;
+    --accent-contrast: #0d1117;
+    --danger: #f85149;
+    --warning: #d29922;
+    --success: #3fb950;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--page);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code,
+pre {
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+/* Navigation */
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 0 24px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  flex-wrap: wrap;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 0;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.brand:hover {
+  text-decoration: none;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  flex: 1;
+  flex-wrap: wrap;
+}
+
+.tab {
+  padding: 14px 10px;
+  color: var(--text-muted);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.tab-current {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+  font-weight: 600;
+}
+
+.bar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.environment {
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+
+.poll-toggle {
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.poll-toggle[aria-pressed="true"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+}
+
+/* Layout */
+
+.page {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 1px;
+  background: var(--border);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.metric {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 16px;
+  background: var(--surface);
+  color: var(--text);
+}
+
+.metric:hover {
+  background: var(--surface-sunken);
+  text-decoration: none;
+}
+
+.metric-label {
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.metric-alert .metric-value {
+  color: var(--danger);
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 16px;
+}
+
+.charts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 16px;
+}
+
+.chart-wide {
+  grid-column: 1 / -1;
+}
+
+/* Chart.js measures a responsive canvas against its parent and writes the
+   canvas size back. The parent therefore needs a height of its own: sizing the
+   canvas instead leaves the library measuring a box it just resized, and the
+   chart creeps larger on every redraw.
+
+   Taking the canvas out of flow closes that loop for good. However the library
+   sizes it, it cannot change the height of the box being measured. */
+.chart-frame {
+  position: relative;
+  height: 240px;
+  width: 100%;
+}
+
+.chart-frame canvas {
+  position: absolute;
+  inset: 0;
+}
+
+.card,
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 20px;
+}
+
+.card h2,
+.panel h2 {
+  margin: 0 0 12px;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  color: var(--text-muted);
+}
+
+.panel h3 {
+  margin: 20px 0 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 16px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.actions form {
+  margin: 0;
+}
+
+.note {
+  margin: 12px 0 0;
+  padding: 10px 12px;
+  border-left: 3px solid var(--border);
+  background: var(--surface-sunken);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.note-error {
+  border-left-color: var(--danger);
+  color: var(--danger);
+}
+
+.empty {
+  margin: 0;
+  padding: 20px 0;
+  color: var(--text-muted);
+}
+
+/* Data */
+
+dl {
+  margin: 0;
+  display: grid;
+  gap: 8px;
+}
+
+/* Several attributes sit side by side, so each one stacks its label over its
+   value. A label-left value-right row would put one value against the next
+   label and read as a single phrase. */
+.attributes {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 8px 24px;
+  margin: 16px 0;
+}
+
+.attributes > div {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+.attributes dd {
+  text-align: left;
+}
+
+dl > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 6px;
+}
+
+dt {
+  color: var(--text-muted);
+}
+
+dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  word-break: break-word;
+}
+
+/* Card values are counts and durations, and "4 min 44 s" reads wrong when the
+   unit wraps onto its own line. */
+.card dd {
+  white-space: nowrap;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+th,
+td {
+  padding: 8px 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+th {
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  font-weight: 600;
+}
+
+tbody tr:hover {
+  background: var(--surface-sunken);
+}
+
+time {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.payload {
+  margin: 0;
+  padding: 12px;
+  background: var(--surface-sunken);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.status {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--surface-sunken);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-activated,
+.status-running,
+.status-completed,
+.status-delivered {
+  color: var(--success);
+  border-color: currentColor;
+}
+
+.status-paused,
+.status-draining,
+.status-processing,
+.status-expired {
+  color: var(--warning);
+  border-color: currentColor;
+}
+
+.status-dead {
+  color: var(--danger);
+  border-color: currentColor;
+}
+
+/* Forms */
+
+.filters {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.filter {
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.filter:hover {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.filter-current {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.filters-form {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.filters-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+input,
+select,
+button {
+  font: inherit;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text);
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+button.danger:hover {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+.paging {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 16px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.paging-links {
+  display: flex;
+  gap: 12px;
+}