jailable releases hook

Author: billyvg

static/app/views/releases/drawer/releasesDrawerList.tsx

@@ -1,8 +1,10 @@
-import {useCallback, useRef} from 'react';
+import {Fragment, type ReactElement, useCallback, useContext, useRef} from 'react';
+import styled from '@emotion/styled';
 import type {SeriesOption} from 'echarts';
 import type {MarkLineOption} from 'echarts/types/dist/shared';
 import type {EChartsInstance} from 'echarts-for-react';
 
+import {DateTime} from 'sentry/components/dateTime';
 import {
   EventDrawerBody,
   EventDrawerContainer,
@@ -12,18 +14,37 @@ import {
   NavigationCrumbs,
 } from 'sentry/components/events/eventDrawer';
 import {t, tn} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import type {ReactEchartsRef, SeriesDataUnit} from 'sentry/types/echarts';
+import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
+import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
+import type {ChartRendererProps} from 'sentry/views/releases/releaseBubbles/types';
+
+type ChartRenderer = (props: ChartRendererProps) => ReactElement;
+import {
+  ReleasesDrawerContext,
+  ReleasesDrawerProvider,
+} from 'sentry/views/releases/drawer/releasesDrawerContext';
 
 import {ReleaseDrawerTable} from './releasesDrawerTable';
 
 interface ReleasesDrawerListProps {
+  charts: Record<string, ChartRenderer>;
   endTs: number;
   environments: readonly string[];
   projects: readonly number[];
   startTs: number;
+  /**
+   * A renderer function that returns a chart. It is called with the trimmed
+   * list of releases and timeSeries. It currently uses the
+   * `TimeSeriesWidgetVisualization` components props. It's possible we change
+   * it to make the props more generic, e.g. pass start/end timestamps and do
+   * the series manipulation when we call the bubble hook.
+   */
+  chartRenderer?: (rendererProps: ChartRendererProps) => ReactElement;
 }
 
 type MarkLineDataCallbackFn = (item: SeriesDataUnit) => boolean;
@@ -84,7 +105,9 @@ export function ReleasesDrawerList({
   endTs,
   projects,
   environments,
+  charts,
 }: ReleasesDrawerListProps) {
+  const location = useLocation();
   const start = new Date(startTs);
   const end = new Date(endTs);
   const pageFilters = usePageFilters();
@@ -95,6 +118,7 @@ export function ReleasesDrawerList({
       end: endTs ? new Date(endTs).toISOString() : null,
     },
   });
+  // const {getChart} = useContext(ReleasesDrawerContext);
   const chartRef = useRef<ReactEchartsRef | null>(null);
 
   const handleMouseOverRelease = useCallback((release: string) => {
@@ -127,6 +151,9 @@ export function ReleasesDrawerList({
       label: t('Releases'),
     },
   ];
+  const chartRenderer = charts.get(String(location.query.rdChartId));
+  // const chartRenderer = charts[String(location.query.rdChartId)];
+  // const chartRenderer = getChart(String(location.query.rdChartId));
 
   return (
     <EventDrawerContainer>
@@ -137,6 +164,42 @@ export function ReleasesDrawerList({
         <Header>{title}</Header>
       </EventNavigator>
       <EventDrawerBody>
+        {chartRenderer ? (
+          <ChartContainer>
+            <Widget
+              Title={
+                <Fragment>
+                  {t('Releases from ')}
+                  <DateTime date={start} /> <span>{t('to')}</span> <DateTime date={end} />
+                </Fragment>
+              }
+              Visualization={chartRenderer?.({
+                ref: (e: ReactEchartsRef | null) => {
+                  chartRef.current = e;
+
+                  if (e) {
+                    // When chart is mounted, zoom the chart into the relevant
+                    // bucket
+                    e.getEchartsInstance().dispatchAction({
+                      type: 'dataZoom',
+                      batch: [
+                        {
+                          // data value at starting location
+                          startValue: startTs,
+                          // data value at ending location
+                          endValue: endTs,
+                        },
+                      ],
+                    });
+                  }
+                },
+                releases,
+                start,
+                end,
+              })}
+            />
+          </ChartContainer>
+        ) : null}
         <ReleaseDrawerTable
           projects={projects}
           environments={environments}
@@ -149,3 +212,7 @@ export function ReleasesDrawerList({
     </EventDrawerContainer>
   );
 }
+
+const ChartContainer = styled('div')`
+  margin-bottom: ${space(2)};
+`;

static/app/views/releases/drawer/useReleasesDrawer.tsx

@@ -1,4 +1,4 @@
-import {useEffect} from 'react';
+import {type ReactElement, useCallback, useEffect, useState} from 'react';
 import omit from 'lodash/omit';
 
 import useDrawer from 'sentry/components/globalDrawer';
@@ -9,6 +9,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
 import {ReleasesDrawerDetails} from 'sentry/views/releases/drawer/releasesDrawerDetails';
 import {ReleasesDrawerList} from 'sentry/views/releases/drawer/releasesDrawerList';
+import type {ChartRendererProps} from 'sentry/views/releases/releaseBubbles/types';
 
 const RELEASES_DRAWER_FIELD_MAP = {
   showReleasesDrawer: decodeScalar,
@@ -25,6 +26,10 @@ function cleanLocationQuery(query: Record<string, string[] | string | null | und
   return omit(query, RELEASES_DRAWER_FIELDS);
 }
 
+type ChartRenderer = (props: ChartRendererProps) => ReactElement;
+
+const initialState = new Map();
+
 export function useReleasesDrawer() {
   const {
     releaseProjectId,
@@ -37,9 +42,20 @@ export function useReleasesDrawer() {
   } = useLocationQuery({
     fields: RELEASES_DRAWER_FIELD_MAP,
   });
+  const [charts, setCharts] = useState<Map<string, ChartRenderer>>(initialState);
   const navigate = useNavigate();
   const location = useLocation();
   const {closeDrawer, openDrawer} = useDrawer();
+  const registerChart = (id: string, chartRenderer: ChartRenderer) => {
+    setCharts(state => {
+      state.set(id, chartRenderer);
+      return state;
+    });
+  };
+
+  const cleanup = useCallback(() => {
+    charts.clear();
+  }, [charts]);
 
   useEffect(() => {
     if (showReleasesDrawer !== '1') {
@@ -64,6 +80,7 @@ export function useReleasesDrawer() {
       openDrawer(
         () => (
           <ReleasesDrawerList
+            charts={charts}
             environments={rdEnv}
             projects={rdProject.map(Number)}
             startTs={Number(rdStart)}
@@ -89,6 +106,7 @@ export function useReleasesDrawer() {
       closeDrawer();
     };
   }, [
+    charts,
     closeDrawer,
     openDrawer,
     location.query,
@@ -101,4 +119,6 @@ export function useReleasesDrawer() {
     releaseProjectId,
     showReleasesDrawer,
   ]);
+
+  return {registerChart, cleanup, charts};
 }

static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef} from 'react';
+import {type ReactElement, useContext, useEffect, useMemo, useRef} from 'react';
 import {type Theme, useTheme} from '@emotion/react';
 import type {
   CustomSeriesOption,
@@ -29,16 +29,22 @@ import {type ReactRouter3Navigate, useNavigate} from 'sentry/utils/useNavigate';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useUser} from 'sentry/utils/useUser';
+import {ReleasesDrawerContext} from 'sentry/views/releases/drawer/releasesDrawerContext';
+import {useReleasesDrawer} from 'sentry/views/releases/drawer/useReleasesDrawer';
 import {
   BUBBLE_AREA_SERIES_ID,
   BUBBLE_SERIES_ID,
 } from 'sentry/views/releases/releaseBubbles/constants';
 import {createReleaseBubbleHighlighter} from 'sentry/views/releases/releaseBubbles/createReleaseBubbleHighlighter';
-import type {Bucket} from 'sentry/views/releases/releaseBubbles/types';
+import type {
+  Bucket,
+  ChartRendererProps,
+} from 'sentry/views/releases/releaseBubbles/types';
 import {createReleaseBuckets} from 'sentry/views/releases/releaseBubbles/utils/createReleaseBuckets';
 
 interface CreateReleaseBubbleMouseListenersParams {
   alignInMiddle: boolean;
+  chartId: string;
   color: string;
   environments: readonly string[];
   location: LocationDescriptorObject;
@@ -51,6 +57,7 @@ interface CreateReleaseBubbleMouseListenersParams {
  * main chart when a release bubble is hovered over.
  */
 function createReleaseBubbleMouseListeners({
+  chartId,
   alignInMiddle,
   navigate,
   color,
@@ -76,6 +83,7 @@ function createReleaseBubbleMouseListeners({
         query: {
           ...location.query,
           showReleasesDrawer: 1,
+          rdChartId: chartId,
           rdStart: data.start,
           rdEnd: data.end,
           rdProject: projects,
@@ -327,6 +335,16 @@ ${t('Click to expand')}
 }
 
 interface UseReleaseBubblesParams {
+  /**
+   * A unique ID for the chart so that it can be deeplinked to for the releases drawer.
+   */
+  chartId: string;
+  /**
+   * Chart rendering function that is used by the Releases Drawer. This is
+   * used as an "easy" way to show the same chart in the Global Drawer,
+   * especially in the case of a new page load.
+   */
+  chartRenderer: (props: ChartRendererProps) => ReactElement;
   /**
    * Align the starting timestamp to the middle of the release bubble (e.g. if
    * we want to match ECharts' bar charts), otherwise we draw starting at
@@ -368,6 +386,8 @@ export function useReleaseBubbles({
   releases,
   minTime,
   maxTime,
+  chartId,
+  chartRenderer,
   datetime,
   environments,
   projects,
@@ -383,6 +403,8 @@ export function useReleaseBubbles({
   const theme = useTheme();
   const {options} = useUser();
   const {selection} = usePageFilters();
+  const {cleanup, charts, registerChart} = useReleasesDrawer();
+  // const {registerChart} = useContext(ReleasesDrawerContext);
   // `maxTime` refers to the max time on x-axis for charts.
   // There may be the need to include releases that are > maxTime (e.g. in the
   // case of relative date selection). This is used for the tooltip to show the
@@ -395,6 +417,22 @@ export function useReleaseBubbles({
   const chartRef = useRef<ReactEchartsRef | null>(null);
   const hasReleaseBubbles = organization.features.includes('release-bubbles-ui');
   const totalBubblePaddingY = bubblePadding * 2;
+
+  useEffect(() => {
+    if (hasReleaseBubbles) {
+      registerChart(chartId, chartRenderer);
+    }
+
+    return () => {};
+  }, [chartId, chartRenderer, hasReleaseBubbles, registerChart]);
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+
+  console.log(charts);
   const defaultBubbleXAxis = useMemo(
     () => ({
       axisLine: {onZero: true},
@@ -470,7 +508,7 @@ export function useReleaseBubbles({
     return {
       connectReleaseBubbleChartRef: () => {},
       releaseBubbleEventHandlers: {},
-      ReleaseBubbleSeries: null,
+      releaseBubbleSeries: null,
       releaseBubbleXAxis: {},
       releaseBubbleGrid: {},
     };
@@ -483,6 +521,7 @@ export function useReleaseBubbles({
      * An object map of ECharts event handlers. These should be spread onto a Chart component
      */
     releaseBubbleEventHandlers: createReleaseBubbleMouseListeners({
+      chartId,
       alignInMiddle,
       navigate,
       location,