useSpansQuery.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. import {useQuery} from '@tanstack/react-query';
  2. import moment from 'moment';
  3. import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
  4. import EventView, {encodeSort} from 'sentry/utils/discover/eventView';
  5. import {
  6. DiscoverQueryProps,
  7. useGenericDiscoverQuery,
  8. } from 'sentry/utils/discover/genericDiscoverQuery';
  9. import {useLocation} from 'sentry/utils/useLocation';
  10. import useOrganization from 'sentry/utils/useOrganization';
  11. import {HOST} from 'sentry/views/starfish/utils/constants';
  12. import {useStarfishOptions} from 'sentry/views/starfish/utils/useStarfishOptions';
  13. const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
  14. // Setting return type since I'd rather not know if its discover query or not
  15. export type UseSpansQueryReturnType<T> = {data: T; isLoading: boolean};
  16. export function useSpansQuery<T = any[]>({
  17. eventView,
  18. queryString,
  19. initialData,
  20. forceUseDiscover,
  21. }: {
  22. eventView?: EventView;
  23. forceUseDiscover?: boolean;
  24. initialData?: any;
  25. queryString?: string;
  26. }): UseSpansQueryReturnType<T> {
  27. const {options} = useStarfishOptions();
  28. const {useDiscover} = options;
  29. const queryFunction = getQueryFunction({
  30. useDiscover: forceUseDiscover ?? useDiscover,
  31. isTimeseriesQuery: (eventView?.yAxis?.length ?? 0) > 0,
  32. });
  33. if (isDiscoverFunction(queryFunction) || isDiscoverTimeseriesFunction(queryFunction)) {
  34. if (eventView) {
  35. return queryFunction(eventView, initialData);
  36. }
  37. throw new Error(
  38. 'eventView argument must be defined when Starfish useDiscover is true'
  39. );
  40. }
  41. if (queryString) {
  42. return queryFunction(queryString, initialData);
  43. }
  44. throw new Error(
  45. 'queryString argument must be defined when Starfish useDiscover is false, ie when using scraped data via fetch API'
  46. );
  47. }
  48. function isDiscoverFunction(
  49. queryFunction: Function
  50. ): queryFunction is typeof useWrappedDiscoverQuery {
  51. return queryFunction === useWrappedDiscoverQuery;
  52. }
  53. function isDiscoverTimeseriesFunction(
  54. queryFunction: Function
  55. ): queryFunction is typeof useWrappedDiscoverTimeseriesQuery {
  56. return queryFunction === useWrappedDiscoverTimeseriesQuery;
  57. }
  58. export function useWrappedQuery(queryString: string, initialData?: any) {
  59. const {isLoading, data} = useQuery({
  60. queryKey: [queryString],
  61. queryFn: () => fetch(`${HOST}/?query=${queryString}`).then(res => res.json()),
  62. retry: false,
  63. initialData,
  64. });
  65. return {isLoading, data};
  66. }
  67. export function useWrappedDiscoverTimeseriesQuery(
  68. eventView: EventView,
  69. initialData?: any
  70. ) {
  71. const location = useLocation();
  72. const organization = useOrganization();
  73. const {isLoading, data} = useGenericDiscoverQuery<
  74. {
  75. data: any[];
  76. },
  77. DiscoverQueryProps
  78. >({
  79. route: 'events-stats',
  80. eventView,
  81. location,
  82. orgSlug: organization.slug,
  83. getRequestPayload: () => ({
  84. ...eventView.getEventsAPIPayload(location),
  85. yAxis: eventView.yAxis,
  86. topEvents: eventView.topEvents,
  87. excludeOther: 1,
  88. partial: 1,
  89. orderby: eventView.sorts?.[0] ? encodeSort(eventView.sorts?.[0]) : undefined,
  90. interval: eventView.interval,
  91. }),
  92. });
  93. return {
  94. isLoading,
  95. data:
  96. isLoading && initialData
  97. ? initialData
  98. : processDiscoverTimeseriesResult(data, eventView),
  99. };
  100. }
  101. export function useWrappedDiscoverQuery(eventView: EventView, initialData?: any) {
  102. const location = useLocation();
  103. const organization = useOrganization();
  104. const {isLoading, data} = useDiscoverQuery({
  105. eventView,
  106. orgSlug: organization.slug,
  107. location,
  108. });
  109. return {isLoading, data: isLoading && initialData ? initialData : data?.data};
  110. }
  111. function getQueryFunction({
  112. useDiscover,
  113. isTimeseriesQuery,
  114. }: {
  115. useDiscover: boolean;
  116. isTimeseriesQuery?: boolean;
  117. }) {
  118. if (useDiscover) {
  119. if (isTimeseriesQuery) {
  120. return useWrappedDiscoverTimeseriesQuery;
  121. }
  122. return useWrappedDiscoverQuery;
  123. }
  124. return useWrappedQuery;
  125. }
  126. type Interval = {[key: string]: any; interval: string; group?: string};
  127. function processDiscoverTimeseriesResult(result, eventView: EventView) {
  128. if (!eventView.yAxis) {
  129. return [];
  130. }
  131. let intervals = [] as Interval[];
  132. const singleYAxis =
  133. eventView.yAxis &&
  134. (typeof eventView.yAxis === 'string' || eventView.yAxis.length === 1);
  135. const firstYAxis =
  136. typeof eventView.yAxis === 'string' ? eventView.yAxis : eventView.yAxis[0];
  137. if (result.data) {
  138. return processSingleDiscoverTimeseriesResult(
  139. result,
  140. singleYAxis ? firstYAxis : 'count'
  141. );
  142. }
  143. Object.keys(result).forEach(key => {
  144. if (result[key].data) {
  145. intervals = mergeIntervals(
  146. intervals,
  147. processSingleDiscoverTimeseriesResult(result[key], singleYAxis ? firstYAxis : key)
  148. );
  149. } else {
  150. Object.keys(result[key]).forEach(innerKey => {
  151. if (innerKey !== 'order') {
  152. intervals = mergeIntervals(
  153. intervals,
  154. processSingleDiscoverTimeseriesResult(result[key][innerKey], innerKey, key)
  155. );
  156. }
  157. });
  158. }
  159. });
  160. const processed = intervals.map(interval => ({
  161. ...interval,
  162. interval: moment(parseInt(interval.interval, 10) * 1000).format(DATE_FORMAT),
  163. }));
  164. return processed;
  165. }
  166. function processSingleDiscoverTimeseriesResult(result, key: string, group?: string) {
  167. const intervals = [] as Interval[];
  168. result.data.forEach(([timestamp, [{count: value}]]) => {
  169. const existingInterval = intervals.find(
  170. interval =>
  171. interval.interval === timestamp && (group ? interval.group === group : true)
  172. );
  173. if (existingInterval) {
  174. existingInterval[key] = value;
  175. return;
  176. }
  177. intervals.push({
  178. interval: timestamp,
  179. [key]: value,
  180. group,
  181. });
  182. });
  183. return intervals;
  184. }
  185. function mergeIntervals(first: Interval[], second: Interval[]) {
  186. const target: Interval[] = JSON.parse(JSON.stringify(first));
  187. second.forEach(({interval: timestamp, group, ...rest}) => {
  188. const existingInterval = target.find(
  189. interval =>
  190. interval.interval === timestamp && (group ? interval.group === group : true)
  191. );
  192. if (existingInterval) {
  193. Object.keys(rest).forEach(key => {
  194. existingInterval[key] = rest[key];
  195. });
  196. return;
  197. }
  198. target.push({interval: timestamp, group, ...rest});
  199. });
  200. return target;
  201. }