details.tsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import sortBy from 'lodash/sortBy';
  5. import * as Layout from 'sentry/components/layouts/thirds';
  6. import LoadingIndicator from 'sentry/components/loadingIndicator';
  7. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  8. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  9. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  10. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  11. import {space} from 'sentry/styles/space';
  12. import {setApiQueryData, useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
  13. import useOrganization from 'sentry/utils/useOrganization';
  14. import usePageFilters from 'sentry/utils/usePageFilters';
  15. import {CronDetailsTimeline} from 'sentry/views/monitors/components/cronDetailsTimeline';
  16. import DetailsSidebar from 'sentry/views/monitors/components/detailsSidebar';
  17. import MonitorCheckIns from './components/monitorCheckIns';
  18. import MonitorHeader from './components/monitorHeader';
  19. import MonitorIssues from './components/monitorIssues';
  20. import MonitorStats from './components/monitorStats';
  21. import MonitorOnboarding from './components/onboarding';
  22. import {Monitor} from './types';
  23. const DEFAULT_POLL_INTERVAL_MS = 5000;
  24. type Props = RouteComponentProps<{monitorSlug: string}, {}>;
  25. function hasLastCheckIn(monitor: Monitor) {
  26. return monitor.environments.some(e => e.lastCheckIn);
  27. }
  28. function MonitorDetails({params, location}: Props) {
  29. const {selection} = usePageFilters();
  30. const organization = useOrganization();
  31. const queryClient = useQueryClient();
  32. // TODO(epurkhiser): For now we just use the fist environment OR production
  33. // if we have all environments selected
  34. const environment = selection.environments[0];
  35. const queryKey = [
  36. `/organizations/${organization.slug}/monitors/${params.monitorSlug}/`,
  37. {query: {...location.query, environment}},
  38. ] as const;
  39. const {data: monitor} = useApiQuery<Monitor>(queryKey, {
  40. staleTime: 0,
  41. refetchOnWindowFocus: true,
  42. // Refetches while we are waiting for the user to send their first check-in
  43. refetchInterval: data => {
  44. if (!data) {
  45. return false;
  46. }
  47. const [monitorData] = data;
  48. return hasLastCheckIn(monitorData) ? false : DEFAULT_POLL_INTERVAL_MS;
  49. },
  50. });
  51. function onUpdate(data: Monitor) {
  52. const updatedMonitor = {
  53. ...data,
  54. // TODO(davidenwang): This is a bit of a hack, due to the PUT request
  55. // which pauses/unpauses a monitor not returning monitor environments
  56. // we should reuse the environments retrieved from the initial request
  57. environments: monitor?.environments,
  58. };
  59. setApiQueryData(queryClient, queryKey, updatedMonitor);
  60. }
  61. if (!monitor) {
  62. return (
  63. <Layout.Page>
  64. <LoadingIndicator />
  65. </Layout.Page>
  66. );
  67. }
  68. const envsSortedByLastCheck = sortBy(monitor.environments, e => e.lastCheckIn);
  69. return (
  70. <SentryDocumentTitle title={`Crons — ${monitor.name}`}>
  71. <Layout.Page>
  72. <MonitorHeader monitor={monitor} orgId={organization.slug} onUpdate={onUpdate} />
  73. <Layout.Body>
  74. <Layout.Main>
  75. <StyledPageFilterBar condensed>
  76. <DatePageFilter />
  77. <EnvironmentPageFilter />
  78. </StyledPageFilterBar>
  79. {!hasLastCheckIn(monitor) ? (
  80. <MonitorOnboarding monitor={monitor} />
  81. ) : (
  82. <Fragment>
  83. <CronDetailsTimeline organization={organization} monitor={monitor} />
  84. <MonitorStats
  85. orgSlug={organization.slug}
  86. monitor={monitor}
  87. monitorEnvs={monitor.environments}
  88. />
  89. <MonitorIssues
  90. orgSlug={organization.slug}
  91. monitor={monitor}
  92. monitorEnvs={monitor.environments}
  93. />
  94. <MonitorCheckIns
  95. orgSlug={organization.slug}
  96. monitor={monitor}
  97. monitorEnvs={monitor.environments}
  98. />
  99. </Fragment>
  100. )}
  101. </Layout.Main>
  102. <Layout.Side>
  103. <DetailsSidebar
  104. monitorEnv={envsSortedByLastCheck[envsSortedByLastCheck.length - 1]}
  105. monitor={monitor}
  106. />
  107. </Layout.Side>
  108. </Layout.Body>
  109. </Layout.Page>
  110. </SentryDocumentTitle>
  111. );
  112. }
  113. const StyledPageFilterBar = styled(PageFilterBar)`
  114. margin-bottom: ${space(2)};
  115. `;
  116. export default MonitorDetails;