feat(ourlogs): Use the explore chart widget to support the context actions (#89643)

This lets you switch to bar/line/area chart, and in the future will
support adding to dashboard and creating alerts.

Author: colin-sentry

static/app/views/explore/charts/index.spec.tsx

@@ -4,6 +4,7 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {DurationUnit} from 'sentry/utils/discover/fields';
 import {ExploreCharts} from 'sentry/views/explore/charts';
+import {defaultVisualizes} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 
 describe('ExploreCharts', () => {
   it('renders the progressive loading indicator when the widget is progressively loading', async () => {
@@ -28,6 +29,8 @@ describe('ExploreCharts', () => {
         query={''}
         timeseriesResult={mockTimeseriesResult}
         isProgressivelyLoading
+        visualizes={defaultVisualizes()}
+        setVisualizes={() => {}}
       />,
       {
         organization: OrganizationFixture({
@@ -47,6 +50,8 @@ describe('ExploreCharts', () => {
         query={''}
         timeseriesResult={mockTimeseriesResult}
         isProgressivelyLoading={false}
+        visualizes={defaultVisualizes()}
+        setVisualizes={() => {}}
       />
     );
 

static/app/views/explore/charts/index.tsx

@@ -23,10 +23,7 @@ import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {ConfidenceFooter} from 'sentry/views/explore/charts/confidenceFooter';
 import ChartContextMenu from 'sentry/views/explore/components/chartContextMenu';
 import {getProgressiveLoadingIndicator} from 'sentry/views/explore/components/progressiveLoadingIndicator';
-import {
-  useExploreVisualizes,
-  useSetExploreVisualizes,
-} from 'sentry/views/explore/contexts/pageParamsContext';
+import type {Visualize} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval';
 import {useTopEvents} from 'sentry/views/explore/hooks/useTopEvents';
 import {CHART_HEIGHT, INGESTION_DELAY} from 'sentry/views/explore/settings';
@@ -40,7 +37,10 @@ interface ExploreChartsProps {
   canUsePreviousResults: boolean;
   confidences: Confidence[];
   query: string;
+  setVisualizes: (visualizes: Visualize[]) => void;
   timeseriesResult: ReturnType<typeof useSortedTimeSeries>;
+  visualizes: Visualize[];
+  hideContextMenu?: boolean;
   isProgressivelyLoading?: boolean;
 }
 
@@ -67,10 +67,11 @@ export function ExploreCharts({
   query,
   timeseriesResult,
   isProgressivelyLoading,
+  visualizes,
+  setVisualizes,
+  hideContextMenu,
 }: ExploreChartsProps) {
   const theme = useTheme();
-  const visualizes = useExploreVisualizes();
-  const setVisualizes = useSetExploreVisualizes();
   const [interval, setInterval, intervalOptions] = useChartInterval();
   const topEvents = useTopEvents();
   const isTopN = defined(topEvents) && topEvents > 0;
@@ -275,13 +276,19 @@ export function ExploreCharts({
                     options={intervalOptions}
                   />
                 </Tooltip>,
-                <ChartContextMenu
-                  key="context"
-                  visualizeYAxes={chartInfo.yAxes}
-                  query={query}
-                  interval={interval}
-                  visualizeIndex={index}
-                />,
+                [
+                  ...(hideContextMenu
+                    ? []
+                    : [
+                        <ChartContextMenu
+                          key="context"
+                          visualizeYAxes={chartInfo.yAxes}
+                          query={query}
+                          interval={interval}
+                          visualizeIndex={index}
+                        />,
+                      ]),
+                ],
               ]}
               revealActions="always"
               Visualization={

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

@@ -1,4 +1,4 @@
-import {useCallback} from 'react';
+import {useCallback, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {openModal} from 'sentry/actionCreators/modal';
@@ -14,6 +14,8 @@ import {IconTable} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
+import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import {ExploreCharts} from 'sentry/views/explore/charts';
 import SchemaHintsList, {
   SchemaHintsSection,
 } from 'sentry/views/explore/components/schemaHintsList';
@@ -31,15 +33,19 @@ import {
   useSetLogsPageParams,
   useSetLogsQuery,
 } from 'sentry/views/explore/contexts/logs/logsPageParams';
+import type {Visualize} from 'sentry/views/explore/contexts/pageParamsContext/visualizes';
 import {useTraceItemAttributes} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import {useLogAnalytics} from 'sentry/views/explore/hooks/useAnalytics';
+import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval';
 import {HiddenColumnEditorLogFields} from 'sentry/views/explore/logs/constants';
-import {LogsChart} from 'sentry/views/explore/logs/logsChart';
 import {LogsTable} from 'sentry/views/explore/logs/logsTable';
+import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 import {useExploreLogsTable} from 'sentry/views/explore/logs/useLogsQuery';
 import {ColumnEditorModal} from 'sentry/views/explore/tables/columnEditorModal';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 import type {DefaultPeriod, MaxPickableDays} from 'sentry/views/explore/utils';
+import {ChartType} from 'sentry/views/insights/common/components/chart';
+import {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries';
 
 export type LogsTabProps = {
   defaultPeriod: DefaultPeriod;
@@ -59,6 +65,25 @@ export function LogsTabContent({
   const setLogsPageParams = useSetLogsPageParams();
   const tableData = useExploreLogsTable({});
 
+  const [interval] = useChartInterval();
+
+  const timeseriesResult = useSortedTimeSeries(
+    {
+      search: logsSearch,
+      yAxis: [`count(${OurLogKnownFieldKey.MESSAGE})`],
+      interval,
+    },
+    'explore.ourlogs.main-chart',
+    DiscoverDatasets.OURLOGS
+  );
+  const [visualizes, setVisualizes] = useState<Visualize[]>([
+    {
+      chartType: ChartType.BAR,
+      yAxes: [`count(${OurLogKnownFieldKey.MESSAGE})`],
+      label: 'A',
+    },
+  ]);
+
   const {attributes: stringAttributes, isLoading: stringAttributesLoading} =
     useTraceItemAttributes('string');
   const {attributes: numberAttributes, isLoading: numberAttributesLoading} =
@@ -142,7 +167,16 @@ export function LogsTabContent({
           </Feature>
           <Feature features="organizations:ourlogs-graph">
             <LogsItemContainer>
-              <LogsChart />
+              <ExploreCharts
+                canUsePreviousResults
+                confidences={['high']}
+                query={logsSearch.formatString()}
+                timeseriesResult={timeseriesResult}
+                visualizes={visualizes}
+                setVisualizes={setVisualizes}
+                // TODO: we do not support log alerts nor adding to dashboards yet
+                hideContextMenu
+              />
             </LogsItemContainer>
           </Feature>
           <LogsItemContainer>

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

@@ -43,6 +43,7 @@ import {
   useExploreVisualizes,
   useSetExplorePageParams,
   useSetExploreQuery,
+  useSetExploreVisualizes,
 } from 'sentry/views/explore/contexts/pageParamsContext';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {
@@ -86,6 +87,7 @@ export function SpansTabContentImpl({
   const {selection} = usePageFilters();
   const mode = useExploreMode();
   const visualizes = useExploreVisualizes();
+  const setVisualizes = useSetExploreVisualizes();
   const [samplesTab, setSamplesTab] = useTab();
 
   const {tags: numberTags, isLoading: numberTagsLoading} = useSpanTags('number');
@@ -282,6 +284,8 @@ export function SpansTabContentImpl({
               query={query}
               timeseriesResult={timeseriesResult}
               isProgressivelyLoading={timeseriesIsProgressivelyLoading}
+              visualizes={visualizes}
+              setVisualizes={setVisualizes}
             />
             <ExploreTables
               aggregatesTableResult={aggregatesTableResult}