@oneuptime/common 8.0.5480 → 8.0.5488

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

@@ -0,0 +1,270 @@
+import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import Log from "../../../../Models/AnalyticsModels/Log";
+import TelemetryService from "../../../../Models/DatabaseModels/TelemetryService";
+import Dictionary from "../../../../Types/Dictionary";
+import OneUptimeDate from "../../../../Types/Date";
+import CopyTextButton from "../../CopyTextButton/CopyTextButton";
+import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+import SeverityBadge from "./SeverityBadge";
+import { getSeverityTheme, SeverityTheme } from "./severityTheme";
+import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface LogsTableProps {
+  logs: Array<Log>;
+  serviceMap: Dictionary<TelemetryService>;
+  isLoading: boolean;
+  emptyMessage?: string | undefined;
+  onRowClick: (log: Log, rowId: string) => void;
+  selectedLogId?: string | null;
+  renderExpandedContent?: (log: Log) => ReactElement | null;
+  sortField?: LogsTableSortField | undefined;
+  sortOrder?: SortOrder | undefined;
+  onSortChange?: (field: LogsTableSortField) => void;
+}
+
+export const resolveLogIdentifier: (log: Log, index: number) => string = (
+  log: Log,
+  index: number,
+): string => {
+  const possibleIds: Array<unknown> = [
+    (log as any).id,
+    (log as any)._id,
+    (log as any)._objectId,
+    log.traceId,
+    log.timeUnixNano,
+  ];
+
+  for (const candidate of possibleIds) {
+    if (!candidate) {
+      continue;
+    }
+
+    try {
+      return candidate.toString();
+    } catch {
+      continue;
+    }
+  }
+
+  return `log-row-${index}`;
+};
+
+export type LogsTableSortField = "time" | "severityText";
+
+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 resolveSortIcon: (field: LogsTableSortField) => IconProp = (
+    field: LogsTableSortField,
+  ): IconProp => {
+    if (activeSortField !== field) {
+      return IconProp.ArrowUpDown;
+    }
+
+    return activeSortOrder === SortOrder.Descending
+      ? IconProp.ChevronDown
+      : IconProp.ChevronUp;
+  };
+
+  const resolveSortIconClass: (field: LogsTableSortField) => string = (
+    field: LogsTableSortField,
+  ): string => {
+    const base: string = "h-3.5 w-3.5 flex-none transition-colors";
+    if (activeSortField === field) {
+      return `${base} text-indigo-300`;
+    }
+
+    return `${base} text-slate-600`;
+  };
+
+  return (
+    <div className="relative">
+      <div className="overflow-x-auto overflow-y-hidden border-b border-slate-900 bg-slate-950">
+        <table className="min-w-full divide-y divide-slate-900/80">
+          <thead className="bg-slate-950">
+            <tr className="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-200">
+              <th scope="col" className="px-4 py-3">
+                <button
+                  type="button"
+                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-slate-300 transition-colors hover:text-slate-100 focus:outline-none ${
+                    activeSortField === "time" ? "text-slate-100" : ""
+                  }`}
+                  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-3">
+                Service
+              </th>
+              <th scope="col" className="px-4 py-3">
+                <button
+                  type="button"
+                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-slate-300 transition-colors hover:text-slate-100 focus:outline-none ${
+                    activeSortField === "severityText" ? "text-slate-100" : ""
+                  }`}
+                  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-3">
+                Message
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-900/70 bg-slate-950">
+            {props.logs.map((log: Log, index: number) => {
+              const rowId: string = resolveLogIdentifier(log, index);
+              const serviceId: string = log.serviceId?.toString() || "";
+              const service: TelemetryService | undefined =
+                props.serviceMap[serviceId];
+              const serviceName: string =
+                service?.name || serviceId || "Unknown";
+              const serviceColor: string =
+                (service?.serviceColor && service?.serviceColor.toString()) ||
+                "#94a3b8";
+
+              const message: string = log.body?.toString() || "";
+              const traceId: string = log.traceId?.toString() || "";
+              const spanId: string = log.spanId?.toString() || "";
+
+              const isSelected: boolean = props.selectedLogId === rowId;
+              const severityTheme: SeverityTheme = getSeverityTheme(
+                log.severityText,
+              );
+
+              return (
+                <Fragment key={rowId}>
+                  <tr
+                    onClick={() => {
+                      props.onRowClick(log, rowId);
+                    }}
+                    className={`group cursor-pointer align-top transition-colors duration-150 hover:bg-slate-900 ${
+                      isSelected
+                        ? "bg-slate-900 ring-1 ring-inset ring-indigo-500/40"
+                        : ""
+                    }`}
+                    aria-selected={isSelected}
+                    aria-expanded={isSelected}
+                  >
+                    <td className="whitespace-nowrap px-4 py-3 text-[13px] font-mono text-slate-200">
+                      {log.time
+                        ? OneUptimeDate.getDateAsUserFriendlyFormattedString(
+                            log.time,
+                          )
+                        : "—"}
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-3 text-sm text-slate-300">
+                        <span
+                          className="h-2.5 w-2.5 flex-none rounded-full border border-slate-900/40 shadow-sm"
+                          style={{ backgroundColor: serviceColor }}
+                          aria-hidden="true"
+                        />
+                        <span className="truncate" title={serviceName}>
+                          {serviceName}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <SeverityBadge severity={log.severityText} />
+                    </td>
+                    <td className="px-4 py-3">
+                      <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-slate-200 transition-colors duration-150 group-hover:text-slate-50 ${severityTheme.textClass}`}
+                            title={message}
+                          >
+                            {message || "—"}
+                          </p>
+                          {(traceId || spanId) && (
+                            <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-slate-500">
+                              {traceId && <span>Trace: {traceId}</span>}
+                              {spanId && <span>Span: {spanId}</span>}
+                            </div>
+                          )}
+                        </div>
+                        <CopyTextButton
+                          textToBeCopied={message}
+                          size="xs"
+                          variant="ghost"
+                          iconOnly={true}
+                          title="Copy log message"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+
+                  {isSelected && props.renderExpandedContent && (
+                    <tr className="bg-slate-950/70">
+                      <td colSpan={4} className="px-6 pb-6 pt-3">
+                        {props.renderExpandedContent(log)}
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {props.isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-slate-950/70 backdrop-blur-md">
+          <ComponentLoader />
+        </div>
+      )}
+
+      {showEmptyState && (
+        <div className="flex h-full items-center justify-center px-6 py-12 text-center bg-slate-950">
+          <div className="w-full max-w-xl rounded-md border border-slate-900/70 bg-slate-950 p-6 text-left shadow-inner">
+            <p className="font-mono text-sm uppercase text-slate-400">
+              No logs found
+            </p>
+            <p className="mt-3 font-mono text-xs text-slate-500">
+              {props.emptyMessage || "Adjust filters or check again later."}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LogsTable;

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

@@ -0,0 +1,51 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Button, { ButtonSize, ButtonStyleType } from "../../Button/Button";
+
+export interface LogsViewerToolbarProps {
+  resultCount: number;
+  showApplyButton?: boolean;
+  onApplyFilters?: () => void;
+  currentPage?: number;
+  totalPages?: number;
+  className?: string;
+}
+
+const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
+  props: LogsViewerToolbarProps,
+): ReactElement => {
+  const { currentPage, totalPages } = props;
+  const hasPaginationSummary: boolean = Boolean(
+    currentPage && totalPages && totalPages > 0,
+  );
+
+  return (
+    <div
+      className={`flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between ${props.className || ""}`}
+    >
+      <div className="flex flex-wrap items-center gap-3 text-xs text-slate-400">
+        <span className="font-medium text-slate-300">
+          {props.resultCount.toLocaleString()} result
+          {props.resultCount === 1 ? "" : "s"}
+        </span>
+        {hasPaginationSummary && (
+          <span className="text-slate-500">
+            Page {currentPage} of {totalPages}
+          </span>
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {props.showApplyButton && props.onApplyFilters && (
+          <Button
+            title="Apply Filters"
+            buttonStyle={ButtonStyleType.NORMAL}
+            buttonSize={ButtonSize.Small}
+            onClick={props.onApplyFilters}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LogsViewerToolbar;

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

@@ -0,0 +1,28 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import LogSeverity from "../../../../Types/Log/LogSeverity";
+import { getSeverityTheme, SeverityTheme } from "./severityTheme";
+
+export interface SeverityBadgeProps {
+  severity?: LogSeverity | string | null | undefined;
+}
+
+const SeverityBadge: FunctionComponent<SeverityBadgeProps> = (
+  props: SeverityBadgeProps,
+): ReactElement => {
+  const label: string = props.severity
+    ? props.severity.toString().toUpperCase()
+    : "UNKNOWN";
+
+  const theme: SeverityTheme = getSeverityTheme(props.severity);
+
+  return (
+    <span
+      className={`inline-flex items-center gap-2 rounded-full px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide ring-1 ring-inset ${theme.badgeClass}`}
+    >
+      <span className={`h-1.5 w-1.5 rounded-full ${theme.dotClass}`} />
+      <span>{label}</span>
+    </span>
+  );
+};
+
+export default SeverityBadge;

package/UI/Components/LogsViewer/components/severityTheme.ts

@@ -0,0 +1,69 @@
+import LogSeverity from "../../../../Types/Log/LogSeverity";
+
+export interface SeverityTheme {
+  badgeClass: string;
+  dotClass: string;
+  borderClass: string;
+  textClass: string;
+}
+
+const severityThemeMap: Record<string, SeverityTheme> = {
+  [LogSeverity.Fatal]: {
+    badgeClass: "bg-rose-950/80 text-rose-100 ring-rose-500/40",
+    dotClass: "bg-rose-500",
+    borderClass: "border-rose-500/50",
+    textClass: "text-rose-100",
+  },
+  [LogSeverity.Error]: {
+    badgeClass: "bg-rose-900/60 text-rose-100 ring-rose-500/30",
+    dotClass: "bg-rose-400",
+    borderClass: "border-rose-500/40",
+    textClass: "text-rose-100",
+  },
+  [LogSeverity.Warning]: {
+    badgeClass: "bg-amber-900/50 text-amber-100 ring-amber-500/30",
+    dotClass: "bg-amber-400",
+    borderClass: "border-amber-400/40",
+    textClass: "text-amber-100",
+  },
+  [LogSeverity.Information]: {
+    badgeClass: "bg-sky-900/50 text-sky-100 ring-sky-500/30",
+    dotClass: "bg-sky-400",
+    borderClass: "border-sky-400/40",
+    textClass: "text-sky-100",
+  },
+  [LogSeverity.Debug]: {
+    badgeClass: "bg-purple-900/50 text-purple-100 ring-purple-500/30",
+    dotClass: "bg-purple-400",
+    borderClass: "border-purple-500/30",
+    textClass: "text-purple-100",
+  },
+  [LogSeverity.Trace]: {
+    badgeClass: "bg-slate-900/60 text-slate-300 ring-slate-500/20",
+    dotClass: "bg-slate-400",
+    borderClass: "border-slate-600/40",
+    textClass: "text-slate-200",
+  },
+};
+
+const defaultTheme: SeverityTheme = {
+  badgeClass: "bg-slate-800/60 text-slate-300 ring-slate-600/20",
+  dotClass: "bg-slate-500",
+  borderClass: "border-slate-700",
+  textClass: "text-slate-200",
+};
+
+export const getSeverityTheme: (
+  severity?: LogSeverity | string | null,
+) => SeverityTheme = (
+  severity?: LogSeverity | string | null,
+): SeverityTheme => {
+  if (!severity) {
+    return defaultTheme;
+  }
+
+  const normalized: string = severity.toString();
+  return severityThemeMap[normalized] || defaultTheme;
+};
+
+export default severityThemeMap;