@oneuptime/common 14.0.1 → 14.0.2

package/UI/Components/Calendar/Calendar.tsx

@@ -3,19 +3,102 @@ import CalendarEvent from "../../../Types/Calendar/CalendarEvent";
 import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
 import StartAndEndTime from "../../../Types/Time/StartAndEndTime";
+import { StyledDayEvent, layoutDayEvents } from "./CalendarDayLayout";
 import moment from "moment-timezone";
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
 import {
   Calendar,
+  Culture,
   DateLocalizer,
+  DateRange,
+  DayLayoutFunction,
   EventPropGetter,
+  Formats,
   momentLocalizer,
   View,
 } from "react-big-calendar";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import "./Calendar.css";
 
-const localizer: DateLocalizer = momentLocalizer(moment);
+// Exported so tests lay days out with exactly the localizer the calendar uses.
+export const calendarLocalizer: DateLocalizer = momentLocalizer(moment);
+
+/*
+ * react-big-calendar treats any block whose start and end are both exactly
+ * midnight as an all-day event and moves it out of the grid into the strip
+ * above it. A rotation that hands off at midnight produces exactly that
+ * shape, so every shift of a daily midnight rotation left the grid and became
+ * a bar in the header. Only CalendarEvent.allDay decides what is all-day.
+ */
+calendarLocalizer.startAndEndAreDateOnly = (): boolean => {
+  return false;
+};
+
+/*
+ * How long a day column is, in minutes. The moment localizer counts real
+ * minutes, so a daylight-saving day gets 23 or 25 hour rows, but it places
+ * blocks by wall-clock minute and draws the time gutter from a 24-hour day.
+ * Counting wall-clock minutes (the base localizer's own formula) gives every
+ * column 24 rows. The change day then lines up with the gutter and the other
+ * days, and its last hour exists: on the spring-forward day, a hand-off after
+ * 11 PM used to fall off the end of a 23-row column.
+ */
+calendarLocalizer.getTotalMin = (start: Date, end: Date): number => {
+  return (
+    calendarLocalizer.diff(start, end, "minutes") +
+    calendarLocalizer.getDstOffset(start, end)
+  );
+};
+
+/*
+ * The label for a block that starts in this column and runs past it.
+ * react-big-calendar writes "7:26 PM –", implying it continues into the next
+ * day. A block that ends at the midnight closing this column does not: the
+ * next day has nothing of it to show (see CalendarDayLayout), so it gets its
+ * end time here instead, "7:26 PM – 12:00 AM".
+ */
+export const formatEventTimeRangeStart: (
+  range: DateRange,
+  culture?: Culture,
+  local?: DateLocalizer,
+) => string = (
+  range: DateRange,
+  culture?: Culture,
+  local?: DateLocalizer,
+): string => {
+  const formatTime: (date: Date) => string = (date: Date): string => {
+    return local
+      ? local.format(date, "LT", culture)
+      : moment(date).format("LT");
+  };
+
+  const followingMidnight: moment.Moment = moment(range.start)
+    .startOf("day")
+    .add(1, "day");
+
+  // Whole minutes, as on the grid: a hand-off a few seconds after midnight is still one at midnight.
+  if (moment(range.end).isSame(followingMidnight, "minute")) {
+    return `${formatTime(range.start)} – ${formatTime(range.end)}`;
+  }
+
+  return `${formatTime(range.start)} – `;
+};
+
+const CALENDAR_FORMATS: Formats = {
+  eventTimeRangeStartFormat: formatEventTimeRangeStart,
+};
+
+const dayLayoutAlgorithm: DayLayoutFunction<CalendarEvent> = (
+  args: Parameters<DayLayoutFunction<CalendarEvent>>[0],
+): Array<{ event: CalendarEvent; style: React.CSSProperties }> => {
+  return layoutDayEvents<CalendarEvent>({
+    events: args.events,
+    slotMetrics: args.slotMetrics,
+    accessors: args.accessors,
+  }).map((styled: StyledDayEvent<CalendarEvent>) => {
+    return { event: styled.event, style: styled.style };
+  });
+};
 
 export interface ComponentProps {
   id?: string | undefined;
@@ -34,6 +117,15 @@ export interface ComponentProps {
    * the grid opens on that zone's current day rather than the browser's.
    */
   defaultDate?: Date | undefined;
+  /*
+   * "Now" as the grid should see it: it places the current-time line and picks
+   * the highlighted day. Defaults to the browser clock. Callers that shift
+   * events into a display timezone must shift this the same way, or the line
+   * is drawn at the browser's time on a grid showing another zone. It is called
+   * again each time the line moves, so it must read the clock, not return a
+   * fixed date.
+   */
+  getNow?: (() => Date) | undefined;
   onRangeChange: (startAndEndTime: StartAndEndTime) => void;
 }
 
@@ -55,9 +147,45 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
     };
   }, [props.defaultDate]);
 
