utils.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import {Organization} from 'sentry/types';
  2. import {objectIsEmpty} from 'sentry/utils';
  3. import localStorage from 'sentry/utils/localStorage';
  4. import {
  5. canUseMetricsData,
  6. MEPState,
  7. MetricsEnhancedSettingContext,
  8. } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
  9. import {PROJECT_PERFORMANCE_TYPE} from '../../utils';
  10. import {PerformanceWidgetSetting} from './widgetDefinitions';
  11. export const eventsRequestQueryProps = [
  12. 'children',
  13. 'organization',
  14. 'yAxis',
  15. 'period',
  16. 'start',
  17. 'end',
  18. 'environment',
  19. 'project',
  20. 'referrer',
  21. ] as const;
  22. function setWidgetStorageObject(localObject: Record<string, string>) {
  23. localStorage.setItem(getContainerLocalStorageObjectKey, JSON.stringify(localObject));
  24. }
  25. const mepQueryParamBase = {};
  26. export function getMEPQueryParams(
  27. mepContext: MetricsEnhancedSettingContext,
  28. forceAuto?: boolean
  29. ) {
  30. let queryParams = {};
  31. const base = mepQueryParamBase;
  32. if (mepContext.shouldQueryProvideMEPAutoParams || forceAuto) {
  33. queryParams = {
  34. ...queryParams,
  35. ...base,
  36. dataset: 'metricsEnhanced',
  37. };
  38. if (forceAuto) {
  39. return queryParams;
  40. }
  41. }
  42. if (mepContext.shouldQueryProvideMEPTransactionParams) {
  43. queryParams = {...queryParams, ...base, dataset: 'discover'};
  44. }
  45. if (mepContext.shouldQueryProvideMEPMetricParams) {
  46. queryParams = {...queryParams, ...base, dataset: 'metrics'};
  47. }
  48. // Disallow any performance request from using aggregates since they aren't currently possible in all visualizations and we don't want to mix modes.
  49. return objectIsEmpty(queryParams) ? undefined : queryParams;
  50. }
  51. export function getMetricOnlyQueryParams() {
  52. return {...mepQueryParamBase, dataset: 'metrics'};
  53. }
  54. export const WIDGET_MAP_DENY_LIST = [
  55. PerformanceWidgetSetting.MOST_RELATED_ERRORS,
  56. PerformanceWidgetSetting.MOST_RELATED_ISSUES,
  57. ];
  58. /**
  59. * Some widgets, such as Related Issues, are inherently not possible w/ metrics at the moment since they use event.type:error under the hood.
  60. */
  61. export function getMEPParamsIfApplicable(
  62. mepContext: MetricsEnhancedSettingContext,
  63. widget: PerformanceWidgetSetting
  64. ) {
  65. if (WIDGET_MAP_DENY_LIST.includes(widget)) {
  66. return undefined;
  67. }
  68. return getMEPQueryParams(mepContext);
  69. }
  70. const getContainerLocalStorageObjectKey = 'landing-chart-container';
  71. const getContainerKey = (
  72. index: number,
  73. performanceType: PROJECT_PERFORMANCE_TYPE,
  74. height: number
  75. ) => `landing-chart-container#${performanceType}#${height}#${index}`;
  76. function getWidgetStorageObject() {
  77. const localObject = JSON.parse(
  78. localStorage.getItem(getContainerLocalStorageObjectKey) || '{}'
  79. );
  80. return localObject;
  81. }
  82. export const getChartSetting = (
  83. index: number,
  84. height: number,
  85. performanceType: PROJECT_PERFORMANCE_TYPE,
  86. defaultType: PerformanceWidgetSetting,
  87. forceDefaultChartSetting?: boolean // Used for testing.
  88. ): PerformanceWidgetSetting => {
  89. if (forceDefaultChartSetting) {
  90. return defaultType;
  91. }
  92. const key = getContainerKey(index, performanceType, height);
  93. const localObject = getWidgetStorageObject();
  94. const value = localObject?.[key];
  95. if (
  96. value &&
  97. Object.values(PerformanceWidgetSetting).includes(value as PerformanceWidgetSetting)
  98. ) {
  99. const _value: PerformanceWidgetSetting = value as PerformanceWidgetSetting;
  100. return _value;
  101. }
  102. return defaultType;
  103. };
  104. export const _setChartSetting = (
  105. index: number,
  106. height: number,
  107. performanceType: PROJECT_PERFORMANCE_TYPE,
  108. setting: PerformanceWidgetSetting
  109. ) => {
  110. const key = getContainerKey(index, performanceType, height);
  111. const localObject = getWidgetStorageObject();
  112. localObject[key] = setting;
  113. setWidgetStorageObject(localObject);
  114. };
  115. const DISALLOWED_CHARTS_METRICS = [
  116. PerformanceWidgetSetting.DURATION_HISTOGRAM,
  117. PerformanceWidgetSetting.FCP_HISTOGRAM,
  118. PerformanceWidgetSetting.LCP_HISTOGRAM,
  119. PerformanceWidgetSetting.FID_HISTOGRAM,
  120. ];
  121. export function filterAllowedChartsMetrics(
  122. organization: Organization,
  123. allowedCharts: PerformanceWidgetSetting[],
  124. mepSetting: MetricsEnhancedSettingContext
  125. ) {
  126. if (
  127. !canUseMetricsData(organization) ||
  128. organization.features.includes('performance-mep-reintroduce-histograms') ||
  129. mepSetting.metricSettingState === MEPState.transactionsOnly
  130. ) {
  131. return allowedCharts;
  132. }
  133. return allowedCharts.filter(c => !DISALLOWED_CHARTS_METRICS.includes(c));
  134. }