datasetSelector.tsx 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import FeatureBadge from 'sentry/components/badge/featureBadge';
  4. import RadioGroup, {type RadioOption} from 'sentry/components/forms/controls/radioGroup';
  5. import ExternalLink from 'sentry/components/links/externalLink';
  6. import {Tooltip} from 'sentry/components/tooltip';
  7. import {t, tct} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import useOrganization from 'sentry/utils/useOrganization';
  10. import {WidgetType} from 'sentry/views/dashboards/types';
  11. import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
  12. import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState';
  13. function WidgetBuilderDatasetSelector() {
  14. const organization = useOrganization();
  15. const {state, dispatch} = useWidgetBuilderContext();
  16. const datasetChoices: RadioOption<WidgetType>[] = [];
  17. datasetChoices.push([WidgetType.ERRORS, t('Errors')]);
  18. datasetChoices.push([WidgetType.TRANSACTIONS, t('Transactions')]);
  19. if (organization.features.includes('dashboards-eap')) {
  20. datasetChoices.push([
  21. WidgetType.SPANS,
  22. <FeatureBadgeAlignmentWrapper aria-label={t('Spans')} key={'dataset-choice-spans'}>
  23. {t('Spans')} <FeatureBadge type="alpha" />
  24. </FeatureBadgeAlignmentWrapper>,
  25. ]);
  26. }
  27. datasetChoices.push([WidgetType.ISSUE, t('Issues')]);
  28. datasetChoices.push([WidgetType.RELEASE, t('Releases')]);
  29. return (
  30. <Fragment>
  31. <Tooltip
  32. title={tct(
  33. `This reflects the type of information you want to use. To learn more, [link: read the docs].`,
  34. {
  35. link: (
  36. <ExternalLink href="https://docs.sentry.io/product/dashboards/widget-builder/#choose-your-dataset" />
  37. ),
  38. }
  39. )}
  40. position="auto"
  41. delay={200}
  42. isHoverable
  43. >
  44. <Header>{t('Dataset')}</Header>
  45. </Tooltip>
  46. <DatasetChoices
  47. label={t('Dataset')}
  48. value={state.dataset ?? WidgetType.ERRORS}
  49. choices={datasetChoices}
  50. onChange={(newValue: WidgetType) =>
  51. dispatch({
  52. type: BuilderStateAction.SET_DATASET,
  53. payload: newValue,
  54. })
  55. }
  56. />
  57. </Fragment>
  58. );
  59. }
  60. export default WidgetBuilderDatasetSelector;
  61. const DatasetChoices = styled(RadioGroup<WidgetType>)`
  62. display: flex;
  63. flex-direction: row;
  64. flex-wrap: wrap;
  65. gap: ${space(2)};
  66. `;
  67. const FeatureBadgeAlignmentWrapper = styled('div')`
  68. ${FeatureBadge} {
  69. position: relative;
  70. top: -1px;
  71. }
  72. `;
  73. const Header = styled('h6')`
  74. font-size: ${p => p.theme.fontSizeLarge};
  75. margin-bottom: ${space(2)};
  76. border-bottom: 1px dotted ${p => p.theme.textColor};
  77. `;