+  /*
+   * The strip above the week/day grid only ever holds all-day events. With
+   * none, it is an empty band that pushes part of the day out of view. Only
+   * `allDay` counts, because startAndEndAreDateOnly is disabled above.
+   */
+  const hasAllDayEvents: boolean = useMemo(() => {
+    return props.events.some((event: CalendarEvent) => {
+      return Boolean(event.allDay);
+    });
+  }, [props.events]);
+
+  const backgroundEventSet: Set<CalendarEvent> = useMemo(() => {
+    return new Set<CalendarEvent>(props.backgroundEvents || []);
+  }, [props.backgroundEvents]);
+
   const eventStyleGetter: EventPropGetter<any> = (
     event: CalendarEvent,
   ): { className?: string | undefined; style?: React.CSSProperties } => {
+    const className: string | undefined = event.className
+      ? event.className.toString()
+      : undefined;
+
+    /*
+     * react-big-calendar runs background events through this getter too. The
+     * block styling below used to paint every uncovered band as a solid
+     * Blue500 block, which looks exactly like a shift and is one of the user
+     * colours. Background events are drawn by the stylesheet (the hatched
+     * .rbc-background-event), taking only a colour the caller asked for.
+     */
+    if (backgroundEventSet.has(event)) {
+      const backgroundStyle: React.CSSProperties = event.color
+        ? { backgroundColor: event.color.toString() }
+        : {};
+
+      return className
+        ? { style: backgroundStyle, className }
+        : { style: backgroundStyle };
+    }
+
     const backgroundColor: string =
       event.color?.toString() || Blue500.toString();
 
@@ -85,10 +213,6 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
         event.accentColor.toString();
     }
 
-    const className: string | undefined = event.className
-      ? event.className.toString()
-      : undefined;
-
     return className ? { style, className } : { style };
   };
 
