feat(events-v2): Add filtering to heatmaps (#13650)

Filters heatmaps by project, environment, time and query

Author: lynnagara

src/sentry/static/sentry/app/components/organizations/globalSelectionHeader/index.jsx

@@ -4,10 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'react-emotion';
 
-import {
-  DATE_TIME_KEYS,
-  URL_PARAM,
-} from 'app/components/organizations/globalSelectionHeader/constants';
+import {DATE_TIME_KEYS, URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {DEFAULT_STATS_PERIOD} from 'app/constants';
 import {callIfFunction} from 'app/utils/callIfFunction';
 import {isEqualWithDates} from 'app/utils/isEqualWithDates';

src/sentry/static/sentry/app/components/organizations/globalSelectionHeader/utils.jsx

@@ -3,7 +3,7 @@ import {pick, pickBy, identity} from 'lodash';
 import {defined} from 'app/utils';
 import {getUtcToLocalDateObject} from 'app/utils/dates';
 
-import {URL_PARAM} from './constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 
 // Parses URL query parameters for values relevant to global selection header
 export function getStateFromQuery(query) {

src/sentry/static/sentry/app/components/organizations/globalSelectionHeader/constants.jsx renamed to src/sentry/static/sentry/app/constants/globalSelectionHeader.jsx

@@ -5,7 +5,7 @@ import {
   DATE_TIME,
   URL_PARAM,
   LOCAL_STORAGE_KEY,
-} from 'app/components/organizations/globalSelectionHeader/constants';
+} from 'app/constants/globalSelectionHeader';
 import {getStateFromQuery} from 'app/components/organizations/globalSelectionHeader/utils';
 import {isEqualWithDates} from 'app/utils/isEqualWithDates';
 import OrganizationsStore from 'app/stores/organizationsStore';

src/sentry/static/sentry/app/stores/globalSelectionStore.jsx

@@ -12,6 +12,8 @@ import DateTime from 'app/components/dateTime';
 
 import {QueryLink} from './styles';
 
+export const MODAL_QUERY_KEYS = ['eventSlug', 'groupSlug'];
+
 export const ALL_VIEWS = deepFreeze([
   {
     id: 'all',

src/sentry/static/sentry/app/views/organizationEventsV2/data.jsx

@@ -16,6 +16,7 @@ import {getParams} from 'app/views/organizationEvents/utils/getParams';
 import Table from './table';
 import Tags from './tags';
 import {getQuery} from './utils';
+import {MODAL_QUERY_KEYS} from './data';
 
 const CHART_AXIS_OPTIONS = [
   {label: 'Count', value: 'event_count'},
@@ -35,8 +36,8 @@ export default class Events extends AsyncComponent {
   componentDidUpdate(prevProps, prevContext) {
     // Do not update if we are just opening/closing the modal
     const locationHasChanged = !isEqual(
-      omit(prevProps.location.query, 'eventSlug'),
-      omit(this.props.location.query, 'eventSlug')
+      omit(prevProps.location.query, MODAL_QUERY_KEYS),
+      omit(this.props.location.query, MODAL_QUERY_KEYS)
     );
 
     if (locationHasChanged) {

src/sentry/static/sentry/app/views/organizationEventsV2/events.jsx

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
-import {isEqual} from 'lodash';
+import {isEqual, omit} from 'lodash';
 
 import SentryTypes from 'app/sentryTypes';
 import TagDistributionMeter from 'app/components/tagDistributionMeter';
 import withApi from 'app/utils/withApi';
-import withGlobalSelection from 'app/utils/withGlobalSelection';
 import {fetchTags, getEventTagSearchUrl} from './utils';
+import {MODAL_QUERY_KEYS} from './data';
 
 class Tags extends React.Component {
   static propTypes = {
     api: PropTypes.object.isRequired,
     organization: SentryTypes.Organization.isRequired,
     view: SentryTypes.EventView.isRequired,
-    selection: SentryTypes.GlobalSelection.isRequired,
     location: PropTypes.object.isRequired,
   };
 
@@ -28,19 +27,22 @@ class Tags extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (
-      this.props.view.id !== prevProps.view.id ||
-      !isEqual(this.props.selection, prevProps.selection)
-    ) {
+    // Do not update if we are just opening/closing the modal
+    const locationHasChanged = !isEqual(
+      omit(prevProps.location.query, MODAL_QUERY_KEYS),
+      omit(this.props.location.query, MODAL_QUERY_KEYS)
+    );
+
+    if (this.props.view.id !== prevProps.view.id || locationHasChanged) {
       this.fetchData();
     }
   }
 
   fetchData = async () => {
-    const {api, organization, view} = this.props;
+    const {api, organization, view, location} = this.props;
 
     try {
-      const tags = await fetchTags(api, organization.slug, view.tags);
+      const tags = await fetchTags(api, organization.slug, view.tags, location.query);
       this.setState({tags, isLoading: false});
     } catch (err) {
       this.setState({tags: {}, isLoading: false});
@@ -87,4 +89,4 @@ const Placeholder = styled('div')`
 `;
 
 export {Tags};
-export default withApi(withGlobalSelection(Tags));
+export default withApi(Tags);

src/sentry/static/sentry/app/views/organizationEventsV2/tags.jsx

@@ -1,6 +1,7 @@
 import {pick} from 'lodash';
 
 import {DEFAULT_PER_PAGE} from 'app/constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {ALL_VIEWS, SPECIAL_FIELDS} from './data';
 
 /**
@@ -91,10 +92,12 @@ export function getEventTagSearchUrl(tagKey, tagValue, location) {
  * @param {Array} tagList
  * @returns {Promise<Object>}
  */
-export function fetchTags(api, orgSlug, tagList) {
+export function fetchTags(api, orgSlug, tagList, query) {
+  const urlParams = pick(query, Object.values(URL_PARAM));
+
   return api
     .requestPromise(`/organizations/${orgSlug}/events-heatmap/`, {
-      query: {keys: tagList},
+      query: {...urlParams, keys: tagList, query: query.query},
     })
     .then(resp => {
       const tags = {};

src/sentry/static/sentry/app/views/organizationEventsV2/utils.jsx

@@ -6,7 +6,7 @@ import SentryTypes from 'app/sentryTypes';
 import LoadingError from 'app/components/loadingError';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
-import {URL_PARAM} from 'app/components/organizations/globalSelectionHeader/constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 import withOrganization from 'app/utils/withOrganization';
 import AsyncView from 'app/views/asyncView';
 import {PageContent} from 'app/styles/organization';

src/sentry/static/sentry/app/views/organizationReleases/detail/index.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {Panel, PanelHeader, PanelBody, PanelItem} from 'app/components/panels';
-import {URL_PARAM} from 'app/components/organizations/globalSelectionHeader/constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {t} from 'app/locale';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
 import FileSize from 'app/components/fileSize';

src/sentry/static/sentry/app/views/organizationReleases/detail/releaseArtifacts.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 
 import {Panel, PanelHeader, PanelBody} from 'app/components/panels';
-import {URL_PARAM} from 'app/components/organizations/globalSelectionHeader/constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {t} from 'app/locale';
 import withApi from 'app/utils/withApi';
 import CommitRow from 'app/components/commitRow';

src/sentry/static/sentry/app/views/organizationReleases/detail/releaseCommits.jsx

@@ -1,5 +1,5 @@
 import {pick} from 'lodash';
-import {URL_PARAM} from 'app/components/organizations/globalSelectionHeader/constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 
 /**
  * Get query term for API given location.query

src/sentry/static/sentry/app/views/organizationReleases/list/utils.jsx

@@ -1,7 +1,7 @@
 import {pick} from 'lodash';
 import qs from 'query-string';
 
-import {URL_PARAM} from 'app/components/organizations/globalSelectionHeader/constants';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 
 const DEFAULT_STATUS = 'unresolved';
 

src/sentry/static/sentry/app/views/userFeedback/utils.jsx

@@ -44,7 +44,7 @@ describe('Tags', function() {
         api={api}
         organization={org}
         selection={{projects: [], environments: [], datetime: {}}}
-        location={{}}
+        location={{query: {}}}
       />
     );