11import { defaults } from 'lodash' ;
2- import React , { ChangeEvent , ReactElement } from 'react' ;
3- import { ActionMeta , InlineField , InlineFieldRow , Input , Select , TextArea } from '@grafana/ui' ;
2+ import React , { ChangeEvent , ReactElement , useState } from 'react' ;
3+ import { ActionMeta , InlineField , InlineFieldRow , Input , Select , MultiSelect , TextArea } from '@grafana/ui' ;
44import { QueryEditorProps , SelectableValue } from '@grafana/data' ;
55import { DataSource } from './datasource' ;
66import { defaultQuery , MyDataSourceOptions , MyQuery , queryTypes } from './types' ;
@@ -12,6 +12,8 @@ export function QueryEditor(props: Props): ReactElement {
1212 const { datasource } = props ;
1313 const { loading, topFacets } = useFacetsQuery ( datasource ) ;
1414 const query = defaults ( props . query , defaultQuery ) ;
15+ const [ accountEmails , setAccountEmails ] = useState < Array < SelectableValue < string > > > (
16+ ( query . accountEmails || [ ] ) . map ( v => ( { label : v , value : v } ) ) ) ;
1517
1618 const onExpressionChange = ( event : ChangeEvent < HTMLInputElement > ) => {
1719 const { onChange, query } = props ;
@@ -37,6 +39,13 @@ export function QueryEditor(props: Props): ReactElement {
3739 onChange ( { ...query , label : event . target . value } ) ;
3840 } ;
3941
42+ const onAccountEmailsChange = ( values : Array < SelectableValue < string > > , actionMeta : ActionMeta ) => {
43+ const { onChange, query, onRunQuery } = props ;
44+ setAccountEmails ( values ) ;
45+ onChange ( { ...query , accountEmails : values . length > 0 ? values . map ( ( v ) => { return v . value ; } ) : null } ) ;
46+ onRunQuery ( ) ;
47+ } ;
48+
4049 const onBlur = async ( ) => {
4150 const { onRunQuery } = props ;
4251 onRunQuery ( ) ;
@@ -65,7 +74,7 @@ export function QueryEditor(props: Props): ReactElement {
6574 </ InlineField >
6675 </ InlineFieldRow >
6776 < InlineFieldRow >
68- { query . queryType === 'Standard' && topFacets . length > 0 && (
77+ { query . queryType === 'Standard' && (
6978 < InlineField label = "Breakdown" grow >
7079 < Select
7180 options = { topFacets }
@@ -85,6 +94,16 @@ export function QueryEditor(props: Props): ReactElement {
8594 < Input type = "text" value = { query . label || '' } onChange = { onLabelChange } />
8695 </ InlineField >
8796 </ InlineFieldRow >
97+ < InlineFieldRow >
98+ < InlineField label = "AccountEmails" grow >
99+ < MultiSelect
100+ value = { accountEmails }
101+ allowCustomValue
102+ isClearable
103+ onChange = { onAccountEmailsChange }
104+ />
105+ </ InlineField >
106+ </ InlineFieldRow >
88107 </ >
89108 ) ;
90109}
0 commit comments