querycard.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import {PureComponent} from 'react';
  2. import styled from '@emotion/styled';
  3. import {ActivityAvatar} from 'sentry/components/activity/item/avatar';
  4. import Card from 'sentry/components/card';
  5. import ErrorBoundary from 'sentry/components/errorBoundary';
  6. import Link from 'sentry/components/links/link';
  7. import {t} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import type {User} from 'sentry/types';
  10. type Props = {
  11. renderGraph: () => React.ReactNode;
  12. to: object;
  13. createdBy?: User | undefined;
  14. dateStatus?: React.ReactNode;
  15. onEventClick?: () => void;
  16. queryDetail?: string;
  17. renderContextMenu?: () => React.ReactNode;
  18. subtitle?: string;
  19. title?: string;
  20. };
  21. class QueryCard extends PureComponent<Props> {
  22. handleClick = () => {
  23. const {onEventClick} = this.props;
  24. onEventClick?.();
  25. };
  26. render() {
  27. const {
  28. title,
  29. subtitle,
  30. queryDetail,
  31. renderContextMenu,
  32. renderGraph,
  33. createdBy,
  34. dateStatus,
  35. } = this.props;
  36. return (
  37. <Link data-test-id={`card-${title}`} onClick={this.handleClick} to={this.props.to}>
  38. <StyledQueryCard interactive>
  39. <QueryCardHeader>
  40. <QueryCardContent>
  41. <QueryTitle>{title}</QueryTitle>
  42. <QueryDetail>{queryDetail}</QueryDetail>
  43. </QueryCardContent>
  44. <AvatarWrapper>
  45. {createdBy ? (
  46. <ActivityAvatar type="user" user={createdBy} size={34} />
  47. ) : (
  48. <ActivityAvatar type="system" size={34} />
  49. )}
  50. </AvatarWrapper>
  51. </QueryCardHeader>
  52. <QueryCardBody>
  53. <StyledErrorBoundary mini>{renderGraph()}</StyledErrorBoundary>
  54. </QueryCardBody>
  55. <QueryCardFooter>
  56. <DateSelected>
  57. {subtitle}
  58. {dateStatus ? (
  59. <DateStatus>
  60. {t('Edited')} {dateStatus}
  61. </DateStatus>
  62. ) : null}
  63. </DateSelected>
  64. {renderContextMenu?.()}
  65. </QueryCardFooter>
  66. </StyledQueryCard>
  67. </Link>
  68. );
  69. }
  70. }
  71. const AvatarWrapper = styled('span')`
  72. border: 3px solid ${p => p.theme.border};
  73. border-radius: 50%;
  74. height: min-content;
  75. `;
  76. const QueryCardContent = styled('div')`
  77. flex-grow: 1;
  78. overflow: hidden;
  79. margin-right: ${space(1)};
  80. `;
  81. const StyledQueryCard = styled(Card)`
  82. justify-content: space-between;
  83. height: 100%;
  84. &:focus,
  85. &:hover {
  86. top: -1px;
  87. }
  88. `;
  89. const QueryCardHeader = styled('div')`
  90. display: flex;
  91. padding: ${space(1.5)} ${space(2)};
  92. `;
  93. const QueryTitle = styled('div')`
  94. ${p => p.theme.text.cardTitle};
  95. color: ${p => p.theme.headingColor};
  96. ${p => p.theme.overflowEllipsis};
  97. font-weight: initial;
  98. `;
  99. const QueryDetail = styled('div')`
  100. font-family: ${p => p.theme.text.familyMono};
  101. font-size: ${p => p.theme.fontSizeSmall};
  102. color: ${p => p.theme.gray300};
  103. line-height: 1.5;
  104. ${p => p.theme.overflowEllipsis};
  105. `;
  106. const QueryCardBody = styled('div')`
  107. background: ${p => p.theme.backgroundSecondary};
  108. max-height: 150px;
  109. height: 100%;
  110. overflow: hidden;
  111. `;
  112. const QueryCardFooter = styled('div')`
  113. display: flex;
  114. justify-content: space-between;
  115. align-items: center;
  116. padding: ${space(1)} ${space(2)};
  117. `;
  118. const DateSelected = styled('div')`
  119. font-size: ${p => p.theme.fontSizeSmall};
  120. display: grid;
  121. grid-column-gap: ${space(1)};
  122. ${p => p.theme.overflowEllipsis};
  123. color: ${p => p.theme.textColor};
  124. `;
  125. const DateStatus = styled('span')`
  126. color: ${p => p.theme.subText};
  127. padding-left: ${space(1)};
  128. `;
  129. const StyledErrorBoundary = styled(ErrorBoundary)`
  130. margin-bottom: 100px;
  131. `;
  132. export default QueryCard;