setup snuba query details

Author: scttcper

static/app/types/workflowEngine/dataConditions.tsx

@@ -5,24 +5,30 @@ interface SnubaQuery {
   dataset: string;
   id: string;
   query: string;
+  /**
+   * Time window in seconds
+   */
   timeWindow: number;
   environment?: string;
 }
 
 interface QueryObject {
   id: string;
   snubaQuery: SnubaQuery;
-  sourceId: string;
-  type: 'snuba_query_subscription';
+  status: number;
+  subscription: string;
 }
 
-export interface DataSource {
+export interface SnubaQueryDataSource {
   id: string;
+  organizationId: string;
   queryObj: QueryObject;
-  status: number;
-  subscription?: string;
+  sourceId: string;
+  type: 'snuba_query_subscription';
 }
 
+export type DataSource = SnubaQueryDataSource;
+
 export enum DataConditionType {
   // operators
   EQUAL = 'eq',
@@ -75,11 +81,17 @@ export enum DataConditionGroupLogicType {
   NONE = 'none',
 }
 
+export const enum DetectorPriorityLevel {
+  HIGH = 75,
+  MEDIUM = 50,
+  LOW = 25,
+}
+
 export interface NewDataCondition {
-  comparison: any;
+  comparison: string | number;
   comparison_type: DataConditionType;
   condition_group?: DataConditionGroup;
-  condition_result?: any;
+  condition_result?: DetectorPriorityLevel;
 }
 
 export interface DataCondition extends Readonly<NewDataCondition> {

static/app/views/detectors/components/detailsPanel.tsx

@@ -4,17 +4,46 @@ import {Flex} from 'sentry/components/container/flex';
 import {Container} from 'sentry/components/workflowEngine/ui/container';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import type {SnubaQueryDataSource} from 'sentry/types/workflowEngine/dataConditions';
+import type {Detector} from 'sentry/types/workflowEngine/detectors';
+import {getExactDuration} from 'sentry/utils/duration/getExactDuration';
+
+interface DetailsPanelProps {
+  detector: Detector;
+}
+
+function SnubaQueryDetails({dataSource}: {dataSource: SnubaQueryDataSource}) {
+  return (
+    <Container>
+      <Flex column gap={space(0.5)}>
+        <Heading>{t('Query:')}</Heading>
+        <Query>
+          <Label>{t('visualize:')}</Label>{' '}
+          <Value>{dataSource.queryObj.snubaQuery.aggregate}</Value>
+          <Label>{t('where:')}</Label>{' '}
+          <Value>{dataSource.queryObj.snubaQuery.query}</Value>
+        </Query>
+      </Flex>
+      <Flex gap={space(0.5)}>
+        <Heading>{t('Threshold:')}</Heading>
+        <Value>{getExactDuration(dataSource.queryObj.snubaQuery.timeWindow, true)}</Value>
+      </Flex>
+    </Container>
+  );
+}
+
+function DetailsPanel({detector}: DetailsPanelProps) {
+  if (detector.dataSources[0]?.type === 'snuba_query_subscription') {
+    return <SnubaQueryDetails dataSource={detector.dataSources[0]} />;
+  }
 
-// TODO: Make component flexible for different alert types
-function DetailsPanel() {
   return (
     <Container>
       <Flex column gap={space(0.5)}>
         <Heading>{t('Query:')}</Heading>
         <Query>
-          <Label>{t('visualize:')}</Label> <Value>{t('p75')}</Value>
-          <Label>{t('where:')}</Label> <Value>{t('device.name is "Chrome"')}</Value>
-          <Label>{t('grouped by:')}</Label> <Value>{t('release')}</Value>
+          <Label>{t('visualize:')}</Label> <Value>placeholder</Value>
+          <Label>{t('where:')}</Label> <Value>placeholder</Value>
         </Query>
       </Flex>
       <Heading>{t('Threshold:')}</Heading>

static/app/views/detectors/detail.tsx

@@ -42,7 +42,7 @@ const priorities: Priority[] = [
   {sensitivity: 'high', threshold: 10},
 ];
 
-function getEnvironmentFromDetector(detector: Detector) {
+function getDetectorEnvironment(detector: Detector) {
   return detector.dataSources.find(ds => ds.queryObj.snubaQuery.environment)?.queryObj
     .snubaQuery.environment;
 }
@@ -75,7 +75,7 @@ export default function DetectorDetail() {
         crumb={{label: t('Monitors'), to: makeMonitorBasePathname(organization.slug)}}
       >
         <ActionsProvider actions={<Actions detector={detector} />}>
-          <DetailLayout project={{slug: 'project-slug', platform: 'javascript-astro'}}>
+          <DetailLayout project={project}>
             <DetailLayout.Main>
               {/* TODO: Add chart here */}
               <Section title={t('Ongoing Issues')}>
@@ -88,7 +88,7 @@ export default function DetectorDetail() {
             </DetailLayout.Main>
             <DetailLayout.Sidebar>
               <Section title={t('Detect')}>
-                <DetailsPanel />
+                <DetailsPanel detector={detector} />
               </Section>
               <Section title={t('Assign')}>
                 {t('Assign to %s', 'admin@sentry.io')}
@@ -122,7 +122,7 @@ export default function DetectorDetail() {
                   />
                   <KeyValueTableRow
                     keyName={t('Environment')}
-                    value={getEnvironmentFromDetector(detector)}
+                    value={getDetectorEnvironment(detector)}
                   />
                 </KeyValueTable>
               </Section>