feat(logs): Support multiple visualizes and groupbys in logs (#97912)

This adds support in logs to allow users to add multiple visualizes and
groupbys.

Author: Zylphrex

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

@@ -59,6 +59,7 @@ import {
   StyledPageFilterBar,
   TableActionsContainer,
   ToolbarAndBodyContainer,
+  ToolbarContainer,
   TopSectionBody,
 } from 'sentry/views/explore/logs/styles';
 import {LogsAggregateTable} from 'sentry/views/explore/logs/tables/logsAggregateTable';
@@ -157,15 +158,14 @@ export function LogsTabContent({
     return newSearch;
   }, [logsSearch, timeseriesIngestDelay]);
 
+  const yAxes = new Set(visualizes.map(visualize => visualize.yAxis));
+
   const _timeseriesResult = useSortedTimeSeries(
     {
       search,
-      yAxis: visualizes.map(visualize => visualize.yAxis),
+      yAxis: [...yAxes],
       interval,
-      fields: [
-        ...groupBys.filter(Boolean),
-        ...visualizes.map(visualize => visualize.yAxis),
-      ],
+      fields: [...groupBys.filter(Boolean), ...yAxes],
       topEvents: topEventsLimit,
       orderby,
     },
@@ -341,7 +341,9 @@ export function LogsTabContent({
 
       <ToolbarAndBodyContainer sidebarOpen={sidebarOpen}>
         {sidebarOpen && (
-          <LogsToolbar stringTags={stringAttributes} numberTags={numberAttributes} />
+          <ToolbarContainer sidebarOpen={sidebarOpen}>
+            <LogsToolbar stringTags={stringAttributes} numberTags={numberAttributes} />
+          </ToolbarContainer>
         )}
         <BottomSectionBody>
           <section>

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

@@ -103,17 +103,8 @@ describe('LogsToolbar', () => {
 
       let options: HTMLElement[];
 
-      // count only has 1 option available
-      await userEvent.click(screen.getByRole('button', {name: 'logs'}));
-      options = screen.getAllByRole('option');
-      expect(options).toHaveLength(1);
-      expect(options[0]).toHaveTextContent('logs');
-      await userEvent.click(options[0]!);
-      expect(router.location.query.aggregateField).toEqual(
-        [{groupBy: ''}, {yAxes: ['count(message)']}].map(aggregateField =>
-          JSON.stringify(aggregateField)
-        )
-      );
+      // count has no user changable argument
+      expect(screen.getByRole('button', {name: 'logs'})).toBeDisabled();
 
       // count unique only shows string attributes
       await userEvent.click(screen.getByRole('button', {name: 'count'}));
@@ -145,6 +136,37 @@ describe('LogsToolbar', () => {
         )
       );
     });
+
+    it('can add/delete visualizes', async function () {
+      const {router} = render(
+        <Wrapper>
+          <LogsToolbar
+            numberTags={{bar: {key: 'bar', name: 'bar'}, foo: {key: 'foo', name: 'foo'}}}
+            stringTags={{
+              message: {key: 'message', name: 'message'},
+              severity: {key: 'severity', name: 'severity'},
+            }}
+          />
+        </Wrapper>
+      );
+
+      await userEvent.click(screen.getByRole('button', {name: 'count'}));
+      await userEvent.click(screen.getByRole('option', {name: 'avg'}));
+
+      await userEvent.click(screen.getByRole('button', {name: 'Add Chart'}));
+      expect(router.location.query.aggregateField).toEqual(
+        [{groupBy: ''}, {yAxes: ['avg(bar)']}, {yAxes: ['count(message)']}].map(
+          aggregateField => JSON.stringify(aggregateField)
+        )
+      );
+
+      await userEvent.click(screen.getAllByLabelText('Remove Overlay')[0]!);
+      expect(router.location.query.aggregateField).toEqual(
+        [{groupBy: ''}, {yAxes: ['count(message)']}].map(aggregateField =>
+          JSON.stringify(aggregateField)
+        )
+      );
+    });
   });
 
   describe('group by section', () => {
@@ -177,5 +199,37 @@ describe('LogsToolbar', () => {
         )
       );
     });
+
+    it('can add/delete group bys', async function () {
+      const {router} = render(
+        <Wrapper>
+          <LogsToolbar
+            numberTags={{bar: {key: 'bar', name: 'bar'}, foo: {key: 'foo', name: 'foo'}}}
+            stringTags={{
+              message: {key: 'message', name: 'message'},
+              severity: {key: 'severity', name: 'severity'},
+            }}
+          />
+        </Wrapper>
+      );
+
+      await userEvent.click(screen.getByRole('button', {name: '\u2014'}));
+      await userEvent.click(screen.getByRole('option', {name: 'message'}));
+
+      await userEvent.click(screen.getByRole('button', {name: 'Add Group'}));
+      expect(router.location.query.aggregateField).toEqual(
+        [{groupBy: 'message'}, {yAxes: ['count(message)']}, {groupBy: ''}].map(
+          aggregateField => JSON.stringify(aggregateField)
+        )
+      );
+
+      await userEvent.click(screen.getAllByLabelText('Remove Column')[0]!);
+      expect(router.location.query.aggregateField).toEqual(
+        // BUG: a little weird that the 2nd group by moves up to take its place
+        [{groupBy: ''}, {yAxes: ['count(message)']}].map(aggregateField =>
+          JSON.stringify(aggregateField)
+        )
+      );
+    });
   });
 });