1import React from 'react'; 2import { SelectableValue } from '@grafana/data'; 3import { Project, AliasBy, AlignmentPeriod, AlignmentPeriodLabel, QueryEditorRow } from '..'; 4import { AlignmentTypes, CustomMetaData, SLOQuery } from '../../types'; 5import CloudMonitoringDatasource from '../../datasource'; 6import { Selector, Service, SLO } from '.'; 7import { SELECT_WIDTH } from '../../constants'; 8 9export interface Props { 10 customMetaData: CustomMetaData; 11 variableOptionGroup: SelectableValue<string>; 12 onChange: (query: SLOQuery) => void; 13 onRunQuery: () => void; 14 query: SLOQuery; 15 datasource: CloudMonitoringDatasource; 16} 17 18export const defaultQuery: (dataSource: CloudMonitoringDatasource) => SLOQuery = (dataSource) => ({ 19 projectName: dataSource.getDefaultProject(), 20 alignmentPeriod: 'cloud-monitoring-auto', 21 perSeriesAligner: AlignmentTypes.ALIGN_MEAN, 22 aliasBy: '', 23 selectorName: 'select_slo_health', 24 serviceId: '', 25 serviceName: '', 26 sloId: '', 27 sloName: '', 28}); 29 30export function SLOQueryEditor({ 31 query, 32 datasource, 33 onChange, 34 variableOptionGroup, 35 customMetaData, 36}: React.PropsWithChildren<Props>) { 37 return ( 38 <> 39 <Project 40 templateVariableOptions={variableOptionGroup.options} 41 projectName={query.projectName} 42 datasource={datasource} 43 onChange={(projectName) => onChange({ ...query, projectName })} 44 /> 45 <Service 46 datasource={datasource} 47 templateVariableOptions={variableOptionGroup.options} 48 query={query} 49 onChange={onChange} 50 ></Service> 51 <SLO 52 datasource={datasource} 53 templateVariableOptions={variableOptionGroup.options} 54 query={query} 55 onChange={onChange} 56 ></SLO> 57 <Selector 58 datasource={datasource} 59 templateVariableOptions={variableOptionGroup.options} 60 query={query} 61 onChange={onChange} 62 ></Selector> 63 64 <QueryEditorRow label="Alignment period"> 65 <AlignmentPeriod 66 templateVariableOptions={variableOptionGroup.options} 67 query={{ 68 ...query, 69 perSeriesAligner: query.selectorName === 'select_slo_health' ? 'ALIGN_MEAN' : 'ALIGN_NEXT_OLDER', 70 }} 71 onChange={onChange} 72 selectWidth={SELECT_WIDTH} 73 /> 74 <AlignmentPeriodLabel datasource={datasource} customMetaData={customMetaData} /> 75 </QueryEditorRow> 76 77 <AliasBy value={query.aliasBy} onChange={(aliasBy) => onChange({ ...query, aliasBy })} /> 78 </> 79 ); 80} 81