@oneuptime/common 10.0.19 → 10.0.21

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

@@ -0,0 +1,122 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import { getSeverityColor } from "./severityColors";
+
+export interface TooltipEntry {
+  severity: string;
+  count: number;
+}
+
+export interface HistogramTooltipProps {
+  active?: boolean;
+  label?: string;
+  payload?: Array<{
+    dataKey: string;
+    value: number;
+    payload: Record<string, number>;
+  }>;
+}
+
+function formatTooltipTime(label: string | undefined): string {
+  if (!label) {
+    return "";
+  }
+
+  const date: Date = new Date(label);
+
+  if (isNaN(date.getTime())) {
+    return label;
+  }
+
+  const now: Date = new Date();
+  const isToday: boolean = date.toDateString() === now.toDateString();
+
+  const time: string = date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+  });
+
+  if (isToday) {
+    return time;
+  }
+
+  const dateStr: string = date.toLocaleDateString([], {
+    month: "short",
+    day: "numeric",
+  });
+
+  return `${dateStr}, ${time}`;
+}
+
+const HistogramTooltip: FunctionComponent<HistogramTooltipProps> = (
+  props: HistogramTooltipProps,
+): ReactElement | null => {
+  if (!props.active || !props.payload || props.payload.length === 0) {
+    return null;
+  }
+
+  const entries: Array<TooltipEntry> = props.payload
+    .filter((entry: { value: number }): boolean => {
+      return entry.value > 0;
+    })
+    .map((entry: { dataKey: string; value: number }): TooltipEntry => {
+      return {
+        severity: entry.dataKey,
+        count: entry.value,
+      };
+    });
+
+  if (entries.length === 0) {
+    return null;
+  }
+
+  const total: number = entries.reduce(
+    (sum: number, e: TooltipEntry): number => {
+      return sum + e.count;
+    },
+    0,
+  );
+
+  return (
+    <div className="rounded-md border border-gray-200 bg-white px-3 py-2 shadow-md">
+      <p className="mb-1.5 border-b border-gray-100 pb-1.5 font-mono text-[11px] font-medium text-gray-500">
+        {formatTooltipTime(props.label)}
+      </p>
+      <div className="space-y-0.5">
+        {entries.map((entry: TooltipEntry) => {
+          const color: string = getSeverityColor(entry.severity).fill;
+          const colorLabel: string =
+            getSeverityColor(entry.severity).label || entry.severity;
+          return (
+            <div
+              key={entry.severity}
+              className="flex items-center justify-between gap-6 py-0.5"
+            >
+              <div className="flex items-center gap-1.5">
+                <span
+                  className="inline-block h-2.5 w-2.5 rounded-sm"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-xs text-gray-600">{colorLabel}</span>
+              </div>
+              <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
+                {entry.count.toLocaleString()}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+      {entries.length > 1 && (
+        <div className="mt-1.5 flex items-center justify-between border-t border-gray-100 pt-1.5">
+          <span className="text-xs text-gray-500">Total</span>
+          <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
+            {total.toLocaleString()}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HistogramTooltip;

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

@@ -9,10 +9,10 @@ const LiveLogsToggle: FunctionComponent<LiveLogsToggleProps> = (
   const { isLive, onToggle, isDisabled } = props;
 
   const baseClasses: string =
-    "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500/60 bg-white/90 backdrop-blur";
+    "inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-emerald-200";
   const activeClasses: string = isLive
-    ? "border-emerald-600 text-emerald-700 hover:border-emerald-500 hover:bg-emerald-50"
-    : "border-slate-300 text-slate-600 hover:border-slate-400 hover:bg-white";
+    ? "border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
+    : "border-gray-200 bg-white text-gray-600 hover:bg-gray-50";
   const disabledClasses: string = isDisabled
     ? "cursor-not-allowed opacity-50"
     : "cursor-pointer";
@@ -33,7 +33,7 @@ const LiveLogsToggle: FunctionComponent<LiveLogsToggleProps> = (
     >
       <span
         className={`h-2 w-2 rounded-full ${
-          isLive ? "bg-emerald-500 animate-pulse" : "bg-slate-400"
+          isLive ? "bg-emerald-500 animate-pulse" : "bg-gray-300"
         }`}
       />
       <span className="font-semibold">Live</span>

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

@@ -139,19 +139,15 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
   const containerClassName: string =
     variant === "embedded"
-      ? "rounded-xl border border-slate-900 bg-slate-950 p-5 shadow-inner shadow-slate-950/40"
-      : "rounded-xl border border-slate-800 bg-slate-950/90 p-5 shadow-sm ring-1 ring-inset ring-transparent";
+      ? "rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
+      : "rounded-lg border border-gray-200 bg-white p-5 shadow-md";
 
-  const headerBorderClass: string =
-    variant === "embedded" ? "border-slate-900" : "border-slate-800";
+  const headerBorderClass: string = "border-gray-200";
 
-  const surfaceCardClass: string =
-    variant === "embedded"
-      ? "border-slate-900 bg-slate-950/70"
-      : "border-slate-800 bg-slate-950/80";
+  const surfaceCardClass: string = "border-gray-200 bg-gray-50";
 
   const smallBadgeClass: string =
-    "inline-flex items-center gap-1 rounded-full border border-slate-800 bg-slate-900 px-2 py-1 text-[11px] font-mono uppercase tracking-wide text-slate-300";
+    "inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] font-mono uppercase tracking-wide text-gray-600";
 
   return (
     <div className={containerClassName}>
@@ -160,13 +156,13 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
       >
         <div className="flex flex-1 items-start gap-3">
           <span
-            className="mt-1 h-3 w-3 flex-none rounded-full border border-slate-700"
+            className="mt-1 h-3 w-3 flex-none rounded-full border border-gray-200"
             style={{ backgroundColor: serviceColor }}
             aria-hidden="true"
           />
           <div className="space-y-3">
             <div className="flex flex-wrap items-center gap-3">
-              <h3 className="text-lg font-semibold text-slate-50">
+              <h3 className="text-lg font-semibold text-gray-900">
                 {serviceName}
               </h3>
               <SeverityBadge severity={props.log.severityText} />
@@ -200,7 +196,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
           <button
             type="button"
             onClick={props.onClose}
-            className="flex h-9 w-9 items-center justify-center rounded-full border border-slate-800 bg-slate-900 text-slate-400 transition-colors hover:border-slate-700 hover:text-slate-100"
+            className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-gray-50 text-gray-400 transition-colors hover:border-gray-300 hover:text-gray-600"
             title="Close details"
           >
             <Icon icon={IconProp.Close} className="h-4 w-4" />
@@ -208,9 +204,9 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
         )}
       </div>
 
-      <div className="mt-4 space-y-5 text-sm text-slate-200">
+      <div className="mt-4 space-y-5 text-sm text-gray-700">
         <section className="space-y-3">
-          <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-slate-500">
+          <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
             <span>Log Body</span>
             <CopyTextButton
               textToBeCopied={bodyDetails.raw}
@@ -223,11 +219,11 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
           <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
             {bodyDetails.isJson ? (
-              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-slate-100">
+              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-gray-800">
                 {bodyDetails.pretty}
               </pre>
             ) : (
-              <p className="whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-slate-100">
+              <p className="whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-gray-800">
                 {bodyDetails.pretty || "-"}
               </p>
             )}
@@ -238,7 +234,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
           <section className="grid gap-4 md:grid-cols-2">
             {traceId && (
               <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
-                <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-slate-500">
+                <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
                   <span>Trace ID</span>
                   <CopyTextButton
                     textToBeCopied={traceId}
@@ -252,14 +248,14 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   {traceRoute ? (
                     <Link
                       to={traceRoute}
-                      className="max-w-full truncate font-mono text-xs text-indigo-200 hover:text-indigo-100"
+                      className="max-w-full truncate font-mono text-xs text-indigo-600 hover:text-indigo-500"
                       title={`View trace ${traceId}`}
                     >
                       {traceId}
                     </Link>
                   ) : (
                     <span
-                      className="max-w-full truncate font-mono text-xs text-slate-200"
+                      className="max-w-full truncate font-mono text-xs text-gray-700"
                       title={traceId}
                     >
                       {traceId}
@@ -268,7 +264,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   {traceRoute && (
                     <Icon
                       icon={IconProp.ExternalLink}
-                      className="h-4 w-4 flex-none text-indigo-300"
+                      className="h-4 w-4 flex-none text-indigo-400"
                     />
                   )}
                 </div>
@@ -277,7 +273,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
             {spanId && (
               <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
-                <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-slate-500">
+                <div className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
                   <span>Span ID</span>
                   <CopyTextButton
                     textToBeCopied={spanId}
@@ -291,14 +287,14 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   {spanRoute ? (
                     <Link
                       to={spanRoute}
-                      className="max-w-full truncate font-mono text-xs text-indigo-200 hover:text-indigo-100"
+                      className="max-w-full truncate font-mono text-xs text-indigo-600 hover:text-indigo-500"
                       title={`View span ${spanId}`}
                     >
                       {spanId}
                     </Link>
                   ) : (
                     <span
-                      className="max-w-full truncate font-mono text-xs text-slate-200"
+                      className="max-w-full truncate font-mono text-xs text-gray-700"
                       title={spanId}
                     >
                       {spanId}
@@ -307,7 +303,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   {spanRoute && (
                     <Icon
                       icon={IconProp.ExternalLink}
-                      className="h-4 w-4 flex-none text-indigo-300"
+                      className="h-4 w-4 flex-none text-indigo-400"
                     />
                   )}
                 </div>
@@ -318,7 +314,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
         {prettyAttributes && (
           <section className="space-y-3">
-            <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-slate-500">
+            <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
               <span>Attributes</span>
               <CopyTextButton
                 textToBeCopied={prettyAttributes}
@@ -329,7 +325,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               />
             </header>
             <div className={`rounded-lg border ${surfaceCardClass} p-4`}>
-              <pre className="max-h-72 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-slate-100">
+              <pre className="max-h-72 overflow-auto whitespace-pre-wrap break-words font-mono text-[13px] leading-6 text-gray-800">
                 {prettyAttributes}
               </pre>
             </div>

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

@@ -0,0 +1,360 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  KeyboardEvent,
+} from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+import LogSearchSuggestions from "./LogSearchSuggestions";
+import LogSearchHelp from "./LogSearchHelp";
+
+export interface LogSearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  suggestions?: Array<string> | undefined;
+  valueSuggestions?: Record<string, Array<string>> | undefined;
+  onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
+  placeholder?: string | undefined;
+}
+
+const LogSearchBar: FunctionComponent<LogSearchBarProps> = (
+  props: LogSearchBarProps,
+): ReactElement => {
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
+  const [showHelp, setShowHelp] = useState<boolean>(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] =
+    useState<number>(-1);
+  const inputRef: React.RefObject<HTMLInputElement> = useRef<HTMLInputElement>(
+    null!,
+  );
+  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null!,
+  );
+
+  const currentWord: string = extractCurrentWord(props.value);
+
+  // Strip leading "@" — treat it as a trigger character for suggestions
+  const hasAtPrefix: boolean = currentWord.startsWith("@");
+  const normalizedWord: string = hasAtPrefix
+    ? currentWord.substring(1)
+    : currentWord;
+
+  // Determine if we're in "field:value" mode or "field name" mode
+  const colonIndex: number = normalizedWord.indexOf(":");
+  const isValueMode: boolean = colonIndex > 0;
+  const fieldPrefix: string = isValueMode
+    ? normalizedWord.substring(0, colonIndex).toLowerCase()
+    : "";
+  const partialValue: string = isValueMode
+    ? normalizedWord.substring(colonIndex + 1)
+    : "";
+
+  const filteredSuggestions: Array<string> = isValueMode
+    ? getValueSuggestions(
+        fieldPrefix,
+        partialValue,
+        props.valueSuggestions || {},
+      )
+    : (props.suggestions || []).filter((s: string): boolean => {
+        if (!normalizedWord && !hasAtPrefix) {
+          return false;
+        }
+        // When just "@" is typed, show all suggestions
+        if (hasAtPrefix && normalizedWord.length === 0) {
+          return true;
+        }
+        // Match against the suggestion name, stripping any leading "@" from the suggestion too
+        const normalizedSuggestion: string = s.startsWith("@")
+          ? s.substring(1).toLowerCase()
+          : s.toLowerCase();
+        return normalizedSuggestion.startsWith(normalizedWord.toLowerCase());
+      });
+
+  const shouldShowSuggestions: boolean =
+    showSuggestions &&
+    isFocused &&
+    filteredSuggestions.length > 0 &&
+    (isValueMode ? true : currentWord.length > 0);
+
+  // Show help when focused, input is empty, and no suggestions visible
+  const shouldShowHelp: boolean =
+    showHelp && isFocused && props.value.length === 0 && !shouldShowSuggestions;
+
+  useEffect(() => {
+    setSelectedSuggestionIndex(-1);
+  }, [currentWord]);
+
+  const handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void =
+    useCallback(
+      (e: KeyboardEvent<HTMLInputElement>): void => {
+        if (e.key === "Enter") {
+          if (
+            shouldShowSuggestions &&
+            selectedSuggestionIndex >= 0 &&
+            selectedSuggestionIndex < filteredSuggestions.length
+          ) {
+            applySuggestion(filteredSuggestions[selectedSuggestionIndex]!);
+            e.preventDefault();
+            return;
+          }
+
+          // If in value mode with a typed value, try to match and apply as chip
+          if (
+            isValueMode &&
+            partialValue.length > 0 &&
+            props.onFieldValueSelect
+          ) {
+            // First try exact case-insensitive match from the available values
+            const resolvedField: string =
+              FIELD_ALIAS_MAP[fieldPrefix] || fieldPrefix;
+            const availableValues: Array<string> =
+              (props.valueSuggestions || {})[resolvedField] || [];
+            const lowerPartial: string = partialValue.toLowerCase();
+            const exactMatch: string | undefined = availableValues.find(
+              (v: string): boolean => {
+                return v.toLowerCase() === lowerPartial;
+              },
+            );
+
+            // Use exact match, or if there's exactly one prefix match, use that
+            const resolvedMatch: string | undefined =
+              exactMatch ||
+              (filteredSuggestions.length === 1
+                ? filteredSuggestions[0]
+                : undefined);
+
+            if (resolvedMatch) {
+              props.onFieldValueSelect(fieldPrefix, resolvedMatch);
+              // Remove the field:value term from text
+              const parts: Array<string> = props.value.split(/\s+/);
+              parts.pop();
+              const remaining: string = parts.join(" ");
+              props.onChange(remaining ? remaining + " " : "");
+              setShowSuggestions(false);
+              setShowHelp(false);
+              e.preventDefault();
+              return;
+            }
+          }
+
+          props.onSubmit();
+          setShowSuggestions(false);
+          setShowHelp(false);
+          return;
+        }
+
+        if (e.key === "Escape") {
+          setShowSuggestions(false);
+          setShowHelp(false);
+          return;
+        }
+
+        if (!shouldShowSuggestions) {
+          return;
+        }
+
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setSelectedSuggestionIndex((prev: number): number => {
+            return Math.min(prev + 1, filteredSuggestions.length - 1);
+          });
+          return;
+        }
+
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setSelectedSuggestionIndex((prev: number): number => {
+            return Math.max(prev - 1, 0);
+          });
+        }
+      },
+      [
+        shouldShowSuggestions,
+        selectedSuggestionIndex,
+        filteredSuggestions,
+        isValueMode,
+        fieldPrefix,
+        partialValue,
+        props,
+      ],
+    );
+
+  const applySuggestion: (suggestion: string) => void = useCallback(
+    (suggestion: string): void => {
+      if (isValueMode) {
+        // Value mode: apply as a chip via onFieldValueSelect
+        if (props.onFieldValueSelect) {
+          props.onFieldValueSelect(fieldPrefix, suggestion);
+        }
+
+        // Remove the current field:value term from the search text
+        const parts: Array<string> = props.value.split(/\s+/);
+        parts.pop(); // remove the field:partialValue
+        const remaining: string = parts.join(" ");
+        props.onChange(remaining ? remaining + " " : "");
+        setShowSuggestions(false);
+        setShowHelp(false);
+        inputRef.current?.focus();
+        return;
+      }
+
+      // Field name mode: append colon
+      const parts: Array<string> = props.value.split(/\s+/);
+
+      if (parts.length > 0) {
+        parts[parts.length - 1] = suggestion + ":";
+      }
+
+      props.onChange(parts.join(" "));
+      setShowSuggestions(false);
+      setShowHelp(false);
+      inputRef.current?.focus();
+    },
+    [props, isValueMode, fieldPrefix],
+  );
+
+  const handleExampleClick: (example: string) => void = useCallback(
+    (example: string): void => {
+      props.onChange(example);
+      setShowHelp(false);
+      inputRef.current?.focus();
+    },
+    [props],
+  );
+
+  useEffect(() => {
+    const handleClickOutside: (e: MouseEvent) => void = (
+      e: MouseEvent,
+    ): void => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setShowSuggestions(false);
+        setShowHelp(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div
+        className={`flex items-center gap-2 rounded-lg border bg-white px-3 py-2 transition-colors ${
+          isFocused
+            ? "border-indigo-400 ring-2 ring-indigo-100"
+            : "border-gray-200 hover:border-gray-300"
+        }`}
+      >
+        <Icon
+          icon={IconProp.Search}
+          className="h-4 w-4 flex-none text-gray-400"
+        />
+        <input
+          ref={inputRef}
+          type="text"
+          value={props.value}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            props.onChange(e.target.value);
+            setShowSuggestions(true);
+            setShowHelp(false);
+          }}
+          onFocus={() => {
+            setIsFocused(true);
+            setShowSuggestions(true);
+            if (props.value.length === 0) {
+              setShowHelp(true);
+            }
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            props.placeholder ||
+            'Search logs... (e.g. severity:error service:api "connection refused")'
+          }
+          className="flex-1 bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 outline-none"
+          spellCheck={false}
+          autoComplete="off"
+        />
+        {props.value.length > 0 && (
+          <button
+            type="button"
+            className="flex-none rounded-full p-1 text-gray-400 hover:bg-gray-100"
+            onClick={() => {
+              props.onChange("");
+              setShowHelp(true);
+              setShowSuggestions(false);
+              inputRef.current?.focus();
+            }}
+            title="Clear search"
+          >
+            <Icon icon={IconProp.Close} className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
+
+      {shouldShowSuggestions && (
+        <LogSearchSuggestions
+          suggestions={filteredSuggestions}
+          selectedIndex={selectedSuggestionIndex}
+          onSelect={applySuggestion}
+          fieldContext={isValueMode ? fieldPrefix : undefined}
+        />
+      )}
+
+      {shouldShowHelp && <LogSearchHelp onExampleClick={handleExampleClick} />}
+    </div>
+  );
+};
+
+function extractCurrentWord(value: string): string {
+  const parts: Array<string> = value.split(/\s+/);
+  return parts[parts.length - 1] || "";
+}
+
+// Field alias mapping (user-facing name → internal key used in valueSuggestions)
+const FIELD_ALIAS_MAP: Record<string, string> = {
+  severity: "severityText",
+  level: "severityText",
+  service: "serviceId",
+  trace: "traceId",
+  span: "spanId",
+};
+
+function getValueSuggestions(
+  fieldName: string,
+  partialValue: string,
+  valueSuggestions: Record<string, Array<string>>,
+): Array<string> {
+  // Resolve field name alias
+  const resolvedField: string = FIELD_ALIAS_MAP[fieldName] || fieldName;
+
+  const values: Array<string> | undefined = valueSuggestions[resolvedField];
+
+  if (!values || values.length === 0) {
+    return [];
+  }
+
+  if (!partialValue || partialValue.length === 0) {
+    return values;
+  }
+
+  const lowerPartial: string = partialValue.toLowerCase();
+  return values.filter((v: string): boolean => {
+    return v.toLowerCase().startsWith(lowerPartial);
+  });
+}
+
+export default LogSearchBar;