@oneuptime/common 8.0.5480 → 8.0.5488

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -1,27 +1,14 @@
-import Query from "../../../Types/BaseDatabase/Query";
-import DropdownUtil from "../../Utils/Dropdown";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
-import FiltersForm from "../Filters/FiltersForm";
-import FieldType from "../Types/FieldType";
-import LogItem from "./LogItem";
-import {
-  PromiseVoidFunction,
-  VoidFunction,
-} from "../../../Types/FunctionTypes";
-import Log from "../../../Models/AnalyticsModels/Log";
-import LogSeverity from "../../../Types/Log/LogSeverity";
 import React, {
   FunctionComponent,
   ReactElement,
-  Ref,
   useCallback,
+  useEffect,
   useMemo,
+  useState,
 } from "react";
-import Toggle from "../Toggle/Toggle";
-import Card from "../Card/Card";
-import Icon from "../Icon/Icon";
-import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
-import IconProp from "../../../Types/Icon/IconProp";
+import Query from "../../../Types/BaseDatabase/Query";
+import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
+import Log from "../../../Models/AnalyticsModels/Log";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import Route from "../../../Types/API/Route";
 import URL from "../../../Types/API/URL";
@@ -37,6 +24,16 @@ import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import ListResult from "../../../Types/BaseDatabase/ListResult";
 import Dictionary from "../../../Types/Dictionary";
