1import React from 'react'; 2import { Select } from '@grafana/ui'; 3import { SelectableValue } from '@grafana/data'; 4import { QueryEditorRow } from '..'; 5import CloudMonitoringDatasource from '../../datasource'; 6import { SLOQuery } from '../../types'; 7import { SELECT_WIDTH, SELECTORS } from '../../constants'; 8 9export interface Props { 10 onChange: (query: SLOQuery) => void; 11 query: SLOQuery; 12 templateVariableOptions: Array<SelectableValue<string>>; 13 datasource: CloudMonitoringDatasource; 14} 15 16export const Selector: React.FC<Props> = ({ query, templateVariableOptions, onChange, datasource }) => { 17 return ( 18 <QueryEditorRow label="Selector"> 19 <Select 20 menuShouldPortal 21 width={SELECT_WIDTH} 22 allowCustomValue 23 value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')} 24 options={[ 25 { 26 label: 'Template Variables', 27 options: templateVariableOptions, 28 }, 29 ...SELECTORS, 30 ]} 31 onChange={({ value: selectorName }) => onChange({ ...query, selectorName: selectorName ?? '' })} 32 /> 33 </QueryEditorRow> 34 ); 35}; 36