@oneuptime/common 10.8.2 → 11.0.0

package/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx

@@ -41,12 +41,27 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
   const activeValuesByKey: Record<string, Set<string>> = useMemo(() => {
     const map: Record<string, Set<string>> = {};
 
+    const add: (key: string, value: string) => void = (
+      key: string,
+      value: string,
+    ): void => {
+      if (!map[key]) {
+        map[key] = new Set<string>();
+      }
+      map[key]!.add(value);
+    };
+
     if (props.activeFilters) {
       for (const filter of props.activeFilters) {
-        if (!map[filter.facetKey]) {
-          map[filter.facetKey] = new Set<string>();
+        add(filter.facetKey, filter.value);
+        /*
+         * Attribute-backed facets store chips as `attributes.<key>` while
+         * the facet config is keyed by the raw attribute key — index both
+         * so the facet row shows its selected state.
+         */
+        if (filter.facetKey.startsWith("attributes.")) {
+          add(filter.facetKey.substring("attributes.".length), filter.value);
         }
-        map[filter.facetKey]!.add(filter.value);
       }
     }
 

package/UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx

@@ -1,6 +1,7 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  ReactNode,
   useMemo,
   useCallback,
   useRef,
@@ -30,6 +31,10 @@ export interface TelemetryHistogramProps {
   series: Array<HistogramSeriesOption>;
   title?: string | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  // Extra controls rendered in the chart header (e.g. a metric selector).
+  headerActions?: ReactNode;
+  // Formats Y-axis ticks and tooltip values (e.g. milliseconds → "1.2 s").
+  valueFormatter?: ((value: number) => string) | undefined;
 }
 
 interface PivotedRow {
@@ -173,7 +178,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
     );
   }
 
-  if (pivotedData.length === 0) {
+  /*
+   * With header actions (e.g. a metric selector) the header must survive an
+   * empty result, or switching away from a metric with no data would strand
+   * the user with no control to switch back.
+   */
+  if (pivotedData.length === 0 && !props.headerActions) {
     return <></>;
   }
 
@@ -202,77 +212,90 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
               </div>
             );
           })}
+          {props.headerActions}
         </div>
       </div>
-
-      <div
-        className="px-2 pb-1 pt-2"
-        style={{
-          height: 120,
-          cursor: props.onTimeRangeSelect ? "crosshair" : "default",
-        }}
-      >
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={pivotedData}
-            margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            barCategoryGap="15%"
-            barGap={0}
-          >
-            <XAxis
-              dataKey="time"
-              tickFormatter={formatTickTime}
-              tick={{ fontSize: 10, fill: "#9ca3af" }}
-              axisLine={{ stroke: "#e5e7eb" }}
-              tickLine={false}
-              minTickGap={40}
-              dy={4}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              tick={{ fontSize: 10, fill: "#9ca3af" }}
-              axisLine={false}
-              tickLine={false}
-              width={48}
-              allowDecimals={false}
-              tickFormatter={formatYAxisTick}
-            />
-            <Tooltip
-              content={<TelemetryHistogramTooltip seriesByKey={seriesByKey} />}
-              cursor={{ fill: "rgba(99,102,241,0.06)" }}
-            />
-            {activeSeries.map(
-              (option: HistogramSeriesOption, index: number) => {
-                const isLast: boolean = index === activeSeries.length - 1;
-                return (
-                  <Bar
-                    key={option.key}
-                    dataKey={option.key}
-                    stackId="series"
-                    fill={option.color}
-                    radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
-                    isAnimationActive={false}
-                    maxBarSize={24}
+      {pivotedData.length === 0 && (
+        <div className="flex h-[120px] items-center justify-center text-xs text-gray-400">
+          No data for this metric in the selected range
+        </div>
+      )}
+
+      {pivotedData.length > 0 && (
+        <div
+          className="px-2 pb-1 pt-2"
+          style={{
+            height: 120,
+            cursor: props.onTimeRangeSelect ? "crosshair" : "default",
+          }}
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={pivotedData}
+              margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              barCategoryGap="15%"
+              barGap={0}
+            >
+              <XAxis
+                dataKey="time"
+                tickFormatter={formatTickTime}
+                tick={{ fontSize: 10, fill: "#9ca3af" }}
+                axisLine={{ stroke: "#e5e7eb" }}
+                tickLine={false}
+                minTickGap={40}
+                dy={4}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                tick={{ fontSize: 10, fill: "#9ca3af" }}
+                axisLine={false}
+                tickLine={false}
+                width={48}
+                allowDecimals={Boolean(props.valueFormatter)}
+                tickFormatter={props.valueFormatter || formatYAxisTick}
+              />
+              <Tooltip
+                content={
+                  <TelemetryHistogramTooltip
+                    seriesByKey={seriesByKey}
+                    valueFormatter={props.valueFormatter}
                   />
-                );
-              },
-            )}
-            {selectionStart && selectionEnd && (
-              <ReferenceArea
-                x1={selectionStart}
-                x2={selectionEnd}
-                fill="rgba(99,102,241,0.12)"
-                stroke="rgba(99,102,241,0.5)"
-                strokeWidth={1}
-                radius={2}
+                }
+                cursor={{ fill: "rgba(99,102,241,0.06)" }}
               />
-            )}
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
+              {activeSeries.map(
+                (option: HistogramSeriesOption, index: number) => {
+                  const isLast: boolean = index === activeSeries.length - 1;
+                  return (
+                    <Bar
+                      key={option.key}
+                      dataKey={option.key}
+                      stackId="series"
+                      fill={option.color}
+                      radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
+                      isAnimationActive={false}
+                      maxBarSize={24}
+                    />
+                  );
+                },
+              )}
+              {selectionStart && selectionEnd && (
+                <ReferenceArea
+                  x1={selectionStart}
+                  x2={selectionEnd}
+                  fill="rgba(99,102,241,0.12)"
+                  stroke="rgba(99,102,241,0.5)"
+                  strokeWidth={1}
+                  radius={2}
+                />
+              )}
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
     </div>
   );
 };

