@oneuptime/common 12.0.8 → 12.0.9

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

@@ -53,6 +53,11 @@ interface AnalyticsTableRow {
 export interface LogsAnalyticsViewProps {
   timeRange: RangeStartAndEndDateTime;
   serviceIds?: Array<string> | undefined;
+  /*
+   * Base session scope from the host page (e.g. a session replay detail
+   * view). Forwarded verbatim so the charts cover the same rows as the list.
+   */
+  sessionIds?: Array<string> | undefined;
   appliedFacetFilters: Map<string, Set<string>>;
   logAttributes: Array<string>;
 }
@@ -362,6 +367,11 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
             props.serviceIds;
         }
 
+        if (props.sessionIds) {
+          (requestData as Record<string, unknown>)["sessionIds"] =
+            props.sessionIds;
+        }
+
         // Apply facet filters
         const severityValues: Set<string> | undefined =
           props.appliedFacetFilters.get("severityText");
@@ -435,6 +445,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
       topListLimit,
       props.timeRange,
       props.serviceIds,
+      props.sessionIds,
       props.appliedFacetFilters,
     ]);
 

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

@@ -3,8 +3,12 @@ import Log from "../../../../Models/AnalyticsModels/Log";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Dictionary from "../../../../Types/Dictionary";
 import OneUptimeDate from "../../../../Types/Date";
+import Route from "../../../../Types/API/Route";
+import URL from "../../../../Types/API/URL";
 import CopyTextButton from "../../CopyTextButton/CopyTextButton";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+import Link from "../../Link/Link";
+import Navigation from "../../../Utils/Navigation";
 import SeverityBadge from "./SeverityBadge";
 import { getSeverityTheme, SeverityTheme } from "./severityTheme";
 import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
@@ -29,6 +33,20 @@ export interface LogsTableProps {
   onSortChange?: (field: LogsTableSortField) => void;
   selectedColumns?: Array<string> | undefined;
   focusedRowIndex?: number | undefined;
+  getTraceRoute?:
+    | ((traceId: string, log: Log) => Route | URL | undefined)
+    | undefined;
+  getSpanRoute?:
+    | ((spanId: string, log: Log) => Route | URL | undefined)
+    | undefined;
+  /*
+   * Async fallback for spanId-only rows: the sync builder needs the trace id
+   * the row doesn't carry, so the destination is resolved on click (one Span
+   * lookup) rather than per-row.
+   */
+  resolveSpanRoute?:
+    | ((spanId: string, log: Log) => Promise<Route | URL | undefined>)
+    | undefined;
 }
 
 export const resolveLogIdentifier: (log: Log, index: number) => string = (
@@ -117,6 +135,132 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     return `${base} text-gray-300`;
   };
 
+  const openSpanLazily: (spanId: string, log: Log) => void = (
+    spanId: string,
+    log: Log,
+  ): void => {
+    const resolver:
+      | ((spanId: string, log: Log) => Promise<Route | URL | undefined>)
+      | undefined = props.resolveSpanRoute;
+
+    if (!resolver) {
+      return;
+    }
+
+    const navigateToSpan: () => Promise<void> = async (): Promise<void> => {
+      try {
+        const route: Route | URL | undefined = await resolver(spanId, log);
+
+        if (route) {
+          Navigation.navigate(route);
+        }
+      } catch {
+        // Resolution failed — leave the user where they are.
+      }
+    };
+
+    void navigateToSpan();
+  };
+
+  const linkClassName: string =
+    "font-mono text-indigo-600 hover:text-indigo-500 hover:underline";
+
+  /*
+   * Every rendered trace id is a link when the host supplied a route builder;
+   * plain text otherwise. Wrapped so a click follows the link without also
+   * toggling the row's expansion.
+   */
+  const renderTraceIdValue: (traceId: string, log: Log) => ReactElement = (
+    traceId: string,
+    log: Log,
+  ): ReactElement => {
+    const traceRoute: Route | URL | undefined = props.getTraceRoute
+      ? props.getTraceRoute(traceId, log)
+      : undefined;
+
+    if (!traceRoute) {
+      return (
+        <span className="font-mono" title={traceId}>
+          {traceId}
+        </span>
+      );
+    }
+
+    return (
+      <span
+        onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+          event.stopPropagation();
+        }}
+      >
+        <Link
+          to={traceRoute}
+          className={linkClassName}
+          title={`View trace ${traceId}`}
+        >
+          {traceId}
+        </Link>
+      </span>
+    );
+  };
+
+  /*
+   * Span ids link through the sync builder when it can produce a route (the
+   * row carries a trace id), fall back to click-time resolution for
+   * spanId-only rows, and degrade to plain text when neither is available.
+   */
+  const renderSpanIdValue: (spanId: string, log: Log) => ReactElement = (
+    spanId: string,
+    log: Log,
+  ): ReactElement => {
+    const spanRoute: Route | URL | undefined = props.getSpanRoute
+      ? props.getSpanRoute(spanId, log)
+      : undefined;
+
+    if (spanRoute) {
+      return (
+        <span
+          onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+            event.stopPropagation();
+          }}
+        >
+          <Link
+            to={spanRoute}
+            className={linkClassName}
+            title={`View span ${spanId}`}
+          >
+            {spanId}
+          </Link>
+        </span>
+      );
+    }
+
+    if (props.resolveSpanRoute) {
+      return (
+        <span
+          onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+            event.stopPropagation();
+          }}
+        >
+          <Link
+            onClick={() => {
+              openSpanLazily(spanId, log);
+            }}
+            className={linkClassName}
+            title={`View span ${spanId}`}
+          >
+            {spanId}
+          </Link>
+        </span>
+      );
+    }
+
+    return (
+      <span className="font-mono" title={spanId}>
+        {spanId}
+      </span>
+    );
+  };
+
   const getHeaderCell: (columnId: string) => ReactElement = (
     columnId: string,
   ): ReactElement => {
@@ -326,10 +470,15 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                                   (spanId && !showSpanColumn)) && (
                                   <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-gray-400">
                                     {traceId && !showTraceColumn && (
-                                      <span>Trace: {traceId}</span>
+                                      <span>
+                                        Trace:{" "}
+                                        {renderTraceIdValue(traceId, log)}
+                                      </span>
                                     )}
                                     {spanId && !showSpanColumn && (
-                                      <span>Span: {spanId}</span>
+                                      <span>
+                                        Span: {renderSpanIdValue(spanId, log)}
+                                      </span>
                                     )}
                                   </div>
                                 )}
