Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import {
import {SectionLabel} from 'sentry/views/detectors/components/forms/sectionLabel';
import {useMetricOptions} from 'sentry/views/explore/hooks/useMetricOptions';
import {NONE_UNIT, OPTIONS_BY_TYPE} from 'sentry/views/explore/metrics/constants';
import {useHasMetricUnitsUI} from 'sentry/views/explore/metrics/hooks/useHasMetricUnitsUI';
import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
import {MetricTypeBadge} from 'sentry/views/explore/metrics/metricToolbar/metricOptionLabel';
import {parseMetricAggregate} from 'sentry/views/explore/metrics/parseMetricsAggregate';
Expand Down Expand Up @@ -52,7 +51,6 @@ interface MetricSelectOption extends SelectOption<string> {
*/
export function MetricsVisualize() {
const formContext = useContext(FormContext);
const hasMetricUnitsUI = useHasMetricUnitsUI();
const aggregateFunction = useMetricDetectorFormField(
METRIC_DETECTOR_FORM_FIELDS.aggregateFunction
);
Expand All @@ -72,32 +70,24 @@ export function MetricsVisualize() {
environments: environment ? [environment] : undefined,
});

const metricSelectValue = makeMetricSelectValue(
hasMetricUnitsUI ? traceMetric : {name: traceMetric.name, type: traceMetric.type}
);
const metricSelectValue = makeMetricSelectValue(traceMetric);
const optionFromTraceMetric: MetricSelectOption = useMemo(
() => ({
label: traceMetric.name || t('Select an application metric'),
value: metricSelectValue,
metricType: traceMetric.type as TraceMetricTypeValue,
metricName: traceMetric.name,
metricUnit: hasMetricUnitsUI ? (traceMetric.unit ?? NONE_UNIT) : undefined,
metricUnit: traceMetric.unit ?? NONE_UNIT,
trailingItems: (
<Fragment>
<MetricTypeBadge metricType={traceMetric.type as TraceMetricTypeValue} />
{hasDisplayMetricUnit(hasMetricUnitsUI, traceMetric.unit) ? (
{hasDisplayMetricUnit(traceMetric.unit) ? (
<Tag variant="promotion">{traceMetric.unit}</Tag>
) : null}
</Fragment>
),
}),
[
metricSelectValue,
traceMetric.name,
traceMetric.type,
traceMetric.unit,
hasMetricUnitsUI,
]
[metricSelectValue, traceMetric.name, traceMetric.type, traceMetric.unit]
);

const metricOptions = useMemo((): MetricSelectOption[] => {
Expand All @@ -113,22 +103,15 @@ export function MetricsVisualize() {
value: makeMetricSelectValue({
name: option[TraceMetricKnownFieldKey.METRIC_NAME],
type: option[TraceMetricKnownFieldKey.METRIC_TYPE],
unit: hasMetricUnitsUI
? (option[TraceMetricKnownFieldKey.METRIC_UNIT] ?? NONE_UNIT)
: undefined,
unit: option[TraceMetricKnownFieldKey.METRIC_UNIT] ?? NONE_UNIT,
}),
metricType: option[TraceMetricKnownFieldKey.METRIC_TYPE],
metricName: option[TraceMetricKnownFieldKey.METRIC_NAME],
metricUnit: hasMetricUnitsUI
? (option[TraceMetricKnownFieldKey.METRIC_UNIT] ?? NONE_UNIT)
: undefined,
metricUnit: option[TraceMetricKnownFieldKey.METRIC_UNIT] ?? NONE_UNIT,
trailingItems: (
<Fragment>
<MetricTypeBadge metricType={option[TraceMetricKnownFieldKey.METRIC_TYPE]} />
{hasDisplayMetricUnit(
hasMetricUnitsUI,
option[TraceMetricKnownFieldKey.METRIC_UNIT]
) ? (
{hasDisplayMetricUnit(option[TraceMetricKnownFieldKey.METRIC_UNIT]) ? (
<Tag variant="promotion">
{option[TraceMetricKnownFieldKey.METRIC_UNIT]}
</Tag>
Expand All @@ -137,7 +120,7 @@ export function MetricsVisualize() {
),
})) ?? []),
];
}, [metricOptionsData, optionFromTraceMetric, traceMetric.name, hasMetricUnitsUI]);
}, [metricOptionsData, optionFromTraceMetric, traceMetric.name]);

const debouncedSetSearch = useMemo(
() =>
Expand Down Expand Up @@ -179,7 +162,7 @@ export function MetricsVisualize() {
const newMetric: TraceMetric = {
name: option.metricName,
type: option.metricType,
unit: hasMetricUnitsUI ? (option.metricUnit ?? NONE_UNIT) : undefined,
unit: option.metricUnit ?? NONE_UNIT,
};
const newMetricType = option.metricType?.toLowerCase() ?? '';
const validOperations = OPTIONS_BY_TYPE[newMetricType] ?? [];
Expand All @@ -204,12 +187,12 @@ export function MetricsVisualize() {
traceMetric: {
name: firstMetric.metricName,
type: firstMetric.metricType,
unit: hasMetricUnitsUI ? (firstMetric.metricUnit ?? NONE_UNIT) : undefined,
unit: firstMetric.metricUnit ?? NONE_UNIT,
},
})
);
}
}, [metricOptions, updateFormAggregate, traceMetric.name, hasMetricUnitsUI]);
}, [metricOptions, updateFormAggregate, traceMetric.name]);

