scratchpad.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import {useCallback, useLayoutEffect} from 'react';
  2. import styled from '@emotion/styled';
  3. import * as echarts from 'echarts/core';
  4. import {Button} from 'sentry/components/button';
  5. import Panel from 'sentry/components/panels/panel';
  6. import {IconAdd} from 'sentry/icons';
  7. import {t} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import {trackAnalytics} from 'sentry/utils/analytics';
  10. import {MetricWidgetQueryParams} from 'sentry/utils/metrics';
  11. import useOrganization from 'sentry/utils/useOrganization';
  12. import usePageFilters from 'sentry/utils/usePageFilters';
  13. import {DDM_CHART_GROUP, MIN_WIDGET_WIDTH} from 'sentry/views/ddm/constants';
  14. import {useDDMContext} from 'sentry/views/ddm/context';
  15. import {MetricWidget} from './widget';
  16. export function MetricScratchpad() {
  17. const {
  18. setSelectedWidgetIndex,
  19. selectedWidgetIndex,
  20. widgets,
  21. updateWidget,
  22. addWidget,
  23. focusArea,
  24. addFocusArea,
  25. removeFocusArea,
  26. } = useDDMContext();
  27. const {selection} = usePageFilters();
  28. const organization = useOrganization();
  29. // Make sure all charts are connected to the same group whenever the widgets definition changes
  30. useLayoutEffect(() => {
  31. echarts.connect(DDM_CHART_GROUP);
  32. }, [widgets]);
  33. const handleChange = useCallback(
  34. (index: number, widget: Partial<MetricWidgetQueryParams>) => {
  35. updateWidget(index, widget);
  36. },
  37. [updateWidget]
  38. );
  39. const hasEmptyWidget = widgets.length === 0 || widgets.some(widget => !widget.mri);
  40. const Wrapper =
  41. widgets.length === 1 ? StyledSingleWidgetWrapper : StyledMetricDashboard;
  42. return (
  43. <Wrapper>
  44. {widgets.map((widget, index) => (
  45. <MetricWidget
  46. key={index}
  47. index={index}
  48. onSelect={setSelectedWidgetIndex}
  49. isSelected={selectedWidgetIndex === index}
  50. hasSiblings={widgets.length > 1}
  51. onChange={handleChange}
  52. widget={widget}
  53. datetime={selection.datetime}
  54. projects={selection.projects}
  55. environments={selection.environments}
  56. addFocusArea={addFocusArea}
  57. removeFocusArea={removeFocusArea}
  58. focusArea={focusArea}
  59. />
  60. ))}
  61. <AddWidgetPanel
  62. disabled={hasEmptyWidget}
  63. onClick={
  64. !hasEmptyWidget
  65. ? () => {
  66. trackAnalytics('ddm.widget.add', {
  67. organization,
  68. });
  69. addWidget();
  70. }
  71. : undefined
  72. }
  73. >
  74. <Button disabled={hasEmptyWidget} icon={<IconAdd isCircled />}>
  75. {t('Add widget')}
  76. </Button>
  77. </AddWidgetPanel>
  78. </Wrapper>
  79. );
  80. }
  81. const StyledMetricDashboard = styled('div')`
  82. display: grid;
  83. grid-template-columns: repeat(3, minmax(${MIN_WIDGET_WIDTH}px, 1fr));
  84. gap: ${space(2)};
  85. @media (max-width: ${props => props.theme.breakpoints.xxlarge}) {
  86. grid-template-columns: repeat(2, minmax(${MIN_WIDGET_WIDTH}px, 1fr));
  87. }
  88. @media (max-width: ${props => props.theme.breakpoints.xlarge}) {
  89. grid-template-columns: repeat(1, minmax(${MIN_WIDGET_WIDTH}px, 1fr));
  90. }
  91. grid-auto-rows: auto;
  92. `;
  93. const StyledSingleWidgetWrapper = styled('div')`
  94. display: grid;
  95. grid-template-columns: minmax(${MIN_WIDGET_WIDTH}px, 90%) minmax(180px, 10%);
  96. @media (max-width: ${props => props.theme.breakpoints.xlarge}) {
  97. grid-template-columns: repeat(1, minmax(${MIN_WIDGET_WIDTH}px, 1fr));
  98. }
  99. gap: ${space(2)};
  100. grid-auto-rows: auto;
  101. `;
  102. const AddWidgetPanel = styled(Panel)<{disabled: boolean}>`
  103. height: 100%;
  104. margin-bottom: 0;
  105. padding: ${space(4)};
  106. font-size: ${p => p.theme.fontSizeExtraLarge};
  107. display: flex;
  108. justify-content: center;
  109. align-items: center;
  110. border: 1px dashed ${p => (p.disabled ? p.theme.disabledBorder : p.theme.border)};
  111. ${p =>
  112. !p.disabled &&
  113. `
  114. &:hover {
  115. background-color: ${p.theme.backgroundSecondary};
  116. cursor: pointer;
  117. }
  118. `}
  119. `;