@oneuptime/common 12.0.33 → 13.0.0

package/UI/Components/Header/Header.tsx

@@ -2,8 +2,12 @@ import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   leftComponents?: undefined | Array<ReactElement> | ReactElement;
+  /*
+   * The right-hand rail. Rendered at every viewport width — see the note on the
+   * container below. An entry that only earns its space on a wide screen
+   * carries its own breakpoint classes (`hidden lg:flex`) at the call site.
+   */
   rightComponents?: undefined | Array<ReactElement> | ReactElement;
-  mobileRightComponents?: undefined | Array<ReactElement> | ReactElement;
   centerComponents?: undefined | Array<ReactElement> | ReactElement;
   className?: string | undefined;
 }
@@ -19,7 +23,12 @@ const Header: FunctionComponent<ComponentProps> = (
           "relative flex h-16 justify-between bg-white shadow-sm px-4"
         }
       >
-        <div className="relative z-20 flex items-center">
+        {/*
+         * min-w-0 so this side is what gives way when the header runs out of
+         * room. Without it the project picker's intrinsic width wins the flex
+         * negotiation and the whole row overflows the viewport on a phone.
+         */}
+        <div className="relative z-20 flex min-w-0 items-center">
           {props.leftComponents}
         </div>
 
@@ -29,13 +38,20 @@ const Header: FunctionComponent<ComponentProps> = (
           </div>
         )}
 
-        {props.mobileRightComponents && (
-          <div className="relative z-20 flex items-center lg:hidden">
-            {props.mobileRightComponents}
-          </div>
-        )}
-
-        <div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center lg:gap-2">
+        {/*
+         * One right rail, on screen at every width.
+         *
+         * This used to be `hidden lg:flex`, so below 1024px the header dropped
+         * every action it holds — including the profile button, and with it the
+         * only way to reach the profile menu, admin settings, the theme switch
+         * and log out. Nothing about a narrow viewport makes those optional, so
+         * the container no longer decides: it always renders, and each entry
+         * hides itself at the widths where it does not fit.
+         *
+         * flex-shrink-0 keeps the buttons at full size and pushes the squeeze
+         * onto the left side, which can truncate.
+         */}
+        <div className="relative z-20 ml-2 flex flex-shrink-0 items-center gap-2 lg:z-10 lg:ml-4">
           {props.rightComponents}
         </div>
       </div>

package/UI/Components/Header/IconDropdown/IconDropdownItem.tsx

@@ -11,6 +11,12 @@ export interface ComponentProps {
   title: string;
   openInNewTab?: boolean;
   onClick?: (() => void) | undefined;
+  /*
+   * Optional trailing content, pinned to the right edge of the row. Meant for
+   * a keycap hint on an item that also has a keyboard shortcut, so the menu
+   * teaches the shortcut instead of only competing with it.
+   */
+  rightElement?: ReactElement | undefined;
 }
 
 const IconDropdown: FunctionComponent<ComponentProps> = (
@@ -26,7 +32,10 @@ const IconDropdown: FunctionComponent<ComponentProps> = (
       <div className="flex-shrink-0 h-5 w-5 text-gray-400">
         {props.icon ? <Icon icon={props.icon} /> : <></>}
       </div>
-      <span className="font-medium">{props.title}</span>
+      <span className="min-w-0 flex-1 truncate font-medium">{props.title}</span>
+      {props.rightElement && (
+        <span className="flex shrink-0 items-center">{props.rightElement}</span>
+      )}
     </Link>
   );
 };

package/UI/Components/Header/IconDropdown/IconDropdownMenu.tsx

@@ -9,7 +9,12 @@ const IconDropdown: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <div
-      className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-xl bg-white py-2 shadow-lg ring-1 ring-gray-200 focus:outline-none transform opacity-100 scale-100 animate-in fade-in slide-in-from-top-1 duration-150"
+      /*
+       * w-64, not w-56: a two-word label with a trailing keycap ("Keyboard
+       * shortcuts  ?") wrapped onto a second line at the old width, which reads
+       * as two menu entries at a glance.
+       */
+      className="absolute right-0 z-10 mt-2 w-64 origin-top-right rounded-xl bg-white py-2 shadow-lg ring-1 ring-gray-200 focus:outline-none transform opacity-100 scale-100 animate-in fade-in slide-in-from-top-1 duration-150"
       role="menu"
       aria-orientation="vertical"
       aria-labelledby="user-menu-button"

