@oneuptime/common 11.3.28 → 11.4.1

package/Types/OnCallDutyPolicy/ScheduleShiftUtil.ts

@@ -0,0 +1,257 @@
+import CalendarEvent from "../Calendar/CalendarEvent";
+import OneUptimeDate from "../Date";
+
+/*
+ * Turns the low-level calendar events produced by LayerUtil into the
+ * human-readable "shifts" the on-call schedule summaries render — e.g.
+ * "Alice is on call from Mon 9:00 AM to Tue 9:00 AM".
+ *
+ * LayerUtil emits one CalendarEvent per contiguous coverage segment. A single
+ * rotation turn can therefore be split into several events (a daily 9-5
+ * restriction produces one event per day), and the merged multi-layer schedule
+ * interleaves events from different users/layers. These helpers collapse those
+ * raw segments back into the shifts a human thinks in, and surface the gaps
+ * where nobody is on call.
+ *
+ * Everything here is pure and timezone-agnostic: it operates on the absolute
+ * instants already resolved by LayerUtil (which itself resolves restriction
+ * wall-clock windows in the schedule's timezone). Rendering code decides which
+ * timezone to display those instants in.
+ */
+
+/*
+ * The identity of the on-call person for an event. LayerUtil stores the user id
+ * in CalendarEvent.title before the UI relabels it, so callers pass the events
+ * straight through from getEvents/getMultiLayerEvents.
+ */
+export interface OnCallShift {
+  userId: string;
+  start: Date;
+  end: Date;
+  /*
+   * Total ACTIVE on-call seconds inside this shift, i.e. the sum of the covered
+   * segments' durations. For a contiguous shift this equals end - start. For a
+   * turn merged across off-hours (mergeAcrossGaps), it is the real time on call,
+   * which is smaller than the wall-clock span — so the summary can show honest
+   * coverage ("40h across the week") instead of the misleading span ("4d 8h").
+   */
+  coverageSeconds: number;
+}
+
+export interface CoverageGap {
+  start: Date;
+  end: Date;
+}
+
+export interface CurrentAndNextShift {
+  current: OnCallShift | null;
+  next: OnCallShift | null;
+}
+
+/*
+ * Two coverage segments are considered part of the same continuous shift when
+ * the gap between them is below this threshold. LayerUtil starts each following
+ * segment exactly one second after the previous one ends, so anything within a
+ * couple of minutes is "touching"; anything larger is a genuine off-hours gap
+ * (a restriction window closing, a rotation with no fallback layer, etc.).
+ */
+const CONTIGUITY_TOLERANCE_SECONDS: number = 90;
+
+export default class ScheduleShiftUtil {
+  /*
+   * Collapse raw coverage events into shifts.
+   *
+   * - mergeAcrossGaps = false (default): only merges segments that actually
+   *   touch, so genuine off-hours gaps remain visible. This is what the "final
+   *   schedule" summary uses so it can honestly show when nobody is on call.
+   * - mergeAcrossGaps = true: merges every consecutive run of the same user
+   *   into a single turn, absorbing the within-turn off-hours gaps. This is what
+   *   the per-layer rotation summary uses so "Alice: Mon -> Fri" reads as one
+   *   rotation turn instead of five separate day rows. The turn's coverageSeconds
+   *   still reflects only the real active on-call time (e.g. 5x8h, not the full
+   *   Mon->Fri wall-clock span), and the summary shows the layer's active-hours
+   *   window as context.
+   */
+  public static groupEventsIntoShifts(
+    events: Array<CalendarEvent>,
+    options?: { mergeAcrossGaps?: boolean | undefined } | undefined,
+  ): Array<OnCallShift> {
+    if (!events || events.length === 0) {
+      return [];
+    }
+
+    const mergeAcrossGaps: boolean = Boolean(options?.mergeAcrossGaps);
+
+    // Work on a copy sorted by start time; never mutate the caller's array.
+    const sorted: Array<CalendarEvent> = [...events]
+      .filter((event: CalendarEvent) => {
+        return (
+          Boolean(event.title) && Boolean(event.start) && Boolean(event.end)
+        );
+      })
+      .sort((a: CalendarEvent, b: CalendarEvent) => {
+        if (OneUptimeDate.isBefore(a.start, b.start)) {
+          return -1;
+        }
+        if (OneUptimeDate.isAfter(a.start, b.start)) {
+          return 1;
+        }
+        return 0;
+      });
+
+    const shifts: Array<OnCallShift> = [];
+
+    for (const event of sorted) {
+      const userId: string = event.title;
+      const eventSeconds: number = OneUptimeDate.getDifferenceInSeconds(
+        event.end,
+        event.start,
+      );
+      const last: OnCallShift | undefined = shifts[shifts.length - 1];
+
+      const sameUser: boolean = Boolean(last) && last!.userId === userId;
+
+      const isContiguous: boolean =
+        Boolean(last) &&
+        OneUptimeDate.getDifferenceInSeconds(last!.end, event.start) <=
+          CONTIGUITY_TOLERANCE_SECONDS &&
+        OneUptimeDate.isOnOrBefore(last!.end, event.end);
+
+      /*
+       * Extend the previous shift when it belongs to the same user AND either we
+       * are merging whole turns, or the two segments physically touch. Only
+       * extend the end forward — never pull it backwards — so overlapping
+       * segments (possible after the multi-layer priority merge) can't shrink a
+       * shift. Accumulate each merged segment's own duration into coverageSeconds
+       * so a turn merged across off-hours reports its real active time on call.
+       */
+      if (last && sameUser && (mergeAcrossGaps || isContiguous)) {
+        if (OneUptimeDate.isAfter(event.end, last.end)) {
+          last.end = event.end;
+        }
+        last.coverageSeconds += eventSeconds;
+        continue;
+      }
+
+      shifts.push({
+        userId,
+        start: event.start,
+        end: event.end,
+        coverageSeconds: eventSeconds,
+      });
+    }
+
+    return shifts;
+  }
+
+  /*
+   * The shift that contains `now` (the person on call right now) and the first
+   * shift that starts after `now` (up next). Either can be null: `current` is
+   * null when nobody is on call at this instant (a coverage gap), and `next` is
+   * null when the computed window does not reach far enough to include another
+   * shift.
+   */
+  public static getCurrentAndNextShift(
+    shifts: Array<OnCallShift>,
+    now: Date,
+  ): CurrentAndNextShift {
+    let current: OnCallShift | null = null;
+    let next: OnCallShift | null = null;
+
+    for (const shift of shifts) {
+      const hasStarted: boolean = OneUptimeDate.isOnOrBefore(shift.start, now);
+      const hasNotEnded: boolean = OneUptimeDate.isAfter(shift.end, now);
+
+      if (hasStarted && hasNotEnded) {
+        current = shift;
+        continue;
+      }
+
+      if (OneUptimeDate.isAfter(shift.start, now)) {
+        if (!next || OneUptimeDate.isBefore(shift.start, next.start)) {
+          next = shift;
+        }
+      }
+    }
+
+    return { current, next };
+  }
+
+  /*
+   * Periods inside [windowStart, windowEnd] during which no shift provides
+   * coverage. Includes a leading gap (from windowStart until the first shift
+   * begins) and gaps between consecutive shifts. Trailing time after the last
+   * shift is intentionally NOT reported as a gap: the summary window is finite,
+   * so "nothing scheduled past the window" is an artifact of the window, not a
+   * real coverage hole.
+   *
+   * `shifts` are assumed sorted by start (as returned by groupEventsIntoShifts).
+   */
+  public static getCoverageGaps(
+    shifts: Array<OnCallShift>,
+    windowStart: Date,
+    windowEnd: Date,
+  ): Array<CoverageGap> {
+    const gaps: Array<CoverageGap> = [];
+
+    if (OneUptimeDate.isOnOrAfter(windowStart, windowEnd)) {
+      return gaps;
+    }
+
+    /*
+     * A gap only "counts" when it is longer than the contiguity tolerance, so
+     * the one-second boundaries LayerUtil leaves between segments never show up
+     * as spurious coverage holes.
+     */
+    const isRealGap: (start: Date, end: Date) => boolean = (
+      start: Date,
+      end: Date,
+    ): boolean => {
+      return (
+        OneUptimeDate.isAfter(end, start) &&
+        OneUptimeDate.getDifferenceInSeconds(end, start) >
+          CONTIGUITY_TOLERANCE_SECONDS
+      );
+    };
+
+    if (shifts.length === 0) {
+      if (isRealGap(windowStart, windowEnd)) {
+        gaps.push({ start: windowStart, end: windowEnd });
+      }
+      return gaps;
+    }
+
+    // Leading gap: nobody on call from the window start until the first shift.
+    const firstShift: OnCallShift = shifts[0]!;
+    if (
+      OneUptimeDate.isAfter(firstShift.start, windowStart) &&
+      isRealGap(windowStart, firstShift.start)
+    ) {
+      gaps.push({ start: windowStart, end: firstShift.start });
+    }
+
+    /*
+     * `coveredUntil` tracks the furthest point covered so far. Shifts can
+     * overlap (multi-layer merges), so we advance it monotonically and only
+     * record a gap when the next shift starts strictly after it.
+     */
+    let coveredUntil: Date = firstShift.end;
+
+    for (let i: number = 1; i < shifts.length; i++) {
+      const shift: OnCallShift = shifts[i]!;
+
+      if (
+        OneUptimeDate.isAfter(shift.start, coveredUntil) &&
+        isRealGap(coveredUntil, shift.start)
+      ) {
+        gaps.push({ start: coveredUntil, end: shift.start });
+      }
+
+      if (OneUptimeDate.isAfter(shift.end, coveredUntil)) {
+        coveredUntil = shift.end;
+      }
+    }
+
+    return gaps;
+  }
+}

