mats/go-otel
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better rum todo
Build and Publish / Metadata (push) Successful in 10s
Details
Build and Publish / BuildAndDeployAmd64 (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
mats committed 2026-09-22 09:15:00 +02:00
1 parent cb3266bf33
commit e81b8c2fcd
6 files changed
+231 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

internal/collector/todos.go
+22 -18
View File
@@ -31,14 +31,16 @@ func clipTo(s string, n int) string {
}
type todoPayload struct {
Project string `json:"project"`
Text string `json:"text"`
Component string `json:"component"`
Path string `json:"path"`
Hash string `json:"hash"`
URL string `json:"url"`
UserAgent string `json:"ua"`
Session string `json:"session"`
Project string `json:"project"`
Text string `json:"text"`
Component string `json:"component"`
Path string `json:"path"`
Hash string `json:"hash"`
URL string `json:"url"`
UserAgent string `json:"ua"`
Session string `json:"session"`
ElementSelector string `json:"elementSelector"`
ElementLabel string `json:"elementLabel"`
}
// HandleTodoCreate ingests a todo posted by otel-todo.js. It is guarded by
@@ -72,16 +74,18 @@ func (c *Collector) HandleTodoCreate(w http.ResponseWriter, r *http.Request) {
id := make([]byte, 8)
_, _ = rand.Read(id)
t := todos.Todo{
ID: hex.EncodeToString(id),
Project: project,
Text: text,
Component: clipTo(p.Component, maxTodoMeta),
Path: clipTo(p.Path, maxTodoMeta),
Hash: clipTo(p.Hash, maxTodoMeta),
URL: clipTo(p.URL, maxTodoMeta),
UserAgent: clipTo(p.UserAgent, maxTodoMeta),
Session: clipTo(p.Session, maxTodoMeta),
CreatedAt: time.Now().UTC(),
ID: hex.EncodeToString(id),
Project: project,
Text: text,
Component: clipTo(p.Component, maxTodoMeta),
Path: clipTo(p.Path, maxTodoMeta),
Hash: clipTo(p.Hash, maxTodoMeta),
URL: clipTo(p.URL, maxTodoMeta),
UserAgent: clipTo(p.UserAgent, maxTodoMeta),
Session: clipTo(p.Session, maxTodoMeta),
ElementSelector: clipTo(p.ElementSelector, maxTodoMeta),
ElementLabel: clipTo(p.ElementLabel, maxTodoMeta),
CreatedAt: time.Now().UTC(),
}
if err := c.todoStore.Add(r.Context(), t); err != nil {
log.Printf("failed to store todo: %v", err)
internal/todos/todos.go
+19 -17
View File
@@ -17,18 +17,20 @@ import (
// Todo is one note filed from a page. Project is the RUM service name.
type Todo struct {
ID string `json:"id"`
Project string `json:"project"`
Text string `json:"text"`
Component string `json:"component,omitempty"`
Path string `json:"path,omitempty"`
Hash string `json:"hash,omitempty"`
URL string `json:"url,omitempty"`
UserAgent string `json:"userAgent,omitempty"`
Session string `json:"session,omitempty"`
CreatedAt time.Time `json:"createdAt"`
Done bool `json:"done"`
DoneAt time.Time `json:"doneAt,omitzero"`
ID string `json:"id"`
Project string `json:"project"`
Text string `json:"text"`
Component string `json:"component,omitempty"`
Path string `json:"path,omitempty"`
Hash string `json:"hash,omitempty"`
URL string `json:"url,omitempty"`
UserAgent string `json:"userAgent,omitempty"`
Session string `json:"session,omitempty"`
ElementSelector string `json:"elementSelector,omitempty"` // CSS selector of the referenced element, if picked
ElementLabel string `json:"elementLabel,omitempty"` // human-readable tag/text summary of that element
CreatedAt time.Time `json:"createdAt"`
Done bool `json:"done"`
DoneAt time.Time `json:"doneAt,omitzero"`
}
// Store persists todos. List returns newest first; an empty project means all.
@@ -154,7 +156,7 @@ func NewClickHouseStore(ctx context.Context, conn driver.Conn, db string) (*Clic
if err != nil {
return nil, err
}
for _, col := range []string{"done UInt8", "done_at DateTime64(3, 'UTC')"} {
for _, col := range []string{"done UInt8", "done_at DateTime64(3, 'UTC')", "element_selector String", "element_label String"} {
if err := conn.Exec(ctx, fmt.Sprintf(`ALTER TABLE %s.todos ADD COLUMN IF NOT EXISTS %s`, db, col)); err != nil {
return nil, err
}
@@ -163,12 +165,12 @@ func NewClickHouseStore(ctx context.Context, conn driver.Conn, db string) (*Clic
}
func (s *ClickHouseStore) Add(ctx context.Context, t Todo) error {
return s.conn.Exec(ctx, fmt.Sprintf(`INSERT INTO %s.todos (id, project, text, component, path, hash, url, user_agent, session, created_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, s.db),
t.ID, t.Project, t.Text, t.Component, t.Path, t.Hash, t.URL, t.UserAgent, t.Session, t.CreatedAt.UTC())
return s.conn.Exec(ctx, fmt.Sprintf(`INSERT INTO %s.todos (id, project, text, component, path, hash, url, user_agent, session, element_selector, element_label, created_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, s.db),
t.ID, t.Project, t.Text, t.Component, t.Path, t.Hash, t.URL, t.UserAgent, t.Session, t.ElementSelector, t.ElementLabel, t.CreatedAt.UTC())
}
func (s *ClickHouseStore) List(ctx context.Context, project string, limit int) ([]Todo, error) {
q := fmt.Sprintf(`SELECT id, project, text, component, path, hash, url, user_agent, session, created_at, done, done_at FROM %s.todos`, s.db)
q := fmt.Sprintf(`SELECT id, project, text, component, path, hash, url, user_agent, session, element_selector, element_label, created_at, done, done_at FROM %s.todos`, s.db)
var args []any
if project != "" {
q += ` WHERE project = ?`
@@ -185,7 +187,7 @@ func (s *ClickHouseStore) List(ctx context.Context, project string, limit int) (
for rows.Next() {
var t Todo
var done uint8
if err := rows.Scan(&t.ID, &t.Project, &t.Text, &t.Component, &t.Path, &t.Hash, &t.URL, &t.UserAgent, &t.Session, &t.CreatedAt, &done, &t.DoneAt); err != nil {
if err := rows.Scan(&t.ID, &t.Project, &t.Text, &t.Component, &t.Path, &t.Hash, &t.URL, &t.UserAgent, &t.Session, &t.ElementSelector, &t.ElementLabel, &t.CreatedAt, &done, &t.DoneAt); err != nil {
return nil, err
}
t.Done = done != 0
otel-ui/src/components/Tabs.tsx
+29 -4
View File
@@ -7,6 +7,7 @@ import {
CheckCircle2,
ChevronDown,
ChevronUp,
X,
} from "lucide-react"
import type { LucideIcon } from "lucide-react"
import { MetricsVisualizer } from "./MetricsVisualizer"
@@ -398,11 +399,27 @@ export const TabsComponent = () => {
{statusNotice && (
<div
role="status"
className={`fixed bottom-6 left-1/2 z-50 flex max-w-[min(560px,calc(100vw-120px))] -translate-x-1/2 items-center gap-3 rounded-[10px] border bg-ds-surface px-4 py-2.5 text-[13px] ${
statusNotice.error ? "border-ds-critical/40 text-ds-critical" : "border-ds-line-strong text-ds-text"
className={`fixed bottom-10 left-1/2 z-50 flex max-w-[min(560px,calc(100vw-120px))] -translate-x-1/2 items-center gap-3 overflow-hidden rounded-2xl border bg-ds-surface/90 py-2.5 pl-2.5 pr-4 text-[13px] shadow-[0_8px_30px_-8px_rgba(0,0,0,0.45)] backdrop-blur-md animate-in fade-in slide-in-from-bottom-3 duration-300 ${
statusNotice.error ? "border-ds-critical/30" : "border-ds-ok/25"
}`}
>
<span className="truncate">{statusNotice.text}</span>
<span
className={`pointer-events-none absolute inset-x-0 top-0 h-[2px] ${
statusNotice.error ? "bg-ds-critical/70" : "bg-ds-ok/70"
}`}
aria-hidden="true"
/>
<span
className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${
statusNotice.error ? "bg-ds-critical-bg text-ds-critical" : "bg-ds-ok/15 text-ds-ok"
}`}
aria-hidden="true"
>
{statusNotice.error ? <AlertTriangle className="h-3.5 w-3.5" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
</span>
<span className={`truncate ${statusNotice.error ? "text-ds-critical" : "text-ds-text"}`}>
{statusNotice.text}
</span>
{statusNotice.undo && (
<button
type="button"
@@ -410,11 +427,19 @@ export const TabsComponent = () => {
statusNotice.undo?.()
setStatusNotice(null)
}}
className="shrink-0 font-semibold text-ds-accent hover:underline"
className="shrink-0 rounded-full border border-ds-accent/30 bg-ds-accent-bg px-2.5 py-1 font-semibold text-ds-accent transition-colors hover:bg-ds-accent hover:text-ds-on-accent"
>
Undo
</button>
)}
<button
type="button"
onClick={() => setStatusNotice(null)}
aria-label="Dismiss"
className="shrink-0 rounded-full p-1 text-ds-text-3 transition-colors hover:bg-ds-fill hover:text-ds-text"
>
<X className="h-3.5 w-3.5" />
</button>
</div>
)}
</div>
otel-ui/src/components/TodosVisualizer.tsx
+16 -5
View File
@@ -1,5 +1,5 @@
import { useMemo, useState } from "react"
import { CheckCircle2, ExternalLink, ListTodo, RefreshCw, RotateCcw } from "lucide-react"
import { CheckCircle2, Crosshair, ExternalLink, ListTodo, RefreshCw, RotateCcw } from "lucide-react"
import { useTodos } from "../hooks/useTodos"
import { formatRelativeTime } from "../lib/timeUtils"
import type { Todo } from "../lib/types"
@@ -16,9 +16,20 @@ const TodoCard = ({ todo, onDone }: { todo: Todo; onDone: (todo: Todo, done: boo
}`}
>
<div className="flex items-start gap-4">
<p className={`min-w-0 flex-1 whitespace-pre-wrap break-words text-[14px] ${todo.done ? "text-ds-text-3 line-through" : "text-ds-text"}`}>
{todo.text}
</p>
<div className="min-w-0 flex-1">
<p className={`whitespace-pre-wrap break-words text-[14px] ${todo.done ? "text-ds-text-3 line-through" : "text-ds-text"}`}>
{todo.text}
</p>
{todo.elementSelector && (
<div
title={todo.elementSelector}
className="mt-2 inline-flex max-w-full items-center gap-1.5 rounded-[7px] border border-ds-accent/25 bg-ds-accent-bg px-2 py-1 text-[11px] text-ds-accent"
>
<Crosshair className="h-3 w-3 shrink-0" aria-hidden="true" />
<span className="truncate font-[family-name:var(--font-data)]">{todo.elementLabel || todo.elementSelector}</span>
</div>
)}
</div>
<div className="flex shrink-0 items-center gap-2">
{todo.url && (
<a
@@ -141,7 +152,7 @@ export const TodosVisualizer = () => {
</p>
{todos.length === 0 && !loading && (
<p className="max-w-sm text-[12.5px] text-ds-text-3">
Press Alt+Shift+T on a page running otel-rum.js to file one.
Press Alt+Shift+T on a page running otel-rum.js to file one — click "Reference an element" in that dialog to point at what needs to change.
</p>
)}
</div>
otel-ui/src/lib/types.ts
+2
View File
@@ -347,6 +347,8 @@ export interface Todo {
url?: string;
userAgent?: string;
session?: string;
elementSelector?: string;
elementLabel?: string;
createdAt: string;
done: boolean;
doneAt?: string;
static/otel-todo.js
+143 -7
View File
@@ -1,10 +1,12 @@
/**
* otel-todo.js - file todos / issues straight from the page.
*
* Shows a small floating symbol and listens for a keyboard shortcut. Either
* opens a native <dialog> in the bottom-right corner with a text box and an
* optional component picker, and POSTs the note (with the current path and
* hash) to the collector's /v1/todos endpoint.
* Shows a small floating symbol and listens for a keyboard shortcut. Opens a
* native <dialog> in the bottom-right corner with a text box, an optional
* component picker, and an "Reference an element" toggle that lets you click
* any node on the page (with a hover outline) to attach its CSS selector and
* a short label to the note. POSTs the note (with the current path, hash and
* any picked element) to the collector's /v1/todos endpoint.
*
* <script src="https://otel.example.com/static/otel-todo.js"
* data-service-name="checkout-web"
@@ -65,7 +67,22 @@
'dialog.otel-todo textarea{min-height:90px;resize:vertical}' +
'dialog.otel-todo .row{display:flex;gap:8px;justify-content:flex-end;align-items:center}' +
'dialog.otel-todo .meta{opacity:.65;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}' +
'dialog.otel-todo .status{margin-right:auto;font-size:12px}';
'dialog.otel-todo .status{margin-right:auto;font-size:12px}' +
'.otel-todo-pick{display:inline-flex;align-items:center;gap:5px;border:1px solid #8886;border-radius:6px;' +
'background:transparent;color:inherit;padding:5px 8px;margin:0 0 6px;cursor:pointer;font-size:12px}' +
'.otel-todo-pick:hover,.otel-todo-pick:focus-visible{background:#8882}' +
'.otel-todo-pick[aria-pressed="true"]{background:#3b82f633;border-color:#3b82f6aa;color:#3b82f6}' +
'.otel-todo-ref{display:none;align-items:center;gap:6px;margin:0 0 6px;padding:5px 7px;border:1px solid #8886;' +
'border-radius:6px;background:#8881;font:11px/1.3 ui-monospace,monospace}' +
'.otel-todo-ref.show{display:flex}' +
'.otel-todo-ref span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}' +
'.otel-todo-ref button{border:0;background:none;cursor:pointer;color:inherit;opacity:.6;font:12px/1 inherit;padding:0 2px}' +
'.otel-todo-ref button:hover{opacity:1}' +
'.otel-todo-hover-outline{position:fixed;z-index:2147483645;pointer-events:none;border:2px solid #3b82f6;' +
'background:#3b82f626;border-radius:3px;transition:all .05s linear}' +
'.otel-todo-pick-hint{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:2147483647;' +
'background:#3b82f6;color:#fff;font:12px/1 system-ui,sans-serif;padding:7px 12px;border-radius:20px;' +
'box-shadow:0 4px 14px #0004}';
document.head.appendChild(css);
var dlg = document.createElement('dialog');
@@ -74,6 +91,8 @@
dlg.innerHTML =
'<form method="dialog">' +
'<div class="meta"></div>' +
'<button type="button" class="otel-todo-pick" aria-pressed="false">⌖ Reference an element</button>' +
'<div class="otel-todo-ref"><span></span><button type="button" data-clear-ref aria-label="Remove reference">✕</button></div>' +
'<textarea name="text" placeholder="What needs doing?" required maxlength="4000"></textarea>' +
'<select name="component" aria-label="Component (optional)"></select>' +
'<div class="row"><span class="status" role="status"></span>' +
@@ -84,8 +103,118 @@
var selectEl = form.elements.component;
var statusEl = form.querySelector('.status');
var metaEl = form.querySelector('.meta');
var pickBtn = form.querySelector('.otel-todo-pick');
var refEl = form.querySelector('.otel-todo-ref');
var refLabelEl = refEl.querySelector('span');
document.body.appendChild(dlg);
// --- element picker: click a node on the page to attach its selector ---
var picked = null; // { selector, label }
var hoverBox = null;
var picking = false;
var hint = null;
function cssPath(el) {
if (!(el instanceof Element)) return '';
var parts = [];
var node = el;
while (node && node.nodeType === 1 && parts.length < 6) {
if (node.id) { parts.unshift('#' + CSS.escape(node.id)); break; }
var part = node.tagName.toLowerCase();
var cls = (node.getAttribute('class') || '').trim().split(/\s+/).filter(Boolean).slice(0, 2);
if (cls.length) part += '.' + cls.map(function (c) { return CSS.escape(c); }).join('.');
var parent = node.parentElement;
if (parent) {
var siblings = [].filter.call(parent.children, function (c) { return c.tagName === node.tagName; });
if (siblings.length > 1) part += ':nth-of-type(' + (siblings.indexOf(node) + 1) + ')';
}
parts.unshift(part);
node = parent;
}
return parts.join(' > ');
}
function describeElement(el) {
var tag = el.tagName.toLowerCase();
var text = (el.getAttribute('aria-label') || el.textContent || '').replace(/\s+/g, ' ').trim();
if (text.length > 60) text = text.slice(0, 60) + '…';
return { selector: cssPath(el), label: text ? tag + ' – "' + text + '"' : tag };
}
function setRef(ref) {
picked = ref;
if (ref) {
refLabelEl.textContent = ref.label;
refLabelEl.title = ref.selector;
refEl.classList.add('show');
} else {
refEl.classList.remove('show');
}
}
function ensureHoverBox() {
if (!hoverBox) {
hoverBox = document.createElement('div');
hoverBox.className = 'otel-todo-hover-outline';
document.body.appendChild(hoverBox);
}
return hoverBox;
}
function onPickMove(e) {
var el = document.elementFromPoint(e.clientX, e.clientY);
if (!el || dlg.contains(el)) { ensureHoverBox().style.display = 'none'; return; }
var r = el.getBoundingClientRect();
var box = ensureHoverBox();
box.style.display = 'block';
box.style.left = r.left + 'px';
box.style.top = r.top + 'px';
box.style.width = r.width + 'px';
box.style.height = r.height + 'px';
}
function onPickClick(e) {
var el = document.elementFromPoint(e.clientX, e.clientY);
if (!el || dlg.contains(el)) return; // let dialog controls work normally
e.preventDefault();
e.stopPropagation();
setRef(describeElement(el));
stopPicking();
}
function onPickKey(e) {
if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); stopPicking(); }
}
function startPicking() {
if (picking) return;
picking = true;
pickBtn.setAttribute('aria-pressed', 'true');
pickBtn.textContent = '⌖ Click an element… (Esc to cancel)';
hint = document.createElement('div');
hint.className = 'otel-todo-pick-hint';
hint.textContent = 'Click the element you mean — Esc to cancel';
document.body.appendChild(hint);
document.addEventListener('mousemove', onPickMove, true);
document.addEventListener('click', onPickClick, true);
document.addEventListener('keydown', onPickKey, true);
}
function stopPicking() {
if (!picking) return;
picking = false;
pickBtn.setAttribute('aria-pressed', 'false');
pickBtn.textContent = '⌖ Reference an element';
document.removeEventListener('mousemove', onPickMove, true);
document.removeEventListener('click', onPickClick, true);
document.removeEventListener('keydown', onPickKey, true);
if (hoverBox) { hoverBox.style.display = 'none'; }
if (hint) { hint.remove(); hint = null; }
}
pickBtn.addEventListener('click', function () { picking ? stopPicking() : startPicking(); });
refEl.querySelector('[data-clear-ref]').addEventListener('click', function () { setRef(null); });
function components() {
var seen = {};
var list = [];
@@ -113,12 +242,16 @@
selectEl.hidden = list.length === 0;
metaEl.textContent = project + ' · ' + location.pathname + location.hash;
statusEl.textContent = '';
setRef(null);
// Non-modal so the page stays usable while the note is being written.
dlg.show();
textEl.focus();
}
function close() { if (dlg.open) dlg.close(); }
function close() {
stopPicking();
if (dlg.open) dlg.close();
}
form.querySelector('[data-cancel]').addEventListener('click', close);
dlg.addEventListener('keydown', function (e) {
@@ -145,11 +278,14 @@
hash: location.hash,
url: location.href,
ua: navigator.userAgent,
session: sessionId
session: sessionId,
elementSelector: picked ? picked.selector : '',
elementLabel: picked ? picked.label : ''
})
}).then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
textEl.value = '';
setRef(null);
close();
}).catch(function (err) {
statusEl.textContent = 'Failed: ' + err.message;