+import LogsFilterCard from "./components/LogsFilterCard";
+import LogsViewerToolbar, {
+  LogsViewerToolbarProps,
+} from "./components/LogsViewerToolbar";
+import LogsTable, {
+  LogsTableSortField,
+  resolveLogIdentifier,
+} from "./components/LogsTable";
+import LogsPagination from "./components/LogsPagination";
+import LogDetailsPanel from "./components/LogDetailsPanel";
 
 export interface ComponentProps {
   logs: Array<Log>;
@@ -47,58 +44,195 @@ export interface ComponentProps {
   noLogsMessage?: string | undefined;
   getTraceRoute?: (traceId: string, log: Log) => Route | URL | undefined;
   getSpanRoute?: (spanId: string, log: Log) => Route | URL | undefined;
+  totalCount?: number | undefined;
+  page?: number | undefined;
+  pageSize?: number | undefined;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  sortField?: LogsTableSortField | undefined;
+  sortOrder?: SortOrder | undefined;
+  onSortChange?: (field: LogsTableSortField, order: SortOrder) => void;
 }
 
-type OptionalTraceRouteProps = {
-  getTraceRoute?: (traceId: string, log: Log) => Route | URL | undefined;
+export type LogsSortField = LogsTableSortField;
+
+const DEFAULT_PAGE_SIZE: number = 100;
+const PAGE_SIZE_OPTIONS: Array<number> = [100, 250, 500, 1000];
+
+const severityWeight: Record<string, number> = {
+  fatal: 6,
+  error: 5,
+  warn: 4,
+  warning: 4,
+  info: 3,
+  notice: 3,
+  debug: 2,
+  trace: 1,
 };
 
-type OptionalSpanRouteProps = {
-  getSpanRoute?: (spanId: string, log: Log) => Route | URL | undefined;
+const getSeverityWeight: (severity: string | undefined) => number = (
+  severity: string | undefined,
+): number => {
+  if (!severity) {
+    return 0;
+  }
+
+  const normalized: string = severity.toString().toLowerCase();
+  return severityWeight[normalized] || 0;
 };
 
 const LogsViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [filterData, setFilterData] = React.useState<Query<Log>>(
-    props.filterData,
+  const [filterData, setFilterData] = useState<Query<Log>>(props.filterData);
+
+  const [logAttributes, setLogAttributes] = useState<Array<string>>([]);
+  const [attributesLoaded, setAttributesLoaded] = useState<boolean>(false);
+  const [attributesLoading, setAttributesLoading] = useState<boolean>(false);
+  const [attributesError, setAttributesError] = useState<string>("");
+  const [areAdvancedFiltersVisible, setAreAdvancedFiltersVisible] =
+    useState<boolean>(false);
+
+  const [isPageLoading, setIsPageLoading] = useState<boolean>(true);
+  const [pageError, setPageError] = useState<string>("");
+
+  const [serviceMap, setServiceMap] = useState<Dictionary<TelemetryService>>(
+    {},
   );
 
-  const [screenHeight, setScreenHeight] = React.useState<number>(
-    typeof window !== "undefined" ? window.innerHeight : 900,
+  const [selectedLogId, setSelectedLogId] = useState<string | null>(null);
+
+  const [internalPage, setInternalPage] = useState<number>(1);
+  const [internalPageSize, setInternalPageSize] =
+    useState<number>(DEFAULT_PAGE_SIZE);
+  const [localSortField, setLocalSortField] =
+    useState<LogsTableSortField>("time");
+  const [localSortOrder, setLocalSortOrder] = useState<SortOrder>(
+    SortOrder.Descending,
   );
-  const [autoScroll, setAutoScroll] = React.useState<boolean>(true);
-  const [showScrollToLatest, setShowScrollToLatest] =
-    React.useState<boolean>(false);
-  const [isDescending, setIsDescending] = React.useState<boolean>(false);
-  // removed wrapLines toggle for a cleaner toolbar
-  const logsViewerRef: Ref<HTMLDivElement> = React.useRef<HTMLDivElement>(null);
-  const scrollContainerRef: Ref<HTMLDivElement> =
-    React.useRef<HTMLDivElement>(null);
-
-  const [logAttributes, setLogAttributes] = React.useState<Array<string>>([]);
-  const [attributesLoaded, setAttributesLoaded] =
-    React.useState<boolean>(false);
-  const [attributesLoading, setAttributesLoading] =
-    React.useState<boolean>(false);
-  const [attributesError, setAttributesError] = React.useState<string>("");
-  const [areAdvancedFiltersVisible, setAreAdvancedFiltersVisible] =
-    React.useState<boolean>(false);
 
-  const [isPageLoading, setIsPageLoading] = React.useState<boolean>(true);
-  const [pageError, setPageError] = React.useState<string>("");
+  useEffect(() => {
+    setFilterData(props.filterData);
+  }, [props.filterData]);
+
+  useEffect(() => {
+    if (props.sortField) {
+      setLocalSortField(props.sortField);
+    }
+  }, [props.sortField]);
+
+  useEffect(() => {
+    if (props.sortOrder) {
+      setLocalSortOrder(props.sortOrder);
+    }
+  }, [props.sortOrder]);
+
+  useEffect(() => {
+    if (props.pageSize) {
+      setInternalPageSize(props.pageSize);
+    }
+  }, [props.pageSize]);
+
+  const currentPage: number = props.page ?? internalPage;
+  const pageSize: number = props.pageSize ?? internalPageSize;
+
+  const totalItems: number = props.totalCount ?? props.logs.length;
+
+  const totalPages: number = Math.max(
+    1,
+    Math.ceil(totalItems / Math.max(pageSize, 1)),
+  );
+
+  const sortField: LogsTableSortField = props.sortField ?? localSortField;
+  const sortOrder: SortOrder = props.sortOrder ?? localSortOrder;
+
+  const shouldClientSort: boolean = !props.onSortChange;
+
+  const sortedLogs: Array<Log> = useMemo(() => {
+    if (!shouldClientSort) {
+      return props.logs;
+    }
+
+    const cloned: Array<Log> = [...props.logs];
+
+    cloned.sort((a: Log, b: Log) => {
+      if (sortField === "time") {
+        const aTime: number =
+          Number(a.timeUnixNano) || (a.time ? new Date(a.time).getTime() : 0);
+        const bTime: number =
+          Number(b.timeUnixNano) || (b.time ? new Date(b.time).getTime() : 0);
+
+        if (aTime === bTime) {
+          return 0;
+        }
+
+        return sortOrder === SortOrder.Descending
+          ? bTime - aTime
+          : aTime - bTime;
+      }
+
+      const aSeverity: number = getSeverityWeight(a.severityText?.toString());
+      const bSeverity: number = getSeverityWeight(b.severityText?.toString());
+
+      if (aSeverity === bSeverity) {
+        return 0;
+      }
+
+      return sortOrder === SortOrder.Descending
+        ? bSeverity - aSeverity
+        : aSeverity - bSeverity;
+    });
+
+    return cloned;
+  }, [props.logs, shouldClientSort, sortField, sortOrder]);
+
+  const shouldClientPaginate: boolean = props.totalCount === undefined;
+
+  const paginatedLogs: Array<Log> = useMemo(() => {
+    if (!shouldClientPaginate) {
+      return sortedLogs;
+    }
+
+    if (sortedLogs.length === 0) {
+      return [];
+    }
+
+    const safePage: number = Math.min(Math.max(currentPage, 1), totalPages);
+    const startIndex: number = (safePage - 1) * pageSize;
+    return sortedLogs.slice(startIndex, startIndex + pageSize);
+  }, [sortedLogs, shouldClientPaginate, currentPage, totalPages, pageSize]);
+
+  const displayedLogs: Array<Log> = shouldClientPaginate
+    ? paginatedLogs
+    : sortedLogs;
+
+  useEffect(() => {
+    if (!shouldClientPaginate || props.page !== undefined) {
+      return;
+    }
 
-  const [serviceMap, setServiceMap] = React.useState<
-    Dictionary<TelemetryService>
-  >({});
+    const safePage: number = Math.min(Math.max(internalPage, 1), totalPages);
 
-  const displayLogs: Array<Log> = useMemo(() => {
-    if (isDescending) {
-      return [...props.logs].reverse();
+    if (safePage !== internalPage) {
+      setInternalPage(safePage);
     }
+  }, [shouldClientPaginate, props.page, internalPage, totalPages]);
 
-    return props.logs;
-  }, [props.logs, isDescending]);
+  useEffect(() => {
+    if (!selectedLogId) {
+      return;
+    }
+
+    const stillExists: boolean = displayedLogs.some(
+      (log: Log, index: number) => {
+        return resolveLogIdentifier(log, index) === selectedLogId;
+      },
+    );
+
+    if (!stillExists) {
+      setSelectedLogId(null);
+    }
+  }, [displayedLogs, selectedLogId]);
 
   const loadTelemetryServices: PromiseVoidFunction =
     useCallback(async (): Promise<void> => {
@@ -123,7 +257,11 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         const services: Dictionary<TelemetryService> = {};
 
         telemetryServices.data.forEach((service: TelemetryService) => {
-          services[service.id!.toString()!] = service;
+          if (!service.id) {
+            return;
+          }
+
+          services[service.id.toString()] = service;
         });
 
         setServiceMap(services);
@@ -142,7 +280,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         setAttributesLoading(true);
         setAttributesError("");
 
-        const attributeRepsonse: HTTPResponse<JSONObject> | HTTPErrorResponse =
+        const attributeResponse: HTTPResponse<JSONObject> | HTTPErrorResponse =
           await API.post({
             url: URL.fromString(APP_API_URL.toString()).addRoute(
               "/telemetry/logs/get-attributes",
@@ -153,11 +291,11 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
             },
           });
 
-        if (attributeRepsonse instanceof HTTPErrorResponse) {
-          throw attributeRepsonse;
+        if (attributeResponse instanceof HTTPErrorResponse) {
+          throw attributeResponse;
         }
 
-        const attributes: Array<string> = (attributeRepsonse.data[
+        const attributes: Array<string> = (attributeResponse.data[
           "attributes"
         ] || []) as Array<string>;
         setLogAttributes(attributes);
@@ -173,352 +311,178 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       }
     }, []);
 
-  // Update the screen height when the window is resized
-
-  React.useEffect(() => {
+  useEffect(() => {
     void loadTelemetryServices();
-
-    const handleResize: any = (): void => {
-      setScreenHeight(window.innerHeight);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
   }, [loadTelemetryServices]);
 
-  // Keep scroll aligned with the latest log entry
-
-  const scrollToLatest: VoidFunction = (): void => {
-    const scrollContainer: HTMLDivElement | null = scrollContainerRef.current;
-
-    if (!scrollContainer) {
-      return;
+  const resetPage: () => void = (): void => {
+    if (props.onPageChange) {
+      props.onPageChange(1);
     }
 
-    if (isDescending) {
-      scrollContainer.scrollTop = 0;
-      return;
+    if (props.page === undefined) {
+      setInternalPage(1);
     }
-
-    scrollContainer.scrollTop = scrollContainer.scrollHeight;
   };
 
-  const applySortDirection: (nextDescending: boolean) => void = (
-    nextDescending: boolean,
-  ) => {
-    setShowScrollToLatest(false);
-    setIsDescending((previous: boolean) => {
-      if (previous === nextDescending) {
-        return previous;
-      }
-
-      // Apply scroll alignment after the DOM reorders log entries.
-      setTimeout(() => {
-        const scrollContainer: HTMLDivElement | null =
-          scrollContainerRef.current;
+  const handleApplyFilters: () => void = (): void => {
+    resetPage();
+    setSelectedLogId(null);
+    props.onFilterChanged(filterData);
+  };
 
-        if (!scrollContainer) {
-          return;
-        }
+  const handlePageChange: (page: number) => void = (page: number): void => {
+    if (props.onPageChange) {
+      props.onPageChange(page);
+    }
 
-        if (nextDescending) {
-          scrollContainer.scrollTop = 0;
-          return;
-        }
+    if (props.page === undefined) {
+      setInternalPage(page);
+    }
 
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      }, 0);
+    setSelectedLogId(null);
 
-      return nextDescending;
-    });
+    setSelectedLogId(null);
   };
 
-  const handleScroll: VoidFunction = React.useCallback((): void => {
-    const scrollContainer: HTMLDivElement | null = scrollContainerRef.current;
-    if (!scrollContainer) {
-      return;
+  const handlePageSizeChange: (size: number) => void = (size: number): void => {
+    if (props.onPageSizeChange) {
+      props.onPageSizeChange(size);
     }
 
-    const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-    const isNearLatest: boolean = isDescending
-      ? scrollTop < 100
-      : scrollHeight - scrollTop - clientHeight < 100;
-    setShowScrollToLatest(!isNearLatest && displayLogs.length > 0);
-  }, [isDescending, displayLogs.length]);
-
-  React.useEffect(() => {
-    if (!autoScroll) {
-      return;
+    if (props.pageSize === undefined) {
+      setInternalPageSize(size);
     }
 
-    scrollToLatest();
-  }, [props.logs, autoScroll, isDescending]);
+    resetPage();
+    setSelectedLogId(null);
+  };
 
-  React.useEffect(() => {
-    const scrollContainer: HTMLDivElement | null = scrollContainerRef.current;
-    if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll);
-      return () => {
-        return scrollContainer.removeEventListener("scroll", handleScroll);
-      };
-    }
-    return () => {}; // Return empty cleanup function if no scrollContainer
-  }, [handleScroll]);
+  const handleSortChange: (field: LogsTableSortField) => void = (
+    field: LogsTableSortField,
+  ): void => {
+    const isSameField: boolean = sortField === field;
+    const nextOrder: SortOrder = isSameField
+      ? sortOrder === SortOrder.Descending
+        ? SortOrder.Ascending
+        : SortOrder.Descending
+      : SortOrder.Descending;
+
+    setLocalSortField(field);
+    setLocalSortOrder(nextOrder);
+
+    props.onSortChange?.(field, nextOrder);
+
+    resetPage();
+    setSelectedLogId(null);
+  };
 
   if (isPageLoading) {
     return <PageLoader isVisible={true} />;
   }
+
   if (pageError) {
     return <ErrorMessage message={pageError} />;
   }
+
+  const toolbarProps: LogsViewerToolbarProps = {
+    resultCount: totalItems,
+    currentPage,
+    totalPages,
+  };
+
   return (
-    <div>
+    <div className="space-y-6">
       {props.showFilters && (
         <div className="mb-6">
-          <Card>
-            <div className="-mt-8">
-              <FiltersForm<Log>
-                id="logs-filter"
-                showFilter={props.showFilters}
-                filterData={props.filterData}
-                onFilterChanged={(filterData: Query<Log>) => {
-                  setFilterData(filterData);
-                }}
-                onAdvancedFiltersToggle={(show: boolean) => {
-                  setAreAdvancedFiltersVisible(show);
+          <LogsFilterCard
+            filterData={filterData}
+            onFilterChanged={(updated: Query<Log>) => {
+              setFilterData(updated);
+            }}
+            onAdvancedFiltersToggle={(show: boolean) => {
+              setAreAdvancedFiltersVisible(show);
 
-                  if (show && !attributesLoaded && !attributesLoading) {
+              if (show && !attributesLoaded && !attributesLoading) {
+                void loadAttributes();
+              }
+            }}
+            isFilterLoading={areAdvancedFiltersVisible && attributesLoading}
+            filterError={
+              areAdvancedFiltersVisible && attributesError
+                ? attributesError
+                : undefined
+            }
+            onFilterRefreshClick={
+              areAdvancedFiltersVisible && attributesError
+                ? () => {
                     void loadAttributes();
                   }
-                }}
-                isFilterLoading={areAdvancedFiltersVisible && attributesLoading}
-                filterError={
-                  areAdvancedFiltersVisible && attributesError
-                    ? attributesError
-                    : undefined
-                }
-                onFilterRefreshClick={
-                  areAdvancedFiltersVisible && attributesError
-                    ? () => {
-                        void loadAttributes();
-                      }
-                    : undefined
-                }
-                filters={[
-                  {
-                    key: "body",
-                    type: FieldType.Text,
-                    title: "Search Log",
-                  },
-                  {
-                    key: "severityText",
-                    filterDropdownOptions:
-                      DropdownUtil.getDropdownOptionsFromEnum(LogSeverity),
-                    type: FieldType.Dropdown,
-                    title: "Log Severity",
-                    isAdvancedFilter: true,
-                  },
-                  {
-                    key: "time",
-                    type: FieldType.DateTime,
-                    title: "Start and End Date",
-                    isAdvancedFilter: true,
-                  },
-                  {
-                    key: "attributes",
-                    type: FieldType.JSON,
-                    title: "Filter by Attributes",
-                    jsonKeys: logAttributes,
-                    isAdvancedFilter: true,
-                  },
-                ]}
+                : undefined
+            }
+            logAttributes={logAttributes}
+            toolbar={
+              <LogsViewerToolbar
+                {...toolbarProps}
+                showApplyButton={true}
+                onApplyFilters={handleApplyFilters}
               />
-            </div>
-
-            {/* Enhanced Controls Section */}
-            <div className="-mx-6 -mb-6 px-6 py-3 border-t border-slate-200 bg-white/50">
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex items-center gap-4 flex-wrap">
-                  <div className="flex items-center gap-2">
-                    <Toggle
-                      title=""
-                      value={autoScroll}
-                      onChange={(checked: boolean) => {
-                        return setAutoScroll(checked);
-                      }}
-                    />
-                    <span className="text-xs text-slate-600">
-                      {autoScroll ? "Live" : "Paused"}
-                    </span>
-                  </div>
-                  <span className="hidden sm:block h-4 w-px bg-slate-200" />
-                  <span className="text-xs text-slate-500">
-                    {displayLogs.length} result
-                    {displayLogs.length !== 1 ? "s" : ""}
-                  </span>
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <div className="inline-flex items-center rounded-full border border-slate-200 bg-white/80 p-1 shadow-sm ring-1 ring-slate-200/60">
-                    <button
-                      type="button"
-                      aria-pressed={isDescending}
-                      className={`flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold tracking-wide transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 ${
-                        isDescending
-                          ? "bg-indigo-600 text-white shadow-sm ring-1 ring-indigo-500/40"
-                          : "text-slate-500 hover:text-indigo-600"
-                      }`}
-                      onClick={() => {
-                        applySortDirection(true);
-                      }}
-                    >
-                      <Icon
-                        icon={IconProp.BarsArrowDown}
-                        className={`h-4 w-4 ${
-                          isDescending ? "text-white/90" : "text-slate-400"
-                        }`}
-                      />
-                      <span>Newest first</span>
-                    </button>
-                    <button
-                      type="button"
-                      aria-pressed={!isDescending}
-                      className={`flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold tracking-wide transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 ${
-                        !isDescending
-                          ? "bg-indigo-600 text-white shadow-sm ring-1 ring-indigo-500/40"
-                          : "text-slate-500 hover:text-indigo-600"
-                      }`}
-                      onClick={() => {
-                        applySortDirection(false);
-                      }}
-                    >
-                      <Icon
-                        icon={IconProp.BarsArrowUp}
-                        className={`h-4 w-4 ${
-                          !isDescending ? "text-white/90" : "text-slate-400"
-                        }`}
-                      />
-                      <span>Oldest first</span>
-                    </button>
-                  </div>
-                  <Button
-                    title="Apply Filters"
-                    icon={IconProp.Search}
-                    buttonStyle={ButtonStyleType.NORMAL}
-                    buttonSize={ButtonSize.Small}
-                    onClick={() => {
-                      return props.onFilterChanged(filterData);
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </Card>
+            }
+          />
         </div>
       )}
-      {!props.isLoading && (
-        <div className="relative">
-          <div
-            ref={logsViewerRef}
-            className="rounded-md border border-slate-700 bg-slate-900 overflow-hidden"
-            style={{
-              height: Math.max(360, screenHeight - 360),
-            }}
-          >
-            {/* Custom Scrollbar Container */}
-            <div
-              ref={scrollContainerRef}
-              className={`h-full overflow-y-auto p-2 sm:p-3 antialiased`}
-              onScroll={handleScroll}
-            >
-              <ul role="list" className="divide-y divide-slate-800">
-                {displayLogs.map((log: Log, i: number) => {
-                  const traceRouteProps: OptionalTraceRouteProps =
-                    props.getTraceRoute
-                      ? { getTraceRoute: props.getTraceRoute }
-                      : {};
-                  const spanRouteProps: OptionalSpanRouteProps =
-                    props.getSpanRoute
-                      ? { getSpanRoute: props.getSpanRoute }
-                      : {};
-                  return (
-                    <li key={i} className="py-1 first:pt-0 last:pb-0">
-                      <LogItem
-                        serviceMap={serviceMap}
-                        log={log}
-                        {...traceRouteProps}
-                        {...spanRouteProps}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
-
-              {displayLogs.length === 0 && (
-                <div className="flex items-center justify-center h-full px-4">
-                  <div className="text-center">
-                    <h3 className="text-sm font-medium text-slate-300 mb-1">
-                      No logs found
-                    </h3>
-                    <p className="text-slate-500 text-xs">
-                      {props.noLogsMessage ||
-                        "Adjust filters or check again later."}
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
 
-          {/* Floating Scroll to Latest Button */}
-          {showScrollToLatest && (
-            <button
-              onClick={scrollToLatest}
-              className="absolute bottom-3 right-3 bg-slate-700 hover:bg-slate-600 text-white p-2 rounded-md shadow transition-all"
-              title={isDescending ? "Scroll to top" : "Scroll to bottom"}
-            >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                {isDescending ? (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 14l7-7 7 7m-7-7v18"
-                  />
-                ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M19 10l-7 7-7-7m7 7V3"
-                  />
-                )}
-              </svg>
-            </button>
-          )}
-        </div>
-      )}
-      {props.isLoading && (
-        <div
-          className="rounded-md border border-slate-700 bg-slate-900 overflow-hidden"
-          style={{ height: Math.max(360, screenHeight - 360) }}
-        >
-          <div className="flex items-center justify-center h-full">
-            <div className="text-center">
-              <ComponentLoader />
-              <p className="text-slate-400 text-sm mt-4">Loading logs...</p>
-            </div>
+      <div className="overflow-hidden rounded-2xl border border-slate-800/70 bg-slate-950/60 shadow-xl">
+        {!props.showFilters && (
+          <div className="border-b border-slate-800/70 bg-slate-950/70 px-4 py-3">
+            <LogsViewerToolbar {...toolbarProps} />
           </div>
-        </div>
-      )}
+        )}
+
+        <LogsTable
+          logs={displayedLogs}
+          serviceMap={serviceMap}
+          isLoading={props.isLoading}
+          emptyMessage={props.noLogsMessage}
+          onRowClick={(_log: Log, rowId: string) => {
+            setSelectedLogId((currentSelected: string | null) => {
+              if (currentSelected === rowId) {
+                return null;
+              }
+
+              return rowId;
+            });
+          }}
+          selectedLogId={selectedLogId}
+          sortField={sortField}
+          sortOrder={sortOrder}
+          onSortChange={handleSortChange}
+          renderExpandedContent={(log: Log) => {
+            return (
+              <LogDetailsPanel
+                log={log}
+                serviceMap={serviceMap}
+                onClose={() => {
+                  setSelectedLogId(null);
+                }}
+                getTraceRoute={props.getTraceRoute}
+                getSpanRoute={props.getSpanRoute}
+                variant="embedded"
+              />
+            );
+          }}
+        />
+
+        <LogsPagination
+          currentPage={currentPage}
+          totalItems={totalItems}
+          pageSize={pageSize}
+          pageSizeOptions={PAGE_SIZE_OPTIONS}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          isDisabled={props.isLoading || totalItems === 0}
+        />
+      </div>
     </div>
   );
 };