package/Types/Probe/ProbeMonitorResponse.ts

@@ -8,10 +8,13 @@ import SslMonitorResponse from "../Monitor/SSLMonitor/SslMonitorResponse";
 import SyntheticMonitorResponse from "../Monitor/SyntheticMonitors/SyntheticMonitorResponse";
 import SnmpMonitorResponse from "../Monitor/SnmpMonitor/SnmpMonitorResponse";
 import DnsMonitorResponse from "../Monitor/DnsMonitor/DnsMonitorResponse";
+import PingMonitorResponse from "../Monitor/PingMonitor/PingMonitorResponse";
 import DomainMonitorResponse from "../Monitor/DomainMonitor/DomainMonitorResponse";
 import DnssecMonitorResponse from "../Monitor/DnssecMonitor/DnssecMonitorResponse";
 import ExternalStatusPageMonitorResponse from "../Monitor/ExternalStatusPageMonitor/ExternalStatusPageMonitorResponse";
+import HttpPhaseTimings from "../Monitor/HttpPhaseTimings";
 import MonitorEvaluationSummary from "../Monitor/MonitorEvaluationSummary";
+import NetworkPathTrace from "../Monitor/NetworkMonitor/NetworkPathTrace";
 import ObjectID from "../ObjectID";
 import Port from "../Port";
 import ProbeAttempt from "./ProbeAttempt";
