@oneuptime/common 11.5.8 → 11.5.10

package/Types/Telemetry/TelemetrySavedViewType.ts

@@ -0,0 +1,12 @@
+/*
+ * Which explorer surface a saved telemetry view belongs to. Stored in the
+ * nullable `viewType` column of MetricSavedView — NULL is treated as List
+ * for back-compat (every row created before the column existed came from
+ * the list page).
+ */
+enum TelemetrySavedViewType {
+  List = "list",
+  Explorer = "explorer",
+}
+
+export default TelemetrySavedViewType;

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -15,8 +15,13 @@ import YAxis from "../Types/YAxis/YAxis";
 import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
+import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
+import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
@@ -42,8 +47,20 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  /*
+   * Time-anchored annotations: vertical event markers and shaded regions.
+   * Dates are snapped onto the categorical x-axis buckets; annotations
+   * outside the charted window are dropped (regions clamp to the edge).
+   */
+  timeReferenceLines?: Array<ChartTimeReferenceLineProps> | undefined;
+  referenceRegions?: Array<ChartReferenceRegionProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /*
+   * When provided, the chart supports drag-to-select: dragging across
+   * buckets calls back with the [start, end) of the selected time range.
+   */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
   showLegend?: boolean | undefined;
   /**
    * Render a shaded "expected range" band underneath the plotted lines.
@@ -117,6 +134,29 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     });
   }, [props.exemplarPoints, props.xAxis]);
 
+  // Snap time annotations onto the categorical x-axis bucket labels
+  const formattedTimeReferenceLines: Array<FormattedTimeReferenceLine> =
+    useMemo(() => {
+      if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatTimeReferenceLines({
+        timeReferenceLines: props.timeReferenceLines,
+        xAxis: props.xAxis,
+      });
+    }, [props.timeReferenceLines, props.xAxis]);
+
+  const formattedReferenceRegions: Array<FormattedReferenceRegion> =
+    useMemo(() => {
+      if (!props.referenceRegions || props.referenceRegions.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatReferenceRegions({
+        referenceRegions: props.referenceRegions,
+        xAxis: props.xAxis,
+      });
+    }, [props.referenceRegions, props.xAxis]);
+
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -164,10 +204,21 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         {...maxValueProp}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedTimeReferenceLines={
+          formattedTimeReferenceLines.length > 0
+            ? formattedTimeReferenceLines
+            : undefined
+        }
+        formattedReferenceRegions={
+          formattedReferenceRegions.length > 0
+            ? formattedReferenceRegions
+            : undefined
+        }
         formattedExemplarPoints={
           formattedExemplars.length > 0 ? formattedExemplars : undefined
         }
         onExemplarClick={props.onExemplarClick}
+        onTimeRangeSelect={props.onTimeRangeSelect}
         anomalyBandLowerKey={bandLower}
         anomalyBandUpperKey={bandUpper}
       />

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -3,13 +3,23 @@ import {
   AvailableChartColorsKeys,
   ChartColorValue,
 } from "../ChartLibrary/Utils/ChartColors";
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+} from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
 import YAxis from "../Types/YAxis/YAxis";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
+import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export const BarChartPalette: Array<AvailableChartColorsKeys> = [
@@ -31,6 +41,13 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  /*
+   * Time-anchored annotations: vertical event markers and shaded regions.
+   * Dates are snapped onto the categorical x-axis buckets; annotations
+   * outside the charted window are dropped (regions clamp to the edge).
+   */
+  timeReferenceLines?: Array<ChartTimeReferenceLineProps> | undefined;
+  referenceRegions?: Array<ChartReferenceRegionProps> | undefined;
   showLegend?: boolean | undefined;
   /*
    * Optional per-series color override. Each entry may be a named palette key
@@ -64,6 +81,29 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
     setRecords(records);
   }, [props.data]);
 
+  // Snap time annotations onto the categorical x-axis bucket labels
+  const formattedTimeReferenceLines: Array<FormattedTimeReferenceLine> =
+    useMemo(() => {
+      if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatTimeReferenceLines({
+        timeReferenceLines: props.timeReferenceLines,
+        xAxis: props.xAxis,
+      });
+    }, [props.timeReferenceLines, props.xAxis]);
+
+  const formattedReferenceRegions: Array<FormattedReferenceRegion> =
+    useMemo(() => {
+      if (!props.referenceRegions || props.referenceRegions.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatReferenceRegions({
+        referenceRegions: props.referenceRegions,
+        xAxis: props.xAxis,
+      });
+    }, [props.referenceRegions, props.xAxis]);
+
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -93,6 +133,16 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         syncid={props.sync ? props.syncid : undefined}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedTimeReferenceLines={
+          formattedTimeReferenceLines.length > 0
+            ? formattedTimeReferenceLines
+            : undefined
+        }
+        formattedReferenceRegions={
+          formattedReferenceRegions.length > 0
+            ? formattedReferenceRegions
+            : undefined
+        }
       />
       {hasNoData && <NoDataMessage />}
     </div>

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

@@ -37,6 +37,13 @@ export interface Chart {
   metricInfo?: ChartMetricInfo | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /**
+   * Optional "Open in Explorer" action rendered as an icon button in the
+   * chart header next to the info icon. Kept as a plain callback so this
+   * shared component stays free of any app's routing — callers build the
+   * explorer URL and navigate themselves.
+   */
+  onOpenInExplorer?: (() => void) | undefined;
   /**
    * Optional control panel rendered directly below the chart body. Used by
    * per-series-grouped metric charts to surface a search box, a sort
@@ -109,6 +116,29 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     }
   };
 
+  type GetDragToZoomHintFunction = (chart: Chart) => ReactElement;
+
+  // Same subtle hint the log/telemetry histograms show for drag-to-zoom.
+  const getDragToZoomHint: GetDragToZoomHintFunction = (
+    chart: Chart,
+  ): ReactElement => {
+    const supportsTimeRangeSelect: boolean =
+      (chart.type === ChartType.LINE || chart.type === ChartType.AREA) &&
+      Boolean(
+        (chart.props as LineChartProps | AreaChartProps).onTimeRangeSelect,
+      );
+
+    if (!supportsTimeRangeSelect) {
+      return <></>;
+    }
+
+    return (
+      <span className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-gray-400">
+        Drag to zoom
+      </span>
+    );
+  };
+
   type GetInfoIconFunction = (chart: Chart) => ReactElement;
 
   const getInfoIcon: GetInfoIconFunction = (chart: Chart): ReactElement => {
@@ -119,7 +149,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     return (
       <button
         type="button"
-        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-all duration-150"
+        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-150"
         title="View metric details"
         onClick={() => {
           setMetricInfoModalChart(chart.metricInfo || null);
@@ -134,6 +164,33 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     );
   };
 
+  type GetExplorerIconFunction = (chart: Chart) => ReactElement;
+
+  const getExplorerIcon: GetExplorerIconFunction = (
+    chart: Chart,
+  ): ReactElement => {
+    if (!chart.onOpenInExplorer) {
+      return <></>;
+    }
+
+    return (
+      <button
+        type="button"
+        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-150"
+        title="Open in Metric Explorer"
+        onClick={() => {
+          chart.onOpenInExplorer?.();
+        }}
+      >
+        <Icon
+          icon={IconProp.ExternalLink}
+          size={SizeProp.Smaller}
+          className="h-3.5 w-3.5"
+        />
+      </button>
+    );
+  };
+
   const renderMetricInfoModal: () => ReactElement = (): ReactElement => {
     if (!metricInfoModalChart) {
       return <></>;
@@ -250,10 +307,15 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                 <div className="px-5 pt-4 pb-4 flex flex-col flex-1">
                   <div className="mb-3 pb-3 border-b border-gray-100">
                     <div className="flex items-center">
-                      <h3 className="text-sm font-semibold text-gray-800 tracking-tight">
+                      <h3
+                        className="min-w-0 truncate text-sm font-semibold text-gray-800 tracking-tight"
+                        title={chart.title}
+                      >
                         {chart.title}
                       </h3>
                       {getInfoIcon(chart)}
+                      {getExplorerIcon(chart)}
+                      {getDragToZoomHint(chart)}
                     </div>
                     {chart.description && (
                       <p className="mt-1 text-xs text-gray-500 hidden md:block">
@@ -263,7 +325,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                   </div>
                   {getChartContent(chart, index)}
                   {chart.seriesControls ? (
-                    <div className="mb-3">{chart.seriesControls}</div>
+                    <div className="mt-3">{chart.seriesControls}</div>
                   ) : null}
                 </div>
               </div>
@@ -281,37 +343,46 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   return (
     <>
       {renderMetricInfoModal()}
-      <div
-        className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
-      >
+      <div className={`grid grid-cols-1 ${gridCols} gap-4`}>
         {props.charts.map((chart: Chart, index: number) => {
           return (
             <div
               key={index}
-              className={`p-5 rounded-lg border border-gray-200 bg-white shadow-sm flex flex-col gap-3 ${props.chartCssClass || ""}`}
+              className={`flex flex-col rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}`}
             >
-              <div className="flex items-center">
-                <h2
-                  data-testid="card-details-heading"
-                  id="card-details-heading"
-                  className="text-base font-semibold leading-6 text-gray-900"
-                >
-                  {chart.title}
-                </h2>
-                {getInfoIcon(chart)}
+              {/* Header strip — title, meta icons, hover-revealed zoom hint */}
+              <div className="border-b border-gray-100 px-4 py-2.5">
+                <div className="flex items-center">
+                  <h2
+                    data-testid="card-details-heading"
+                    id="card-details-heading"
+                    className="min-w-0 truncate text-sm font-semibold leading-6 text-gray-900"
+                    title={chart.title}
+                  >
+                    {chart.title}
+                  </h2>
+                  {getInfoIcon(chart)}
+                  {getExplorerIcon(chart)}
+                  {getDragToZoomHint(chart)}
+                </div>
+                {chart.description && (
+                  <p
+                    data-testid="card-description"
+                    className="mt-0.5 w-full truncate text-xs text-gray-500 hidden md:block"
+                    title={chart.description}
+                  >
+                    {chart.description}
+                  </p>
+                )}
               </div>
-              {chart.description && (
-                <p
-                  data-testid="card-description"
-                  className="mt-0.5 text-sm text-gray-500 w-full hidden md:block"
-                >
-                  {chart.description}
-                </p>
-              )}
-              <div className="flex-1 flex flex-col min-h-80">
+              <div className="flex-1 flex flex-col min-h-80 px-4 pt-3 pb-2">
                 {getChartContent(chart, index)}
               </div>
-              {chart.seriesControls ? chart.seriesControls : null}
+              {chart.seriesControls ? (
+                <div className="border-t border-gray-100 px-4 py-3">
+                  {chart.seriesControls}
+                </div>
+              ) : null}
             </div>
           );
         })}