solid_objects 0.12.1 → 0.13.0

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

data/web/views/_messages.erb

@@ -0,0 +1,29 @@
+<h3><%= h(locals.fetch(:title)) %></h3>
+<% if locals.fetch(:messages).empty? %>
+  <p class="empty"><%= h(locals.fetch(:empty, "None.")) %></p>
+<% else %>
+  <table>
+    <thead>
+      <tr>
+        <th>Sequence</th>
+        <th>Operation</th>
+        <th>Delivery</th>
+        <th>Attempts</th>
+        <th>Available</th>
+        <th>Completed</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% locals.fetch(:messages).each do |message| %>
+        <tr>
+          <td><a href="<%= h(path_to("/messages/#{message.id}")) %>"><%= number(message.sequence) %></a></td>
+          <td><%= h(message.operation) %></td>
+          <td><%= status_label(message.delivery_mode) %></td>
+          <td><%= number(message.attempt_count) %> / <%= number(message.max_attempts) %></td>
+          <td><%= relative_time(message.available_at) %></td>
+          <td><%= relative_time(message.completed_at) %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

data/web/views/_navigation.erb

@@ -0,0 +1,15 @@
+<header class="bar">
+  <a class="brand" href="<%= h(path_to("/")) %>">
+    <span class="brand-mark">SO</span>
+    <span class="brand-name">Solid Objects</span>
+  </a>
+  <nav class="tabs">
+    <% tabs.each do |label, path| %>
+      <a class="tab<%= current_tab?(path) ? " tab-current" : "" %>" href="<%= h(path_to(path)) %>"><%= h(label) %></a>
+    <% end %>
+  </nav>
+  <div class="bar-right">
+    <span class="environment"><%= h(environment_name) %></span>
+    <button type="button" class="poll-toggle" data-poll-toggle aria-pressed="false">Live</button>
+  </div>
+</header>

data/web/views/_paging.erb

@@ -0,0 +1,17 @@
+<nav class="paging" aria-label="Pages">
+  <span class="paging-range">
+    <% if @paginator.total.zero? %>
+      No rows
+    <% else %>
+      <%= number(@paginator.first_record) %>&ndash;<%= number(@paginator.last_record) %> of <%= number(@paginator.total) %>
+    <% end %>
+  </span>
+  <span class="paging-links">
+    <% if @paginator.previous_page %>
+      <a href="<%= page_link("page" => @paginator.previous_page) %>">Previous</a>
+    <% end %>
+    <% if @paginator.next_page %>
+      <a href="<%= page_link("page" => @paginator.next_page) %>">Next</a>
+    <% end %>
+  </span>
+</nav>

data/web/views/_status_filter.erb

@@ -0,0 +1,8 @@
+<nav class="filters" aria-label="Status filter">
+  <% if locals.fetch(:all, true) %>
+    <a class="filter<%= locals[:selected].nil? ? " filter-current" : "" %>" href="<%= page_link("status" => nil, "page" => nil) %>">All</a>
+  <% end %>
+  <% locals.fetch(:statuses).each do |status| %>
+    <a class="filter<%= (locals[:selected] == status) ? " filter-current" : "" %>" href="<%= page_link("status" => status, "page" => nil) %>"><%= h(status) %></a>
+  <% end %>
+</nav>

data/web/views/_summary.erb

@@ -0,0 +1,39 @@
+<% summary = statistics.to_h %>
+<section class="summary" aria-label="Runtime totals">
+  <a class="metric" href="<%= h(path_to("/instances")) %>">
+    <span class="metric-label">Instances</span>
+    <span class="metric-value" data-statistic="instances.total"><%= number(summary.dig(:instances, :total)) %></span>
+  </a>
+  <a class="metric" href="<%= h(path_to("/mailbox")) %>">
+    <span class="metric-label">Ready</span>
+    <span class="metric-value" data-statistic="mailbox.ready"><%= number(summary.dig(:mailbox, :ready)) %></span>
+  </a>
+  <a class="metric" href="<%= h(path_to("/mailbox?status=claimed")) %>">
+    <span class="metric-label">Claimed</span>
+    <span class="metric-value" data-statistic="mailbox.claimed"><%= number(summary.dig(:mailbox, :claimed)) %></span>
+  </a>
+  <div class="metric">
+    <span class="metric-label">Mailbox lag</span>
+    <span class="metric-value" data-statistic="mailbox.latency" data-format="duration"><%= duration(summary.dig(:mailbox, :latency)) %></span>
+  </div>
+  <a class="metric" href="<%= h(path_to("/effects?status=pending")) %>">
+    <span class="metric-label">Effects</span>
+    <span class="metric-value" data-statistic="effects.pending"><%= number(summary.dig(:effects, :pending)) %></span>
+  </a>
+  <a class="metric" href="<%= h(path_to("/broadcasts?status=pending")) %>">
+    <span class="metric-label">Broadcasts</span>
+    <span class="metric-value" data-statistic="broadcasts.pending"><%= number(summary.dig(:broadcasts, :pending)) %></span>
+  </a>
+  <a class="metric" href="<%= h(path_to("/reminders?status=scheduled")) %>">
+    <span class="metric-label">Reminders due</span>
+    <span class="metric-value" data-statistic="reminders.due"><%= number(summary.dig(:reminders, :due)) %></span>
+  </a>
+  <a class="metric metric-alert" href="<%= h(path_to("/dead_letters")) %>">
+    <span class="metric-label">Dead letters</span>
+    <span class="metric-value" data-statistic="dead_letters.total"><%= number(summary.dig(:dead_letters, :total)) %></span>
+  </a>
+  <a class="metric" href="<%= h(path_to("/processes?status=running")) %>">
+    <span class="metric-label">Processes</span>
+    <span class="metric-value" data-statistic="processes.running"><%= number(summary.dig(:processes, :running)) %></span>
+  </a>
+</section>

data/web/views/broadcasts.erb

@@ -0,0 +1,35 @@
+<section class="panel">
+  <h2>Broadcasts</h2>
+  <%= erb(:_status_filter, statuses: SolidObjects::Web::Statistics::BROADCAST_STATUSES, selected: @status) %>
+
+  <% if @paginator.records.empty? %>
+    <p class="empty">No broadcast matches this filter.</p>
+  <% else %>
+    <table>
+      <thead>
+        <tr>
+          <th>Observable</th>
+          <th>Actor</th>
+          <th>Status</th>
+          <th>State version</th>
+          <th>Attempts</th>
+          <th>Delivered</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @paginator.records.each do |broadcast| %>
+          <tr>
+            <td><%= h(broadcast.observable_name) %></td>
+            <td><a href="<%= h(path_to("/instances/#{broadcast.instance_id}")) %>">instance <%= number(broadcast.instance_id) %></a></td>
+            <td><%= status_label(broadcast.status) %></td>
+            <td><%= number(broadcast.state_version) %></td>
+            <td><%= number(broadcast.attempt_count) %></td>
+            <td><%= relative_time(broadcast.delivered_at) %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+
+  <%= erb(:_paging) %>
+</section>