import styled from '@emotion/styled'; import RadioGroup from 'sentry/components/forms/controls/radioGroup'; import SelectField from 'sentry/components/forms/fields/selectField'; import Input from 'sentry/components/input'; import {space} from 'sentry/styles/space'; import {CustomMeasurementsProvider} from 'sentry/utils/customMeasurements/customMeasurementsProvider'; import {type Column, generateFieldAsString} from 'sentry/utils/discover/fields'; import {useLocalStorageState} from 'sentry/utils/useLocalStorageState'; import useOrganization from 'sentry/utils/useOrganization'; import usePageFilters from 'sentry/utils/usePageFilters'; import {getDatasetConfig} from 'sentry/views/dashboards/datasetConfig/base'; import {DisplayType, WidgetType} from 'sentry/views/dashboards/types'; import {ColumnFields} from 'sentry/views/dashboards/widgetBuilder/buildSteps/columnsStep/columnFields'; import {YAxisSelector} from 'sentry/views/dashboards/widgetBuilder/buildSteps/yAxisStep/yAxisSelector'; import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext'; import {BuilderStateAction} from 'sentry/views/dashboards/widgetBuilder/hooks/useWidgetBuilderState'; import {getDiscoverDatasetFromWidgetType} from 'sentry/views/dashboards/widgetBuilder/utils'; import ResultsSearchQueryBuilder from 'sentry/views/discover/resultsSearchQueryBuilder'; function DevBuilder() { const {state, dispatch} = useWidgetBuilderContext(); const [showDevBuilder] = useLocalStorageState('showDevBuilder', false); if (!showDevBuilder) { return null; } return (

Title:

{state.title}

dispatch({type: BuilderStateAction.SET_TITLE, payload: e.target.value}) } />

Description:

{state.description}

dispatch({ type: BuilderStateAction.SET_DESCRIPTION, payload: e.target.value, }) } />

Display Type:

{state.displayType}

({ label: value, value, }))} onChange={newValue => dispatch({ type: BuilderStateAction.SET_DISPLAY_TYPE, payload: newValue, }) } style={{width: '200px'}} />

Dataset:

{state.dataset}

dispatch({ type: BuilderStateAction.SET_DATASET, payload: newValue, }) } />

Fields:

{state.fields?.map(generateFieldAsString).join(', ')}

{ dispatch({ type: BuilderStateAction.SET_FIELDS, payload: newFields, }); }} />

Y-Axis:

{state.yAxis?.map(generateFieldAsString).join(', ')}

{ dispatch({ type: BuilderStateAction.SET_Y_AXIS, payload: newAggregates, }); }} />

Query:

{query}

{state.query?.map((query, index) => (

{ dispatch({ type: BuilderStateAction.SET_QUERY, payload: state.query?.map((q, i) => (i === index ? queryString : q)) ?? [], }); }} />

))}

); } function ColumnSelector({ displayType, fields, dataset, onChange, }: { dataset: WidgetType; displayType: DisplayType; fields: Column[]; onChange: (newFields: Column[]) => void; }) { const organization = useOrganization(); const datasetConfig = getDatasetConfig(dataset); const fieldOptions = datasetConfig.getTableFieldOptions(organization); return ( true} filterPrimaryOptions={() => true} onChange={onChange} /> ); } function YAxis({ displayType, widgetType, aggregates, onChange, }: { aggregates: Column[]; displayType: DisplayType; onChange: (newFields: Column[]) => void; widgetType: WidgetType; }) { const organization = useOrganization(); return ( ); } function QueryField({ query, widgetType, fields, onSearch, }: { fields: Column[]; onSearch: (query: string) => void; query: string; widgetType: WidgetType; }) { const pageFilters = usePageFilters(); return ( ); } const Body = styled('div')` margin: ${space(2)}; padding: ${space(2)}; `; const Section = styled('section')` display: flex; flex-direction: row; justify-content: space-around; border: 1px solid ${p => p.theme.border}; align-items: center; > * { flex: 1; } `; const SimpleInput = styled(Input)` width: 100%; `; export default DevBuilder;