monitorIssues.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  2. import GroupList from 'sentry/components/issues/groupList';
  3. import {Panel, PanelBody} from 'sentry/components/panels';
  4. import {t} from 'sentry/locale';
  5. import {getUtcDateString} from 'sentry/utils/dates';
  6. import usePageFilters from 'sentry/utils/usePageFilters';
  7. import {Monitor, MonitorEnvironment} from '../types';
  8. type Props = {
  9. monitor: Monitor;
  10. monitorEnvs: MonitorEnvironment[];
  11. orgId: string;
  12. };
  13. function MonitorIssuesEmptyMessage() {
  14. return (
  15. <Panel>
  16. <PanelBody>
  17. <EmptyStateWarning>
  18. <p>{t('No issues relating to this cron monitor have been found.')}</p>
  19. </EmptyStateWarning>
  20. </PanelBody>
  21. </Panel>
  22. );
  23. }
  24. function MonitorIssues({orgId, monitor, monitorEnvs}: Props) {
  25. const {selection} = usePageFilters();
  26. const {start, end, period} = selection.datetime;
  27. const timeProps =
  28. start && end
  29. ? {
  30. start: getUtcDateString(start),
  31. end: getUtcDateString(end),
  32. }
  33. : {
  34. statsPeriod: period,
  35. };
  36. // TODO(epurkhiser): We probably want to filter on envrionemnt
  37. return (
  38. <GroupList
  39. orgId={orgId}
  40. endpointPath={`/organizations/${orgId}/issues/`}
  41. queryParams={{
  42. query: `monitor.slug:"${monitor.slug}" environment:[${monitorEnvs
  43. .map(e => e.name)
  44. .join(',')}]`,
  45. project: monitor.project.id,
  46. limit: 5,
  47. ...timeProps,
  48. }}
  49. query=""
  50. renderEmptyMessage={MonitorIssuesEmptyMessage}
  51. canSelectGroups={false}
  52. withPagination={false}
  53. withChart={false}
  54. useTintRow={false}
  55. source="monitors"
  56. />
  57. );
  58. }
  59. export default MonitorIssues;