@oneuptime/common 10.0.20 → 10.0.22

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

@@ -0,0 +1,128 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface LogSearchHelpProps {
+  onExampleClick?: ((example: string) => void) | undefined;
+}
+
+interface HelpRow {
+  syntax: string;
+  description: string;
+  example: string;
+}
+
+const HELP_ROWS: Array<HelpRow> = [
+  {
+    syntax: "free text",
+    description: "Search log messages",
+    example: "connection refused",
+  },
+  {
+    syntax: '"quoted phrase"',
+    description: "Exact phrase match",
+    example: '"out of memory"',
+  },
+  {
+    syntax: "severity:<level>",
+    description: "Filter by log level",
+    example: "severity:error",
+  },
+  {
+    syntax: "service:<name>",
+    description: "Filter by service",
+    example: "service:api",
+  },
+  {
+    syntax: "trace:<id>",
+    description: "Filter by trace ID",
+    example: "trace:abc123def456",
+  },
+  {
+    syntax: "span:<id>",
+    description: "Filter by span ID",
+    example: "span:e1f7f671fe78",
+  },
+  {
+    syntax: "@<attr>:<value>",
+    description: "Filter by attribute",
+    example: "@http.status_code:500",
+  },
+  {
+    syntax: "-field:value",
+    description: "Exclude matching logs",
+    example: "-severity:debug",
+  },
+  {
+    syntax: "field:value*",
+    description: "Wildcard match",
+    example: "service:api-*",
+  },
+  {
+    syntax: "@attr:>N",
+    description: "Numeric comparison",
+    example: "@duration:>1000",
+  },
+];
+
+const LogSearchHelp: FunctionComponent<LogSearchHelpProps> = (
+  props: LogSearchHelpProps,
+): ReactElement => {
+  return (
+    <div className="absolute left-0 top-full z-50 mt-1 w-[36rem] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg">
+      <div className="border-b border-gray-100 px-3 py-2">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+          Search syntax
+        </span>
+      </div>
+
+      <table className="w-full">
+        <tbody>
+          {HELP_ROWS.map((row: HelpRow) => {
+            return (
+              <tr
+                key={row.syntax}
+                className="cursor-pointer transition-colors hover:bg-gray-50"
+                onMouseDown={(e: React.MouseEvent) => {
+                  e.preventDefault();
+                  if (props.onExampleClick) {
+                    props.onExampleClick(row.example);
+                  }
+                }}
+              >
+                <td className="whitespace-nowrap py-1.5 pl-3 pr-2">
+                  <code className="font-mono text-xs text-indigo-600">
+                    {row.syntax}
+                  </code>
+                </td>
+                <td className="py-1.5 px-2">
+                  <span className="text-xs text-gray-500">
+                    {row.description}
+                  </span>
+                </td>
+                <td className="whitespace-nowrap py-1.5 pl-2 pr-3 text-right">
+                  <code className="font-mono text-[11px] text-gray-400">
+                    {row.example}
+                  </code>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+
+      <div className="border-t border-gray-100 px-3 py-1.5">
+        <span className="text-[10px] text-gray-400">
+          Press{" "}
+          <kbd className="rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-[10px]">
+            Enter
+          </kbd>{" "}
+          to search · Combine filters:{" "}
+          <code className="font-mono text-[10px] text-gray-500">
+            severity:error service:api &quot;timeout&quot;
+          </code>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default LogSearchHelp;

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

@@ -0,0 +1,64 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface LogSearchSuggestionsProps {
+  suggestions: Array<string>;
+  selectedIndex: number;
+  onSelect: (suggestion: string) => void;
+  fieldContext?: string | undefined;
+}
+
+const MAX_VISIBLE_SUGGESTIONS: number = 8;
+
+const LogSearchSuggestions: FunctionComponent<LogSearchSuggestionsProps> = (
+  props: LogSearchSuggestionsProps,
+): ReactElement => {
+  const visible: Array<string> = props.suggestions.slice(
+    0,
+    MAX_VISIBLE_SUGGESTIONS,
+  );
+
+  return (
+    <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
+      {visible.map((suggestion: string, index: number) => {
+        const isSelected: boolean = index === props.selectedIndex;
+
+        return (
+          <button
+            key={suggestion}
+            type="button"
+            className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors ${
+              isSelected
+                ? "bg-indigo-50 text-indigo-700"
+                : "text-gray-700 hover:bg-gray-50"
+            }`}
+            onMouseDown={(e: React.MouseEvent) => {
+              e.preventDefault();
+              props.onSelect(suggestion);
+            }}
+          >
+            {props.fieldContext ? (
+              <>
+                <span className="font-mono text-xs text-gray-400">
+                  {props.fieldContext}:
+                </span>
+                <span className="font-mono">{suggestion}</span>
+              </>
+            ) : (
+              <>
+                <span className="font-mono text-xs text-indigo-400">@</span>
+                <span className="font-mono">{suggestion}</span>
+              </>
+            )}
+          </button>
+        );
+      })}
+      {props.suggestions.length > MAX_VISIBLE_SUGGESTIONS && (
+        <div className="px-3 py-1 text-[11px] text-gray-400">
+          +{props.suggestions.length - MAX_VISIBLE_SUGGESTIONS} more...
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LogSearchSuggestions;

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

@@ -0,0 +1,199 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+} from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../../Types/Time/TimeRange";
+import InBetween from "../../../../Types/BaseDatabase/InBetween";
+import StartAndEndDate, {
+  StartAndEndDateType,
+} from "../../Date/StartAndEndDate";
+
+export interface LogTimeRangePickerProps {
+  value: RangeStartAndEndDateTime;
+  onChange: (value: RangeStartAndEndDateTime) => void;
+}
+
+// Preset options to show in the dropdown (ordered for log investigation use)
+const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
+  { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
+  { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
+  { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
+  { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
+  { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
+  { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
+  { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
+  { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
+  { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
+  { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
+];
+
+function formatDateShort(date: Date): string {
+  const month: string = date.toLocaleString("en-US", { month: "short" });
+  const day: number = date.getDate();
+  const hours: string = date.getHours().toString().padStart(2, "0");
+  const minutes: string = date.getMinutes().toString().padStart(2, "0");
+  return `${month} ${day}, ${hours}:${minutes}`;
+}
+
+function getButtonLabel(value: RangeStartAndEndDateTime): string {
+  if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
+    const start: string = formatDateShort(value.startAndEndDate.startValue);
+    const end: string = formatDateShort(value.startAndEndDate.endValue);
+    return `${start} – ${end}`;
+  }
+
+  const preset: { range: TimeRange; label: string } | undefined =
+    PRESET_OPTIONS.find((opt: { range: TimeRange; label: string }) => {
+      return opt.range === value.range;
+    });
+  return preset ? preset.label : value.range;
+}
+
+const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
+  props: LogTimeRangePickerProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [showCustom, setShowCustom] = useState<boolean>(
+    props.value.range === TimeRange.CUSTOM,
+  );
+  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null!,
+  );
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside: (e: MouseEvent) => void = (
+      e: MouseEvent,
+    ): void => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // Sync showCustom when value changes externally (e.g., histogram drag)
+  useEffect(() => {
+    setShowCustom(props.value.range === TimeRange.CUSTOM);
+  }, [props.value.range]);
+
+  const handlePresetSelect: (range: TimeRange) => void = useCallback(
+    (range: TimeRange): void => {
+      props.onChange({ range });
+      setShowCustom(false);
+      setIsOpen(false);
+    },
+    [props],
+  );
+
+  const handleCustomDateChange: (dateRange: InBetween<Date> | null) => void =
+    useCallback(
+      (dateRange: InBetween<Date> | null): void => {
+        if (dateRange) {
+          props.onChange({
+            range: TimeRange.CUSTOM,
+            startAndEndDate: dateRange,
+          });
+        }
+      },
+      [props],
+    );
+
+  const buttonLabel: string = getButtonLabel(props.value);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        className={`flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors ${
+          isOpen
+            ? "border-indigo-300 bg-indigo-50 text-indigo-700"
+            : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"
+        }`}
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
+        <span>{buttonLabel}</span>
+        <Icon
+          icon={IconProp.ChevronDown}
+          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white shadow-lg">
+          {/* Preset options */}
+          <div className="max-h-64 overflow-y-auto py-1">
+            {PRESET_OPTIONS.map(
+              (option: { range: TimeRange; label: string }) => {
+                const isActive: boolean = props.value.range === option.range;
+
+                return (
+                  <button
+                    key={option.range}
+                    type="button"
+                    className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
+                      isActive
+                        ? "bg-indigo-50 font-medium text-indigo-700"
+                        : "text-gray-700 hover:bg-gray-50"
+                    }`}
+                    onClick={() => {
+                      handlePresetSelect(option.range);
+                    }}
+                  >
+                    {option.label}
+                  </button>
+                );
+              },
+            )}
+
+            {/* Custom option */}
+            <button
+              type="button"
+              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
+                props.value.range === TimeRange.CUSTOM
+                  ? "bg-indigo-50 font-medium text-indigo-700"
+                  : "text-gray-700 hover:bg-gray-50"
+              }`}
+              onClick={() => {
+                setShowCustom(true);
+              }}
+            >
+              Custom Range...
+            </button>
+          </div>
+
+          {/* Custom date inputs */}
+          {showCustom && (
+            <div className="border-t border-gray-100 p-3">
+              <StartAndEndDate
+                type={StartAndEndDateType.DateTime}
+                value={props.value.startAndEndDate}
+                hideTimeButtons={true}
+                onValueChanged={handleCustomDateChange}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LogTimeRangePicker;

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

@@ -0,0 +1,172 @@
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import { FacetData, FacetValue, ActiveFilter } from "../types";
+import FacetSection from "./FacetSection";
+import Service from "../../../../Models/DatabaseModels/Service";
+import Dictionary from "../../../../Types/Dictionary";
+import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+import { getSeverityColor } from "./severityColors";
+import LogSeverity from "../../../../Types/Log/LogSeverity";
+
+export interface LogsFacetSidebarProps {
+  facetData: FacetData;
+  isLoading: boolean;
+  serviceMap: Dictionary<Service>;
+  onIncludeFilter: (facetKey: string, value: string) => void;
+  onExcludeFilter: (facetKey: string, value: string) => void;
+  activeFilters?: Array<ActiveFilter> | undefined;
+}
+
+const SEVERITY_ORDER: Array<string> = [
+  LogSeverity.Fatal,
+  LogSeverity.Error,
+  LogSeverity.Warning,
+  LogSeverity.Information,
+  LogSeverity.Debug,
+  LogSeverity.Trace,
+  LogSeverity.Unspecified,
+];
+
+function buildSeverityColorMap(): Record<string, string> {
+  const map: Record<string, string> = {};
+
+  for (const severity of SEVERITY_ORDER) {
+    map[severity] = getSeverityColor(severity).fill;
+  }
+
+  return map;
+}
+
+function buildServiceDisplayMap(
+  serviceMap: Dictionary<Service>,
+): Record<string, string> {
+  const map: Record<string, string> = {};
+
+  for (const [id, service] of Object.entries(serviceMap)) {
+    if (service?.name) {
+      map[id] = service.name;
+    }
+  }
+
+  return map;
+}
+
+function buildServiceColorMap(
+  serviceMap: Dictionary<Service>,
+): Record<string, string> {
+  const map: Record<string, string> = {};
+
+  for (const [id, service] of Object.entries(serviceMap)) {
+    if (service?.serviceColor) {
+      map[id] = service.serviceColor.toString();
+    }
+  }
+
+  return map;
+}
+
+function getFacetTitle(key: string): string {
+  const titleMap: Record<string, string> = {
+    severityText: "Severity",
+    serviceId: "Service",
+    traceId: "Trace ID",
+    spanId: "Span ID",
+  };
+
+  return titleMap[key] || key;
+}
+
+const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
+  props: LogsFacetSidebarProps,
+): ReactElement => {
+  const severityColorMap: Record<string, string> = useMemo(() => {
+    return buildSeverityColorMap();
+  }, []);
+
+  const serviceDisplayMap: Record<string, string> = useMemo(() => {
+    return buildServiceDisplayMap(props.serviceMap);
+  }, [props.serviceMap]);
+
+  const serviceColorMap: Record<string, string> = useMemo(() => {
+    return buildServiceColorMap(props.serviceMap);
+  }, [props.serviceMap]);
+
+  const facetKeys: Array<string> = useMemo(() => {
+    const priorityKeys: Array<string> = ["severityText", "serviceId"];
+    const otherKeys: Array<string> = Object.keys(props.facetData).filter(
+      (key: string) => {
+        return !priorityKeys.includes(key);
+      },
+    );
+    return [
+      ...priorityKeys.filter((key: string) => {
+        return props.facetData[key] !== undefined;
+      }),
+      ...otherKeys.sort(),
+    ];
+  }, [props.facetData]);
+
+  // Build a map of facetKey -> Set<activeValue>
+  const activeValuesByKey: Record<string, Set<string>> = useMemo(() => {
+    const map: Record<string, Set<string>> = {};
+
+    if (props.activeFilters) {
+      for (const filter of props.activeFilters) {
+        if (!map[filter.facetKey]) {
+          map[filter.facetKey] = new Set<string>();
+        }
+
+        map[filter.facetKey]!.add(filter.value);
+      }
+    }
+
+    return map;
+  }, [props.activeFilters]);
+
+  return (
+    <div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
+      <div className="border-b border-gray-100 px-3 py-2.5">
+        <h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
+          Filters
+        </h3>
+      </div>
+
+      {props.isLoading && Object.keys(props.facetData).length === 0 && (
+        <div className="flex flex-1 items-center justify-center py-8">
+          <ComponentLoader />
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto">
+        {facetKeys.map((key: string) => {
+          const values: Array<FacetValue> = props.facetData[key] || [];
+
+          let valueDisplayMap: Record<string, string> | undefined;
+          let valueColorMap: Record<string, string> | undefined;
+
+          if (key === "serviceId") {
+            valueDisplayMap = serviceDisplayMap;
+            valueColorMap = serviceColorMap;
+          } else if (key === "severityText") {
+            valueColorMap = severityColorMap;
+          }
+
+          return (
+            <FacetSection
+              key={key}
+              facetKey={key}
+              title={getFacetTitle(key)}
+              values={values}
+              onIncludeValue={props.onIncludeFilter}
+              onExcludeValue={props.onExcludeFilter}
+              valueDisplayMap={valueDisplayMap}
+              valueColorMap={valueColorMap}
+              activeValues={activeValuesByKey[key]}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default LogsFacetSidebar;

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

@@ -1,73 +1,43 @@
 import React, { FunctionComponent, ReactElement, ReactNode } from "react";
-import Card from "../../Card/Card";
-import FiltersForm from "../../Filters/FiltersForm";
-import FieldType from "../../Types/FieldType";
-import DropdownUtil from "../../../Utils/Dropdown";
-import LogSeverity from "../../../../Types/Log/LogSeverity";
-import Query from "../../../../Types/BaseDatabase/Query";
-import Log from "../../../../Models/AnalyticsModels/Log";
+import LogSearchBar from "./LogSearchBar";
 
 export interface LogsFilterCardProps {
-  filterData: Query<Log>;
-  onFilterChanged: (filterData: Query<Log>) => void;
-  onAdvancedFiltersToggle: (show: boolean) => void;
-  isFilterLoading: boolean;
-  filterError?: string | undefined;
-  onFilterRefreshClick?: (() => void) | undefined;
   logAttributes: Array<string>;
   toolbar: ReactNode;
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+  onSearchSubmit: () => void;
+  valueSuggestions?: Record<string, Array<string>> | undefined;
+  onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
 }
 
 const LogsFilterCard: FunctionComponent<LogsFilterCardProps> = (
   props: LogsFilterCardProps,
 ): ReactElement => {
+  const searchBarSuggestions: Array<string> = [
+    "severity",
+    "service",
+    "trace",
+    "span",
+    ...props.logAttributes.map((attr: string) => {
+      return `@${attr}`;
+    }),
+  ];
+
   return (
-    <Card>
-      <div className="-mt-8">
-        <FiltersForm<Log>
-          id="logs-filter"
-          showFilter={true}
-          filterData={props.filterData}
-          onFilterChanged={props.onFilterChanged}
-          onAdvancedFiltersToggle={props.onAdvancedFiltersToggle}
-          isFilterLoading={props.isFilterLoading}
-          filterError={props.filterError}
-          onFilterRefreshClick={props.onFilterRefreshClick}
-          filters={[
-            {
-              key: "body",
-              type: FieldType.Text,
-              title: "Search Log",
-            },
-            {
-              key: "severityText",
-              filterDropdownOptions:
-                DropdownUtil.getDropdownOptionsFromEnum(LogSeverity),
-              type: FieldType.Dropdown,
-              title: "Log Severity",
-              isAdvancedFilter: true,
-            },
-            {
-              key: "time",
-              type: FieldType.DateTime,
-              title: "Start and End Date",
-              isAdvancedFilter: true,
-            },
-            {
-              key: "attributes",
-              type: FieldType.JSON,
-              title: "Filter by Attributes",
-              jsonKeys: props.logAttributes,
-              isAdvancedFilter: true,
-            },
-          ]}
+    <div className="flex items-start gap-3">
+      <div className="min-w-0 flex-1">
+        <LogSearchBar
+          value={props.searchQuery}
+          onChange={props.onSearchQueryChange}
+          onSubmit={props.onSearchSubmit}
+          suggestions={searchBarSuggestions}
+          valueSuggestions={props.valueSuggestions}
+          onFieldValueSelect={props.onFieldValueSelect}
         />
       </div>
-
-      <div className="-mx-6 -mb-6 border-t border-slate-200 bg-white/60 px-6 py-3 backdrop-blur">
-        {props.toolbar}
-      </div>
-    </Card>
+      <div className="flex-none pt-0.5">{props.toolbar}</div>
+    </div>
   );
 };