1import React, { FunctionComponent } from 'react'; 2import { SelectableValue } from '@grafana/data'; 3import { Segment } from '@grafana/ui'; 4import { QueryType } from '../types'; 5import { QUERY_TYPES } from '../constants'; 6 7export interface Props { 8 value: QueryType; 9 onChange: (slo: QueryType) => void; 10 templateVariableOptions: Array<SelectableValue<string>>; 11} 12 13function asQueryType(input: Array<SelectableValue<string>>) { 14 const res: Array<SelectableValue<QueryType>> = []; 15 input.forEach((v) => { 16 if (v.value === QueryType.METRICS) { 17 res.push({ ...v, value: QueryType.METRICS }); 18 } 19 if (v.value === QueryType.SLO) { 20 res.push({ ...v, value: QueryType.SLO }); 21 } 22 }); 23 return res; 24} 25 26export const QueryTypeSelector: FunctionComponent<Props> = ({ onChange, value, templateVariableOptions }) => { 27 return ( 28 <div className="gf-form-inline"> 29 <label className="gf-form-label query-keyword width-9">Query Type</label> 30 <Segment 31 value={[...QUERY_TYPES, ...asQueryType(templateVariableOptions)].find((qt) => qt.value === value)} 32 options={[ 33 ...QUERY_TYPES, 34 { 35 label: 'Template Variables', 36 options: templateVariableOptions, 37 }, 38 ]} 39 onChange={({ value }: SelectableValue<QueryType>) => onChange(value!)} 40 /> 41 42 <div className="gf-form gf-form--grow"> 43 <label className="gf-form-label gf-form-label--grow"></label> 44 </div> 45 </div> 46 ); 47}; 48