resultsHeader.tsx 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. import {Component, Fragment} from 'react';
  2. import {InjectedRouter} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location} from 'history';
  5. import {stringify} from 'query-string';
  6. import {fetchHomepageQuery} from 'sentry/actionCreators/discoverHomepageQueries';
  7. import {fetchSavedQuery} from 'sentry/actionCreators/discoverSavedQueries';
  8. import {Client} from 'sentry/api';
  9. import Feature from 'sentry/components/acl/feature';
  10. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  11. import * as Layout from 'sentry/components/layouts/thirds';
  12. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  13. import TimeSince from 'sentry/components/timeSince';
  14. import {t} from 'sentry/locale';
  15. import {space} from 'sentry/styles/space';
  16. import {Organization, SavedQuery} from 'sentry/types';
  17. import EventView from 'sentry/utils/discover/eventView';
  18. import withApi from 'sentry/utils/withApi';
  19. import Banner from './banner';
  20. import DiscoverBreadcrumb from './breadcrumb';
  21. import {DEFAULT_EVENT_VIEW} from './data';
  22. import EventInputName from './eventInputName';
  23. import SavedQueryButtonGroup from './savedQuery';
  24. type Props = {
  25. api: Client;
  26. errorCode: number;
  27. eventView: EventView;
  28. location: Location;
  29. organization: Organization;
  30. router: InjectedRouter;
  31. setSavedQuery: (savedQuery?: SavedQuery) => void;
  32. yAxis: string[];
  33. isHomepage?: boolean;
  34. };
  35. type State = {
  36. homepageQuery: SavedQuery | undefined;
  37. loading: boolean;
  38. savedQuery: SavedQuery | undefined;
  39. };
  40. class ResultsHeader extends Component<Props, State> {
  41. state: State = {
  42. homepageQuery: undefined,
  43. savedQuery: undefined,
  44. loading: true,
  45. };
  46. componentDidMount() {
  47. const {eventView, isHomepage} = this.props;
  48. const {loading} = this.state;
  49. if (!isHomepage && eventView.id) {
  50. this.fetchData();
  51. } else if (eventView.id === undefined && loading) {
  52. // If this is a new query, there's nothing to load
  53. this.setState({loading: false});
  54. }
  55. if (isHomepage) {
  56. this.fetchHomepageQueryData();
  57. }
  58. }
  59. componentDidUpdate(prevProps: Props) {
  60. if (
  61. prevProps.eventView &&
  62. this.props.eventView &&
  63. prevProps.eventView.id !== this.props.eventView.id
  64. ) {
  65. this.fetchData();
  66. }
  67. }
  68. fetchData() {
  69. const {api, eventView, organization, isHomepage} = this.props;
  70. if (!isHomepage && typeof eventView.id === 'string') {
  71. this.setState({loading: true});
  72. fetchSavedQuery(api, organization.slug, eventView.id).then(savedQuery => {
  73. this.setState({savedQuery, loading: false});
  74. });
  75. }
  76. }
  77. fetchHomepageQueryData() {
  78. const {api, organization} = this.props;
  79. this.setState({loading: true});
  80. fetchHomepageQuery(api, organization.slug).then(homepageQuery => {
  81. this.setState({homepageQuery, loading: false});
  82. });
  83. }
  84. renderAuthor() {
  85. const {eventView, isHomepage} = this.props;
  86. const {savedQuery} = this.state;
  87. // No saved query in use.
  88. if (!eventView.id || isHomepage) {
  89. return null;
  90. }
  91. let createdBy = ' \u2014 ';
  92. let lastEdit: React.ReactNode = ' \u2014 ';
  93. if (savedQuery !== undefined) {
  94. createdBy = savedQuery.createdBy?.email || '\u2014';
  95. lastEdit = <TimeSince date={savedQuery.dateUpdated} />;
  96. }
  97. return (
  98. <Subtitle>
  99. {t('Created by:')} {createdBy} | {t('Last edited:')} {lastEdit}
  100. </Subtitle>
  101. );
  102. }
  103. renderBanner() {
  104. const {location, organization} = this.props;
  105. const eventView = EventView.fromNewQueryWithLocation(DEFAULT_EVENT_VIEW, location);
  106. const to = eventView.getResultsViewUrlTarget(organization.slug);
  107. const resultsUrl = `${to.pathname}?${stringify(to.query)}`;
  108. return (
  109. <BannerWrapper>
  110. <Banner
  111. organization={organization}
  112. resultsUrl={resultsUrl}
  113. showBuildNewQueryButton={false}
  114. />
  115. </BannerWrapper>
  116. );
  117. }
  118. render() {
  119. const {
  120. organization,
  121. location,
  122. errorCode,
  123. eventView,
  124. yAxis,
  125. router,
  126. setSavedQuery,
  127. isHomepage,
  128. } = this.props;
  129. const {savedQuery, loading, homepageQuery} = this.state;
  130. return (
  131. <Layout.Header>
  132. <Layout.HeaderContent>
  133. {isHomepage ? (
  134. <GuideAnchor target="discover_landing_header">
  135. <Layout.Title>
  136. {t('Discover')}
  137. <PageHeadingQuestionTooltip
  138. docsUrl="https://docs.sentry.io/product/discover-queries/"
  139. title={t(
  140. 'Create queries to get insights into the health of your system.'
  141. )}
  142. />
  143. </Layout.Title>
  144. </GuideAnchor>
  145. ) : (
  146. <Fragment>
  147. <Feature features={['organizations:discover-query']}>
  148. <DiscoverBreadcrumb
  149. eventView={eventView}
  150. organization={organization}
  151. location={location}
  152. isHomepage={isHomepage}
  153. />
  154. </Feature>
  155. <EventInputName
  156. savedQuery={savedQuery}
  157. organization={organization}
  158. eventView={eventView}
  159. isHomepage={isHomepage}
  160. />
  161. </Fragment>
  162. )}
  163. {this.renderAuthor()}
  164. </Layout.HeaderContent>
  165. <Layout.HeaderActions>
  166. <SavedQueryButtonGroup
  167. setSavedQuery={setSavedQuery}
  168. location={location}
  169. organization={organization}
  170. eventView={eventView}
  171. savedQuery={savedQuery}
  172. queryDataLoading={loading}
  173. disabled={errorCode >= 400 && errorCode < 500}
  174. updateCallback={() => this.fetchData()}
  175. yAxis={yAxis}
  176. router={router}
  177. isHomepage={isHomepage}
  178. setHomepageQuery={updatedHomepageQuery => {
  179. this.setState({homepageQuery: updatedHomepageQuery});
  180. if (isHomepage) {
  181. setSavedQuery(updatedHomepageQuery);
  182. }
  183. }}
  184. homepageQuery={homepageQuery}
  185. />
  186. </Layout.HeaderActions>
  187. {isHomepage && this.renderBanner()}
  188. </Layout.Header>
  189. );
  190. }
  191. }
  192. const Subtitle = styled('h4')`
  193. font-size: ${p => p.theme.fontSizeLarge};
  194. font-weight: normal;
  195. color: ${p => p.theme.gray300};
  196. margin: ${space(0.5)} 0 0 0;
  197. `;
  198. const BannerWrapper = styled('div')`
  199. grid-column: 1 / -1;
  200. `;
  201. export default withApi(ResultsHeader);