1import React, { useEffect, useState } 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 } 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 SLO: React.FC<Props> = ({ query, templateVariableOptions, onChange, datasource }) => { 17 const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]); 18 const { projectName, serviceId } = query; 19 20 useEffect(() => { 21 if (!projectName || !serviceId) { 22 return; 23 } 24 25 datasource.getServiceLevelObjectives(projectName, serviceId).then((sloIds: Array<SelectableValue<string>>) => { 26 setSLOs([ 27 { 28 label: 'Template Variables', 29 options: templateVariableOptions, 30 }, 31 ...sloIds, 32 ]); 33 }); 34 }, [datasource, projectName, serviceId, templateVariableOptions]); 35 36 return ( 37 <QueryEditorRow label="SLO"> 38 <Select 39 menuShouldPortal 40 width={SELECT_WIDTH} 41 allowCustomValue 42 value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }} 43 placeholder="Select SLO" 44 options={slos} 45 onChange={async ({ value: sloId = '', label: sloName = '' }) => { 46 const slos = await datasource.getServiceLevelObjectives(projectName, serviceId); 47 const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId)); 48 onChange({ ...query, sloId, sloName, goal: slo?.goal }); 49 }} 50 /> 51 </QueryEditorRow> 52 ); 53}; 54