utils.tsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. import {browserHistory} from 'react-router';
  2. import {Location, Query} from 'history';
  3. import cloneDeep from 'lodash/cloneDeep';
  4. import isEmpty from 'lodash/isEmpty';
  5. import isEqual from 'lodash/isEqual';
  6. import pick from 'lodash/pick';
  7. import trimStart from 'lodash/trimStart';
  8. import * as qs from 'query-string';
  9. import WidgetArea from 'sentry-images/dashboard/widget-area.svg';
  10. import WidgetBar from 'sentry-images/dashboard/widget-bar.svg';
  11. import WidgetBigNumber from 'sentry-images/dashboard/widget-big-number.svg';
  12. import WidgetLine from 'sentry-images/dashboard/widget-line-1.svg';
  13. import WidgetTable from 'sentry-images/dashboard/widget-table.svg';
  14. import WidgetWorldMap from 'sentry-images/dashboard/widget-world-map.svg';
  15. import {parseArithmetic} from 'sentry/components/arithmeticInput/parser';
  16. import {
  17. Fidelity,
  18. getDiffInMinutes,
  19. getInterval,
  20. SIX_HOURS,
  21. TWENTY_FOUR_HOURS,
  22. } from 'sentry/components/charts/utils';
  23. import {normalizeDateTimeString} from 'sentry/components/organizations/pageFilters/parse';
  24. import {Organization, PageFilters} from 'sentry/types';
  25. import {defined} from 'sentry/utils';
  26. import {getUtcDateString, parsePeriodToHours} from 'sentry/utils/dates';
  27. import EventView from 'sentry/utils/discover/eventView';
  28. import {
  29. getAggregateAlias,
  30. getAggregateArg,
  31. getColumnsAndAggregates,
  32. isEquation,
  33. isMeasurement,
  34. stripEquationPrefix,
  35. } from 'sentry/utils/discover/fields';
  36. import {DisplayModes} from 'sentry/utils/discover/types';
  37. import {getMeasurements} from 'sentry/utils/measurements/measurements';
  38. import {
  39. DashboardDetails,
  40. DashboardFilters,
  41. DisplayType,
  42. Widget,
  43. WidgetQuery,
  44. WidgetType,
  45. } from 'sentry/views/dashboardsV2/types';
  46. export type ValidationError = {
  47. [key: string]: string | string[] | ValidationError[] | ValidationError;
  48. };
  49. export type FlatValidationError = {
  50. [key: string]: string | FlatValidationError[] | FlatValidationError;
  51. };
  52. export function cloneDashboard(dashboard: DashboardDetails): DashboardDetails {
  53. return cloneDeep(dashboard);
  54. }
  55. export function eventViewFromWidget(
  56. title: string,
  57. query: WidgetQuery,
  58. selection: PageFilters,
  59. widgetDisplayType?: DisplayType
  60. ): EventView {
  61. const {start, end, period: statsPeriod} = selection.datetime;
  62. const {projects, environments} = selection;
  63. // World Map requires an additional column (geo.country_code) to display in discover when navigating from the widget
  64. const fields =
  65. widgetDisplayType === DisplayType.WORLD_MAP &&
  66. !query.columns.includes('geo.country_code')
  67. ? ['geo.country_code', ...query.columns, ...query.aggregates]
  68. : [...query.columns, ...query.aggregates];
  69. const conditions =
  70. widgetDisplayType === DisplayType.WORLD_MAP &&
  71. !query.conditions.includes('has:geo.country_code')
  72. ? `${query.conditions} has:geo.country_code`.trim()
  73. : query.conditions;
  74. const {orderby} = query;
  75. // Need to convert orderby to aggregate alias because eventView still uses aggregate alias format
  76. const aggregateAliasOrderBy = orderby
  77. ? `${orderby.startsWith('-') ? '-' : ''}${getAggregateAlias(trimStart(orderby, '-'))}`
  78. : orderby;
  79. return EventView.fromSavedQuery({
  80. id: undefined,
  81. name: title,
  82. version: 2,
  83. fields,
  84. query: conditions,
  85. orderby: aggregateAliasOrderBy,
  86. projects,
  87. range: statsPeriod ?? undefined,
  88. start: start ? getUtcDateString(start) : undefined,
  89. end: end ? getUtcDateString(end) : undefined,
  90. environment: environments,
  91. });
  92. }
  93. function coerceStringToArray(value?: string | string[] | null) {
  94. return typeof value === 'string' ? [value] : value;
  95. }
  96. export function constructWidgetFromQuery(query?: Query): Widget | undefined {
  97. if (query) {
  98. const queryNames = coerceStringToArray(query.queryNames);
  99. const queryConditions = coerceStringToArray(query.queryConditions);
  100. const queryFields = coerceStringToArray(query.queryFields);
  101. const queries: WidgetQuery[] = [];
  102. if (
  103. queryConditions &&
  104. queryNames &&
  105. queryFields &&
  106. typeof query.queryOrderby === 'string'
  107. ) {
  108. const {columns, aggregates} = getColumnsAndAggregates(queryFields);
  109. queryConditions.forEach((condition, index) => {
  110. queries.push({
  111. name: queryNames[index],
  112. conditions: condition,
  113. fields: queryFields,
  114. columns,
  115. aggregates,
  116. orderby: query.queryOrderby as string,
  117. });
  118. });
  119. }
  120. if (query.title && query.displayType && query.interval && queries.length > 0) {
  121. const newWidget: Widget = {
  122. ...(pick(query, ['title', 'displayType', 'interval']) as {
  123. displayType: DisplayType;
  124. interval: string;
  125. title: string;
  126. }),
  127. widgetType: WidgetType.DISCOVER,
  128. queries,
  129. };
  130. return newWidget;
  131. }
  132. }
  133. return undefined;
  134. }
  135. export function miniWidget(displayType: DisplayType): string {
  136. switch (displayType) {
  137. case DisplayType.BAR:
  138. return WidgetBar;
  139. case DisplayType.AREA:
  140. case DisplayType.TOP_N:
  141. return WidgetArea;
  142. case DisplayType.BIG_NUMBER:
  143. return WidgetBigNumber;
  144. case DisplayType.TABLE:
  145. return WidgetTable;
  146. case DisplayType.WORLD_MAP:
  147. return WidgetWorldMap;
  148. case DisplayType.LINE:
  149. default:
  150. return WidgetLine;
  151. }
  152. }
  153. export function getWidgetInterval(
  154. displayType: DisplayType,
  155. datetimeObj: Partial<PageFilters['datetime']>,
  156. widgetInterval?: string,
  157. fidelity?: Fidelity
  158. ): string {
  159. // Don't fetch more than 66 bins as we're plotting on a small area.
  160. const MAX_BIN_COUNT = 66;
  161. // Bars charts are daily totals to aligned with discover. It also makes them
  162. // usefully different from line/area charts until we expose the interval control, or remove it.
  163. let interval = displayType === 'bar' ? '1d' : widgetInterval;
  164. if (!interval) {
  165. // Default to 5 minutes
  166. interval = '5m';
  167. }
  168. const desiredPeriod = parsePeriodToHours(interval);
  169. const selectedRange = getDiffInMinutes(datetimeObj);
  170. if (fidelity) {
  171. // Primarily to support lower fidelity for Release Health widgets
  172. // the sort on releases and hit the metrics API endpoint.
  173. interval = getInterval(datetimeObj, fidelity);
  174. if (selectedRange > SIX_HOURS && selectedRange <= TWENTY_FOUR_HOURS) {
  175. interval = '1h';
  176. }
  177. return displayType === 'bar' ? '1d' : interval;
  178. }
  179. // selectedRange is in minutes, desiredPeriod is in hours
  180. // convert desiredPeriod to minutes
  181. if (selectedRange / (desiredPeriod * 60) > MAX_BIN_COUNT) {
  182. const highInterval = getInterval(datetimeObj, 'high');
  183. // Only return high fidelity interval if desired interval is higher fidelity
  184. if (desiredPeriod < parsePeriodToHours(highInterval)) {
  185. return highInterval;
  186. }
  187. }
  188. return interval;
  189. }
  190. export function getFieldsFromEquations(fields: string[]): string[] {
  191. // Gather all fields and functions used in equations and prepend them to the provided fields
  192. const termsSet: Set<string> = new Set();
  193. fields.filter(isEquation).forEach(field => {
  194. const parsed = parseArithmetic(stripEquationPrefix(field)).tc;
  195. parsed.fields.forEach(({term}) => termsSet.add(term as string));
  196. parsed.functions.forEach(({term}) => termsSet.add(term as string));
  197. });
  198. return Array.from(termsSet);
  199. }
  200. export function getWidgetDiscoverUrl(
  201. widget: Widget,
  202. selection: PageFilters,
  203. organization: Organization,
  204. index: number = 0,
  205. isMetricsData: boolean = false
  206. ) {
  207. const eventView = eventViewFromWidget(
  208. widget.title,
  209. widget.queries[index],
  210. selection,
  211. widget.displayType
  212. );
  213. const discoverLocation = eventView.getResultsViewUrlTarget(organization.slug);
  214. // Pull a max of 3 valid Y-Axis from the widget
  215. const yAxisOptions = eventView.getYAxisOptions().map(({value}) => value);
  216. discoverLocation.query.yAxis = [
  217. ...new Set(
  218. widget.queries[0].aggregates.filter(aggregate => yAxisOptions.includes(aggregate))
  219. ),
  220. ].slice(0, 3);
  221. // Visualization specific transforms
  222. switch (widget.displayType) {
  223. case DisplayType.WORLD_MAP:
  224. discoverLocation.query.display = DisplayModes.WORLDMAP;
  225. break;
  226. case DisplayType.BAR:
  227. discoverLocation.query.display = DisplayModes.BAR;
  228. break;
  229. case DisplayType.TOP_N:
  230. discoverLocation.query.display = DisplayModes.TOP5;
  231. // Last field is used as the yAxis
  232. const aggregates = widget.queries[0].aggregates;
  233. discoverLocation.query.yAxis = aggregates[aggregates.length - 1];
  234. if (aggregates.slice(0, -1).includes(aggregates[aggregates.length - 1])) {
  235. discoverLocation.query.field = aggregates.slice(0, -1);
  236. }
  237. break;
  238. default:
  239. break;
  240. }
  241. // Equation fields need to have their terms explicitly selected as columns in the discover table
  242. const fields = discoverLocation.query.field;
  243. const query = widget.queries[0];
  244. const queryFields = defined(query.fields)
  245. ? query.fields
  246. : [...query.columns, ...query.aggregates];
  247. const equationFields = getFieldsFromEquations(queryFields);
  248. // Updates fields by adding any individual terms from equation fields as a column
  249. equationFields.forEach(term => {
  250. if (Array.isArray(fields) && !fields.includes(term)) {
  251. fields.unshift(term);
  252. }
  253. });
  254. if (isMetricsData) {
  255. discoverLocation.query.fromMetric = 'true';
  256. }
  257. // Construct and return the discover url
  258. const discoverPath = `${discoverLocation.pathname}?${qs.stringify({
  259. ...discoverLocation.query,
  260. })}`;
  261. return discoverPath;
  262. }
  263. export function getWidgetIssueUrl(
  264. widget: Widget,
  265. selection: PageFilters,
  266. organization: Organization
  267. ) {
  268. const {start, end, utc, period} = selection.datetime;
  269. const datetime =
  270. start && end
  271. ? {start: getUtcDateString(start), end: getUtcDateString(end), utc}
  272. : {statsPeriod: period};
  273. const issuesLocation = `/organizations/${organization.slug}/issues/?${qs.stringify({
  274. query: widget.queries?.[0]?.conditions,
  275. sort: widget.queries?.[0]?.orderby,
  276. ...datetime,
  277. project: selection.projects,
  278. environment: selection.environments,
  279. })}`;
  280. return issuesLocation;
  281. }
  282. export function getWidgetReleasesUrl(
  283. _widget: Widget,
  284. selection: PageFilters,
  285. organization: Organization
  286. ) {
  287. const {start, end, utc, period} = selection.datetime;
  288. const datetime =
  289. start && end
  290. ? {start: getUtcDateString(start), end: getUtcDateString(end), utc}
  291. : {statsPeriod: period};
  292. const releasesLocation = `/organizations/${organization.slug}/releases/?${qs.stringify({
  293. ...datetime,
  294. project: selection.projects,
  295. environment: selection.environments,
  296. })}`;
  297. return releasesLocation;
  298. }
  299. export function flattenErrors(
  300. data: ValidationError | string,
  301. update: FlatValidationError
  302. ): FlatValidationError {
  303. if (typeof data === 'string') {
  304. update.error = data;
  305. } else {
  306. Object.keys(data).forEach((key: string) => {
  307. const value = data[key];
  308. if (typeof value === 'string') {
  309. update[key] = value;
  310. return;
  311. }
  312. // Recurse into nested objects.
  313. if (Array.isArray(value) && typeof value[0] === 'string') {
  314. update[key] = value[0];
  315. return;
  316. }
  317. if (Array.isArray(value) && typeof value[0] === 'object') {
  318. (value as ValidationError[]).map(item => flattenErrors(item, update));
  319. } else {
  320. flattenErrors(value as ValidationError, update);
  321. }
  322. });
  323. }
  324. return update;
  325. }
  326. export function getDashboardsMEPQueryParams(isMEPEnabled: boolean) {
  327. return isMEPEnabled
  328. ? {
  329. dataset: 'metricsEnhanced',
  330. }
  331. : {};
  332. }
  333. export function getNumEquations(possibleEquations: string[]) {
  334. return possibleEquations.filter(isEquation).length;
  335. }
  336. export function isCustomMeasurement(field: string) {
  337. const definedMeasurements = Object.keys(getMeasurements());
  338. return isMeasurement(field) && !definedMeasurements.includes(field);
  339. }
  340. export function isCustomMeasurementWidget(widget: Widget) {
  341. return (
  342. widget.widgetType === WidgetType.DISCOVER &&
  343. widget.queries.some(({aggregates, columns, fields}) => {
  344. const aggregateArgs = aggregates.reduce((acc: string[], aggregate) => {
  345. // Should be ok to use getAggregateArg. getAggregateArg only returns the first arg
  346. // but there aren't any custom measurement aggregates that use custom measurements
  347. // outside of the first arg.
  348. const aggregateArg = getAggregateArg(aggregate);
  349. if (aggregateArg) {
  350. acc.push(aggregateArg);
  351. }
  352. return acc;
  353. }, []);
  354. return [...aggregateArgs, ...columns, ...(fields ?? [])].some(field =>
  355. isCustomMeasurement(field)
  356. );
  357. })
  358. );
  359. }
  360. export function getCustomMeasurementQueryParams() {
  361. return {
  362. dataset: 'metrics',
  363. };
  364. }
  365. export function hasSavedPageFilters(dashboard: DashboardDetails) {
  366. return !(
  367. isEmpty(dashboard.projects) &&
  368. dashboard.environment === undefined &&
  369. dashboard.start === undefined &&
  370. dashboard.end === undefined &&
  371. dashboard.period === undefined
  372. );
  373. }
  374. export function hasUnsavedFilterChanges(
  375. initialDashboard: DashboardDetails,
  376. location: Location,
  377. newDashboardFilters: DashboardFilters
  378. ) {
  379. const savedFilters = {
  380. projects: initialDashboard.projects,
  381. environment: initialDashboard.environment,
  382. period: initialDashboard.period,
  383. start: normalizeDateTimeString(initialDashboard.start),
  384. end: normalizeDateTimeString(initialDashboard.end),
  385. filters: initialDashboard.filters,
  386. utc: initialDashboard.utc,
  387. };
  388. const currentFilters = {
  389. ...getCurrentPageFilters(location),
  390. filters: newDashboardFilters,
  391. };
  392. return !isEqual(savedFilters, currentFilters);
  393. }
  394. export function getSavedPageFilters(dashboard: DashboardDetails) {
  395. return {
  396. project: dashboard.projects,
  397. environment: dashboard.environment,
  398. statsPeriod: dashboard.period,
  399. start: normalizeDateTimeString(dashboard.start),
  400. end: normalizeDateTimeString(dashboard.end),
  401. utc: dashboard.utc,
  402. };
  403. }
  404. export function resetPageFilters(dashboard: DashboardDetails, location: Location) {
  405. browserHistory.replace({
  406. ...location,
  407. query: getSavedPageFilters(dashboard),
  408. });
  409. }
  410. export function getCurrentPageFilters(
  411. location: Location
  412. ): Pick<
  413. DashboardDetails,
  414. 'projects' | 'environment' | 'period' | 'start' | 'end' | 'utc'
  415. > {
  416. const {project, environment, statsPeriod, start, end, utc} = location.query ?? {};
  417. return {
  418. // Ensure projects and environment are sent as arrays, or undefined in the request
  419. // location.query will return a string if there's only one value
  420. projects:
  421. project === undefined || project === null
  422. ? []
  423. : typeof project === 'string'
  424. ? [Number(project)]
  425. : project.map(Number),
  426. environment:
  427. typeof environment === 'string' ? [environment] : environment ?? undefined,
  428. period: statsPeriod as string | undefined,
  429. start: defined(start) ? normalizeDateTimeString(start as string) : undefined,
  430. end: defined(end) ? normalizeDateTimeString(end as string) : undefined,
  431. utc: defined(utc) ? utc === 'true' : undefined,
  432. };
  433. }