spanDescriptionCell.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import styled from '@emotion/styled';
  2. import {Hovercard} from 'sentry/components/hovercard';
  3. import {FullQueryDescription} from 'sentry/views/starfish/components/fullQueryDescription';
  4. import {SpanDescriptionLink} from 'sentry/views/starfish/components/spanDescriptionLink';
  5. import {ModuleName} from 'sentry/views/starfish/types';
  6. import {SQLishFormatter} from 'sentry/views/starfish/utils/sqlish/SQLishFormatter';
  7. const formatter = new SQLishFormatter();
  8. interface Props {
  9. moduleName: ModuleName;
  10. projectId: number;
  11. description?: string;
  12. endpoint?: string;
  13. endpointMethod?: string;
  14. group?: string;
  15. }
  16. export function SpanDescriptionCell({
  17. description,
  18. group,
  19. moduleName,
  20. endpoint,
  21. endpointMethod,
  22. projectId,
  23. }: Props) {
  24. if (!description) {
  25. return NULL_DESCRIPTION;
  26. }
  27. const descriptionLink = (
  28. <SpanDescriptionLink
  29. group={group}
  30. projectId={projectId}
  31. endpoint={endpoint}
  32. endpointMethod={endpointMethod}
  33. description={
  34. moduleName === ModuleName.DB ? formatter.toSimpleMarkup(description) : description
  35. }
  36. />
  37. );
  38. return ModuleName.DB ? (
  39. <DescriptionWrapper>
  40. <WiderHovercard
  41. position="right"
  42. body={<FullQueryDescription group={group} shortDescription={description} />}
  43. >
  44. {descriptionLink}
  45. </WiderHovercard>
  46. </DescriptionWrapper>
  47. ) : (
  48. descriptionLink
  49. );
  50. }
  51. const NULL_DESCRIPTION = <span>&lt;null&gt;</span>;
  52. const WiderHovercard = styled(
  53. ({
  54. children,
  55. className,
  56. containerClassName,
  57. ...props
  58. }: React.ComponentProps<typeof Hovercard>) => (
  59. <Hovercard
  60. className={(className ?? '') + ' wider'}
  61. containerClassName={(containerClassName ?? '') + ' inline-flex'}
  62. {...props}
  63. >
  64. {children}
  65. </Hovercard>
  66. )
  67. )`
  68. &.wider {
  69. width: auto;
  70. max-width: 500px;
  71. }
  72. `;
  73. const DescriptionWrapper = styled('div')`
  74. .inline-flex {
  75. display: inline-flex;
  76. }
  77. `;