@oneuptime/common 12.0.32 → 12.0.34

package/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx

@@ -1,6 +1,10 @@
 import Modal, { ModalWidth } from "../Modal/Modal";
+import UptimeDaySummary, { StatusDuration } from "../Graphs/UptimeDaySummary";
 import OneUptimeDate from "../../../Types/Date";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
+import UptimeHistoryLabels, {
+  DefaultUptimeHistoryLabels,
+} from "../../../Types/Monitor/UptimeHistoryLabels";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -8,27 +12,76 @@ export interface ComponentProps {
   incidents: Array<UptimeBarTooltipIncident>;
   onClose: () => void;
   onIncidentClick?: ((incidentId: string) => void) | undefined;
+  /*
+   * The day's reading, when the caller has it. Optional so that a caller that
+   * only knows about incidents still renders; the uptime block is simply
+   * absent then, which is what this dialog used to be in every case.
+   */
+  uptimePercent?: number | undefined;
+  hasEvents?: boolean | undefined;
+  statusDurations?: Array<StatusDuration> | undefined;
+  /* Defaults to English. The status page passes translated strings. */
+  labels?: UptimeHistoryLabels | undefined;
 }
 
+/*
+ * What happened on one day of the uptime history.
+ *
+ * This is the only way to read a day without a mouse - the strip's tooltip is
+ * hover-only, so on a phone (which is how most people open a status page
+ * during an outage) and with a keyboard it was previously unreachable. It
+ * therefore shows the same reading the tooltip does, not a strictly poorer
+ * one: uptime, how the day was spent, and then the incidents.
+ */
 const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const dateStr: string =
     OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true);
 
+  const labels: UptimeHistoryLabels =
+    props.labels || DefaultUptimeHistoryLabels;
+
+  /*
+   * Only drawn when the caller actually measured the day. hasEvents false with
+   * a summary present is a real state - a day before the monitor existed - and
+   * UptimeDaySummary says so; hasEvents undefined means nobody measured, which
+   * is not the same claim and must not be rendered as one.
+   */
+  const hasSummary: boolean = props.hasEvents !== undefined;
+
+  let description: string | undefined = undefined;
+
+  if (props.incidents.length === 1) {
+    description = labels.oneIncidentOnThisDay;
+  } else if (props.incidents.length > 1) {
+    description = labels.incidentsOnThisDay.replace(
+      "{{total}}",
+      String(props.incidents.length),
+    );
+  }
+
   return (
     <Modal
-      title={`Incidents - ${dateStr}`}
-      description={
-        props.incidents.length > 0
-          ? `${props.incidents.length} incident${props.incidents.length !== 1 ? "s" : ""} reported on this day`
-          : undefined
-      }
+      title={dateStr}
+      description={description}
       onClose={props.onClose}
       modalWidth={ModalWidth.Medium}
-      closeButtonText="Close"
+      closeButtonText={labels.close}
     >
       <div>
+        {hasSummary && (
+          <div style={{ marginBottom: "16px" }}>
+            <UptimeDaySummary
+              uptimePercent={props.uptimePercent || 0}
+              hasEvents={Boolean(props.hasEvents)}
+              statusDurations={props.statusDurations || []}
+              hasFollowingContent={true}
+              labels={props.labels}
+            />
+          </div>
+        )}
+
         {props.incidents.length === 0 && (
           <div
             style={{
@@ -70,7 +123,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                 marginBottom: "4px",
               }}
             >
-              No incidents
+              {labels.noIncidents}
             </div>
             <div
               style={{
@@ -78,7 +131,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                 color: "var(--ou-text-muted, #6b7280)",
               }}
             >
-              No incidents were reported on this day.
+              {labels.noIncidentsDescription}
             </div>
           </div>
         )}
@@ -153,7 +206,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                       color: "var(--ou-text-muted, #6b7280)",
                     }}
                   >
