content.tsx 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. import {useCallback, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {Location} from 'history';
  4. import Feature from 'sentry/components/acl/feature';
  5. import {Alert} from 'sentry/components/alert';
  6. import {Button} from 'sentry/components/button';
  7. import ButtonBar from 'sentry/components/buttonBar';
  8. import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
  9. import * as Layout from 'sentry/components/layouts/thirds';
  10. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  11. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  12. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  13. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  14. import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
  15. import {
  16. EAPSpanSearchQueryBuilder,
  17. SpanSearchQueryBuilder,
  18. } from 'sentry/components/performance/spanSearchQueryBuilder';
  19. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  20. import {t} from 'sentry/locale';
  21. import {space} from 'sentry/styles/space';
  22. import {DiscoverDatasets} from 'sentry/utils/discover/types';
  23. import {ALLOWED_EXPLORE_VISUALIZE_AGGREGATES} from 'sentry/utils/fields';
  24. import {useLocation} from 'sentry/utils/useLocation';
  25. import {useNavigate} from 'sentry/utils/useNavigate';
  26. import useOrganization from 'sentry/utils/useOrganization';
  27. import usePageFilters from 'sentry/utils/usePageFilters';
  28. import {ExploreCharts} from 'sentry/views/explore/charts';
  29. import {
  30. SpanTagsProvider,
  31. useSpanTags,
  32. } from 'sentry/views/explore/contexts/spanTagsContext';
  33. import {useDataset} from 'sentry/views/explore/hooks/useDataset';
  34. import {useUserQuery} from 'sentry/views/explore/hooks/useUserQuery';
  35. import {ExploreTables} from 'sentry/views/explore/tables';
  36. import {ExploreToolbar} from 'sentry/views/explore/toolbar';
  37. import {useResultMode} from './hooks/useResultsMode';
  38. interface ExploreContentProps {
  39. location: Location;
  40. }
  41. function ExploreContentImpl({}: ExploreContentProps) {
  42. const location = useLocation();
  43. const navigate = useNavigate();
  44. const organization = useOrganization();
  45. const {selection} = usePageFilters();
  46. const [dataset] = useDataset();
  47. const [resultMode] = useResultMode();
  48. const supportedAggregates =
  49. resultMode === 'aggregate' ? ALLOWED_EXPLORE_VISUALIZE_AGGREGATES : [];
  50. const numberTags = useSpanTags('number');
  51. const stringTags = useSpanTags('string');
  52. const [userQuery, setUserQuery] = useUserQuery();
  53. const toolbarExtras = organization.features.includes('visibility-explore-dataset')
  54. ? ['dataset toggle' as const]
  55. : [];
  56. const switchToOldTraceExplorer = useCallback(() => {
  57. navigate({
  58. ...location,
  59. query: {
  60. ...location.query,
  61. view: 'trace',
  62. },
  63. });
  64. }, [location, navigate]);
  65. const [chartError, setChartError] = useState<string>('');
  66. const [tableError, setTableError] = useState<string>('');
  67. return (
  68. <SentryDocumentTitle title={t('Traces')} orgSlug={organization.slug}>
  69. <PageFiltersContainer>
  70. <Layout.Page>
  71. <Layout.Header>
  72. <Layout.HeaderContent>
  73. <Layout.Title>{t('Traces')}</Layout.Title>
  74. </Layout.HeaderContent>
  75. <Layout.HeaderActions>
  76. <ButtonBar gap={1}>
  77. <Feature organization={organization} features="visibility-explore-admin">
  78. <Button onClick={switchToOldTraceExplorer} size="sm">
  79. {t('Switch to Old Trace Explore')}
  80. </Button>
  81. </Feature>
  82. <FeedbackWidgetButton />
  83. </ButtonBar>
  84. </Layout.HeaderActions>
  85. </Layout.Header>
  86. <Body>
  87. <TopSection>
  88. <StyledPageFilterBar condensed>
  89. <ProjectPageFilter />
  90. <EnvironmentPageFilter />
  91. <DatePageFilter
  92. maxPickableDays={7}
  93. relativeOptions={({arbitraryOptions}) => ({
  94. ...arbitraryOptions,
  95. '1h': t('Last 1 hour'),
  96. '24h': t('Last 24 hours'),
  97. '7d': t('Last 7 days'),
  98. })}
  99. />
  100. </StyledPageFilterBar>
  101. {dataset === DiscoverDatasets.SPANS_INDEXED ? (
  102. <SpanSearchQueryBuilder
  103. projects={selection.projects}
  104. initialQuery={userQuery}
  105. onSearch={setUserQuery}
  106. searchSource="explore"
  107. />
  108. ) : (
  109. <EAPSpanSearchQueryBuilder
  110. projects={selection.projects}
  111. initialQuery={userQuery}
  112. onSearch={setUserQuery}
  113. searchSource="explore"
  114. supportedAggregates={supportedAggregates}
  115. numberTags={numberTags}
  116. stringTags={stringTags}
  117. />
  118. )}
  119. </TopSection>
  120. <ExploreToolbar extras={toolbarExtras} />
  121. <MainSection fullWidth>
  122. {(tableError || chartError) && (
  123. <Alert type="error" showIcon>
  124. {tableError || chartError}
  125. </Alert>
  126. )}
  127. <ExploreCharts query={userQuery} setError={setChartError} />
  128. <ExploreTables setError={setTableError} />
  129. </MainSection>
  130. </Body>
  131. </Layout.Page>
  132. </PageFiltersContainer>
  133. </SentryDocumentTitle>
  134. );
  135. }
  136. export function ExploreContent(props: ExploreContentProps) {
  137. const [dataset] = useDataset();
  138. return (
  139. <SpanTagsProvider dataset={dataset}>
  140. <ExploreContentImpl {...props} />
  141. </SpanTagsProvider>
  142. );
  143. }
  144. const Body = styled(Layout.Body)`
  145. gap: ${space(2)};
  146. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  147. grid-template-columns: 350px minmax(100px, auto);
  148. gap: ${space(2)};
  149. }
  150. @media (min-width: ${p => p.theme.breakpoints.xxlarge}) {
  151. grid-template-columns: 400px minmax(100px, auto);
  152. }
  153. `;
  154. const TopSection = styled('div')`
  155. display: grid;
  156. gap: ${space(2)};
  157. grid-column: 1/3;
  158. margin-bottom: ${space(2)};
  159. @media (min-width: ${p => p.theme.breakpoints.large}) {
  160. grid-template-columns: minmax(350px, auto) 1fr;
  161. margin-bottom: 0;
  162. }
  163. @media (min-width: ${p => p.theme.breakpoints.xxlarge}) {
  164. grid-template-columns: minmax(400px, auto) 1fr;
  165. }
  166. `;
  167. const MainSection = styled(Layout.Main)`
  168. grid-column: 2/3;
  169. `;
  170. const StyledPageFilterBar = styled(PageFilterBar)`
  171. width: auto;
  172. `;