@oneuptime/common 11.7.3 → 12.0.0

package/build/dist/Utils/Dashboard/HtmlWidgetDocument.js

@@ -0,0 +1,198 @@
+import DashboardVariableInterpolation from "./VariableInterpolation";
+/*
+ * Placeholder syntax for dashboard variables: {{name}}, with optional inner
+ * whitespace. Matching on the template (rather than building a pattern per
+ * variable name) means a variable whose name contains regex metacharacters
+ * can never widen the match.
+ */
+const VARIABLE_PLACEHOLDER = /\{\{\s*([a-zA-Z0-9_.-]+)\s*\}\}/g;
+/*
+ * The reset the author's CSS builds on. Transparent by default so the widget
+ * blends into the dashboard card, which is white and has its own rounded
+ * border; an author who wants a filled widget sets `body { background: ... }`
+ * in their own CSS and wins on cascade order, because their <style> is
+ * emitted after this one.
+ */
+const BASE_CSS = `
+*, *::before, *::after { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; height: 100%; background: transparent; }
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #374151;
+  overflow: auto;
+  -webkit-font-smoothing: antialiased;
+}
+`;
+export default class HtmlWidgetDocument {
+    /*
+     * The iframe's sandbox attribute.
+     *
+     * Built by adding tokens to an empty string rather than by removing them
+     * from a permissive default, so a new option can only ever widen the
+     * sandbox on purpose. `allow-popups-to-escape-sandbox` rides along with
+     * `allow-popups` because a popup that inherits the opaque origin loads as
+     * a blank sandboxed document — a link to a runbook would appear broken.
+     * The escaped popup is an ordinary top-level tab with a URL the viewer can
+     * see, which is what a link is.
+     */
+    static getSandboxAttribute(permissions) {
+        const tokens = [];
+        if (permissions.allowScripts) {
+            tokens.push("allow-scripts");
+        }
+        if (permissions.allowForms) {
+            tokens.push("allow-forms");
+        }
+        if (permissions.allowPopups) {
+            tokens.push("allow-popups");
+            tokens.push("allow-popups-to-escape-sandbox");
+        }
+        return tokens.join(" ");
+    }
+    /*
+     * Dashboard variables flattened to name → value for templating.
+     *
+     * Resolution is delegated to DashboardVariableInterpolation so this widget
+     * agrees with every query-driven widget about what a variable currently
+     * means (selected value, else default, else nothing). Multi-select joins
+     * with "," because that is the form an author would paste into a filter.
+     */
+    static resolveVariables(variables) {
+        var _a;
+        const values = {};
+        if (!variables || variables.length === 0) {
+            return values;
+        }
+        for (const variable of variables) {
+            if (!variable.name) {
+                continue;
+            }
+            const resolved = DashboardVariableInterpolation.resolveValue(variable);
+            if (!resolved) {
+                values[variable.name] = "";
+                continue;
+            }
+            if (resolved.multi && resolved.multi.length > 0) {
+                values[variable.name] = resolved.multi.join(",");
+                continue;
+            }
+            values[variable.name] = (_a = resolved.scalar) !== null && _a !== void 0 ? _a : "";
+        }
+        return values;
+    }
+    /*
+     * Substitutes {{name}} placeholders.
+     *
+     * A placeholder naming a variable that does not exist is left alone rather
+     * than blanked: the author is far more likely to have written literal
+     * braces (a template literal in their own JS, a Handlebars snippet they
+     * are generating) than to have referenced a variable that was deleted, and
+     * silently deleting their text is the worse failure.
+     *
+     * Values are substituted raw, exactly as the metrics widgets substitute
+     * them into queries. Escaping is not a security control here — the
+     * document is already an opaque-origin sandbox running the author's own
+     * script — and escaping would break the common `<div style="color:
+     * {{color}}">` case. Authors who need a value inside JS should read
+     * window.ONEUPTIME.variables, which is JSON and always well-formed.
+     */
+    static interpolate(template, values) {
+        if (!template) {
+            return "";
+        }
+        return template.replace(VARIABLE_PLACEHOLDER, (match, name) => {
+            const value = values[name];
+            return value === undefined ? match : value;
+        });
+    }
+    /*
+     * Neutralizes the sequence that would end the <style> element early.
+     *
+     * `\/` is a valid CSS escape for `/` in every context a declaration or
+     * selector can appear in, and inside a comment the backslash is just text,
+     * so the author's CSS keeps its meaning while the HTML tokenizer stops
+     * seeing a closing tag.
+     */
+    static escapeForStyleElement(css) {
+        if (!css) {
+            return "";
+        }
+        return css.replace(/<\/style/gi, "<\\/style");
+    }
+    /*
+     * Same idea for <script>. `<\/script` is the standard inline-script
+     * escape (it is what bundlers emit) and is meaning-preserving wherever the
+     * sequence can legally occur in JS — inside a string, template literal, or
+     * regex.
+     *
+     * Not covered: `<!--<script` in the author's source, which puts the
+     * tokenizer into the double-escaped state where `</script>` no longer
+     * closes the element. Writing that requires legacy HTML-like JS comments,
+     * and the blast radius is the author's own widget rendering wrong inside
+     * its sandbox — not a privilege boundary.
+     */
+    static escapeForScriptElement(javascript) {
+        if (!javascript) {
+            return "";
+        }
+        return javascript.replace(/<\/script/gi, "<\\/script");
+    }
+    /*
+     * JSON for embedding in a <script> body. Every `<` is rewritten to its
+     * \\u003c escape, which is the same string to a JSON parser but cannot
+     * start a tag, so no variable value can terminate the element. In JSON a
+     * `<` only ever appears inside a string, so the rewrite is lossless.
+     */
+    static serializeContext(context) {
+        return JSON.stringify(context).replace(/</g, "\\u003c");
+    }
+    static getContext(options) {
+        return {
+            variables: HtmlWidgetDocument.resolveVariables(options.variables),
+            startDate: options.startDate ? options.startDate.toISOString() : null,
+            endDate: options.endDate ? options.endDate.toISOString() : null,
+        };
+    }
+    /* The complete srcdoc for the widget's iframe. */
+    static build(options) {
+        const values = HtmlWidgetDocument.resolveVariables(options.variables);
+        const html = HtmlWidgetDocument.interpolate(options.html || "", values);
+        const css = HtmlWidgetDocument.escapeForStyleElement(HtmlWidgetDocument.interpolate(options.css || "", values));
+        const javascript = HtmlWidgetDocument.escapeForScriptElement(HtmlWidgetDocument.interpolate(options.javascript || "", values));
+        /*
+         * Both script blocks are omitted entirely when scripts are off. The
+         * sandbox already refuses to execute them, but emitting a <script> the
+         * browser ignores would leave the author's code visible in view-source
+         * and make "why isn't this running" harder to answer than it needs to
+         * be.
+         */
+        const scripts = options.allowScripts
+            ? `<script>window.ONEUPTIME=${HtmlWidgetDocument.serializeContext(HtmlWidgetDocument.getContext(options))};</script>\n<script>\n${javascript}\n</script>`
+            : "";
+        /*
+         * `<base target="_blank">` keeps a plain <a href> from trying to
+         * navigate the frame itself, which a sandbox without
+         * allow-top-navigation would block with a console error the author
+         * cannot see.
+         */
+        return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<base target="_blank" />
+<style>${BASE_CSS}</style>
+<style>
+${css}
+</style>
+</head>
+<body>
+${html}
+${scripts}
+</body>
+</html>`;
+    }
+}
+//# sourceMappingURL=HtmlWidgetDocument.js.map

package/build/dist/Utils/Dashboard/HtmlWidgetDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlWidgetDocument.js","sourceRoot":"","sources":["../../../../Utils/Dashboard/HtmlWidgetDocument.ts"],"names":[],"mappings":"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"}

package/build/dist/Utils/Dashboard/ValueWidgetLayout.js

@@ -0,0 +1,276 @@
+/*
+ * Everything the dashboard Value widget needs in order to decide how big to
+ * draw itself, derived by arithmetic from the tile size the canvas reports.
+ *
+ * It lives here rather than in the renderer for the same reason
+ * ClockWidgetFormat.ts does: none of it needs a DOM, so it is unit-testable,
+ * and the renderer stays a straight translation of these numbers into inline
+ * styles. Measuring the rendered text instead would cost a second render on
+ * every resize frame — the exact re-measure flicker DashboardBaseComponent's
+ * constant edit-mode padding exists to avoid.
+ *
+ * The contract with the renderer is that EVERY optional row is drawn at the
+ * pixel height returned here, with `shrink-0`, so the stack sums to the
+ * content box by construction. Before this existed the value row was the only
+ * shrinkable flex item (Tailwind's `truncate` sets overflow:hidden, which
+ * zeroes a flex item's automatic minimum size), so the whole vertical deficit
+ * landed on the big number and its glyphs were sliced in half — or, in edit
+ * mode at the default 3x1 tile, clipped away entirely.
+ */
+/**
+ * Padding the widget chrome puts between the tile edge and the widget's own
+ * content box. DashboardBaseComponent draws every widget in a card with a 1px
+ * `border` and wraps the child in `padding: 12px`, widened to
+ * `28px 12px 12px 12px` in edit mode for the drag handle it overlays.
+ *
+ * The canvas hands each widget its OUTER tile size, so a sizer that skips this
+ * overstates the box by 26px (42px while editing). On the shipped 3x1 default
+ * that is around a third of the usable height, which is most of the reason the
+ * big number ended up sliced.
+ *
+ * ClockWidgetFormat.ts uses 24/24/40 for the same three constants — it is
+ * missing the card's 1px border. That is a separate (much smaller) bug; the
+ * clock keeps 4px of its own vertical breathing room which absorbs it, and
+ * correcting it there would churn 300 lines of unrelated tests.
+ */
+const VALUE_CHROME_HORIZONTAL_IN_PX = 26;
+const VALUE_CHROME_VERTICAL_IN_PX = 26;
+const VALUE_CHROME_VERTICAL_EDIT_MODE_IN_PX = 42;
+/** Breathing room kept inside the content box so text never sits flush. */
+const VALUE_HORIZONTAL_PADDING_IN_PX = 8;
+/**
+ * line-height on the value row. Inter's content area is 1.21em (typo ascender
+ * 0.96875 + descender 0.24121), so the previous 1.15 let glyphs paint outside
+ * their own line box and the row's clip shaved them. 1.25 keeps the ink inside
+ * the box the budget reserved for it.
+ */
+export const VALUE_LINE_HEIGHT_RATIO = 1.25;
+/** The unit suffix is drawn at this fraction of the value font size. */
+export const VALUE_UNIT_FONT_SCALE = 0.36;
+/**
+ * Advance width of one character, as a fraction of the font size. The value
+ * row is `tabular-nums`, so every digit has the same advance; `.` `,` `-` are
+ * narrower than 0.62em and the row also carries `letter-spacing: -0.03em`, so
+ * this over-estimates. That is the safe direction: the failure mode is a
+ * slightly smaller number rather than a clipped one.
+ */
+const VALUE_CHAR_WIDTH_RATIO = 0.62;
+const UNIT_CHAR_WIDTH_RATIO = 0.58;
+/** Title row: font clamped to this range, at line-height 1.5 plus `mb-0.5`. */
+const TITLE_FONT_HEIGHT_FRACTION = 0.11;
+const MIN_TITLE_FONT_SIZE_IN_PX = 11;
+const MAX_TITLE_FONT_SIZE_IN_PX = 14;
+const TITLE_LINE_HEIGHT_RATIO = 1.5;
+const TITLE_ROW_MARGIN_IN_PX = 2;
+/** Status row: the trend arrow, or the hovered point's timestamp. */
+const MIN_STATUS_FONT_SIZE_IN_PX = 10;
+const MAX_STATUS_FONT_SIZE_IN_PX = 12;
+const STATUS_LINE_HEIGHT_RATIO = 1.5;
+const STATUS_ROW_MARGIN_IN_PX = 2;
+/** Sparkline row: the chart plus the `mt-1` above it. */
+const SPARKLINE_HEIGHT_FRACTION = 0.18;
+const MIN_SPARKLINE_HEIGHT_IN_PX = 16;
+const MAX_SPARKLINE_HEIGHT_IN_PX = 28;
+const SPARKLINE_ROW_MARGIN_IN_PX = 4;
+const SPARKLINE_WIDTH_FRACTION = 0.6;
+const MIN_SPARKLINE_WIDTH_IN_PX = 32;
+const MAX_SPARKLINE_WIDTH_IN_PX = 120;
+export const MIN_VALUE_FONT_SIZE_IN_PX = 14;
+export const MAX_VALUE_FONT_SIZE_IN_PX = 96;
+/**
+ * Value-row heights we refuse to drop below in order to show an optional row.
+ * A Value widget exists to show one number; a title that shrinks the digits to
+ * the legibility floor has taken more than it is worth.
+ *
+ * Crossing either of these steps the font size — a row that appears has to
+ * take its height from somewhere. That step is deliberate and bounded (the
+ * number never goes below MIN_VALUE_FONT_SIZE_IN_PX and is never clipped);
+ * making it continuous would mean never showing a title on a short tile.
+ */
+const TITLE_GATE_VALUE_ROW_IN_PX = 26;
+const STATUS_GATE_VALUE_ROW_IN_PX = 40;
+/**
+ * Below this content width the title and the trend cannot share a line without
+ * both truncating to nothing, so the compact header is not offered.
+ */
+const COMPACT_HEADER_MIN_CONTENT_WIDTH_IN_PX = 180;
+/** The value row height at which the value font reaches its ceiling. */
+const MAX_VALUE_ROW_HEIGHT_IN_PX = MAX_VALUE_FONT_SIZE_IN_PX * VALUE_LINE_HEIGHT_RATIO;
+export var ValueWidgetStackMode;
+(function (ValueWidgetStackMode) {
+    /** Title, value, status and sparkline each on their own row. */
+    ValueWidgetStackMode["Column"] = "Column";
+    /** Title and status share one line above the value. */
+    ValueWidgetStackMode["Compact"] = "Compact";
+})(ValueWidgetStackMode || (ValueWidgetStackMode = {}));
+const clamp = (value, min, max) => {
+    return Math.max(Math.min(value, max), min);
+};
+export const getValueContentBox = (data) => {
+    const verticalChrome = data.isEditMode
+        ? VALUE_CHROME_VERTICAL_EDIT_MODE_IN_PX
+        : VALUE_CHROME_VERTICAL_IN_PX;
+    return {
+        widthInPx: Math.max(data.widthInPx - VALUE_CHROME_HORIZONTAL_IN_PX, 0),
+        heightInPx: Math.max(data.heightInPx - verticalChrome, 0),
+    };
+};
+export const getValueWidthInFontUnits = (data) => {
+    // The unit is preceded by a space, drawn at the unit size.
+    const unitChars = data.unitText.length > 0 ? data.unitText.length + 1 : 0;
+    return (data.valueText.length * VALUE_CHAR_WIDTH_RATIO +
+        unitChars * UNIT_CHAR_WIDTH_RATIO * VALUE_UNIT_FONT_SCALE);
+};
+const getWidthLimitedFontSizeInPx = (data) => {
+    const widthInFontUnits = getValueWidthInFontUnits({
+        valueText: data.valueText,
+        unitText: data.unitText,
+    });
+    if (widthInFontUnits <= 0) {
+        return MAX_VALUE_FONT_SIZE_IN_PX;
+    }
+    return data.widthBudgetInPx / widthInFontUnits;
+};
+export const getValueWidgetLayout = (data) => {
+    const contentBox = getValueContentBox(data);
+    const contentHeightInPx = contentBox.heightInPx;
+    const contentWidthInPx = contentBox.widthInPx;
+    const titleFontSizeInPx = clamp(contentHeightInPx * TITLE_FONT_HEIGHT_FRACTION, MIN_TITLE_FONT_SIZE_IN_PX, MAX_TITLE_FONT_SIZE_IN_PX);
+    const titleRowHeightInPx = titleFontSizeInPx * TITLE_LINE_HEIGHT_RATIO + TITLE_ROW_MARGIN_IN_PX;
+    const statusFontSizeInPx = clamp(contentHeightInPx * TITLE_FONT_HEIGHT_FRACTION, MIN_STATUS_FONT_SIZE_IN_PX, MAX_STATUS_FONT_SIZE_IN_PX);
+    const statusRowHeightInPx = statusFontSizeInPx * STATUS_LINE_HEIGHT_RATIO + STATUS_ROW_MARGIN_IN_PX;
+    const sparklineHeightInPx = clamp(contentHeightInPx * SPARKLINE_HEIGHT_FRACTION, MIN_SPARKLINE_HEIGHT_IN_PX, MAX_SPARKLINE_HEIGHT_IN_PX);
+    const sparklineRowHeightInPx = sparklineHeightInPx + SPARKLINE_ROW_MARGIN_IN_PX;
+    /*
+     * The trend arrow and the hovered point's timestamp share one slot, so a
+     * tile that could show either has to reserve it up front. Neither term
+     * depends on whether the cursor is on the chart — that is what makes the
+     * hover swap provably unable to move anything. The old layout claimed this
+     * and did not deliver it: the timestamp was unconstrained and wrapped.
+     */
+    const hasStatus = data.hasTrend || data.hasSparklineData;
+    /*
+     * A short tile stacks title / value / trend and runs out of height; putting
+     * the title and the trend on one line hands that height back to the number.
+     * The switch sits exactly where the stacked layout stops being able to keep
+     * the value at its ceiling, so crossing it cannot change the rendered font
+     * size: below it the compact value row is still at least MAX_VALUE_ROW, and
+     * above it the stacked value row is at least MAX_VALUE_ROW too.
+     */
+    const stackedValueRowInPx = contentHeightInPx -
+        (data.hasTitle ? titleRowHeightInPx : 0) -
+        (hasStatus ? statusRowHeightInPx : 0);
+    const stackMode = data.hasTitle &&
+        hasStatus &&
+        contentWidthInPx >= COMPACT_HEADER_MIN_CONTENT_WIDTH_IN_PX &&
+        stackedValueRowInPx < MAX_VALUE_ROW_HEIGHT_IN_PX
+        ? ValueWidgetStackMode.Compact
+        : ValueWidgetStackMode.Column;
+    let showTitle = false;
+    let showStatusRow = false;
+    let showSparkline = false;
+    if (stackMode === ValueWidgetStackMode.Compact) {
+        const headerCandidateInPx = Math.max(titleRowHeightInPx, statusRowHeightInPx);
+        if (contentHeightInPx - headerCandidateInPx >= TITLE_GATE_VALUE_ROW_IN_PX) {
+            showTitle = true;
+            showStatusRow = true;
+        }
+    }
+    else {
+        /*
+         * Hand the height out in priority order, never spending a pixel we do not
+         * have and never letting an optional row take the number below a size
+         * worth reading.
+         */
+        let spentInPx = 0;
+        if (data.hasTitle &&
+            contentHeightInPx - spentInPx - titleRowHeightInPx >=
+                TITLE_GATE_VALUE_ROW_IN_PX) {
+            showTitle = true;
+            spentInPx = spentInPx + titleRowHeightInPx;
+        }
+        if (hasStatus &&
+            contentHeightInPx - spentInPx - statusRowHeightInPx >=
+                STATUS_GATE_VALUE_ROW_IN_PX) {
+            showStatusRow = true;
+            spentInPx = spentInPx + statusRowHeightInPx;
+        }
+        /*
+         * The sparkline is admitted only once the value font is ALREADY at its
+         * ceiling, so switching it on cannot make the number smaller. This
+         * replaces a `dashboardComponentHeightInPx > 100` test, which compared the
+         * OUTER tile height and then added a row to a box 26-42px smaller than the
+         * number it had tested — a 40px change in browser width took the value box
+         * from 34.9px to 9.2px, i.e. from a readable number to a dark sliver.
+         */
+        if (data.hasSparklineData &&
+            contentHeightInPx - spentInPx - sparklineRowHeightInPx >=
+                MAX_VALUE_ROW_HEIGHT_IN_PX) {
+            showSparkline = true;
+        }
+    }
+    /*
+     * Give the status slot back when neither occupant can appear: no trend, and
+     * no sparkline left to hover. Recomputing the reservation from the final
+     * flags (rather than decrementing as we go) keeps one source of truth, and
+     * because this only ever SHRINKS the reservation it cannot invalidate the
+     * sparkline decision, which was taken with the row still reserved. Moving
+     * this above the sparkline gate would reintroduce that oscillation.
+     */
+    if (showStatusRow && !data.hasTrend && !showSparkline) {
+        showStatusRow = false;
+    }
+    const headerRowHeightInPx = stackMode === ValueWidgetStackMode.Compact
+        ? Math.max(showTitle ? titleRowHeightInPx : 0, showStatusRow ? statusRowHeightInPx : 0)
+        : 0;
+    const reservedInPx = stackMode === ValueWidgetStackMode.Compact
+        ? headerRowHeightInPx
+        : (showTitle ? titleRowHeightInPx : 0) +
+            (showStatusRow ? statusRowHeightInPx : 0) +
+            (showSparkline ? sparklineRowHeightInPx : 0);
+    const valueRowHeightInPx = Math.max(contentHeightInPx - reservedInPx, 0);
+    const heightLimitedFontInPx = valueRowHeightInPx / VALUE_LINE_HEIGHT_RATIO;
+    const widthBudgetInPx = Math.max(contentWidthInPx - VALUE_HORIZONTAL_PADDING_IN_PX, 0);
+    /*
+     * Try the number with its unit, and drop the unit only when carrying it
+     * would force the digits below the legibility floor on WIDTH. Gating on
+     * width alone matters: when height is the binding constraint, dropping the
+     * unit recovers nothing, so there is no reason to lose the information. The
+     * renderer keeps the full string on the element's `title` either way.
+     */
+    const fontWithUnitInPx = getWidthLimitedFontSizeInPx({
+        widthBudgetInPx: widthBudgetInPx,
+        valueText: data.valueText,
+        unitText: data.unitText,
+    });
+    const showUnit = data.unitText.length > 0 && fontWithUnitInPx >= MIN_VALUE_FONT_SIZE_IN_PX;
+    const widthLimitedFontInPx = showUnit
+        ? fontWithUnitInPx
+        : getWidthLimitedFontSizeInPx({
+            widthBudgetInPx: widthBudgetInPx,
+            valueText: data.valueText,
+            unitText: "",
+        });
+    const valueFontSizeInPx = clamp(Math.min(heightLimitedFontInPx, widthLimitedFontInPx), MIN_VALUE_FONT_SIZE_IN_PX, MAX_VALUE_FONT_SIZE_IN_PX);
+    return {
+        stackMode: stackMode,
+        contentWidthInPx: contentWidthInPx,
+        contentHeightInPx: contentHeightInPx,
+        showTitle: showTitle,
+        showStatusRow: showStatusRow,
+        showSparkline: showSparkline,
+        showUnit: showUnit,
+        titleFontSizeInPx: titleFontSizeInPx,
+        statusFontSizeInPx: statusFontSizeInPx,
+        valueFontSizeInPx: valueFontSizeInPx,
+        unitFontSizeInPx: valueFontSizeInPx * VALUE_UNIT_FONT_SCALE,
+        headerRowHeightInPx: headerRowHeightInPx,
+        titleRowHeightInPx: titleRowHeightInPx,
+        statusRowHeightInPx: statusRowHeightInPx,
+        sparklineRowHeightInPx: sparklineRowHeightInPx,
+        valueRowHeightInPx: valueRowHeightInPx,
+        sparklineWidthInPx: Math.min(Math.max(contentWidthInPx * SPARKLINE_WIDTH_FRACTION, MIN_SPARKLINE_WIDTH_IN_PX), contentWidthInPx, MAX_SPARKLINE_WIDTH_IN_PX),
+        sparklineHeightInPx: sparklineHeightInPx,
+    };
+};
+//# sourceMappingURL=ValueWidgetLayout.js.map

package/build/dist/Utils/Dashboard/ValueWidgetLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueWidgetLayout.js","sourceRoot":"","sources":["../../../../Utils/Dashboard/ValueWidgetLayout.ts"],"names":[],"mappings":"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"}