import {Fragment} from 'react'; import styled from '@emotion/styled'; import {OnDemandWarningIcon} from 'sentry/components/alerts/onDemandMetricAlert'; import ActorAvatar from 'sentry/components/avatar/actorAvatar'; import AlertBadge from 'sentry/components/badge/alertBadge'; import {SectionHeading} from 'sentry/components/charts/styles'; import {DateTime} from 'sentry/components/dateTime'; import Duration from 'sentry/components/duration'; import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable'; import TimeSince from 'sentry/components/timeSince'; import {IconDiamond} from 'sentry/icons'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Actor} from 'sentry/types'; import {ActivationConditionType, MonitorType} from 'sentry/types/alerts'; import getDynamicText from 'sentry/utils/getDynamicText'; import {getSearchFilters, isOnDemandSearchKey} from 'sentry/utils/onDemandMetrics/index'; import {capitalize} from 'sentry/utils/string/capitalize'; import {COMPARISON_DELTA_OPTIONS} from 'sentry/views/alerts/rules/metric/constants'; import type {Action, MetricRule} from 'sentry/views/alerts/rules/metric/types'; import { AlertRuleThresholdType, AlertRuleTriggerType, } from 'sentry/views/alerts/rules/metric/types'; import {IncidentStatus} from 'sentry/views/alerts/types'; import {AlertWizardAlertNames} from 'sentry/views/alerts/wizard/options'; import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils'; interface MetricDetailsSidebarProps { rule: MetricRule; showOnDemandMetricAlertUI: boolean; } function TriggerDescription({ rule, actions, label, threshold, }: { actions: Action[]; label: string; rule: MetricRule; threshold: number; }) { const status = label === AlertRuleTriggerType.CRITICAL ? t('Critical') : label === AlertRuleTriggerType.WARNING ? t('Warning') : t('Resolved'); const statusIconColor = label === AlertRuleTriggerType.CRITICAL ? 'errorText' : label === AlertRuleTriggerType.WARNING ? 'warningText' : 'successText'; const defaultAction = t('Change alert status to %s', status); const aboveThreshold = label === AlertRuleTriggerType.RESOLVE ? rule.thresholdType === AlertRuleThresholdType.BELOW : rule.thresholdType === AlertRuleThresholdType.ABOVE; const thresholdTypeText = aboveThreshold ? rule.comparisonDelta ? t('higher') : t('above') : rule.comparisonDelta ? t('lower') : t('below'); const timeWindow = ; const metricName = capitalize( AlertWizardAlertNames[getAlertTypeFromAggregateDataset(rule)] ); const thresholdText = rule.comparisonDelta ? tct( '[metric] is [threshold]% [comparisonType] in [timeWindow] compared to the [comparisonDelta]', { metric: metricName, threshold, comparisonType: thresholdTypeText, timeWindow, comparisonDelta: ( COMPARISON_DELTA_OPTIONS.find(({value}) => value === rule.comparisonDelta) ?? COMPARISON_DELTA_OPTIONS[0] ).label, } ) : tct('[metric] is [condition] in [timeWindow]', { metric: metricName, condition: `${thresholdTypeText} ${threshold}`, timeWindow, }); return ( {t('%s Conditions', status)} {t('When')} {thresholdText} {t('Then')} {actions.map(action => ( {action.desc} ))} {defaultAction} ); } export function MetricDetailsSidebar({ rule, showOnDemandMetricAlertUI, }: MetricDetailsSidebarProps) { // get current status const latestIncident = rule.latestIncident; const status = latestIncident ? latestIncident.status : IncidentStatus.CLOSED; // The date at which the alert was triggered or resolved const activityDate = latestIncident?.dateClosed ?? latestIncident?.dateStarted ?? null; const criticalTrigger = rule.triggers.find( ({label}) => label === AlertRuleTriggerType.CRITICAL ); const warningTrigger = rule.triggers.find( ({label}) => label === AlertRuleTriggerType.WARNING ); const ownerId = rule.owner?.split(':')[1]; const teamActor = ownerId && {type: 'team' as Actor['type'], id: ownerId, name: ''}; let conditionType; const activationCondition = rule.monitorType === MonitorType.ACTIVATED && typeof rule.activationCondition !== 'undefined' && rule.activationCondition; switch (activationCondition) { case ActivationConditionType.DEPLOY_CREATION: conditionType = t('New Deploy'); break; case ActivationConditionType.RELEASE_CREATION: conditionType = t('New Release'); break; default: break; } return ( {t('Alert Status')} {t('Last Triggered')} {activityDate ? : t('No alerts triggered')} {typeof criticalTrigger?.alertThreshold === 'number' && ( )} {typeof warningTrigger?.alertThreshold === 'number' && ( )} {typeof rule.resolveThreshold === 'number' && ( )} {showOnDemandMetricAlertUI && ( {t('Filters Used')} {getSearchFilters(rule.query).map(({key, operator, value}) => ( ))} )} {t('Alert Rule Details')} {rule.environment ?? '-'}} /> {rule.monitorType === MonitorType.ACTIVATED && rule.activationCondition !== undefined && ( {conditionType}} /> )} } /> {rule.createdBy && ( {rule.createdBy.name ?? '-'} } /> )} {rule.dateModified && ( } /> )} : t('Unassigned') } /> ); } function FilterKeyValueTableRow({ keyName, operator, value, }: { keyName: string; operator: string; value: string; }) { return ( {isOnDemandSearchKey(keyName) && ( )} {keyName} } value={ {operator} {value} } /> ); } const KeyWrapper = styled('div')` display: flex; gap: ${space(0.75)}; > span { margin-top: ${space(0.25)}; height: ${space(2)}; } `; const SidebarGroup = styled('div')` margin-bottom: ${space(3)}; `; const HeaderItem = styled('div')` flex: 1; display: flex; flex-direction: column; > *:nth-child(2) { flex: 1; display: flex; align-items: center; } `; const Status = styled('div')` position: relative; display: grid; grid-template-columns: auto auto auto; gap: ${space(0.5)}; font-size: ${p => p.theme.fontSizeLarge}; `; const StatusContainer = styled('div')` height: 60px; display: flex; margin-bottom: ${space(1)}; `; const Heading = styled(SectionHeading)<{noMargin?: boolean}>` margin-top: ${p => (p.noMargin ? 0 : space(2))}; margin-bottom: ${p => (p.noMargin ? 0 : space(1))}; `; const OverflowTableValue = styled('div')` ${p => p.theme.overflowEllipsis} `; const TriggerContainer = styled('div')` display: grid; grid-template-rows: auto auto auto; gap: ${space(1)}; margin-top: ${space(4)}; `; const TriggerTitle = styled('div')` display: grid; grid-template-columns: 20px 1fr; align-items: center; `; const TriggerTitleText = styled('h4')` color: ${p => p.theme.subText}; font-size: ${p => p.theme.fontSizeMedium}; margin: 0; line-height: 24px; min-width: 40px; `; const TriggerStep = styled('div')` display: grid; grid-template-columns: 40px 1fr; align-items: stretch; `; const TriggerActions = styled('div')` display: grid; grid-template-columns: repeat(1fr); gap: ${space(0.25)}; align-items: center; `; const TriggerText = styled('span')` display: block; background-color: ${p => p.theme.surface200}; padding: ${space(0.25)} ${space(0.75)}; border-radius: ${p => p.theme.borderRadius}; color: ${p => p.theme.textColor}; font-size: ${p => p.theme.fontSizeSmall}; width: 100%; font-weight: ${p => p.theme.fontWeightNormal}; `;