queryList.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. import {Component, Fragment} from 'react';
  2. import {browserHistory, InjectedRouter} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location, Query} from 'history';
  5. import moment from 'moment';
  6. import {resetPageFilters} from 'sentry/actionCreators/pageFilters';
  7. import {Client} from 'sentry/api';
  8. import Feature from 'sentry/components/acl/feature';
  9. import {Button} from 'sentry/components/button';
  10. import {DropdownMenu, MenuItemProps} from 'sentry/components/dropdownMenu';
  11. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  12. import Pagination from 'sentry/components/pagination';
  13. import TimeSince from 'sentry/components/timeSince';
  14. import {IconEllipsis} from 'sentry/icons';
  15. import {t} from 'sentry/locale';
  16. import {space} from 'sentry/styles/space';
  17. import {Organization, SavedQuery} from 'sentry/types';
  18. import {trackAnalytics} from 'sentry/utils/analytics';
  19. import EventView from 'sentry/utils/discover/eventView';
  20. import parseLinkHeader from 'sentry/utils/parseLinkHeader';
  21. import {decodeList} from 'sentry/utils/queryString';
  22. import withApi from 'sentry/utils/withApi';
  23. import {
  24. handleCreateQuery,
  25. handleDeleteQuery,
  26. handleUpdateHomepageQuery,
  27. } from './savedQuery/utils';
  28. import MiniGraph from './miniGraph';
  29. import QueryCard from './querycard';
  30. import {getPrebuiltQueries, handleAddQueryToDashboard} from './utils';
  31. type Props = {
  32. api: Client;
  33. location: Location;
  34. onQueryChange: () => void;
  35. organization: Organization;
  36. pageLinks: string;
  37. renderPrebuilt: boolean;
  38. router: InjectedRouter;
  39. savedQueries: SavedQuery[];
  40. savedQuerySearchQuery: string;
  41. };
  42. class QueryList extends Component<Props> {
  43. componentDidMount() {
  44. /**
  45. * We need to reset global selection here because the saved queries can define their own projects
  46. * in the query. This can lead to mismatched queries for the project
  47. */
  48. resetPageFilters();
  49. }
  50. handleDeleteQuery = (eventView: EventView) => {
  51. const {api, organization, onQueryChange, location, savedQueries} = this.props;
  52. handleDeleteQuery(api, organization, eventView).then(() => {
  53. if (savedQueries.length === 1 && location.query.cursor) {
  54. browserHistory.push({
  55. pathname: location.pathname,
  56. query: {...location.query, cursor: undefined},
  57. });
  58. } else {
  59. onQueryChange();
  60. }
  61. });
  62. };
  63. handleDuplicateQuery = (eventView: EventView, yAxis: string[]) => {
  64. const {api, location, organization, onQueryChange} = this.props;
  65. eventView = eventView.clone();
  66. eventView.name = `${eventView.name} copy`;
  67. handleCreateQuery(api, organization, eventView, yAxis).then(() => {
  68. onQueryChange();
  69. browserHistory.push({
  70. pathname: location.pathname,
  71. query: {},
  72. });
  73. });
  74. };
  75. renderQueries() {
  76. const {pageLinks, renderPrebuilt} = this.props;
  77. const links = parseLinkHeader(pageLinks || '');
  78. let cards: React.ReactNode[] = [];
  79. // If we're on the first page (no-previous page exists)
  80. // include the pre-built queries.
  81. if (renderPrebuilt && (!links.previous || links.previous.results === false)) {
  82. cards = cards.concat(this.renderPrebuiltQueries());
  83. }
  84. cards = cards.concat(this.renderSavedQueries());
  85. if (cards.filter(x => x).length === 0) {
  86. return (
  87. <StyledEmptyStateWarning>
  88. <p>{t('No saved queries match that filter')}</p>
  89. </StyledEmptyStateWarning>
  90. );
  91. }
  92. return cards;
  93. }
  94. renderDropdownMenu(items: MenuItemProps[]) {
  95. return (
  96. <DropdownMenu
  97. items={items}
  98. trigger={triggerProps => (
  99. <DropdownTrigger
  100. {...triggerProps}
  101. aria-label={t('Query actions')}
  102. size="xs"
  103. borderless
  104. onClick={e => {
  105. e.stopPropagation();
  106. e.preventDefault();
  107. triggerProps.onClick?.(e);
  108. }}
  109. icon={<IconEllipsis direction="down" size="sm" />}
  110. data-test-id="menu-trigger"
  111. />
  112. )}
  113. position="bottom-end"
  114. offset={4}
  115. />
  116. );
  117. }
  118. renderPrebuiltQueries() {
  119. const {api, location, organization, savedQuerySearchQuery, router} = this.props;
  120. const views = getPrebuiltQueries(organization);
  121. const hasSearchQuery =
  122. typeof savedQuerySearchQuery === 'string' && savedQuerySearchQuery.length > 0;
  123. const needleSearch = hasSearchQuery ? savedQuerySearchQuery.toLowerCase() : '';
  124. const list = views.map((view, index) => {
  125. const eventView = EventView.fromNewQueryWithLocation(view, location);
  126. // if a search is performed on the list of queries, we filter
  127. // on the pre-built queries
  128. if (
  129. hasSearchQuery &&
  130. eventView.name &&
  131. !eventView.name.toLowerCase().includes(needleSearch)
  132. ) {
  133. return null;
  134. }
  135. const recentTimeline = t('Last ') + eventView.statsPeriod;
  136. const customTimeline =
  137. moment(eventView.start).format('MMM D, YYYY h:mm A') +
  138. ' - ' +
  139. moment(eventView.end).format('MMM D, YYYY h:mm A');
  140. const to = eventView.getResultsViewUrlTarget(organization.slug);
  141. const menuItems = [
  142. {
  143. key: 'add-to-dashboard',
  144. label: t('Add to Dashboard'),
  145. onAction: () =>
  146. handleAddQueryToDashboard({
  147. eventView,
  148. location,
  149. query: view,
  150. organization,
  151. yAxis: view?.yAxis,
  152. router,
  153. }),
  154. },
  155. {
  156. key: 'set-as-default',
  157. label: t('Set as Default'),
  158. onAction: () => {
  159. handleUpdateHomepageQuery(api, organization, eventView.toNewQuery());
  160. trackAnalytics('discover_v2.set_as_default', {
  161. organization,
  162. source: 'context-menu',
  163. type: 'prebuilt-query',
  164. });
  165. },
  166. },
  167. ];
  168. return (
  169. <QueryCard
  170. key={`${index}-${eventView.name}`}
  171. to={to}
  172. title={eventView.name}
  173. subtitle={eventView.statsPeriod ? recentTimeline : customTimeline}
  174. queryDetail={eventView.query}
  175. createdBy={eventView.createdBy}
  176. renderGraph={() => (
  177. <MiniGraph
  178. location={location}
  179. eventView={eventView}
  180. organization={organization}
  181. referrer="api.discover.homepage.prebuilt"
  182. />
  183. )}
  184. onEventClick={() => {
  185. trackAnalytics('discover_v2.prebuilt_query_click', {
  186. organization,
  187. query_name: eventView.name,
  188. });
  189. }}
  190. renderContextMenu={() => (
  191. <Feature organization={organization} features={['dashboards-edit']}>
  192. {({hasFeature}) => {
  193. return hasFeature && this.renderDropdownMenu(menuItems);
  194. }}
  195. </Feature>
  196. )}
  197. />
  198. );
  199. });
  200. return list;
  201. }
  202. renderSavedQueries() {
  203. const {api, savedQueries, location, organization, router} = this.props;
  204. if (!savedQueries || !Array.isArray(savedQueries) || savedQueries.length === 0) {
  205. return [];
  206. }
  207. return savedQueries.map((savedQuery, index) => {
  208. const eventView = EventView.fromSavedQuery(savedQuery);
  209. const recentTimeline = t('Last ') + eventView.statsPeriod;
  210. const customTimeline =
  211. moment(eventView.start).format('MMM D, YYYY h:mm A') +
  212. ' - ' +
  213. moment(eventView.end).format('MMM D, YYYY h:mm A');
  214. const to = eventView.getResultsViewShortUrlTarget(organization.slug);
  215. const dateStatus = <TimeSince date={savedQuery.dateUpdated} />;
  216. const referrer = `api.discover.${eventView.getDisplayMode()}-chart`;
  217. const menuItems = (canAddToDashboard: boolean): MenuItemProps[] => [
  218. ...(canAddToDashboard
  219. ? [
  220. {
  221. key: 'add-to-dashboard',
  222. label: t('Add to Dashboard'),
  223. onAction: () =>
  224. handleAddQueryToDashboard({
  225. eventView,
  226. location,
  227. query: savedQuery,
  228. organization,
  229. yAxis: savedQuery?.yAxis ?? eventView.yAxis,
  230. router,
  231. }),
  232. },
  233. ]
  234. : []),
  235. {
  236. key: 'set-as-default',
  237. label: t('Set as Default'),
  238. onAction: () => {
  239. handleUpdateHomepageQuery(api, organization, eventView.toNewQuery());
  240. trackAnalytics('discover_v2.set_as_default', {
  241. organization,
  242. source: 'context-menu',
  243. type: 'saved-query',
  244. });
  245. },
  246. },
  247. {
  248. key: 'duplicate',
  249. label: t('Duplicate Query'),
  250. onAction: () =>
  251. this.handleDuplicateQuery(eventView, decodeList(savedQuery.yAxis)),
  252. },
  253. {
  254. key: 'delete',
  255. label: t('Delete Query'),
  256. priority: 'danger',
  257. onAction: () => this.handleDeleteQuery(eventView),
  258. },
  259. ];
  260. return (
  261. <QueryCard
  262. key={`${index}-${eventView.id}`}
  263. to={to}
  264. title={eventView.name}
  265. subtitle={eventView.statsPeriod ? recentTimeline : customTimeline}
  266. queryDetail={eventView.query}
  267. createdBy={eventView.createdBy}
  268. dateStatus={dateStatus}
  269. onEventClick={() => {
  270. trackAnalytics('discover_v2.saved_query_click', {organization});
  271. }}
  272. renderGraph={() => (
  273. <MiniGraph
  274. location={location}
  275. eventView={eventView}
  276. organization={organization}
  277. referrer={referrer}
  278. yAxis={
  279. savedQuery.yAxis && savedQuery.yAxis.length
  280. ? savedQuery.yAxis
  281. : ['count()']
  282. }
  283. />
  284. )}
  285. renderContextMenu={() => (
  286. <Feature organization={organization} features={['dashboards-edit']}>
  287. {({hasFeature}) => this.renderDropdownMenu(menuItems(hasFeature))}
  288. </Feature>
  289. )}
  290. />
  291. );
  292. });
  293. }
  294. render() {
  295. const {pageLinks} = this.props;
  296. return (
  297. <Fragment>
  298. <QueryGrid>{this.renderQueries()}</QueryGrid>
  299. <PaginationRow
  300. pageLinks={pageLinks}
  301. onCursor={(cursor, path, query, direction) => {
  302. const offset = Number(cursor?.split(':')?.[1] ?? 0);
  303. const newQuery: Query & {cursor?: string} = {...query, cursor};
  304. const isPrevious = direction === -1;
  305. if (offset <= 0 && isPrevious) {
  306. delete newQuery.cursor;
  307. }
  308. browserHistory.push({
  309. pathname: path,
  310. query: newQuery,
  311. });
  312. }}
  313. />
  314. </Fragment>
  315. );
  316. }
  317. }
  318. const PaginationRow = styled(Pagination)`
  319. margin-bottom: 20px;
  320. `;
  321. const QueryGrid = styled('div')`
  322. display: grid;
  323. grid-template-columns: minmax(100px, 1fr);
  324. gap: ${space(2)};
  325. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  326. grid-template-columns: repeat(2, minmax(100px, 1fr));
  327. }
  328. @media (min-width: ${p => p.theme.breakpoints.large}) {
  329. grid-template-columns: repeat(3, minmax(100px, 1fr));
  330. }
  331. `;
  332. const DropdownTrigger = styled(Button)`
  333. transform: translateX(${space(1)});
  334. `;
  335. const StyledEmptyStateWarning = styled(EmptyStateWarning)`
  336. grid-column: 1 / 4;
  337. `;
  338. export default withApi(QueryList);