@@ -353,11 +502,8 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                             className="max-w-xs px-4 py-2 text-sm text-gray-600"
                             key={columnId}
                           >
-                            <span
-                              className="block truncate font-mono"
-                              title={traceId}
-                            >
-                              {traceId || "-"}
+                            <span className="block truncate font-mono">
+                              {traceId ? renderTraceIdValue(traceId, log) : "-"}
                             </span>
                           </td>
                         );
@@ -369,11 +515,8 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                             className="max-w-xs px-4 py-2 text-sm text-gray-600"
                             key={columnId}
                           >
-                            <span
-                              className="block truncate font-mono"
-                              title={spanId}
-                            >
-                              {spanId || "-"}
+                            <span className="block truncate font-mono">
+                              {spanId ? renderSpanIdValue(spanId, log) : "-"}
                             </span>
                           </td>
                         );

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

@@ -4,9 +4,12 @@ import LogTimeRangePicker from "./LogTimeRangePicker";
 import ColumnSelector from "./ColumnSelector";
 import SavedViewsDropdown from "./SavedViewsDropdown";
 import KeyboardShortcutsHelp from "./KeyboardShortcutsHelp";
+import Icon from "../../Icon/Icon";
+import Tooltip from "../../Tooltip/Tooltip";
 import {
   LiveLogsOptions,
   LogsSavedViewOption,
+  LogsSignalPivotAction,
   LogsTableColumnOption,
   LogsViewMode,
 } from "../types";
@@ -38,6 +41,7 @@ export interface LogsViewerToolbarProps {
   showKeyboardShortcuts?: boolean | undefined;
   onToggleKeyboardShortcuts?: (() => void) | undefined;
   onShowDocumentation?: (() => void) | undefined;
+  signalPivotActions?: Array<LogsSignalPivotAction> | undefined;
 }
 
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
@@ -119,6 +123,31 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
           </div>
         )}
 
