Skip to content

Commit

Permalink
ref(performance): Separate header from content in transaction vitals (#…
Browse files Browse the repository at this point in the history 
…28343)

In preparation to unify some of the page layouts in transaction summary pages,
this change separates the header from the content in the transaction vitals tab.
  • Loading branch information
@Zylphrex
Zylphrex authored Sep 1, 2021
1 parent faa028a commit 27cc654
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 215 deletions.
184 changes: 68 additions & 116 deletions static/app/views/performance/transactionSummary/transactionVitals/content.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,38 @@
import * as React from 'react';
import {browserHistory} from 'react-router';
import styled from '@emotion/styled';
import {Location} from 'history';

import Button from 'app/components/button';
import {CreateAlertFromViewButton} from 'app/components/createAlertButton';
import DropdownControl, {DropdownItem} from 'app/components/dropdownControl';
import SearchBar from 'app/components/events/searchBar';
import * as Layout from 'app/components/layouts/thirds';
import {getParams} from 'app/components/organizations/globalSelectionHeader/getParams';
import {t} from 'app/locale';
import space from 'app/styles/space';
import {Organization, Project} from 'app/types';
import {Organization} from 'app/types';
import {trackAnalyticsEvent} from 'app/utils/analytics';
import EventView from 'app/utils/discover/eventView';
import Histogram from 'app/utils/performance/histogram';
import {FILTER_OPTIONS} from 'app/utils/performance/histogram/constants';
import {decodeScalar} from 'app/utils/queryString';

import TransactionHeader from '../header';
import Tab from '../tabs';

import {ZOOM_KEYS} from './constants';
import VitalsPanel from './vitalsPanel';

type Props = {
location: Location;
eventView: EventView;
transactionName: string;
organization: Organization;
projects: Project[];
};

type State = {
incompatibleAlertNotice: React.ReactNode;
eventView: EventView;
};

class VitalsContent extends React.Component<Props, State> {
state: State = {
incompatibleAlertNotice: null,
};

handleSearch = (query: string) => {
const {location} = this.props;
function VitalsContent(props: Props) {
const {location, organization, eventView} = props;
const query = decodeScalar(location.query.query, '');

const handleSearch = (newQuery: string) => {
const queryParams = getParams({
...(location.query || {}),
query,
query: newQuery,
});

// do not propagate pagination when making a new search
Expand All @@ -58,101 +44,67 @@ class VitalsContent extends React.Component<Props, State> {
});
};

handleIncompatibleQuery: React.ComponentProps<
typeof CreateAlertFromViewButton
>['onIncompatibleQuery'] = (incompatibleAlertNoticeFn, _errors) => {
const incompatibleAlertNotice = incompatibleAlertNoticeFn(() =>
this.setState({incompatibleAlertNotice: null})
);
this.setState({incompatibleAlertNotice});
};

render() {
const {transactionName, location, eventView, projects, organization} = this.props;
const {incompatibleAlertNotice} = this.state;
const query = decodeScalar(location.query.query, '');

return (
<React.Fragment>
<TransactionHeader
eventView={eventView}
location={location}
organization={organization}
projects={projects}
transactionName={transactionName}
currentTab={Tab.WebVitals}
hasWebVitals="yes"
handleIncompatibleQuery={this.handleIncompatibleQuery}
/>
<Histogram location={location} zoomKeys={ZOOM_KEYS}>
{({activeFilter, handleFilterChange, handleResetView, isZoomed}) => {
return (
<Layout.Body>
{incompatibleAlertNotice && (
<Layout.Main fullWidth>{incompatibleAlertNotice}</Layout.Main>
)}
<Layout.Main fullWidth>
<StyledActions>
<StyledSearchBar
organization={organization}
projectIds={eventView.project}
query={query}
fields={eventView.fields}
onSearch={this.handleSearch}
/>
<DropdownControl
buttonProps={{prefix: t('Outliers')}}
label={activeFilter.label}
>
{FILTER_OPTIONS.map(({label, value}) => (
<DropdownItem
key={value}
onSelect={(filterOption: string) => {
trackAnalyticsEvent({
eventKey: 'performance_views.vitals.filter_changed',
eventName: 'Performance Views: Change vitals filter',
organization_id: organization.id,
value: filterOption,
});
handleFilterChange(filterOption);
}}
eventKey={value}
isActive={value === activeFilter.value}
>
{label}
</DropdownItem>
))}
</DropdownControl>
<Button
onClick={() => {
trackAnalyticsEvent({
eventKey: 'performance_views.vitals.reset_view',
eventName: 'Performance Views: Reset vitals view',
organization_id: organization.id,
});

handleResetView();
}}
disabled={!isZoomed}
data-test-id="reset-view"
>
{t('Reset View')}
</Button>
</StyledActions>
<VitalsPanel
organization={organization}
location={location}
eventView={eventView}
dataFilter={activeFilter.value}
/>
</Layout.Main>
</Layout.Body>
);
}}
</Histogram>
</React.Fragment>
);
}
return (
<Histogram location={location} zoomKeys={ZOOM_KEYS}>
{({activeFilter, handleFilterChange, handleResetView, isZoomed}) => (
<Layout.Main fullWidth>
<StyledActions>
<StyledSearchBar
organization={organization}
projectIds={eventView.project}
query={query}
fields={eventView.fields}
onSearch={handleSearch}
/>
<DropdownControl
buttonProps={{prefix: t('Outliers')}}
label={activeFilter.label}
>
{FILTER_OPTIONS.map(({label, value}) => (
<DropdownItem
key={value}
onSelect={(filterOption: string) => {
trackAnalyticsEvent({
eventKey: 'performance_views.vitals.filter_changed',
eventName: 'Performance Views: Change vitals filter',
organization_id: organization.id,
value: filterOption,
});
handleFilterChange(filterOption);
}}
eventKey={value}
isActive={value === activeFilter.value}
>
{label}
</DropdownItem>
))}
</DropdownControl>
<Button
onClick={() => {
trackAnalyticsEvent({
eventKey: 'performance_views.vitals.reset_view',
eventName: 'Performance Views: Reset vitals view',
organization_id: organization.id,
});

handleResetView();
}}
disabled={!isZoomed}
data-test-id="reset-view"
>
{t('Reset View')}
</Button>
</StyledActions>
<VitalsPanel
organization={organization}
location={location}
eventView={eventView}
dataFilter={activeFilter.value}
/>
</Layout.Main>
)}
</Histogram>
);
}

const StyledSearchBar = styled(SearchBar)`
Expand Down
Loading

0 comments on commit 27cc654

Please sign in to comment.