detailsSidebar.tsx 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {SectionHeading} from 'sentry/components/charts/styles';
  4. import {CodeSnippet} from 'sentry/components/codeSnippet';
  5. import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
  6. import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
  7. import ExternalLink from 'sentry/components/links/externalLink';
  8. import QuestionTooltip from 'sentry/components/questionTooltip';
  9. import Text from 'sentry/components/text';
  10. import {t, tct} from 'sentry/locale';
  11. import {space} from 'sentry/styles/space';
  12. import getDuration from 'sentry/utils/duration/getDuration';
  13. import {CheckIndicator} from 'sentry/views/alerts/rules/uptime/checkIndicator';
  14. import {CheckStatus, type UptimeRule} from 'sentry/views/alerts/rules/uptime/types';
  15. import {statusToText} from 'sentry/views/insights/uptime/timelineConfig';
  16. interface UptimeDetailsSidebarProps {
  17. showMissedLegend: boolean;
  18. uptimeRule: UptimeRule;
  19. }
  20. export function UptimeDetailsSidebar({
  21. uptimeRule,
  22. showMissedLegend,
  23. }: UptimeDetailsSidebarProps) {
  24. return (
  25. <Fragment>
  26. <MonitorUrlContainer>
  27. <SectionHeading>{t('Checked URL')}</SectionHeading>
  28. <CodeSnippet
  29. hideCopyButton
  30. >{`${uptimeRule.method} ${uptimeRule.url}`}</CodeSnippet>
  31. </MonitorUrlContainer>
  32. <SectionHeading>{t('Legend')}</SectionHeading>
  33. <CheckLegend>
  34. <CheckLegendItem>
  35. <CheckIndicator status={CheckStatus.SUCCESS} />
  36. <LegendText>
  37. {statusToText[CheckStatus.SUCCESS]}
  38. <QuestionTooltip
  39. isHoverable
  40. size="sm"
  41. title={tct(
  42. 'A check status is considered uptime when it meets the uptime check criteria. [link:Learn more].',
  43. {
  44. link: (
  45. <ExternalLink href="https://docs.sentry.io/product/alerts/uptime-monitoring/#uptime-check-criteria" />
  46. ),
  47. }
  48. )}
  49. />
  50. </LegendText>
  51. </CheckLegendItem>
  52. <CheckLegendItem>
  53. <CheckIndicator status={CheckStatus.FAILURE} />
  54. <LegendText>
  55. {statusToText[CheckStatus.FAILURE]}
  56. <QuestionTooltip
  57. isHoverable
  58. size="sm"
  59. title={tct(
  60. 'A check status is considered as a failure when a check fails but hasn’t recorded three consecutive failures needed for Downtime. [link:Learn more].',
  61. {
  62. link: (
  63. <ExternalLink href="https://docs.sentry.io/product/alerts/uptime-monitoring/#uptime-check-failures" />
  64. ),
  65. }
  66. )}
  67. />
  68. </LegendText>
  69. </CheckLegendItem>
  70. <CheckLegendItem>
  71. <CheckIndicator status={CheckStatus.FAILURE_INCIDENT} />
  72. <LegendText>
  73. {statusToText[CheckStatus.FAILURE_INCIDENT]}
  74. <QuestionTooltip
  75. isHoverable
  76. size="sm"
  77. title={tct(
  78. 'A check status is considered downtime when it fails 3 consecutive times, meeting the Downtime threshold. [link:Learn more].',
  79. {
  80. link: (
  81. <ExternalLink href="https://docs.sentry.io/product/alerts/uptime-monitoring/#uptime-check-failures" />
  82. ),
  83. }
  84. )}
  85. />
  86. </LegendText>
  87. </CheckLegendItem>
  88. {showMissedLegend && (
  89. <CheckLegendItem>
  90. <CheckIndicator status={CheckStatus.MISSED_WINDOW} />
  91. <LegendText>
  92. {statusToText[CheckStatus.MISSED_WINDOW]}
  93. <QuestionTooltip
  94. isHoverable
  95. size="sm"
  96. title={tct(
  97. 'A check status is unknown when Sentry is unable to execute an uptime check at the scheduled time. [link:Learn more].',
  98. {
  99. link: (
  100. <ExternalLink href="https://docs.sentry.io/product/alerts/uptime-monitoring/#uptime-check-failures" />
  101. ),
  102. }
  103. )}
  104. />
  105. </LegendText>
  106. </CheckLegendItem>
  107. )}
  108. </CheckLegend>
  109. <SectionHeading>{t('Configuration')}</SectionHeading>
  110. <KeyValueTable>
  111. <KeyValueTableRow
  112. keyName={t('Check Interval')}
  113. value={t('Every %s', getDuration(uptimeRule.intervalSeconds))}
  114. />
  115. <KeyValueTableRow
  116. keyName={t('Timeout')}
  117. value={t('After %s', getDuration(uptimeRule.timeoutMs / 1000, 2))}
  118. />
  119. <KeyValueTableRow keyName={t('Environment')} value={uptimeRule.environment} />
  120. <KeyValueTableRow
  121. keyName={t('Owner')}
  122. value={
  123. uptimeRule.owner ? <ActorAvatar actor={uptimeRule.owner} /> : t('Unassigned')
  124. }
  125. />
  126. </KeyValueTable>
  127. </Fragment>
  128. );
  129. }
  130. const CheckLegend = styled('ul')`
  131. display: grid;
  132. grid-template-columns: max-content 1fr;
  133. margin-bottom: ${space(2)};
  134. padding: 0;
  135. gap: ${space(1)};
  136. `;
  137. const CheckLegendItem = styled('li')`
  138. display: grid;
  139. grid-template-columns: subgrid;
  140. align-items: center;
  141. grid-column: 1 / -1;
  142. `;
  143. const LegendText = styled(Text)`
  144. display: flex;
  145. gap: ${space(1)};
  146. align-items: center;
  147. `;
  148. const MonitorUrlContainer = styled('div')`
  149. margin-bottom: ${space(2)};
  150. h4 {
  151. margin-top: 0;
  152. }
  153. `;