@oneuptime/common 10.0.65 → 10.0.66

package/Types/Trace/TraceRecordingRuleDefinition.ts

@@ -0,0 +1,218 @@
+import TraceAggregationType from "./TraceAggregationType";
+
+/*
+ * A single source for a Trace Recording Rule — queries the Span table with
+ * the given aggregation, filtered by optional span-name regex and attribute
+ * match. Each source is aliased (A, B, C, ...) and referenced from the rule's
+ * expression string.
+ */
+export interface TraceRecordingRuleSource {
+  alias: string;
+  aggregationType: TraceAggregationType;
+  // Optional filters — ANDed together.
+  spanNameRegex?: string;
+  spanKind?: string;
+  onlyErrors?: boolean;
+  filterAttributeKey?: string;
+  filterAttributeValue?: string;
+}
+
+/*
+ * Full stored definition of a Trace Recording Rule. Persisted as JSONB so new
+ * fields can be added without migrating Postgres.
+ */
+export default interface TraceRecordingRuleDefinition {
+  sources: Array<TraceRecordingRuleSource>;
+  /*
+   * Arithmetic expression using aliases. Operators: + - * /, parentheses,
+   * numeric literals. Example: "A / B * 100" for error rate.
+   */
+  expression: string;
+  /*
+   * Optional attribute key (e.g. "service.name") to group by — one derived
+   * data point per group per evaluation bucket.
+   */
+  groupByAttribute?: string;
+}
+
+// Maximum number of sources per rule — bounds per-cron workload.
+export const TRACE_RECORDING_RULE_MAX_SOURCES: number = 4;
+
+// Maximum expression length — prevents pathological parser input.
+export const TRACE_RECORDING_RULE_MAX_EXPRESSION_LENGTH: number = 500;
+
+/*
+ * Alphabet used to generate source aliases. v1 caps at TRACE_RECORDING_RULE_MAX_SOURCES
+ * so we never exceed the first few letters in practice.
+ */
+const ALIAS_ALPHABET: string = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+const ALIAS_REGEX: RegExp = /^[A-Z]$/;
+
+const EXPRESSION_REGEX: RegExp = /^[A-Z0-9+\-*/().\s]+$/;
+
+export class TraceRecordingRuleDefinitionUtil {
+  public static getAggregationOptions(): Array<{
+    value: TraceAggregationType;
+    label: string;
+    description: string;
+  }> {
+    return [
+      {
+        value: TraceAggregationType.Count,
+        label: "Count",
+        description: "Number of matching spans.",
+      },
+      {
+        value: TraceAggregationType.ErrorCount,
+        label: "Error Count",
+        description: "Spans with status = error.",
+      },
+      {
+        value: TraceAggregationType.AvgDurationSeconds,
+        label: "Avg Duration (s)",
+        description: "Average span duration in seconds.",
+      },
+      {
+        value: TraceAggregationType.P50DurationSeconds,
+        label: "p50 Duration (s)",
+        description: "Median span duration.",
+      },
+      {
+        value: TraceAggregationType.P95DurationSeconds,
+        label: "p95 Duration (s)",
+        description: "95th percentile span duration.",
+      },
+      {
+        value: TraceAggregationType.P99DurationSeconds,
+        label: "p99 Duration (s)",
+        description: "99th percentile span duration.",
+      },
+      {
+        value: TraceAggregationType.MaxDurationSeconds,
+        label: "Max Duration (s)",
+        description: "Longest span in the bucket.",
+      },
+      {
+        value: TraceAggregationType.MinDurationSeconds,
+        label: "Min Duration (s)",
+        description: "Shortest span in the bucket.",
+      },
+    ];
+  }
+
+  public static getSpanKindOptions(): Array<{ value: string; label: string }> {
+    return [
+      { value: "", label: "Any" },
+      { value: "SPAN_KIND_SERVER", label: "Server" },
+      { value: "SPAN_KIND_CLIENT", label: "Client" },
+      { value: "SPAN_KIND_PRODUCER", label: "Producer" },
+      { value: "SPAN_KIND_CONSUMER", label: "Consumer" },
+      { value: "SPAN_KIND_INTERNAL", label: "Internal" },
+    ];
+  }
+
+  public static getNextAlias(
+    sources: Array<TraceRecordingRuleSource> | undefined,
+  ): string {
+    const used: Set<string> = new Set<string>(
+      (sources || []).map((s: TraceRecordingRuleSource) => {
+        return s.alias;
+      }),
+    );
+    for (const letter of ALIAS_ALPHABET) {
+      if (!used.has(letter)) {
+        return letter;
+      }
+    }
+    return "A";
+  }
+
+  public static getEmptyDefinition(): TraceRecordingRuleDefinition {
+    return {
+      sources: [
+        {
+          alias: "A",
+          aggregationType: TraceAggregationType.Count,
+        },
+      ],
+      expression: "A",
+      groupByAttribute: "",
+    };
+  }
+
+  public static getValidationError(
+    definition: TraceRecordingRuleDefinition | undefined,
+  ): string | null {
+    if (!definition) {
+      return "Definition is required.";
+    }
+
+    const sources: Array<TraceRecordingRuleSource> = definition.sources || [];
+
+    if (sources.length === 0) {
+      return "Add at least one source.";
+    }
+
+    if (sources.length > TRACE_RECORDING_RULE_MAX_SOURCES) {
+      return `A rule can reference at most ${TRACE_RECORDING_RULE_MAX_SOURCES} sources.`;
+    }
+
+    const aliases: Set<string> = new Set<string>();
+    for (let i: number = 0; i < sources.length; i++) {
+      const source: TraceRecordingRuleSource = sources[i]!;
+      const prefix: string = `Source ${source.alias || `#${i + 1}`}: `;
+
+      if (!source.alias || !ALIAS_REGEX.test(source.alias)) {
+        return `${prefix}Alias must be a single uppercase letter A-Z.`;
+      }
+
+      if (aliases.has(source.alias)) {
+        return `${prefix}Duplicate alias. Each source must have a unique letter.`;
+      }
+      aliases.add(source.alias);
+
+      if (!source.aggregationType) {
+        return `${prefix}Aggregation type is required.`;
+      }
+
+      const hasFilterKey: boolean = Boolean(source.filterAttributeKey?.trim());
+      const hasFilterValue: boolean = Boolean(
+        source.filterAttributeValue?.trim(),
+      );
+
+      if (hasFilterKey !== hasFilterValue) {
+        return `${prefix}Attribute filter needs both a key and a value (or leave both empty).`;
+      }
+    }
+
+    const expression: string = (definition.expression || "").trim();
+
+    if (!expression) {
+      return "Expression is required.";
+    }
+
+    if (expression.length > TRACE_RECORDING_RULE_MAX_EXPRESSION_LENGTH) {
+      return `Expression must be ${TRACE_RECORDING_RULE_MAX_EXPRESSION_LENGTH} characters or fewer.`;
+    }
+
+    const referencedAliases: Set<string> = new Set<string>(
+      expression.match(/[A-Z]/g) || [],
+    );
+    for (const alias of referencedAliases) {
+      if (!aliases.has(alias)) {
+        return `Expression references alias '${alias}' which is not defined in sources.`;
+      }
+    }
+
+    if (referencedAliases.size === 0) {
+      return "Expression must reference at least one source alias (e.g. A, B).";
+    }
+
+    if (!EXPRESSION_REGEX.test(expression)) {
+      return "Expression may only contain aliases (A-Z), numbers, operators (+ - * /), parentheses, and spaces.";
+    }
+
+    return null;
+  }
+}

