diff --git a/static/app/views/dashboards/utils.tsx b/static/app/views/dashboards/utils.tsx index 81b3659a9d9685..1abb16db4e3167 100644 --- a/static/app/views/dashboards/utils.tsx +++ b/static/app/views/dashboards/utils.tsx @@ -66,7 +66,7 @@ import { WidgetType, } from 'sentry/views/dashboards/types'; -import ThresholdsHoverWrapper from './widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper'; +import {ThresholdsHoverWrapper} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper'; import type {ThresholdsConfig} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsStep'; import {ThresholdMaxKeys} from './widgetBuilder/buildSteps/thresholdsStep/thresholdsStep'; @@ -188,7 +188,7 @@ export function getColoredWidgetIndicator( } return ( - + ); diff --git a/static/app/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper.tsx b/static/app/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper.tsx index 75d46fed8dd15f..3c92c012fa7ddb 100644 --- a/static/app/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper.tsx +++ b/static/app/views/dashboards/widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper.tsx @@ -5,28 +5,23 @@ import CircleIndicator from 'sentry/components/circleIndicator'; import {Hovercard} from 'sentry/components/hovercard'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; -import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery'; import theme from 'sentry/utils/theme'; import type {ThresholdsConfig} from './thresholdsStep'; type Props = { children: React.ReactNode; - tableData: TableDataWithTitle[]; thresholds: ThresholdsConfig; + type?: string; }; -function ThresholdsHoverWrapper({children, thresholds, tableData}: Props) { +export function ThresholdsHoverWrapper({children, thresholds, type}: Props) { const { unit, max_values: {max1, max2}, } = thresholds; - const tableMeta = {...tableData[0].meta}; - const fields = Object.keys(tableMeta); - const field = fields[0]; - const dataType = tableMeta[field]; const formattedUnit = - unit && (dataType === 'duration' ? `${unit}s` : `/${unit.split('/')[1]}`); + unit && (type === 'duration' ? `${unit}s` : `/${unit.split('/')[1]}`); const title = unit ? t(`Thresholds in %s`, formattedUnit) : t('Thresholds'); const notSetMsg = t('Not set'); @@ -87,5 +82,3 @@ const ContextTitle = styled('h6')` const StyledIndicator = styled(CircleIndicator)` margin-right: ${space(1)}; `; - -export default ThresholdsHoverWrapper; diff --git a/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx b/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx index 68b4f1032c84ad..e62cdf6a966138 100644 --- a/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx +++ b/static/app/views/dashboards/widgets/bigNumberWidget/bigNumberWidget.spec.tsx @@ -218,7 +218,7 @@ describe('BigNumberWidget', () => { }); describe('Thresholds', () => { - it('Evaluates the current value against a threshold', () => { + it('Evaluates the current value against a threshold', async () => { render( { ); expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'meh'); + + await userEvent.hover(screen.getByRole('status')); + expect(await screen.findByText('Thresholds in /second')).toBeInTheDocument(); }); it('Normalizes the units', () => { diff --git a/static/app/views/dashboards/widgets/bigNumberWidget/thresholdsIndicator.tsx b/static/app/views/dashboards/widgets/bigNumberWidget/thresholdsIndicator.tsx index 3e3413937d3fc1..1ee6b0980266c8 100644 --- a/static/app/views/dashboards/widgets/bigNumberWidget/thresholdsIndicator.tsx +++ b/static/app/views/dashboards/widgets/bigNumberWidget/thresholdsIndicator.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import type {Polarity} from 'sentry/components/percentChange'; import {normalizeUnit} from '../../utils'; +import {ThresholdsHoverWrapper} from '../../widgetBuilder/buildSteps/thresholdsStep/thresholdsHoverWrapper'; import type {Thresholds} from '../common/types'; interface ThresholdsIndicatorProps { @@ -39,7 +40,11 @@ export function ThresholdsIndicator({ const colorName = COLOR_NAME_FOR_STATE[state]; - return ; + return ( + + + + ); } const Circle = styled('div')<{color: string}>`