@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Input/Input.tsx

@@ -14,6 +14,7 @@ import React, {
 
 export enum InputType {
   TEXT = "text",
+  PASSWORD = "password",
   NUMBER = "number",
   DATE = "date",
   DATETIME_LOCAL = "datetime-local",
@@ -25,7 +26,20 @@ export interface ComponentProps {
   initialValue?: undefined | string | Date;
   id?: string | undefined;
   ariaLabelledby?: string | undefined;
+  // Set together by fields that open a popup, so the state is on the focusable element.
+  ariaHasPopup?: "dialog" | "listbox" | "menu" | "grid" | "tree" | undefined;
+  ariaExpanded?: boolean | undefined;
+  ariaControls?: string | undefined;
+  /*
+   * For fields that render their own error text - a picker whose message sits
+   * below the whole control rather than below this input.
+   */
+  ariaDescribedby?: string | undefined;
+  ariaInvalid?: boolean | undefined;
   onClick?: undefined | (() => void);
+  onKeyDown?:
+    | undefined
+    | ((event: React.KeyboardEvent<HTMLInputElement>) => void);
   placeholder?: undefined | string;
   className?: undefined | string;
   onChange?: undefined | ((value: string) => void);
@@ -164,8 +178,13 @@ const Input: FunctionComponent<ComponentProps> = (
           spellCheck={!props.disableSpellCheck}
           autoComplete={props.autoComplete}
           aria-labelledby={props.ariaLabelledby}
-          aria-invalid={props.error ? "true" : undefined}
-          aria-describedby={props.error ? "input-error-message" : undefined}
+          aria-haspopup={props.ariaHasPopup}
+          aria-expanded={props.ariaExpanded}
+          aria-controls={props.ariaControls}
+          aria-invalid={props.error || props.ariaInvalid ? "true" : undefined}
+          aria-describedby={
+            props.error ? "input-error-message" : props.ariaDescribedby
+          }
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const value: string | Date = e.target.value;
 
@@ -194,8 +213,18 @@ const Input: FunctionComponent<ComponentProps> = (
           }}
           tabIndex={props.tabIndex}
           onKeyDown={
-            props.onEnterPress
+            props.onEnterPress || props.onKeyDown
               ? (event: React.KeyboardEvent<HTMLInputElement>) => {
+                  props.onKeyDown?.(event);
+
+                  /*
+                   * A handler that claimed the key - a picker opening its popup
+                   * on Enter, say - has already decided what it means.
+                   */
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+
                   if (event.key === "Enter") {
                     props.onEnterPress?.();
                   }

package/UI/Components/KeyboardShortcut/KeyboardKey.ts

@@ -0,0 +1,185 @@
+import PlatformUtil from "../../Utils/Platform";
+
+/**
+ * Named keys for keyboard shortcut hints. Anything not in this list (letters,
+ * digits, "/", "?") can be passed through as a plain string.
+ */
+enum KeyboardKey {
+  /**
+   * The primary shortcut modifier of the platform: ⌘ on Apple hardware,
+   * Ctrl everywhere else. Use this for shortcuts handled with
+   * `event.metaKey || event.ctrlKey`.
+   */
+  Mod = "Mod",
+  Meta = "Meta",
+  Control = "Control",
+  Alt = "Alt",
+  Shift = "Shift",
+  Enter = "Enter",
+  Escape = "Escape",
+  Backspace = "Backspace",
+  Delete = "Delete",
+  Tab = "Tab",
+  Space = "Space",
+  ArrowUp = "ArrowUp",
+  ArrowDown = "ArrowDown",
+  ArrowLeft = "ArrowLeft",
+  ArrowRight = "ArrowRight",
+}
+
+export type KeyboardShortcutKey = KeyboardKey | string;
+
+/**
+ * Renders shortcut keys the way the user's own platform writes them. macOS
+ * users read ⌘⇧K; Windows and Linux users read Ctrl Shift K — the same
+ * shortcut, spelled in the convention they already know.
+ */
+export class KeyboardKeyUtil {
+  /**
+   * The glyph or short word shown on the keycap.
+   */
+  public static getDisplayKey(
+    key: KeyboardShortcutKey,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    switch (key) {
+      case KeyboardKey.Mod:
+        return isApplePlatform ? "⌘" : "Ctrl";
+      case KeyboardKey.Meta:
+        return isApplePlatform ? "⌘" : "Win";
+      case KeyboardKey.Control:
+        return isApplePlatform ? "⌃" : "Ctrl";
+      case KeyboardKey.Alt:
+        return isApplePlatform ? "⌥" : "Alt";
+      case KeyboardKey.Shift:
+        return isApplePlatform ? "⇧" : "Shift";
+      case KeyboardKey.Enter:
+        return isApplePlatform ? "↵" : "Enter";
+      case KeyboardKey.Escape:
+        return "Esc";
+      case KeyboardKey.Backspace:
+        return isApplePlatform ? "⌫" : "Backspace";
+      case KeyboardKey.Delete:
+        return isApplePlatform ? "⌦" : "Del";
+      case KeyboardKey.Tab:
+        return isApplePlatform ? "⇥" : "Tab";
+      case KeyboardKey.Space:
+        return "Space";
+      case KeyboardKey.ArrowUp:
+        return "↑";
+      case KeyboardKey.ArrowDown:
+        return "↓";
+      case KeyboardKey.ArrowLeft:
+        return "←";
+      case KeyboardKey.ArrowRight:
+        return "→";
+      default:
+        // Single characters read better capitalised: "i" -> "I".
+        return key.length === 1 ? key.toUpperCase() : key;
+    }
+  }
+
+  /**
+   * The spoken name for screen readers — glyphs like ⌘ are announced
+   * inconsistently (or not at all), so shortcuts are labelled in words.
+   */
+  public static getSpokenKey(
+    key: KeyboardShortcutKey,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    switch (key) {
+      case KeyboardKey.Mod:
+        return isApplePlatform ? "Command" : "Control";
+      case KeyboardKey.Meta:
+        return isApplePlatform ? "Command" : "Windows";
+      case KeyboardKey.Control:
+        return "Control";
+      case KeyboardKey.Alt:
+        return isApplePlatform ? "Option" : "Alt";
+      case KeyboardKey.Shift:
+        return "Shift";
+      case KeyboardKey.Enter:
+        return "Enter";
+      case KeyboardKey.Escape:
+        return "Escape";
+      case KeyboardKey.Backspace:
+        return "Backspace";
+      case KeyboardKey.Delete:
+        return "Delete";
+      case KeyboardKey.Tab:
+        return "Tab";
+      case KeyboardKey.Space:
+        return "Space";
+      case KeyboardKey.ArrowUp:
+        return "Up arrow";
+      case KeyboardKey.ArrowDown:
+        return "Down arrow";
+      case KeyboardKey.ArrowLeft:
+        return "Left arrow";
+      case KeyboardKey.ArrowRight:
+        return "Right arrow";
+      default:
+        return key.length === 1 ? key.toUpperCase() : key;
+    }
+  }
+
+  /**
+   * A full shortcut written out for tooltips and aria-labels, e.g.
+   * "Command + I" or "Control + I".
+   */
+  public static getShortcutLabel(
+    keys: Array<KeyboardShortcutKey>,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    return keys
+      .map((key: KeyboardShortcutKey) => {
+        return this.getSpokenKey(key, isApplePlatform);
+      })
+      .join(" + ");
+  }
+
+  /**
+   * The shortcut written with the platform's own glyphs, for plain-text spots
+   * that cannot render keycaps — "⌘B" on a Mac, "Ctrl+B" elsewhere.
+   */
+  public static getDisplayLabel(
+    keys: Array<KeyboardShortcutKey>,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    return keys
+      .map((key: KeyboardShortcutKey) => {
+        return this.getDisplayKey(key, isApplePlatform);
+      })
+      .join(isApplePlatform ? "" : "+");
+  }
+
+  /**
+   * The shortcut in the token syntax the `aria-keyshortcuts` attribute expects
+   * (e.g. "Meta+I"), so assistive tech can announce and index it.
+   */
+  public static getAriaKeyShortcuts(
+    keys: Array<KeyboardShortcutKey>,
+    isApplePlatform: boolean = PlatformUtil.isApplePlatform(),
+  ): string {
+    return keys
+      .map((key: KeyboardShortcutKey) => {
+        switch (key) {
+          case KeyboardKey.Mod:
+            return isApplePlatform ? "Meta" : "Control";
+          case KeyboardKey.ArrowUp:
+            return "ArrowUp";
+          case KeyboardKey.ArrowDown:
+            return "ArrowDown";
+          case KeyboardKey.ArrowLeft:
+            return "ArrowLeft";
+          case KeyboardKey.ArrowRight:
+            return "ArrowRight";
+          default:
+            return key.length === 1 ? key.toUpperCase() : key;
+        }
+      })
+      .join("+");
+  }
+}
+
+export default KeyboardKey;

package/UI/Components/KeyboardShortcut/KeyboardShortcut.tsx

@@ -0,0 +1,87 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import PlatformUtil from "../../Utils/Platform";
+import KeyboardKey, {
+  KeyboardKeyUtil,
+  KeyboardShortcutKey,
+} from "./KeyboardKey";
+
+export enum KeyboardShortcutSize {
+  ExtraSmall = "ExtraSmall",
+  Small = "Small",
+  Medium = "Medium",
+}
+
+export enum KeyboardShortcutVariant {
+  /** Raised white keycaps — reads well on gray or white surfaces. */
+  Default = "Default",
+  /** Borderless muted caps for dense, secondary hints. */
+  Ghost = "Ghost",
+}
+
+export interface ComponentProps {
+  keys: Array<KeyboardShortcutKey>;
+  size?: KeyboardShortcutSize | undefined;
+  variant?: KeyboardShortcutVariant | undefined;
+  className?: string | undefined;
+}
+
+const SIZE_CLASS: Record<KeyboardShortcutSize, string> = {
+  [KeyboardShortcutSize.ExtraSmall]:
+    "h-[18px] min-w-[18px] px-1 text-[10px] rounded",
+  [KeyboardShortcutSize.Small]:
+    "h-5 min-w-[20px] px-1.5 text-[11px] rounded-[5px]",
+  [KeyboardShortcutSize.Medium]: "h-6 min-w-[24px] px-1.5 text-xs rounded-md",
+};
+
+const VARIANT_CLASS: Record<KeyboardShortcutVariant, string> = {
+  [KeyboardShortcutVariant.Default]:
+    "border border-gray-200 bg-white text-gray-500 shadow-sm",
+  [KeyboardShortcutVariant.Ghost]: "bg-gray-100 text-gray-600",
+};
+
+/**
+ * Renders a keyboard shortcut as keycaps, in the notation of the machine the
+ * user is actually on: ⌘ I on a Mac, Ctrl I on Windows and Linux.
+ *
+ * The caps themselves are hidden from assistive tech — glyphs like ⌘ are
+ * announced inconsistently — and the shortcut is exposed once, in words, as
+ * screen-reader-only text ("Command + I").
+ */
+const KeyboardShortcut: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const isApplePlatform: boolean = PlatformUtil.isApplePlatform();
+
+  const size: KeyboardShortcutSize = props.size || KeyboardShortcutSize.Small;
+  const variant: KeyboardShortcutVariant =
+    props.variant || KeyboardShortcutVariant.Default;
+
+  const keycapClassName: string = `inline-flex flex-none select-none items-center justify-center font-sans font-medium leading-none ${SIZE_CLASS[size]} ${VARIANT_CLASS[variant]}`;
+
+  return (
+    <span
+      className={`inline-flex flex-none items-center gap-1 ${
+        props.className || ""
+      }`}
+    >
+      <span className="sr-only">
+        {KeyboardKeyUtil.getShortcutLabel(props.keys, isApplePlatform)}
+      </span>
+      {props.keys.map((key: KeyboardShortcutKey, index: number) => {
+        return (
+          <kbd
+            aria-hidden="true"
+            key={`${String(key)}-${index}`}
+            className={keycapClassName}
+          >
+            {KeyboardKeyUtil.getDisplayKey(key, isApplePlatform)}
+          </kbd>
+        );
+      })}
+    </span>
+  );
+};
+
+export { KeyboardKey, KeyboardKeyUtil };
+export type { KeyboardShortcutKey };
+export default KeyboardShortcut;

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -51,6 +51,7 @@ import {
   DEFAULT_LOGS_TABLE_COLUMNS,
   getLogsAttributeColumnId,
   LogsSavedViewOption,
+  LogsSignalPivotAction,
   LogsTableColumnOption,
   LogsViewMode,
   normalizeLogsTableColumns,
@@ -75,6 +76,24 @@ export interface ComponentProps {
   noLogsMessage?: string | undefined;
   getTraceRoute?: (traceId: string, log: Log) => Route | URL | undefined;
   getSpanRoute?: (spanId: string, log: Log) => Route | URL | undefined;
+  /*
+   * Async fallback for spanId-only logs — resolves the owning trace on
+   * click/expand so the id can still link out (see LogsTable /
+   * LogDetailsPanel).
+   */
+  resolveSpanRoute?:
+    | ((spanId: string, log: Log) => Promise<Route | URL | undefined>)
+    | undefined;
+  /*
+   * Threaded like getTraceRoute; may return a promise because the session
+   * replay route can require a RumSession lookup.
+   */
+  getSessionRoute?:
+    | ((
+        sessionId: string,
+        log: Log,
+      ) => Route | URL | undefined | Promise<Route | URL | undefined>)
+    | undefined;
   projectId?: ObjectID | undefined;
   totalCount?: number | undefined;
   page?: number | undefined;
@@ -123,7 +142,9 @@ export interface ComponentProps {
   viewMode?: LogsViewMode | undefined;
   onViewModeChange?: ((mode: LogsViewMode) => void) | undefined;
   analyticsServiceIds?: Array<string> | undefined;
+  analyticsSessionIds?: Array<string> | undefined;
   analyticsAppliedFacetFilters?: Map<string, Set<string>> | undefined;
+  signalPivotActions?: Array<LogsSignalPivotAction> | undefined;
 }
 
 export type LogsSortField = LogsTableSortField;
@@ -1063,6 +1084,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       });
     },
     onShowDocumentation: props.onShowDocumentation,
+    signalPivotActions: props.signalPivotActions,
   };
 
   const showSidebar: boolean =
@@ -1114,6 +1136,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         <LogsAnalyticsView
           timeRange={props.timeRange || { range: TimeRange.PAST_ONE_HOUR }}
           serviceIds={props.analyticsServiceIds}
+          sessionIds={props.analyticsSessionIds}
           appliedFacetFilters={props.analyticsAppliedFacetFilters || new Map()}
           logAttributes={logAttributes}
         />
@@ -1171,6 +1194,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                 sortOrder={sortOrder}
                 onSortChange={handleSortChange}
                 selectedColumns={selectedColumns}
+                getTraceRoute={props.getTraceRoute}
+                getSpanRoute={props.getSpanRoute}
+                resolveSpanRoute={props.resolveSpanRoute}
                 renderExpandedContent={(log: Log) => {
                   return (
                     <LogDetailsPanel
@@ -1181,6 +1207,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                       }}
                       getTraceRoute={props.getTraceRoute}
                       getSpanRoute={props.getSpanRoute}
+                      resolveSpanRoute={props.resolveSpanRoute}
+                      getSessionRoute={props.getSessionRoute}
                       variant="embedded"
                       projectId={props.projectId}
                       onFilterByAttribute={

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

@@ -2,6 +2,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 import { ActiveFilter } from "../types";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import Link from "../../Link/Link";
 
 export interface ActiveFilterChipsProps {
   filters: Array<ActiveFilter>;
@@ -9,6 +10,28 @@ export interface ActiveFilterChipsProps {
   onClearAll: () => void;
 }
 
+const renderOpenAffordance: (
+  filter: ActiveFilter,
+  colorClassName: string,
+) => ReactElement | null = (
+  filter: ActiveFilter,
+  colorClassName: string,
+): ReactElement | null => {
+  if (!filter.openRoute) {
+    return null;
+  }
+
+  return (
+    <Link
+      to={filter.openRoute}
+      className={`ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded transition-colors ${colorClassName}`}
+      title={`Open ${filter.displayKey.toLowerCase()} view`}
+    >
+      <Icon icon={IconProp.ExternalLink} className="h-2.5 w-2.5" />
+    </Link>
+  );
+};
+
 const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
   props: ActiveFilterChipsProps,
 ): ReactElement | null => {
@@ -42,6 +65,10 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
               {filter.displayKey}:
             </span>
             <span>{filter.displayValue}</span>
+            {renderOpenAffordance(
+              filter,
+              "text-gray-400 hover:bg-gray-200 hover:text-indigo-600",
+            )}
           </span>
         );
       })}
@@ -56,6 +83,10 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
               {filter.displayKey}:
             </span>
             <span>{filter.displayValue}</span>
+            {renderOpenAffordance(
+              filter,
+              "text-indigo-400 hover:bg-indigo-100 hover:text-indigo-600",
+            )}
             <button
               type="button"
               className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded text-indigo-400 transition-colors hover:bg-indigo-100 hover:text-indigo-600"

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

@@ -1,21 +1,31 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import KeyboardShortcut, {
+  KeyboardShortcutSize,
+} from "../../KeyboardShortcut/KeyboardShortcut";
+import KeyboardKey, {
+  KeyboardShortcutKey,
+} from "../../KeyboardShortcut/KeyboardKey";
 
 export interface KeyboardShortcutsHelpProps {
   onClose: () => void;
 }
 
 interface ShortcutRow {
-  keys: Array<string>;
+  keys: Array<KeyboardShortcutKey>;
   description: string;
 }
 
 const SHORTCUT_ROWS: Array<ShortcutRow> = [
   { keys: ["j"], description: "Move to next log row" },
   { keys: ["k"], description: "Move to previous log row" },
-  { keys: ["Enter"], description: "Expand / collapse selected log" },
-  { keys: ["Esc"], description: "Close detail panel" },
+  { keys: [KeyboardKey.Enter], description: "Expand / collapse selected log" },
+  { keys: [KeyboardKey.Escape], description: "Close detail panel" },
   { keys: ["/"], description: "Focus search bar" },
-  { keys: ["Ctrl", "Enter"], description: "Apply search filters" },
+  {
+    // The handler accepts meta or ctrl, so this follows the platform.
+    keys: [KeyboardKey.Mod, KeyboardKey.Enter],
+    description: "Apply search filters",
+  },
   { keys: ["?"], description: "Toggle this help" },
 ];
 
@@ -57,20 +67,10 @@ const KeyboardShortcutsHelp: FunctionComponent<KeyboardShortcutsHelpProps> = (
               className="flex items-center justify-between px-3 py-1.5"
             >
               <span className="text-xs text-gray-600">{row.description}</span>
-              <div className="flex items-center gap-1">
-                {row.keys.map((key: string, index: number) => {
-                  return (
-                    <React.Fragment key={key}>
-                      {index > 0 && (
-                        <span className="text-[10px] text-gray-400">+</span>
-                      )}
-                      <kbd className="inline-flex min-w-[1.5rem] items-center justify-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[11px] font-medium text-gray-600">
-                        {key}
-                      </kbd>
-                    </React.Fragment>
-                  );
-                })}
-              </div>
+              <KeyboardShortcut
+                keys={row.keys}
+                size={KeyboardShortcutSize.Small}
+              />
             </div>
           );
         })}