package/UI/Components/Header/ProjectPicker/ProjectPicker.tsx

@@ -37,7 +37,12 @@ const ProjectPicker: FunctionComponent<ComponentProps> = (
   }, [isComponentVisible]);
 
   return (
-    <div className="w-64">
+    /*
+     * min-w-0 so the picker is what truncates when the header is tight — its
+     * label is already `truncate`, and the alternative is the whole row
+     * overflowing the viewport. Narrower below sm for the same reason.
+     */
+    <div className="w-48 min-w-0 sm:w-64">
       <div className="relative w-full">
         <button
           onClick={() => {

package/UI/Components/HeaderAlert/NotificationBell/NotificationBellDropdown.tsx

@@ -34,7 +34,12 @@ const NotificationBellDropdown: (props: ComponentProps) => ReactElement = (
     errorItems.length > 0 || infoItems.length > 0 || successItems.length > 0;
 
   return (
-    <div className="absolute right-0 z-10 mt-2 w-80 rounded-xl bg-white shadow-lg ring-1 ring-gray-200 max-h-96 overflow-y-auto">
+    /*
+     * w-64 below sm: the panel hangs off the bell, which sits a couple of
+     * button widths in from the right edge, so a fixed 20rem runs past the
+     * left edge of a phone screen.
+     */
+    <div className="absolute right-0 z-10 mt-2 w-64 rounded-xl bg-white shadow-lg ring-1 ring-gray-200 max-h-96 overflow-y-auto sm:w-80">
       <div className="py-2">
         <div className="px-4 py-2 border-b border-gray-100">
           <span className="text-sm font-semibold text-gray-900">

package/UI/Components/Icon/Icon.tsx

@@ -930,6 +930,17 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
       />,
     );
+  } else if (icon === IconProp.Keyboard) {
+    return getSvgWrapper(
+      <React.Fragment>
+        <rect x="2.25" y="5.25" width="19.5" height="13.5" rx="2.25" />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M6 9.75h.008M9.75 9.75h.008M13.5 9.75h.008M17.25 9.75h.008M7.5 13.5h.008M11.25 13.5h.008M15 13.5h.008M7.5 16.5h9"
+        />
+      </React.Fragment>,
+    );
   } else if (icon === IconProp.Error) {
     return getSvgWrapper(
       <path

package/UI/Components/JSONTable/JSONTable.tsx

@@ -60,7 +60,7 @@ const JSONTable: FunctionComponent<JSONTableProps> = (
      */
     type GroupEntry = { index: number; value: unknown };
     type GroupMap = { [prefix: string]: Array<GroupEntry> };
-    const groupMap: GroupMap = {};
+    const groupMap: GroupMap = Object.create(null) as GroupMap;
     const keys: Array<string> = Object.keys(working);
 
     // Track keys that should be removed after grouping
@@ -100,7 +100,7 @@ const JSONTable: FunctionComponent<JSONTableProps> = (
     }
 
     // Apply grouping where it makes sense (only if at least 2 items or at least 1 and prefix not already defined)
-    for (const prefix in groupMap) {
+    for (const prefix of Object.keys(groupMap)) {
       const arr: Array<GroupEntry> = groupMap[prefix] || [];
       if (arr.length === 0) {
         continue;

package/UI/Components/KeyboardShortcut/KeyboardShortcutsModal.tsx

@@ -0,0 +1,125 @@
+import Modal, { ModalWidth } from "../Modal/Modal";
+import KeyboardShortcut, { KeyboardShortcutSize } from "./KeyboardShortcut";
+import { KeyboardShortcutKey } from "./KeyboardKey";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/**
+ * One shortcut, as a list of chords pressed in order.
+ *
+ * A single chord is an ordinary shortcut — `[[Mod, "K"]]` renders "⌘ K". Two
+ * chords are a sequence — `[["G"], ["I"]]` renders "G then I" — which is what
+ * lets leader-key navigation and plain shortcuts sit in one table without the
+ * reader having to work out which is which.
+ */
+export interface KeyboardShortcutDescription {
+  id: string;
+  keySequence: Array<Array<KeyboardShortcutKey>>;
+  description: string;
+}
+
+export interface KeyboardShortcutGroup {
+  id: string;
+  title: string;
+  shortcuts: Array<KeyboardShortcutDescription>;
+}
+
+export interface ComponentProps {
+  groups: Array<KeyboardShortcutGroup>;
+  title: string;
+  description?: string | undefined;
+  /**
+   * The word between two chords of a sequence, e.g. "then". Passed in so the
+   * caller owns translation; this component holds no strings of its own.
+   */
+  thenLabel: string;
+  closeButtonText: string;
+  onClose: () => void;
+}
+
+/**
+ * The product's one place to look up what the keyboard can do.
+ *
+ * Shortcuts are only worth having if they can be found, and until now every
+ * one the dashboard had — the command palette, Ask AI, "/" to search a table —
+ * was learnable only by being told about it. This is the page that tells you.
+ */
+const KeyboardShortcutsModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  /*
+   * A group whose shortcuts are all gated off would otherwise render as a
+   * heading with nothing under it.
+   */
+  const visibleGroups: Array<KeyboardShortcutGroup> = props.groups.filter(
+    (group: KeyboardShortcutGroup) => {
+      return group.shortcuts.length > 0;
+    },
+  );
+
+  return (
+    <Modal
+      title={props.title}
+      description={props.description}
+      modalWidth={ModalWidth.Large}
+      closeButtonText={props.closeButtonText}
+      onClose={props.onClose}
+    >
+      <div
+        data-testid="keyboard-shortcuts-modal"
+        className="grid grid-cols-1 gap-x-10 gap-y-7 sm:grid-cols-2"
+      >
+        {visibleGroups.map((group: KeyboardShortcutGroup) => {
+          return (
+            <section key={group.id} data-testid={`shortcut-group-${group.id}`}>
+              <h4 className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+                {group.title}
+              </h4>
+
+              <dl className="mt-2 divide-y divide-gray-100">
+                {group.shortcuts.map(
+                  (shortcut: KeyboardShortcutDescription) => {
+                    return (
+                      <div
+                        key={shortcut.id}
+                        data-testid={`shortcut-${shortcut.id}`}
+                        className="flex items-center justify-between gap-4 py-2"
+                      >
+                        <dt className="min-w-0 text-sm text-gray-600">
+                          {shortcut.description}
+                        </dt>
+                        <dd className="flex shrink-0 items-center gap-1.5">
+                          {shortcut.keySequence.map(
+                            (
+                              chord: Array<KeyboardShortcutKey>,
+                              index: number,
+                            ) => {
+                              return (
+                                <React.Fragment key={`chord-${index}`}>
+                                  {index > 0 && (
+                                    <span className="text-xs text-gray-400">
+                                      {props.thenLabel}
+                                    </span>
+                                  )}
+                                  <KeyboardShortcut
+                                    keys={chord}
+                                    size={KeyboardShortcutSize.Small}
+                                  />
+                                </React.Fragment>
+                              );
+                            },
+                          )}
+                        </dd>
+                      </div>
+                    );
+                  },
+                )}
+              </dl>
+            </section>
+          );
+        })}
+      </div>
+    </Modal>
+  );
+};
+
+export default KeyboardShortcutsModal;

package/UI/Components/KeyboardShortcut/Screenshots/README.md

@@ -0,0 +1,19 @@
+# Keyboard shortcut screenshots
+
+The dashboard's global keyboard layer — the shortcuts dialog
+(`../KeyboardShortcutsModal.tsx`) and the two places it is reachable by mouse.
+Rendered from the real components against the dashboard's own Tailwind build
+and `Common/UI/Styles/Theme.css`.
+
+| File                                     | Shows                                                                                                                    |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `keyboard-shortcuts-dialog.png`          | The dialog opened with `?`: the chorded shortcuts other components own on the left, the `g`-then-key jumps on the right. |
+| `keyboard-shortcuts-dialog-dark.png`     | The same dialog on the dark theme, which it inherits from `Theme.css` rather than declaring for itself.                  |
+| `keyboard-shortcuts-narrow.png`          | A narrow screen, where the two columns stack.                                                                            |
+| `keyboard-shortcuts-help-menu.png`       | The Help menu, where the dialog is reachable by mouse — with the keycap that teaches the shortcut on the way past.       |
+| `keyboard-shortcuts-command-palette.png` | The same dialog offered as a command-palette action, for anyone who reaches for `Cmd`/`Ctrl`+`K` first.                  |
+
+Keycaps follow the machine they are rendered on; these were shot on macOS, so
+the modifier reads `⌘`. On Windows and Linux the same rows read `Ctrl`.
+
+Re-shoot these when the dialog's layout or the shortcut catalog changes.

package/UI/Components/ModelTable/Column.ts

@@ -45,6 +45,21 @@ export default interface Columns<
    */
   isRemovable?: boolean | undefined;
   contentClassName?: string | undefined;
+  /*
+   * Let this cell's content wrap onto more than one line, instead of forcing
+   * it onto the single `whitespace-nowrap` line every body cell gets by
+   * default. Set it on any column whose cell can hold server- or
+   * operator-authored prose; leave it unset for dates, counts, badges and
+   * ids. See Common/UI/Components/Table/Types/Column.ts for the full
+   * reasoning, including why a `max-w-*` on the rendered element is not a
+   * substitute and in fact makes the overlap worse (OneUptime issue #3585).
+   */
+  wrapContent?: boolean | undefined;
+  /*
+   * Width cap for a wrapping cell, e.g. "max-w-3xl". Read ONLY when
+   * `wrapContent` is set; defaults to "max-w-md" (28rem).
+   */
+  wrapMaxWidthClassName?: string | undefined;
   colSpan?: number | undefined;
   disableSort?: boolean;
   description?: string | undefined;

package/UI/Components/Monitor/SeriesDebugCommandsViewer.tsx

@@ -0,0 +1,64 @@
+import { JSONObject } from "../../../Types/JSON";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import SeriesDebugHints, {
+  SeriesDebugCommand,
+} from "../../../Types/Monitor/SeriesContext/SeriesDebugHints";
+import CopyTextButton from "../CopyTextButton/CopyTextButton";
+import React, { Fragment, FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  monitorType?: MonitorType | undefined;
+  seriesLabels?: JSONObject | undefined;
+}
+
+/**
+ * The read-only commands worth running first, already filled in with the
+ * pod / container / node / mount this alert is actually about.
+ *
+ * The commands come from `SeriesDebugHints`, which is the same source the
+ * alert DESCRIPTION uses - so what the engineer reads in Slack and what
+ * they see on this page are the same commands, and only one of them has
+ * to be kept correct.
+ *
+ * Renders nothing when the series carries nothing addressable (an
+ * ungrouped monitor, or a monitor type with no universally-safe
+ * inspection command), rather than showing an empty card.
+ */
+const SeriesDebugCommandsViewer: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const commands: Array<SeriesDebugCommand> = SeriesDebugHints.getDebugCommands(
+    {
+      monitorType: props.monitorType,
+      seriesLabels: props.seriesLabels,
+    },
+  );
+
+  if (commands.length === 0) {
+    return <Fragment />;
+  }
+
+  return (
+    <div className="space-y-3">
+      {commands.map((command: SeriesDebugCommand, index: number) => {
+        return (
+          <div key={index}>
+            <div className="text-sm text-gray-500 mb-1">{command.purpose}</div>
+            <div className="flex items-center justify-between gap-2 rounded-md bg-gray-900 px-3 py-2">
+              <code className="font-mono text-xs text-gray-100 overflow-x-auto whitespace-pre">
+                {command.command}
+              </code>
+              <CopyTextButton
+                textToBeCopied={command.command}
+                iconOnly={true}
+                title="Copy command"
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SeriesDebugCommandsViewer;

package/UI/Components/Monitor/SeriesLabelsViewer.tsx

@@ -0,0 +1,93 @@
+import { JSONObject } from "../../../Types/JSON";
+import SeriesLabelDisplay, {
+  DisplaySeriesLabel,
+} from "../../../Types/Monitor/SeriesContext/SeriesLabelDisplay";
+import SortOrder from "../../../Types/BaseDatabase/SortOrder";
+import Table from "../Table/Table";
+import FieldType from "../Types/FieldType";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  seriesLabels?: JSONObject | undefined;
+}
+
+/**
+ * The identity of the metric series an alert or incident was raised for.
+ *
+ * Rendered from the same `SeriesLabelDisplay` the alert TITLE is built
+ * from, so the page and the notification agree on both the naming
+ * ("Pod", not `resource.k8s.pod.name`) and the ordering (the object that
+ * breached first, the scope that qualifies it after). A generic
+ * key/value viewer here would drift from the title the moment either
+ * side changed.
+ *
+ * The raw attribute key is kept underneath the friendly name rather than
+ * dropped: it is what the user types into a Group By field or a metric
+ * filter to go and look at the same series themselves.
+ */
+const SeriesLabelsViewer: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const labels: Array<DisplaySeriesLabel> = SeriesLabelDisplay.getDisplayLabels(
+    props.seriesLabels,
+  );
+
+  if (labels.length === 0) {
+    return (
+      <div className="text-gray-400 text-sm py-2">
+        No resource labels on this alert.
+      </div>
+    );
+  }
+
+  return (
+    <Table<DisplaySeriesLabel>
+      id="series-labels-viewer-table"
+      data={labels}
+      singularLabel="Label"
+      pluralLabel="Labels"
+      isLoading={false}
+      error=""
+      currentPageNumber={1}
+      totalItemsCount={labels.length}
+      itemsOnPage={labels.length}
+      disablePagination={true}
+      noItemsMessage="No resource labels on this alert."
+      onNavigateToPage={() => {}}
+      sortBy={null}
+      sortOrder={SortOrder.Ascending}
+      onSortChanged={() => {}}
+      columns={[
+        {
+          title: "Resource",
+          type: FieldType.Element,
+          key: "name",
+          disableSort: true,
+          getElement: (item: DisplaySeriesLabel): ReactElement => {
+            return (
+              <div>
+                <div className="font-medium text-gray-900">{item.name}</div>
+                <div className="font-mono text-xs text-gray-400">
+                  {item.key}
+                </div>
+              </div>
+            );
+          },
+        },
+        {
+          title: "Value",
+          type: FieldType.Element,
+          key: "value",
+          disableSort: true,
+          getElement: (item: DisplaySeriesLabel): ReactElement => {
+            return (
+              <span className="font-mono text-gray-700">{item.value}</span>
+            );
+          },
+        },
+      ]}
+    />
+  );
+};
+
+export default SeriesLabelsViewer;

package/UI/Components/MonitorGraphs/Uptime.tsx

@@ -1,6 +1,10 @@
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
-import DayUptimeGraph, { BarChartRule, Event } from "../Graphs/DayUptimeGraph";
+import DayUptimeGraph, {
+  BarChartRule,
+  Event,
+  UptimeBarDaySummary,
+} from "../Graphs/DayUptimeGraph";
 import UptimeUtil from "./UptimeUtil";
 import Color from "../../../Types/Color";
 import CommonMonitorEvent from "../../../Utils/Uptime/MonitorEvent";
@@ -8,6 +12,7 @@ import MonitorStatus from "../../../Models/DatabaseModels/MonitorStatus";
 import MonitorStatusTimeline from "../../../Models/DatabaseModels/MonitorStatusTimeline";
 import StatusPageHistoryChartBarColorRule from "../../../Models/DatabaseModels/StatusPageHistoryChartBarColorRule";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
+import UptimeHistoryLabels from "../../../Types/Monitor/UptimeHistoryLabels";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -29,8 +34,14 @@ export interface ComponentProps {
   downtimeMonitorStatuses: Array<MonitorStatus> | undefined;
   defaultBarColor: Color;
   incidents?: Array<UptimeBarTooltipIncident> | undefined;
-  onBarClick?: (date: Date, incidents: Array<UptimeBarTooltipIncident>) => void;
+  onBarClick?: (
+    date: Date,
+    incidents: Array<UptimeBarTooltipIncident>,
+    summary: UptimeBarDaySummary,
+  ) => void;
   onIncidentClick?: ((incidentId: string) => void) | undefined;
+  /* Wording for the strip's accessible names. Defaults to English. */
+  labels?: UptimeHistoryLabels | undefined;
 }
 
 const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
@@ -90,6 +101,7 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
       incidents={props.incidents}
       onBarClick={props.onBarClick}
       onIncidentClick={props.onIncidentClick}
+      labels={props.labels}
     />
   );
 };

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,