@@ -107,13 +231,18 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
   return (
     <div
       id={props.id}
-      className="oneuptime-calendar mt-5 h-[42rem] rounded-xl bg-white"
+      className={`oneuptime-calendar mt-5 h-[46rem] rounded-xl bg-white${
+        hasAllDayEvents ? "" : " oneuptime-calendar--no-all-day"
+      }`}
     >
       <Calendar
         defaultDate={defaultDate}
         events={props.events}
         backgroundEvents={props.backgroundEvents || []}
-        localizer={localizer}
+        localizer={calendarLocalizer}
+        formats={CALENDAR_FORMATS}
+        dayLayoutAlgorithm={dayLayoutAlgorithm}
+        {...(props.getNow ? { getNow: props.getNow } : {})}
         showMultiDayTimes
         views={CALENDAR_VIEWS}
         defaultView={props.defaultCalendarView || "week"}

package/UI/Components/Calendar/CalendarDayLayout.ts

@@ -0,0 +1,236 @@
+/*
+ * How the week and day views place blocks inside one day's column.
+ *
+ * react-big-calendar ships two algorithms and neither suits a roster, where
+ * blocks are normally back-to-back hand-offs rather than competing meetings:
+ *
+ *  - "overlap" (its default) puts any two blocks that START within half an hour
+ *    of each other side by side, so a short shift and the one after it were
+ *    drawn in two narrow, overlapping lanes, as if both people were on call at
+ *    once.
+ *  - "no-overlap" trims 2px off every block, which opens a visible gap at every
+ *    hand-off.
+ *
+ * It also hands each column every block that touches that DATE, including a
+ * block that ends exactly at the column's midnight. That block covers none of
+ * the day, but it was still drawn as a 20px sliver labelled "– 12:00 AM" at the
+ * top of the column, and it squeezed the block that really starts at midnight
+ * into half the width.
+ *
+ * This layout drops those slivers and gives blocks separate lanes only when they
+ * really overlap in time. Blocks that follow one another keep the full width and
+ * meet at the minute they hand off.
+ */
+
+/*
+ * The subset of react-big-calendar's per-column slot metrics this layout reads.
+ * Minute positions are whole minutes from the start of the column, clamped to
+ * the column; top and height are percentages of the column.
+ */
+export interface DaySlotRange {
+  top: number;
+  height: number;
+  start: number;
+  end: number;
+}
+
+export interface DaySlotMetrics {
+  getRange: (start: Date, end: Date) => DaySlotRange;
+  startsBeforeDay: (date: Date) => boolean;
+}
+
+export interface DayEventAccessors<TEvent> {
+  start: (event: TEvent) => Date;
+  end: (event: TEvent) => Date;
+}
+
+export interface DayLayoutInput<TEvent> {
+  events: Array<TEvent>;
+  slotMetrics: DaySlotMetrics;
+  accessors: DayEventAccessors<TEvent>;
+}
+
+/*
+ * Numbers, not strings: react-big-calendar reads these back and adds the "%"
+ * itself. xOffset is the block's left edge.
+ */
+export interface DayEventStyle {
+  top: number;
+  height: number;
+  width: number;
+  xOffset: number;
+}
+
+export interface StyledDayEvent<TEvent> {
+  event: TEvent;
+  style: DayEventStyle;
+}
+
+interface PlacedEvent<TEvent> {
+  event: TEvent;
+  top: number;
+  height: number;
+  startMinute: number;
+  endMinute: number;
+  lane: number;
+}
+
+/*
+ * True when a block that started on an earlier day leaves less than a whole
+ * minute of itself in this column: a block ending at this column's midnight,
+ * or a few seconds after it. Whole minutes match the grid: a block ending a
+ * few seconds after midnight is still a hand-off at midnight, not a shift.
+ *
+ * Only a tail is ever dropped. A block always stays in the column it starts
+ * in, however little of it lands there. A block starting at 11:59 PM keeps
+ * a zero-height place at the bottom of its own day. Dropping that too would
+ * make a block such as 11:59 PM to 12:00 AM vanish from both days.
+ */
+export const isSpilloverSliver: <TEvent>(
+  event: TEvent,
+  slotMetrics: DaySlotMetrics,
+  accessors: DayEventAccessors<TEvent>,
+) => boolean = <TEvent>(
+  event: TEvent,
+  slotMetrics: DaySlotMetrics,
+  accessors: DayEventAccessors<TEvent>,
+): boolean => {
+  const start: Date = accessors.start(event);
+
+  if (!slotMetrics.startsBeforeDay(start)) {
+    return false;
+  }
+
+  const range: DaySlotRange = slotMetrics.getRange(start, accessors.end(event));
+  return range.end <= range.start;
+};
+
+// Half-open, so a block ending at 17:02 does not overlap one starting at 17:02.
+const overlapsInTime: <TEvent>(
+  a: PlacedEvent<TEvent>,
+  b: PlacedEvent<TEvent>,
+) => boolean = <TEvent>(
+  a: PlacedEvent<TEvent>,
+  b: PlacedEvent<TEvent>,
+): boolean => {
+  return a.startMinute < b.endMinute && b.startMinute < a.endMinute;
+};
+
+const styleCluster: <TEvent>(
+  cluster: Array<PlacedEvent<TEvent>>,
+) => Array<StyledDayEvent<TEvent>> = <TEvent>(
+  cluster: Array<PlacedEvent<TEvent>>,
+): Array<StyledDayEvent<TEvent>> => {
+  // Each lane holds the minute its latest block ends.
+  const laneEnds: Array<number> = [];
+
+  for (const placed of cluster) {
+    let lane: number = laneEnds.findIndex((laneEnd: number) => {
+      return laneEnd <= placed.startMinute;
+    });
+
+    if (lane === -1) {
+      lane = laneEnds.length;
+      laneEnds.push(placed.endMinute);
+    } else {
+      laneEnds[lane] = placed.endMinute;
+    }
+
+    placed.lane = lane;
+  }
+
+  const laneCount: number = laneEnds.length;
+  const laneWidth: number = 100 / laneCount;
+
+  return cluster.map((placed: PlacedEvent<TEvent>) => {
+    /*
+     * Widen into the lanes to the right until one of them is busy while this
+     * block runs, so a long shift is not squeezed for its whole length because
+     * a short one sat beside it for an hour.
+     */
+    let spanEnd: number = laneCount;
+
+    for (const other of cluster) {
+      if (
+        other.lane > placed.lane &&
+        other.lane < spanEnd &&
+        overlapsInTime(placed, other)
+      ) {
+        spanEnd = other.lane;
+      }
+    }
+
+    return {
+      event: placed.event,
+      style: {
+        top: placed.top,
+        height: placed.height,
+        width: (spanEnd - placed.lane) * laneWidth,
+        xOffset: placed.lane * laneWidth,
+      },
+    };
+  });
+};
+
+export const layoutDayEvents: <TEvent>(
+  input: DayLayoutInput<TEvent>,
+) => Array<StyledDayEvent<TEvent>> = <TEvent>(
+  input: DayLayoutInput<TEvent>,
+): Array<StyledDayEvent<TEvent>> => {
+  const placed: Array<PlacedEvent<TEvent>> = [];
+
+  for (const event of input.events) {
+    if (isSpilloverSliver(event, input.slotMetrics, input.accessors)) {
+      continue;
+    }
+
+    const range: DaySlotRange = input.slotMetrics.getRange(
+      input.accessors.start(event),
+      input.accessors.end(event),
+    );
+
+    placed.push({
+      event,
+      top: range.top,
+      height: range.height,
+      startMinute: range.start,
+      endMinute: range.end,
+      lane: 0,
+    });
+  }
+
+  /*
+   * Earliest first, and the longer of two blocks with the same start first, so
+   * a later block paints over an earlier one. That matters when a short
+   * block's minimum height overhangs the start of the next block: the next
+   * block is drawn on top, where it really starts.
+   */
+  placed.sort((a: PlacedEvent<TEvent>, b: PlacedEvent<TEvent>) => {
+    return a.startMinute - b.startMinute || b.endMinute - a.endMinute;
+  });
+
+  /*
+   * Lanes are shared only within a cluster, meaning blocks linked by a chain of
+   * overlaps. Two concurrent blocks in the morning must not narrow the evening.
+   */
+  const styled: Array<StyledDayEvent<TEvent>> = [];
+  let cluster: Array<PlacedEvent<TEvent>> = [];
+  let clusterEnd: number = Number.NEGATIVE_INFINITY;
+
+  for (const item of placed) {
+    if (cluster.length > 0 && item.startMinute >= clusterEnd) {
+      styled.push(...styleCluster(cluster));
+      cluster = [];
+      clusterEnd = Number.NEGATIVE_INFINITY;
+    }
+
+    cluster.push(item);
+    clusterEnd = Math.max(clusterEnd, item.endMinute);
+  }
+
+  if (cluster.length > 0) {
+    styled.push(...styleCluster(cluster));
+  }
+
+  return styled;
+};

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

@@ -64,6 +64,16 @@ export interface ComponentProps {
    * Absent → this group syncs only within itself.
    */
   syncId?: string | undefined;
+  /*
+   * Without its card, a chart's plot takes whatever height the panel has
+   * left after the title and the series controls. In a panel that can grow
+   * (a monitor overview column), that squeezed the plot to a sliver, so
+   * those hosts set this to keep a minimum plot height and let the panel
+   * grow instead. A panel with a fixed height (a dashboard widget) must
+   * leave it off: it cannot grow, so a floor pushes the series controls and
+   * the x-axis out of view. Only read when hideCard is set.
+   */
+  minPlotHeight?: boolean | undefined;
 }
 
 const ChartGroup: FunctionComponent<ComponentProps> = (
@@ -346,7 +356,19 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                       </p>
                     )}
                   </div>
