projectIssues.tsx 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. import {Fragment, useCallback, useEffect, useState} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location} from 'history';
  5. import pick from 'lodash/pick';
  6. import * as qs from 'query-string';
  7. import {Client} from 'sentry/api';
  8. import {Button} from 'sentry/components/button';
  9. import ButtonBar from 'sentry/components/buttonBar';
  10. import DiscoverButton from 'sentry/components/discoverButton';
  11. import GroupList from 'sentry/components/issues/groupList';
  12. import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
  13. import Pagination from 'sentry/components/pagination';
  14. import Panel from 'sentry/components/panels/panel';
  15. import PanelBody from 'sentry/components/panels/panelBody';
  16. import QueryCount from 'sentry/components/queryCount';
  17. import {SegmentedControl} from 'sentry/components/segmentedControl';
  18. import {DEFAULT_RELATIVE_PERIODS, DEFAULT_STATS_PERIOD} from 'sentry/constants';
  19. import {URL_PARAM} from 'sentry/constants/pageFilters';
  20. import {t, tct} from 'sentry/locale';
  21. import {space} from 'sentry/styles/space';
  22. import {Organization} from 'sentry/types';
  23. import {trackAnalytics} from 'sentry/utils/analytics';
  24. import {decodeScalar} from 'sentry/utils/queryString';
  25. import NoGroupsHandler from '../issueList/noGroupsHandler';
  26. enum IssuesType {
  27. NEW = 'new',
  28. UNHANDLED = 'unhandled',
  29. REGRESSED = 'regressed',
  30. RESOLVED = 'resolved',
  31. ALL = 'all',
  32. }
  33. enum IssuesQuery {
  34. NEW = 'is:unresolved is:for_review',
  35. UNHANDLED = 'error.unhandled:true is:unresolved',
  36. REGRESSED = 'regressed_in_release:latest',
  37. RESOLVED = 'is:resolved',
  38. ALL = '',
  39. }
  40. type Count = {
  41. all: number;
  42. new: number;
  43. regressed: number;
  44. resolved: number;
  45. unhandled: number;
  46. };
  47. type Props = {
  48. api: Client;
  49. location: Location;
  50. organization: Organization;
  51. projectId: number;
  52. query?: string;
  53. };
  54. function ProjectIssues({organization, location, projectId, query, api}: Props) {
  55. const [pageLinks, setPageLinks] = useState<string | undefined>();
  56. const [onCursor, setOnCursor] = useState<(() => void) | undefined>();
  57. const [issuesType, setIssuesType] = useState<IssuesType>(
  58. (location.query.issuesType as IssuesType) || IssuesType.UNHANDLED
  59. );
  60. const [issuesCount, setIssuesCount] = useState<Count>({
  61. all: 0,
  62. new: 0,
  63. regressed: 0,
  64. resolved: 0,
  65. unhandled: 0,
  66. });
  67. const fetchIssuesCount = useCallback(async () => {
  68. const getIssueCountEndpoint = queryParameters => {
  69. const issuesCountPath = `/organizations/${organization.slug}/issues-count/`;
  70. return `${issuesCountPath}?${qs.stringify(queryParameters)}`;
  71. };
  72. const params = [
  73. `${IssuesQuery.NEW}`,
  74. `${IssuesQuery.ALL}`,
  75. `${IssuesQuery.RESOLVED}`,
  76. `${IssuesQuery.UNHANDLED}`,
  77. `${IssuesQuery.REGRESSED}`,
  78. ];
  79. const queryParams = params.map(param => param);
  80. const queryParameters = {
  81. project: projectId,
  82. query: queryParams,
  83. ...(!location.query.start && {
  84. statsPeriod: location.query.statsPeriod || DEFAULT_STATS_PERIOD,
  85. }),
  86. start: location.query.start,
  87. end: location.query.end,
  88. environment: location.query.environment,
  89. cursor: location.query.cursor,
  90. };
  91. const issueCountEndpoint = getIssueCountEndpoint(queryParameters);
  92. try {
  93. const data = await api.requestPromise(issueCountEndpoint);
  94. setIssuesCount({
  95. all: data[`${IssuesQuery.ALL}`] || 0,
  96. new: data[`${IssuesQuery.NEW}`] || 0,
  97. resolved: data[`${IssuesQuery.RESOLVED}`] || 0,
  98. unhandled: data[`${IssuesQuery.UNHANDLED}`] || 0,
  99. regressed: data[`${IssuesQuery.REGRESSED}`] || 0,
  100. });
  101. } catch {
  102. // do nothing
  103. }
  104. }, [
  105. api,
  106. location.query.cursor,
  107. location.query.end,
  108. location.query.environment,
  109. location.query.start,
  110. location.query.statsPeriod,
  111. organization.slug,
  112. projectId,
  113. ]);
  114. useEffect(() => {
  115. fetchIssuesCount();
  116. }, [fetchIssuesCount]);
  117. function handleOpenInIssuesClick() {
  118. trackAnalytics('project_detail.open_issues', {organization});
  119. }
  120. function handleOpenInDiscoverClick() {
  121. trackAnalytics('project_detail.open_discover', {organization});
  122. }
  123. function handleFetchSuccess(groupListState, cursorHandler) {
  124. setPageLinks(groupListState.pageLinks);
  125. setOnCursor(() => cursorHandler);
  126. }
  127. const discoverQuery =
  128. issuesType === 'unhandled'
  129. ? ['event.type:error error.unhandled:true', query].join(' ').trim()
  130. : ['event.type:error', query].join(' ').trim();
  131. function getDiscoverUrl() {
  132. return {
  133. pathname: `/organizations/${organization.slug}/discover/results/`,
  134. query: {
  135. name: t('Frequent Unhandled Issues'),
  136. field: ['issue', 'title', 'count()', 'count_unique(user)', 'project'],
  137. sort: ['-count'],
  138. query: discoverQuery,
  139. display: 'top5',
  140. ...normalizeDateTimeParams(pick(location.query, [...Object.values(URL_PARAM)])),
  141. },
  142. };
  143. }
  144. const endpointPath = `/organizations/${organization.slug}/issues/`;
  145. const issueQuery = (Object.values(IssuesType) as string[]).includes(issuesType)
  146. ? [`${IssuesQuery[issuesType.toUpperCase()]}`, query].join(' ').trim()
  147. : [`${IssuesQuery.ALL}`, query].join(' ').trim();
  148. const queryParams = {
  149. limit: 5,
  150. ...normalizeDateTimeParams(
  151. pick(location.query, [...Object.values(URL_PARAM), 'cursor'])
  152. ),
  153. query: issueQuery,
  154. sort: 'freq',
  155. };
  156. const issueSearch = {
  157. pathname: endpointPath,
  158. query: queryParams,
  159. };
  160. function handleIssuesTypeSelection(issueType: IssuesType) {
  161. const to = {
  162. ...location,
  163. query: {
  164. ...location.query,
  165. issuesType: issueType,
  166. },
  167. };
  168. browserHistory.replace(to);
  169. setIssuesType(issueType);
  170. }
  171. function renderEmptyMessage() {
  172. const selectedTimePeriod = location.query.start
  173. ? null
  174. : DEFAULT_RELATIVE_PERIODS[
  175. decodeScalar(location.query.statsPeriod, DEFAULT_STATS_PERIOD)
  176. ];
  177. const displayedPeriod = selectedTimePeriod
  178. ? selectedTimePeriod.toLowerCase()
  179. : t('given timeframe');
  180. return (
  181. <Panel>
  182. <PanelBody>
  183. <NoGroupsHandler
  184. api={api}
  185. organization={organization}
  186. query={issueQuery}
  187. selectedProjectIds={[projectId]}
  188. groupIds={[]}
  189. emptyMessage={tct('No [issuesType] issues for the [timePeriod].', {
  190. issuesType: issuesType === 'all' ? '' : issuesType,
  191. timePeriod: displayedPeriod,
  192. })}
  193. />
  194. </PanelBody>
  195. </Panel>
  196. );
  197. }
  198. const issuesTypes = [
  199. {value: IssuesType.ALL, label: t('All Issues'), issueCount: issuesCount.all},
  200. {value: IssuesType.NEW, label: t('New Issues'), issueCount: issuesCount.new},
  201. {
  202. value: IssuesType.UNHANDLED,
  203. label: t('Unhandled'),
  204. issueCount: issuesCount.unhandled,
  205. },
  206. {
  207. value: IssuesType.REGRESSED,
  208. label: t('Regressed'),
  209. issueCount: issuesCount.regressed,
  210. },
  211. {
  212. value: IssuesType.RESOLVED,
  213. label: t('Resolved'),
  214. issueCount: issuesCount.resolved,
  215. },
  216. ];
  217. return (
  218. <Fragment>
  219. <ControlsWrapper>
  220. <SegmentedControl
  221. aria-label={t('Issue type')}
  222. value={issuesType}
  223. onChange={value => handleIssuesTypeSelection(value)}
  224. size="xs"
  225. >
  226. {issuesTypes.map(({value, label, issueCount}) => (
  227. <SegmentedControl.Item key={value} textValue={label}>
  228. {label}&nbsp;
  229. <QueryCount count={issueCount} max={99} hideParens hideIfEmpty={false} />
  230. </SegmentedControl.Item>
  231. ))}
  232. </SegmentedControl>
  233. <OpenInButtonBar gap={1}>
  234. <Button
  235. data-test-id="issues-open"
  236. size="xs"
  237. to={issueSearch}
  238. onClick={handleOpenInIssuesClick}
  239. >
  240. {t('Open in Issues')}
  241. </Button>
  242. <DiscoverButton
  243. onClick={handleOpenInDiscoverClick}
  244. to={getDiscoverUrl()}
  245. size="xs"
  246. >
  247. {t('Open in Discover')}
  248. </DiscoverButton>
  249. <StyledPagination pageLinks={pageLinks} onCursor={onCursor} size="xs" />
  250. </OpenInButtonBar>
  251. </ControlsWrapper>
  252. <GroupList
  253. orgSlug={organization.slug}
  254. endpointPath={endpointPath}
  255. queryParams={queryParams}
  256. query=""
  257. canSelectGroups={false}
  258. renderEmptyMessage={renderEmptyMessage}
  259. withChart={false}
  260. withPagination={false}
  261. onFetchSuccess={handleFetchSuccess}
  262. source="project"
  263. />
  264. </Fragment>
  265. );
  266. }
  267. const ControlsWrapper = styled('div')`
  268. display: flex;
  269. align-items: flex-end;
  270. justify-content: space-between;
  271. margin-bottom: ${space(1)};
  272. flex-wrap: wrap;
  273. `;
  274. const OpenInButtonBar = styled(ButtonBar)`
  275. margin-top: ${space(1)};
  276. @media (max-width: ${p => p.theme.breakpoints.small}) {
  277. width: 100%;
  278. }
  279. `;
  280. const StyledPagination = styled(Pagination)`
  281. margin: 0;
  282. `;
  283. export default ProjectIssues;