resolutionSelector.tsx 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import {useCallback} from 'react';
  2. import styled from '@emotion/styled';
  3. import {SegmentedControl} from 'sentry/components/segmentedControl';
  4. import {t} from 'sentry/locale';
  5. import {space} from 'sentry/styles/space';
  6. import useRouter from 'sentry/utils/useRouter';
  7. import type {TimeWindow} from 'sentry/views/monitors/components/overviewTimeline/types';
  8. interface Props {
  9. className?: string;
  10. }
  11. export function ResolutionSelector({className}: Props) {
  12. const {replace, location} = useRouter();
  13. const handleResolutionChange = useCallback(
  14. (value: TimeWindow) => {
  15. replace({...location, query: {...location.query, timeWindow: value}});
  16. },
  17. [location, replace]
  18. );
  19. const timeWindow: TimeWindow = location.query?.timeWindow ?? '24h';
  20. return (
  21. <ListFilters className={className}>
  22. <SegmentedControl<TimeWindow>
  23. value={timeWindow}
  24. onChange={handleResolutionChange}
  25. size="xs"
  26. aria-label={t('Time Scale')}
  27. >
  28. <SegmentedControl.Item key="1h">{t('Hour')}</SegmentedControl.Item>
  29. <SegmentedControl.Item key="24h">{t('Day')}</SegmentedControl.Item>
  30. <SegmentedControl.Item key="7d">{t('Week')}</SegmentedControl.Item>
  31. <SegmentedControl.Item key="30d">{t('Month')}</SegmentedControl.Item>
  32. </SegmentedControl>
  33. </ListFilters>
  34. );
  35. }
  36. const ListFilters = styled('div')`
  37. display: flex;
  38. gap: ${space(1)};
  39. `;