import {Fragment, useEffect, useState} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import type {ModalRenderProps} from 'sentry/actionCreators/modal'; import {Button, LinkButton} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import ExternalLink from 'sentry/components/links/externalLink'; import {DISCOVER2_DOCS_URL} from 'sentry/constants'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {Organization} from 'sentry/types/organization'; import {trackAnalytics} from 'sentry/utils/analytics'; import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements'; import { AGGREGATIONS, type Column, ERROR_FIELDS, ERRORS_AGGREGATION_FUNCTIONS, TRANSACTION_FIELDS, } from 'sentry/utils/discover/fields'; import {DiscoverDatasets} from 'sentry/utils/discover/types'; import {type AggregationKey, FieldKey} from 'sentry/utils/fields'; import theme from 'sentry/utils/theme'; import useTags from 'sentry/utils/useTags'; import {generateFieldOptions} from 'sentry/views/discover/utils'; import ColumnEditCollection from './columnEditCollection'; type Props = { columns: Column[]; measurementKeys: null | string[]; // Fired when column selections have been applied. onApply: (columns: Column[]) => void; organization: Organization; customMeasurements?: CustomMeasurementCollection; dataset?: DiscoverDatasets; spanOperationBreakdownKeys?: string[]; } & ModalRenderProps; function ColumnEditModal(props: Props) { const { Header, Body, Footer, measurementKeys, spanOperationBreakdownKeys, organization, onApply, closeModal, customMeasurements, dataset, } = props; // Only run once for each organization.id. useEffect(() => { trackAnalytics('discover_v2.column_editor.open', {organization}); }, [organization]); const tags = useTags(); const tagKeys = Object.keys(tags); const [columns, setColumns] = useState(props.columns); function handleApply() { onApply(columns); closeModal(); } let fieldOptions: ReturnType; if (dataset === DiscoverDatasets.ERRORS) { fieldOptions = generateFieldOptions({ organization, tagKeys, fieldKeys: ERROR_FIELDS, aggregations: Object.keys(AGGREGATIONS) .filter(key => ERRORS_AGGREGATION_FUNCTIONS.includes(key as AggregationKey)) .reduce((obj, key) => { obj[key] = AGGREGATIONS[key]; return obj; }, {}), }); } else if (dataset === DiscoverDatasets.TRANSACTIONS) { fieldOptions = generateFieldOptions({ organization, tagKeys, measurementKeys, spanOperationBreakdownKeys, customMeasurements: Object.values(customMeasurements ?? {}).map( ({key, functions}) => ({ key, functions, }) ), fieldKeys: TRANSACTION_FIELDS, }); } else { fieldOptions = generateFieldOptions({ organization, tagKeys, measurementKeys, spanOperationBreakdownKeys, customMeasurements: Object.values(customMeasurements ?? {}).map( ({key, functions}) => ({ key, functions, }) ), }); } return (

{t('Edit Columns')}

{tct( 'To group events, add [functionLink: functions] f(x) that may take in additional parameters. [fieldTagLink: Tag and field] columns will help you view more details about the events (i.e. title).', { functionLink: ( ), fieldTagLink: ( ), } )} option.value.meta.name !== FieldKey.TOTAL_COUNT } onChange={setColumns} organization={organization} /> ); } const Instruction = styled('div')` margin-bottom: ${space(4)}; `; const modalCss = css` @media (min-width: ${theme.breakpoints.medium}) { width: auto; max-width: 900px; } `; export default ColumnEditModal; export {modalCss};