@oneuptime/common 10.0.20 → 10.0.21

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -34,7 +34,17 @@ import LogsTable, {
 } from "./components/LogsTable";
 import LogsPagination from "./components/LogsPagination";
 import LogDetailsPanel from "./components/LogDetailsPanel";
-import { LiveLogsOptions } from "./types";
+import LogsHistogram from "./components/LogsHistogram";
+import LogsFacetSidebar from "./components/LogsFacetSidebar";
+import ActiveFilterChips from "./components/ActiveFilterChips";
+import {
+  LiveLogsOptions,
+  HistogramBucket,
+  FacetData,
+  ActiveFilter,
+} from "./types";
+import { queryStringToFilter } from "../../../Types/Log/LogQueryToFilter";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
 
 export interface ComponentProps {
   logs: Array<Log>;
@@ -54,10 +64,26 @@ export interface ComponentProps {
   sortOrder?: SortOrder | undefined;
   onSortChange?: (field: LogsTableSortField, order: SortOrder) => void;
   liveOptions?: LiveLogsOptions | undefined;
+  histogramBuckets?: Array<HistogramBucket>;
+  histogramLoading?: boolean;
+  onHistogramTimeRangeSelect?: (startTime: Date, endTime: Date) => void;
+  facetData?: FacetData;
+  facetLoading?: boolean;
+  onFacetInclude?: (facetKey: string, value: string) => void;
+  onFacetExclude?: (facetKey: string, value: string) => void;
+  showFacetSidebar?: boolean;
+  activeFilters?: Array<ActiveFilter> | undefined;
+  onRemoveFilter?: ((facetKey: string, value: string) => void) | undefined;
+  onClearAllFilters?: (() => void) | undefined;
+  valueSuggestions?: Record<string, Array<string>> | undefined;
+  onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
+  timeRange?: RangeStartAndEndDateTime | undefined;
+  onTimeRangeChange?: ((value: RangeStartAndEndDateTime) => void) | undefined;
 }
 
 export type LogsSortField = LogsTableSortField;
 export type { LiveLogsOptions } from "./types";
+export type { HistogramBucket, FacetData, ActiveFilter } from "./types";
 
 const DEFAULT_PAGE_SIZE: number = 100;
 const PAGE_SIZE_OPTIONS: Array<number> = [100, 250, 500, 1000];
@@ -88,13 +114,11 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [filterData, setFilterData] = useState<Query<Log>>(props.filterData);
+  const [searchQuery, setSearchQuery] = useState<string>("");
 
   const [logAttributes, setLogAttributes] = useState<Array<string>>([]);
   const [attributesLoaded, setAttributesLoaded] = useState<boolean>(false);
   const [attributesLoading, setAttributesLoading] = useState<boolean>(false);
-  const [attributesError, setAttributesError] = useState<string>("");
-  const [areAdvancedFiltersVisible, setAreAdvancedFiltersVisible] =
-    useState<boolean>(false);
 
   const [isPageLoading, setIsPageLoading] = useState<boolean>(true);
   const [pageError, setPageError] = useState<string>("");
@@ -278,7 +302,6 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     useCallback(async (): Promise<void> => {
       try {
         setAttributesLoading(true);
-        setAttributesError("");
 
         const attributeResponse: HTTPResponse<JSONObject> | HTTPErrorResponse =
           await API.post({
@@ -300,12 +323,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         ] || []) as Array<string>;
         setLogAttributes(attributes);
         setAttributesLoaded(true);
-      } catch (err) {
+      } catch {
         setLogAttributes([]);
         setAttributesLoaded(false);
-        setAttributesError(
-          `We couldn't load log attributes. Filters may be limited. ${API.getFriendlyErrorMessage(err as Error)}`,
-        );
       } finally {
         setAttributesLoading(false);
       }
@@ -315,6 +335,13 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     void loadServices();
   }, [loadServices]);
 
+  // Load attributes eagerly for search bar suggestions
+  useEffect(() => {
+    if (!attributesLoaded && !attributesLoading) {
+      void loadAttributes();
+    }
+  }, [attributesLoaded, attributesLoading, loadAttributes]);
+
   const resetPage: () => void = (): void => {
     if (props.onPageChange) {
       props.onPageChange(1);
@@ -325,10 +352,18 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
   };
 
-  const handleApplyFilters: () => void = (): void => {
+  const handleSearchSubmit: () => void = (): void => {
+    const queryFilter: Record<string, unknown> = queryStringToFilter(
+      searchQuery,
+    ) as Record<string, unknown>;
+    const mergedFilter: Query<Log> = {
+      ...filterData,
+      ...queryFilter,
+    } as Query<Log>;
+
     resetPage();
     setSelectedLogId(null);
-    props.onFilterChanged(filterData);
+    props.onFilterChanged(mergedFilter);
   };
 
   const handlePageChange: (page: number) => void = (page: number): void => {
@@ -341,8 +376,6 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
 
     setSelectedLogId(null);
-
-    setSelectedLogId(null);
   };
 
   const handlePageSizeChange: (size: number) => void = (size: number): void => {
@@ -377,6 +410,28 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     setSelectedLogId(null);
   };
 
+  /*
+   * Enrich active filters with resolved display values (e.g. service names)
+   * Must be before early returns to maintain consistent hook call order.
+   */
+  const enrichedActiveFilters: Array<ActiveFilter> = useMemo(() => {
+    if (!props.activeFilters) {
+      return [];
+    }
+
+    return props.activeFilters.map((filter: ActiveFilter): ActiveFilter => {
+      if (filter.facetKey === "serviceId" && serviceMap[filter.value]) {
+        const service: Service | undefined = serviceMap[filter.value];
+        return {
+          ...filter,
+          displayValue: service?.name || filter.value,
+        };
+      }
+
+      return filter;
+    });
+  }, [props.activeFilters, serviceMap]);
+
   if (isPageLoading) {
     return <PageLoader isVisible={true} />;
   }
@@ -390,99 +445,117 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     currentPage,
     totalPages,
     ...(props.liveOptions ? { liveOptions: props.liveOptions } : {}),
+    ...(props.timeRange && props.onTimeRangeChange
+      ? {
+          timeRange: props.timeRange,
+          onTimeRangeChange: props.onTimeRangeChange,
+        }
+      : {}),
   };
 
+  const showSidebar: boolean =
+    props.showFacetSidebar !== false && Boolean(props.facetData);
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-2">
       {props.showFilters && (
-        <div className="mb-6">
+        <div>
           <LogsFilterCard
-            filterData={filterData}
-            onFilterChanged={(updated: Query<Log>) => {
-              setFilterData(updated);
-            }}
-            onAdvancedFiltersToggle={(show: boolean) => {
-              setAreAdvancedFiltersVisible(show);
-
-              if (show && !attributesLoaded && !attributesLoading) {
-                void loadAttributes();
-              }
-            }}
-            isFilterLoading={areAdvancedFiltersVisible && attributesLoading}
-            filterError={
-              areAdvancedFiltersVisible && attributesError
-                ? attributesError
-                : undefined
-            }
-            onFilterRefreshClick={
-              areAdvancedFiltersVisible && attributesError
-                ? () => {
-                    void loadAttributes();
-                  }
-                : undefined
-            }
             logAttributes={logAttributes}
-            toolbar={
-              <LogsViewerToolbar
-                {...toolbarProps}
-                showApplyButton={true}
-                onApplyFilters={handleApplyFilters}
-              />
-            }
+            searchQuery={searchQuery}
+            onSearchQueryChange={setSearchQuery}
+            onSearchSubmit={handleSearchSubmit}
+            valueSuggestions={props.valueSuggestions}
+            onFieldValueSelect={props.onFieldValueSelect}
+            toolbar={<LogsViewerToolbar {...toolbarProps} />}
           />
         </div>
       )}
 
-      <div className="overflow-hidden rounded-2xl border border-slate-800/70 bg-slate-950/60 shadow-xl">
-        {!props.showFilters && (
-          <div className="border-b border-slate-800/70 bg-slate-950/70 px-4 py-3">
-            <LogsViewerToolbar {...toolbarProps} />
-          </div>
-        )}
-
-        <LogsTable
-          logs={displayedLogs}
-          serviceMap={serviceMap}
-          isLoading={props.isLoading}
-          emptyMessage={props.noLogsMessage}
-          onRowClick={(_log: Log, rowId: string) => {
-            setSelectedLogId((currentSelected: string | null) => {
-              if (currentSelected === rowId) {
-                return null;
-              }
-
-              return rowId;
-            });
-          }}
-          selectedLogId={selectedLogId}
-          sortField={sortField}
-          sortOrder={sortOrder}
-          onSortChange={handleSortChange}
-          renderExpandedContent={(log: Log) => {
-            return (
-              <LogDetailsPanel
-                log={log}
-                serviceMap={serviceMap}
-                onClose={() => {
-                  setSelectedLogId(null);
-                }}
-                getTraceRoute={props.getTraceRoute}
-                getSpanRoute={props.getSpanRoute}
-                variant="embedded"
-              />
-            );
-          }}
+      {/* Active filter chips */}
+      {enrichedActiveFilters.length > 0 && props.onRemoveFilter && (
+        <ActiveFilterChips
+          filters={enrichedActiveFilters}
+          onRemove={props.onRemoveFilter}
+          onClearAll={props.onClearAllFilters || (() => {})}
         />
+      )}
 
-        <LogsPagination
-          currentPage={currentPage}
-          totalItems={totalItems}
-          pageSize={pageSize}
-          pageSizeOptions={PAGE_SIZE_OPTIONS}
-          onPageChange={handlePageChange}
-          onPageSizeChange={handlePageSizeChange}
-          isDisabled={props.isLoading || totalItems === 0}
+      {/* Histogram */}
+      {props.histogramBuckets && (
+        <LogsHistogram
+          buckets={props.histogramBuckets}
+          isLoading={props.histogramLoading || false}
+          onTimeRangeSelect={props.onHistogramTimeRangeSelect}
         />
+      )}
+
+      {/* Main content: sidebar + table */}
+      <div className="flex gap-3">
+        {showSidebar && props.facetData && (
+          <LogsFacetSidebar
+            facetData={props.facetData}
+            isLoading={props.facetLoading || false}
+            serviceMap={serviceMap}
+            onIncludeFilter={props.onFacetInclude || (() => {})}
+            onExcludeFilter={props.onFacetExclude || (() => {})}
+            activeFilters={props.activeFilters}
+          />
+        )}
+
+        <div className="min-w-0 flex-1">
+          <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+            {!props.showFilters && (
+              <div className="border-b border-gray-100 bg-gray-50/50 px-4 py-3">
+                <LogsViewerToolbar {...toolbarProps} />
+              </div>
+            )}
+
+            <LogsTable
+              logs={displayedLogs}
+              serviceMap={serviceMap}
+              isLoading={props.isLoading}
+              emptyMessage={props.noLogsMessage}
+              onRowClick={(_log: Log, rowId: string) => {
+                setSelectedLogId((currentSelected: string | null) => {
+                  if (currentSelected === rowId) {
+                    return null;
+                  }
+
+                  return rowId;
+                });
+              }}
+              selectedLogId={selectedLogId}
+              sortField={sortField}
+              sortOrder={sortOrder}
+              onSortChange={handleSortChange}
+              renderExpandedContent={(log: Log) => {
+                return (
+                  <LogDetailsPanel
+                    log={log}
+                    serviceMap={serviceMap}
+                    onClose={() => {
+                      setSelectedLogId(null);
+                    }}
+                    getTraceRoute={props.getTraceRoute}
+                    getSpanRoute={props.getSpanRoute}
+                    variant="embedded"
+                  />
+                );
+              }}
+            />
+
+            <LogsPagination
+              currentPage={currentPage}
+              totalItems={totalItems}
+              pageSize={pageSize}
+              pageSizeOptions={PAGE_SIZE_OPTIONS}
+              onPageChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+              isDisabled={props.isLoading || totalItems === 0}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,58 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import { ActiveFilter } from "../types";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface ActiveFilterChipsProps {
+  filters: Array<ActiveFilter>;
+  onRemove: (facetKey: string, value: string) => void;
+  onClearAll: () => void;
+}
+
+const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
+  props: ActiveFilterChipsProps,
+): ReactElement | null => {
+  if (props.filters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 px-0.5">
+      {props.filters.map((filter: ActiveFilter) => {
+        const chipKey: string = `${filter.facetKey}:${filter.value}`;
+        return (
+          <span
+            key={chipKey}
+            className="inline-flex items-center gap-1 rounded-md border border-indigo-200 bg-indigo-50 py-0.5 pl-2 pr-1 text-xs text-indigo-700"
+          >
+            <span className="font-medium text-indigo-500">
+              {filter.displayKey}:
+            </span>
+            <span>{filter.displayValue}</span>
+            <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"
+              onClick={() => {
+                props.onRemove(filter.facetKey, filter.value);
+              }}
+              title={`Remove ${filter.displayKey}: ${filter.displayValue}`}
+            >
+              <Icon icon={IconProp.Close} className="h-2.5 w-2.5" />
+            </button>
+          </span>
+        );
+      })}
+      {props.filters.length > 1 && (
+        <button
+          type="button"
+          className="rounded px-1.5 py-0.5 text-[11px] font-medium text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+          onClick={props.onClearAll}
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ActiveFilterChips;

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

@@ -0,0 +1,119 @@
+import React, { FunctionComponent, ReactElement, useState } from "react";
+import { FacetValue } from "../types";
+import FacetValueRow from "./FacetValueRow";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface FacetSectionProps {
+  title: string;
+  values: Array<FacetValue>;
+  initialVisibleCount?: number;
+  onIncludeValue: (key: string, value: string) => void;
+  onExcludeValue: (key: string, value: string) => void;
+  facetKey: string;
+  valueDisplayMap?: Record<string, string> | undefined;
+  valueColorMap?: Record<string, string> | undefined;
+  activeValues?: Set<string> | undefined;
+}
+
+const DEFAULT_VISIBLE_COUNT: number = 5;
+
+const FacetSection: FunctionComponent<FacetSectionProps> = (
+  props: FacetSectionProps,
+): ReactElement => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+  const [showAll, setShowAll] = useState<boolean>(false);
+
+  const visibleCount: number =
+    props.initialVisibleCount ?? DEFAULT_VISIBLE_COUNT;
+
+  const displayedValues: Array<FacetValue> = showAll
+    ? props.values
+    : props.values.slice(0, visibleCount);
+
+  const hasMore: boolean = props.values.length > visibleCount;
+
+  const maxCount: number =
+    props.values.length > 0
+      ? Math.max(
+          ...props.values.map((v: FacetValue) => {
+            return v.count;
+          }),
+        )
+      : 0;
+
+  const activeCount: number = props.activeValues ? props.activeValues.size : 0;
+
+  return (
+    <div className="border-b border-gray-100 py-2">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between px-2 py-1 text-left"
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+        }}
+      >
+        <div className="flex items-center gap-1.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
+            {props.title}
+          </span>
+          {activeCount > 0 && (
+            <span className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
+              {activeCount}
+            </span>
+          )}
+        </div>
+        <Icon
+          icon={isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight}
+          className="h-3 w-3 text-gray-400"
+        />
+      </button>
+
+      {isExpanded && (
+        <div className="mt-1 px-1">
+          {displayedValues.map((facet: FacetValue) => {
+            return (
+              <FacetValueRow
+                key={facet.value}
+                value={facet.value}
+                displayValue={props.valueDisplayMap?.[facet.value]}
+                count={facet.count}
+                maxCount={maxCount}
+                color={props.valueColorMap?.[facet.value]}
+                isActive={props.activeValues?.has(facet.value) || false}
+                onInclude={(value: string) => {
+                  props.onIncludeValue(props.facetKey, value);
+                }}
+                onExclude={(value: string) => {
+                  props.onExcludeValue(props.facetKey, value);
+                }}
+              />
+            );
+          })}
+
+          {props.values.length === 0 && (
+            <p className="px-1 py-2 text-[11px] text-gray-400">
+              No values found
+            </p>
+          )}
+
+          {hasMore && (
+            <button
+              type="button"
+              className="mt-1 px-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-600"
+              onClick={() => {
+                setShowAll(!showAll);
+              }}
+            >
+              {showAll
+                ? "Show less"
+                : `+${props.values.length - visibleCount} more`}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FacetSection;

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

@@ -0,0 +1,102 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface FacetValueRowProps {
+  value: string;
+  displayValue?: string | undefined;
+  count: number;
+  maxCount: number;
+  color?: string | undefined;
+  isActive?: boolean | undefined;
+  onInclude: (value: string) => void;
+  onExclude: (value: string) => void;
+}
+
+const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
+  props: FacetValueRowProps,
+): ReactElement => {
+  const barWidth: number =
+    props.maxCount > 0
+      ? Math.max(4, Math.round((props.count / props.maxCount) * 100))
+      : 0;
+
+  const displayLabel: string = props.displayValue || props.value || "(empty)";
+  const isActive: boolean = props.isActive || false;
+
+  return (
+    <div className="group flex items-center gap-2 py-0.5">
+      <button
+        type="button"
+        className={`flex min-w-0 flex-1 items-center gap-2 rounded px-1.5 py-0.5 text-left transition-colors ${
+          isActive ? "bg-indigo-50 ring-1 ring-indigo-200" : "hover:bg-gray-50"
+        }`}
+        onClick={() => {
+          props.onInclude(props.value);
+        }}
+        title={
+          isActive
+            ? `Remove filter: ${displayLabel}`
+            : `Filter to ${displayLabel}`
+        }
+      >
+        {isActive ? (
+          <span className="flex h-3.5 w-3.5 flex-none items-center justify-center rounded bg-indigo-500">
+            <Icon icon={IconProp.Check} className="h-2.5 w-2.5 text-white" />
+          </span>
+        ) : props.color ? (
+          <span
+            className="h-2.5 w-2.5 flex-none rounded-full"
+            style={{ backgroundColor: props.color }}
+          />
+        ) : (
+          <span className="h-2.5 w-2.5 flex-none rounded-full bg-gray-300" />
+        )}
+        <span
+          className={`min-w-0 truncate text-[12px] ${
+            isActive ? "font-medium text-indigo-700" : "text-gray-700"
+          }`}
+        >
+          {displayLabel}
+        </span>
+      </button>
+
+      <div className="flex items-center gap-1.5">
+        <div className="w-12">
+          <div className="h-1.5 w-full rounded-full bg-gray-100">
+            <div
+              className={`h-1.5 rounded-full transition-all ${isActive ? "opacity-100" : "opacity-70"}`}
+              style={{
+                width: `${barWidth}%`,
+                backgroundColor: isActive
+                  ? "#6366f1"
+                  : props.color || "#9ca3af",
+              }}
+            />
+          </div>
+        </div>
+        <span
+          className={`min-w-[2rem] text-right font-mono text-[10px] tabular-nums ${
+            isActive ? "font-medium text-indigo-600" : "text-gray-400"
+          }`}
+        >
+          {props.count.toLocaleString()}
+        </span>
+      </div>
+
+      <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"
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+          props.onExclude(props.value);
+        }}
+        title={`Exclude ${displayLabel}`}
+      >
+        -
+      </button>
+    </div>
+  );
+};
+
+export default FacetValueRow;