searchBar.tsx 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import * as React from 'react';
  2. import {ClassNames} from '@emotion/react';
  3. import assign from 'lodash/assign';
  4. import flatten from 'lodash/flatten';
  5. import isEqual from 'lodash/isEqual';
  6. import memoize from 'lodash/memoize';
  7. import omit from 'lodash/omit';
  8. import {fetchTagValues} from 'app/actionCreators/tags';
  9. import {Client} from 'app/api';
  10. import SmartSearchBar from 'app/components/smartSearchBar';
  11. import {NEGATION_OPERATOR, SEARCH_WILDCARD} from 'app/constants';
  12. import {Organization, SavedSearchType, TagCollection} from 'app/types';
  13. import {defined} from 'app/utils';
  14. import {
  15. Field,
  16. FIELD_TAGS,
  17. isAggregateField,
  18. isEquation,
  19. isMeasurement,
  20. SEMVER_TAGS,
  21. TRACING_FIELDS,
  22. } from 'app/utils/discover/fields';
  23. import Measurements from 'app/utils/measurements/measurements';
  24. import withApi from 'app/utils/withApi';
  25. import withTags from 'app/utils/withTags';
  26. const SEARCH_SPECIAL_CHARS_REGEXP = new RegExp(
  27. `^${NEGATION_OPERATOR}|\\${SEARCH_WILDCARD}`,
  28. 'g'
  29. );
  30. type SearchBarProps = Omit<React.ComponentProps<typeof SmartSearchBar>, 'tags'> & {
  31. api: Client;
  32. organization: Organization;
  33. tags: TagCollection;
  34. omitTags?: string[];
  35. projectIds?: number[] | Readonly<number[]>;
  36. fields?: Readonly<Field[]>;
  37. };
  38. class SearchBar extends React.PureComponent<SearchBarProps> {
  39. componentDidMount() {
  40. // Clear memoized data on mount to make tests more consistent.
  41. this.getEventFieldValues.cache.clear?.();
  42. }
  43. componentDidUpdate(prevProps) {
  44. if (!isEqual(this.props.projectIds, prevProps.projectIds)) {
  45. // Clear memoized data when projects change.
  46. this.getEventFieldValues.cache.clear?.();
  47. }
  48. }
  49. /**
  50. * Returns array of tag values that substring match `query`; invokes `callback`
  51. * with data when ready
  52. */
  53. getEventFieldValues = memoize(
  54. (tag, query, endpointParams): Promise<string[]> => {
  55. const {api, organization, projectIds} = this.props;
  56. const projectIdStrings = (projectIds as Readonly<number>[])?.map(String);
  57. if (isAggregateField(tag.key) || isMeasurement(tag.key)) {
  58. // We can't really auto suggest values for aggregate fields
  59. // or measurements, so we simply don't
  60. return Promise.resolve([]);
  61. }
  62. return fetchTagValues(
  63. api,
  64. organization.slug,
  65. tag.key,
  66. query,
  67. projectIdStrings,
  68. endpointParams,
  69. // allows searching for tags on transactions as well
  70. true
  71. ).then(
  72. results =>
  73. flatten(results.filter(({name}) => defined(name)).map(({name}) => name)),
  74. () => {
  75. throw new Error('Unable to fetch event field values');
  76. }
  77. );
  78. },
  79. ({key}, query) => `${key}-${query}`
  80. );
  81. /**
  82. * Prepare query string (e.g. strip special characters like negation operator)
  83. */
  84. prepareQuery = query => query.replace(SEARCH_SPECIAL_CHARS_REGEXP, '');
  85. getTagList(
  86. measurements: Parameters<
  87. React.ComponentProps<typeof Measurements>['children']
  88. >[0]['measurements']
  89. ) {
  90. const {fields, organization, tags, omitTags} = this.props;
  91. const functionTags = fields
  92. ? Object.fromEntries(
  93. fields
  94. .filter(
  95. item =>
  96. !Object.keys(FIELD_TAGS).includes(item.field) && !isEquation(item.field)
  97. )
  98. .map(item => [item.field, {key: item.field, name: item.field}])
  99. )
  100. : {};
  101. const fieldTags = organization.features.includes('performance-view')
  102. ? Object.assign({}, measurements, FIELD_TAGS, functionTags)
  103. : omit(FIELD_TAGS, TRACING_FIELDS);
  104. const semverTags = organization.features.includes('semver')
  105. ? Object.assign({}, SEMVER_TAGS, fieldTags)
  106. : fieldTags;
  107. const combined = assign({}, tags, semverTags);
  108. combined.has = {
  109. key: 'has',
  110. name: 'Has property',
  111. values: Object.keys(combined),
  112. predefined: true,
  113. };
  114. return omit(combined, omitTags ?? []);
  115. }
  116. render() {
  117. const {organization} = this.props;
  118. return (
  119. <Measurements organization={organization}>
  120. {({measurements}) => {
  121. const tags = this.getTagList(measurements);
  122. return (
  123. <ClassNames>
  124. {({css}) => (
  125. <SmartSearchBar
  126. {...this.props}
  127. hasRecentSearches
  128. savedSearchType={SavedSearchType.EVENT}
  129. onGetTagValues={this.getEventFieldValues}
  130. supportedTags={tags}
  131. prepareQuery={this.prepareQuery}
  132. excludeEnvironment
  133. dropdownClassName={css`
  134. max-height: 300px;
  135. overflow-y: auto;
  136. `}
  137. />
  138. )}
  139. </ClassNames>
  140. );
  141. }}
  142. </Measurements>
  143. );
  144. }
  145. }
  146. export default withApi(withTags(SearchBar));