+        {props.signalPivotActions && props.signalPivotActions.length > 0 && (
+          <div
+            className="inline-flex items-center gap-0.5 rounded-md border border-gray-200 bg-white p-0.5 shadow-sm"
+            aria-label="Related telemetry signals"
+          >
+            {props.signalPivotActions.map((action: LogsSignalPivotAction) => {
+              return (
+                <Tooltip key={action.id} text={action.tooltip}>
+                  <button
+                    type="button"
+                    aria-label={action.tooltip}
+                    className="inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400"
+                    onClick={action.onClick}
+                  >
+                    {action.icon && (
+                      <Icon icon={action.icon} className="h-3.5 w-3.5" />
+                    )}
+                    <span>{action.label}</span>
+                  </button>
+                </Tooltip>
+              );
+            })}
+          </div>
+        )}
+
         {props.savedViews && props.onSavedViewSelect && (
           <SavedViewsDropdown
             savedViews={props.savedViews}

package/UI/Components/LogsViewer/types.ts

@@ -1,3 +1,7 @@
+import Route from "../../../Types/API/Route";
+import URL from "../../../Types/API/URL";
+import IconProp from "../../../Types/Icon/IconProp";
+
 export interface LiveLogsOptions {
   isLive: boolean;
   onToggle: (next: boolean) => void;
@@ -25,6 +29,25 @@ export interface ActiveFilter {
   displayKey: string;
   displayValue: string;
   readOnly?: boolean | undefined;
+  /*
+   * When set, the chip renders a small icon-link that opens this route (e.g.
+   * a trace/span chip linking out to the trace view). Chips without a
+   * resolvable destination render as plain chips.
+   */
+  openRoute?: Route | URL | undefined;
+}
+
+/*
+ * One cross-signal pivot action rendered in the toolbar's "related signals"
+ * group (e.g. "Traces" / "Metrics" on the logs explorer). The tooltip is
+ * where callers surface scope fields the target explorer cannot carry.
+ */
+export interface LogsSignalPivotAction {
+  id: string;
+  label: string;
+  icon?: IconProp | undefined;
+  tooltip: string;
+  onClick: () => void;
 }
 
 export type LogsViewMode = "list" | "analytics";

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -1,4 +1,5 @@
 import Icon from "../Icon/Icon";
+import KeyboardKey, { KeyboardKeyUtil } from "../KeyboardShortcut/KeyboardKey";
 import IconProp from "../../../Types/Icon/IconProp";
 import TinyFormDocumentation from "../TinyFormDocumentation/TinyFormDocumentation";
 import { FILE_URL } from "../../Config";
@@ -921,12 +922,18 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
           <div className="flex items-center gap-1">
             <ToolbarButton
               icon={IconProp.Bold}
-              title="Bold (Ctrl+B)"
+              title={`Bold (${KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Mod,
+                "B",
+              ])})`}
               onClick={formatActions.bold}
             />
             <ToolbarButton
               icon={IconProp.Italic}
-              title="Italic (Ctrl+I)"
+              title={`Italic (${KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Mod,
+                "I",
+              ])})`}
               onClick={formatActions.italic}
             />
             <ToolbarButton

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -1,4 +1,8 @@
 import Icon from "../Icon/Icon";
+import KeyboardShortcut, {
+  KeyboardShortcutSize,
+} from "../KeyboardShortcut/KeyboardShortcut";
+import KeyboardKey from "../KeyboardShortcut/KeyboardKey";
 import Link from "../Link/Link";
 import Navigation from "../../Utils/Navigation";
 import useTranslateValue from "../../Utils/Translation";
@@ -177,24 +181,6 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
 
   const recentLabel: string = tx(props.recentLabel || "Recent");
 
-  // Show the OS-appropriate shortcut hint (⌘K on macOS, Ctrl K elsewhere).
-  const shortcutLabel: string = useMemo(() => {
-    if (typeof navigator === "undefined") {
-      return "⌘K";
-    }
-    const platform: string = (
-      navigator.platform ||
-      navigator.userAgent ||
-      ""
-    ).toLowerCase();
-    const isApplePlatform: boolean =
-      platform.includes("mac") ||
-      platform.includes("iphone") ||
-      platform.includes("ipad") ||
-      platform.includes("ipod");
-    return isApplePlatform ? "⌘K" : "Ctrl K";
-  }, []);
-
   // Filter items by the search query (title only).
   const filteredItems: MoreMenuItem[] = useMemo(() => {
     const normalizedQuery: string = query.trim().toLowerCase();
@@ -443,9 +429,6 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
     }
   };
 
-  const keycapClass: string =
-    "inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-gray-200 bg-white px-1 text-[11px] font-medium text-gray-500 shadow-sm";
-
   return (
     <div
       className="relative z-50"
@@ -520,9 +503,12 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                   <Icon icon={IconProp.Close} className="h-4 w-4" />
                 </button>
               ) : (
-                <kbd className="hidden items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs font-medium text-gray-400 sm:inline-flex">
-                  {shortcutLabel}
-                </kbd>
+                /* OS-appropriate hint: ⌘ K on a Mac, Ctrl K elsewhere. */
+                <KeyboardShortcut
+                  keys={[KeyboardKey.Mod, "K"]}
+                  size={KeyboardShortcutSize.Small}
+                  className="hidden sm:inline-flex"
+                />
               )}
             </div>
 
@@ -668,12 +654,11 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                     aria-label={tx(props.keyboardHint)}
                     className="hidden flex-shrink-0 items-center gap-2 text-xs text-gray-400 md:flex"
                   >
-                    <span className="flex items-center gap-1">
-                      <kbd className={keycapClass}>↑</kbd>
-                      <kbd className={keycapClass}>↓</kbd>
-                    </span>
-                    <kbd className={keycapClass}>↵</kbd>
-                    <kbd className={keycapClass}>esc</kbd>
+                    <KeyboardShortcut
+                      keys={[KeyboardKey.ArrowUp, KeyboardKey.ArrowDown]}
+                    />
+                    <KeyboardShortcut keys={[KeyboardKey.Enter]} />
+                    <KeyboardShortcut keys={[KeyboardKey.Escape]} />
                   </div>
                 )}
               </div>