useSpanMetricsSeries.tsx 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import keyBy from 'lodash/keyBy';
  2. import {getInterval} from 'sentry/components/charts/utils';
  3. import {PageFilters} from 'sentry/types';
  4. import {Series} from 'sentry/types/echarts';
  5. import EventView from 'sentry/utils/discover/eventView';
  6. import {DiscoverDatasets} from 'sentry/utils/discover/types';
  7. import usePageFilters from 'sentry/utils/usePageFilters';
  8. import type {IndexedSpan} from 'sentry/views/starfish/queries/types';
  9. import {SpanSummaryQueryFilters} from 'sentry/views/starfish/queries/useSpanMetrics';
  10. import {SpanMetricsFields} from 'sentry/views/starfish/types';
  11. import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
  12. import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
  13. const {SPAN_GROUP} = SpanMetricsFields;
  14. export type SpanMetrics = {
  15. interval: number;
  16. 'p95(span.self_time)': number;
  17. 'sps()': number;
  18. 'sum(span.self_time)': number;
  19. 'time_spent_percentage()': number;
  20. };
  21. export const useSpanMetricsSeries = (
  22. span: Pick<IndexedSpan, 'group'>,
  23. queryFilters: SpanSummaryQueryFilters,
  24. yAxis: string[] = [],
  25. referrer = 'span-metrics-series'
  26. ) => {
  27. const pageFilters = usePageFilters();
  28. const eventView = span
  29. ? getEventView(span, pageFilters.selection, yAxis, queryFilters)
  30. : undefined;
  31. const enabled =
  32. Boolean(span?.group) && Object.values(queryFilters).every(value => Boolean(value));
  33. // TODO: Add referrer
  34. const result = useSpansQuery<SpanMetrics[]>({
  35. eventView,
  36. initialData: [],
  37. referrer,
  38. enabled,
  39. });
  40. const parsedData = keyBy(
  41. yAxis.map(seriesName => {
  42. const series: Series = {
  43. seriesName,
  44. data: (result?.data ?? []).map(datum => ({
  45. value: datum[seriesName],
  46. name: datum.interval,
  47. })),
  48. };
  49. return series;
  50. }),
  51. 'seriesName'
  52. );
  53. return {...result, data: parsedData};
  54. };
  55. function getEventView(
  56. span: {group: string},
  57. pageFilters: PageFilters,
  58. yAxis: string[],
  59. queryFilters: SpanSummaryQueryFilters
  60. ) {
  61. const cleanGroupId = span.group.replaceAll('-', '').slice(-16);
  62. return EventView.fromNewQueryWithPageFilters(
  63. {
  64. name: '',
  65. query: `${SPAN_GROUP}:${cleanGroupId}${
  66. queryFilters?.transactionName
  67. ? ` transaction:${queryFilters?.transactionName}`
  68. : ''
  69. }${
  70. queryFilters?.['transaction.method']
  71. ? ` transaction.method:${queryFilters?.['transaction.method']}`
  72. : ''
  73. }`,
  74. fields: [],
  75. yAxis,
  76. dataset: DiscoverDatasets.SPANS_METRICS,
  77. interval: getInterval(pageFilters.datetime, STARFISH_CHART_INTERVAL_FIDELITY),
  78. version: 2,
  79. },
  80. pageFilters
  81. );
  82. }