feat(logs): Swap logs to query params context for group by readonly (#97497)

This swaps the read side of the group by to use logs query params
context. Does not handle the write parts yet as that'll be coupled with
the writes for visualize through aggregate fields.

Author: Zylphrex

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

@@ -373,11 +373,6 @@ export function useLogsAggregate() {
   return `${aggregateFn}(${aggregateParam})`;
 }
 
-export function useLogsGroupBy() {
-  const {groupBy} = useLogsPageParams();
-  return groupBy;
-}
-
 export function useLogsLimitToTraceId() {
   const {limitToTraceId} = useLogsPageParams();
   return limitToTraceId;

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

@@ -8,16 +8,14 @@ import {defined} from 'sentry/utils';
 import {determineSeriesSampleCountAndIsSampled} from 'sentry/views/alerts/rules/metric/utils/determineSeriesSampleCount';
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {ChartVisualization} from 'sentry/views/explore/components/chart/chartVisualization';
-import {
-  useLogsAggregate,
-  useLogsGroupBy,
-} from 'sentry/views/explore/contexts/logs/logsPageParams';
+import {useLogsAggregate} from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {
   ChartIntervalUnspecifiedStrategy,
   useChartInterval,
 } from 'sentry/views/explore/hooks/useChartInterval';
 import {TOP_EVENTS_LIMIT} from 'sentry/views/explore/hooks/useTopEvents';
 import {ConfidenceFooter} from 'sentry/views/explore/logs/confidenceFooter';
+import {useQueryParamsTopEventsLimit} from 'sentry/views/explore/queryParams/context';
 import {EXPLORE_CHART_TYPE_OPTIONS} from 'sentry/views/explore/spans/charts';
 import {
   combineConfidenceForSeries,
@@ -32,7 +30,7 @@ interface LogsGraphProps {
 
 export function LogsGraph({timeseriesResult}: LogsGraphProps) {
   const aggregate = useLogsAggregate();
-  const groupBy = useLogsGroupBy();
+  const topEventsLimit = useQueryParamsTopEventsLimit();
 
   const [chartType, setChartType] = useState<ChartType>(ChartType.BAR);
   const [interval, setInterval, intervalOptions] = useChartInterval({
@@ -41,7 +39,7 @@ export function LogsGraph({timeseriesResult}: LogsGraphProps) {
 
   const chartInfo = useMemo(() => {
     const series = timeseriesResult.data[aggregate] ?? [];
-    const isTopEvents = defined(groupBy);
+    const isTopEvents = defined(topEventsLimit);
     const samplingMeta = determineSeriesSampleCountAndIsSampled(series, isTopEvents);
     return {
       chartType,
@@ -55,7 +53,7 @@ export function LogsGraph({timeseriesResult}: LogsGraphProps) {
       samplingMode: undefined,
       topEvents: isTopEvents ? TOP_EVENTS_LIMIT : undefined,
     };
-  }, [chartType, timeseriesResult, aggregate, groupBy]);
+  }, [chartType, timeseriesResult, aggregate, topEventsLimit]);
 
   const Title = (
     <Widget.WidgetTitle title={prettifyAggregation(aggregate) ?? aggregate} />

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

@@ -33,7 +33,6 @@ import {
   useLogsAggregateFunction,
   useLogsAggregateSortBys,
   useLogsFields,
-  useLogsGroupBy,
   useLogsSearch,
   useSetLogsFields,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
@@ -45,7 +44,6 @@ import {
   ChartIntervalUnspecifiedStrategy,
   useChartInterval,
 } from 'sentry/views/explore/hooks/useChartInterval';
-import {TOP_EVENTS_LIMIT} from 'sentry/views/explore/hooks/useTopEvents';
 import {
   HiddenColumnEditorLogFields,
   HiddenLogSearchFields,
@@ -82,7 +80,9 @@ import {useSaveAsItems} from 'sentry/views/explore/logs/useSaveAsItems';
 import {useStreamingTimeseriesResult} from 'sentry/views/explore/logs/useStreamingTimeseriesResult';
 import {calculateAverageLogsPerSecond} from 'sentry/views/explore/logs/utils';
 import {
+  useQueryParamsGroupBys,
   useQueryParamsMode,
+  useQueryParamsTopEventsLimit,
   useSetQueryParamsMode,
 } from 'sentry/views/explore/queryParams/context';
 import {ColumnEditorModal} from 'sentry/views/explore/tables/columnEditorModal';
@@ -100,8 +100,9 @@ export function LogsTabContent({
   const pageFilters = usePageFilters();
   const logsSearch = useLogsSearch();
   const fields = useLogsFields();
-  const groupBy = useLogsGroupBy();
+  const groupBys = useQueryParamsGroupBys();
   const mode = useQueryParamsMode();
+  const topEventsLimit = useQueryParamsTopEventsLimit();
   const queryClient = useQueryClient();
   const sortBys = useLogsAggregateSortBys();
   const setMode = useSetQueryParamsMode();
@@ -130,7 +131,10 @@ export function LogsTabContent({
   }, [sortBys]);
 
   const [sidebarOpen, setSidebarOpen] = useState(
-    !!((aggregateFunction && aggregateFunction !== 'count') || groupBy)
+    !!(
+      (aggregateFunction && aggregateFunction !== 'count') ||
+      groupBys.filter(Boolean).length
+    )
   );
 
   useEffect(() => {
@@ -154,8 +158,8 @@ export function LogsTabContent({
       search,
       yAxis: [aggregate],
       interval,
-      fields: [...(groupBy ? [groupBy] : []), aggregate],
-      topEvents: groupBy ? TOP_EVENTS_LIMIT : undefined,
+      fields: [...groupBys.filter(Boolean), aggregate],
+      topEvents: topEventsLimit,
       orderby,
     },
     'explore.ourlogs.main-chart',
@@ -249,7 +253,7 @@ export function LogsTabContent({
 
   const saveAsItems = useSaveAsItems({
     aggregate,
-    groupBy,
+    groupBys,
     interval,
     mode,
     search: logsSearch,

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

@@ -9,10 +9,10 @@ import {AggregationKey, prettifyTagKey} from 'sentry/utils/fields';
 import {
   useLogsAggregateFunction,
   useLogsAggregateParam,
-  useLogsGroupBy,
   useSetLogsPageParams,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import type {OurLogsAggregate} from 'sentry/views/explore/logs/types';
+import {useQueryParamsGroupBys} from 'sentry/views/explore/queryParams/context';
 
 export const LOG_AGGREGATES = [
   {
@@ -69,7 +69,7 @@ interface LogsToolbarProps {
 export function LogsToolbar({stringTags, numberTags}: LogsToolbarProps) {
   const aggregateFunction = useLogsAggregateFunction();
   let aggregateParam = useLogsAggregateParam();
-  const groupBy = useLogsGroupBy();
+  const groupBys = useQueryParamsGroupBys();
   const setLogsPageParams = useSetLogsPageParams();
   const functionArgRef = useRef<HTMLDivElement>(null);
 
@@ -129,25 +129,31 @@ export function LogsToolbar({stringTags, numberTags}: LogsToolbarProps) {
         <SectionHeader>
           <Label>{t('Group By')}</Label>
         </SectionHeader>
-        <Select
-          options={[
-            {
-              label: '\u2014',
-              value: '',
-              textValue: '\u2014',
-            },
-            ...Object.keys(stringTags ?? {}).map(key => ({
-              label: key,
-              value: key,
-            })),
-          ]}
-          onChange={val =>
-            setLogsPageParams({groupBy: val.value ? (val.value as string) : null})
-          }
-          value={groupBy ?? ''}
-          searchable
-          triggerProps={{style: {width: '100%'}}}
-        />
+        {groupBys.map((groupBy, index) => {
+          return (
+            <Select
+              key={index}
+              options={[
+                {
+                  label: '\u2014',
+                  value: '',
+                  textValue: '\u2014',
+                },
+                ...Object.keys(stringTags ?? {}).map(key => ({
+                  label: key,
+                  value: key,
+                })),
+              ]}
+              onChange={val =>
+                // TODO: save the group bys separately
+                setLogsPageParams({groupBy: val.value ? (val.value as string) : null})
+              }
+              value={groupBy}
+              searchable
+              triggerProps={{style: {width: '100%'}}}
+            />
+          );
+        })}
       </ToolbarItem>
     </Container>
   );

static/app/views/explore/logs/tables/logsAggregateTable.spec.tsx

@@ -13,6 +13,7 @@ import {
   LogsPageParamsProvider,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {LOGS_AGGREGATE_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
+import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
 import * as useLogsQueryModule from 'sentry/views/explore/logs/useLogsQuery';
 
 import {LogsAggregateTable} from './logsAggregateTable';
@@ -27,9 +28,13 @@ describe('LogsAggregateTable', () => {
   });
   function LogsAggregateTableWithParamsProvider() {
     return (
-      <LogsPageParamsProvider analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}>
-        <LogsAggregateTable />
-      </LogsPageParamsProvider>
+      <LogsQueryParamsProvider source="location">
+        <LogsPageParamsProvider
+          analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
+        >
+          <LogsAggregateTable />
+        </LogsPageParamsProvider>
+      </LogsQueryParamsProvider>
     );
   }
 

static/app/views/explore/logs/tables/logsAggregateTable.tsx

@@ -13,7 +13,6 @@ import {
   LOGS_AGGREGATE_CURSOR_KEY,
   useLogsAggregate,
   useLogsAggregateSortBys,
-  useLogsGroupBy,
   useSetLogsPageParams,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {LOGS_AGGREGATE_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
@@ -22,24 +21,23 @@ import {LogFieldRenderer} from 'sentry/views/explore/logs/fieldRenderers';
 import {getLogColors} from 'sentry/views/explore/logs/styles';
 import {useLogsAggregatesQuery} from 'sentry/views/explore/logs/useLogsQuery';
 import {SeverityLevel} from 'sentry/views/explore/logs/utils';
+import {useQueryParamsGroupBys} from 'sentry/views/explore/queryParams/context';
 
 export function LogsAggregateTable() {
   const {data, pageLinks, isLoading, error} = useLogsAggregatesQuery({
     limit: 50,
   });
 
   const setLogsPageParams = useSetLogsPageParams();
-  const groupBy = useLogsGroupBy();
+  const groupBys = useQueryParamsGroupBys();
   const aggregate = useLogsAggregate();
   const aggregateSortBys = useLogsAggregateSortBys();
   const location = useLocation();
   const theme = useTheme();
   const organization = useOrganization();
 
   const fields: string[] = [];
-  if (groupBy) {
-    fields.push(groupBy);
-  }
+  fields.push(...groupBys.filter(Boolean));
   fields.push(aggregate);
 
   return (

static/app/views/explore/logs/tables/logsInfiniteTable.spec.tsx

@@ -24,6 +24,7 @@ import {
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {LOGS_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
 import {DEFAULT_TRACE_ITEM_HOVER_TIMEOUT} from 'sentry/views/explore/logs/constants';
+import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
 import {LogsInfiniteTable} from 'sentry/views/explore/logs/tables/logsInfiniteTable';
 import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 import {OrganizationContext} from 'sentry/views/organizationContext';
@@ -198,11 +199,13 @@ describe('LogsInfiniteTable', function () {
   const renderWithProviders = (children: React.ReactNode) => {
     return render(
       <OrganizationContext.Provider value={organization}>
-        <LogsPageParamsProvider
-          analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
-        >
-          <LogsPageDataProvider>{children}</LogsPageDataProvider>
-        </LogsPageParamsProvider>
+        <LogsQueryParamsProvider source="location">
+          <LogsPageParamsProvider
+            analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
+          >
+            <LogsPageDataProvider>{children}</LogsPageDataProvider>
+          </LogsPageParamsProvider>
+        </LogsQueryParamsProvider>
       </OrganizationContext.Provider>
     );
   };

static/app/views/explore/logs/tables/logsTable.spec.tsx

@@ -14,6 +14,7 @@ import {
   LogsPageParamsProvider,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
 import {LOGS_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
+import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
 import {LogsTable} from 'sentry/views/explore/logs/tables/logsTable';
 import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 import type {UseLogsQueryResult} from 'sentry/views/explore/logs/useLogsQuery';
@@ -145,11 +146,13 @@ describe('LogsTable', function () {
   function ProviderWrapper({children}: {children: React.ReactNode}) {
     return (
       <OrganizationContext.Provider value={organization}>
-        <LogsPageParamsProvider
-          analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
-        >
-          <LogsPageDataProvider>{children}</LogsPageDataProvider>
-        </LogsPageParamsProvider>
+        <LogsQueryParamsProvider source="location">
+          <LogsPageParamsProvider
+            analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
+          >
+            <LogsPageDataProvider>{children}</LogsPageDataProvider>
+          </LogsPageParamsProvider>
+        </LogsQueryParamsProvider>
       </OrganizationContext.Provider>
     );
   }

static/app/views/explore/logs/tables/logsTableRow.spec.tsx

@@ -16,16 +16,19 @@ import {
 import {LOGS_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
 import {type TraceItemResponseAttribute} from 'sentry/views/explore/hooks/useTraceItemDetails';
 import {DEFAULT_TRACE_ITEM_HOVER_TIMEOUT} from 'sentry/views/explore/logs/constants';
+import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
 import {LogRowContent} from 'sentry/views/explore/logs/tables/logsTableRow';
 import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 
 function ProviderWrapper({children}: {children?: React.ReactNode}) {
   return (
-    <LogsPageParamsProvider analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}>
-      <table>
-        <tbody>{children}</tbody>
-      </table>
-    </LogsPageParamsProvider>
+    <LogsQueryParamsProvider source="location">
+      <LogsPageParamsProvider analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}>
+        <table>
+          <tbody>{children}</tbody>
+        </table>
+      </LogsPageParamsProvider>
+    </LogsQueryParamsProvider>
   );
 }