utils.tsx 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904
  1. import type {Location, Query} from 'history';
  2. import * as Papa from 'papaparse';
  3. import {openAddToDashboardModal} from 'sentry/actionCreators/modal';
  4. import {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
  5. import {URL_PARAM} from 'sentry/constants/pageFilters';
  6. import {t} from 'sentry/locale';
  7. import type {SelectValue} from 'sentry/types/core';
  8. import type {Event} from 'sentry/types/event';
  9. import type {InjectedRouter} from 'sentry/types/legacyReactRouter';
  10. import type {
  11. NewQuery,
  12. Organization,
  13. OrganizationSummary,
  14. } from 'sentry/types/organization';
  15. import type {Project} from 'sentry/types/project';
  16. import {defined, urlEncode} from 'sentry/utils';
  17. import {getUtcDateString} from 'sentry/utils/dates';
  18. import type {TableDataRow} from 'sentry/utils/discover/discoverQuery';
  19. import type {EventData} from 'sentry/utils/discover/eventView';
  20. import type EventView from 'sentry/utils/discover/eventView';
  21. import type {
  22. Aggregation,
  23. Column,
  24. ColumnType,
  25. ColumnValueType,
  26. Field,
  27. } from 'sentry/utils/discover/fields';
  28. import {
  29. aggregateFunctionOutputType,
  30. AGGREGATIONS,
  31. explodeFieldString,
  32. getAggregateAlias,
  33. getAggregateArg,
  34. getColumnsAndAggregates,
  35. getEquation,
  36. isAggregateEquation,
  37. isAggregateFieldOrEquation,
  38. isEquation,
  39. isMeasurement,
  40. isSpanOperationBreakdownField,
  41. measurementType,
  42. PROFILING_FIELDS,
  43. TRACING_FIELDS,
  44. } from 'sentry/utils/discover/fields';
  45. import {DisplayModes, SavedQueryDatasets, TOP_N} from 'sentry/utils/discover/types';
  46. import {getTitle} from 'sentry/utils/events';
  47. import {DISCOVER_FIELDS, FieldValueType, getFieldDefinition} from 'sentry/utils/fields';
  48. import localStorage from 'sentry/utils/localStorage';
  49. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  50. import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate';
  51. import {convertWidgetToBuilderStateParams} from 'sentry/views/dashboards/widgetBuilder/utils/convertWidgetToBuilderStateParams';
  52. import {
  53. type DashboardWidgetSource,
  54. DisplayType,
  55. type Widget,
  56. type WidgetQuery,
  57. WidgetType,
  58. } from '../dashboards/types';
  59. import {transactionSummaryRouteWithQuery} from '../performance/transactionSummary/utils';
  60. import {displayModeToDisplayType} from './savedQuery/utils';
  61. import type {FieldValue, TableColumn} from './table/types';
  62. import {FieldValueKind} from './table/types';
  63. import {getAllViews, getTransactionViews, getWebVitalsViews} from './data';
  64. export type QueryWithColumnState =
  65. | Query
  66. | {
  67. field: string | string[] | null | undefined;
  68. sort: string | string[] | null | undefined;
  69. };
  70. const TEMPLATE_TABLE_COLUMN: TableColumn<string> = {
  71. key: '',
  72. name: '',
  73. type: 'never',
  74. isSortable: false,
  75. column: Object.freeze({kind: 'field', field: ''}),
  76. width: COL_WIDTH_UNDEFINED,
  77. };
  78. export function decodeColumnOrder(fields: readonly Field[]): Array<TableColumn<string>> {
  79. return fields.map((f: Field) => {
  80. const column: TableColumn<string> = {...TEMPLATE_TABLE_COLUMN};
  81. const col = explodeFieldString(f.field, f.alias);
  82. const columnName = f.field;
  83. if (isEquation(f.field)) {
  84. column.key = f.field;
  85. column.name = getEquation(columnName);
  86. column.type = 'number';
  87. } else {
  88. column.key = columnName;
  89. column.name = columnName;
  90. }
  91. column.width = f.width || COL_WIDTH_UNDEFINED;
  92. if (col.kind === 'function') {
  93. // Aggregations can have a strict outputType or they can inherit from their field.
  94. // Otherwise use the FIELDS data to infer types.
  95. const outputType = aggregateFunctionOutputType(col.function[0], col.function[1]);
  96. if (outputType !== null) {
  97. column.type = outputType;
  98. }
  99. // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
  100. const aggregate = AGGREGATIONS[col.function[0]];
  101. column.isSortable = aggregate?.isSortable;
  102. } else if (col.kind === 'field') {
  103. if (getFieldDefinition(col.field) !== null) {
  104. column.type = getFieldDefinition(col.field)?.valueType as ColumnValueType;
  105. } else if (isMeasurement(col.field)) {
  106. column.type = measurementType(col.field);
  107. } else if (isSpanOperationBreakdownField(col.field)) {
  108. column.type = 'duration';
  109. }
  110. }
  111. column.column = col;
  112. return column;
  113. });
  114. }
  115. export function pushEventViewToLocation(props: {
  116. location: Location;
  117. navigate: ReactRouter3Navigate;
  118. nextEventView: EventView;
  119. extraQuery?: Query;
  120. }) {
  121. const {navigate, location, nextEventView} = props;
  122. const extraQuery = props.extraQuery || {};
  123. const queryStringObject = nextEventView.generateQueryStringObject();
  124. navigate({
  125. ...location,
  126. query: {
  127. ...extraQuery,
  128. ...queryStringObject,
  129. },
  130. });
  131. }
  132. export function generateTitle({
  133. eventView,
  134. event,
  135. isHomepage,
  136. }: {
  137. eventView: EventView;
  138. event?: Event;
  139. isHomepage?: boolean;
  140. }) {
  141. const titles = [t('Discover')];
  142. if (isHomepage) {
  143. return t('Discover');
  144. }
  145. const eventViewName = eventView.name;
  146. if (typeof eventViewName === 'string' && String(eventViewName).trim().length > 0) {
  147. titles.push(String(eventViewName).trim());
  148. }
  149. const eventTitle = event ? getTitle(event).title : undefined;
  150. if (eventTitle) {
  151. titles.push(eventTitle);
  152. }
  153. titles.reverse();
  154. return titles.join(' — ');
  155. }
  156. export function getPrebuiltQueries(organization: Organization) {
  157. const views = [...getAllViews(organization)];
  158. if (organization.features.includes('performance-view')) {
  159. // insert transactions queries at index 2
  160. views.splice(2, 0, ...getTransactionViews(organization));
  161. views.push(...getWebVitalsViews(organization));
  162. }
  163. return views;
  164. }
  165. function disableMacros(value: string | null | boolean | number) {
  166. const unsafeCharacterRegex = /^[\=\+\-\@]/;
  167. if (typeof value === 'string' && `${value}`.match(unsafeCharacterRegex)) {
  168. return `'${value}`;
  169. }
  170. return value;
  171. }
  172. export function downloadAsCsv(tableData: any, columnOrder: any, filename: any) {
  173. const {data} = tableData;
  174. const headings = columnOrder.map((column: any) => column.name);
  175. const keys = columnOrder.map((column: any) => column.key);
  176. const csvContent = Papa.unparse({
  177. fields: headings,
  178. data: data.map((row: any) =>
  179. keys.map((key: any) => {
  180. return disableMacros(row[key]);
  181. })
  182. ),
  183. });
  184. // Need to also manually replace # since encodeURI skips them
  185. const encodedDataUrl = `data:text/csv;charset=utf8,${encodeURIComponent(csvContent)}`;
  186. // Create a download link then click it, this is so we can get a filename
  187. const link = document.createElement('a');
  188. const now = new Date();
  189. link.setAttribute('href', encodedDataUrl);
  190. link.setAttribute('download', `${filename} ${getUtcDateString(now)}.csv`);
  191. link.click();
  192. link.remove();
  193. // Make testing easier
  194. return encodedDataUrl;
  195. }
  196. const ALIASED_AGGREGATES_COLUMN = {
  197. last_seen: 'timestamp',
  198. failure_count: 'transaction.status',
  199. };
  200. /**
  201. * Convert an aggregate into the resulting column from a drilldown action.
  202. * The result is null if the drilldown results in the aggregate being removed.
  203. */
  204. function drilldownAggregate(
  205. func: Extract<Column, {kind: 'function'}>
  206. ): Extract<Column, {kind: 'field'}> | null {
  207. const key = func.function[0];
  208. // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
  209. const aggregation = AGGREGATIONS[key];
  210. let column = func.function[1];
  211. if (ALIASED_AGGREGATES_COLUMN.hasOwnProperty(key)) {
  212. // Some aggregates are just shortcuts to other aggregates with
  213. // predefined arguments so we can directly map them to the result.
  214. // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
  215. column = ALIASED_AGGREGATES_COLUMN[key];
  216. } else if (aggregation?.parameters?.[0]) {
  217. const parameter = aggregation.parameters[0];
  218. if (parameter.kind !== 'column') {
  219. // The aggregation does not accept a column as a parameter,
  220. // so we clear the column.
  221. column = '';
  222. } else if (!column && parameter.required === false) {
  223. // The parameter was not given for a non-required parameter,
  224. // so we fall back to the default.
  225. column = parameter.defaultValue;
  226. }
  227. } else {
  228. // The aggregation does not exist or does not have any parameters,
  229. // so we clear the column.
  230. column = '';
  231. }
  232. return column ? {kind: 'field', field: column} : null;
  233. }
  234. /**
  235. * Convert an aggregated query into one that does not have aggregates.
  236. * Will also apply additions conditions defined in `additionalConditions`
  237. * and generate conditions based on the `dataRow` parameter and the current fields
  238. * in the `eventView`.
  239. */
  240. export function getExpandedResults(
  241. eventView: EventView,
  242. additionalConditions: Record<string, string>,
  243. dataRow?: TableDataRow | Event
  244. ): EventView {
  245. const fieldSet = new Set();
  246. // Expand any functions in the resulting column, and dedupe the result.
  247. // Mark any column as null to remove it.
  248. const expandedColumns: Array<Column | null> = eventView.fields.map((field: Field) => {
  249. const exploded = explodeFieldString(field.field, field.alias);
  250. const column = exploded.kind === 'function' ? drilldownAggregate(exploded) : exploded;
  251. if (
  252. // if expanding the function failed
  253. column === null ||
  254. // the new column is already present
  255. fieldSet.has(column.field) ||
  256. // Skip aggregate equations, their functions will already be added so we just want to remove it
  257. isAggregateEquation(field.field)
  258. ) {
  259. return null;
  260. }
  261. fieldSet.add(column.field);
  262. return column;
  263. });
  264. // id should be default column when expanded results in no columns; but only if
  265. // the Discover query's columns is non-empty.
  266. // This typically occurs in Discover drilldowns.
  267. if (fieldSet.size === 0 && expandedColumns.length) {
  268. expandedColumns[0] = {kind: 'field', field: 'id'};
  269. }
  270. // update the columns according the expansion above
  271. const nextView = expandedColumns.reduceRight(
  272. (newView, column, index) =>
  273. column === null
  274. ? newView.withDeletedColumn(index, undefined)
  275. : newView.withUpdatedColumn(index, column, undefined),
  276. eventView.clone()
  277. );
  278. nextView.query = generateExpandedConditions(nextView, additionalConditions, dataRow);
  279. return nextView;
  280. }
  281. /**
  282. * Create additional conditions based on the fields in an EventView
  283. * and a datarow/event
  284. */
  285. function generateAdditionalConditions(
  286. eventView: EventView,
  287. dataRow?: TableDataRow | Event
  288. ): Record<string, string | string[]> {
  289. const specialKeys = Object.values(URL_PARAM);
  290. const conditions: Record<string, string | string[]> = {};
  291. if (!dataRow) {
  292. return conditions;
  293. }
  294. eventView.fields.forEach((field: Field) => {
  295. const column = explodeFieldString(field.field, field.alias);
  296. // Skip aggregate fields
  297. if (column.kind === 'function') {
  298. return;
  299. }
  300. const dataKey = getAggregateAlias(field.field);
  301. // Append the current field as a condition if it exists in the dataRow
  302. // Or is a simple key in the event. More complex deeply nested fields are
  303. // more challenging to get at as their location in the structure does not
  304. // match their name.
  305. if (dataRow.hasOwnProperty(dataKey)) {
  306. // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
  307. let value = dataRow[dataKey];
  308. if (Array.isArray(value)) {
  309. if (value.length > 1) {
  310. conditions[column.field] = value;
  311. return;
  312. }
  313. // An array with only one value is equivalent to the value itself.
  314. value = value[0];
  315. }
  316. // if the value will be quoted, then do not trim it as the whitespaces
  317. // may be important to the query and should not be trimmed
  318. const shouldQuote =
  319. value === null || value === undefined
  320. ? false
  321. : /[\s\(\)\\"]/g.test(String(value).trim());
  322. const nextValue =
  323. value === null || value === undefined
  324. ? ''
  325. : shouldQuote
  326. ? String(value)
  327. : String(value).trim();
  328. if (isMeasurement(column.field) && !nextValue) {
  329. // Do not add measurement conditions if nextValue is falsey.
  330. // It's expected that nextValue is a numeric value.
  331. return;
  332. }
  333. switch (column.field) {
  334. case 'timestamp':
  335. // normalize the "timestamp" field to ensure the payload works
  336. conditions[column.field] = getUtcDateString(nextValue);
  337. break;
  338. default:
  339. conditions[column.field] = nextValue;
  340. }
  341. }
  342. // If we have an event, check tags as well.
  343. if (dataRow.tags && Array.isArray(dataRow.tags)) {
  344. const tagIndex = dataRow.tags.findIndex(item => item.key === dataKey);
  345. if (tagIndex > -1) {
  346. const key = specialKeys.includes(column.field)
  347. ? `tags[${column.field}]`
  348. : column.field;
  349. const tagValue = dataRow.tags[tagIndex]!.value;
  350. conditions[key] = tagValue;
  351. }
  352. }
  353. });
  354. return conditions;
  355. }
  356. /**
  357. * Discover queries can query either Errors, Transactions or a combination
  358. * of the two datasets. This is a util to determine if the query will excusively
  359. * hit the Transactions dataset.
  360. */
  361. export function usesTransactionsDataset(eventView: EventView, yAxisValue: string[]) {
  362. let usesTransactions: boolean = false;
  363. const parsedQuery = new MutableSearch(eventView.query);
  364. for (let index = 0; index < yAxisValue.length; index++) {
  365. const yAxis = yAxisValue[index]!;
  366. const aggregateArg = getAggregateArg(yAxis) ?? '';
  367. if (isMeasurement(aggregateArg) || aggregateArg === 'transaction.duration') {
  368. usesTransactions = true;
  369. break;
  370. }
  371. const eventTypeFilter = parsedQuery.getFilterValues('event.type');
  372. if (
  373. eventTypeFilter.length > 0 &&
  374. eventTypeFilter.every(filter => filter === 'transaction')
  375. ) {
  376. usesTransactions = true;
  377. break;
  378. }
  379. }
  380. return usesTransactions;
  381. }
  382. function generateExpandedConditions(
  383. eventView: EventView,
  384. additionalConditions: Record<string, string>,
  385. dataRow?: TableDataRow | Event
  386. ): string {
  387. const parsedQuery = new MutableSearch(eventView.query);
  388. // Remove any aggregates from the search conditions.
  389. // otherwise, it'll lead to an invalid query result.
  390. for (const key in parsedQuery.filters) {
  391. const column = explodeFieldString(key);
  392. if (column.kind === 'function') {
  393. parsedQuery.removeFilter(key);
  394. }
  395. }
  396. const conditions: Record<string, string | string[]> = Object.assign(
  397. {},
  398. additionalConditions,
  399. generateAdditionalConditions(eventView, dataRow)
  400. );
  401. // Add additional conditions provided and generated.
  402. for (const key in conditions) {
  403. const value = conditions[key]!;
  404. if (Array.isArray(value)) {
  405. parsedQuery.setFilterValues(key, value);
  406. continue;
  407. }
  408. if (key === 'project.id') {
  409. eventView.project = [...eventView.project, parseInt(value, 10)];
  410. continue;
  411. }
  412. if (key === 'environment') {
  413. if (!eventView.environment.includes(value)) {
  414. eventView.environment = [...eventView.environment, value];
  415. }
  416. continue;
  417. }
  418. const column = explodeFieldString(key);
  419. // Skip aggregates as they will be invalid.
  420. if (column.kind === 'function') {
  421. continue;
  422. }
  423. parsedQuery.setFilterValues(key, [value]);
  424. }
  425. return parsedQuery.formatString();
  426. }
  427. type FieldGeneratorOpts = {
  428. organization: OrganizationSummary;
  429. aggregations?: Record<string, Aggregation>;
  430. customMeasurements?: Array<{functions: string[]; key: string}> | null;
  431. fieldKeys?: string[];
  432. measurementKeys?: string[] | null;
  433. spanOperationBreakdownKeys?: string[];
  434. tagKeys?: string[] | null;
  435. };
  436. export function generateFieldOptions({
  437. organization,
  438. tagKeys,
  439. measurementKeys,
  440. spanOperationBreakdownKeys,
  441. customMeasurements,
  442. aggregations = AGGREGATIONS,
  443. fieldKeys = DISCOVER_FIELDS,
  444. }: FieldGeneratorOpts) {
  445. let functions = Object.keys(aggregations);
  446. // Strip tracing features if the org doesn't have access.
  447. if (!organization.features.includes('performance-view')) {
  448. fieldKeys = fieldKeys.filter(item => !TRACING_FIELDS.includes(item));
  449. functions = functions.filter(item => !TRACING_FIELDS.includes(item));
  450. }
  451. // Strip profiling features if the org doesn't have access.
  452. if (!organization.features.includes('profiling')) {
  453. fieldKeys = fieldKeys.filter(item => !PROFILING_FIELDS.includes(item));
  454. }
  455. const fieldOptions: Record<string, SelectValue<FieldValue>> = {};
  456. // Index items by prefixed keys as custom tags can overlap both fields and
  457. // function names. Having a mapping makes finding the value objects easier
  458. // later as well.
  459. functions.forEach(func => {
  460. const ellipsis = aggregations[func]!.parameters.length ? '\u2026' : '';
  461. const parameters = aggregations[func]!.parameters.map(param => {
  462. const overrides = aggregations[func]!.getFieldOverrides;
  463. if (typeof overrides === 'undefined') {
  464. return param;
  465. }
  466. return {
  467. ...param,
  468. ...overrides({parameter: param}),
  469. };
  470. });
  471. fieldOptions[`function:${func}`] = {
  472. label: `${func}(${ellipsis})`,
  473. value: {
  474. kind: FieldValueKind.FUNCTION,
  475. meta: {
  476. name: func,
  477. parameters,
  478. },
  479. },
  480. };
  481. });
  482. fieldKeys.forEach(field => {
  483. fieldOptions[`field:${field}`] = {
  484. label: field,
  485. value: {
  486. kind: FieldValueKind.FIELD,
  487. meta: {
  488. name: field,
  489. dataType: (getFieldDefinition(field)?.valueType ??
  490. FieldValueType.STRING) as ColumnType,
  491. },
  492. },
  493. };
  494. });
  495. if (measurementKeys !== undefined && measurementKeys !== null) {
  496. measurementKeys.sort();
  497. measurementKeys.forEach(measurement => {
  498. fieldOptions[`measurement:${measurement}`] = {
  499. label: measurement,
  500. value: {
  501. kind: FieldValueKind.MEASUREMENT,
  502. meta: {name: measurement, dataType: measurementType(measurement)},
  503. },
  504. };
  505. });
  506. }
  507. if (customMeasurements !== undefined && customMeasurements !== null) {
  508. customMeasurements.sort(({key: currentKey}, {key: nextKey}) =>
  509. currentKey > nextKey ? 1 : currentKey === nextKey ? 0 : -1
  510. );
  511. customMeasurements.forEach(({key, functions: supportedFunctions}) => {
  512. fieldOptions[`measurement:${key}`] = {
  513. label: key,
  514. value: {
  515. kind: FieldValueKind.CUSTOM_MEASUREMENT,
  516. meta: {
  517. name: key,
  518. dataType: measurementType(key),
  519. functions: supportedFunctions,
  520. },
  521. },
  522. };
  523. });
  524. }
  525. if (Array.isArray(spanOperationBreakdownKeys)) {
  526. spanOperationBreakdownKeys.sort();
  527. spanOperationBreakdownKeys.forEach(breakdownField => {
  528. if (!fieldKeys.includes(breakdownField)) {
  529. // These span op breakdowns are sometimes included in the fieldKeys
  530. // so check before we add them, or else we surface duplicates
  531. fieldOptions[`span_op_breakdown:${breakdownField}`] = {
  532. label: breakdownField,
  533. value: {
  534. kind: FieldValueKind.BREAKDOWN,
  535. meta: {name: breakdownField, dataType: 'duration'},
  536. },
  537. };
  538. }
  539. });
  540. }
  541. if (tagKeys !== undefined && tagKeys !== null) {
  542. tagKeys.sort();
  543. tagKeys.forEach(tag => {
  544. const tagValue =
  545. fieldKeys.includes(tag) || aggregations.hasOwnProperty(tag)
  546. ? `tags[${tag}]`
  547. : tag;
  548. fieldOptions[`tag:${tag}`] = {
  549. label: tag,
  550. value: {
  551. kind: FieldValueKind.TAG,
  552. meta: {name: tagValue, dataType: 'string'},
  553. },
  554. };
  555. });
  556. }
  557. return fieldOptions;
  558. }
  559. const RENDER_PREBUILT_KEY = 'discover-render-prebuilt';
  560. export function shouldRenderPrebuilt(): boolean {
  561. const shouldRender = localStorage.getItem(RENDER_PREBUILT_KEY);
  562. return shouldRender === 'true' || shouldRender === null;
  563. }
  564. export function setRenderPrebuilt(value: boolean) {
  565. localStorage.setItem(RENDER_PREBUILT_KEY, value ? 'true' : 'false');
  566. }
  567. export function eventViewToWidgetQuery({
  568. eventView,
  569. yAxis,
  570. displayType,
  571. }: {
  572. displayType: DisplayType;
  573. eventView: EventView;
  574. yAxis?: string | string[];
  575. }) {
  576. const fields = eventView.fields.map(({field}) => field);
  577. const {columns, aggregates} = getColumnsAndAggregates(fields);
  578. const sort = eventView.sorts[0];
  579. const queryYAxis = typeof yAxis === 'string' ? [yAxis] : yAxis ?? ['count()'];
  580. let orderby = '';
  581. // The orderby should only be set to sort.field if it is a Top N query
  582. // since the query uses all of the fields, or if the ordering is used in the y-axis
  583. if (sort) {
  584. let orderbyFunction = '';
  585. const aggregateFields = [...queryYAxis, ...aggregates];
  586. for (let i = 0; i < aggregateFields.length; i++) {
  587. if (sort.field === getAggregateAlias(aggregateFields[i]!)) {
  588. orderbyFunction = aggregateFields[i]!;
  589. break;
  590. }
  591. }
  592. const bareOrderby = orderbyFunction === '' ? sort.field : orderbyFunction;
  593. if (displayType === DisplayType.TOP_N || bareOrderby) {
  594. orderby = `${sort.kind === 'desc' ? '-' : ''}${bareOrderby}`;
  595. }
  596. }
  597. let newAggregates = aggregates;
  598. if (displayType !== DisplayType.TABLE) {
  599. newAggregates = queryYAxis;
  600. }
  601. const widgetQuery: WidgetQuery = {
  602. name: '',
  603. aggregates: newAggregates,
  604. columns: [...(displayType === DisplayType.TOP_N ? columns : [])],
  605. fields: [...(displayType === DisplayType.TOP_N ? fields : []), ...queryYAxis],
  606. conditions: eventView.query,
  607. orderby,
  608. };
  609. return widgetQuery;
  610. }
  611. export function handleAddQueryToDashboard({
  612. eventView,
  613. location,
  614. query,
  615. organization,
  616. router,
  617. yAxis,
  618. widgetType,
  619. source,
  620. }: {
  621. eventView: EventView;
  622. location: Location;
  623. organization: Organization;
  624. router: InjectedRouter;
  625. source: DashboardWidgetSource;
  626. widgetType: WidgetType | undefined;
  627. query?: NewQuery;
  628. yAxis?: string | string[];
  629. }) {
  630. const displayType = displayModeToDisplayType(eventView.display as DisplayModes);
  631. const defaultWidgetQuery = eventViewToWidgetQuery({
  632. eventView,
  633. displayType,
  634. yAxis,
  635. });
  636. const {query: widgetAsQueryParams} = constructAddQueryToDashboardLink({
  637. eventView,
  638. query,
  639. organization,
  640. yAxis,
  641. location,
  642. widgetType,
  643. source,
  644. });
  645. openAddToDashboardModal({
  646. organization,
  647. selection: {
  648. projects: eventView.project.slice(),
  649. environments: eventView.environment.slice(),
  650. datetime: {
  651. start: eventView.start!,
  652. end: eventView.end!,
  653. period: eventView.statsPeriod!,
  654. // Previously undetected because the type used to rely on an implicit any value.
  655. // @ts-expect-error TS(2322): Type 'string | boolean | undefined' is not assigna... Remove this comment to see the full error message
  656. utc: eventView.utc,
  657. },
  658. },
  659. widget: {
  660. title: (query?.name ?? eventView.name)!,
  661. displayType: displayType === DisplayType.TOP_N ? DisplayType.AREA : displayType,
  662. queries: [
  663. {
  664. ...defaultWidgetQuery,
  665. aggregates: [...(typeof yAxis === 'string' ? [yAxis] : yAxis ?? ['count()'])],
  666. ...(organization.features.includes('dashboards-widget-builder-redesign')
  667. ? {
  668. // The widget query params filters out aggregate fields
  669. // so we can use the fields as columns. This is so yAxes
  670. // can be grouped by the fields.
  671. fields: widgetAsQueryParams?.field ?? [],
  672. columns: widgetAsQueryParams?.field ?? [],
  673. }
  674. : {}),
  675. },
  676. ],
  677. interval: eventView.interval!,
  678. limit: widgetAsQueryParams?.limit,
  679. widgetType,
  680. },
  681. router,
  682. // Previously undetected because the type relied on implicit any.
  683. // @ts-expect-error TS(2322): Type '{ dataset?: WidgetType | undefined; descript... Remove this comment to see the full error message
  684. widgetAsQueryParams,
  685. location,
  686. });
  687. return;
  688. }
  689. export function getTargetForTransactionSummaryLink(
  690. dataRow: EventData,
  691. organization: Organization,
  692. projects?: Project[],
  693. nextView?: EventView,
  694. location?: Location
  695. ) {
  696. let projectID: string | string[] | undefined;
  697. const filterProjects = location?.query.project;
  698. if (typeof filterProjects === 'string' && filterProjects !== '-1') {
  699. // Project selector in discover has just one selected project
  700. projectID = filterProjects;
  701. } else {
  702. const projectMatch = projects?.find(
  703. project =>
  704. project.slug && [dataRow['project.name'], dataRow.project].includes(project.slug)
  705. );
  706. projectID = projectMatch ? [projectMatch.id] : undefined;
  707. }
  708. const target = transactionSummaryRouteWithQuery({
  709. organization,
  710. transaction: String(dataRow.transaction),
  711. projectID,
  712. query: nextView?.getPageFiltersQuery() || {},
  713. });
  714. // Pass on discover filter params when there are multiple
  715. // projects associated with the transaction
  716. if (!projectID && filterProjects) {
  717. target.query.project = filterProjects;
  718. }
  719. return target;
  720. }
  721. export function constructAddQueryToDashboardLink({
  722. eventView,
  723. query,
  724. organization,
  725. yAxis,
  726. location,
  727. widgetType,
  728. source,
  729. }: {
  730. eventView: EventView;
  731. organization: Organization;
  732. source: DashboardWidgetSource;
  733. location?: Location;
  734. query?: NewQuery;
  735. widgetType?: WidgetType;
  736. yAxis?: string | string[];
  737. }) {
  738. const displayType = displayModeToDisplayType(eventView.display as DisplayModes);
  739. const defaultTableFields = eventView.fields.map(({field}) => field);
  740. const defaultWidgetQuery = eventViewToWidgetQuery({
  741. eventView,
  742. displayType,
  743. yAxis,
  744. });
  745. const defaultTitle =
  746. query?.name ?? (eventView.name !== 'All Events' ? eventView.name : undefined);
  747. const limit =
  748. displayType === DisplayType.TOP_N || eventView.display === DisplayModes.DAILYTOP5
  749. ? Number(eventView.topEvents) || TOP_N
  750. : undefined;
  751. if (organization.features.includes('dashboards-widget-builder-redesign')) {
  752. const widget: Widget = {
  753. title: defaultTitle!,
  754. displayType: displayType === DisplayType.TOP_N ? DisplayType.AREA : displayType,
  755. widgetType,
  756. limit,
  757. interval: eventView.interval ?? '',
  758. queries: [
  759. {
  760. ...defaultWidgetQuery,
  761. aggregates: [...(typeof yAxis === 'string' ? [yAxis] : yAxis ?? ['count()'])],
  762. fields: eventView.getFields(),
  763. columns:
  764. widgetType === WidgetType.SPANS ||
  765. displayType === DisplayType.TOP_N ||
  766. eventView.display === DisplayModes.DAILYTOP5
  767. ? eventView
  768. .getFields()
  769. .filter(
  770. column => defined(column) && !isAggregateFieldOrEquation(column)
  771. )
  772. : [],
  773. },
  774. ],
  775. };
  776. return {
  777. pathname: `/organizations/${organization.slug}/dashboards/new/widget-builder/widget/new/`,
  778. query: {
  779. ...location?.query,
  780. start: eventView.start,
  781. end: eventView.end,
  782. statsPeriod: eventView.statsPeriod,
  783. ...convertWidgetToBuilderStateParams(widget),
  784. source,
  785. },
  786. };
  787. }
  788. return {
  789. pathname: `/organizations/${organization.slug}/dashboards/new/widget/new/`,
  790. query: {
  791. ...location?.query,
  792. start: eventView.start,
  793. end: eventView.end,
  794. statsPeriod: eventView.statsPeriod,
  795. defaultWidgetQuery: urlEncode(defaultWidgetQuery),
  796. defaultTableColumns: defaultTableFields,
  797. defaultTitle,
  798. displayType: displayType === DisplayType.TOP_N ? DisplayType.AREA : displayType,
  799. dataset: widgetType,
  800. field: eventView.getFields(),
  801. limit,
  802. source,
  803. },
  804. };
  805. }
  806. export const SAVED_QUERY_DATASET_TO_WIDGET_TYPE = {
  807. [SavedQueryDatasets.ERRORS]: WidgetType.ERRORS,
  808. [SavedQueryDatasets.TRANSACTIONS]: WidgetType.TRANSACTIONS,
  809. };