fieldRenderers.tsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745
  1. import {browserHistory} from 'react-router';
  2. import styled from '@emotion/styled';
  3. import {Location} from 'history';
  4. import partial from 'lodash/partial';
  5. import Count from 'sentry/components/count';
  6. import Duration from 'sentry/components/duration';
  7. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  8. import UserBadge from 'sentry/components/idBadge/userBadge';
  9. import ExternalLink from 'sentry/components/links/externalLink';
  10. import {RowRectangle} from 'sentry/components/performance/waterfall/rowBar';
  11. import {pickBarColor, toPercent} from 'sentry/components/performance/waterfall/utils';
  12. import Tooltip from 'sentry/components/tooltip';
  13. import UserMisery from 'sentry/components/userMisery';
  14. import Version from 'sentry/components/version';
  15. import {t} from 'sentry/locale';
  16. import {AvatarProject, Organization, Project} from 'sentry/types';
  17. import {defined, isUrl} from 'sentry/utils';
  18. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  19. import EventView, {EventData, MetaType} from 'sentry/utils/discover/eventView';
  20. import {
  21. AGGREGATIONS,
  22. getAggregateAlias,
  23. getSpanOperationName,
  24. isEquation,
  25. isRelativeSpanOperationBreakdownField,
  26. SPAN_OP_BREAKDOWN_FIELDS,
  27. SPAN_OP_RELATIVE_BREAKDOWN_FIELD,
  28. } from 'sentry/utils/discover/fields';
  29. import {getShortEventId} from 'sentry/utils/events';
  30. import {formatFloat, formatPercentage} from 'sentry/utils/formatters';
  31. import getDynamicText from 'sentry/utils/getDynamicText';
  32. import Projects from 'sentry/utils/projects';
  33. import {
  34. filterToLocationQuery,
  35. SpanOperationBreakdownFilter,
  36. stringToFilter,
  37. } from 'sentry/views/performance/transactionSummary/filter';
  38. import ArrayValue from './arrayValue';
  39. import {
  40. BarContainer,
  41. Container,
  42. FieldDateTime,
  43. FieldShortId,
  44. FlexContainer,
  45. NumberContainer,
  46. OverflowLink,
  47. UserIcon,
  48. VersionContainer,
  49. } from './styles';
  50. import TeamKeyTransactionField from './teamKeyTransactionField';
  51. /**
  52. * Types, functions and definitions for rendering fields in discover results.
  53. */
  54. export type RenderFunctionBaggage = {
  55. location: Location;
  56. organization: Organization;
  57. eventView?: EventView;
  58. };
  59. type FieldFormatterRenderFunction = (field: string, data: EventData) => React.ReactNode;
  60. type FieldFormatterRenderFunctionPartial = (
  61. data: EventData,
  62. baggage: RenderFunctionBaggage
  63. ) => React.ReactNode;
  64. type FieldFormatter = {
  65. isSortable: boolean;
  66. renderFunc: FieldFormatterRenderFunction;
  67. };
  68. type FieldFormatters = {
  69. array: FieldFormatter;
  70. boolean: FieldFormatter;
  71. date: FieldFormatter;
  72. duration: FieldFormatter;
  73. integer: FieldFormatter;
  74. number: FieldFormatter;
  75. percentage: FieldFormatter;
  76. string: FieldFormatter;
  77. };
  78. export type FieldTypes = keyof FieldFormatters;
  79. const EmptyValueContainer = styled('span')`
  80. color: ${p => p.theme.gray300};
  81. `;
  82. const emptyValue = <EmptyValueContainer>{t('(no value)')}</EmptyValueContainer>;
  83. const emptyStringValue = <EmptyValueContainer>{t('(empty string)')}</EmptyValueContainer>;
  84. export function nullableValue(value: string | null): string | React.ReactElement {
  85. switch (value) {
  86. case null:
  87. return emptyValue;
  88. case '':
  89. return emptyStringValue;
  90. default:
  91. return value;
  92. }
  93. }
  94. /**
  95. * A mapping of field types to their rendering function.
  96. * This mapping is used when a field is not defined in SPECIAL_FIELDS
  97. * and the field is not being coerced to a link.
  98. *
  99. * This mapping should match the output sentry.utils.snuba:get_json_type
  100. */
  101. export const FIELD_FORMATTERS: FieldFormatters = {
  102. boolean: {
  103. isSortable: true,
  104. renderFunc: (field, data) => {
  105. const value = data[field] ? t('true') : t('false');
  106. return <Container>{value}</Container>;
  107. },
  108. },
  109. date: {
  110. isSortable: true,
  111. renderFunc: (field, data) => (
  112. <Container>
  113. {data[field]
  114. ? getDynamicText({
  115. value: <FieldDateTime date={data[field]} year seconds timeZone />,
  116. fixed: 'timestamp',
  117. })
  118. : emptyValue}
  119. </Container>
  120. ),
  121. },
  122. duration: {
  123. isSortable: true,
  124. renderFunc: (field, data) => (
  125. <NumberContainer>
  126. {typeof data[field] === 'number' ? (
  127. <Duration seconds={data[field] / 1000} fixedDigits={2} abbreviation />
  128. ) : (
  129. emptyValue
  130. )}
  131. </NumberContainer>
  132. ),
  133. },
  134. integer: {
  135. isSortable: true,
  136. renderFunc: (field, data) => (
  137. <NumberContainer>
  138. {typeof data[field] === 'number' ? <Count value={data[field]} /> : emptyValue}
  139. </NumberContainer>
  140. ),
  141. },
  142. number: {
  143. isSortable: true,
  144. renderFunc: (field, data) => (
  145. <NumberContainer>
  146. {typeof data[field] === 'number' ? formatFloat(data[field], 4) : emptyValue}
  147. </NumberContainer>
  148. ),
  149. },
  150. percentage: {
  151. isSortable: true,
  152. renderFunc: (field, data) => (
  153. <NumberContainer>
  154. {typeof data[field] === 'number' ? formatPercentage(data[field]) : emptyValue}
  155. </NumberContainer>
  156. ),
  157. },
  158. string: {
  159. isSortable: true,
  160. renderFunc: (field, data) => {
  161. // Some fields have long arrays in them, only show the tail of the data.
  162. const value = Array.isArray(data[field])
  163. ? data[field].slice(-1)
  164. : defined(data[field])
  165. ? data[field]
  166. : emptyValue;
  167. if (isUrl(value)) {
  168. return (
  169. <Container>
  170. <ExternalLink href={value} data-test-id="group-tag-url">
  171. {value}
  172. </ExternalLink>
  173. </Container>
  174. );
  175. }
  176. return <Container>{nullableValue(value)}</Container>;
  177. },
  178. },
  179. array: {
  180. isSortable: true,
  181. renderFunc: (field, data) => {
  182. const value = Array.isArray(data[field]) ? data[field] : [data[field]];
  183. return <ArrayValue value={value} />;
  184. },
  185. },
  186. };
  187. type SpecialFieldRenderFunc = (
  188. data: EventData,
  189. baggage: RenderFunctionBaggage
  190. ) => React.ReactNode;
  191. type SpecialField = {
  192. renderFunc: SpecialFieldRenderFunc;
  193. sortField: string | null;
  194. };
  195. type SpecialFields = {
  196. 'count_unique(user)': SpecialField;
  197. 'error.handled': SpecialField;
  198. id: SpecialField;
  199. issue: SpecialField;
  200. 'issue.id': SpecialField;
  201. project: SpecialField;
  202. release: SpecialField;
  203. team_key_transaction: SpecialField;
  204. 'timestamp.to_day': SpecialField;
  205. 'timestamp.to_hour': SpecialField;
  206. trace: SpecialField;
  207. 'trend_percentage()': SpecialField;
  208. user: SpecialField;
  209. 'user.display': SpecialField;
  210. };
  211. /**
  212. * "Special fields" either do not map 1:1 to an single column in the event database,
  213. * or they require custom UI formatting that can't be handled by the datatype formatters.
  214. */
  215. const SPECIAL_FIELDS: SpecialFields = {
  216. id: {
  217. sortField: 'id',
  218. renderFunc: data => {
  219. const id: string | unknown = data?.id;
  220. if (typeof id !== 'string') {
  221. return null;
  222. }
  223. return <Container>{getShortEventId(id)}</Container>;
  224. },
  225. },
  226. trace: {
  227. sortField: 'trace',
  228. renderFunc: data => {
  229. const id: string | unknown = data?.trace;
  230. if (typeof id !== 'string') {
  231. return null;
  232. }
  233. return <Container>{getShortEventId(id)}</Container>;
  234. },
  235. },
  236. 'issue.id': {
  237. sortField: 'issue.id',
  238. renderFunc: (data, {organization}) => {
  239. const target = {
  240. pathname: `/organizations/${organization.slug}/issues/${data['issue.id']}/`,
  241. };
  242. return (
  243. <Container>
  244. <OverflowLink to={target} aria-label={data['issue.id']}>
  245. {data['issue.id']}
  246. </OverflowLink>
  247. </Container>
  248. );
  249. },
  250. },
  251. issue: {
  252. sortField: null,
  253. renderFunc: (data, {organization}) => {
  254. const issueID = data['issue.id'];
  255. if (!issueID) {
  256. return (
  257. <Container>
  258. <FieldShortId shortId={`${data.issue}`} />
  259. </Container>
  260. );
  261. }
  262. const target = {
  263. pathname: `/organizations/${organization.slug}/issues/${issueID}/`,
  264. };
  265. return (
  266. <Container>
  267. <OverflowLink to={target} aria-label={issueID}>
  268. <FieldShortId shortId={`${data.issue}`} />
  269. </OverflowLink>
  270. </Container>
  271. );
  272. },
  273. },
  274. project: {
  275. sortField: 'project',
  276. renderFunc: (data, {organization}) => {
  277. let slugs: string[] | undefined = undefined;
  278. let projectIds: number[] | undefined = undefined;
  279. if (typeof data.project === 'number') {
  280. projectIds = [data.project];
  281. } else {
  282. slugs = [data.project];
  283. }
  284. return (
  285. <Container>
  286. <Projects orgId={organization.slug} slugs={slugs} projectIds={projectIds}>
  287. {({projects}) => {
  288. let project: Project | AvatarProject | undefined;
  289. if (typeof data.project === 'number') {
  290. project = projects.find(p => p.id === data.project.toString());
  291. } else {
  292. project = projects.find(p => p.slug === data.project);
  293. }
  294. return (
  295. <ProjectBadge
  296. project={project ? project : {slug: data.project}}
  297. avatarSize={16}
  298. />
  299. );
  300. }}
  301. </Projects>
  302. </Container>
  303. );
  304. },
  305. },
  306. user: {
  307. sortField: 'user',
  308. renderFunc: data => {
  309. if (data.user) {
  310. const [key, value] = data.user.split(':');
  311. const userObj = {
  312. id: '',
  313. name: '',
  314. email: '',
  315. username: '',
  316. ip_address: '',
  317. };
  318. userObj[key] = value;
  319. const badge = <UserBadge user={userObj} hideEmail avatarSize={16} />;
  320. return <Container>{badge}</Container>;
  321. }
  322. return <Container>{emptyValue}</Container>;
  323. },
  324. },
  325. 'user.display': {
  326. sortField: 'user.display',
  327. renderFunc: data => {
  328. if (data['user.display']) {
  329. const userObj = {
  330. id: '',
  331. name: data['user.display'],
  332. email: '',
  333. username: '',
  334. ip_address: '',
  335. };
  336. const badge = <UserBadge user={userObj} hideEmail avatarSize={16} />;
  337. return <Container>{badge}</Container>;
  338. }
  339. return <Container>{emptyValue}</Container>;
  340. },
  341. },
  342. 'count_unique(user)': {
  343. sortField: 'count_unique(user)',
  344. renderFunc: data => {
  345. const count = data.count_unique_user ?? data['count_unique(user)'];
  346. if (typeof count === 'number') {
  347. return (
  348. <FlexContainer>
  349. <NumberContainer>
  350. <Count value={count} />
  351. </NumberContainer>
  352. <UserIcon size="20" />
  353. </FlexContainer>
  354. );
  355. }
  356. return <Container>{emptyValue}</Container>;
  357. },
  358. },
  359. release: {
  360. sortField: 'release',
  361. renderFunc: data =>
  362. data.release ? (
  363. <VersionContainer>
  364. <Version version={data.release} anchor={false} tooltipRawVersion truncate />
  365. </VersionContainer>
  366. ) : (
  367. <Container>{emptyValue}</Container>
  368. ),
  369. },
  370. 'error.handled': {
  371. sortField: 'error.handled',
  372. renderFunc: data => {
  373. const values = data['error.handled'];
  374. // Transactions will have null, and default events have no handled attributes.
  375. if (values === null || values?.length === 0) {
  376. return <Container>{emptyValue}</Container>;
  377. }
  378. const value = Array.isArray(values) ? values : [values];
  379. return (
  380. <Container>
  381. {value.every(v => [1, null].includes(v)) ? 'true' : 'false'}
  382. </Container>
  383. );
  384. },
  385. },
  386. team_key_transaction: {
  387. sortField: null,
  388. renderFunc: (data, {organization}) => (
  389. <Container>
  390. <TeamKeyTransactionField
  391. isKeyTransaction={(data.team_key_transaction ?? 0) !== 0}
  392. organization={organization}
  393. projectSlug={data.project}
  394. transactionName={data.transaction}
  395. />
  396. </Container>
  397. ),
  398. },
  399. 'trend_percentage()': {
  400. sortField: 'trend_percentage()',
  401. renderFunc: data => (
  402. <NumberContainer>
  403. {typeof data.trend_percentage === 'number'
  404. ? formatPercentage(data.trend_percentage - 1)
  405. : emptyValue}
  406. </NumberContainer>
  407. ),
  408. },
  409. 'timestamp.to_hour': {
  410. sortField: 'timestamp.to_hour',
  411. renderFunc: data => (
  412. <Container>
  413. {getDynamicText({
  414. value: <FieldDateTime date={data['timestamp.to_hour']} year timeZone />,
  415. fixed: 'timestamp.to_hour',
  416. })}
  417. </Container>
  418. ),
  419. },
  420. 'timestamp.to_day': {
  421. sortField: 'timestamp.to_day',
  422. renderFunc: data => (
  423. <Container>
  424. {getDynamicText({
  425. value: <FieldDateTime date={data['timestamp.to_day']} dateOnly year utc />,
  426. fixed: 'timestamp.to_day',
  427. })}
  428. </Container>
  429. ),
  430. },
  431. };
  432. type SpecialFunctionFieldRenderer = (
  433. fieldName: string
  434. ) => (data: EventData, baggage: RenderFunctionBaggage) => React.ReactNode;
  435. type SpecialFunctions = {
  436. user_misery: SpecialFunctionFieldRenderer;
  437. };
  438. /**
  439. * "Special functions" are functions whose values either do not map 1:1 to a single column,
  440. * or they require custom UI formatting that can't be handled by the datatype formatters.
  441. */
  442. const SPECIAL_FUNCTIONS: SpecialFunctions = {
  443. user_misery: fieldName => data => {
  444. const userMiseryField = fieldName;
  445. if (!(userMiseryField in data)) {
  446. return <NumberContainer>{emptyValue}</NumberContainer>;
  447. }
  448. const userMisery = data[userMiseryField];
  449. if (userMisery === null || isNaN(userMisery)) {
  450. return <NumberContainer>{emptyValue}</NumberContainer>;
  451. }
  452. const projectThresholdConfig = 'project_threshold_config';
  453. let countMiserableUserField: string = '';
  454. let miseryLimit: number | undefined = parseInt(
  455. userMiseryField.split('(').pop()?.slice(0, -1) || '',
  456. 10
  457. );
  458. if (isNaN(miseryLimit)) {
  459. countMiserableUserField = 'count_miserable(user)';
  460. if (projectThresholdConfig in data) {
  461. miseryLimit = data[projectThresholdConfig][1];
  462. } else {
  463. miseryLimit = undefined;
  464. }
  465. } else {
  466. countMiserableUserField = `count_miserable(user,${miseryLimit})`;
  467. }
  468. const uniqueUsers = data['count_unique(user)'];
  469. let miserableUsers: number | undefined;
  470. if (countMiserableUserField in data) {
  471. const countMiserableMiseryLimit = parseInt(
  472. userMiseryField.split('(').pop()?.slice(0, -1) || '',
  473. 10
  474. );
  475. miserableUsers =
  476. countMiserableMiseryLimit === miseryLimit ||
  477. (isNaN(countMiserableMiseryLimit) && projectThresholdConfig)
  478. ? data[countMiserableUserField]
  479. : undefined;
  480. }
  481. return (
  482. <BarContainer>
  483. <UserMisery
  484. bars={10}
  485. barHeight={20}
  486. miseryLimit={miseryLimit}
  487. totalUsers={uniqueUsers}
  488. userMisery={userMisery}
  489. miserableUsers={miserableUsers}
  490. />
  491. </BarContainer>
  492. );
  493. },
  494. };
  495. /**
  496. * Get the sort field name for a given field if it is special or fallback
  497. * to the generic type formatter.
  498. */
  499. export function getSortField(
  500. field: string,
  501. tableMeta: MetaType | undefined
  502. ): string | null {
  503. if (SPECIAL_FIELDS.hasOwnProperty(field)) {
  504. return SPECIAL_FIELDS[field as keyof typeof SPECIAL_FIELDS].sortField;
  505. }
  506. if (!tableMeta) {
  507. return field;
  508. }
  509. if (isEquation(field)) {
  510. return field;
  511. }
  512. for (const alias in AGGREGATIONS) {
  513. if (field.startsWith(alias)) {
  514. return AGGREGATIONS[alias].isSortable ? field : null;
  515. }
  516. }
  517. const fieldType = tableMeta[field];
  518. if (FIELD_FORMATTERS.hasOwnProperty(fieldType)) {
  519. return FIELD_FORMATTERS[fieldType as keyof typeof FIELD_FORMATTERS].isSortable
  520. ? field
  521. : null;
  522. }
  523. return null;
  524. }
  525. const isDurationValue = (data: EventData, field: string): boolean => {
  526. return field in data && typeof data[field] === 'number';
  527. };
  528. const spanOperationRelativeBreakdownRenderer = (
  529. data: EventData,
  530. {location, organization, eventView}: RenderFunctionBaggage
  531. ): React.ReactNode => {
  532. const sumOfSpanTime = SPAN_OP_BREAKDOWN_FIELDS.reduce(
  533. (prev, curr) => (isDurationValue(data, curr) ? prev + data[curr] : prev),
  534. 0
  535. );
  536. const cumulativeSpanOpBreakdown = Math.max(sumOfSpanTime, data['transaction.duration']);
  537. if (
  538. SPAN_OP_BREAKDOWN_FIELDS.every(field => !isDurationValue(data, field)) ||
  539. cumulativeSpanOpBreakdown === 0
  540. ) {
  541. return FIELD_FORMATTERS.duration.renderFunc(SPAN_OP_RELATIVE_BREAKDOWN_FIELD, data);
  542. }
  543. let otherPercentage = 1;
  544. let orderedSpanOpsBreakdownFields;
  545. const sortingOnField = eventView?.sorts?.[0]?.field;
  546. if (sortingOnField && SPAN_OP_BREAKDOWN_FIELDS.includes(sortingOnField)) {
  547. orderedSpanOpsBreakdownFields = [
  548. sortingOnField,
  549. ...SPAN_OP_BREAKDOWN_FIELDS.filter(op => op !== sortingOnField),
  550. ];
  551. } else {
  552. orderedSpanOpsBreakdownFields = SPAN_OP_BREAKDOWN_FIELDS;
  553. }
  554. return (
  555. <RelativeOpsBreakdown>
  556. {orderedSpanOpsBreakdownFields.map(field => {
  557. if (!isDurationValue(data, field)) {
  558. return null;
  559. }
  560. const operationName = getSpanOperationName(field) ?? 'op';
  561. const spanOpDuration: number = data[field];
  562. const widthPercentage = spanOpDuration / cumulativeSpanOpBreakdown;
  563. otherPercentage = otherPercentage - widthPercentage;
  564. if (widthPercentage === 0) {
  565. return null;
  566. }
  567. return (
  568. <div key={operationName} style={{width: toPercent(widthPercentage || 0)}}>
  569. <Tooltip
  570. title={
  571. <div>
  572. <div>{operationName}</div>
  573. <div>
  574. <Duration
  575. seconds={spanOpDuration / 1000}
  576. fixedDigits={2}
  577. abbreviation
  578. />
  579. </div>
  580. </div>
  581. }
  582. containerDisplayMode="block"
  583. >
  584. <RectangleRelativeOpsBreakdown
  585. spanBarHatch={false}
  586. style={{
  587. backgroundColor: pickBarColor(operationName),
  588. cursor: 'pointer',
  589. }}
  590. onClick={event => {
  591. event.stopPropagation();
  592. const filter = stringToFilter(operationName);
  593. if (filter === SpanOperationBreakdownFilter.None) {
  594. return;
  595. }
  596. trackAnalyticsEvent({
  597. eventName: 'Performance Views: Select Relative Breakdown',
  598. eventKey: 'performance_views.relative_breakdown.selection',
  599. organization_id: parseInt(organization.id, 10),
  600. action: filter as string,
  601. });
  602. browserHistory.push({
  603. pathname: location.pathname,
  604. query: {
  605. ...location.query,
  606. ...filterToLocationQuery(filter),
  607. },
  608. });
  609. }}
  610. />
  611. </Tooltip>
  612. </div>
  613. );
  614. })}
  615. <div key="other" style={{width: toPercent(otherPercentage || 0)}}>
  616. <Tooltip title={<div>{t('Other')}</div>} containerDisplayMode="block">
  617. <OtherRelativeOpsBreakdown spanBarHatch={false} />
  618. </Tooltip>
  619. </div>
  620. </RelativeOpsBreakdown>
  621. );
  622. };
  623. const RelativeOpsBreakdown = styled('div')`
  624. position: relative;
  625. display: flex;
  626. `;
  627. const RectangleRelativeOpsBreakdown = styled(RowRectangle)`
  628. position: relative;
  629. width: 100%;
  630. `;
  631. const OtherRelativeOpsBreakdown = styled(RectangleRelativeOpsBreakdown)`
  632. background-color: ${p => p.theme.gray100};
  633. `;
  634. /**
  635. * Get the field renderer for the named field and metadata
  636. *
  637. * @param {String} field name
  638. * @param {object} metadata mapping.
  639. * @param {boolean} isAlias convert the name with getAggregateAlias
  640. * @returns {Function}
  641. */
  642. export function getFieldRenderer(
  643. field: string,
  644. meta: MetaType,
  645. isAlias: boolean = true
  646. ): FieldFormatterRenderFunctionPartial {
  647. if (SPECIAL_FIELDS.hasOwnProperty(field)) {
  648. return SPECIAL_FIELDS[field].renderFunc;
  649. }
  650. if (isRelativeSpanOperationBreakdownField(field)) {
  651. return spanOperationRelativeBreakdownRenderer;
  652. }
  653. const fieldName = isAlias ? getAggregateAlias(field) : field;
  654. const fieldType = meta[fieldName];
  655. for (const alias in SPECIAL_FUNCTIONS) {
  656. if (fieldName.startsWith(alias)) {
  657. return SPECIAL_FUNCTIONS[alias](fieldName);
  658. }
  659. }
  660. if (FIELD_FORMATTERS.hasOwnProperty(fieldType)) {
  661. return partial(FIELD_FORMATTERS[fieldType].renderFunc, fieldName);
  662. }
  663. return partial(FIELD_FORMATTERS.string.renderFunc, fieldName);
  664. }
  665. type FieldTypeFormatterRenderFunctionPartial = (data: EventData) => React.ReactNode;
  666. /**
  667. * Get the field renderer for the named field only based on its type from the given
  668. * metadata.
  669. *
  670. * @param {String} field name
  671. * @param {object} metadata mapping.
  672. * @param {boolean} isAlias convert the name with getAggregateAlias
  673. * @returns {Function}
  674. */
  675. export function getFieldFormatter(
  676. field: string,
  677. meta: MetaType,
  678. isAlias: boolean = true
  679. ): FieldTypeFormatterRenderFunctionPartial {
  680. const fieldName = isAlias ? getAggregateAlias(field) : field;
  681. const fieldType = meta[fieldName];
  682. if (FIELD_FORMATTERS.hasOwnProperty(fieldType)) {
  683. return partial(FIELD_FORMATTERS[fieldType].renderFunc, fieldName);
  684. }
  685. return partial(FIELD_FORMATTERS.string.renderFunc, fieldName);
  686. }