issuesList.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. import {Fragment} from 'react';
  2. import {css} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import type {DateTimeObject} from 'sentry/components/charts/utils';
  5. import Count from 'sentry/components/count';
  6. import {DateTime} from 'sentry/components/dateTime';
  7. import Link from 'sentry/components/links/link';
  8. import LoadingError from 'sentry/components/loadingError';
  9. import Pagination from 'sentry/components/pagination';
  10. import {PanelTable} from 'sentry/components/panels/panelTable';
  11. import {t} from 'sentry/locale';
  12. import {space} from 'sentry/styles/space';
  13. import type {Group, Project} from 'sentry/types';
  14. import type {IssueAlertRule} from 'sentry/types/alerts';
  15. import {getMessage, getTitle} from 'sentry/utils/events';
  16. import type {FeedbackIssue} from 'sentry/utils/feedback/types';
  17. import getDynamicText from 'sentry/utils/getDynamicText';
  18. import {useApiQuery} from 'sentry/utils/queryClient';
  19. import useOrganization from 'sentry/utils/useOrganization';
  20. type GroupHistory = {
  21. count: number;
  22. eventId: string;
  23. group: Group;
  24. lastTriggered: string;
  25. };
  26. type Props = DateTimeObject & {
  27. project: Project;
  28. rule: IssueAlertRule;
  29. cursor?: string;
  30. };
  31. function AlertRuleIssuesList({project, rule, period, start, end, utc, cursor}: Props) {
  32. const organization = useOrganization();
  33. const {
  34. data: groupHistory,
  35. getResponseHeader,
  36. isLoading,
  37. isError,
  38. error,
  39. } = useApiQuery<GroupHistory[]>(
  40. [
  41. `/projects/${organization.slug}/${project.slug}/rules/${rule.id}/group-history/`,
  42. {
  43. query: {
  44. per_page: 10,
  45. ...(period && {statsPeriod: period}),
  46. start,
  47. end,
  48. utc,
  49. cursor,
  50. },
  51. },
  52. ],
  53. {staleTime: 0}
  54. );
  55. if (isError) {
  56. return (
  57. <LoadingError
  58. message={(error?.responseJSON?.detail as string) ?? t('default message')}
  59. />
  60. );
  61. }
  62. return (
  63. <Fragment>
  64. <StyledPanelTable
  65. isLoading={isLoading}
  66. isEmpty={groupHistory?.length === 0}
  67. emptyMessage={t('No issues exist for the current query.')}
  68. headers={[
  69. t('Issue'),
  70. <AlignRight key="alerts">{t('Alerts')}</AlignRight>,
  71. <AlignRight key="events">{t('Events')}</AlignRight>,
  72. t('Last Triggered'),
  73. ]}
  74. >
  75. {groupHistory?.map(({group: issue, count, lastTriggered, eventId}) => {
  76. const message = getMessage(issue);
  77. const {title} = getTitle(issue);
  78. const path =
  79. (issue as unknown as FeedbackIssue).issueType === 'feedback'
  80. ? {
  81. pathname: `/organizations/${organization.slug}/feedback/?feedbackSlug=${issue.project.slug}%3A${issue.id}`,
  82. }
  83. : {
  84. pathname: `/organizations/${organization.slug}/issues/${issue.id}/${
  85. eventId ? `events/${eventId}` : ''
  86. }`,
  87. query: {
  88. referrer: 'alert-rule-issue-list',
  89. ...(rule.environment ? {environment: rule.environment} : {}),
  90. },
  91. };
  92. return (
  93. <Fragment key={issue.id}>
  94. <TitleWrapper>
  95. <Link to={path}>{title}:</Link>
  96. <MessageWrapper>{message}</MessageWrapper>
  97. </TitleWrapper>
  98. <AlignRight>
  99. <Count value={count} />
  100. </AlignRight>
  101. <AlignRight>
  102. <Count value={issue.count} />
  103. </AlignRight>
  104. <div>
  105. <StyledDateTime
  106. date={getDynamicText({
  107. value: lastTriggered,
  108. fixed: 'Mar 16, 2020 9:10:13 AM UTC',
  109. })}
  110. year
  111. seconds
  112. timeZone
  113. />
  114. </div>
  115. </Fragment>
  116. );
  117. })}
  118. </StyledPanelTable>
  119. <PaginationWrapper>
  120. <StyledPagination pageLinks={getResponseHeader?.('Link')} size="xs" />
  121. </PaginationWrapper>
  122. </Fragment>
  123. );
  124. }
  125. export default AlertRuleIssuesList;
  126. const StyledPanelTable = styled(PanelTable)`
  127. grid-template-columns: 1fr 0.2fr 0.2fr 0.5fr;
  128. font-size: ${p => p.theme.fontSizeMedium};
  129. margin-bottom: ${space(1.5)};
  130. ${p =>
  131. !p.isEmpty &&
  132. css`
  133. & > div {
  134. padding: ${space(1)} ${space(2)};
  135. }
  136. `}
  137. `;
  138. const AlignRight = styled('div')`
  139. text-align: right;
  140. font-variant-numeric: tabular-nums;
  141. `;
  142. const StyledDateTime = styled(DateTime)`
  143. white-space: nowrap;
  144. color: ${p => p.theme.subText};
  145. `;
  146. const TitleWrapper = styled('div')`
  147. ${p => p.theme.overflowEllipsis};
  148. display: flex;
  149. gap: ${space(0.5)};
  150. min-width: 200px;
  151. `;
  152. const MessageWrapper = styled('span')`
  153. ${p => p.theme.overflowEllipsis};
  154. color: ${p => p.theme.textColor};
  155. `;
  156. const PaginationWrapper = styled('div')`
  157. display: flex;
  158. align-items: center;
  159. justify-content: flex-end;
  160. margin-bottom: ${space(2)};
  161. `;
  162. const StyledPagination = styled(Pagination)`
  163. margin-top: 0;
  164. `;