@oneuptime/common 10.0.28 → 10.0.29

package/Server/Services/LogSavedViewService.ts

@@ -0,0 +1,109 @@
+import DatabaseService from "./DatabaseService";
+import Model from "../../Models/DatabaseModels/LogSavedView";
+import CreateBy from "../Types/Database/CreateBy";
+import { OnCreate, OnUpdate } from "../Types/Database/Hooks";
+import UpdateBy from "../Types/Database/UpdateBy";
+import ObjectID from "../../Types/ObjectID";
+import QueryHelper from "../Types/Database/QueryHelper";
+import LIMIT_MAX from "../../Types/Database/LimitMax";
+
+export class Service extends DatabaseService<Model> {
+  public constructor() {
+    super(Model);
+  }
+
+  protected override async onBeforeCreate(
+    createBy: CreateBy<Model>,
+  ): Promise<OnCreate<Model>> {
+    if (createBy.data.isDefault === undefined && createBy.data.projectId) {
+      const existingDefaultView: Model | null = await this.findOneBy({
+        query: {
+          projectId: createBy.data.projectId,
+          isDefault: true,
+        },
+        select: {
+          _id: true,
+        },
+        props: {
+          isRoot: true,
+        },
+      });
+
+      createBy.data.isDefault = !existingDefaultView;
+    }
+
+    if (createBy.data.projectId) {
+      await this.unsetOtherDefaultsIfNeeded({
+        projectId: createBy.data.projectId,
+        isDefault: createBy.data.isDefault || false,
+      });
+    }
+
+    return { createBy, carryForward: null };
+  }
+
+  protected override async onBeforeUpdate(
+    updateBy: UpdateBy<Model>,
+  ): Promise<OnUpdate<Model>> {
+    if (updateBy.data.isDefault !== true) {
+      return { updateBy, carryForward: null };
+    }
+
+    const itemsToUpdate: Array<Model> = await this.findBy({
+      query: updateBy.query,
+      select: {
+        _id: true,
+        projectId: true,
+      },
+      props: {
+        isRoot: true,
+      },
+      limit: LIMIT_MAX,
+      skip: 0,
+    });
+
+    for (const item of itemsToUpdate) {
+      if (item.projectId) {
+        await this.unsetOtherDefaultsIfNeeded({
+          projectId: item.projectId,
+          isDefault: true,
+          excludeIds: item._id ? [item._id] : [],
+        });
+      }
+    }
+
+    return { updateBy, carryForward: null };
+  }
+
+  private async unsetOtherDefaultsIfNeeded(data: {
+    projectId?: ObjectID;
+    isDefault?: boolean;
+    excludeIds?: Array<string>;
+  }): Promise<void> {
+    if (!data.projectId || !data.isDefault) {
+      return;
+    }
+
+    await this.updateBy({
+      query: {
+        projectId: data.projectId,
+        isDefault: true,
+        ...(data.excludeIds && data.excludeIds.length > 0
+          ? {
+              _id: QueryHelper.notInOrNull(data.excludeIds),
+            }
+          : {}),
+      },
+      data: {
+        isDefault: false,
+      },
+      props: {
+        isRoot: true,
+      },
+      limit: LIMIT_MAX,
+      skip: 0,
+    });
+  }
+}
+
+export default new Service();

package/Server/Utils/Express.ts

@@ -21,6 +21,7 @@ export type NextFunction = express.NextFunction;
 export const ExpressStatic: GenericFunction = express.static;
 export const ExpressJson: GenericFunction = express.json;
 export const ExpressUrlEncoded: GenericFunction = express.urlencoded;
+export const ExpressRaw: GenericFunction = express.raw;
 
 export type ProbeRequest = {
   id: ObjectID;

package/Server/Utils/OpenAPI.ts

@@ -257,6 +257,20 @@ export default class OpenAPIUtil {
                 query: { $ref: `#/components/schemas/${querySchemaName}` },
                 select: { $ref: `#/components/schemas/${selectSchemaName}` },
                 sort: { $ref: `#/components/schemas/${sortSchemaName}` },
+                limit: {
+                  type: "number",
+                  description:
+                    "Maximum number of items to return. Defaults to 10.",
+                  default: 10,
+                  minimum: 1,
+                },
+                skip: {
+                  type: "number",
+                  description:
+                    "Number of items to skip for pagination. Defaults to 0.",
+                  default: 0,
+                  minimum: 0,
+                },
               },
             },
           },