-                  {getChartContent(chart, index)}
+                  {/*
+                   * The plot takes whatever height the panel has left. With
+                   * minPlotHeight the panel grows around a floor instead;
+                   * without it the plot shrinks to fit (see minPlotHeight).
+                   */}
+                  <div
+                    data-testid="chart-group-plot"
+                    className={`flex flex-1 flex-col ${
+                      props.minPlotHeight ? "min-h-48" : "min-h-0"
+                    }`}
+                  >
+                    {getChartContent(chart, index)}
+                  </div>
                   {chart.seriesControls ? (
                     <div className="mt-3">{chart.seriesControls}</div>
                   ) : null}

package/UI/Components/Charts/Utils/HistogramSelection.ts

@@ -0,0 +1,117 @@
+import OneUptimeDate from "../../../../Types/Date";
+
+export interface HistogramSelectionWindow {
+  startTime: Date;
+  endTime: Date;
+}
+
+export interface HistogramSelectionInput {
+  /** Label of the bar the selection started on: the START of its bucket. */
+  fromBucket: string;
+  /** Label of the bar the selection ended on: the START of its bucket. */
+  toBucket: string;
+  /*
+   * How much time one bar covers. Unknown (or not a positive number) means
+   * the selection can only run from label to label.
+   */
+  bucketIntervalMs?: number | undefined;
+}
+
+type GetHistogramSelectionWindowFunction = (
+  input: HistogramSelectionInput,
+) => HistogramSelectionWindow | null;
+
+/**
+ * The window of time a selection on a time histogram covers.
+ *
+ * Each bar is labelled with the start of its bucket, so read literally a
+ * selection runs from the start of the first bar to the start of the last:
+ * the last bar is dropped, and a click on a single bar becomes a window zero
+ * seconds wide. That window matches no row at all, while the chart zoomed
+ * into it goes on drawing the bar's volume - the "shows no logs" report in
+ * issue #3914. With the bucket width known, the window runs to the END of
+ * the last bar instead, so it holds every row the selected bars counted.
+ *
+ * Returns null when there is no window worth zooming into: a label that is
+ * not a date, or a single bar whose width is unknown. A zero-width window is
+ * never what the reader asked for.
+ */
+export const getHistogramSelectionWindow: GetHistogramSelectionWindowFunction =
+  (input: HistogramSelectionInput): HistogramSelectionWindow | null => {
+    const fromMs: number = OneUptimeDate.fromString(input.fromBucket).getTime();
+    const toMs: number = OneUptimeDate.fromString(input.toBucket).getTime();
+
+    if (!Number.isFinite(fromMs) || !Number.isFinite(toMs)) {
+      return null;
+    }
+
+    const intervalMs: number =
+      typeof input.bucketIntervalMs === "number" &&
+      Number.isFinite(input.bucketIntervalMs) &&
+      input.bucketIntervalMs > 0
+        ? input.bucketIntervalMs
+        : 0;
+
+    const startMs: number = Math.min(fromMs, toMs);
+    const endMs: number = Math.max(fromMs, toMs) + intervalMs;
+
+    if (endMs <= startMs) {
+      return null;
+    }
+
+    return { startTime: new Date(startMs), endTime: new Date(endMs) };
+  };
+
+type ClampHistogramSelectionToWindowEndFunction = (
+  selection: HistogramSelectionWindow,
+  windowEnd: Date,
+) => HistogramSelectionWindow;
+
+/**
+ * Keeps a zoom from running past the end of the window it zooms out of.
+ *
+ * Buckets are aligned to the clock rather than to the window, so the newest
+ * bar usually reaches past "now" (it is still filling up) and the last bar of
+ * a fixed window can reach past that window's end. Zooming into it whole
+ * would open a window that ends in the future, or one that shows rows the
+ * bar never counted.
+ *
+ * Only the end is clamped. A relative window ("past hour") slides forward
+ * with the clock, so its start moves on while the chart drawn a few minutes
+ * earlier stays put; clamping the start as well would cut into bars the
+ * reader can still see. Its end, "now", only ever grows, so it is always a
+ * safe edge.
+ *
+ * A selection that starts at or after the window end - the chart is still
+ * showing the buckets of a window the reader has since left - is returned
+ * untouched: clamping it would leave nothing to show.
+ */
+export const clampHistogramSelectionToWindowEnd: ClampHistogramSelectionToWindowEndFunction =
+  (
+    selection: HistogramSelectionWindow,
+    windowEnd: Date,
+  ): HistogramSelectionWindow => {
+    /*
+     * Read through fromString: a window restored from a URL or a saved view
+     * can carry its dates as ISO strings despite the type.
+     */
+    const startMs: number = OneUptimeDate.fromString(
+      selection.startTime,
+    ).getTime();
+    const endMs: number = OneUptimeDate.fromString(selection.endTime).getTime();
+    const windowEndMs: number = OneUptimeDate.fromString(windowEnd).getTime();
+
+    if (
+      !Number.isFinite(startMs) ||
+      !Number.isFinite(endMs) ||
+      !Number.isFinite(windowEndMs)
+    ) {
+      return selection;
+    }
+
+    if (windowEndMs >= endMs || windowEndMs <= startMs) {
+      return selection;
+    }
+
+    return { startTime: new Date(startMs), endTime: new Date(windowEndMs) };
+  };