@oneuptime/common 14.0.2 → 14.0.5

package/UI/Components/StatusPage/ResourceGroupNavigator.tsx

@@ -504,8 +504,10 @@ const ResourceGroupNavigator: FunctionComponent<ComponentProps> = (
          * likely to want to act on. Its count is the thing given up for it, and
          * the pane beside it is already showing that number.
          */
-        className={`absolute inset-y-0 right-0 items-center gap-0.5 rounded-r-md pl-4 pr-1 group-hover/nav-row:flex group-focus-within/nav-row:flex ${
-          isSelected ? "flex bg-indigo-50" : "hidden bg-gray-100"
+        className={`absolute inset-y-0 right-0 items-center gap-0.5 rounded-r-md pl-4 pr-1 flex ${
+          isSelected
+            ? "bg-indigo-50"
+            : "bg-gray-100 group-[:not(:hover):not(:focus-within)]/nav-row:hidden"
         }`}
         data-testid="status-page-resource-navigator-actions"
       >

package/UI/Components/StatusPage/ResourceList.tsx

@@ -124,7 +124,7 @@ const SELECT_COLUMN_CLASS_NAME: string = "flex w-7 flex-shrink-0 items-center";
  * the monitor's name and the rows are already in the order it describes.
  */
 const POSITION_COLUMN_CLASS_NAME: string =
-  "hidden w-6 flex-shrink-0 text-right text-xs tabular-nums sm:block";
+  "max-sm:hidden w-6 flex-shrink-0 text-right text-xs tabular-nums sm:block";
 const MONITOR_COLUMN_CLASS_NAME: string = "min-w-0 flex-[2_1_0%]";
 /*
  * Its own line on a phone, indented to sit under the monitor it renames rather
@@ -512,7 +512,7 @@ const ResourceList: FunctionComponent<ComponentProps> = (
     return (
       <div
         className={`${
-          props.isSelectable ? "flex" : "hidden sm:flex"
+          props.isSelectable ? "flex" : "max-sm:hidden sm:flex"
         } items-center gap-x-3 rounded-t-xl border-b border-gray-200 bg-gray-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500 sm:flex`}
         data-testid="status-page-resource-list-header"
       >
@@ -540,7 +540,7 @@ const ResourceList: FunctionComponent<ComponentProps> = (
         )}
 
         <span
-          className={`${GRIP_COLUMN_CLASS_NAME} hidden sm:block`}
+          className={`${GRIP_COLUMN_CLASS_NAME} max-sm:hidden sm:block`}
           aria-hidden="true"
         />
         <span
@@ -551,19 +551,19 @@ const ResourceList: FunctionComponent<ComponentProps> = (
           #
         </span>
         <span
-          className={`${MONITOR_COLUMN_CLASS_NAME} hidden sm:block`}
+          className={`${MONITOR_COLUMN_CLASS_NAME} max-sm:hidden sm:block`}
           aria-hidden="true"
         >
           Monitor
         </span>
         <span
-          className={`${PUBLISHED_NAME_COLUMN_CLASS_NAME} hidden sm:block`}
+          className={`${PUBLISHED_NAME_COLUMN_CLASS_NAME} max-sm:hidden sm:block`}
           aria-hidden="true"
         >
           Shown on the status page as
         </span>
         <span
-          className={`${ACTIONS_COLUMN_CLASS_NAME} hidden sm:flex`}
+          className={`${ACTIONS_COLUMN_CLASS_NAME} max-sm:hidden sm:flex`}
           aria-hidden="true"
         />
       </div>

package/UI/Components/Table/TableHeader.tsx

@@ -10,6 +10,7 @@ import { VoidFunction } from "../../../Types/FunctionTypes";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import InfoTooltip from "../Tooltip/InfoTooltip";
 import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<T extends GenericObject> {
@@ -157,10 +158,21 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
               </>
             );
 
+            /*
+             * A header's name is computed from its content, and the (i)
+             * button's "About <title>" would join it - every cell in the
+             * column would be announced as "Last seen About Last seen". The
+             * column is named by its title alone; the (i) keeps its own name.
+             */
+            const headerLabel: string | undefined = column.headerTooltip?.trim()
+              ? translateString(column.title) ?? column.title
+              : undefined;
+
             return (
               <th
                 key={i}
                 scope="col"
+                aria-label={headerLabel}
                 aria-sort={ariaSort}
                 className="text-left text-sm font-semibold text-gray-900"
               >
@@ -172,7 +184,27 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                  * padding moves onto the button so the clickable area is the
                  * whole cell, exactly as before.
                  */}
-                {canSort ? (
+                {/*
+                 * A header tooltip is its own button, and a button may not
+                 * sit inside the sort button - so for those columns the sort
+                 * button shrinks to its content and the (i) follows it.
+                 */}
+                {canSort && column.headerTooltip?.trim() ? (
+                  <div className="flex w-full items-center">
+                    <button
+                      type="button"
+                      onClick={sortColumn}
+                      className="flex py-3 pl-6 pr-1 cursor-pointer text-left font-semibold text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500"
+                    >
+                      {headerContent}
+                    </button>
+                    <InfoTooltip
+                      label={translateString(column.title) ?? column.title}
+                      text={column.headerTooltip}
+                      className="mr-6 font-normal"
+                    />
+                  </div>
+                ) : canSort ? (
                   <button
                     type="button"
                     onClick={sortColumn}
@@ -181,7 +213,20 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                     {headerContent}
                   </button>
                 ) : (
-                  <div className={contentClassName}>{headerContent}</div>
+                  <div
+                    className={
+                      column.headerTooltip?.trim()
+                        ? `${contentClassName} items-center`
+                        : contentClassName
+                    }
+                  >
+                    {headerContent}
+                    <InfoTooltip
+                      label={translateString(column.title) ?? column.title}
+                      text={column.headerTooltip}
+                      className="ml-1 font-normal"
+                    />
+                  </div>
                 )}
               </th>
             );

package/UI/Components/Table/Types/Column.ts

@@ -8,6 +8,13 @@ export default interface Column<T extends GenericObject> {
   // Stable identity carried over from the ModelTable column, if it had one.
   id?: string | undefined;
   description?: string | undefined;
+  /*
+   * What the column's values mean, in an (i) tooltip beside the header - for
+   * a metric column whose title is jargon ("p95", "Restarts"). Separate from
+   * `description`, which ModelTable fills from the database column for other
+   * purposes and which is never shown in the header.
+   */
+  headerTooltip?: string | undefined;
   disableSort?: boolean | undefined;
   tooltipText?: ((item: T) => string) | undefined;
   type: FieldType;

package/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx

@@ -149,7 +149,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
     <div
       id={props.id}
       className={`${
-        props.isCollapsedOnSmallScreens ? "hidden md:flex" : "flex"
+        props.isCollapsedOnSmallScreens ? "max-md:hidden md:flex" : "flex"
       } max-h-80 w-full flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white md:h-full md:max-h-none md:w-56`}
     >
       <div className="border-b border-gray-100 px-3 py-2.5">

package/UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.tsx

@@ -100,7 +100,7 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
 
       <button
         type="button"
-        className="hidden h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:flex"
+        className="flex h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-[:not(:hover)]:hidden"
         onClick={(e: React.MouseEvent) => {
           e.stopPropagation();
           props.onExclude(props.value);

package/UI/Components/Tooltip/InfoTooltip.tsx

@@ -0,0 +1,78 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import IconProp from "../../../Types/Icon/IconProp";
+import Icon from "../Icon/Icon";
+import Tooltip from "./Tooltip";
+
+/*
+ * A small (i) beside a label that explains it on hover or keyboard focus -
+ * "what does p95 mean?" answered where the number is, rather than in the
+ * docs. Built for metric tiles and chart headers, but nothing here is
+ * metric-specific.
+ *
+ * The trigger is a real <button> so it is reachable with Tab and announced
+ * as a control; Tippy shows the text on focus as well as on hover and links
+ * it with aria-describedby. It is lazy: an overview page draws dozens of
+ * these, and none of them needs a Tippy instance until someone reaches for
+ * it.
+ *
+ * A click is swallowed, and so are Enter and Space: the (i) can sit inside a
+ * card that is itself a link or a button, and asking what a number means
+ * should not navigate away from it.
+ */
+
+export interface ComponentProps {
+  // The explanation. Nothing renders when it is empty.
+  text?: string | undefined;
+  /*
+   * What is being explained, e.g. the metric's title. Names the button for
+   * screen readers ("About p95 duration") and is never shown.
+   */
+  label: string;
+  className?: string | undefined;
+  iconClassName?: string | undefined;
+  dataTestId?: string | undefined;
+}
+
+const InfoTooltip: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const text: string = (props.text || "").trim();
+
+  if (!text) {
+    return <></>;
+  }
+
+  return (
+    <Tooltip text={text} lazy={true}>
+      <button
+        type="button"
+        aria-label={`About ${props.label}`}
+        data-testid={props.dataTestId}
+        className={`inline-flex flex-shrink-0 items-center justify-center rounded-full text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:text-gray-600 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${
+          props.className || ""
+        }`}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>): void => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        /*
+         * A clickable card that handles Enter / Space itself (InfoCard, a
+         * tile acting as a button) would otherwise hear these keys bubble up
+         * from the (i) and activate.
+         */
+        onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>): void => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.stopPropagation();
+          }
+        }}
+      >
+        <Icon
+          icon={IconProp.InformationCircle}
+          className={props.iconClassName || "h-3.5 w-3.5"}
+        />
+      </button>
+    </Tooltip>
+  );
+};
+
+export default InfoTooltip;

package/UI/Components/Workflow/ColumnEditor/ModelQueryBuilder.tsx

@@ -69,7 +69,7 @@ const ModelQueryBuilder: FunctionComponent<ComponentProps> = (
         ) : (
           <>
             {/* Column widths must stay in step with ColumnConditionRow's grid. */}
-            <div className="hidden border-b border-gray-100 bg-gray-50/60 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)_minmax(0,1.3fr)_auto] sm:gap-2">
+            <div className="max-sm:hidden border-b border-gray-100 bg-gray-50/60 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)_minmax(0,1.3fr)_auto] sm:gap-2">
               <span>Column</span>
               <span>Comparison</span>
               <span>Value</span>

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -391,7 +391,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                         : "Searches title, description, and category."}
                     </span>
                     {!hasSearchTerm && (
-                      <span className="hidden items-center gap-1 rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-500 sm:inline-flex">
+                      <span className="max-sm:hidden items-center gap-1 rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-500 sm:inline-flex">
                         <kbd className="rounded bg-white px-1.5 py-0.5 text-[10px] font-semibold text-slate-500 ring-1 ring-slate-200">
                           /
                         </kbd>
@@ -399,7 +399,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                       </span>
                     )}
                     {hasSearchTerm && (
-                      <span className="hidden items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 font-medium text-indigo-600 sm:inline-flex">
+                      <span className="max-sm:hidden items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 font-medium text-indigo-600 sm:inline-flex">
                         <kbd className="rounded bg-white px-1.5 py-0.5 text-[10px] font-semibold text-indigo-600 ring-1 ring-indigo-100">
                           Esc
                         </kbd>

package/UI/Components/Workflow/StepTraceViewer.tsx

@@ -135,7 +135,7 @@ const StepRow: FunctionComponent<StepRowProps> = (
         </span>
 
         {props.step.executedPort && (
-          <span className="text-xs text-gray-500 shrink-0 hidden sm:inline">
+          <span className="text-xs text-gray-500 shrink-0 max-sm:hidden sm:inline">
             → {props.step.executedPort}
           </span>
         )}

package/UI/Styles/Theme.css

@@ -307,7 +307,14 @@ html.dark :is(
     [class~="hover:text-gray-900"]
   ):hover,
 html.dark [class~="focus:text-gray-900"]:focus,
-html.dark .group:hover [class*="group-hover"][class*="text-gray-"] {
+html.dark .group:hover [class*="group-hover"][class*="text-gray-"],
+/*
+ * `group-[:not(:hover)]:hidden` is a group-hover reveal written so a foreign
+ * `.hidden { display: none !important }` cannot pin it shut (see Common's
+ * NavBar desktop view). It must brighten on hover exactly as the
+ * `hidden group-hover:flex` it replaced did.
+ */
+html.dark .group:hover [class*="group-[:not(:hover)"][class*="text-gray-"] {
   color: var(--ou-text-primary) !important;
 }
 

package/UI/Utils/Navigation.ts

@@ -221,7 +221,9 @@ abstract class Navigation {
         continue;
       }
 
-      if (routeItems[start]?.toString() !== item.toString()) {
+      if (
+        !this.isSameSegment(routeItems[start], item, { caseSensitive: false })
+      ) {
         startsWith = false;
         break;
       }
@@ -233,60 +235,95 @@ abstract class Navigation {
 
   public static isOnThisPage(route: Route | URL): boolean {
     if (route instanceof Route) {
-      const current: Route = this.getCurrentRoute();
+      return this.isCurrentRoute(route, { caseSensitive: false });
+    }
 
-      let isOnThisPage: boolean = true;
+    if (route instanceof URL) {
+      const current: URL = this.getCurrentURL();
 
-      /*
-       * React Router resolves `/page` and `/page/` to the same route. Match
-       * that behavior here so side-menu selection and the compact mobile
-       * label do not disappear when a bookmarked URL carries a trailing
-       * slash. Keep `/` intact so the root route still has a segment.
-       */
-      const trimTrailingSlashes: (path: string) => string = (
-        path: string,
-      ): string => {
-        return path.length > 1 ? path.replace(/\/+$/, "") : path;
-      };
-      const routeItems: Array<string> = trimTrailingSlashes(
-        route.toString(),
-      ).split("/");
-      const currentPathItems: Array<string> = trimTrailingSlashes(
-        current.toString(),
-      ).split("/");
-      if (routeItems.length !== currentPathItems.length) {
-        return false;
+      if (current.toString() === route.toString()) {
+        return true;
       }
 
-      let start: number = 0;
-      for (const item of currentPathItems) {
-        if (routeItems[start]?.startsWith(":") && item) {
-          start++;
-          continue;
-        }
+      return false;
+    }
 
-        if (routeItems[start]?.toString() !== item.toString()) {
-          isOnThisPage = false;
-          break;
-        }
+    return false;
+  }
 
-        start++;
-      }
+  /*
+   * React Router matches paths case-insensitively (a <Route> is case
+   * sensitive only when it opts in, and none of ours do), so
+   * `/dashboard/<id>/SSO` renders the SSO page. Questions like "is the user
+   * on that page?" (hide the nav bar there, mark a side-menu entry active)
+   * must agree with the page the router rendered, so they compare segments
+   * the same way. Route validation only admits ASCII, so toLowerCase() is
+   * exact here.
+   *
+   * A Route whose parameters are already filled in carries no ":" segments,
+   * so its parameter values are compared without case too. The values
+   * checked this way today are ids, where case does not matter, but these
+   * checks cannot tell apart two resources whose names differ only by case.
+   * navigate() keeps the exact comparison for that reason.
+   */
+  private static isSameSegment(
+    routeSegment: string | undefined,
+    currentSegment: string,
+    options: { caseSensitive: boolean },
+  ): boolean {
+    if (routeSegment === undefined) {
+      return false;
+    }
 
-      return isOnThisPage;
+    if (options.caseSensitive) {
+      return routeSegment === currentSegment;
     }
 
-    if (route instanceof URL) {
-      const current: URL = this.getCurrentURL();
+    return routeSegment.toLowerCase() === currentSegment.toLowerCase();
+  }
 
-      if (current.toString() === route.toString()) {
-        return true;
-      }
+  private static isCurrentRoute(
+    route: Route,
+    options: { caseSensitive: boolean },
+  ): boolean {
+    const current: Route = this.getCurrentRoute();
 
+    /*
+     * React Router resolves `/page` and `/page/` to the same route. Match
+     * that behavior here so side-menu selection and the compact mobile
+     * label do not disappear when a bookmarked URL carries a trailing
+     * slash. Keep `/` intact so the root route still has a segment.
+     */
+    const trimTrailingSlashes: (path: string) => string = (
+      path: string,
+    ): string => {
+      return path.length > 1 ? path.replace(/\/+$/, "") : path;
+    };
+    const routeItems: Array<string> = trimTrailingSlashes(
+      route.toString(),
+    ).split("/");
+    const currentPathItems: Array<string> = trimTrailingSlashes(
+      current.toString(),
+    ).split("/");
+    if (routeItems.length !== currentPathItems.length) {
       return false;
     }
 
-    return false;
+    let start: number = 0;
+    for (const item of currentPathItems) {
+      if (routeItems[start]?.startsWith(":") && item) {
+        start++;
+        continue;
+      }
+
+      if (!this.isSameSegment(routeItems[start], item, options)) {
+        return false;
+      }
+
+      start++;
+    }
+
+    return true;
   }
 
   public static goBack(): void {
@@ -357,7 +394,17 @@ abstract class Navigation {
       return;
     }
 
-    if (this.navigateHook && to instanceof Route && !this.isOnThisPage(to)) {
+    /*
+     * Exact, unlike isOnThisPage: a target can differ from the current path
+     * only in the case of a parameter value (a container named "Web" vs
+     * "web"), which React Router passes through as-is, so it is a different
+     * page, and dropping that navigation would strand the user.
+     */
+    if (
+      this.navigateHook &&
+      to instanceof Route &&
+      !this.isCurrentRoute(to, { caseSensitive: true })
+    ) {
       this.navigateHook(finalUrl);
     }
 

package/UI/Utils/PermissionGate.ts

@@ -79,6 +79,13 @@ export interface PermissionGateOptions {
    * what the user sees on screen ("Monitor" vs "Monitor Template").
    */
   singularName?: string | undefined;
+  /*
+   * The verb to use in the message when the operation is presented as
+   * something other than its own name - a table of links whose delete action
+   * is labelled "Unlink", say. Only the wording changes: the permissions
+   * checked and listed are still the ones for `action`.
+   */
+  verb?: string | undefined;
 }
 
 /*
@@ -176,15 +183,17 @@ export default class PermissionGate {
     const singularName: string =
       options?.singularName || model.singularName || "item";
 
+    const verb: string = (options?.verb?.trim() || action).toLowerCase();
+
     const titles: Array<string> = this.getPermissionTitles(
       this.getModelPermissions(model, action),
     );
 
     if (titles.length === 0) {
-      return `You do not have permission to ${action} this ${singularName}.`;
+      return `You do not have permission to ${verb} this ${singularName}.`;
     }
 
-    return `You do not have permission to ${action} this ${singularName}. You need one of these permissions: ${titles.join(
+    return `You do not have permission to ${verb} this ${singularName}. You need one of these permissions: ${titles.join(
       ", ",
     )}.`;
   }

package/UI/Utils/Telemetry/TelemetryEntityNames.ts

@@ -1,6 +1,7 @@
 import Alert from "../../../Models/DatabaseModels/Alert";
 import CephCluster from "../../../Models/DatabaseModels/CephCluster";
 import CloudResource from "../../../Models/DatabaseModels/CloudResource";
+import DatabaseServer from "../../../Models/DatabaseModels/DatabaseServer";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import DockerHost from "../../../Models/DatabaseModels/DockerHost";
 import DockerSwarmCluster from "../../../Models/DatabaseModels/DockerSwarmCluster";
@@ -137,6 +138,11 @@ export const TELEMETRY_ENTITY_TYPES: Record<
     modelType: CloudResource,
     nameFields: ["name", "resourceIdentifier"],
   },
+  [ServiceType.DatabaseServer]: {
+    label: "Database",
+    modelType: DatabaseServer,
+    nameFields: ["name"],
+  },
   [ServiceType.NetworkDevice]: {
     label: "Network Device",
     modelType: NetworkDevice,
@@ -190,6 +196,7 @@ export const TELEMETRY_ENTITY_RESOLUTION_ORDER: Array<ServiceType> = [
   ServiceType.KubernetesCluster,
   ServiceType.ServerlessFunction,
   ServiceType.CloudResource,
+  ServiceType.DatabaseServer,
   ServiceType.IoTDevice,
   ServiceType.ProxmoxCluster,
   ServiceType.CephCluster,

package/UI/Utils/TelemetryService.ts

@@ -24,7 +24,7 @@ export const UNKNOWN_SERVICE_NAME: string = "Unknown Service";
  * OpenTelemetry service, or the synthetic "Unknown Service" for the
  * unattributed bucket) — or a plain `label` for infrastructure resource
  * types (Host / DockerHost / KubernetesCluster / ProxmoxCluster /
- * CephCluster / VMwareVCenter) that have no Service row.
+ * CephCluster / VMwareVCenter / DatabaseServer) that have no Service row.
  */
 export interface ResolvedTelemetryResource {
   service?: Service;
@@ -67,8 +67,8 @@ export default class TelemetryServiceUtil {
    * old server-side `service` ORM relation on TelemetryException: a real
    * Service resolves from the loaded list, the unattributed bucket resolves
    * to the synthetic "Unknown Service", and Host / DockerHost /
-   * KubernetesCluster / ProxmoxCluster / CephCluster / VMwareVCenter
-   * resolve to a type label (no Service row exists for them). Mirrors how the ClickHouse
+   * KubernetesCluster / ProxmoxCluster / CephCluster / VMwareVCenter /
+   * DatabaseServer resolve to a type label (no Service row exists for them). Mirrors how the ClickHouse
    * analytics rows are resolved.
    */
   public static resolveTelemetryResource(data: {
@@ -107,6 +107,7 @@ export default class TelemetryServiceUtil {
       [ServiceType.ProxmoxCluster]: "Proxmox Cluster",
       [ServiceType.CephCluster]: "Ceph Cluster",
       [ServiceType.VMwareVCenter]: "vCenter",
+      [ServiceType.DatabaseServer]: "Database telemetry",
     };
     const label: string | undefined = data.primaryEntityType
       ? typeLabels[data.primaryEntityType.toString()]