@@ -35,6 +38,17 @@ export default interface ProbeMonitorResponse {
   syntheticMonitorResponse?: Array<SyntheticMonitorResponse> | undefined;
   customCodeMonitorResponse?: CustomCodeMonitorResponse | undefined;
   snmpResponse?: SnmpMonitorResponse | undefined;
+  pingResponse?: PingMonitorResponse | undefined;
+  /*
+   * Traceroute + DNS lookup captured by the probe when a Ping/IP/Port check
+   * fails — path evidence from the moment of failure.
+   */
+  networkPathTrace?: NetworkPathTrace | undefined;
+  /*
+   * DNS / TCP / TLS / TTFB / download phase breakdown for Website and API
+   * checks. Absent when the request went through a proxy.
+   */
+  httpTimings?: HttpPhaseTimings | undefined;
   dnsResponse?: DnsMonitorResponse | undefined;
   domainResponse?: DomainMonitorResponse | undefined;
   dnssecResponse?: DnssecMonitorResponse | undefined;

package/UI/Components/Calendar/Calendar.tsx

@@ -21,6 +21,12 @@ export interface ComponentProps {
   id?: string | undefined;
   events: Array<CalendarEvent>;
   defaultCalendarView?: DefaultCalendarView;
+  /*
+   * Which date the calendar initially opens on. Defaults to "now". Callers that
+   * render events shifted into a display timezone pass the same-shifted "now" so
+   * the grid opens on that zone's current day rather than the browser's.
+   */
+  defaultDate?: Date | undefined;
   onRangeChange: (startAndEndTime: StartAndEndTime) => void;
 }
 
@@ -38,9 +44,9 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const { defaultDate } = useMemo(() => {
     return {
-      defaultDate: OneUptimeDate.getCurrentDate(),
+      defaultDate: props.defaultDate || OneUptimeDate.getCurrentDate(),
     };
-  }, []);
+  }, [props.defaultDate]);
 
   const eventStyleGetter: EventPropGetter<any> = (
     event: CalendarEvent,

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

@@ -38,10 +38,10 @@ export interface Chart {
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   /**
-   * Optional control panel rendered between the chart title and the
-   * chart body. Used by per-series-grouped metric charts to surface a
-   * search box, per-series toggles, and a "show all" escape hatch so
-   * the chart stays usable at thousands of unique label combinations.
+   * Optional control panel rendered directly below the chart body. Used by
+   * per-series-grouped metric charts to surface a search box, a sort
+   * control, per-series toggles, and a "show all" escape hatch so the chart
+   * stays usable at thousands of unique label combinations.
    */
   seriesControls?: ReactElement | undefined;
 }
@@ -308,10 +308,10 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                   {chart.description}
                 </p>
               )}
