Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jun 13, 2019
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0000232
feat(events-v2): Add filtering to heatmaps
lynnagara Jun 12, 2019
0643577
update constants path
lynnagara Jun 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/sentry/static/sentry/app/views/organizationEventsV2/data.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 3 additions & 2 deletions src/sentry/static/sentry/app/views/organizationEventsV2/events.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand All @@ -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) {
Expand Down
22 changes: 12 additions & 10 deletions src/sentry/static/sentry/app/views/organizationEventsV2/tags.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
};

Expand All @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the fetchTags() action need to be updated to handle the datetime properties being structured differently?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How are they structured differently?

Copy link
Member

@markstory markstory Jun 13, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The data in the selection is nested inside a datetime property, whereas in the query string the structure is flat. However, you're using the URL_PARAM constant to pick the values out, so you should be ok.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yeah it's just pulling it out of the browser's URL bar which is flat and not going through the stored structure

this.setState({tags, isLoading: false});
} catch (err) {
this.setState({tags: {}, isLoading: false});
Expand Down Expand Up @@ -87,4 +89,4 @@ const Placeholder = styled('div')`
`;

export {Tags};
export default withApi(withGlobalSelection(Tags));
export default withApi(Tags);
7 changes: 5 additions & 2 deletions src/sentry/static/sentry/app/views/organizationEventsV2/utils.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {pick} from 'lodash';

import {DEFAULT_PER_PAGE} from 'app/constants';
import {URL_PARAM} from 'app/components/organizations/globalSelectionHeader/constants';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be moved out of this component specific dir?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved!

import {ALL_VIEWS, SPECIAL_FIELDS} from './data';

/**
Expand Down Expand Up @@ -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 = {};
Expand Down
2 changes: 1 addition & 1 deletion tests/js/spec/views/organizationEventsV2/tags.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe('Tags', function() {
api={api}
organization={org}
selection={{projects: [], environments: [], datetime: {}}}
location={{}}
location={{query: {}}}
/>
);

Expand Down