feat(aci): Add an open in explore button to metric detector charts (#104301)

Author: malwilley

static/app/views/detectors/components/details/metric/chart.tsx

@@ -1,28 +1,32 @@
 import {useMemo} from 'react';
 import {type Theme} from '@emotion/react';
-import styled from '@emotion/styled';
 import type {YAXisComponentOption} from 'echarts';
 
+import Feature from 'sentry/components/acl/feature';
 import {AreaChart, type AreaChartProps} from 'sentry/components/charts/areaChart';
 import {defaultFormatAxisLabel} from 'sentry/components/charts/components/tooltip';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
 import {useChartZoom} from 'sentry/components/charts/useChartZoom';
 import {Alert} from 'sentry/components/core/alert';
-import {Flex} from 'sentry/components/core/layout';
+import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Container, Flex} from 'sentry/components/core/layout';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import Placeholder from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {GroupOpenPeriod} from 'sentry/types/group';
 import type {MetricDetector, SnubaQuery} from 'sentry/types/workflowEngine/detectors';
+import {decodeScalar} from 'sentry/utils/queryString';
 import type RequestError from 'sentry/utils/requestError/requestError';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
+import useOrganization from 'sentry/utils/useOrganization';
 import {
   buildDetectorZoomQuery,
   computeZoomRangeMs,
 } from 'sentry/views/detectors/components/details/common/buildDetectorZoomQuery';
+import {getDetectorOpenInDestination} from 'sentry/views/detectors/components/details/metric/getDetectorOpenInDestination';
 import {useDetectorChartAxisBounds} from 'sentry/views/detectors/components/details/metric/utils/useDetectorChartAxisBounds';
 import {getDatasetConfig} from 'sentry/views/detectors/datasetConfig/getDatasetConfig';
 import {getDetectorDataset} from 'sentry/views/detectors/datasetConfig/getDetectorDataset';
@@ -370,10 +374,73 @@ export function useMetricDetectorChart({
   };
 }
 
+interface OpenInButtonProps {
+  detector: MetricDetector;
+}
+
+function OpenInButton({detector}: OpenInButtonProps) {
+  const organization = useOrganization();
+  const location = useLocation();
+  const destination = getDetectorOpenInDestination({
+    detector,
+    organization,
+    statsPeriod: decodeScalar(location.query.statsPeriod),
+    start: decodeScalar(location.query.start),
+    end: decodeScalar(location.query.end),
+  });
+
+  if (!destination?.to) {
+    return null;
+  }
+
+  return (
+    <Feature features="visibility-explore-view">
+      <LinkButton size="xs" to={destination.to}>
+        {destination.buttonText}
+      </LinkButton>
+    </Feature>
+  );
+}
+
+function ChartContainer({
+  children,
+  overflow,
+}: {
+  children: React.ReactNode;
+  overflow?: 'hidden';
+}) {
+  return (
+    <Container border="muted" radius="md" overflow={overflow}>
+      {children}
+    </Container>
+  );
+}
+
+function ChartBody({children}: {children: React.ReactNode}) {
+  return <Container padding="lg">{children}</Container>;
+}
+
+function ChartFooter({detector}: {detector: MetricDetector}) {
+  return (
+    <Flex justify="end" padding="lg" borderTop="muted">
+      <OpenInButton detector={detector} />
+    </Flex>
+  );
+}
+
 export function MetricDetectorDetailsChart({detector}: MetricDetectorDetailsChartProps) {
   const location = useLocation();
+  const organization = useOrganization();
   const dateParams = normalizeDateTimeParams(location.query);
 
+  const destination = getDetectorOpenInDestination({
+    detector,
+    organization,
+    statsPeriod: decodeScalar(location.query.statsPeriod),
+    start: decodeScalar(location.query.start),
+    end: decodeScalar(location.query.end),
+  });
+
   const {data: openPeriods = []} = useOpenPeriods({
     detectorId: detector.id,
     ...dateParams,
@@ -388,47 +455,45 @@ export function MetricDetectorDetailsChart({detector}: MetricDetectorDetailsChar
 
   if (isLoading) {
     return (
-      <Flex height={CHART_HEIGHT} justify="center" align="center">
-        <Placeholder height={`${CHART_HEIGHT}px`} />
-      </Flex>
+      <ChartContainer>
+        <ChartBody>
+          <Flex height={CHART_HEIGHT} justify="center" align="center">
+            <Placeholder height={`${CHART_HEIGHT}px`} />
+          </Flex>
+        </ChartBody>
+        {destination && <ChartFooter detector={detector} />}
+      </ChartContainer>
     );
   }
   if (error || !chartProps) {
     const errorMessage =
       typeof error?.responseJSON?.detail === 'string' ? error.responseJSON.detail : null;
     return (
-      <ChartContainer style={{overflow: 'hidden'}}>
+      <ChartContainer overflow="hidden">
         {errorMessage && (
           <Alert system type="error">
             {errorMessage}
           </Alert>
         )}
-        <ChartContainerBody>
+        <ChartBody>
           <Flex justify="center" align="center">
             <ErrorPanel height={`${CHART_HEIGHT - 45}px`}>
               <IconWarning color="gray300" size="lg" />
               <div>{t('Error loading chart data')}</div>
             </ErrorPanel>
           </Flex>
-        </ChartContainerBody>
+        </ChartBody>
+        {destination && <ChartFooter detector={detector} />}
       </ChartContainer>
     );
   }
 
   return (
     <ChartContainer>
-      <ChartContainerBody>
+      <ChartBody>
         <AreaChart {...chartProps} />
-      </ChartContainerBody>
+      </ChartBody>
+      {destination && <ChartFooter detector={detector} />}
     </ChartContainer>
   );
 }
-
-const ChartContainer = styled('div')`
-  border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadius};
-`;
-
-const ChartContainerBody = styled('div')`
-  padding: ${p => p.theme.space.xs} ${p => p.theme.space.lg} ${p => p.theme.space.xs};
-`;