feat(aci): Setup detector details

Author: scttcper

static/app/types/workflowEngine/dataConditions.tsx

@@ -9,9 +9,16 @@ interface SnubaQuery {
   environment?: string;
 }
 
-export interface DataSource {
+interface QueryObject {
   id: string;
   snubaQuery: SnubaQuery;
+  sourceId: string;
+  type: 'snuba_query_subscription';
+}
+
+export interface DataSource {
+  id: string;
+  queryObj: QueryObject;
   status: number;
   subscription?: string;
 }

static/app/types/workflowEngine/detectors.tsx

@@ -12,9 +12,9 @@ export type DetectorType =
   | 'uptime';
 
 interface NewDetector {
+  conditionGroup: DataConditionGroup;
   config: Record<string, unknown>;
-  dataCondition: DataConditionGroup;
-  dataSource: DataSource;
+  dataSources: DataSource[];
   disabled: boolean;
   name: string;
   projectId: string;
@@ -23,9 +23,10 @@ interface NewDetector {
 }
 
 export interface Detector extends Readonly<NewDetector> {
+  readonly connectedWorkflows: string[];
   readonly createdBy: string;
-  readonly dateCreated: Date;
-  readonly dateUpdated: Date;
+  readonly dateCreated: string;
+  readonly dateUpdated: string;
   readonly id: string;
-  readonly lastTriggered: Date;
+  readonly lastTriggered: string;
 }

static/app/utils/useParams.tsx

@@ -18,6 +18,7 @@ type ParamKeys =
   | 'codeId'
   | 'dataExportId'
   | 'dashboardId'
+  | 'detectorId'
   | 'docIntegrationSlug'
   | 'eventId'
   | 'fineTuneType'

static/app/views/detectors/detail.tsx

@@ -6,6 +6,8 @@ import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {DateTime} from 'sentry/components/dateTime';
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
+import LoadingError from 'sentry/components/loadingError';
+import LoadingIndicator from 'sentry/components/loadingIndicator';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import TimeSince from 'sentry/components/timeSince';
 import {ActionsProvider} from 'sentry/components/workflowEngine/layout/actions';
@@ -16,12 +18,19 @@ import {useWorkflowEngineFeatureGate} from 'sentry/components/workflowEngine/use
 import {IconArrow, IconEdit} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
 import getDuration from 'sentry/utils/duration/getDuration';
 import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
+import useProjects from 'sentry/utils/useProjects';
 import {ConnectedAutomationsList} from 'sentry/views/detectors/components/connectedAutomationList';
 import DetailsPanel from 'sentry/views/detectors/components/detailsPanel';
 import IssuesList from 'sentry/views/detectors/components/issuesList';
-import {makeMonitorBasePathname} from 'sentry/views/detectors/pathnames';
+import {useDetector} from 'sentry/views/detectors/hooks';
+import {
+  makeMonitorBasePathname,
+  makeMonitorDetailsPathname,
+} from 'sentry/views/detectors/pathnames';
 
 type Priority = {
   sensitivity: string;
@@ -33,16 +42,43 @@ const priorities: Priority[] = [
   {sensitivity: 'high', threshold: 10},
 ];
 
+function getEnvironmentFromDetector(detector: Detector) {
+  return detector.dataSources.find(ds => ds.queryObj.snubaQuery.environment)?.queryObj
+    .snubaQuery.environment;
+}
+
 export default function DetectorDetail() {
   const organization = useOrganization();
   useWorkflowEngineFeatureGate({redirect: true});
+  const params = useParams<{detectorId: string}>();
+  const {projects} = useProjects();
+
+  const {
+    data: detector,
+    isPending,
+    isError,
+    refetch,
+  } = useDetector({
+    // TODO: Remove hardcoded project slug or move to project url
+    projectSlug: 'sentry',
+    detectorId: params.detectorId,
+  });
+  const project = projects.find(p => p.id === detector?.projectId);
+
+  if (isPending) {
+    return <LoadingIndicator />;
+  }
+
+  if (isError || !project) {
+    return <LoadingError onRetry={refetch} />;
+  }
 
   return (
-    <SentryDocumentTitle title={'/endpoint'} noSuffix>
+    <SentryDocumentTitle title={detector.name} noSuffix>
       <BreadcrumbsProvider
         crumb={{label: t('Monitors'), to: makeMonitorBasePathname(organization.slug)}}
       >
-        <ActionsProvider actions={<Actions />}>
+        <ActionsProvider actions={<Actions detector={detector} />}>
           <DetailLayout project={{slug: 'project-slug', platform: 'javascript-astro'}}>
             <DetailLayout.Main>
               {/* TODO: Add chart here */}
@@ -81,15 +117,17 @@ export default function DetectorDetail() {
                 <KeyValueTable>
                   <KeyValueTableRow
                     keyName={t('Date created')}
-                    value={<DateTime date={new Date()} dateOnly year />}
+                    value={<DateTime date={detector.dateCreated} dateOnly year />}
                   />
-                  <KeyValueTableRow keyName={t('Created by')} value="Jane Doe" />
+                  <KeyValueTableRow keyName={t('Created by')} value="placeholder" />
                   <KeyValueTableRow
                     keyName={t('Last modified')}
-                    value={<TimeSince date={new Date()} />}
+                    value={<TimeSince date={detector.dateUpdated} />}
+                  />
+                  <KeyValueTableRow
+                    keyName={t('Environment')}
+                    value={getEnvironmentFromDetector(detector)}
                   />
-                  <KeyValueTableRow keyName={t('Team')} value="Platform" />
-                  <KeyValueTableRow keyName={t('Environment')} value="prod" />
                 </KeyValueTable>
               </Section>
             </DetailLayout.Sidebar>
@@ -100,7 +138,8 @@ export default function DetectorDetail() {
   );
 }
 
-function Actions() {
+function Actions({detector}: {detector: Detector}) {
+  const organization = useOrganization();
   const disable = () => {
     window.alert('disable');
   };
@@ -109,7 +148,12 @@ function Actions() {
       <Button onClick={disable} size="sm">
         {t('Disable')}
       </Button>
-      <LinkButton to="edit" priority="primary" icon={<IconEdit />} size="sm">
+      <LinkButton
+        to={`${makeMonitorDetailsPathname(organization.slug, detector.id)}edit/`}
+        priority="primary"
+        icon={<IconEdit />}
+        size="sm"
+      >
         {t('Edit')}
       </LinkButton>
     </Fragment>

static/app/views/detectors/hooks.tsx

@@ -0,0 +1,27 @@
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import type {ApiQueryKey} from 'sentry/utils/queryClient';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import useOrganization from 'sentry/utils/useOrganization';
+
+function getDetectorQueryKey(
+  organizationSlug: string,
+  projectSlug: string,
+  detectorId: string
+): ApiQueryKey {
+  return [`/projects/${organizationSlug}/${projectSlug}/detectors/${detectorId}/`];
+}
+
+interface UseDetectorOptions {
+  detectorId: string;
+  projectSlug: string;
+}
+
+export function useDetector({projectSlug, detectorId}: UseDetectorOptions) {
+  const organization = useOrganization();
+  return useApiQuery<Detector>(
+    getDetectorQueryKey(organization.slug, projectSlug, detectorId),
+    {
+      staleTime: 0,
+    }
+  );
+}

static/app/views/detectors/routes.tsx

@@ -11,7 +11,7 @@ export const detectorRoutes = (
         component={make(() => import('sentry/views/detectors/new-settings'))}
       />
     </Route>
-    <Route path=":monitorId/">
+    <Route path=":detectorId/">
       <IndexRoute component={make(() => import('sentry/views/detectors/detail'))} />
       <Route path="edit/" component={make(() => import('sentry/views/detectors/edit'))} />
     </Route>