@oneuptime/common 10.0.27 → 10.0.29

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

@@ -1,4 +1,9 @@
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useMemo,
+} from "react";
 import { FacetValue } from "../types";
 import FacetValueRow from "./FacetValueRow";
 import Icon from "../../Icon/Icon";
@@ -17,21 +22,40 @@ export interface FacetSectionProps {
 }
 
 const DEFAULT_VISIBLE_COUNT: number = 5;
+const SEARCH_THRESHOLD: number = 6;
 
 const FacetSection: FunctionComponent<FacetSectionProps> = (
   props: FacetSectionProps,
 ): ReactElement => {
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [showAll, setShowAll] = useState<boolean>(false);
+  const [searchText, setSearchText] = useState<string>("");
+
+  const showSearch: boolean = props.values.length >= SEARCH_THRESHOLD;
+
+  const filteredValues: Array<FacetValue> = useMemo(() => {
+    if (!searchText.trim()) {
+      return props.values;
+    }
+    const query: string = searchText.toLowerCase().trim();
+    return props.values.filter((facet: FacetValue) => {
+      const displayName: string =
+        props.valueDisplayMap?.[facet.value] ?? facet.value;
+      return displayName.toLowerCase().includes(query);
+    });
+  }, [props.values, props.valueDisplayMap, searchText]);
 
   const visibleCount: number =
     props.initialVisibleCount ?? DEFAULT_VISIBLE_COUNT;
 
-  const displayedValues: Array<FacetValue> = showAll
-    ? props.values
-    : props.values.slice(0, visibleCount);
+  const displayedValues: Array<FacetValue> = searchText.trim()
+    ? filteredValues
+    : showAll
+      ? filteredValues
+      : filteredValues.slice(0, visibleCount);
 
-  const hasMore: boolean = props.values.length > visibleCount;
+  const hasMore: boolean =
+    !searchText.trim() && filteredValues.length > visibleCount;
 
   const maxCount: number =
     props.values.length > 0
@@ -71,6 +95,20 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
 
       {isExpanded && (
         <div className="mt-1 px-1">
+          {showSearch && (
+            <div className="mb-1 px-1">
+              <input
+                type="text"
+                placeholder={`Search ${props.title.toLowerCase()}...`}
+                value={searchText}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setSearchText(e.target.value);
+                }}
+                className="w-full rounded border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200"
+              />
+            </div>
+          )}
+
           {displayedValues.map((facet: FacetValue) => {
             return (
               <FacetValueRow
@@ -91,9 +129,9 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
             );
           })}
 
-          {props.values.length === 0 && (
+          {displayedValues.length === 0 && (
             <p className="px-1 py-2 text-[11px] text-gray-400">
-              No values found
+              {searchText.trim() ? "No matches found" : "No values found"}
             </p>
           )}
 

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-lg border px-3 py-1.5 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-emerald-200";
+    "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-emerald-200";
   const activeClasses: string = isLive
     ? "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";
+    : "border-gray-200 bg-white text-gray-700 hover:bg-gray-50";
   const disabledClasses: string = isDisabled
     ? "cursor-not-allowed opacity-50"
     : "cursor-pointer";
@@ -36,7 +36,7 @@ const LiveLogsToggle: FunctionComponent<LiveLogsToggleProps> = (
           isLive ? "bg-emerald-500 animate-pulse" : "bg-gray-300"
         }`}
       />
-      <span className="font-semibold">Live</span>
+      <span>Live</span>
     </button>
   );
 

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

@@ -119,10 +119,10 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
     <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 ${
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm 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"
+            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
         }`}
         onClick={() => {
           setIsOpen(!isOpen);

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

@@ -1,5 +1,10 @@
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
-import { FacetData, FacetValue, ActiveFilter } from "../types";
+import {
+  FacetData,
+  FacetValue,
+  ActiveFilter,
+  LogsSavedViewOption,
+} from "../types";
 import FacetSection from "./FacetSection";
 import Service from "../../../../Models/DatabaseModels/Service";
 import Dictionary from "../../../../Types/Dictionary";
@@ -14,6 +19,9 @@ export interface LogsFacetSidebarProps {
   onIncludeFilter: (facetKey: string, value: string) => void;
   onExcludeFilter: (facetKey: string, value: string) => void;
   activeFilters?: Array<ActiveFilter> | undefined;
+  savedViews?: Array<LogsSavedViewOption> | undefined;
+  selectedSavedViewId?: string | null | undefined;
+  onSavedViewSelect?: ((viewId: string) => void) | undefined;
 }
 
 const SEVERITY_ORDER: Array<string> = [
@@ -137,6 +145,43 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
       )}
 
       <div className="flex-1 overflow-y-auto">
+        {props.savedViews && props.savedViews.length > 0 && (
+          <div className="border-b border-gray-100 px-3 py-3">
+            <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+              Saved Views
+            </p>
+
+            <div className="space-y-1.5">
+              {props.savedViews.map((view: LogsSavedViewOption) => {
+                const isSelected: boolean =
+                  view.id === props.selectedSavedViewId;
+
+                return (
+                  <button
+                    key={view.id}
+                    type="button"
+                    className={`flex w-full items-center justify-between rounded-md px-2.5 py-2 text-left text-sm transition-colors ${
+                      isSelected
+                        ? "bg-indigo-50 text-indigo-700"
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-800"
+                    }`}
+                    onClick={() => {
+                      props.onSavedViewSelect?.(view.id);
+                    }}
+                  >
+                    <span className="truncate">{view.name}</span>
+                    {view.isDefault && (
+                      <span className="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700">
+                        Default
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
         {facetKeys.map((key: string) => {
           const values: Array<FacetValue> = props.facetData[key] || [];
 

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

@@ -25,8 +25,8 @@ const LogsFilterCard: FunctionComponent<LogsFilterCardProps> = (
   ];
 
   return (
-    <div className="flex items-start gap-3">
-      <div className="min-w-0 flex-1">
+    <div className="flex flex-col gap-3">
+      <div>
         <LogSearchBar
           value={props.searchQuery}
           onChange={props.onSearchQueryChange}
@@ -36,7 +36,7 @@ const LogsFilterCard: FunctionComponent<LogsFilterCardProps> = (
           onFieldValueSelect={props.onFieldValueSelect}
         />
       </div>
-      <div className="flex-none pt-0.5">{props.toolbar}</div>
+      <div>{props.toolbar}</div>
     </div>
   );
 };

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

@@ -10,6 +10,11 @@ import { getSeverityTheme, SeverityTheme } from "./severityTheme";
 import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import {
+  getLogsAttributeKeyFromColumnId,
+  isLogsAttributeColumnId,
+  normalizeLogsTableColumns,
+} from "../types";
 
 export interface LogsTableProps {
   logs: Array<Log>;
@@ -22,6 +27,7 @@ export interface LogsTableProps {
   sortField?: LogsTableSortField | undefined;
   sortOrder?: SortOrder | undefined;
   onSortChange?: (field: LogsTableSortField) => void;
+  selectedColumns?: Array<string> | undefined;
 }
 
 export const resolveLogIdentifier: (log: Log, index: number) => string = (
@@ -53,12 +59,39 @@ export const resolveLogIdentifier: (log: Log, index: number) => string = (
 
 export type LogsTableSortField = "time" | "severityText";
 
+const stringifyLogValue: (value: unknown) => string = (
+  value: unknown,
+): string => {
+  if (value === undefined || value === null) {
+    return "-";
+  }
+
+  if (typeof value === "string") {
+    return value || "-";
+  }
+
+  if (typeof value === "number" || typeof value === "boolean") {
+    return value.toString();
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+
 const LogsTable: FunctionComponent<LogsTableProps> = (
   props: LogsTableProps,
 ): ReactElement => {
   const showEmptyState: boolean = !props.isLoading && props.logs.length === 0;
   const activeSortField: LogsTableSortField | undefined = props.sortField;
   const activeSortOrder: SortOrder = props.sortOrder || SortOrder.Descending;
+  const selectedColumns: Array<string> = normalizeLogsTableColumns(
+    props.selectedColumns,
+  );
+  const showTraceColumn: boolean = selectedColumns.includes("traceId");
+  const showSpanColumn: boolean = selectedColumns.includes("spanId");
 
   const resolveSortIcon: (field: LogsTableSortField) => IconProp = (
     field: LogsTableSortField,
@@ -83,68 +116,117 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
     return `${base} text-gray-300`;
   };
 
+  const getHeaderCell: (columnId: string) => ReactElement = (
+    columnId: string,
+  ): ReactElement => {
+    if (columnId === "time") {
+      return (
+        <th scope="col" className="px-4 py-2.5" key={columnId}>
+          <button
+            type="button"
+            className={`flex items-center gap-2 text-left font-semibold tracking-wider text-gray-500 transition-colors hover:text-gray-700 focus:outline-none ${
+              activeSortField === "time" ? "text-gray-700" : ""
+            }`}
+            onClick={() => {
+              props.onSortChange?.("time");
+            }}
+            aria-sort={
+              activeSortField === "time"
+                ? activeSortOrder === SortOrder.Descending
+                  ? "descending"
+                  : "ascending"
+                : "none"
+            }
+          >
+            <span>Time</span>
+            <Icon
+              icon={resolveSortIcon("time")}
+              className={resolveSortIconClass("time")}
+              aria-hidden="true"
+            />
+          </button>
+        </th>
+      );
+    }
+
+    if (columnId === "severity") {
+      return (
+        <th scope="col" className="px-4 py-2.5" key={columnId}>
+          <button
+            type="button"
+            className={`flex items-center gap-2 text-left font-semibold tracking-wider text-gray-500 transition-colors hover:text-gray-700 focus:outline-none ${
+              activeSortField === "severityText" ? "text-gray-700" : ""
+            }`}
+            onClick={() => {
+              props.onSortChange?.("severityText");
+            }}
+            aria-sort={
+              activeSortField === "severityText"
+                ? activeSortOrder === SortOrder.Descending
+                  ? "descending"
+                  : "ascending"
+                : "none"
+            }
+          >
+            <span>Severity</span>
+            <Icon
+              icon={resolveSortIcon("severityText")}
+              className={resolveSortIconClass("severityText")}
+              aria-hidden="true"
+            />
+          </button>
+        </th>
+      );
+    }
+
+    if (columnId === "service") {
+      return (
+        <th scope="col" className="px-4 py-2.5" key={columnId}>
+          Service
+        </th>
+      );
+    }
+
+    if (columnId === "message") {
+      return (
+        <th scope="col" className="px-4 py-2.5" key={columnId}>
+          Message
+        </th>
+      );
+    }
+
+    if (columnId === "traceId") {
+      return (
+        <th scope="col" className="px-4 py-2.5" key={columnId}>
+          Trace ID
+        </th>
+      );
+    }
+
+    if (columnId === "spanId") {
+      return (
+        <th scope="col" className="px-4 py-2.5" key={columnId}>
+          Span ID
+        </th>
+      );
+    }
+
+    return (
+      <th scope="col" className="px-4 py-2.5" key={columnId}>
+        {getLogsAttributeKeyFromColumnId(columnId) || columnId}
+      </th>
+    );
+  };
+
   return (
     <div className="relative">
       <div className="overflow-x-auto bg-white">
         <table className="min-w-full">
           <thead className="bg-gray-50/80">
             <tr className="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">
-              <th scope="col" className="px-4 py-2.5">
-                <button
-                  type="button"
-                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-gray-500 transition-colors hover:text-gray-700 focus:outline-none ${
-                    activeSortField === "time" ? "text-gray-700" : ""
-                  }`}
-                  onClick={() => {
-                    props.onSortChange?.("time");
-                  }}
-                  aria-sort={
-                    activeSortField === "time"
-                      ? activeSortOrder === SortOrder.Descending
-                        ? "descending"
-                        : "ascending"
-                      : "none"
-                  }
-                >
-                  <span>Time</span>
-                  <Icon
-                    icon={resolveSortIcon("time")}
-                    className={resolveSortIconClass("time")}
-                    aria-hidden="true"
-                  />
-                </button>
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                <span>Service</span>
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                <button
-                  type="button"
-                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-gray-500 transition-colors hover:text-gray-700 focus:outline-none ${
-                    activeSortField === "severityText" ? "text-gray-700" : ""
-                  }`}
-                  onClick={() => {
-                    props.onSortChange?.("severityText");
-                  }}
-                  aria-sort={
-                    activeSortField === "severityText"
-                      ? activeSortOrder === SortOrder.Descending
-                        ? "descending"
-                        : "ascending"
-                      : "none"
-                  }
-                >
-                  <span>Severity</span>
-                  <Icon
-                    icon={resolveSortIcon("severityText")}
-                    className={resolveSortIconClass("severityText")}
-                    aria-hidden="true"
-                  />
-                </button>
-              </th>
-              <th scope="col" className="px-4 py-2.5">
-                Message
-              </th>
+              {selectedColumns.map((columnId: string) => {
+                return getHeaderCell(columnId);
+              })}
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-100">
@@ -181,59 +263,162 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                     aria-selected={isSelected}
                     aria-expanded={isSelected}
                   >
-                    <td className="whitespace-nowrap px-4 py-2 text-[13px] font-mono text-gray-600">
-                      {log.time
-                        ? OneUptimeDate.getDateAsUserFriendlyFormattedString(
-                            log.time,
-                          )
-                        : "-"}
-                    </td>
-                    <td className="px-4 py-2">
-                      <div className="flex items-center gap-3 text-sm text-gray-700">
-                        <span
-                          className="h-2.5 w-2.5 flex-none rounded-full shadow-sm"
-                          style={{ backgroundColor: serviceColor }}
-                          aria-hidden="true"
-                        />
-                        <span className="truncate" title={serviceName}>
-                          {serviceName}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-4 py-2">
-                      <SeverityBadge severity={log.severityText} />
-                    </td>
-                    <td className="px-4 py-2">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="flex min-w-0 flex-1 flex-col gap-1">
-                          <p
-                            className="whitespace-pre-wrap break-words text-sm text-gray-800"
-                            title={message}
+                    {selectedColumns.map((columnId: string) => {
+                      if (columnId === "time") {
+                        return (
+                          <td
+                            className="whitespace-nowrap px-4 py-2 text-[13px] font-mono text-gray-600"
+                            key={columnId}
                           >
-                            {message || "-"}
-                          </p>
-                          {(traceId || spanId) && (
-                            <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-gray-400">
-                              {traceId && <span>Trace: {traceId}</span>}
-                              {spanId && <span>Span: {spanId}</span>}
+                            {log.time
+                              ? OneUptimeDate.getDateAsUserFriendlyFormattedString(
+                                  log.time,
+                                )
+                              : "-"}
+                          </td>
+                        );
+                      }
+
+                      if (columnId === "service") {
+                        return (
+                          <td className="px-4 py-2" key={columnId}>
+                            <div className="flex items-center gap-3 text-sm text-gray-700">
+                              <span
+                                className="h-2.5 w-2.5 flex-none rounded-full shadow-sm"
+                                style={{ backgroundColor: serviceColor }}
+                                aria-hidden="true"
+                              />
+                              <span className="truncate" title={serviceName}>
+                                {serviceName}
+                              </span>
+                            </div>
+                          </td>
+                        );
+                      }
+
+                      if (columnId === "severity") {
+                        return (
+                          <td className="px-4 py-2" key={columnId}>
+                            <SeverityBadge severity={log.severityText} />
+                          </td>
+                        );
+                      }
+
+                      if (columnId === "message") {
+                        return (
+                          <td className="px-4 py-2" key={columnId}>
+                            <div className="flex items-start justify-between gap-3">
+                              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                                <p
+                                  className="whitespace-pre-wrap break-words text-sm text-gray-800"
+                                  title={message}
+                                >
+                                  {message || "-"}
+                                </p>
+                                {((traceId && !showTraceColumn) ||
+                                  (spanId && !showSpanColumn)) && (
+                                  <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-gray-400">
+                                    {traceId && !showTraceColumn && (
+                                      <span>Trace: {traceId}</span>
+                                    )}
+                                    {spanId && !showSpanColumn && (
+                                      <span>Span: {spanId}</span>
+                                    )}
+                                  </div>
+                                )}
+                              </div>
+                              <CopyTextButton
+                                textToBeCopied={message}
+                                size="xs"
+                                variant="ghost"
+                                iconOnly={true}
+                                title="Copy log message"
+                                className="opacity-0 transition-opacity group-hover:opacity-100"
+                              />
                             </div>
-                          )}
-                        </div>
-                        <CopyTextButton
-                          textToBeCopied={message}
-                          size="xs"
-                          variant="ghost"
-                          iconOnly={true}
-                          title="Copy log message"
-                          className="opacity-0 group-hover:opacity-100 transition-opacity"
-                        />
-                      </div>
-                    </td>
+                          </td>
+                        );
+                      }
+
+                      if (columnId === "traceId") {
+                        return (
+                          <td
+                            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>
+                          </td>
+                        );
+                      }
+
+                      if (columnId === "spanId") {
+                        return (
+                          <td
+                            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>
+                          </td>
+                        );
+                      }
+
+                      if (isLogsAttributeColumnId(columnId)) {
+                        const attributeKey: string | null =
+                          getLogsAttributeKeyFromColumnId(columnId);
+                        const attributeValue: unknown =
+                          attributeKey &&
+                          typeof log.attributes === "object" &&
+                          log.attributes
+                            ? (log.attributes as Record<string, unknown>)[
+                                attributeKey
+                              ]
+                            : undefined;
+
+                        const displayValue: string =
+                          stringifyLogValue(attributeValue);
+
+                        return (
+                          <td
+                            className="max-w-xs px-4 py-2 text-sm text-gray-600"
+                            key={columnId}
+                          >
+                            <span
+                              className="block truncate"
+                              title={displayValue}
+                            >
+                              {displayValue}
+                            </span>
+                          </td>
+                        );
+                      }
+
+                      return (
+                        <td
+                          className="px-4 py-2 text-sm text-gray-600"
+                          key={columnId}
+                        >
+                          -
+                        </td>
+                      );
+                    })}
                   </tr>
 
                   {isSelected && props.renderExpandedContent && (
                     <tr className="bg-white">
-                      <td colSpan={4} className="px-6 pb-6 pt-3">
+                      <td
+                        colSpan={selectedColumns.length}
+                        className="px-6 pb-6 pt-3"
+                      >
                         {props.renderExpandedContent(log)}
                       </td>
                     </tr>