diff --git a/static/app/views/explore/components/attributeDetails.tsx b/static/app/views/explore/components/attributeDetails.tsx new file mode 100644 index 00000000000000..d752ffffb32c4e --- /dev/null +++ b/static/app/views/explore/components/attributeDetails.tsx @@ -0,0 +1,41 @@ +import type {ReactNode} from 'react'; +import styled from '@emotion/styled'; + +import {t} from 'sentry/locale'; +import {space} from 'sentry/styles/space'; +import type {FieldKind} from 'sentry/utils/fields'; +import {getFieldDefinition} from 'sentry/utils/fields'; + +interface AttributeDetailsProps { + column: string; + kind: FieldKind; + label: ReactNode; + type: 'span'; +} + +export function AttributeDetails({column, kind, label, type}: AttributeDetailsProps) { + const definition = getFieldDefinition(column, type, kind); + const description = definition?.desc ?? t('An attribute sent with one or more events'); + return ( +
+ {label} + {description} +
+ ); +} + +const Details = styled('div')` + padding: ${space(0.75)} ${space(1)}; + max-width: 220px; + font-size: ${p => p.theme.fontSizeSmall}; +`; + +const DetailsLabel = styled('p')` + font-weight: ${p => p.theme.fontWeightBold}; + word-break: break-all; + margin-bottom: ${space(1)}; +`; + +const DetailsDescription = styled('p')` + margin-bottom: 0px; +`; diff --git a/static/app/views/explore/hooks/useVisualizeFields.tsx b/static/app/views/explore/hooks/useVisualizeFields.tsx index 02cfc37047d038..f82661e3b1a1f2 100644 --- a/static/app/views/explore/hooks/useVisualizeFields.tsx +++ b/static/app/views/explore/hooks/useVisualizeFields.tsx @@ -2,12 +2,11 @@ import {useMemo} from 'react'; import type {SelectOption} from 'sentry/components/core/compactSelect'; import {defined} from 'sentry/utils'; -import { - type ParsedFunction, - parseFunction, - prettifyTagKey, -} from 'sentry/utils/discover/fields'; -import {AggregationKey} from 'sentry/utils/fields'; +import type {ParsedFunction} from 'sentry/utils/discover/fields'; +import {parseFunction, prettifyTagKey} from 'sentry/utils/discover/fields'; +import {AggregationKey, FieldKind} from 'sentry/utils/fields'; +import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails'; +import {TypeBadge} from 'sentry/views/explore/components/typeBadge'; import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext'; interface Props { @@ -37,6 +36,11 @@ export function useVisualizeFields({yAxis, yAxes}: Props) { }, [yAxes]); const fieldOptions: Array> = useMemo(() => { + const kind = + parsedYAxis?.name === AggregationKey.COUNT_UNIQUE + ? FieldKind.TAG + : FieldKind.MEASUREMENT; + const unknownOptions = parsedYAxes .flatMap(entry => { return entry.arguments; @@ -46,13 +50,30 @@ export function useVisualizeFields({yAxis, yAxes}: Props) { }); const options = [ - ...unknownOptions.map(option => ({ - label: prettifyTagKey(option), - value: option, - textValue: option, - })), + ...unknownOptions.map(option => { + const label = prettifyTagKey(option); + return { + label, + value: option, + textValue: option, + trailingItems: , + showDetailsInOverlay: true, + details: ( + + ), + }; + }), ...Object.values(tags).map(tag => { - return {label: tag.name, value: tag.key, textValue: tag.name}; + return { + label: tag.name, + value: tag.key, + textValue: tag.name, + trailingItems: , + showDetailsInOverlay: true, + details: ( + + ), + }; }), ]; @@ -69,7 +90,7 @@ export function useVisualizeFields({yAxis, yAxes}: Props) { }); return options; - }, [tags, parsedYAxes]); + }, [tags, parsedYAxes, parsedYAxis?.name]); return fieldOptions; } diff --git a/static/app/views/explore/tables/columnEditorModal.tsx b/static/app/views/explore/tables/columnEditorModal.tsx index 86df31c312aef1..5e5c6691c073f1 100644 --- a/static/app/views/explore/tables/columnEditorModal.tsx +++ b/static/app/views/explore/tables/columnEditorModal.tsx @@ -19,6 +19,7 @@ import type {TagCollection} from 'sentry/types/group'; import {defined} from 'sentry/utils'; import {classifyTagKey, prettifyTagKey} from 'sentry/utils/discover/fields'; import {FieldKind} from 'sentry/utils/fields'; +import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails'; import {TypeBadge} from 'sentry/views/explore/components/typeBadge'; import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext'; import type {Column} from 'sentry/views/explore/hooks/useDragNDropColumns'; @@ -54,12 +55,18 @@ export function ColumnEditorModal({ !stringTags.hasOwnProperty(column) && !numberTags.hasOwnProperty(column) ) .map(column => { + const kind = classifyTagKey(column); + const label = prettifyTagKey(column); return { - label: prettifyTagKey(column), + label, value: column, textValue: column, - trailingItems: , + trailingItems: , key: `${column}-${classifyTagKey(column)}`, + showDetailsInOverlay: true, + details: ( + + ), }; }), ...Object.values(stringTags).map(tag => { @@ -69,6 +76,15 @@ export function ColumnEditorModal({ textValue: tag.name, trailingItems: , key: `${tag.key}-${FieldKind.TAG}`, + showDetailsInOverlay: true, + details: ( + + ), }; }), ...Object.values(numberTags).map(tag => { @@ -78,6 +94,15 @@ export function ColumnEditorModal({ textValue: tag.name, trailingItems: , key: `${tag.key}-${FieldKind.MEASUREMENT}`, + showDetailsInOverlay: true, + details: ( + + ), }; }), ]; diff --git a/static/app/views/explore/toolbar/toolbarGroupBy.tsx b/static/app/views/explore/toolbar/toolbarGroupBy.tsx index 42d61c8c7d4467..e2ac3126785c91 100644 --- a/static/app/views/explore/toolbar/toolbarGroupBy.tsx +++ b/static/app/views/explore/toolbar/toolbarGroupBy.tsx @@ -12,6 +12,9 @@ import {IconDelete} from 'sentry/icons/iconDelete'; import {IconGrabbable} from 'sentry/icons/iconGrabbable'; import {t} from 'sentry/locale'; import {defined} from 'sentry/utils'; +import {classifyTagKey} from 'sentry/utils/discover/fields'; +import {AttributeDetails} from 'sentry/views/explore/components/attributeDetails'; +import {TypeBadge} from 'sentry/views/explore/components/typeBadge'; import {DragNDropContext} from 'sentry/views/explore/contexts/dragNDropContext'; import { useExploreGroupBys, @@ -73,7 +76,17 @@ export function ToolbarGroupBy({autoSwitchToAggregates}: ToolbarGroupBy) { value: UNGROUPED, textValue: t('\u2014'), }, - ...potentialOptions.map(key => ({label: key, value: key, textValue: key})), + ...potentialOptions.map(key => { + const kind = classifyTagKey(key); + return { + label: key, + value: key, + textValue: key, + trailingItems: , + showDetailsInOverlay: true, + details: , + }; + }), ]; }, [groupBys, tags]);