deploys.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Button} from 'sentry/components/button';
  4. import TextOverflow from 'sentry/components/textOverflow';
  5. import TimeSince from 'sentry/components/timeSince';
  6. import Version from 'sentry/components/version';
  7. import {IconReleases} from 'sentry/icons';
  8. import {t} from 'sentry/locale';
  9. import {space} from 'sentry/styles/space';
  10. import {Deploy as DeployType, Project} from 'sentry/types';
  11. import getDynamicText from 'sentry/utils/getDynamicText';
  12. const DEPLOY_COUNT = 2;
  13. type Props = {
  14. project: Project;
  15. shorten?: boolean;
  16. };
  17. function Deploys({project, shorten}: Props) {
  18. const flattenedDeploys = Object.entries(project.latestDeploys || {}).map(
  19. ([environment, value]): Pick<
  20. DeployType,
  21. 'version' | 'dateFinished' | 'environment'
  22. > => ({environment, ...value})
  23. );
  24. const deploys = (flattenedDeploys || [])
  25. .sort(
  26. (a, b) => new Date(b.dateFinished).getTime() - new Date(a.dateFinished).getTime()
  27. )
  28. .slice(0, DEPLOY_COUNT);
  29. if (!deploys.length) {
  30. return <NoDeploys />;
  31. }
  32. return (
  33. <DeployRows>
  34. {deploys.map(deploy => (
  35. <Deploy
  36. key={`${deploy.environment}-${deploy.version}`}
  37. deploy={deploy}
  38. project={project}
  39. shorten={shorten}
  40. />
  41. ))}
  42. </DeployRows>
  43. );
  44. }
  45. export default Deploys;
  46. type DeployProps = Props & {
  47. deploy: Pick<DeployType, 'version' | 'dateFinished' | 'environment'>;
  48. };
  49. function Deploy({deploy, project, shorten}: DeployProps) {
  50. return (
  51. <Fragment>
  52. <IconReleases size="sm" />
  53. <TextOverflow>
  54. <Environment>{deploy.environment}</Environment>
  55. <Version
  56. version={deploy.version}
  57. projectId={project.id}
  58. tooltipRawVersion
  59. truncate
  60. />
  61. </TextOverflow>
  62. <DeployTime>
  63. {getDynamicText({
  64. fixed: '3 hours ago',
  65. value: (
  66. <TimeSince
  67. date={deploy.dateFinished}
  68. unitStyle={shorten ? 'short' : 'human'}
  69. />
  70. ),
  71. })}
  72. </DeployTime>
  73. </Fragment>
  74. );
  75. }
  76. function NoDeploys() {
  77. return (
  78. <GetStarted>
  79. <Button size="sm" href="https://docs.sentry.io/product/releases/" external>
  80. {t('Track Deploys')}
  81. </Button>
  82. </GetStarted>
  83. );
  84. }
  85. const DeployContainer = styled('div')`
  86. padding: ${space(2)};
  87. height: 115px;
  88. `;
  89. const DeployRows = styled(DeployContainer)`
  90. display: grid;
  91. grid-template-columns: 30px 1fr 1fr;
  92. grid-template-rows: auto;
  93. grid-column-gap: ${space(1)};
  94. grid-row-gap: ${space(1)};
  95. font-size: ${p => p.theme.fontSizeMedium};
  96. line-height: 1.2;
  97. `;
  98. const Environment = styled('div')`
  99. color: ${p => p.theme.textColor};
  100. margin: 0;
  101. `;
  102. const DeployTime = styled('div')`
  103. color: ${p => p.theme.gray300};
  104. overflow: hidden;
  105. text-align: right;
  106. text-overflow: ellipsis;
  107. `;
  108. const GetStarted = styled(DeployContainer)`
  109. display: flex;
  110. align-items: center;
  111. justify-content: center;
  112. `;
  113. export {DeployRows, GetStarted, TextOverflow};