awsLambdaFailureDetails.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import ExternalLink from 'sentry/components/links/externalLink';
  4. import {Panel, PanelItem} from 'sentry/components/panels';
  5. import {IconCheckmark, IconWarning} from 'sentry/icons';
  6. import {t, tct, tn} from 'sentry/locale';
  7. import FooterWithButtons from './components/footerWithButtons';
  8. import HeaderWithHelp from './components/headerWithHelp';
  9. type ErrorDetail = {error: string; name: string};
  10. type Props = {
  11. lambdaFunctionFailures: ErrorDetail[];
  12. successCount: number;
  13. };
  14. export default function AwsLambdaFailureDetails({
  15. lambdaFunctionFailures,
  16. successCount,
  17. }: Props) {
  18. const baseDocsUrl =
  19. 'https://docs.sentry.io/product/integrations/cloud-monitoring/aws-lambda/';
  20. return (
  21. <Fragment>
  22. <HeaderWithHelp docsUrl={baseDocsUrl} />
  23. <Wrapper>
  24. <div>
  25. <StyledCheckmark isCircled color="green300" />
  26. <h3>
  27. {tn(
  28. 'successfully updated %s function',
  29. 'successfully updated %s functions',
  30. successCount
  31. )}
  32. </h3>
  33. </div>
  34. <div>
  35. <StyledWarning color="red300" />
  36. <h3>
  37. {tn(
  38. 'Failed to update %s function',
  39. 'Failed to update %s functions',
  40. lambdaFunctionFailures.length
  41. )}
  42. </h3>
  43. <Troubleshooting>
  44. {tct('See [link:Troubleshooting Docs]', {
  45. link: <ExternalLink href={baseDocsUrl + '#troubleshooting'} />,
  46. })}
  47. </Troubleshooting>
  48. </div>
  49. <StyledPanel>{lambdaFunctionFailures.map(SingleFailure)}</StyledPanel>
  50. </Wrapper>
  51. <FooterWithButtons buttonText={t('Finish Setup')} href="?finish_pipeline=1" />
  52. </Fragment>
  53. );
  54. }
  55. function SingleFailure(errorDetail: ErrorDetail) {
  56. return (
  57. <StyledRow key={errorDetail.name}>
  58. <span>{errorDetail.name}</span>
  59. <Error>{errorDetail.error}</Error>
  60. </StyledRow>
  61. );
  62. }
  63. const Wrapper = styled('div')`
  64. padding: 100px 50px 50px 50px;
  65. `;
  66. const StyledRow = styled(PanelItem)`
  67. display: flex;
  68. flex-direction: column;
  69. `;
  70. const Error = styled('span')`
  71. color: ${p => p.theme.subText};
  72. `;
  73. const StyledPanel = styled(Panel)`
  74. overflow: hidden;
  75. margin-left: 34px;
  76. `;
  77. const Troubleshooting = styled('p')`
  78. margin-left: 34px;
  79. `;
  80. const StyledCheckmark = styled(IconCheckmark)`
  81. float: left;
  82. margin-right: 10px;
  83. height: 24px;
  84. width: 24px;
  85. `;
  86. const StyledWarning = styled(IconWarning)`
  87. float: left;
  88. margin-right: 10px;
  89. height: 24px;
  90. width: 24px;
  91. `;