const previousOptions = usePrevious(metricOptions);
const hasNoMetrics = isMetricOptionsEmpty && !search;
Expand Down
2 changes: 2 additions & 0 deletions static/app/views/explore/hooks/useMetricOptions.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ describe('useMetricOptions', () => {
'metric.type',
'count(metric.name)',
'max(timestamp_precise)',
'metric.unit',
],
referrer: 'api.explore.metric-options',
}),
Expand Down Expand Up @@ -117,6 +118,7 @@ describe('useMetricOptions', () => {
'metric.type',
'count(metric.name)',
'max(timestamp_precise)',
'metric.unit',
],
referrer: 'api.explore.metric-options',
statsPeriod: '3d',
Expand Down
11 changes: 2 additions & 9 deletions static/app/views/explore/hooks/useMetricOptions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {defined} from 'sentry/utils/defined';
import {DiscoverDatasets} from 'sentry/utils/discover/types';
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
import {useOrganization} from 'sentry/utils/useOrganization';
import {useHasMetricUnitsUI} from 'sentry/views/explore/metrics/hooks/useHasMetricUnitsUI';
import {
TraceMetricKnownFieldKey,
type TraceMetricEventsResult,
Expand All @@ -30,19 +29,15 @@ function metricOptionsQueryKey({
datetime,
search,
environments,
hasMetricUnitsUI,
}: UseMetricOptionsProps & {hasMetricUnitsUI?: boolean} = {}) {
}: UseMetricOptionsProps = {}) {
const queryFields = [
TraceMetricKnownFieldKey.METRIC_NAME,
TraceMetricKnownFieldKey.METRIC_TYPE,
`count(${TraceMetricKnownFieldKey.METRIC_NAME})`,
`max(${TraceMetricKnownFieldKey.TIMESTAMP_PRECISE})`,
TraceMetricKnownFieldKey.METRIC_UNIT,
];

if (hasMetricUnitsUI) {
queryFields.push(TraceMetricKnownFieldKey.METRIC_UNIT);
}

let searchValue: MutableSearch | undefined;
if (search) {
searchValue = new MutableSearch('');
Expand Down Expand Up @@ -90,7 +85,6 @@ export function useMetricOptions({
}: UseMetricOptionsProps = {}) {
const organization = useOrganization();
const {selection} = usePageFilters();
const hasMetricUnitsUI = useHasMetricUnitsUI();

const {
data: result,
Expand All @@ -103,7 +97,6 @@ export function useMetricOptions({
projectIds: projectIds ?? selection.projects,
datetime: datetime ?? selection.datetime,
environments: environments ?? selection.environments,
hasMetricUnitsUI,
}),

refetchOnWindowFocus: false,
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,7 @@ import {

const METRIC_ATTRIBUTES_DEBOUNCE_DURATION = 200;

export function MetricDetailPanel({
metric,
hasMetricUnitsUI,
}: {
hasMetricUnitsUI: boolean;
metric: MetricSelectorOption | null;
}) {
export function MetricDetailPanel({metric}: {metric: MetricSelectorOption | null}) {
if (!metric) {
return (
<Flex align="center" justify="center" flex="1">
Expand All @@ -46,7 +40,7 @@ export function MetricDetailPanel({
</Text>
<MetricTypeBadge metricType={metric.metricType} />
</Flex>
{hasDisplayMetricUnit(hasMetricUnitsUI, metric.metricUnit) ? (
{hasDisplayMetricUnit(metric.metricUnit) ? (
<Flex gap="xs" align="center">
<Text variant="muted" size="md">
{t('Unit')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -565,26 +565,11 @@ describe('MetricSelector', () => {
});
});

it('does not show unit badges without tracemetrics-units-ui feature', async () => {
it('shows unit badges', async () => {
render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
organization,
});

await userEvent.click(screen.getByRole('button', {name: 'bar'}));
await screen.findByRole('option', {name: 'bar'});

expect(screen.queryByText('millisecond')).not.toBeInTheDocument();
expect(screen.queryByText('megabyte')).not.toBeInTheDocument();
});

it('shows unit badges when tracemetrics-units-ui feature is enabled', async () => {
render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
organization: {
...organization,
features: [...organization.features, 'tracemetrics-units-ui'],
},
});

await userEvent.click(screen.getByRole('button', {name: 'bar'}));
await screen.findByRole('listbox');

Expand All @@ -593,10 +578,7 @@ describe('MetricSelector', () => {

it('does not show a unit badge when the metric unit is none', async () => {
render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
organization: {
...organization,
features: [...organization.features, 'tracemetrics-units-ui'],
},
organization,
});

await userEvent.click(screen.getByRole('button', {name: 'bar'}));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {useOverlay} from 'sentry/utils/useOverlay';
import {usePrevious} from 'sentry/utils/usePrevious';
import {useMetricOptions} from 'sentry/views/explore/hooks/useMetricOptions';
import {NONE_UNIT} from 'sentry/views/explore/metrics/constants';
import {useHasMetricUnitsUI} from 'sentry/views/explore/metrics/hooks/useHasMetricUnitsUI';
import type {TraceMetric} from 'sentry/views/explore/metrics/metricQuery';
import {MetricTypeBadge} from 'sentry/views/explore/metrics/metricToolbar/metricOptionLabel';
import {MetricDetailPanel} from 'sentry/views/explore/metrics/metricToolbar/metricSelector/metricDetailPanel';
Expand Down Expand Up @@ -69,16 +68,14 @@ function nextFrameCallback(cb: () => void) {
function MetricOptionTrailingItems({
metricType,
metricUnit,
hasMetricUnitsUI,
}: {
hasMetricUnitsUI: boolean;
metricType: TraceMetricTypeValue;
metricUnit?: string;
}) {
return (
<Fragment>
<MetricTypeBadge metricType={metricType} />
{hasDisplayMetricUnit(hasMetricUnitsUI, metricUnit) ? (
{hasDisplayMetricUnit(metricUnit) ? (
<Tag variant="promotion">{metricUnit}</Tag>
) : null}
</Fragment>
Expand Down Expand Up @@ -114,8 +111,6 @@ export function MetricSelector({
const theme = useTheme();
const triggerId = useId();

const hasMetricUnitsUI = useHasMetricUnitsUI();

const searchRef = useRef<HTMLInputElement>(null);
const listElementRef = useRef<HTMLUListElement>(null);
const scrollElementRef = useRef<HTMLDivElement>(null);
Expand Down Expand Up @@ -163,7 +158,6 @@ export function MetricSelector({
<MetricOptionTrailingItems
metricType={traceMetricType}
metricUnit={traceMetricDisplayUnit}
hasMetricUnitsUI={hasMetricUnitsUI}
/>
),
};
Expand All @@ -173,7 +167,6 @@ export function MetricSelector({
traceMetricType,
traceMetric.unit,
traceMetricDisplayUnit,
hasMetricUnitsUI,
]);

// Always show the selected metric at the top of the list so it's easy to
Expand Down Expand Up @@ -230,7 +223,6 @@ export function MetricSelector({
lastSeen,
trailingItems: () => (
<MetricOptionTrailingItems
hasMetricUnitsUI={hasMetricUnitsUI}
metricType={metricType}
metricUnit={metricUnit}
/>
Expand Down Expand Up @@ -295,7 +287,6 @@ export function MetricSelector({
traceMetric.type,
traceMetric.unit,
traceMetricSelectValue,
hasMetricUnitsUI,
]);

// Auto-select the first selectable metric when no metric is currently
Expand Down Expand Up @@ -799,7 +790,6 @@ export function MetricSelector({
>
<MetricDetailPanel
metric={highlightedOption ?? optionFromTraceMetric}
hasMetricUnitsUI={hasMetricUnitsUI}
/>
</SidePanel>
) : null}
Expand Down
9 changes: 2 additions & 7 deletions static/app/views/explore/metrics/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -135,13 +135,8 @@ export function parseTraceMetricFromQuery(query: string): {
};
}

export function hasDisplayMetricUnit(
hasMetricUnitsUI: boolean,
metricUnit?: string | null
): metricUnit is string {
return (
hasMetricUnitsUI && !!metricUnit && metricUnit !== '-' && metricUnit !== NONE_UNIT
);
export function hasDisplayMetricUnit(metricUnit?: string | null): metricUnit is string {
return !!metricUnit && metricUnit !== '-' && metricUnit !== NONE_UNIT;
}

export function makeMetricSelectValue(metric: TraceMetric): string {
Expand Down
Loading