-              {chart.seriesControls ? chart.seriesControls : null}
               <div className="flex-1 flex flex-col min-h-80">
                 {getChartContent(chart, index)}
               </div>
+              {chart.seriesControls ? chart.seriesControls : null}
             </div>
           );
         })}

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

@@ -815,7 +815,10 @@ const AreaChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
+              cursor={{
+                stroke: "var(--ou-chart-cursor, #d1d5db)",
+                strokeWidth: 1,
+              }}
               offset={20}
               position={{ y: 0 }}
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -903,11 +906,11 @@ const AreaChart: React.ForwardRefExoticComponent<
                   }
                   return [low, high];
                 }}
-                stroke="#94a3b8"
+                stroke="var(--ou-chart-tick, #94a3b8)"
                 strokeOpacity={0.3}
                 strokeWidth={1}
                 strokeDasharray="3 3"
-                fill="#94a3b8"
+                fill="var(--ou-chart-tick, #94a3b8)"
                 fillOpacity={0.12}
                 isAnimationActive={false}
                 connectNulls={false}
@@ -1064,7 +1067,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                     y={exemplar.y}
                     r={5}
                     fill="#7c3aed"
-                    stroke="#ffffff"
+                    stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
@@ -1074,7 +1077,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                     <Label
                       value="E"
                       position="center"
-                      fill="#ffffff"
+                      fill="var(--ou-chart-marker-ring, #ffffff)"
                       fontSize={8}
                       fontWeight={700}
                     />

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

