fest(insights): add create alert button to backend overview page widgets (#93643)

1. Add create alert buttons to backend overview page widgets
<img width="417" alt="image"
src="https://github.com/user-attachments/assets/7728736e-c928-40f3-bf81-8faae556d684"
/>

2. Update the platform widgets to use the insights standardized
`BaseChartActionDropdown`

Author: DominikB2014

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

@@ -72,6 +72,7 @@ export default function OverviewApiLatencyChartWidget(props: LoadableChartWidget
         organization.features.includes('visibility-explore-view') &&
         !isEmpty && (
           <Toolbar
+            showCreateAlert
             exploreParams={{
               mode: Mode.SAMPLES,
               visualize: [

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

@@ -28,6 +28,11 @@ import {Toolbar} from 'sentry/views/insights/pages/platform/shared/toolbar';
 import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
 import {QueuesWidgetEmptyStateWarning} from 'sentry/views/performance/landing/widgets/components/selectableList';
 
+const ALIASES = {
+  'count(span.duration)': t('Jobs'),
+  'trace_status_rate(internal_error)': t('Error Rate'),
+};
+
 export default function OverviewJobsChartWidget(props: LoadableChartWidgetProps) {
   const organization = useOrganization();
   const {query} = useTransactionNameQuery();
@@ -54,11 +59,11 @@ export default function OverviewJobsChartWidget(props: LoadableChartWidgetProps)
   const plottables = useMemo(() => {
     return [
       new Bars(convertSeriesToTimeseries(data['count(span.duration)']), {
-        alias: t('Jobs'),
+        alias: ALIASES['count(span.duration)'],
         color: theme.gray200,
       }),
       new Line(convertSeriesToTimeseries(data['trace_status_rate(internal_error)']), {
-        alias: t('Error Rate'),
+        alias: ALIASES['trace_status_rate(internal_error)'],
         color: theme.error,
       }),
     ];
@@ -139,6 +144,8 @@ export default function OverviewJobsChartWidget(props: LoadableChartWidgetProps)
         organization.features.includes('visibility-explore-view') &&
         !isEmpty && (
           <Toolbar
+            showCreateAlert
+            aliases={ALIASES}
             exploreParams={{
               mode: Mode.AGGREGATE,
               visualize: [

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

@@ -55,6 +55,11 @@ export function BaseTrafficWidget({
     props.pageFilters
   );
 
+  const aliases = {
+    'count(span.duration)': trafficSeriesName,
+    'trace_status_rate(internal_error)': t('Error Rate'),
+  };
+
   const plottables = useMemo(() => {
     return [
       new Bars(convertSeriesToTimeseries(data['count(span.duration)']), {
@@ -100,6 +105,8 @@ export function BaseTrafficWidget({
         organization.features.includes('visibility-explore-view') &&
         !isEmpty && (
           <Toolbar
+            aliases={aliases}
+            showCreateAlert
             exploreParams={{
               mode: Mode.AGGREGATE,
               visualize: [

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

@@ -1,51 +1,68 @@
 import {Button} from 'sentry/components/core/button';
-import {DropdownMenu} from 'sentry/components/dropdownMenu';
-import {IconEllipsis, IconExpand} from 'sentry/icons';
+import {IconExpand} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import {Dataset} from 'sentry/views/alerts/rules/metric/types';
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {getExploreUrl} from 'sentry/views/explore/utils';
+import {BaseChartActionDropdown} from 'sentry/views/insights/common/components/chartActionDropdown';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {getAlertsUrl} from 'sentry/views/insights/common/utils/getAlertsUrl';
+import {useAlertsProject} from 'sentry/views/insights/common/utils/useAlertsProject';
 
 type ExploreParams = Parameters<typeof getExploreUrl>[0];
 
 interface ToolbarProps {
   onOpenFullScreen: () => void;
+  aliases?: Record<string, string>;
   exploreParams?: Omit<ExploreParams, 'organization' | 'selection'>;
   loaderSource?: LoadableChartWidgetProps['loaderSource'];
+  showCreateAlert?: boolean; // TODO: this is temporary so we can slowly add create alert functionality, in the future all charts that can open in explore can be alerted
 }
 
-export function Toolbar({exploreParams, onOpenFullScreen, loaderSource}: ToolbarProps) {
+export function Toolbar({
+  exploreParams,
+  onOpenFullScreen,
+  loaderSource,
+  aliases,
+  showCreateAlert = false,
+}: ToolbarProps) {
   const organization = useOrganization();
   const {selection} = usePageFilters();
+  const project = useAlertsProject();
+
   const exploreUrl =
     exploreParams && getExploreUrl({...exploreParams, organization, selection});
 
+  const yAxes = exploreParams?.visualize?.flatMap(v => v.yAxes) || [];
+
+  const alertsUrls = yAxes.map((yAxis, index) => {
+    const label = aliases?.[yAxis] ?? yAxis;
+    return {
+      key: `${yAxis}-${index}`,
+      label,
+      to: getAlertsUrl({
+        project,
+        query: exploreParams?.query,
+        dataset: Dataset.EVENTS_ANALYTICS_PLATFORM,
+        pageFilters: selection,
+        aggregate: yAxis,
+        organization,
+      }),
+    };
+  });
+
   return (
     <Widget.WidgetToolbar>
       {exploreUrl ? (
-        <DropdownMenu
-          size="xs"
-          position="bottom-end"
-          trigger={triggerProps => (
-            <Button
-              {...triggerProps}
-              size="xs"
-              borderless
-              icon={<IconEllipsis />}
-              aria-label={t('More actions')}
-            />
-          )}
-          items={[
-            {
-              key: 'open-in-explore',
-              label: t('Open in Explore'),
-              to: exploreUrl,
-            },
-          ]}
+        <BaseChartActionDropdown
+          exploreUrl={exploreUrl}
+          alertMenuOptions={showCreateAlert ? alertsUrls : []}
+          referrer={loaderSource || 'insights.platform.toolbar'}
         />
       ) : null}
+
       {loaderSource !== 'releases-drawer' && (
         <Button
           size="xs"