analytics(insights): pass in referrer to open in explore and create alert in charts (#93901)

Under the hood, our track analytics functions automatically read the
`referrer` query param, and add it as the `custom_referrer` attribute.


https://github.com/getsentry/sentry/blob/c17702cc58f623bd71844cb07e81142f85b0a5b1/static/gsApp/utils/rawTrackAnalyticsEvent.tsx#L170

This pr ensure the explore url and alerts url contain a referrer when
navigating from an insights chart

Author: DominikB2014

static/app/views/explore/multiQueryMode/locationUtils.tsx

@@ -298,13 +298,15 @@ type CompareRouteProps = {
   mode: Mode;
   organization: Organization;
   queries: WritableExploreQueryParts[];
+  referrer?: string;
 };
 
 export function generateExploreCompareRoute({
   organization,
   location,
   mode,
   queries,
+  referrer,
 }: CompareRouteProps): LocationDescriptorObject {
   const url = getCompareBaseUrl(organization);
   const compareQueries = queries.map(query => ({
@@ -318,17 +320,22 @@ export function generateExploreCompareRoute({
   if (compareQueries.length < 2) {
     compareQueries.push(DEFAULT_QUERY);
   }
+  const query = {
+    [URL_PARAM.END]: location.query.end,
+    [URL_PARAM.START]: location.query.start,
+    [URL_PARAM.UTC]: location.query.utc,
+    [URL_PARAM.PERIOD]: location.query.statsPeriod,
+    [URL_PARAM.PROJECT]: location.query.project,
+    [URL_PARAM.ENVIRONMENT]: location.query.environment,
+    queries: getQueriesAsUrlParam(compareQueries),
+  };
+
+  if (referrer) {
+    query.referrer = referrer;
+  }
 
   return {
     pathname: url,
-    query: {
-      [URL_PARAM.END]: location.query.end,
-      [URL_PARAM.START]: location.query.start,
-      [URL_PARAM.UTC]: location.query.utc,
-      [URL_PARAM.PERIOD]: location.query.statsPeriod,
-      [URL_PARAM.PROJECT]: location.query.project,
-      [URL_PARAM.ENVIRONMENT]: location.query.environment,
-      queries: getQueriesAsUrlParam(compareQueries),
-    },
+    query,
   };
 }

static/app/views/explore/utils.tsx

@@ -54,6 +54,7 @@ export function getExploreUrl({
   field,
   id,
   title,
+  referrer,
 }: {
   organization: Organization;
   aggregateField?: Array<GroupBy | BaseVisualize>;
@@ -63,6 +64,7 @@ export function getExploreUrl({
   interval?: string;
   mode?: Mode;
   query?: string;
+  referrer?: string;
   selection?: PageFilters;
   sort?: string;
   title?: string;
@@ -87,6 +89,7 @@ export function getExploreUrl({
     utc,
     id,
     title,
+    referrer,
   };
 
   return (

static/app/views/insights/common/components/chartActionDropdown.tsx

@@ -53,6 +53,7 @@ export function ChartActionDropdown({
     query: search?.formatString(),
     sort: undefined,
     groupBy,
+    referrer,
   });
 
   const alertsUrls = yAxes.map((yAxis, index) => {

static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx

@@ -72,6 +72,7 @@ export default function HttpDomainSummaryResponseCodesChartWidget(
       ...query,
       chartType: ChartType.LINE,
     })),
+    referrer,
   });
 
   const extraActions = [
@@ -89,6 +90,7 @@ export default function HttpDomainSummaryResponseCodesChartWidget(
           pageFilters: selection,
           dataset: Dataset.EVENTS_ANALYTICS_PLATFORM,
           query: query.query,
+          referrer,
         }),
       }))}
     />,

static/app/views/insights/common/components/widgets/httpResponseCodesChartWidget.tsx

@@ -70,6 +70,7 @@ export default function HttpResponseCodesChartWidget(props: LoadableChartWidgetP
       ...query,
       chartType: ChartType.LINE,
     })),
+    referrer,
   });
 
   const extraActions = [
@@ -87,6 +88,7 @@ export default function HttpResponseCodesChartWidget(props: LoadableChartWidgetP
           pageFilters: selection,
           dataset: Dataset.EVENTS_ANALYTICS_PLATFORM,
           query: query.query,
+          referrer,
         }),
       }))}
     />,

static/app/views/insights/common/utils/getAlertsUrl.tsx

@@ -15,6 +15,7 @@ export function getAlertsUrl({
   name,
   interval,
   dataset = Dataset.GENERIC_METRICS,
+  referrer,
 }: {
   aggregate: string;
   organization: Organization;
@@ -24,6 +25,7 @@ export function getAlertsUrl({
   name?: string;
   project?: Project;
   query?: string;
+  referrer?: string;
 }) {
   const statsPeriod = getStatsPeriod(pageFilters);
   const environment = pageFilters.environments;
@@ -38,6 +40,7 @@ export function getAlertsUrl({
     environment,
     name,
     interval: supportedInterval,
+    referrer,
   };
 
   return (

static/app/views/insights/http/components/charts/responseCodeCountChart.tsx

@@ -92,6 +92,7 @@ export function ResponseCodeCountChart({
     query: search?.formatString(),
     sort: undefined,
     groupBy,
+    referrer,
   });
 
   const extraActions = [
@@ -109,6 +110,7 @@ export function ResponseCodeCountChart({
           pageFilters: selection,
           dataset: Dataset.EVENTS_ANALYTICS_PLATFORM,
           query: query.query,
+          referrer,
         }),
       }))}
     />,

static/app/views/insights/pages/platform/shared/toolbar.tsx

@@ -32,8 +32,10 @@ export function Toolbar({
   const {selection} = usePageFilters();
   const project = useAlertsProject();
 
+  const referrer = loaderSource || 'insights.platform.toolbar';
+
   const exploreUrl =
-    exploreParams && getExploreUrl({...exploreParams, organization, selection});
+    exploreParams && getExploreUrl({...exploreParams, organization, selection, referrer});
 
   const yAxes = exploreParams?.visualize?.flatMap(v => v.yAxes) || [];
 
@@ -49,6 +51,7 @@ export function Toolbar({
         pageFilters: selection,
         aggregate: yAxis,
         organization,
+        referrer,
       }),
     };
   });
@@ -59,7 +62,7 @@ export function Toolbar({
         <BaseChartActionDropdown
           exploreUrl={exploreUrl}
           alertMenuOptions={showCreateAlert ? alertsUrls : []}
-          referrer={loaderSource || 'insights.platform.toolbar'}
+          referrer={referrer}
         />
       ) : null}
 

static/app/views/insights/queues/charts/throughputChart.tsx

@@ -87,6 +87,7 @@ export function ThroughputChart({id, error, destination, pageFilters, referrer}:
     query: search?.formatString(),
     sort: undefined,
     groupBy: [groupBy],
+    referrer,
   });
 
   const extraActions = [
@@ -103,6 +104,7 @@ export function ThroughputChart({id, error, destination, pageFilters, referrer}:
             pageFilters: selection,
             aggregate: yAxis,
             organization,
+            referrer,
           }),
         },
         {
@@ -115,6 +117,7 @@ export function ThroughputChart({id, error, destination, pageFilters, referrer}:
             pageFilters: selection,
             aggregate: yAxis,
             organization,
+            referrer,
           }),
         },
       ]}