@@ -891,6 +905,20 @@ export default class OpenAPIUtil {
                 select: { $ref: `#/components/schemas/${selectSchemaName}` },
                 sort: { $ref: `#/components/schemas/${sortSchemaName}` },
                 groupBy: { $ref: `#/components/schemas/${groupBySchemaName}` },
+                limit: {
+                  type: "number",
+                  description:
+                    "Maximum number of items to return. Defaults to 10.",
+                  default: 10,
+                  minimum: 1,
+                },
+                skip: {
+                  type: "number",
+                  description:
+                    "Number of items to skip for pagination. Defaults to 0.",
+                  default: 0,
+                  minimum: 0,
+                },
               },
             },
           },

package/Server/Utils/StartServer.ts

@@ -11,6 +11,7 @@ import "./Environment";
 import Express, {
   ExpressApplication,
   ExpressJson,
+  ExpressRaw,
   ExpressRequest,
   ExpressResponse,
   ExpressStatic,
@@ -114,8 +115,26 @@ app.use((req: ExpressRequest, _res: ExpressResponse, next: NextFunction) => {
   next();
 });
 
+/*
+ * Parse protobuf (binary) bodies for OTLP ingestion before JSON/gzip middleware.
+ * The .NET OpenTelemetry SDK (and others) send telemetry data as application/x-protobuf.
+ * Without this, express.json() skips protobuf requests and req.body remains undefined.
+ */
+const protobufBodyParserMiddleware: RequestHandler = ExpressRaw({
+  type: ["application/x-protobuf", "application/protobuf"],
+  limit: "50mb",
+});
+
 app.use((req: OneUptimeRequest, res: ExpressResponse, next: NextFunction) => {
-  if (req.headers["content-encoding"] === "gzip") {
+  const contentType: string | undefined = req.headers["content-type"];
+
+  if (
+    contentType &&
+    (contentType.includes("application/x-protobuf") ||
+      contentType.includes("application/protobuf"))
+  ) {
+    protobufBodyParserMiddleware(req, res, next);
+  } else if (req.headers["content-encoding"] === "gzip") {
     const buffers: any = [];
 
     req.on("data", (chunk: any) => {

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -42,9 +42,16 @@ import {
   HistogramBucket,
   FacetData,
   ActiveFilter,
+  CORE_LOGS_TABLE_COLUMN_OPTIONS,
+  DEFAULT_LOGS_TABLE_COLUMNS,
+  getLogsAttributeColumnId,
+  LogsSavedViewOption,
+  LogsTableColumnOption,
+  normalizeLogsTableColumns,
 } from "./types";
 import { queryStringToFilter } from "../../../Types/Log/LogQueryToFilter";
 import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
 
 export interface ComponentProps {
   logs: Array<Log>;
@@ -79,6 +86,15 @@ export interface ComponentProps {
   onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
   timeRange?: RangeStartAndEndDateTime | undefined;
   onTimeRangeChange?: ((value: RangeStartAndEndDateTime) => void) | undefined;
+  selectedColumns?: Array<string> | undefined;
+  onSelectedColumnsChange?: ((columns: Array<string>) => void) | undefined;
+  savedViews?: Array<LogsSavedViewOption> | undefined;
+  selectedSavedViewId?: string | null;
+  onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  onCreateSavedView?: (() => void) | undefined;
+  onEditSavedView?: ((viewId: string) => void) | undefined;
+  onDeleteSavedView?: ((viewId: string) => void) | undefined;
+  onUpdateCurrentSavedView?: (() => void) | undefined;
 }
 
 export type LogsSortField = LogsTableSortField;
@@ -99,6 +115,32 @@ const severityWeight: Record<string, number> = {
   trace: 1,
 };
 
+function getEmptyMessageWithTimeRange(
+  timeRange: RangeStartAndEndDateTime | undefined,
+): string {
+  if (!timeRange) {
+    return "Adjust filters or check again later.";
+  }
+
+  if (timeRange.range === TimeRange.CUSTOM && timeRange.startAndEndDate) {
+    const startDate: Date = timeRange.startAndEndDate.startValue;
+    const endDate: Date = timeRange.startAndEndDate.endValue;
+    const fmt: (d: Date) => string = (d: Date): string => {
+      return d.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    };
+
+    return `Time range: ${fmt(startDate)} – ${fmt(endDate)}. Try adjusting filters or expanding the time range.`;
+  }
+
+  const rangeLabel: string = timeRange.range.toLowerCase();
+  return `Time range: ${rangeLabel}. Try adjusting filters or expanding the time range.`;
+}
+
 const getSeverityWeight: (severity: string | undefined) => number = (
   severity: string | undefined,
 ): number => {
@@ -151,6 +193,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [localSortOrder, setLocalSortOrder] = useState<SortOrder>(
     SortOrder.Descending,
   );
+  const [internalSelectedColumns, setInternalSelectedColumns] = useState<
+    Array<string>
+  >(DEFAULT_LOGS_TABLE_COLUMNS);
 
   useEffect(() => {
     setFilterData(props.filterData);
@@ -174,6 +219,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
   }, [props.pageSize]);
 
+  useEffect(() => {
+    if (props.selectedColumns) {
+      setInternalSelectedColumns(
+        normalizeLogsTableColumns(props.selectedColumns),
+      );
+    }
+  }, [props.selectedColumns]);
+
   const currentPage: number = props.page ?? internalPage;
   const pageSize: number = props.pageSize ?? internalPageSize;
 
@@ -519,6 +572,26 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     };
   }, [props.onFieldValueSelect, serviceMap]);
 
+  const selectedColumns: Array<string> = props.selectedColumns
+    ? normalizeLogsTableColumns(props.selectedColumns)
+    : internalSelectedColumns;
+
+  const availableColumns: Array<LogsTableColumnOption> = useMemo(() => {
+    const attributeColumns: Array<LogsTableColumnOption> = [...logAttributes]
+      .sort((left: string, right: string) => {
+        return left.localeCompare(right);
+      })
+      .map((attributeKey: string): LogsTableColumnOption => {
+        return {
+          id: getLogsAttributeColumnId(attributeKey),
+          label: attributeKey,
+          attributeKey,
+        };
+      });
+
+    return [...CORE_LOGS_TABLE_COLUMN_OPTIONS, ...attributeColumns];
+  }, [logAttributes]);
+
   if (isPageLoading) {
     return <PageLoader isVisible={true} />;
   }
@@ -531,6 +604,29 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     resultCount: totalItems,
     currentPage,
     totalPages,
+    savedViews: props.savedViews,
+    selectedSavedViewId: props.selectedSavedViewId,
+    onSavedViewSelect: props.onSavedViewSelect,
+    onCreateSavedView: props.onCreateSavedView,
+    onEditSavedView: props.onEditSavedView,
+    onDeleteSavedView: props.onDeleteSavedView,
+    onUpdateCurrentSavedView: props.onUpdateCurrentSavedView,
+    ...(props.onSelectedColumnsChange || props.selectedColumns
+      ? {
+          availableColumns,
+          selectedColumns,
+          onSelectedColumnsChange: (columns: Array<string>) => {
+            const nextColumns: Array<string> =
+              normalizeLogsTableColumns(columns);
+
+            if (!props.selectedColumns) {
+              setInternalSelectedColumns(nextColumns);
+            }
+
+            props.onSelectedColumnsChange?.(nextColumns);
+          },
+        }
+      : {}),
     ...(props.liveOptions ? { liveOptions: props.liveOptions } : {}),
     ...(props.timeRange && props.onTimeRangeChange
       ? {
@@ -587,6 +683,9 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             onIncludeFilter={props.onFacetInclude || (() => {})}
             onExcludeFilter={props.onFacetExclude || (() => {})}
             activeFilters={props.activeFilters}
+            savedViews={props.savedViews}
+            selectedSavedViewId={props.selectedSavedViewId}
+            onSavedViewSelect={props.onSavedViewSelect}
           />
         )}
 
@@ -602,7 +701,10 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               logs={displayedLogs}
               serviceMap={serviceMap}
               isLoading={props.isLoading}
-              emptyMessage={props.noLogsMessage}
+              emptyMessage={
+                props.noLogsMessage ||
+                getEmptyMessageWithTimeRange(props.timeRange)
+              }
               onRowClick={(_log: Log, rowId: string) => {
                 setSelectedLogId((currentSelected: string | null) => {
                   if (currentSelected === rowId) {
@@ -616,6 +718,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               sortField={sortField}
               sortOrder={sortOrder}
               onSortChange={handleSortChange}
+              selectedColumns={selectedColumns}
               renderExpandedContent={(log: Log) => {
                 return (
                   <LogDetailsPanel

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

@@ -0,0 +1,270 @@
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  ReactElement,
+  useMemo,
+  useState,
+} from "react";
+import {
+  DEFAULT_LOGS_TABLE_COLUMNS,
+  LogsTableColumnOption,
+  normalizeLogsTableColumns,
+} from "../types";
+import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
+
+export interface ColumnSelectorProps {
+  availableColumns: Array<LogsTableColumnOption>;
+  selectedColumns: Array<string>;
+  onChange: (columns: Array<string>) => void;
+}
+
+const triggerButtonClassName: string =
+  "inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50";
+
+const actionButtonClassName: string =
+  "rounded-md px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700";
+
+const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
+  props: ColumnSelectorProps,
+): ReactElement => {
+  const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentOutsideClick(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const selectedColumnIds: Array<string> = useMemo(() => {
+    return normalizeLogsTableColumns(props.selectedColumns);
+  }, [props.selectedColumns]);
+
+  const availableColumnsById: Map<string, LogsTableColumnOption> =
+    useMemo(() => {
+      return new Map(
+        props.availableColumns.map((column: LogsTableColumnOption) => {
+          return [column.id, column] as [string, LogsTableColumnOption];
+        }),
+      );
+    }, [props.availableColumns]);
+
+  const selectedColumns: Array<LogsTableColumnOption> = useMemo(() => {
+    return selectedColumnIds.map((columnId: string): LogsTableColumnOption => {
+      return (
+        availableColumnsById.get(columnId) || {
+          id: columnId,
+          label: columnId,
+        }
+      );
+    });
+  }, [availableColumnsById, selectedColumnIds]);
+
+  const availableColumns: Array<LogsTableColumnOption> = useMemo(() => {
+    const normalizedSearchQuery: string = searchQuery.trim().toLowerCase();
+
+    return props.availableColumns.filter((column: LogsTableColumnOption) => {
+      if (selectedColumnIds.includes(column.id)) {
+        return false;
+      }
+
+      if (!normalizedSearchQuery) {
+        return true;
+      }
+
+      return column.label.toLowerCase().includes(normalizedSearchQuery);
+    });
+  }, [props.availableColumns, searchQuery, selectedColumnIds]);
+
+  const updateColumns: (columns: Array<string>) => void = (
+    columns: Array<string>,
+  ): void => {
+    props.onChange(normalizeLogsTableColumns(columns));
+  };
+
+  const moveColumn: (columnId: string, direction: -1 | 1) => void = (
+    columnId: string,
+    direction: -1 | 1,
+  ): void => {
+    const currentIndex: number = selectedColumnIds.indexOf(columnId);
+
+    if (currentIndex === -1) {
+      return;
+    }
+
+    const nextIndex: number = currentIndex + direction;
+
+    if (nextIndex < 0 || nextIndex >= selectedColumnIds.length) {
+      return;
+    }
+
+    const nextColumns: Array<string> = [...selectedColumnIds];
+    const currentColumn: string = nextColumns[currentIndex] as string;
+    nextColumns[currentIndex] = nextColumns[nextIndex] as string;
+    nextColumns[nextIndex] = currentColumn;
+
+    updateColumns(nextColumns);
+  };
+
+  const removeColumn: (columnId: string) => void = (columnId: string): void => {
+    if (selectedColumnIds.length <= 1) {
+      return;
+    }
+
+    updateColumns(
+      selectedColumnIds.filter((selectedColumnId: string) => {
+        return selectedColumnId !== columnId;
+      }),
+    );
+  };
+
+  const addColumn: (columnId: string) => void = (columnId: string): void => {
+    updateColumns([...selectedColumnIds, columnId]);
+  };
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        className={triggerButtonClassName}
+        onClick={() => {
+          setIsComponentVisible(!isComponentVisible);
+        }}
+        aria-haspopup="dialog"
+        aria-expanded={isComponentVisible}
+      >
+        <span>Columns</span>
+        <span className="text-xs text-gray-400">
+          {selectedColumnIds.length}
+        </span>
+      </button>
+
+      {isComponentVisible && (
+        <div className="absolute right-0 z-20 mt-2 w-96 rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h3 className="text-sm font-semibold text-gray-900">Columns</h3>
+              <p className="text-xs text-gray-500">
+                Add, remove, and reorder visible columns.
+              </p>
+            </div>
+
+            <button
+              type="button"
+              className="text-xs font-medium text-gray-500 transition-colors hover:text-gray-700"
+              onClick={() => {
+                updateColumns(DEFAULT_LOGS_TABLE_COLUMNS);
+              }}
+            >
+              Reset
+            </button>
+          </div>
+
+          <div className="mt-4">
+            <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+              Selected
+            </p>
+
+            <div className="space-y-2">
+              {selectedColumns.map(
+                (column: LogsTableColumnOption, index: number) => {
+                  const isFirst: boolean = index === 0;
+                  const isLast: boolean = index === selectedColumns.length - 1;
+
+                  return (
+                    <div
+                      key={column.id}
+                      className="flex items-center justify-between rounded-md border border-gray-200 px-3 py-2"
+                    >
+                      <span className="min-w-0 truncate text-sm text-gray-700">
+                        {column.label}
+                      </span>
+
+                      <div className="flex items-center gap-1">
+                        <button
+                          type="button"
+                          className={actionButtonClassName}
+                          onClick={() => {
+                            moveColumn(column.id, -1);
+                          }}
+                          disabled={isFirst}
+                        >
+                          Up
+                        </button>
+                        <button
+                          type="button"
+                          className={actionButtonClassName}
+                          onClick={() => {
+                            moveColumn(column.id, 1);
+                          }}
+                          disabled={isLast}
+                        >
+                          Down
+                        </button>
+                        <button
+                          type="button"
+                          className={actionButtonClassName}
+                          onClick={() => {
+                            removeColumn(column.id);
+                          }}
+                          disabled={selectedColumns.length <= 1}
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+                  );
+                },
+              )}
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+                Available
+              </p>
+
+              <input
+                value={searchQuery}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setSearchQuery(event.target.value);
+                }}
+                placeholder="Search columns"
+                className="w-40 rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-600 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100"
+              />
+            </div>
+
+            <div className="max-h-72 space-y-2 overflow-y-auto pr-1">
+              {availableColumns.length === 0 && (
+                <div className="rounded-md border border-dashed border-gray-200 px-3 py-4 text-sm text-gray-500">
+                  No matching columns available.
+                </div>
+              )}
+
+              {availableColumns.map((column: LogsTableColumnOption) => {
+                return (
+                  <div
+                    key={column.id}
+                    className="flex items-center justify-between rounded-md border border-gray-100 px-3 py-2"
+                  >
+                    <span className="min-w-0 truncate text-sm text-gray-700">
+                      {column.label}
+                    </span>
+
+                    <button
+                      type="button"
+                      className={actionButtonClassName}
+                      onClick={() => {
+                        addColumn(column.id);
+                      }}
+                    >
+                      Add
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ColumnSelector;

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);