import {Fragment, PureComponent} from 'react'; import type {InjectedRouter} from 'react-router'; import {components} from 'react-select'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import omit from 'lodash/omit'; import pick from 'lodash/pick'; import {addErrorMessage} from 'sentry/actionCreators/indicator'; import type {Client} from 'sentry/api'; import { OnDemandMetricAlert, OnDemandWarningIcon, } from 'sentry/components/alerts/onDemandMetricAlert'; import SearchBar from 'sentry/components/events/searchBar'; import SelectControl from 'sentry/components/forms/controls/selectControl'; import SelectField from 'sentry/components/forms/fields/selectField'; import FormField from 'sentry/components/forms/formField'; import IdBadge from 'sentry/components/idBadge'; import ListItem from 'sentry/components/list/listItem'; import {MetricSearchBar} from 'sentry/components/metrics/metricSearchBar'; import Panel from 'sentry/components/panels/panel'; import PanelBody from 'sentry/components/panels/panelBody'; import {InvalidReason} from 'sentry/components/searchSyntax/parser'; import {SearchInvalidTag} from 'sentry/components/smartSearchBar/searchInvalidTag'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Environment, Organization, Project, SelectValue} from 'sentry/types'; import {ActivationConditionType, MonitorType} from 'sentry/types/alerts'; import {getDisplayName} from 'sentry/utils/environment'; import {hasCustomMetrics} from 'sentry/utils/metrics/features'; import {getMRI} from 'sentry/utils/metrics/mri'; import {getOnDemandKeys, isOnDemandQueryString} from 'sentry/utils/onDemandMetrics'; import {hasOnDemandMetricAlertFeature} from 'sentry/utils/onDemandMetrics/features'; import withApi from 'sentry/utils/withApi'; import withProjects from 'sentry/utils/withProjects'; import WizardField from 'sentry/views/alerts/rules/metric/wizardField'; import { convertDatasetEventTypesToSource, DATA_SOURCE_LABELS, DATA_SOURCE_TO_SET_AND_EVENT_TYPES, } from 'sentry/views/alerts/utils'; import type {AlertType} from 'sentry/views/alerts/wizard/options'; import {getSupportedAndOmittedTags} from 'sentry/views/alerts/wizard/options'; import {getProjectOptions} from '../utils'; import {isCrashFreeAlert} from './utils/isCrashFreeAlert'; import {DEFAULT_AGGREGATE, DEFAULT_TRANSACTION_AGGREGATE} from './constants'; import type {AlertRuleComparisonType} from './types'; import {Dataset, Datasource, TimeWindow} from './types'; const TIME_WINDOW_MAP: Record = { [TimeWindow.ONE_MINUTE]: t('1 minute'), [TimeWindow.FIVE_MINUTES]: t('5 minutes'), [TimeWindow.TEN_MINUTES]: t('10 minutes'), [TimeWindow.FIFTEEN_MINUTES]: t('15 minutes'), [TimeWindow.THIRTY_MINUTES]: t('30 minutes'), [TimeWindow.ONE_HOUR]: t('1 hour'), [TimeWindow.TWO_HOURS]: t('2 hours'), [TimeWindow.FOUR_HOURS]: t('4 hours'), [TimeWindow.ONE_DAY]: t('24 hours'), }; type Props = { aggregate: string; alertType: AlertType; api: Client; comparisonType: AlertRuleComparisonType; dataset: Dataset; disabled: boolean; isEditing: boolean; onComparisonDeltaChange: (value: number) => void; onFilterSearch: (query: string, isQueryValid) => void; onMonitorTypeSelect: (activatedAlertFields: { activationCondition?: ActivationConditionType | undefined; monitorType?: MonitorType; monitorWindowSuffix?: string | undefined; monitorWindowValue?: number | undefined; }) => void; onTimeWindowChange: (value: number) => void; organization: Organization; project: Project; projects: Project[]; router: InjectedRouter; thresholdChart: React.ReactNode; timeWindow: number; activationCondition?: ActivationConditionType; allowChangeEventTypes?: boolean; comparisonDelta?: number; disableProjectSelector?: boolean; isErrorMigration?: boolean; isExtrapolatedChartData?: boolean; isForSpanMetric?: boolean; isTransactionMigration?: boolean; loadingProjects?: boolean; monitorType?: number; }; type State = { environments: Environment[] | null; }; class RuleConditionsForm extends PureComponent { state: State = { environments: null, }; componentDidMount() { this.fetchData(); } componentDidUpdate(prevProps: Props) { if (prevProps.project.id === this.props.project.id) { return; } this.fetchData(); } formElemBaseStyle = { padding: `${space(0.5)}`, border: 'none', }; async fetchData() { const {api, organization, project} = this.props; try { const environments = await api.requestPromise( `/projects/${organization.slug}/${project.slug}/environments/`, { query: { visibility: 'visible', }, } ); this.setState({environments}); } catch (_err) { addErrorMessage(t('Unable to fetch environments')); } } get timeWindowOptions() { let options: Record = TIME_WINDOW_MAP; const {alertType} = this.props; if (alertType === 'custom_metrics') { // Do not show ONE MINUTE interval as an option for custom_metrics alert options = omit(options, TimeWindow.ONE_MINUTE.toString()); } if (isCrashFreeAlert(this.props.dataset)) { options = pick(TIME_WINDOW_MAP, [ // TimeWindow.THIRTY_MINUTES, leaving this option out until we figure out the sub-hour session resolution chart limitations TimeWindow.ONE_HOUR, TimeWindow.TWO_HOURS, TimeWindow.FOUR_HOURS, TimeWindow.ONE_DAY, ]); } return Object.entries(options).map(([value, label]) => ({ value: parseInt(value, 10), label: tct('[timeWindow] interval', { timeWindow: label.slice(-1) === 's' ? label.slice(0, -1) : label, }), })); } get searchPlaceholder() { switch (this.props.dataset) { case Dataset.ERRORS: return t('Filter events by level, message, and other properties\u2026'); case Dataset.METRICS: case Dataset.SESSIONS: return t('Filter sessions by release version\u2026'); default: return t('Filter transactions by URL, tags, and other properties\u2026'); } } get selectControlStyles() { return { control: (provided: {[x: string]: string | number | boolean}) => ({ ...provided, minWidth: 200, maxWidth: 300, }), container: (provided: {[x: string]: string | number | boolean}) => ({ ...provided, margin: `${space(0.5)}`, }), }; } renderEventTypeFilter() { const {organization, disabled, alertType, isErrorMigration} = this.props; const dataSourceOptions = [ { label: t('Errors'), options: [ { value: Datasource.ERROR_DEFAULT, label: DATA_SOURCE_LABELS[Datasource.ERROR_DEFAULT], }, { value: Datasource.DEFAULT, label: DATA_SOURCE_LABELS[Datasource.DEFAULT], }, { value: Datasource.ERROR, label: DATA_SOURCE_LABELS[Datasource.ERROR], }, ], }, ]; if ( organization.features.includes('performance-view') && (alertType === 'custom_transactions' || alertType === 'custom_metrics') ) { dataSourceOptions.push({ label: t('Transactions'), options: [ { value: Datasource.TRANSACTION, label: DATA_SOURCE_LABELS[Datasource.TRANSACTION], }, ], }); } return ( {({onChange, onBlur, model}) => { const formDataset = model.getValue('dataset'); const formEventTypes = model.getValue('eventTypes'); const aggregate = model.getValue('aggregate'); const mappedValue = convertDatasetEventTypesToSource( formDataset, formEventTypes ); return ( { onChange(value, {}); onBlur(value, {}); // Reset the aggregate to the default (which works across // datatypes), otherwise we may send snuba an invalid query // (transaction aggregate on events datasource = bad). const newAggregate = value === Datasource.TRANSACTION ? DEFAULT_TRANSACTION_AGGREGATE : DEFAULT_AGGREGATE; if (alertType === 'custom_transactions' && aggregate !== newAggregate) { model.setValue('aggregate', newAggregate); } // set the value of the dataset and event type from data source const {dataset: datasetFromDataSource, eventTypes} = DATA_SOURCE_TO_SET_AND_EVENT_TYPES[value] ?? {}; model.setValue('dataset', datasetFromDataSource); model.setValue('eventTypes', eventTypes); }} options={dataSourceOptions} isDisabled={disabled || isErrorMigration} /> ); }} ); } renderProjectSelector() { const { project: _selectedProject, projects, disabled, organization, disableProjectSelector, } = this.props; const projectOptions = getProjectOptions({ organization, projects, isFormDisabled: disabled, }); return ( {({onChange, onBlur, model}) => { const selectedProject = projects.find(({id}) => id === model.getValue('projectId')) || _selectedProject; return ( { // if the current owner/team isn't part of project selected, update to the first available team const nextSelectedProject = projects.find(({id}) => id === value) ?? selectedProject; const ownerId: string | undefined = model .getValue('owner') ?.split(':')[1]; if ( ownerId && nextSelectedProject.teams.find(({id}) => id === ownerId) === undefined && nextSelectedProject.teams.length ) { model.setValue('owner', `team:${nextSelectedProject.teams[0].id}`); } onChange(value, {}); onBlur(value, {}); }} components={{ SingleValue: containerProps => ( ), }} /> ); }} ); } renderInterval() { const { organization, disabled, alertType, timeWindow, onTimeWindowChange, project, monitorType, isForSpanMetric, } = this.props; return (
{t('Define your metric')}
{isForSpanMetric ? null : ( )} {monitorType !== MonitorType.ACTIVATED && ( onTimeWindowChange(value)} inline={false} flexibleControlStateSize /> )}
); } renderMonitorTypeSelect() { // TODO: disable select on edit const { activationCondition, isEditing, monitorType, onMonitorTypeSelect, onTimeWindowChange, timeWindow, } = this.props; return (
{t('Select Monitor Type')}
isEditing ? null : onMonitorTypeSelect({ monitorType: MonitorType.CONTINUOUS, }) } > {t('Continuous')}
{t('Continuously monitor trends for the metrics outlined below')}
isEditing ? null : onMonitorTypeSelect({ monitorType: MonitorType.ACTIVATED, }) } > Conditional {monitorType === MonitorType.ACTIVATED ? ( {`${t('Monitor')} `} onMonitorTypeSelect({activationCondition: value}) } inline={false} flexibleControlStateSize size="xs" /> {` ${t('for')} `} onTimeWindowChange(value)} inline={false} flexibleControlStateSize size="xs" /> ) : (
{t('Temporarily monitor specified query given activation condition')}
)}
); } render() { const { alertType, organization, disabled, onFilterSearch, allowChangeEventTypes, dataset, isExtrapolatedChartData, isTransactionMigration, isErrorMigration, aggregate, project, } = this.props; const {environments} = this.state; const hasActivatedAlerts = organization.features.includes('activated-alert-rules'); const environmentOptions: SelectValue[] = [ { value: null, label: t('All Environments'), }, ...(environments?.map(env => ({value: env.name, label: getDisplayName(env)})) ?? []), ]; return ( {this.props.thresholdChart} {isTransactionMigration ? ( ) : ( {isExtrapolatedChartData && ( )} {hasActivatedAlerts && this.renderMonitorTypeSelect()} {!isErrorMigration && this.renderInterval()} {t('Filter events')} {this.renderProjectSelector()} ({ ...base, }), option: (base: any) => ({ ...base, }), }} options={environmentOptions} isDisabled={ disabled || this.state.environments === null || isErrorMigration } isClearable inline={false} flexibleControlStateSize /> {allowChangeEventTypes && this.renderEventTypeFilter()} {({onChange, onBlur, onKeyDown, initialData, value}) => { return hasCustomMetrics(organization) && alertType === 'custom_metrics' ? ( { onFilterSearch(query, true); onChange(query, {}); }} /> ) : ( { if (dataset !== Dataset.GENERIC_METRICS) { return null; } return ( {item.desc}, } )} docLink="https://docs.sentry.io/product/alerts/create-alerts/metric-alert-config/#tags--properties" /> ); }} searchSource="alert_builder" defaultQuery={initialData?.query ?? ''} metricAlert {...getSupportedAndOmittedTags(dataset, organization)} includeSessionTagsValues={dataset === Dataset.SESSIONS} disabled={disabled || isErrorMigration} useFormWrapper={false} organization={organization} placeholder={this.searchPlaceholder} onChange={onChange} query={initialData.query} // We only need strict validation for Transaction queries, everything else is fine highlightUnsupportedTags={ organization.features.includes('alert-allow-indexed') || (hasOnDemandMetricAlertFeature(organization) && isOnDemandQueryString(initialData.query)) ? false : dataset === Dataset.GENERIC_METRICS } onKeyDown={e => { /** * Do not allow enter key to submit the alerts form since it is unlikely * users will be ready to create the rule as this sits above required fields. */ if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); } onKeyDown?.(e); }} onClose={(query, {validSearch}) => { onFilterSearch(query, validSearch); onBlur(query); }} onSearch={query => { onFilterSearch(query, true); onChange(query, {}); }} hasRecentSearches={dataset !== Dataset.SESSIONS} /> {isExtrapolatedChartData && isOnDemandQueryString(value) && ( {getOnDemandKeys(value) .map(key => `"${key}"`) .join(', ')} ), strong: , } )} /> )} ); }} )} ); } } const StyledListTitle = styled('div')` display: flex; span { margin-left: ${space(1)}; } `; // This is a temporary hacky solution to hide list items without changing the numbering of the rest of the list // TODO(issues): Remove this once the migration is complete const HiddenListItem = styled(ListItem)` position: absolute; width: 0px; height: 0px; opacity: 0; pointer-events: none; `; const Spacer = styled('div')` margin-bottom: ${space(2)}; `; const ChartPanel = styled(Panel)` margin-bottom: ${space(1)}; `; const StyledPanelBody = styled(PanelBody)` ol, h4 { margin-bottom: ${space(1)}; } `; const SearchContainer = styled('div')` display: flex; align-items: center; gap: ${space(1)}; `; const StyledSearchBar = styled(SearchBar)` flex-grow: 1; ${p => p.disabled && ` background: ${p.theme.backgroundSecondary}; color: ${p.theme.disabled}; cursor: not-allowed; `} `; const StyledListItem = styled(ListItem)` margin-bottom: ${space(0.5)}; font-size: ${p => p.theme.fontSizeExtraLarge}; line-height: 1.3; `; const FormRow = styled('div')<{columns?: number; noMargin?: boolean}>` display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin-bottom: ${p => (p.noMargin ? 0 : space(4))}; ${p => p.columns !== undefined && css` display: grid; grid-template-columns: repeat(${p.columns}, auto); `} `; const MonitorSelect = styled('div')` border-radius: ${p => p.theme.borderRadius}; border: 1px solid ${p => p.theme.border}; width: 100%; display: grid; grid-template-columns: 1fr 1fr; height: 5rem; `; type MonitorCardProps = { isSelected: boolean; /** * Adds hover and focus states to the card */ position: 'left' | 'right'; disabled?: boolean; }; const MonitorCard = styled('div')` padding: ${space(1)} ${space(2)}; display: flex; flex-grow: 1; flex-direction: column; cursor: ${p => (p.disabled || p.isSelected ? 'default' : 'pointer')}; justify-content: center; background-color: ${p => p.disabled && !p.isSelected ? p.theme.backgroundSecondary : p.theme.background}; &:focus, &:hover { ${p => p.disabled || p.isSelected ? '' : ` outline: 1px solid ${p.theme.purple200}; background-color: ${p.theme.backgroundSecondary}; `} } border-top-left-radius: ${p => (p.position === 'left' ? p.theme.borderRadius : 0)}; border-bottom-left-radius: ${p => (p.position === 'left' ? p.theme.borderRadius : 0)}; border-top-right-radius: ${p => (p.position !== 'left' ? p.theme.borderRadius : 0)}; border-bottom-right-radius: ${p => (p.position !== 'left' ? p.theme.borderRadius : 0)}; margin: ${p => p.isSelected ? (p.position === 'left' ? '1px 2px 1px 0' : '1px 0 1px 2px') : 0}; outline: ${p => (p.isSelected ? `2px solid ${p.theme.purple400}` : 'none')}; `; const ActivatedAlertFields = styled('div')` display: flex; align-items: center; justify-content: space-between; `; export default withApi(withProjects(RuleConditionsForm));