context.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. import {
  2. createContext,
  3. useCallback,
  4. useContext,
  5. useEffect,
  6. useMemo,
  7. useState,
  8. } from 'react';
  9. import * as Sentry from '@sentry/react';
  10. import isEqual from 'lodash/isEqual';
  11. import type {Field} from 'sentry/components/metrics/metricSamplesTable';
  12. import type {MRI} from 'sentry/types';
  13. import {useInstantRef, useUpdateQuery} from 'sentry/utils/metrics';
  14. import {
  15. emptyMetricsFormulaWidget,
  16. emptyMetricsQueryWidget,
  17. NO_QUERY_ID,
  18. } from 'sentry/utils/metrics/constants';
  19. import {
  20. isMetricsQueryWidget,
  21. MetricExpressionType,
  22. type MetricsWidget,
  23. } from 'sentry/utils/metrics/types';
  24. import {useMetricsMeta} from 'sentry/utils/metrics/useMetricsMeta';
  25. import type {MetricsSamplesResults} from 'sentry/utils/metrics/useMetricsSamples';
  26. import {decodeInteger, decodeScalar} from 'sentry/utils/queryString';
  27. import useLocationQuery from 'sentry/utils/url/useLocationQuery';
  28. import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
  29. import usePageFilters from 'sentry/utils/usePageFilters';
  30. import useRouter from 'sentry/utils/useRouter';
  31. import type {FocusAreaSelection} from 'sentry/views/metrics/chart/types';
  32. import {parseMetricWidgetsQueryParam} from 'sentry/views/metrics/utils/parseMetricWidgetsQueryParam';
  33. import {useStructuralSharing} from 'sentry/views/metrics/utils/useStructuralSharing';
  34. export type FocusAreaProps = {
  35. onAdd?: (area: FocusAreaSelection) => void;
  36. onDraw?: () => void;
  37. onRemove?: () => void;
  38. selection?: FocusAreaSelection;
  39. };
  40. interface MetricsContextValue {
  41. addWidget: (type?: MetricExpressionType) => void;
  42. duplicateWidget: (index: number) => void;
  43. focusArea: FocusAreaProps;
  44. hasCustomMetrics: boolean;
  45. hasPerformanceMetrics: boolean;
  46. isDefaultQuery: boolean;
  47. isHasMetricsLoading: boolean;
  48. isMultiChartMode: boolean;
  49. removeWidget: (index: number) => void;
  50. selectedWidgetIndex: number;
  51. setDefaultQuery: (query: Record<string, any> | null) => void;
  52. setHighlightedSampleId: (sample?: string) => void;
  53. setIsMultiChartMode: (value: boolean) => void;
  54. setMetricsSamples: React.Dispatch<
  55. React.SetStateAction<MetricsSamplesResults<Field>['data'] | undefined>
  56. >;
  57. setSelectedWidgetIndex: (index: number) => void;
  58. showQuerySymbols: boolean;
  59. toggleWidgetVisibility: (index: number) => void;
  60. updateWidget: (index: number, data: Partial<Omit<MetricsWidget, 'type'>>) => void;
  61. widgets: MetricsWidget[];
  62. highlightedSampleId?: string;
  63. metricsSamples?: MetricsSamplesResults<Field>['data'];
  64. }
  65. export const MetricsContext = createContext<MetricsContextValue>({
  66. addWidget: () => {},
  67. duplicateWidget: () => {},
  68. focusArea: {},
  69. hasCustomMetrics: false,
  70. hasPerformanceMetrics: false,
  71. highlightedSampleId: undefined,
  72. isDefaultQuery: false,
  73. isMultiChartMode: false,
  74. isHasMetricsLoading: true,
  75. metricsSamples: [],
  76. removeWidget: () => {},
  77. selectedWidgetIndex: 0,
  78. setDefaultQuery: () => {},
  79. setHighlightedSampleId: () => {},
  80. setIsMultiChartMode: () => {},
  81. setMetricsSamples: () => {},
  82. setSelectedWidgetIndex: () => {},
  83. showQuerySymbols: false,
  84. updateWidget: () => {},
  85. widgets: [],
  86. toggleWidgetVisibility: () => {},
  87. });
  88. export function useMetricsContext() {
  89. return useContext(MetricsContext);
  90. }
  91. export function useMetricWidgets(mri: MRI) {
  92. const {widgets: urlWidgets} = useLocationQuery({fields: {widgets: decodeScalar}});
  93. const updateQuery = useUpdateQuery();
  94. const widgets = useStructuralSharing(
  95. useMemo<MetricsWidget[]>(
  96. () => parseMetricWidgetsQueryParam(urlWidgets, mri),
  97. [urlWidgets, mri]
  98. )
  99. );
  100. // We want to have it as a ref, so that we can use it in the setWidget callback
  101. // without needing to generate a new callback every time the location changes
  102. const currentWidgetsRef = useInstantRef(widgets);
  103. const setWidgets = useCallback(
  104. (newWidgets: React.SetStateAction<MetricsWidget[]>) => {
  105. const currentWidgets = currentWidgetsRef.current;
  106. const newData =
  107. typeof newWidgets === 'function' ? newWidgets(currentWidgets) : newWidgets;
  108. updateQuery({widgets: JSON.stringify(newData)});
  109. // We need to update the ref so that the next call to setWidgets in the same render cycle will have the updated value
  110. currentWidgetsRef.current = newData;
  111. },
  112. [updateQuery, currentWidgetsRef]
  113. );
  114. const updateWidget = useCallback(
  115. (index: number, data: Partial<Omit<MetricsWidget, 'type'>>) => {
  116. setWidgets(currentWidgets => {
  117. const newWidgets = [...currentWidgets];
  118. const oldWidget = currentWidgets[index];
  119. if (isMetricsQueryWidget(oldWidget)) {
  120. // Reset focused series if mri, query or groupBy changes
  121. if (
  122. ('mri' in data && data.mri !== oldWidget.mri) ||
  123. ('query' in data && data.query !== oldWidget.query) ||
  124. ('groupBy' in data && !isEqual(data.groupBy, oldWidget.groupBy))
  125. ) {
  126. data.focusedSeries = undefined;
  127. }
  128. }
  129. newWidgets[index] = {
  130. ...currentWidgets[index],
  131. ...data,
  132. };
  133. return newWidgets;
  134. });
  135. },
  136. [setWidgets]
  137. );
  138. const duplicateWidget = useCallback(
  139. (index: number) => {
  140. setWidgets(currentWidgets => {
  141. const newWidgets = [...currentWidgets];
  142. const newWidget = {...currentWidgets[index]};
  143. newWidget.id = NO_QUERY_ID;
  144. newWidgets.splice(index + 1, 0, newWidget);
  145. return newWidgets;
  146. });
  147. },
  148. [setWidgets]
  149. );
  150. const addWidget = useCallback(
  151. (type: MetricExpressionType = MetricExpressionType.QUERY) => {
  152. const lastIndexOfSameType = currentWidgetsRef.current.findLastIndex(
  153. w => w.type === type
  154. );
  155. if (lastIndexOfSameType > -1) {
  156. duplicateWidget(lastIndexOfSameType);
  157. } else {
  158. setWidgets(currentWidgets => [
  159. ...currentWidgets,
  160. type === MetricExpressionType.QUERY
  161. ? emptyMetricsQueryWidget
  162. : emptyMetricsFormulaWidget,
  163. ]);
  164. }
  165. },
  166. [currentWidgetsRef, duplicateWidget, setWidgets]
  167. );
  168. const removeWidget = useCallback(
  169. (index: number) => {
  170. setWidgets(currentWidgets => {
  171. let newWidgets = [...currentWidgets];
  172. newWidgets.splice(index, 1);
  173. // Ensure that a visible widget remains
  174. if (!newWidgets.find(w => !w.isHidden)) {
  175. newWidgets = newWidgets.map(w => ({...w, isHidden: false}));
  176. }
  177. return newWidgets;
  178. });
  179. },
  180. [setWidgets]
  181. );
  182. return {
  183. widgets,
  184. updateWidget,
  185. addWidget,
  186. removeWidget,
  187. duplicateWidget,
  188. setWidgets,
  189. };
  190. }
  191. const useDefaultQuery = () => {
  192. const router = useRouter();
  193. const [defaultQuery, setDefaultQuery] = useLocalStorageState<Record<
  194. string,
  195. any
  196. > | null>('ddm:default-query', null);
  197. useEffect(() => {
  198. if (defaultQuery && router.location.query.widgets === undefined) {
  199. router.replace({...router.location, query: defaultQuery});
  200. }
  201. // Only call on page load
  202. // eslint-disable-next-line react-hooks/exhaustive-deps
  203. }, []);
  204. return useMemo(
  205. () => ({
  206. defaultQuery,
  207. setDefaultQuery,
  208. isDefaultQuery: !!defaultQuery && isEqual(defaultQuery, router.location.query),
  209. }),
  210. [defaultQuery, router.location.query, setDefaultQuery]
  211. );
  212. };
  213. export function MetricsContextProvider({children}: {children: React.ReactNode}) {
  214. const router = useRouter();
  215. const updateQuery = useUpdateQuery();
  216. const {multiChartMode} = useLocationQuery({fields: {multiChartMode: decodeInteger}});
  217. const pageFilters = usePageFilters();
  218. const {data: metaCustom, isLoading: isMetaCustomLoading} = useMetricsMeta(
  219. pageFilters.selection,
  220. ['custom']
  221. );
  222. const {data: metaPerformance, isLoading: isMetaPerformanceLoading} = useMetricsMeta(
  223. pageFilters.selection,
  224. ['transactions', 'spans']
  225. );
  226. const isMultiChartMode = multiChartMode === 1;
  227. const {setDefaultQuery, isDefaultQuery} = useDefaultQuery();
  228. const [selectedWidgetIndex, setSelectedWidgetIndex] = useState(0);
  229. const {widgets, updateWidget, addWidget, removeWidget, duplicateWidget, setWidgets} =
  230. useMetricWidgets(metaCustom[0]?.mri);
  231. const [metricsSamples, setMetricsSamples] = useState<
  232. MetricsSamplesResults<Field>['data'] | undefined
  233. >();
  234. const [highlightedSampleId, setHighlightedSampleId] = useState<string | undefined>();
  235. const hasCustomMetrics = useMemo(() => {
  236. return !!metaCustom.length;
  237. }, [metaCustom]);
  238. const hasPerformanceMetrics = useMemo(() => {
  239. return !!metaPerformance.length;
  240. }, [metaPerformance]);
  241. const handleSetSelectedWidgetIndex = useCallback(
  242. (value: number) => {
  243. if (!isMultiChartMode) {
  244. return;
  245. }
  246. setSelectedWidgetIndex(value);
  247. },
  248. [isMultiChartMode]
  249. );
  250. const focusAreaSelection = useMemo<FocusAreaSelection | undefined>(
  251. () => router.location.query.focusArea && JSON.parse(router.location.query.focusArea),
  252. [router.location.query.focusArea]
  253. );
  254. const handleAddFocusArea = useCallback(
  255. (area: FocusAreaSelection) => {
  256. if (!area.range.start || !area.range.end) {
  257. Sentry.metrics.increment('ddm.enhance.range-undefined');
  258. return;
  259. }
  260. Sentry.metrics.increment('ddm.enhance.add');
  261. handleSetSelectedWidgetIndex(area.widgetIndex);
  262. updateQuery({focusArea: JSON.stringify(area)}, {replace: true});
  263. },
  264. [handleSetSelectedWidgetIndex, updateQuery]
  265. );
  266. const handleRemoveFocusArea = useCallback(() => {
  267. Sentry.metrics.increment('ddm.enhance.remove');
  268. updateQuery({focusArea: undefined}, {replace: true});
  269. }, [updateQuery]);
  270. const focusArea = useMemo<FocusAreaProps>(() => {
  271. return {
  272. selection: focusAreaSelection,
  273. onAdd: handleAddFocusArea,
  274. onRemove: handleRemoveFocusArea,
  275. };
  276. }, [focusAreaSelection, handleAddFocusArea, handleRemoveFocusArea]);
  277. const handleAddWidget = useCallback(
  278. (type?: MetricExpressionType) => {
  279. addWidget(type);
  280. handleSetSelectedWidgetIndex(widgets.length);
  281. },
  282. [addWidget, handleSetSelectedWidgetIndex, widgets.length]
  283. );
  284. const handleUpdateWidget = useCallback(
  285. (index: number, data: Partial<MetricsWidget>) => {
  286. updateWidget(index, data);
  287. handleSetSelectedWidgetIndex(index);
  288. if (index === focusAreaSelection?.widgetIndex) {
  289. handleRemoveFocusArea();
  290. }
  291. },
  292. [
  293. updateWidget,
  294. handleSetSelectedWidgetIndex,
  295. focusAreaSelection?.widgetIndex,
  296. handleRemoveFocusArea,
  297. ]
  298. );
  299. const handleDuplicate = useCallback(
  300. (index: number) => {
  301. duplicateWidget(index);
  302. handleSetSelectedWidgetIndex(index + 1);
  303. },
  304. [duplicateWidget, handleSetSelectedWidgetIndex]
  305. );
  306. const handleSetIsMultiChartMode = useCallback(
  307. (value: boolean) => {
  308. updateQuery({multiChartMode: value ? 1 : 0}, {replace: true});
  309. updateWidget(0, {focusedSeries: undefined});
  310. const firstVisibleWidgetIndex = widgets.findIndex(w => !w.isHidden);
  311. setSelectedWidgetIndex(firstVisibleWidgetIndex);
  312. },
  313. [updateQuery, updateWidget, widgets]
  314. );
  315. const toggleWidgetVisibility = useCallback(
  316. (index: number) => {
  317. if (index === selectedWidgetIndex) {
  318. const firstVisibleWidgetIndex = widgets.findIndex(w => !w.isHidden);
  319. setSelectedWidgetIndex(firstVisibleWidgetIndex);
  320. }
  321. if (!isMultiChartMode) {
  322. // Reset the focused series when hiding a widget
  323. setWidgets(currentWidgets => {
  324. return currentWidgets.map(w => ({...w, focusedSeries: undefined}));
  325. });
  326. }
  327. updateWidget(index, {isHidden: !widgets[index].isHidden});
  328. },
  329. [isMultiChartMode, selectedWidgetIndex, setWidgets, updateWidget, widgets]
  330. );
  331. const selectedWidget = widgets[selectedWidgetIndex];
  332. const isSelectionValid = selectedWidget && !selectedWidget.isHidden;
  333. const contextValue = useMemo<MetricsContextValue>(
  334. () => ({
  335. addWidget: handleAddWidget,
  336. selectedWidgetIndex: isSelectionValid
  337. ? selectedWidgetIndex
  338. : widgets.findIndex(w => !w.isHidden),
  339. setSelectedWidgetIndex: handleSetSelectedWidgetIndex,
  340. updateWidget: handleUpdateWidget,
  341. removeWidget,
  342. duplicateWidget: handleDuplicate,
  343. widgets,
  344. hasCustomMetrics,
  345. hasPerformanceMetrics,
  346. isHasMetricsLoading: isMetaCustomLoading || isMetaPerformanceLoading,
  347. focusArea,
  348. setDefaultQuery,
  349. isDefaultQuery,
  350. showQuerySymbols: widgets.length > 1,
  351. highlightedSampleId,
  352. setHighlightedSampleId,
  353. isMultiChartMode: isMultiChartMode,
  354. setIsMultiChartMode: handleSetIsMultiChartMode,
  355. metricsSamples,
  356. setMetricsSamples,
  357. toggleWidgetVisibility,
  358. }),
  359. [
  360. handleAddWidget,
  361. isSelectionValid,
  362. selectedWidgetIndex,
  363. widgets,
  364. handleSetSelectedWidgetIndex,
  365. handleUpdateWidget,
  366. removeWidget,
  367. handleDuplicate,
  368. hasCustomMetrics,
  369. hasPerformanceMetrics,
  370. focusArea,
  371. setDefaultQuery,
  372. isDefaultQuery,
  373. highlightedSampleId,
  374. isMultiChartMode,
  375. handleSetIsMultiChartMode,
  376. metricsSamples,
  377. toggleWidgetVisibility,
  378. isMetaCustomLoading,
  379. isMetaPerformanceLoading,
  380. ]
  381. );
  382. return (
  383. <MetricsContext.Provider value={contextValue}>{children}</MetricsContext.Provider>
  384. );
  385. }