@@ -925,7 +925,10 @@ const BarChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ fill: "#d1d5db", opacity: "0.15" }}
+              cursor={{
+                fill: "var(--ou-chart-cursor, #d1d5db)",
+                opacity: "0.15",
+              }}
               offset={20}
               {...(layout === "horizontal"
                 ? { position: { y: 0 } }

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -813,7 +813,10 @@ const LineChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
+              cursor={{
+                stroke: "var(--ou-chart-cursor, #d1d5db)",
+                strokeWidth: 1,
+              }}
               offset={20}
               position={{ y: 0 }}
               content={({ active, payload, label }: any) => {
@@ -1052,7 +1055,7 @@ const LineChart: React.ForwardRefExoticComponent<
                     y={exemplar.y}
                     r={5}
                     fill="#7c3aed"
-                    stroke="#ffffff"
+                    stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
@@ -1062,7 +1065,7 @@ const LineChart: React.ForwardRefExoticComponent<
                     <Label
                       value="E"
                       position="center"
-                      fill="#ffffff"
+                      fill="var(--ou-chart-marker-ring, #ffffff)"
                       fontSize={8}
                       fontWeight={700}
                     />

package/UI/Components/CodeBlock/CodeBlock.tsx

@@ -36,8 +36,9 @@ const CodeBlock: FunctionComponent<ComponentProps> = (
       {showCopyButton && typeof props.code === "string" && (
         <button
           onClick={handleCopy}
-          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-0 group-hover:opacity-100 z-10"
+          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-70 hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100 z-10"
           title={copied ? "Copied!" : "Copy to clipboard"}
+          aria-label={copied ? "Copied" : "Copy to clipboard"}
           type="button"
         >
           <Icon

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,7 @@
 import Editor from "@monaco-editor/react";
 import CodeType from "../../../Types/Code/CodeType";
 import MarkdownUtil from "../../Utils/Markdown";
+import { Theme, useTheme } from "../../Utils/Theme";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -36,6 +37,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
   const [placeholder, setPlaceholder] = useState<string>("");
   const [helpText, setHelpText] = useState<string | ReactElement>("");
   const editorRef: React.MutableRefObject<any> = useRef<any>(null);
+  const theme: Theme = useTheme();
 
   useEffect(() => {
     let value: string | undefined = props.value;
@@ -138,6 +140,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
       )}
 
       <Editor
+        theme={theme === Theme.Dark ? "vs-dark" : "light"}
         defaultLanguage={props.type}
         height="30vh"
         value={value}

package/UI/Components/Divider/Divider.tsx

@@ -4,7 +4,7 @@ const Divider: () => JSX.Element = (): ReactElement => {
   return (
     <div
       className="w-full border-t border-gray-100"
-      style={{ borderColor: "#f9fafb" }}
+      style={{ borderColor: "var(--ou-border-subtle, #f9fafb)" }}
     ></div>
   );
 };

package/UI/Components/Dropdown/Dropdown.tsx

@@ -41,6 +41,12 @@ export interface DropdownOptionGroup {
   options: Array<DropdownOption>;
 }
 
+/*
+ * Modal surfaces use z-50. The portalled menu must sit above that stacking
+ * context so options are not painted underneath an anchored modal footer.
+ */
+export const DROPDOWN_MENU_Z_INDEX: number = 60;
+
 export interface ComponentProps {
   options: Array<DropdownOption | DropdownOptionGroup>;
   initialValue?: undefined | DropdownOption | Array<DropdownOption>;
@@ -334,8 +340,8 @@ const Dropdown: FunctionComponent<ComponentProps> = (
   } = (color?: string): { backgroundColor: string; color: string } => {
     if (!color) {
       return {
-        backgroundColor: "#e5e7eb", // gray-200
-        color: "#374151", // gray-700
+        backgroundColor: "var(--ou-surface-tertiary, #e5e7eb)",
+        color: "var(--ou-text-secondary, #374151)",
       };
     }
 
@@ -511,6 +517,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
     setValue(value);
   }, [props.value]);
 
+  const menuPortalTarget: HTMLElement | null =
+    typeof document === "undefined" ? null : document.body;
+
   return (
     <div
       id={props.id}
@@ -710,11 +719,11 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           menuPortal: (base: CSSObjectWithLabel): CSSObjectWithLabel => {
             return {
               ...base,
-              zIndex: 50,
+              zIndex: DROPDOWN_MENU_Z_INDEX,
             };
           },
         }}
-        menuPortalTarget={document.body}
+        menuPortalTarget={menuPortalTarget}
         menuPosition="fixed"
         isClearable={true}
         isSearchable={true}