utils.tsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. import {
  2. filterTypeConfig,
  3. interchangeableFilterOperators,
  4. TermOperator,
  5. Token,
  6. TokenResult,
  7. } from 'app/components/searchSyntax/parser';
  8. import {IconClock, IconStar, IconTag, IconToggle, IconUser} from 'app/icons';
  9. import {t} from 'app/locale';
  10. import {ItemType, SearchGroup, SearchItem} from './types';
  11. export function addSpace(query = '') {
  12. if (query.length !== 0 && query[query.length - 1] !== ' ') {
  13. return query + ' ';
  14. }
  15. return query;
  16. }
  17. export function removeSpace(query = '') {
  18. if (query[query.length - 1] === ' ') {
  19. return query.slice(0, query.length - 1);
  20. }
  21. return query;
  22. }
  23. /**
  24. * Given a query, and the current cursor position, return the string-delimiting
  25. * index of the search term designated by the cursor.
  26. */
  27. export function getLastTermIndex(query: string, cursor: number) {
  28. // TODO: work with quoted-terms
  29. const cursorOffset = query.slice(cursor).search(/\s|$/);
  30. return cursor + (cursorOffset === -1 ? 0 : cursorOffset);
  31. }
  32. /**
  33. * Returns an array of query terms, including incomplete terms
  34. *
  35. * e.g. ["is:unassigned", "browser:\"Chrome 33.0\"", "assigned"]
  36. */
  37. export function getQueryTerms(query: string, cursor: number) {
  38. return query.slice(0, cursor).match(/\S+:"[^"]*"?|\S+/g);
  39. }
  40. function getTitleForType(type: ItemType) {
  41. if (type === ItemType.TAG_VALUE) {
  42. return t('Tag Values');
  43. }
  44. if (type === ItemType.RECENT_SEARCH) {
  45. return t('Recent Searches');
  46. }
  47. if (type === ItemType.DEFAULT) {
  48. return t('Common Search Terms');
  49. }
  50. if (type === ItemType.TAG_OPERATOR) {
  51. return t('Operator Helpers');
  52. }
  53. if (type === ItemType.PROPERTY) {
  54. return t('Properties');
  55. }
  56. return t('Tags');
  57. }
  58. function getIconForTypeAndTag(type: ItemType, tagName: string) {
  59. if (type === ItemType.RECENT_SEARCH) {
  60. return <IconClock size="xs" />;
  61. }
  62. if (type === ItemType.DEFAULT) {
  63. return <IconStar size="xs" />;
  64. }
  65. // Change based on tagName and default to "icon-tag"
  66. switch (tagName) {
  67. case 'is':
  68. return <IconToggle size="xs" />;
  69. case 'assigned':
  70. case 'bookmarks':
  71. return <IconUser size="xs" />;
  72. case 'firstSeen':
  73. case 'lastSeen':
  74. case 'event.timestamp':
  75. return <IconClock size="xs" />;
  76. default:
  77. return <IconTag size="xs" />;
  78. }
  79. }
  80. export function createSearchGroups(
  81. searchItems: SearchItem[],
  82. recentSearchItems: SearchItem[] | undefined,
  83. tagName: string,
  84. type: ItemType,
  85. maxSearchItems: number | undefined,
  86. queryCharsLeft?: number
  87. ) {
  88. const activeSearchItem = 0;
  89. if (maxSearchItems && maxSearchItems > 0) {
  90. searchItems = searchItems.filter(
  91. (value: SearchItem, index: number) =>
  92. index < maxSearchItems || value.ignoreMaxSearchItems
  93. );
  94. }
  95. if (queryCharsLeft || queryCharsLeft === 0) {
  96. searchItems = searchItems.filter(
  97. (value: SearchItem) => value.value.length <= queryCharsLeft
  98. );
  99. if (recentSearchItems) {
  100. recentSearchItems = recentSearchItems.filter(
  101. (value: SearchItem) => value.value.length <= queryCharsLeft
  102. );
  103. }
  104. }
  105. const searchGroup: SearchGroup = {
  106. title: getTitleForType(type),
  107. type: type === ItemType.INVALID_TAG ? type : 'header',
  108. icon: getIconForTypeAndTag(type, tagName),
  109. children: [...searchItems],
  110. };
  111. const recentSearchGroup: SearchGroup | undefined = recentSearchItems && {
  112. title: t('Recent Searches'),
  113. type: 'header',
  114. icon: <IconClock size="xs" />,
  115. children: [...recentSearchItems],
  116. };
  117. if (searchGroup.children && !!searchGroup.children.length) {
  118. searchGroup.children[activeSearchItem] = {
  119. ...searchGroup.children[activeSearchItem],
  120. };
  121. }
  122. return {
  123. searchGroups: [searchGroup, ...(recentSearchGroup ? [recentSearchGroup] : [])],
  124. flatSearchItems: [...searchItems, ...(recentSearchItems ? recentSearchItems : [])],
  125. activeSearchItem: -1,
  126. };
  127. }
  128. /**
  129. * Items is a list of dropdown groups that have a `children` field. Only the
  130. * `children` are selectable, so we need to find which child is selected given
  131. * an index that is in range of the sum of all `children` lengths
  132. *
  133. * @return Returns a tuple of [groupIndex, childrenIndex]
  134. */
  135. export function filterSearchGroupsByIndex(items: SearchGroup[], index: number) {
  136. let _index = index;
  137. let foundSearchItem: [number?, number?] = [undefined, undefined];
  138. items.find(({children}, i) => {
  139. if (!children || !children.length) {
  140. return false;
  141. }
  142. if (_index < children.length) {
  143. foundSearchItem = [i, _index];
  144. return true;
  145. }
  146. _index -= children.length;
  147. return false;
  148. });
  149. return foundSearchItem;
  150. }
  151. export function generateOperatorEntryMap(tag: string) {
  152. return {
  153. [TermOperator.Default]: {
  154. type: ItemType.TAG_OPERATOR,
  155. value: ':',
  156. desc: `${tag}:${t('[value] is equal to')}`,
  157. },
  158. [TermOperator.GreaterThanEqual]: {
  159. type: ItemType.TAG_OPERATOR,
  160. value: ':>=',
  161. desc: `${tag}:${t('>=[value] is greater than or equal to')}`,
  162. },
  163. [TermOperator.LessThanEqual]: {
  164. type: ItemType.TAG_OPERATOR,
  165. value: ':<=',
  166. desc: `${tag}:${t('<=[value] is less than or equal to')}`,
  167. },
  168. [TermOperator.GreaterThan]: {
  169. type: ItemType.TAG_OPERATOR,
  170. value: ':>',
  171. desc: `${tag}:${t('>[value] is greater than')}`,
  172. },
  173. [TermOperator.LessThan]: {
  174. type: ItemType.TAG_OPERATOR,
  175. value: ':<',
  176. desc: `${tag}:${t('<[value] is less than')}`,
  177. },
  178. [TermOperator.Equal]: {
  179. type: ItemType.TAG_OPERATOR,
  180. value: ':=',
  181. desc: `${tag}:${t('=[value] is equal to')}`,
  182. },
  183. [TermOperator.NotEqual]: {
  184. type: ItemType.TAG_OPERATOR,
  185. value: '!:',
  186. desc: `!${tag}:${t('[value] is not equal to')}`,
  187. },
  188. };
  189. }
  190. export function getValidOps(
  191. filterToken: TokenResult<Token.Filter>
  192. ): readonly TermOperator[] {
  193. // If the token is invalid we want to use the possible expected types as our filter type
  194. const validTypes = filterToken.invalid?.expectedType ?? [filterToken.filter];
  195. // Determine any interchangable filter types for our valid types
  196. const interchangeableTypes = validTypes.map(
  197. type => interchangeableFilterOperators[type] ?? []
  198. );
  199. // Combine all types
  200. const allValidTypes = [...new Set([...validTypes, ...interchangeableTypes.flat()])];
  201. // Find all valid operations
  202. const validOps = new Set<TermOperator>(
  203. allValidTypes.map(type => filterTypeConfig[type].validOps).flat()
  204. );
  205. return [...validOps];
  206. }