import {browserHistory} from 'react-router';
import type {Location, Query} from 'history';
import cloneDeep from 'lodash/cloneDeep';
import isEqual from 'lodash/isEqual';
import pick from 'lodash/pick';
import trimStart from 'lodash/trimStart';
import * as qs from 'query-string';
import WidgetArea from 'sentry-images/dashboard/widget-area.svg';
import WidgetBar from 'sentry-images/dashboard/widget-bar.svg';
import WidgetBigNumber from 'sentry-images/dashboard/widget-big-number.svg';
import WidgetLine from 'sentry-images/dashboard/widget-line-1.svg';
import WidgetTable from 'sentry-images/dashboard/widget-table.svg';
import {parseArithmetic} from 'sentry/components/arithmeticInput/parser';
import type {Fidelity} from 'sentry/components/charts/utils';
import {
getDiffInMinutes,
getInterval,
SIX_HOURS,
TWENTY_FOUR_HOURS,
} from 'sentry/components/charts/utils';
import CircleIndicator from 'sentry/components/circleIndicator';
import {normalizeDateTimeString} from 'sentry/components/organizations/pageFilters/parse';
import {parseSearch, Token} from 'sentry/components/searchSyntax/parser';
import type {MRI, Organization, PageFilters} from 'sentry/types';
import {defined} from 'sentry/utils';
import {getUtcDateString, parsePeriodToHours} from 'sentry/utils/dates';
import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
import EventView from 'sentry/utils/discover/eventView';
import {DURATION_UNITS} from 'sentry/utils/discover/fieldRenderers';
import {
getAggregateAlias,
getAggregateArg,
getColumnsAndAggregates,
isEquation,
isMeasurement,
RATE_UNIT_MULTIPLIERS,
RateUnit,
stripEquationPrefix,
} from 'sentry/utils/discover/fields';
import {DiscoverDatasets, DisplayModes} from 'sentry/utils/discover/types';
import {getMeasurements} from 'sentry/utils/measurements/measurements';
import {getDdmUrl, getMetricDisplayType} from 'sentry/utils/metrics';
import {parseField} from 'sentry/utils/metrics/mri';
import type {MetricWidgetQueryParams} from 'sentry/utils/metrics/types';
import {decodeList} from 'sentry/utils/queryString';
import theme from 'sentry/utils/theme';
import type {
DashboardDetails,
DashboardFilters,
Widget,
WidgetQuery,
} from 'sentry/views/dashboards/types';
import {
DashboardFilterKeys,
DisplayType,
WidgetType,
} from 'sentry/views/dashboards/types';
import ThresholdsHoverWrapper from './widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper';
import type {ThresholdsConfig} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsStep';
import {ThresholdMaxKeys} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsStep';
export type ValidationError = {
[key: string]: string | string[] | ValidationError[] | ValidationError;
};
export type FlatValidationError = {
[key: string]: string | FlatValidationError[] | FlatValidationError;
};
export function cloneDashboard(dashboard: DashboardDetails): DashboardDetails {
return cloneDeep(dashboard);
}
export function eventViewFromWidget(
title: string,
query: WidgetQuery,
selection: PageFilters
): EventView {
const {start, end, period: statsPeriod} = selection.datetime;
const {projects, environments} = selection;
// World Map requires an additional column (geo.country_code) to display in discover when navigating from the widget
const fields = [...query.columns, ...query.aggregates];
const conditions = query.conditions;
const {orderby} = query;
// Need to convert orderby to aggregate alias because eventView still uses aggregate alias format
const aggregateAliasOrderBy = orderby
? `${orderby.startsWith('-') ? '-' : ''}${getAggregateAlias(trimStart(orderby, '-'))}`
: orderby;
return EventView.fromSavedQuery({
id: undefined,
name: title,
version: 2,
fields,
query: conditions,
orderby: aggregateAliasOrderBy,
projects,
range: statsPeriod ?? undefined,
start: start ? getUtcDateString(start) : undefined,
end: end ? getUtcDateString(end) : undefined,
environment: environments,
});
}
export function getThresholdUnitSelectOptions(
dataType: string
): {label: string; value: string}[] {
if (dataType === 'duration') {
return Object.keys(DURATION_UNITS)
.map(unit => ({label: unit, value: unit}))
.slice(2);
}
if (dataType === 'rate') {
return Object.values(RateUnit).map(unit => ({
label: `/${unit.split('/')[1]}`,
value: unit,
}));
}
return [];
}
export function hasThresholdMaxValue(thresholdsConfig: ThresholdsConfig): boolean {
return Object.keys(thresholdsConfig.max_values).length > 0;
}
function normalizeUnit(value: number, unit: string, dataType: string): number {
const multiplier =
dataType === 'rate'
? RATE_UNIT_MULTIPLIERS[unit]
: dataType === 'duration'
? DURATION_UNITS[unit]
: 1;
return value * multiplier;
}
export function getColoredWidgetIndicator(
thresholds: ThresholdsConfig,
tableData: TableDataWithTitle[]
): React.ReactNode {
const tableMeta = {...tableData[0].meta};
const fields = Object.keys(tableMeta);
const field = fields[0];
const dataType = tableMeta[field];
const dataUnit = tableMeta.units?.[field];
const dataRow = tableData[0].data[0];
if (!dataRow) {
return null;
}
const data = Number(dataRow[field]);
const normalizedData = dataUnit ? normalizeUnit(data, dataUnit, dataType) : data;
const {max_values} = thresholds;
let color = theme.red300;
const yellowMax = max_values[ThresholdMaxKeys.MAX_2];
const normalizedYellowMax =
thresholds.unit && yellowMax
? normalizeUnit(yellowMax, thresholds.unit, dataType)
: yellowMax;
if (normalizedYellowMax && normalizedData <= normalizedYellowMax) {
color = theme.yellow300;
}
const greenMax = max_values[ThresholdMaxKeys.MAX_1];
const normalizedGreenMax =
thresholds.unit && greenMax
? normalizeUnit(greenMax, thresholds.unit, dataType)
: greenMax;
if (normalizedGreenMax && normalizedData <= normalizedGreenMax) {
color = theme.green300;
}
return (
);
}
function coerceStringToArray(value?: string | string[] | null) {
return typeof value === 'string' ? [value] : value;
}
export function constructWidgetFromQuery(query?: Query): Widget | undefined {
if (query) {
const queryNames = coerceStringToArray(query.queryNames);
const queryConditions = coerceStringToArray(query.queryConditions);
const queryFields = coerceStringToArray(query.queryFields);
const queries: WidgetQuery[] = [];
if (
queryConditions &&
queryNames &&
queryFields &&
typeof query.queryOrderby === 'string'
) {
const {columns, aggregates} = getColumnsAndAggregates(queryFields);
queryConditions.forEach((condition, index) => {
queries.push({
name: queryNames[index],
conditions: condition,
fields: queryFields,
columns,
aggregates,
orderby: query.queryOrderby as string,
});
});
}
if (query.title && query.displayType && query.interval && queries.length > 0) {
const newWidget: Widget = {
...(pick(query, ['title', 'displayType', 'interval']) as {
displayType: DisplayType;
interval: string;
title: string;
}),
widgetType: WidgetType.DISCOVER,
queries,
};
return newWidget;
}
}
return undefined;
}
export function miniWidget(displayType: DisplayType): string {
switch (displayType) {
case DisplayType.BAR:
return WidgetBar;
case DisplayType.AREA:
case DisplayType.TOP_N:
return WidgetArea;
case DisplayType.BIG_NUMBER:
return WidgetBigNumber;
case DisplayType.TABLE:
return WidgetTable;
case DisplayType.LINE:
default:
return WidgetLine;
}
}
export function getWidgetInterval(
displayType: DisplayType,
datetimeObj: Partial,
widgetInterval?: string,
fidelity?: Fidelity
): string {
// Don't fetch more than 66 bins as we're plotting on a small area.
const MAX_BIN_COUNT = 66;
// Bars charts are daily totals to aligned with discover. It also makes them
// usefully different from line/area charts until we expose the interval control, or remove it.
let interval = displayType === 'bar' ? '1d' : widgetInterval;
if (!interval) {
// Default to 5 minutes
interval = '5m';
}
const desiredPeriod = parsePeriodToHours(interval);
const selectedRange = getDiffInMinutes(datetimeObj);
if (fidelity) {
// Primarily to support lower fidelity for Release Health widgets
// the sort on releases and hit the metrics API endpoint.
interval = getInterval(datetimeObj, fidelity);
if (selectedRange > SIX_HOURS && selectedRange <= TWENTY_FOUR_HOURS) {
interval = '1h';
}
return displayType === 'bar' ? '1d' : interval;
}
// selectedRange is in minutes, desiredPeriod is in hours
// convert desiredPeriod to minutes
if (selectedRange / (desiredPeriod * 60) > MAX_BIN_COUNT) {
const highInterval = getInterval(datetimeObj, 'high');
// Only return high fidelity interval if desired interval is higher fidelity
if (desiredPeriod < parsePeriodToHours(highInterval)) {
return highInterval;
}
}
return interval;
}
export function getFieldsFromEquations(fields: string[]): string[] {
// Gather all fields and functions used in equations and prepend them to the provided fields
const termsSet: Set = new Set();
fields.filter(isEquation).forEach(field => {
const parsed = parseArithmetic(stripEquationPrefix(field)).tc;
parsed.fields.forEach(({term}) => termsSet.add(term as string));
parsed.functions.forEach(({term}) => termsSet.add(term as string));
});
return Array.from(termsSet);
}
export function getWidgetDiscoverUrl(
widget: Widget,
selection: PageFilters,
organization: Organization,
index: number = 0,
isMetricsData: boolean = false
) {
const eventView = eventViewFromWidget(widget.title, widget.queries[index], selection);
const discoverLocation = eventView.getResultsViewUrlTarget(organization.slug);
// Pull a max of 3 valid Y-Axis from the widget
const yAxisOptions = eventView.getYAxisOptions().map(({value}) => value);
discoverLocation.query.yAxis = [
...new Set(
widget.queries[0].aggregates.filter(aggregate => yAxisOptions.includes(aggregate))
),
].slice(0, 3);
// Visualization specific transforms
switch (widget.displayType) {
case DisplayType.BAR:
discoverLocation.query.display = DisplayModes.BAR;
break;
case DisplayType.TOP_N:
discoverLocation.query.display = DisplayModes.TOP5;
// Last field is used as the yAxis
const aggregates = widget.queries[0].aggregates;
discoverLocation.query.yAxis = aggregates[aggregates.length - 1];
if (aggregates.slice(0, -1).includes(aggregates[aggregates.length - 1])) {
discoverLocation.query.field = aggregates.slice(0, -1);
}
break;
default:
break;
}
// Equation fields need to have their terms explicitly selected as columns in the discover table
const fields = discoverLocation.query.field;
const query = widget.queries[0];
const queryFields = defined(query.fields)
? query.fields
: [...query.columns, ...query.aggregates];
const equationFields = getFieldsFromEquations(queryFields);
// Updates fields by adding any individual terms from equation fields as a column
equationFields.forEach(term => {
if (Array.isArray(fields) && !fields.includes(term)) {
fields.unshift(term);
}
});
if (isMetricsData) {
discoverLocation.query.fromMetric = 'true';
}
// Construct and return the discover url
const discoverPath = `${discoverLocation.pathname}?${qs.stringify({
...discoverLocation.query,
})}`;
return discoverPath;
}
export function getWidgetIssueUrl(
widget: Widget,
selection: PageFilters,
organization: Organization
) {
const {start, end, utc, period} = selection.datetime;
const datetime =
start && end
? {start: getUtcDateString(start), end: getUtcDateString(end), utc}
: {statsPeriod: period};
const issuesLocation = `/organizations/${organization.slug}/issues/?${qs.stringify({
query: widget.queries?.[0]?.conditions,
sort: widget.queries?.[0]?.orderby,
...datetime,
project: selection.projects,
environment: selection.environments,
})}`;
return issuesLocation;
}
export function getWidgetReleasesUrl(
_widget: Widget,
selection: PageFilters,
organization: Organization
) {
const {start, end, utc, period} = selection.datetime;
const datetime =
start && end
? {start: getUtcDateString(start), end: getUtcDateString(end), utc}
: {statsPeriod: period};
const releasesLocation = `/organizations/${organization.slug}/releases/?${qs.stringify({
...datetime,
project: selection.projects,
environment: selection.environments,
})}`;
return releasesLocation;
}
export function getWidgetDDMUrl(
_widget: Widget,
selection: PageFilters,
organization: Organization
) {
const {start, end, utc, period} = selection.datetime;
const datetime =
start && end
? {start: getUtcDateString(start), end: getUtcDateString(end), utc}
: {statsPeriod: period};
// ensures that My Projects selection is properly handled
const project = selection.projects.length ? selection.projects : [0];
const ddmLocation = getDdmUrl(organization.slug, {
...datetime,
project,
environment: selection.environments,
widgets: _widget.queries.map(query => {
const {mri: mri, op} = parseField(query.aggregates[0]) ?? {mri: '', op: ''};
return {
mri: mri as MRI,
op,
groupBy: query.columns,
query: query.conditions ?? '',
displayType: getMetricDisplayType(_widget.displayType),
} satisfies MetricWidgetQueryParams;
}),
});
return ddmLocation;
}
export function flattenErrors(
data: ValidationError | string,
update: FlatValidationError
): FlatValidationError {
if (typeof data === 'string') {
update.error = data;
} else {
Object.keys(data).forEach((key: string) => {
const value = data[key];
if (typeof value === 'string') {
update[key] = value;
return;
}
// Recurse into nested objects.
if (Array.isArray(value) && typeof value[0] === 'string') {
update[key] = value[0];
return;
}
if (Array.isArray(value) && typeof value[0] === 'object') {
(value as ValidationError[]).map(item => flattenErrors(item, update));
} else {
flattenErrors(value as ValidationError, update);
}
});
}
return update;
}
export function getDashboardsMEPQueryParams(isMEPEnabled: boolean) {
return isMEPEnabled
? {
dataset: DiscoverDatasets.METRICS_ENHANCED,
}
: {};
}
export function getNumEquations(possibleEquations: string[]) {
return possibleEquations.filter(isEquation).length;
}
const DEFINED_MEASUREMENTS = new Set(Object.keys(getMeasurements()));
export function isCustomMeasurement(field: string) {
return !DEFINED_MEASUREMENTS.has(field) && isMeasurement(field);
}
export function isCustomMeasurementWidget(widget: Widget) {
return (
widget.widgetType === WidgetType.DISCOVER &&
widget.queries.some(({aggregates, columns, fields}) => {
const aggregateArgs = aggregates.reduce((acc: string[], aggregate) => {
// Should be ok to use getAggregateArg. getAggregateArg only returns the first arg
// but there aren't any custom measurement aggregates that use custom measurements
// outside of the first arg.
const aggregateArg = getAggregateArg(aggregate);
if (aggregateArg) {
acc.push(aggregateArg);
}
return acc;
}, []);
return [...aggregateArgs, ...columns, ...(fields ?? [])].some(field =>
isCustomMeasurement(field)
);
})
);
}
export function getCustomMeasurementQueryParams() {
return {
dataset: 'metrics',
};
}
export function isWidgetUsingTransactionName(widget: Widget) {
return (
widget.widgetType === WidgetType.DISCOVER &&
widget.queries.some(({aggregates, columns, fields, conditions}) => {
const aggregateArgs = aggregates.reduce((acc: string[], aggregate) => {
const aggregateArg = getAggregateArg(aggregate);
if (aggregateArg) {
acc.push(aggregateArg);
}
return acc;
}, []);
const transactionSelected = [...aggregateArgs, ...columns, ...(fields ?? [])].some(
field => field === 'transaction'
);
const transactionUsedInFilter = parseSearch(conditions)?.some(
parsedCondition =>
parsedCondition.type === Token.FILTER &&
parsedCondition.key?.text === 'transaction'
);
return transactionSelected || transactionUsedInFilter;
})
);
}
export function hasSavedPageFilters(dashboard: DashboardDetails) {
return !(
dashboard.projects &&
dashboard.projects.length === 0 &&
dashboard.environment === undefined &&
dashboard.start === undefined &&
dashboard.end === undefined &&
dashboard.period === undefined
);
}
export function hasUnsavedFilterChanges(
initialDashboard: DashboardDetails,
location: Location
) {
// Use Sets to compare the filter fields that are arrays
type Filters = {
end?: string;
environment?: Set;
period?: string;
projects?: Set;
release?: Set;
start?: string;
utc?: boolean;
};
const savedFilters: Filters = {
projects: new Set(initialDashboard.projects),
environment: new Set(initialDashboard.environment),
period: initialDashboard.period,
start: normalizeDateTimeString(initialDashboard.start),
end: normalizeDateTimeString(initialDashboard.end),
utc: initialDashboard.utc,
};
let currentFilters = {
...getCurrentPageFilters(location),
} as unknown as Filters;
currentFilters = {
...currentFilters,
projects: new Set(currentFilters.projects),
environment: new Set(currentFilters.environment),
};
if (defined(location.query?.release)) {
// Release is only included in the comparison if it exists in the query
// params, otherwise the dashboard should be using its saved state
savedFilters.release = new Set(initialDashboard.filters?.release);
currentFilters.release = new Set(location.query?.release);
}
return !isEqual(savedFilters, currentFilters);
}
export function getSavedFiltersAsPageFilters(dashboard: DashboardDetails): PageFilters {
return {
datetime: {
end: dashboard.end || null,
period: dashboard.period || null,
start: dashboard.start || null,
utc: null,
},
environments: dashboard.environment || [],
projects: dashboard.projects || [],
};
}
export function getSavedPageFilters(dashboard: DashboardDetails) {
return {
project: dashboard.projects,
environment: dashboard.environment,
statsPeriod: dashboard.period,
start: normalizeDateTimeString(dashboard.start),
end: normalizeDateTimeString(dashboard.end),
utc: dashboard.utc,
};
}
export function resetPageFilters(dashboard: DashboardDetails, location: Location) {
browserHistory.replace({
...location,
query: getSavedPageFilters(dashboard),
});
}
export function getCurrentPageFilters(
location: Location
): Pick<
DashboardDetails,
'projects' | 'environment' | 'period' | 'start' | 'end' | 'utc'
> {
const {project, environment, statsPeriod, start, end, utc} = location.query ?? {};
return {
// Ensure projects and environment are sent as arrays, or undefined in the request
// location.query will return a string if there's only one value
projects:
project === undefined || project === null
? []
: typeof project === 'string'
? [Number(project)]
: project.map(Number),
environment:
typeof environment === 'string' ? [environment] : environment ?? undefined,
period: statsPeriod as string | undefined,
start: defined(start) ? normalizeDateTimeString(start as string) : undefined,
end: defined(end) ? normalizeDateTimeString(end as string) : undefined,
utc: defined(utc) ? utc === 'true' : undefined,
};
}
export function getDashboardFiltersFromURL(location: Location): DashboardFilters | null {
const dashboardFilters: DashboardFilters = {};
Object.values(DashboardFilterKeys).forEach(key => {
if (defined(location.query?.[key])) {
dashboardFilters[key] = decodeList(location.query?.[key]);
}
});
return Object.keys(dashboardFilters).length > 0 ? dashboardFilters : null;
}
export function dashboardFiltersToString(
dashboardFilters: DashboardFilters | null | undefined
): string {
let dashboardFilterConditions = '';
if (dashboardFilters) {
for (const [key, activeFilters] of Object.entries(dashboardFilters)) {
if (activeFilters.length === 1) {
dashboardFilterConditions += `${key}:"${activeFilters[0]}" `;
} else if (activeFilters.length > 1) {
dashboardFilterConditions += `${key}:[${activeFilters
.map(f => `"${f}"`)
.join(',')}] `;
}
}
}
return dashboardFilterConditions;
}