-                    Declared{" "}
+                    {labels.declared}{" "}
                     {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                       incident.declaredAt,
                       false,

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -42,6 +42,7 @@ export default class TemplateVariablesCatalog {
     const groups: Array<TemplateVariableGroup> = [];
 
     groups.push(TemplateVariablesCatalog.monitorIdentityGroup());
+    groups.push(TemplateVariablesCatalog.seriesContextGroup());
 
     const perTypeGroup: TemplateVariableGroup | null =
       TemplateVariablesCatalog.perTypeGroup(input.monitorType);
@@ -87,6 +88,49 @@ export default class TemplateVariablesCatalog {
     };
   }
 
+  /**
+   * Ready-made renderings of the breaching series' identity.
+   *
+   * Listed for EVERY monitor type, not just the grouped ones, because
+   * `MonitorTemplateUtil` defines them unconditionally - they resolve to
+   * an empty string on a monitor with no group-by rather than leaving a
+   * `{{...}}` placeholder in the rendered title. That is the whole reason
+   * they exist: `{{resource.k8s.pod.name}}` is only safe in a template
+   * that is certain to be grouped by that attribute, whereas
+   * `{{seriesResourceSuffix}}` is safe anywhere.
+   */
+  private static seriesContextGroup(): TemplateVariableGroup {
+    return {
+      title: "Affected Resource",
+      description:
+        "The specific pod / container / host / mount that breached. Resolves to an empty string on a monitor with no Group By, so these are safe to use in any title or description.",
+      variables: [
+        {
+          key: "seriesResourceSuffix",
+          description:
+            "The identity, prefixed with a separator, for appending to a title. Empty when the monitor is not grouped.",
+          example: " - Pod: checkout-7d9f-2xk | Namespace: prod",
+        },
+        {
+          key: "seriesResourceSummary",
+          description:
+            "The same identity with no leading separator, for use mid-sentence.",
+          example: "Pod: checkout-7d9f-2xk | Namespace: prod",
+        },
+        {
+          key: "seriesResourceBlock",
+          description:
+            "Every label the series carries, as a markdown list. Best in a description rather than a title.",
+        },
+        {
+          key: "seriesDebugCommands",
+          description:
+            "Read-only commands for this exact resource (kubectl / docker / df ...), already filled in, as a markdown list.",
+        },
+      ],
+    };
+  }
+
   private static seriesLabelsGroup(
     attributeKeys: Array<string> | undefined,
   ): TemplateVariableGroup {
@@ -538,6 +582,50 @@ export default class TemplateVariablesCatalog {
           ],
         };
 
+      case MonitorType.Database:
+        return {
+          title: "Database Health",
+          variables: [
+            {
+              key: "isOnline",
+              description: "True if the database accepted the connection.",
+            },
+            {
+              key: "responseTimeInMs",
+              description: "Time to connect and run the baseline query.",
+            },
+            { key: "failureCause", description: "Failure reason." },
+            {
+              key: "connectionError",
+              description:
+                "Connection error, when the database was unreachable.",
+            },
+            {
+              key: "engineVersion",
+              description: "Version string the database server reported.",
+            },
+            {
+              key: "collectedGroups",
+              description: "Metric groups that produced values on this check.",
+            },
+            {
+              key: "unavailableGroups",
+              description:
+                "Array of {group, reason, message, remediation} for groups that produced nothing.",
+            },
+            {
+              key: "collectionIssueSummary",
+              description:
+                "One-line summary of the unavailable groups - empty when everything was collected.",
+            },
+            {
+              key: "metrics",
+              description:
+                "Collected values keyed by metric name. A metric that was not collected is absent.",
+            },
+          ],
+        };
+
       case MonitorType.ExternalStatusPage:
         return {
           title: "External Status Page",

package/UI/Components/ProgressBar/ProgressBar.tsx

@@ -28,7 +28,18 @@ const ProgressBar: FunctionComponent<ComponentProps> = (
     let percent: number = 0;
 
     try {
-      percent = (props.count * 100) / props.totalCount;
+      /*
+       * Dividing by zero does not throw in JavaScript — it yields NaN, which
+       * the catch below never sees. `Math.ceil(NaN)` is NaN, and NaN then
+       * reaches the DOM three times over: as `width: NaN%` (which the browser
+       * silently discards, leaving an empty track), as aria-valuenow, and as
+       * the visible "NaN%" readout beside the count. Every caller that had
+       * noticed guarded its own render on a non-zero total; the ones that had
+       * not simply showed it.
+       */
+      if (props.totalCount > 0) {
+        percent = (props.count * 100) / props.totalCount;
+      }
     } catch (err) {
       Logger.error(err as Error);
       // do nothing.

package/UI/Components/RadioButtons/BasicRadioButtons.tsx

@@ -55,23 +55,53 @@ const BasicRadioButton: FunctionComponent<ComponentProps> = (
 
               return (
                 <div key={i}>
-                  <div className="flex items-center">
+                  {/*
+                   * items-start, and the description on its own line.
+                   *
+                   * Both spans used to sit inline inside one label, separated
+                   * by `ml-1 sm:ml-0` — which cancels the only gap between
+                   * them at every breakpoint from `sm` up, i.e. on every
+                   * desktop. The result rendered as "Create an alertNotifies
+                   * the team and runs the on-call policy." Stacking them also
+                   * lets a long description wrap under the title instead of
+                   * under the radio.
+                   */}
+                  <div className="flex items-start">
+                    {/*
+                     * htmlFor, and an id to point it at.
+                     *
+                     * The label was a bare sibling of the input, so nothing
+                     * tied them together: the radio had no accessible name at
+                     * all (a screen reader announced "radio button, not
+                     * checked" and never read "Create an alert"), and the only
+                     * hit target was the 16px dot — clicking the words did
+                     * nothing. GroupRadioButtons next door gets this right by
+                     * wrapping the input; this shape needs the explicit link.
+                     */}
                     <input
+                      id={`${id}-${i}`}
                       type="radio"
                       name={id}
                       checked={checked}
                       onChange={() => {
                         handleChange(radioButton.value);
                       }}
-                      className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                      className="mt-1 h-4 w-4 flex-shrink-0 border-gray-300 text-indigo-600 focus:ring-indigo-600"
                     />
-                    <label className="ml-3 block text-sm font-medium leading-6 text-gray-900">
-                      <span className="font-medium text-gray-900">
+                    <label
+                      htmlFor={`${id}-${i}`}
+                      className="ml-3 block cursor-pointer text-sm leading-6 text-gray-900"
+                    >
+                      <span className="block font-medium text-gray-900">
                         {radioButton.title}
                       </span>
-                      <span className="ml-1 text-gray-500 sm:ml-0">
-                        {radioButton.description}
-                      </span>
+                      {radioButton.description ? (
+                        <span className="mt-0.5 block text-sm leading-5 text-gray-500">
+                          {radioButton.description}
+                        </span>
+                      ) : (
+                        <></>
+                      )}
                     </label>
                   </div>
                   {checked && radioButton.children}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -94,6 +94,94 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     }
   };
 
+  /*
+   * Walks the JSX children of a `<SideMenu>` written in the hand-rolled form
+   * and returns whichever entry points at the current page.
+   *
+   * It matches on the shape of the props rather than on component identity —
+   * an element with a `link` is a menu entry, an element with a `title` and
+   * children is a section — so it keeps working for the components built on
+   * top of SideMenuItem, and simply finds nothing for anything else (a
+   * fragment, a comment, a caller's own wrapper div) rather than throwing.
+   */
+  type ActiveMenuItem = {
+    sectionTitle?: string;
+    itemTitle?: string;
+    icon?: IconProp;
+  };
+
+  type FindActiveInChildrenFunction = (
+    children: ReactElement | Array<ReactElement> | undefined,
+    sectionTitle?: string | undefined,
+  ) => ActiveMenuItem;
+
+  const findActiveInChildren: FindActiveInChildrenFunction = (
+    children: ReactElement | Array<ReactElement> | undefined,
+    sectionTitle?: string | undefined,
+  ): ActiveMenuItem => {
+    if (!children) {
+      return {};
+    }
+
+    for (const child of React.Children.toArray(children)) {
+      if (!React.isValidElement(child)) {
+        continue;
+      }
+
+      const childProps: {
+        link?: Link | undefined;
+        activeRoute?: Link["to"] | undefined;
+        icon?: IconProp | undefined;
+        title?: string | undefined;
+        children?: ReactElement | Array<ReactElement> | undefined;
+      } = child.props as {
+        link?: Link | undefined;
+        activeRoute?: Link["to"] | undefined;
+        icon?: IconProp | undefined;
+        title?: string | undefined;
+        children?: ReactElement | Array<ReactElement> | undefined;
+      };
+
+      /*
+       * `activeRoute` first, matching the two loops above: an entry whose link
+       * carries query state points somewhere the current URL never equals, and
+       * declares the route that decides selection separately.
+       */
+      const matchRoute: Link["to"] | undefined =
+        childProps.activeRoute || childProps.link?.to;
+
+      if (
+        childProps.link &&
+        matchRoute &&
+        Navigation.isOnThisPage(matchRoute)
+      ) {
+        const result: ActiveMenuItem = { itemTitle: childProps.link.title };
+
+        if (sectionTitle) {
+          result.sectionTitle = sectionTitle;
+        }
+        if (childProps.icon) {
+          result.icon = childProps.icon;
+        }
+
+        return result;
+      }
+
+      if (childProps.children) {
+        const nested: ActiveMenuItem = findActiveInChildren(
+          childProps.children,
+          childProps.title || sectionTitle,
+        );
+
+        if (nested.itemTitle) {
+          return nested;
+        }
+      }
+    }
+
+    return {};
+  };
+
   // Function to find the active menu item and section - much simpler now!
   const findActiveMenuItem: () => {
     sectionTitle?: string;
@@ -144,7 +232,23 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       }
     }
 
-    return {};
+    /*
+     * ...and finally the hand-written JSX form.
+     *
+     * Roughly half the menus in the product are written as
+     * `<SideMenu><SideMenuSection>…<SideMenuItem/>…` rather than as a
+     * `sections` array — including every resource View menu. Neither loop
+     * above can see those, so on a phone all of them labelled their toggle
+     * with the fallback word "Navigation" instead of the page the user is
+     * actually on. The summary is the ONLY thing naming the current page
+     * while the menu is closed, which is most of the time on a phone.
+     *
+     * This reads the same two props off the elements the caller wrote, so it
+     * covers SideMenuItem, CountModelSideMenuItem and the per-feature items
+     * built on top of them (RecommendationsSideMenuItem) without knowing
+     * anything about their types.
+     */
+    return findActiveInChildren(props.children);
   };
 
   const activeItem: {
@@ -421,7 +525,15 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   // Desktop view
   return (
     <aside
-      className={`hidden md:block w-52 lg:w-60 flex-shrink-0 mb-10 ${props.className || ""}`}
+      /*
+       * w-56 rather than w-52. Page.tsx lays the menu out beside a
+       * `flex-1 min-w-0` content column, so this class is the only thing
+       * setting the sidebar's width — and at 208px the longest shipped titles
+       * ("Scheduled Maintenance", "Recommendations" beside a badge) were
+       * ellipsised on every page that has them. 16px buys those back without
+       * taking a visible bite out of the content column.
+       */
+      className={`hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >
@@ -436,11 +548,17 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         className="sticky"
         style={{ top: "calc(var(--app-header-height, 0px) + 1.5rem)" }}
       >
+        {/*
+         * rounded-xl and a plain border-gray-200, matching Card and InfoCard.
+         * The menu sits directly beside those, and it was the only page-level
+         * surface in the product with a 1rem radius and a translucent border —
+         * which read as a slightly different shade of white next to them.
+         */}
         <div
           className={`
             flex flex-col
-            bg-white rounded-2xl
-            border border-gray-200/80
+            bg-white rounded-xl
+            border border-gray-200
             shadow-sm
             overflow-hidden
           `}
@@ -463,7 +581,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
           {/* Menu Content */}
           <nav className="p-2 min-h-0 overflow-y-auto">
-            <div className="space-y-0.5">{renderMenuContent()}</div>
+            <div className="space-y-1">{renderMenuContent()}</div>
           </nav>
 
           {/* Optional Footer */}