@oneuptime/common 14.0.1 → 14.0.3

package/UI/Components/Graphs/DayUptimeGraph.tsx

@@ -6,7 +6,9 @@ import OneUptimeDate from "../../../Types/Date";
 import Dictionary from "../../../Types/Dictionary";
 import ObjectID from "../../../Types/ObjectID";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
-import DayUptimeGraphUtil from "../../../Utils/Uptime/DayUptimeGraphUtil";
+import DayUptimeGraphUtil, {
+  UptimeGraphDay,
+} from "../../../Utils/Uptime/DayUptimeGraphUtil";
 import UptimeHistoryLabels from "../../../Types/Monitor/UptimeHistoryLabels";
 import React, {
   FunctionComponent,
@@ -78,13 +80,20 @@ export interface ComponentProps {
   endDate: Date;
   events: Array<Event>;
   /*
-   * Server-measured coverage per day. When a day has a reading, it decides
-   * whether that day has data and what its durations are; the `events` array
-   * is then only used for incident overlays. When absent - the dashboard
-   * monitor page, which does not fetch the aggregate - the old event-derived
-   * behaviour applies unchanged.
+   * Server-measured coverage per day. When a day has a reading with coverage,
+   * it is the account of that day: whether the day has data, its percentage,
+   * its colour and its durations (see getUptimeBar). The events are not
+   * consulted for such a day. When absent, the old event-derived behaviour
+   * applies unchanged.
    */
   dayReadings?: Array<DayReading> | undefined;
+  /*
+   * The zone whose calendar days the bars stand for. Defaults to the
+   * browser's own. A caller passing dayReadings must pass the zone the
+   * readings were bucketed in - see DayUptimeGraphUtil.getDays - or each bar
+   * is paired with a reading for a different span of time.
+   */
+  timezone?: string | undefined;
   height?: number | undefined;
   barColorRules?: Array<BarChartRule> | undefined;
   downtimeEventStatusIds?: Array<ObjectID> | undefined;
@@ -105,15 +114,74 @@ export interface ComponentProps {
   labels?: UptimeHistoryLabels | undefined;
 }
 
+type GetReadingBarColorFunction = (
+  statusDurations: Array<StatusDuration>,
+  defaultBarColor: Color,
+) => Color;
+
+/*
+ * The colour of a day painted from the server's reading alone.
+ *
+ * The events path paints a day in the colour of its highest-priority status,
+ * so this does the same with the reading's durations. A status the day spent
+ * no time in cannot win, and two statuses at the same priority go to the one
+ * the day spent longer in. A caller that did not say what its statuses'
+ * priorities are still gets its worst time shown: the downtime status the
+ * day spent longest in, and only a day with no downtime at all gets the
+ * operator's colour.
+ */
+const getReadingBarColor: GetReadingBarColorFunction = (
+  statusDurations: Array<StatusDuration>,
+  defaultBarColor: Color,
+): Color => {
+  let highestPriority: StatusDuration | null = null;
+
+  for (const duration of statusDurations) {
+    if (duration.seconds <= 0 || typeof duration.priority !== "number") {
+      continue;
+    }
+
+    if (
+      !highestPriority ||
+      duration.priority > (highestPriority.priority as number) ||
+      (duration.priority === highestPriority.priority &&
+        duration.seconds > highestPriority.seconds)
+    ) {
+      highestPriority = duration;
+    }
+  }
+
+  if (highestPriority) {
+    return highestPriority.color;
+  }
+
+  let longestDowntime: StatusDuration | null = null;
+
+  for (const duration of statusDurations) {
+    if (!duration.isDowntime || duration.seconds <= 0) {
+      continue;
+    }
+
+    if (!longestDowntime || duration.seconds > longestDowntime.seconds) {
+      longestDowntime = duration;
+    }
+  }
+
+  return longestDowntime ? longestDowntime.color : defaultBarColor;
+};
+
 const DayUptimeGraph: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const days: number = useMemo(() => {
-    return OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
-      props.startDate,
-      props.endDate,
-    );
-  }, [props.startDate, props.endDate]);
+  const graphDays: Array<UptimeGraphDay> = useMemo(() => {
+    return DayUptimeGraphUtil.getDays({
+      startDate: props.startDate,
+      endDate: props.endDate,
+      timezone: props.timezone,
+    });
+  }, [props.startDate, props.endDate, props.timezone]);
+
+  const days: number = graphDays.length;
 
   /*
    * The strip is one tab stop with a roving tabindex inside it - see
@@ -207,13 +275,11 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
   ): ReactElement => {
     let color: Color = props.defaultBarColor || Green;
 
-    const todaysDay: Date = OneUptimeDate.getSomeDaysAfterDate(
-      props.startDate,
-      dayNumber,
-    );
+    const graphDay: UptimeGraphDay = graphDays[dayNumber]!;
 
-    const startOfTheDay: Date = OneUptimeDate.getStartOfDay(todaysDay);
-    const endOfTheDay: Date = OneUptimeDate.getEndOfDay(todaysDay);
+    const todaysDay: Date = graphDay.date;
+    const startOfTheDay: Date = graphDay.startOfDay;
+    const endOfTheDay: Date = graphDay.endOfDay;
 
     /*
      * The server's reading for this day, when the caller supplied one. It is
@@ -330,6 +396,78 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
       }
     }
 
+    /*
+     * Whether the server's reading, rather than the events, decides this
+     * day's percentage and colour.
+     *
+     * Whenever it has one to give. The events the browser holds arrive under
+     * a fetch cap that silently drops history, and "the day still has some
+     * events" does not mean it has all of them:
+     *
+     *   - A day whose rows were ALL dropped has no events, and was painted
+     *     the operator's default colour at 100% - a day spent offline read as
+     *     a perfect one. On a page whose default colour is grey, every such
+     *     day was a grey bar next to a monitor that was up.
+     *
+     *   - The day the cap cuts through keeps only its newest rows, so its
+     *     percentage was taken over the few hours that survived.
+     *
+     *   - Today's rows were the newest of all, but the open row that carries
+     *     the current status still went missing: rows that started within
+     *     the same second were left in the server's newest-first order, so it
+     *     ended before it began (see UptimeUtil.compareTimelinesChronologically).
+     *     Today then had no events and was painted grey as well.
+     *
+     * The reading is measured server-side from every row, so for any day it
+     * covers it is the better account. It used to decide only days with no
+     * events at all; that left the two partial cases above wrong. A reading
+     * with no durations says nothing about how the day was spent, so it keeps
+     * the old treatment below.
+     */
+    const readingDecidesTheDay: boolean = Boolean(
+      todaysReading &&
+        todaysReading.coveredSeconds > 0 &&
+        todaysReading.statusDurations.length > 0,
+    );
+
+    if (readingDecidesTheDay && todaysReading) {
+      /*
+       * Downtime is the time spent in a status the caller counts as down, over
+       * the seconds the server actually covered. A duration carries no status
+       * id, so its isDowntime flag is the caller's answer, set from the same
+       * downtime statuses it passes as downtimeEventStatusIds. Clamped, so a
+       * reading whose durations overrun its coverage reads as a fully down
+       * day rather than as a negative uptime.
+       */
+      const downtimeInReading: number = todaysReading.statusDurations.reduce(
+        (sum: number, duration: StatusDuration) => {
+          return duration.isDowntime
+            ? sum + Math.max(duration.seconds, 0)
+            : sum;
+        },
+        0,
+      );
+
+      totalDowntimeInSeconds = Math.min(
+        downtimeInReading,
+        todaysReading.coveredSeconds,
+      );
+      totalUptimeInSeconds =
+        todaysReading.coveredSeconds - totalDowntimeInSeconds;
+
+      /*
+       * With bar rules, the rules below choose the colour from the reading's
+       * percentage, and a day no rule matches keeps the default colour, as
+       * it does on the events path.
+       */
+      if (!props.barColorRules || props.barColorRules.length === 0) {
+        color = getReadingBarColor(
+          todaysReading.statusDurations,
+          props.defaultBarColor || Green,
+        );
+      }
+    }
+
     /*
      * Does this day have data at all?
      *
@@ -391,14 +529,16 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
      * the fetch cap had thrown away.
      *
      * Now the two are separated. A day with data but no events of its own is
-     * an ordinary good day and still gets the operator's colour. A day with
-     * no data gets the fixed no-data treatment and says so.
+     * an ordinary good day and still gets the operator's colour, unless the
+     * server's reading says how the day was spent, in which case the colour
+     * chosen from that reading above stands. A day with no data gets the
+     * fixed no-data treatment and says so.
      */
     hasEvents = hasDataForTheDay;
 
     if (!hasDataForTheDay) {
       color = NO_DATA_BAR_COLOR;
-    } else if (todaysEvents.length === 0) {
+    } else if (todaysEvents.length === 0 && !readingDecidesTheDay) {
       color = props.defaultBarColor || Green;
     }
 
@@ -452,10 +592,10 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
     };
 
     const ariaLabel: string = DayUptimeGraphUtil.getDayAriaLabel({
-      dateLabel: OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-        todaysDay,
-        true,
-      ),
+      dateLabel: DayUptimeGraphUtil.formatDayLabel({
+        date: todaysDay,
+        timezone: props.timezone,
+      }),
       hasEvents: hasEvents,
       uptimePercent: uptimePercentForTheDay,
       incidentCount: dayIncidents.length,
@@ -469,6 +609,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
         richContent={
           <UptimeBarTooltip
             date={todaysDay}
+            timezone={props.timezone}
             uptimePercent={uptimePercentForTheDay}
             hasEvents={hasEvents}
             statusDurations={statusDurations}

package/UI/Components/Graphs/UptimeBarTooltip.tsx

@@ -1,4 +1,5 @@
 import OneUptimeDate from "../../../Types/Date";
+import DayUptimeGraphUtil from "../../../Utils/Uptime/DayUptimeGraphUtil";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
 import UptimeDaySummary, { StatusDuration } from "./UptimeDaySummary";
 import UptimeHistoryLabels, {
@@ -22,13 +23,20 @@ export interface ComponentProps {
   onIncidentClick?: ((incidentId: string) => void) | undefined;
   /* Defaults to English. The status page passes translated strings. */
   labels?: UptimeHistoryLabels | undefined;
+  /*
+   * The zone the bar's day was drawn in, so the date reads as that day. The
+   * browser's own zone when absent. See DayUptimeGraphUtil.formatDayLabel.
+   */
+  timezone?: string | undefined;
 }
 
 const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const dateStr: string =
-    OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true);
+  const dateStr: string = DayUptimeGraphUtil.formatDayLabel({
+    date: props.date,
+    timezone: props.timezone,
+  });
 
   const hasIncidents: boolean = props.incidents.length > 0;
   const labels: UptimeHistoryLabels =

package/UI/Components/Graphs/UptimeDaySummary.tsx

@@ -10,6 +10,14 @@ export interface StatusDuration {
   seconds: number;
   color: Color;
   isDowntime: boolean;
+  /*
+   * The monitor status's priority; a higher number wins the bar's colour, as
+   * it does for events (the default statuses run Operational 1, Degraded 2,
+   * Offline 3). Only a server reading carries it: a day painted from that
+   * reading takes the colour of its highest-priority status, as a day painted
+   * from events does. Optional because event-derived durations never need it.
+   */
+  priority?: number | undefined;
 }
 
 export interface ComponentProps {

package/UI/Components/InfoCard/InfoCard.tsx

@@ -20,6 +20,8 @@ export interface ComponentProps {
   isSelected?: boolean | undefined;
   // Announced in place of the title when the card is clickable.
   ariaLabel?: string | undefined;
+  // What the value means, shown in an (i) tooltip beside the title.
+  tooltip?: string | undefined;
 }
 
 const InfoCard: FunctionComponent<ComponentProps> = (
@@ -37,6 +39,50 @@ const InfoCard: FunctionComponent<ComponentProps> = (
       ? "border-indigo-500 ring-1 ring-indigo-500"
       : "border-gray-200";
 
+  /*
+   * A clickable card with a tooltip cannot stay a role="button" div: the (i)
+   * is a button of its own, and a button's children are presentational, so
+   * screen readers would never reach it. The card becomes a plain container
+   * with a real button laid over it, and the (i) sits above that button
+   * (FieldLabel lifts it with relative z-10). Cards without a tooltip keep
+   * the markup below, unchanged.
+   */
+  if (isClickable && props.tooltip?.trim()) {
+    return (
+      <div
+        className={`relative rounded-xl bg-white border ${borderClassName} shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.className || ""}`}
+      >
+        <button
+          type="button"
+          onClick={props.onClick}
+          aria-pressed={
+            props.isSelected !== undefined
+              ? Boolean(props.isSelected)
+              : undefined
+          }
+          /*
+           * Named like the old role="button" card, which read its title and
+           * value - unless the value is an element, which has no text to
+           * borrow here.
+           */
+          aria-label={
+            props.ariaLabel ||
+            (typeof props.value === "string"
+              ? `${props.title} ${props.value}`
+              : props.title)
+          }
+          className="absolute inset-0 rounded-xl cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+        />
+        <div className="mb-2">
+          <FieldLabelElement title={props.title} tooltip={props.tooltip} />
+        </div>
+        <div className={props.textClassName || "text-gray-900"}>
+          {props.value}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       onClick={props.onClick}
@@ -75,7 +121,7 @@ const InfoCard: FunctionComponent<ComponentProps> = (
       className={`rounded-xl bg-white border ${borderClassName} shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${isClickable ? "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" : ""} ${props.className || ""}`}
     >
       <div className="mb-2">
-        <FieldLabelElement title={props.title} />
+        <FieldLabelElement title={props.title} tooltip={props.tooltip} />
       </div>
       <div className={props.textClassName || "text-gray-900"}>
         {props.value}

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -3,6 +3,7 @@ import React, {
   ReactElement,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -120,6 +121,11 @@ export interface ComponentProps {
   liveOptions?: LiveLogsOptions | undefined;
   histogramBuckets?: Array<HistogramBucket>;
   histogramLoading?: boolean;
+  /*
+   * How much time one histogram bar covers, as the query that drew the bars
+   * bucketed them. It is what lets a click on a bar open that bar's logs.
+   */
+  histogramBucketIntervalMs?: number | undefined;
   onHistogramTimeRangeSelect?: (startTime: Date, endTime: Date) => void;
   facetData?: FacetData;
   facetLoading?: boolean;
@@ -180,6 +186,9 @@ export type {
 const DEFAULT_PAGE_SIZE: number = 100;
 const PAGE_SIZE_OPTIONS: Array<number> = [100, 250, 500, 1000];
 
+export const LOGS_VIEWER_MAIN_AREA_TEST_ID: string = "logs-viewer-main-area";
+export const LOGS_VIEWER_LIST_TEST_ID: string = "logs-viewer-list";
+
 const severityWeight: Record<string, number> = {
   fatal: 6,
   error: 5,
@@ -320,6 +329,16 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [showKeyboardShortcuts, setShowKeyboardShortcuts] =
     useState<boolean>(false);
 
+  /*
+   * Below md there is no room for the facet sidebar beside the list: at phone
+   * width it squeezed the list card to ~120px. There the sidebar stacks above
+   * the list instead, folded behind a "Filters" toggle in the toolbar so the
+   * list stays the first thing on screen. From md up the sidebar always shows
+   * and the toggle is hidden, so this state only matters on small screens.
+   */
+  const [isFacetPanelOpen, setIsFacetPanelOpen] = useState<boolean>(false);
+  const facetPanelId: string = useId();
+
   /*
    * Drag-zooming the histogram is a one-way trip on its own: it swaps the
    * window for a custom one and nothing remembers what the reader was
@@ -1129,6 +1148,13 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     props.onViewModeChange?.(mode);
   };
 
+  const showSidebar: boolean =
+    props.showFacetSidebar !== false && Boolean(props.facetData);
+
+  // The analytics view replaces the sidebar, so there is nothing to toggle.
+  const showFacetPanelToggle: boolean =
+    showSidebar && currentViewMode !== "analytics";
+
   const toolbarProps: LogsViewerToolbarProps = {
     resultCount: totalItems,
     currentPage,
@@ -1180,11 +1206,19 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     },
     onShowDocumentation: props.onShowDocumentation,
     signalPivotActions: props.signalPivotActions,
+    ...(showFacetPanelToggle
+      ? {
+          facetPanelId,
+          isFacetPanelOpen,
+          onToggleFacetPanel: () => {
+            setIsFacetPanelOpen((prev: boolean) => {
+              return !prev;
+            });
+          },
+        }
+      : {}),
   };
 
-  const showSidebar: boolean =
-    props.showFacetSidebar !== false && Boolean(props.facetData);
-
   return (
     <div className="space-y-2">
       {props.showFilters && (
@@ -1220,6 +1254,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         <LogsHistogram
           buckets={props.histogramBuckets}
           isLoading={props.histogramLoading || false}
+          bucketIntervalMs={props.histogramBucketIntervalMs}
           onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
           onZoomOut={histogramZoom.onZoomOut}
         />
@@ -1235,9 +1270,18 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
           logAttributes={logAttributes}
         />
       ) : (
-        <div className="flex gap-3">
+        /*
+         * Facets + list. A column below md (the sidebar, when opened, stacks
+         * above the list); side by side from md up.
+         */
+        <div
+          className="flex flex-col gap-3 md:flex-row"
+          data-testid={LOGS_VIEWER_MAIN_AREA_TEST_ID}
+        >
           {showSidebar && props.facetData && (
             <LogsFacetSidebar
+              id={facetPanelId}
+              isCollapsedOnSmallScreens={!isFacetPanelOpen}
               facetData={props.facetData}
               isLoading={props.facetLoading || false}
               serviceMap={serviceMap}
@@ -1257,7 +1301,10 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             />
           )}
 
-          <div className="min-w-0 flex-1">
+          <div
+            className="min-w-0 flex-1"
+            data-testid={LOGS_VIEWER_LIST_TEST_ID}
+          >
             <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
               {!props.showFilters && (
                 <div className="border-b border-gray-100 bg-gray-50/50 px-4 py-3">

package/UI/Components/LogsViewer/components/ColumnSelector.tsx

@@ -25,6 +25,8 @@ const triggerButtonClassName: string =
 const actionButtonClassName: string =
   "rounded-md px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700";
 
+export const COLUMN_SELECTOR_PANEL_TEST_ID: string = "column-selector-panel";
+
 const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
   props: ColumnSelectorProps,
 ): ReactElement => {
@@ -136,7 +138,13 @@ const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
   };
 
   return (
-    <div className="relative" ref={ref}>
+    /*
+     * Positioned from md up only. A 24rem panel hung off the trigger's right
+     * edge ran off the side of a phone, since the trigger can sit anywhere in
+     * the wrapped toolbar. Below md the panel instead spans the nearest
+     * positioned ancestor, the toolbar row, and drops below the trigger.
+     */
+    <div className="md:relative" ref={ref}>
       <button
         type="button"
         className={triggerButtonClassName}
@@ -153,7 +161,10 @@ const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
       </button>
 
       {isComponentVisible && (
-        <div className="absolute right-0 z-20 mt-2 w-96 rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
+        <div
+          className="absolute left-0 right-0 z-20 mt-2 rounded-lg border border-gray-200 bg-white p-4 shadow-xl md:left-auto md:w-96"
+          data-testid={COLUMN_SELECTOR_PANEL_TEST_ID}
+        >
           <div className="flex items-center justify-between gap-3">
             <div>
               <h3 className="text-sm font-semibold text-gray-900">Columns</h3>

package/UI/Components/LogsViewer/components/KeyboardShortcutsHelp.tsx

@@ -29,11 +29,23 @@ const SHORTCUT_ROWS: Array<ShortcutRow> = [
   { keys: ["?"], description: "Toggle this help" },
 ];
 
+export const KEYBOARD_SHORTCUTS_HELP_TEST_ID: string =
+  "keyboard-shortcuts-help";
+
 const KeyboardShortcutsHelp: FunctionComponent<KeyboardShortcutsHelpProps> = (
   props: KeyboardShortcutsHelpProps,
 ): ReactElement => {
   return (
-    <div className="absolute right-0 top-full z-50 mt-1 w-72 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
+    /*
+     * From md up this hangs off the trigger's right edge. Below md it spans
+     * the toolbar row the trigger sits in instead (the trigger's wrapper is
+     * not positioned there) and drops below the trigger, since an 18rem panel
+     * hung off a trigger mid-row could run off the side of a phone.
+     */
+    <div
+      className="absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg md:left-auto md:top-full md:w-72"
+      data-testid={KEYBOARD_SHORTCUTS_HELP_TEST_ID}
+    >
       <div className="flex items-center justify-between border-b border-gray-100 px-3 py-2">
         <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
           Keyboard shortcuts