import color from 'color'; import type {YAXisComponentOption} from 'echarts'; import moment from 'moment'; import momentTimezone from 'moment-timezone'; import type {AreaChartProps, AreaChartSeries} from 'sentry/components/charts/areaChart'; import MarkArea from 'sentry/components/charts/components/markArea'; import MarkLine from 'sentry/components/charts/components/markLine'; import CHART_PALETTE from 'sentry/constants/chartPalette'; import {t} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; import space from 'sentry/styles/space'; import type {SessionApiResponse} from 'sentry/types'; import type {Series} from 'sentry/types/echarts'; import {getCrashFreeRateSeries} from 'sentry/utils/sessions'; import {lightTheme as theme} from 'sentry/utils/theme'; import { AlertRuleTriggerType, Dataset, MetricRule, } from 'sentry/views/alerts/rules/metric/types'; import {Incident, IncidentActivityType, IncidentStatus} from 'sentry/views/alerts/types'; import { ALERT_CHART_MIN_MAX_BUFFER, alertAxisFormatter, alertTooltipValueFormatter, SESSION_AGGREGATE_TO_FIELD, shouldScaleAlertChart, } from 'sentry/views/alerts/utils'; import {AlertWizardAlertNames} from 'sentry/views/alerts/wizard/options'; import {getAlertTypeFromAggregateDataset} from 'sentry/views/alerts/wizard/utils'; import {isCrashFreeAlert} from '../utils/isCrashFreeAlert'; function formatTooltipDate(date: moment.MomentInput, format: string): string { const { options: {timezone}, } = ConfigStore.get('user'); return momentTimezone.tz(date, timezone).format(format); } function createStatusAreaSeries( lineColor: string, startTime: number, endTime: number, yPosition: number ): AreaChartSeries { return { seriesName: '', type: 'line', markLine: MarkLine({ silent: true, lineStyle: {color: lineColor, type: 'solid', width: 4}, data: [[{coord: [startTime, yPosition]}, {coord: [endTime, yPosition]}]], }), data: [], }; } function createThresholdSeries(lineColor: string, threshold: number): AreaChartSeries { return { seriesName: 'Threshold Line', type: 'line', markLine: MarkLine({ silent: true, lineStyle: {color: lineColor, type: 'dashed', width: 1}, data: [{yAxis: threshold}], label: { show: false, }, }), data: [], }; } function createIncidentSeries( incident: Incident, lineColor: string, incidentTimestamp: number, dataPoint?: AreaChartSeries['data'][0], seriesName?: string, aggregate?: string, handleIncidentClick?: (incident: Incident) => void ): AreaChartSeries { const formatter = ({value, marker}: any) => { const time = formatTooltipDate(moment(value), 'MMM D, YYYY LT'); return [ `
`, `${marker} ${t('Alert')} #${ incident.identifier }${ dataPoint?.value ? `${seriesName} ${alertTooltipValueFormatter( dataPoint.value, seriesName ?? '', aggregate ?? '' )}` : '' }`, `
`, `
${time}
`, '
', ].join(''); }; return { seriesName: 'Incident Line', type: 'line', markLine: MarkLine({ silent: false, lineStyle: {color: lineColor, type: 'solid'}, data: [ { xAxis: incidentTimestamp, // @ts-expect-error onClick not in echart types onClick: () => handleIncidentClick?.(incident), }, ], label: { silent: true, show: !!incident.identifier, position: 'insideEndBottom', formatter: incident.identifier, color: lineColor, fontSize: 10, fontFamily: 'Rubik', }, tooltip: { formatter, }, }), data: [], tooltip: { trigger: 'item', alwaysShowContent: true, formatter, }, }; } export type MetricChartData = { rule: MetricRule; timeseriesData: Series[]; handleIncidentClick?: (incident: Incident) => void; incidents?: Incident[]; selectedIncident?: Incident | null; }; type MetricChartOption = { chartOption: AreaChartProps; criticalDuration: number; totalDuration: number; warningDuration: number; }; export function getMetricAlertChartOption({ timeseriesData, rule, incidents, selectedIncident, handleIncidentClick, }: MetricChartData): MetricChartOption { const criticalTrigger = rule.triggers.find( ({label}) => label === AlertRuleTriggerType.CRITICAL ); const warningTrigger = rule.triggers.find( ({label}) => label === AlertRuleTriggerType.WARNING ); const series: AreaChartSeries[] = [...timeseriesData]; const areaSeries: AreaChartSeries[] = []; // Ensure series data appears below incident/mark lines series[0].z = 1; series[0].color = CHART_PALETTE[0][0]; const dataArr = timeseriesData[0].data; const maxSeriesValue = dataArr.reduce( (currMax, coord) => Math.max(currMax, coord.value), 0 ); // find the lowest value between chart data points, warning threshold, // critical threshold and then apply some breathing space const minChartValue = shouldScaleAlertChart(rule.aggregate) ? Math.floor( Math.min( dataArr.reduce((currMax, coord) => Math.min(currMax, coord.value), Infinity), typeof warningTrigger?.alertThreshold === 'number' ? warningTrigger.alertThreshold : Infinity, typeof criticalTrigger?.alertThreshold === 'number' ? criticalTrigger.alertThreshold : Infinity ) / ALERT_CHART_MIN_MAX_BUFFER ) : 0; const firstPoint = new Date(dataArr[0]?.name).getTime(); const lastPoint = new Date(dataArr[dataArr.length - 1]?.name).getTime(); const totalDuration = lastPoint - firstPoint; let criticalDuration = 0; let warningDuration = 0; series.push( createStatusAreaSeries(theme.green300, firstPoint, lastPoint, minChartValue) ); if (incidents) { // select incidents that fall within the graph range incidents .filter( incident => !incident.dateClosed || new Date(incident.dateClosed).getTime() > firstPoint ) .forEach(incident => { const activities = incident.activities ?? []; const statusChanges = activities .filter( ({type, value}) => type === IncidentActivityType.STATUS_CHANGE && [IncidentStatus.WARNING, IncidentStatus.CRITICAL].includes(Number(value)) ) .sort( (a, b) => new Date(a.dateCreated).getTime() - new Date(b.dateCreated).getTime() ); const incidentEnd = incident.dateClosed ?? new Date().getTime(); const timeWindowMs = rule.timeWindow * 60 * 1000; const incidentColor = warningTrigger && !statusChanges.find(({value}) => Number(value) === IncidentStatus.CRITICAL) ? theme.yellow300 : theme.red300; const incidentStartDate = new Date(incident.dateStarted).getTime(); const incidentCloseDate = incident.dateClosed ? new Date(incident.dateClosed).getTime() : lastPoint; const incidentStartValue = dataArr.find( point => new Date(point.name).getTime() >= incidentStartDate ); series.push( createIncidentSeries( incident, incidentColor, incidentStartDate, incidentStartValue, series[0].seriesName, rule.aggregate, handleIncidentClick ) ); const areaStart = Math.max(new Date(incident.dateStarted).getTime(), firstPoint); const areaEnd = Math.min( statusChanges.length && statusChanges[0].dateCreated ? new Date(statusChanges[0].dateCreated).getTime() - timeWindowMs : new Date(incidentEnd).getTime(), lastPoint ); const areaColor = warningTrigger ? theme.yellow300 : theme.red300; if (areaEnd > areaStart) { series.push( createStatusAreaSeries(areaColor, areaStart, areaEnd, minChartValue) ); if (areaColor === theme.yellow300) { warningDuration += Math.abs(areaEnd - areaStart); } else { criticalDuration += Math.abs(areaEnd - areaStart); } } statusChanges.forEach((activity, idx) => { const statusAreaStart = Math.max( new Date(activity.dateCreated).getTime() - timeWindowMs, firstPoint ); const statusAreaEnd = Math.min( idx === statusChanges.length - 1 ? new Date(incidentEnd).getTime() : new Date(statusChanges[idx + 1].dateCreated).getTime() - timeWindowMs, lastPoint ); const statusAreaColor = activity.value === `${IncidentStatus.CRITICAL}` ? theme.red300 : theme.yellow300; if (statusAreaEnd > statusAreaStart) { series.push( createStatusAreaSeries( statusAreaColor, statusAreaStart, statusAreaEnd, minChartValue ) ); if (statusAreaColor === theme.yellow300) { warningDuration += Math.abs(statusAreaEnd - statusAreaStart); } else { criticalDuration += Math.abs(statusAreaEnd - statusAreaStart); } } }); if (selectedIncident && incident.id === selectedIncident.id) { const selectedIncidentColor = incidentColor === theme.yellow300 ? theme.yellow100 : theme.red100; areaSeries.push({ seriesName: '', type: 'line', markArea: MarkArea({ silent: true, itemStyle: { color: color(selectedIncidentColor).alpha(0.42).rgb().string(), }, data: [[{xAxis: incidentStartDate}, {xAxis: incidentCloseDate}]], }), data: [], }); } }); } let maxThresholdValue = 0; if (!rule.comparisonDelta && warningTrigger?.alertThreshold) { const {alertThreshold} = warningTrigger; const warningThresholdLine = createThresholdSeries(theme.yellow300, alertThreshold); series.push(warningThresholdLine); maxThresholdValue = Math.max(maxThresholdValue, alertThreshold); } if (!rule.comparisonDelta && criticalTrigger?.alertThreshold) { const {alertThreshold} = criticalTrigger; const criticalThresholdLine = createThresholdSeries(theme.red300, alertThreshold); series.push(criticalThresholdLine); maxThresholdValue = Math.max(maxThresholdValue, alertThreshold); } if (!rule.comparisonDelta && rule.resolveThreshold) { const resolveThresholdLine = createThresholdSeries( theme.green300, rule.resolveThreshold ); series.push(resolveThresholdLine); maxThresholdValue = Math.max(maxThresholdValue, rule.resolveThreshold); } const yAxis: YAXisComponentOption = { axisLabel: { formatter: (value: number) => alertAxisFormatter(value, timeseriesData[0].seriesName, rule.aggregate), }, max: isCrashFreeAlert(rule.dataset) ? 100 : maxThresholdValue > maxSeriesValue ? maxThresholdValue : undefined, min: minChartValue || undefined, }; return { criticalDuration, warningDuration, totalDuration, chartOption: { isGroupedByDate: true, yAxis, series, grid: { left: space(0.25), right: space(2), top: space(3), bottom: 0, }, }, }; } export function transformSessionResponseToSeries( response: SessionApiResponse | null, rule: MetricRule ): MetricChartData['timeseriesData'] { const {aggregate} = rule; return [ { seriesName: AlertWizardAlertNames[ getAlertTypeFromAggregateDataset({ aggregate, dataset: Dataset.SESSIONS, }) ], data: getCrashFreeRateSeries( response?.groups, response?.intervals, SESSION_AGGREGATE_TO_FIELD[aggregate] ), }, ]; }