diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx index 87e02c6..bdce976 100644 --- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx +++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx @@ -9,6 +9,7 @@ import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '. import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations'; import { SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes'; import { SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes'; +import { isMetric, SELECTABLE_METRICS } from '../types/metric'; enum LoadingState { Default = 'DEFAULT', @@ -24,6 +25,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props) const [licenseLoadingState, setLicenseLoadingState] = useState(LoadingState.Default); const [licenseErrorMessage, setLicenseErrorMessage] = useState(''); const [isTimeSeries, setIsTimeSeries] = useState(true); + const [isDimensionMetricSelected, setIsDimensionMetricSelected] = useState(false); useEffect(() => { setLicenseLoadingState(LoadingState.Loading); @@ -43,13 +45,19 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props) onRunQuery(); }; - const onMetricChange = (item: SelectableValue) => { - onChange({ ...query, aggregation: item.value }); + const onAggregationChange = (item: SelectableValue) => { + onChange({ ...query, aggregation: item.value, metric: undefined }); onRunQuery(); }; const onDimensionChange = (item: SelectableValue) => { - onChange({ ...query, dimension: item.value }); + if (isMetric(item.value)) { + setIsDimensionMetricSelected(true); + onChange({ ...query, aggregation: undefined, dimension: undefined, metric: item.value }); + } else { + setIsDimensionMetricSelected(false); + onChange({ ...query, dimension: item.value }); + } onRunQuery(); }; @@ -102,19 +110,25 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props) placeholder={licenseLoadingState === LoadingState.Loading ? 'Loading Licenses' : 'Choose License'} /> - - onAggregationChange(item)} + width={40} + options={SELECTABLE_AGGREGATIONS} + /> + + )}