package/UI/Components/TelemetryViewer/components/TelemetryHistogramTooltip.tsx

@@ -16,6 +16,11 @@ export interface TelemetryHistogramTooltipProps {
     payload: Record<string, number>;
   }>;
   seriesByKey: Record<string, HistogramSeriesOption>;
+  /*
+   * Formats values (e.g. milliseconds for latency series). When set, the
+   * Total row is suppressed — summing percentiles is meaningless.
+   */
+  valueFormatter?: ((value: number) => string) | undefined;
 }
 
 function formatTooltipTime(label: string | undefined): string {
@@ -104,13 +109,15 @@ const TelemetryHistogramTooltip: FunctionComponent<
                 <span className="text-xs text-gray-600">{label}</span>
               </div>
               <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
-                {entry.count.toLocaleString()}
+                {props.valueFormatter
+                  ? props.valueFormatter(entry.count)
+                  : entry.count.toLocaleString()}
               </span>
             </div>
           );
         })}
       </div>
-      {entries.length > 1 && (
+      {entries.length > 1 && !props.valueFormatter && (
         <div className="mt-1.5 flex items-center justify-between border-t border-gray-100 pt-1.5">
           <span className="text-xs text-gray-500">Total</span>
           <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">

package/UI/Utils/LogExport.ts

@@ -42,7 +42,7 @@ function getLogFieldValue(log: Log, columnId: string): string {
     case "time":
       return log.time ? new Date(log.time).toISOString() : "";
     case "service":
-      return log.serviceId?.toString() || "";
+      return log.primaryEntityId?.toString() || "";
     case "severity":
       return log.severityText?.toString() || "";
     case "message":
@@ -104,7 +104,7 @@ export function exportLogsToJSON(logs: Array<Log>): string {
   const data: Array<JSONObject> = logs.map((log: Log) => {
     const obj: JSONObject = {};
     obj["time"] = log.time ? new Date(log.time).toISOString() : null;
-    obj["serviceId"] = log.serviceId?.toString() || null;
+    obj["primaryEntityId"] = log.primaryEntityId?.toString() || null;
     obj["severity"] = log.severityText?.toString() || null;
     obj["severityNumber"] = log.severityNumber || null;
     obj["body"] = log.body || null;

package/UI/Utils/TelemetryService.ts

@@ -7,11 +7,11 @@ import ServiceType from "../../Types/Telemetry/ServiceType";
  * Telemetry that arrives without an OTel service.name (and with no
  * host / docker / k8s resource signal) is not backed by a Service row.
  * The ingest path tags those analytics rows with the projectId in the
- * `serviceId` column under ServiceType.Unknown (see
+ * `primaryEntityId` column under ServiceType.Unknown (see
  * OtelIngestBaseService.resolveTelemetryResource). The read side has no
  * Service to resolve, so we represent that telemetry with a synthetic,
  * non-persisted Service whose id is the projectId — that way the
- * existing serviceId -> Service lookups in the telemetry views resolve
+ * existing primaryEntityId -> Service lookups in the telemetry views resolve
  * it to a labelled "Unknown Service" entry without any per-view special
  * casing. A real Service._id is never equal to a projectId, so this
  * never collides with a genuine service.
@@ -19,8 +19,8 @@ import ServiceType from "../../Types/Telemetry/ServiceType";
 export const UNKNOWN_SERVICE_NAME: string = "Unknown Service";
 
 /*
- * Result of resolving a telemetry row's polymorphic (serviceId,
- * serviceType) to something renderable. Either a Service (a real
+ * Result of resolving a telemetry row's polymorphic (primaryEntityId,
+ * primaryEntityType) to something renderable. Either a Service (a real
  * OpenTelemetry service, or the synthetic "Unknown Service" for the
  * unattributed bucket) — or a plain `label` for infrastructure resource
  * types (Host / DockerHost / KubernetesCluster) that have no Service row.
@@ -32,25 +32,25 @@ export interface ResolvedTelemetryResource {
 
 export default class TelemetryServiceUtil {
   /*
-   * True when a telemetry row's serviceId is the synthetic "Unknown
+   * True when a telemetry row's primaryEntityId is the synthetic "Unknown
    * Service" — i.e. it equals the projectId (ServiceType.Unknown). Used
    * to suppress navigation to a per-service detail page that does not
    * exist for unattributed telemetry.
    */
   public static isUnknownServiceId(
-    serviceId: ObjectID | string | null | undefined,
+    primaryEntityId: ObjectID | string | null | undefined,
     projectId: ObjectID | null | undefined,
   ): boolean {
-    if (!serviceId || !projectId) {
+    if (!primaryEntityId || !projectId) {
       return false;
     }
-    return serviceId.toString() === projectId.toString();
+    return primaryEntityId.toString() === projectId.toString();
   }
 
   /*
    * Build the synthetic Service used to render unattributed telemetry.
-   * Not persisted — id is the projectId so that serviceId -> Service
-   * lookups (which key on the analytics row's serviceId) resolve to it.
+   * Not persisted — id is the projectId so that primaryEntityId -> Service
+   * lookups (which key on the analytics row's primaryEntityId) resolve to it.
    */
   public static getUnknownService(projectId: ObjectID): Service {
     const service: Service = new Service();
@@ -61,7 +61,7 @@ export default class TelemetryServiceUtil {
   }
 
   /*
-   * Resolve a telemetry row's polymorphic (serviceId, serviceType) to a
+   * Resolve a telemetry row's polymorphic (primaryEntityId, primaryEntityType) to a
    * renderable resource, given the project's loaded Services. Replaces the
    * old server-side `service` ORM relation on TelemetryException: a real
    * Service resolves from the loaded list, the unattributed bucket resolves
@@ -70,12 +70,12 @@ export default class TelemetryServiceUtil {
    * them). Mirrors how the ClickHouse analytics rows are resolved.
    */
   public static resolveTelemetryResource(data: {
-    serviceId: ObjectID | string | null | undefined;
-    serviceType: ServiceType | string | null | undefined;
+    primaryEntityId: ObjectID | string | null | undefined;
+    primaryEntityType: ServiceType | string | null | undefined;
     services: Array<Service>;
     projectId: ObjectID | null | undefined;
   }): ResolvedTelemetryResource {
-    const serviceIdStr: string | undefined = data.serviceId?.toString();
+    const serviceIdStr: string | undefined = data.primaryEntityId?.toString();
 
     // Real Service (OpenTelemetry) — resolve from the loaded list.
     if (serviceIdStr) {
@@ -87,11 +87,11 @@ export default class TelemetryServiceUtil {
       }
     }
 
-    // Unattributed (Unknown) bucket — serviceId is the projectId.
+    // Unattributed (Unknown) bucket — primaryEntityId is the projectId.
     if (
       data.projectId &&
-      (data.serviceType === ServiceType.Unknown ||
-        this.isUnknownServiceId(data.serviceId, data.projectId))
+      (data.primaryEntityType === ServiceType.Unknown ||
+        this.isUnknownServiceId(data.primaryEntityId, data.projectId))
     ) {
       return { service: this.getUnknownService(data.projectId) };
     }
@@ -102,8 +102,8 @@ export default class TelemetryServiceUtil {
       [ServiceType.DockerHost]: "Docker host telemetry",
       [ServiceType.KubernetesCluster]: "Kubernetes telemetry",
     };
-    const label: string | undefined = data.serviceType
-      ? typeLabels[data.serviceType.toString()]
+    const label: string | undefined = data.primaryEntityType
+      ? typeLabels[data.primaryEntityType.toString()]
       : undefined;
     if (label) {
       return { label: label };
@@ -115,7 +115,7 @@ export default class TelemetryServiceUtil {
   /*
    * Append the synthetic "Unknown Service" to a loaded service list, but
    * only when the telemetry in view actually references it (some
-   * serviceId equals the projectId). Avoids showing an empty "Unknown
+   * primaryEntityId equals the projectId). Avoids showing an empty "Unknown
    * Service" entry for projects that always set service.name. Idempotent.
    */
   public static withUnknownServiceIfReferenced(data: {

package/Utils/Dashboard/Components/DashboardTraceChartComponent.ts

@@ -0,0 +1,134 @@
+import DashboardTraceChartComponent from "../../../Types/Dashboard/DashboardComponents/DashboardTraceChartComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+
+const DisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and metric",
+  order: 1,
+};
+
+const QuerySection: ComponentArgumentSection = {
+  name: "Query",
+  description: "Which spans to aggregate and how to split them",
+  order: 2,
+};
+
+export default class DashboardTraceChartComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardTraceChartComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.TraceChart,
+      widthInDashboardUnits: 8,
+      heightInDashboardUnits: 5,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        metric: "count",
+        topLimit: 10,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardTraceChartComponent>
+  > {
+    const componentArguments: Array<
+      ComponentArgument<DashboardTraceChartComponent>
+    > = [];
+
+    componentArguments.push({
+      name: "Title",
+      description: "Header shown above the chart",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "title",
+      section: DisplaySection,
+    });
+
+    componentArguments.push({
+      name: "Metric",
+      description: "Span aggregation to chart over time",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "metric",
+      section: DisplaySection,
+      dropdownOptions: [
+        { label: "Request Count", value: "count" },
+        { label: "Error Count", value: "errorCount" },
+        { label: "Avg Response Time", value: "avgDuration" },
+        { label: "Median Response Time (P50)", value: "p50Duration" },
+        { label: "P90 Response Time", value: "p90Duration" },
+        { label: "P95 Response Time", value: "p95Duration" },
+        { label: "P99 Response Time", value: "p99Duration" },
+        { label: "Min Response Time", value: "minDuration" },
+        { label: "Max Response Time", value: "maxDuration" },
+      ],
+    });
+
+    componentArguments.push({
+      name: "Span Name Contains",
+      description:
+        "Only include spans whose name contains this text (e.g. /Shipment/ShipShipment)",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "spanNameContains",
+      placeholder: "/Shipment/ShipShipment",
+      section: QuerySection,
+    });
+
+    componentArguments.push({
+      name: "Attribute Filters",
+      description:
+        "Attribute equality filters, ANDed — key=value pairs separated by semicolons (e.g. url.host=torginol.starship.online; http.method=POST)",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "attributeFilters",
+      placeholder: "url.host=torginol.starship.online",
+      section: QuerySection,
+    });
+
+    componentArguments.push({
+      name: "Split By",
+      description:
+        "Optional dimension — a span attribute key (e.g. url.host, resource.service.instance.id) or one of: name, primaryEntityId, statusCode, kind. One series per value.",
+      required: false,
+      type: ComponentInputType.Text,
+      id: "groupByAttribute",
+      placeholder: "url.host",
+      section: QuerySection,
+    });
+
+    componentArguments.push({
+      name: "Top Series",
+      description: "Cap on the number of series when split (default 10)",
+      required: false,
+      type: ComponentInputType.Number,
+      id: "topLimit",
+      placeholder: "10",
+      section: QuerySection,
+    });
+
+    componentArguments.push({
+      name: "Include Child Spans",
+      description:
+        "Count every span instead of root spans only (the traces explorer defaults to root spans)",
+      required: false,
+      type: ComponentInputType.Boolean,
+      id: "includeChildSpans",
+      section: QuerySection,
+    });
+
+    return componentArguments;
+  }
+}

package/Utils/Dashboard/Components/Index.ts

@@ -24,6 +24,7 @@ import DashboardLogStreamComponentUtil from "./DashboardLogStreamComponent";
 import DashboardMonitorListComponentUtil from "./DashboardMonitorListComponent";
 import DashboardTableComponentUtil from "./DashboardTableComponent";
 import DashboardTextComponentUtil from "./DashboardTextComponent";
+import DashboardTraceChartComponentUtil from "./DashboardTraceChartComponent";
 import DashboardTraceListComponentUtil from "./DashboardTraceListComponent";
 import DashboardValueComponentUtil from "./DashboardValueComponent";
 
@@ -73,6 +74,12 @@ export default class DashboardComponentsUtil {
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.TraceChart) {
+      return DashboardTraceChartComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     if (dashboardComponentType === DashboardComponentType.IncidentList) {
       return DashboardIncidentListComponentUtil.getComponentConfigArguments() as Array<
         ComponentArgument<DashboardBaseComponent>