feat(ourlogs): Make table mode stable in url (#95595)

### Summary
This makes table mode stable via url and doesn't switch you to
aggregates when you load the the page if you manually switched to
aggregate.

Author: k-fish

static/app/views/explore/contexts/logs/logsPageParams.tsx

@@ -25,6 +25,11 @@ import {
   updateLocationWithAggregateSortBys,
   updateLocationWithLogSortBys,
 } from 'sentry/views/explore/contexts/logs/sortBys';
+import {
+  getModeFromLocation,
+  type Mode,
+  updateLocationWithMode,
+} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 import {useLogsQueryKeyWithInfinite} from 'sentry/views/explore/logs/useLogsQuery';
 
@@ -52,6 +57,7 @@ interface LogsPageParams {
   readonly cursor: string;
   readonly fields: string[];
   readonly isTableFrozen: boolean | undefined;
+  readonly mode: Mode;
   readonly refreshInterval: number;
   readonly search: MutableSearch;
   /**
@@ -176,6 +182,7 @@ export function LogsPageParamsProvider({
     ...(groupBy ? [groupBy] : []),
     aggregate,
   ]);
+  const mode = getModeFromLocation(location);
   const pageFilters = usePageFilters();
   const projectIds = isTableFrozen
     ? (limitToProjectIds ?? [-1])
@@ -209,6 +216,7 @@ export function LogsPageParamsProvider({
         groupBy,
         aggregateFn,
         aggregateParam,
+        mode,
         ..._testContext,
       }}
     >
@@ -238,6 +246,7 @@ function setLogsPageParams(location: Location, pageParams: LogPageParamsUpdate)
   updateNullableLocation(target, LOGS_GROUP_BY_KEY, pageParams.groupBy);
   updateNullableLocation(target, LOGS_AGGREGATE_FN_KEY, pageParams.aggregateFn);
   updateNullableLocation(target, LOGS_AGGREGATE_PARAM_KEY, pageParams.aggregateParam);
+  updateLocationWithMode(target, pageParams.mode); // Can be swapped with updateNullableLocation if we merge page params.
   if (!pageParams.isTableFrozen) {
     updateLocationWithLogSortBys(target, pageParams.sortBys);
     updateLocationWithAggregateSortBys(target, pageParams.aggregateSortBys);
@@ -475,6 +484,21 @@ export function useLogsAnalyticsPageSource() {
   return analyticsPageSource;
 }
 
+export function useLogsMode() {
+  const {mode} = useLogsPageParams();
+  return mode;
+}
+
+export function useSetLogsMode() {
+  const setPageParams = useSetLogsPageParams();
+  return useCallback(
+    (mode: Mode) => {
+      setPageParams({mode});
+    },
+    [setPageParams]
+  );
+}
+
 function getLogCursorFromLocation(location: Location): string {
   if (!location.query?.[LOGS_CURSOR_KEY]) {
     return '';

static/app/views/explore/logs/logsTab.tsx

@@ -31,10 +31,13 @@ import {
   useLogsAggregateFunction,
   useLogsFields,
   useLogsGroupBy,
+  useLogsMode,
   useLogsSearch,
   useSetLogsFields,
+  useSetLogsMode,
   useSetLogsPageParams,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
+import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {useTraceItemAttributes} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import {useLogAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
 import {
@@ -78,6 +81,8 @@ export function LogsTabContent({
   const logsSearch = useLogsSearch();
   const fields = useLogsFields();
   const groupBy = useLogsGroupBy();
+  const mode = useLogsMode();
+  const setMode = useSetLogsMode();
   const setFields = useSetLogsFields();
   const setLogsPageParams = useSetLogsPageParams();
   const tableData = useLogsPageDataQueryResult();
@@ -106,11 +111,6 @@ export function LogsTabContent({
     'explore.ourlogs.main-chart',
     DiscoverDatasets.OURLOGS
   );
-  const [tableTab, setTableTab] = useState<'aggregates' | 'logs'>(
-    (aggregateFunction && aggregateFunction !== 'count') || groupBy
-      ? 'aggregates'
-      : 'logs'
-  );
 
   const {attributes: stringAttributes, isLoading: stringAttributesLoading} =
     useTraceItemAttributes('string');
@@ -177,6 +177,15 @@ export function LogsTabContent({
       {closeEvents: 'escape-key'}
     );
   }, [fields, setFields, stringAttributes, numberAttributes]);
+
+  const tableTab = mode === Mode.AGGREGATE ? 'aggregates' : 'logs';
+  const setTableTab = useCallback(
+    (tab: 'aggregates' | 'logs') => {
+      setMode(tab === 'aggregates' ? Mode.AGGREGATE : Mode.SAMPLES);
+    },
+    [setMode]
+  );
+
   return (
     <SearchQueryBuilderProvider {...searchQueryBuilderProps}>
       <TopSectionBody noRowGap>