@oneuptime/common 10.0.28 → 10.0.30

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>

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

@@ -1,7 +1,14 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import LiveLogsToggle from "./LiveLogsToggle";
 import LogTimeRangePicker from "./LogTimeRangePicker";
-import { LiveLogsOptions } from "../types";
+import ColumnSelector from "./ColumnSelector";
+import SavedViewsDropdown from "./SavedViewsDropdown";
+import {
+  LiveLogsOptions,
+  LogsSavedViewOption,
+  LogsTableColumnOption,
+  LogsViewMode,
+} from "../types";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
 
 export interface LogsViewerToolbarProps {
@@ -12,6 +19,18 @@ export interface LogsViewerToolbarProps {
   liveOptions?: LiveLogsOptions;
   timeRange?: RangeStartAndEndDateTime;
   onTimeRangeChange?: (value: RangeStartAndEndDateTime) => void;
+  onCreateSavedView?: (() => void) | undefined;
+  savedViews?: Array<LogsSavedViewOption> | undefined;
+  selectedSavedViewId?: string | null | undefined;
+  onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  onEditSavedView?: ((viewId: string) => void) | undefined;
+  onDeleteSavedView?: ((viewId: string) => void) | undefined;
+  onUpdateCurrentSavedView?: (() => void) | undefined;
+  availableColumns?: Array<LogsTableColumnOption> | undefined;
+  selectedColumns?: Array<string> | undefined;
+  onSelectedColumnsChange?: ((columns: Array<string>) => void) | undefined;
+  viewMode?: LogsViewMode | undefined;
+  onViewModeChange?: ((mode: LogsViewMode) => void) | undefined;
 }
 
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
@@ -26,19 +45,102 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
     <div
       className={`flex items-center justify-between gap-3 ${props.className || ""}`}
     >
-      <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
-        <span className="font-medium text-gray-700">
-          {props.resultCount.toLocaleString()} result
-          {props.resultCount === 1 ? "" : "s"}
-        </span>
-        {hasPaginationSummary && (
-          <span className="text-gray-400">
-            Page {currentPage} of {totalPages}
-          </span>
+      {/* Left group: View management + stats */}
+      <div className="flex flex-wrap items-center gap-3">
+        {props.viewMode && props.onViewModeChange && (
+          <div className="inline-flex rounded-md shadow-sm" role="group">
+            <button
+              type="button"
+              className={`inline-flex items-center gap-1.5 rounded-l-md border px-3 py-1.5 text-xs font-medium transition-colors ${
+                props.viewMode === "list"
+                  ? "border-indigo-500 bg-indigo-50 text-indigo-700"
+                  : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+              }`}
+              onClick={() => {
+                props.onViewModeChange!("list");
+              }}
+            >
+              <svg
+                className="h-3.5 w-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"
+                />
+              </svg>
+              List
+            </button>
+            <button
+              type="button"
+              className={`inline-flex items-center gap-1.5 rounded-r-md border px-3 py-1.5 text-xs font-medium transition-colors ${
+                props.viewMode === "analytics"
+                  ? "border-indigo-500 bg-indigo-50 text-indigo-700"
+                  : "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+              }`}
+              onClick={() => {
+                props.onViewModeChange!("analytics");
+              }}
+            >
+              <svg
+                className="h-3.5 w-3.5"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+                />
+              </svg>
+              Analytics
+            </button>
+          </div>
+        )}
+
+        {props.savedViews && props.onSavedViewSelect && (
+          <SavedViewsDropdown
+            savedViews={props.savedViews}
+            selectedSavedViewId={props.selectedSavedViewId}
+            onSelect={props.onSavedViewSelect}
+            onCreate={props.onCreateSavedView}
+            onEdit={props.onEditSavedView}
+            onDelete={props.onDeleteSavedView}
+            onUpdateCurrent={props.onUpdateCurrentSavedView}
+          />
         )}
+
+        <div className="flex items-center gap-2 text-xs text-gray-500">
+          <span className="font-medium text-gray-700">
+            {props.resultCount.toLocaleString()} result
+            {props.resultCount === 1 ? "" : "s"}
+          </span>
+          {hasPaginationSummary && (
+            <span className="text-gray-400">
+              Page {currentPage} of {totalPages}
+            </span>
+          )}
+        </div>
       </div>
 
-      <div className="flex items-center gap-3">
+      {/* Right group: Display controls */}
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        {props.availableColumns &&
+          props.selectedColumns &&
+          props.onSelectedColumnsChange && (
+            <ColumnSelector
+              availableColumns={props.availableColumns}
+              selectedColumns={props.selectedColumns}
+              onChange={props.onSelectedColumnsChange}
+            />
+          )}
+
         {props.timeRange && props.onTimeRangeChange && (
           <LogTimeRangePicker
             value={props.timeRange}