package/Types/Trace/TraceScrubAction.ts

@@ -0,0 +1,7 @@
+enum TraceScrubAction {
+  Mask = "mask",
+  Hash = "hash",
+  Redact = "redact",
+}
+
+export default TraceScrubAction;

package/Types/Trace/TraceScrubField.ts

@@ -0,0 +1,8 @@
+enum TraceScrubField {
+  Name = "name",
+  Attributes = "attributes",
+  Events = "events",
+  All = "all",
+}
+
+export default TraceScrubField;

package/Types/Trace/TraceScrubPatternType.ts

@@ -0,0 +1,10 @@
+enum TraceScrubPatternType {
+  Email = "email",
+  CreditCard = "creditCard",
+  SSN = "ssn",
+  PhoneNumber = "phoneNumber",
+  IPAddress = "ipAddress",
+  Custom = "custom",
+}
+
+export default TraceScrubPatternType;

package/UI/Components/CardSelect/CardSelect.tsx

@@ -30,6 +30,8 @@ export interface ComponentProps {
   error?: string | undefined;
   tabIndex?: number | undefined;
   dataTestId?: string | undefined;
+  // Force single-column (1 item per row). Default: responsive 1/2/3 grid.
+  singleColumn?: boolean | undefined;
 }
 
 interface RenderGroup {
@@ -84,7 +86,13 @@ const CardSelect: FunctionComponent<ComponentProps> = (
                   </div>
                 </div>
               )}
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              <div
+                className={
+                  props.singleColumn
+                    ? "grid grid-cols-1 gap-4"
+                    : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
+                }
+              >
                 {group.options.map((option: CardSelectOption) => {
                   const isSelected: boolean = props.value === option.value;
                   const currentIndex: number = cardIndex++;

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -52,10 +52,6 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   const [metricInfoModalChart, setMetricInfoModalChart] =
     useState<ChartMetricInfo | null>(null);
 
-  const isLastChart: (index: number) => boolean = (index: number): boolean => {
-    return index === props.charts.length - 1;
-  };
-
   type GetChartContentFunction = (chart: Chart, index: number) => ReactElement;
 
   const getChartContent: GetChartContentFunction = (
@@ -222,23 +218,23 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     return (
       <>
         {renderMetricInfoModal()}
-        <div className="space-y-0">
+        <div className="space-y-3">
           {props.charts.map((chart: Chart, index: number) => {
             return (
               <div
                 key={index}
-                className={`${!isLastChart(index) ? "border-b border-gray-100" : ""} ${props.chartCssClass || ""}`}
+                className={`bg-white ${props.chartCssClass || ""}`}
               >
-                <div className="px-1 pt-5 pb-4">
-                  <div className="mb-1">
+                <div className="px-5 pt-4 pb-4">
+                  <div className="mb-3 pb-3 border-b border-gray-100">
                     <div className="flex items-center">
-                      <h3 className="text-sm font-semibold text-gray-700 tracking-tight">
+                      <h3 className="text-sm font-semibold text-gray-800 tracking-tight">
                         {chart.title}
                       </h3>
                       {getInfoIcon(chart)}
                     </div>
                     {chart.description && (
-                      <p className="mt-0.5 text-xs text-gray-400 hidden md:block">
+                      <p className="mt-1 text-xs text-gray-500 hidden md:block">
                         {chart.description}
                       </p>
                     )}

package/UI/Components/Forms/Fields/FormField.tsx

@@ -417,6 +417,7 @@ const FormField: <T extends GenericObject>(
               error={props.touched && props.error ? props.error : undefined}
               tabIndex={index}
               dataTestId={props.field.dataTestId}
+              singleColumn={props.field.cardSelectSingleColumn}
               onChange={(value: string) => {
                 onChange(value);
                 props.setFieldValue(props.fieldName, value);

package/UI/Components/Forms/Types/Field.ts

@@ -57,6 +57,7 @@ export default interface Field<TEntity> {
   cardSelectOptions?:
     | Array<CardSelectOption | CardSelectOptionGroup>
     | undefined;
+  cardSelectSingleColumn?: boolean | undefined;
   fetchDropdownOptions?:
     | ((
         item: FormValues<TEntity>,

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -69,6 +69,16 @@ SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
 import mermaid from "mermaid";
 import DOMPurify from "dompurify";
+import OneUptimeDate from "../../../Types/Date";
+
+/*
+ * ISO 8601 timestamps produced by OneUptimeDate.toString() — the
+ * backend-generated root cause markdown inline-codes every timestamp so
+ * we can localize it here without needing a custom markdown plugin.
+ * Matches e.g. "2026-04-20T11:21:00.000Z" (Z-terminated, with ms).
+ */
+const ISO_8601_REGEX: RegExp =
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?Z$/;
 
 // Initialize mermaid
 mermaid.initialize({
@@ -268,6 +278,44 @@ const CodeBlock: FunctionComponent<{
   );
 };
 
+/**
+ * Render an ISO 8601 timestamp in the viewer's local timezone, with the
+ * canonical UTC instant preserved in the `title` for hover/accessibility.
+ * Falls back to the raw string if the date fails to parse so we never
+ * render "Invalid Date" in a markdown cell.
+ */
+const LocalTime: FunctionComponent<{ isoValue: string }> = ({
+  isoValue,
+}: {
+  isoValue: string;
+}): ReactElement => {
+  const parsed: Date = new Date(isoValue);
+  if (isNaN(parsed.getTime())) {
+    return (
+      <code className="text-xs px-1.5 py-0.5 bg-gray-100 border border-gray-200 rounded text-gray-800 font-mono">
+        {isoValue}
+      </code>
+    );
+  }
+
+  const localFormatted: string = OneUptimeDate.getDateAsLocalFormattedString(
+    parsed,
+    false,
+    true,
+    true,
+  );
+
+  return (
+    <time
+      dateTime={isoValue}
+      title={`${isoValue} (UTC)`}
+      className="text-xs px-1.5 py-0.5 bg-gray-100 border border-gray-200 rounded text-gray-800 font-mono whitespace-nowrap"
+    >
+      {localFormatted}
+    </time>
+  );
+};
+
 const MarkdownViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -496,6 +544,15 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
               );
             }
 
+            /*
+             * Inline ISO 8601 timestamp → render in the viewer's local
+             * timezone. The backend emits every root-cause timestamp in
+             * this format precisely so it can be re-localized here.
+             */
+            if (ISO_8601_REGEX.test(content)) {
+              return <LocalTime isoValue={content} />;
+            }
+
             // Inline code
             return (
               <code

package/UI/Components/Page/Page.tsx

@@ -16,6 +16,7 @@ export interface ComponentProps {
   isLoading?: boolean | undefined;
   error?: string | undefined;
   labels?: Array<LabelModel> | undefined;
+  headerRight?: ReactElement | undefined;
 }
 
 const Page: FunctionComponent<ComponentProps> = (
@@ -62,6 +63,11 @@ const Page: FunctionComponent<ComponentProps> = (
                     {props.title}
                   </h1>
                 </div>
+                {props.headerRight && (
+                  <div className="flex flex-wrap items-center sm:justify-end gap-3">
+                    {props.headerRight}
+                  </div>
+                )}
                 {props.labels && props.labels.length > 0 && (
                   <div className="hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
                     <span className="text-xs font-semibold uppercase tracking-wide text-gray-500 whitespace-nowrap">