1import React, { FC } from 'react'; 2import { SelectableValue } from '@grafana/data'; 3import { SELECT_WIDTH } from '../constants'; 4import { CustomMetaData, MetricQuery, SLOQuery } from '../types'; 5import { AlignmentFunction, AlignmentPeriod, AlignmentPeriodLabel, QueryEditorField, QueryEditorRow } from '.'; 6import CloudMonitoringDatasource from '../datasource'; 7 8export interface Props { 9 onChange: (query: MetricQuery | SLOQuery) => void; 10 query: MetricQuery; 11 templateVariableOptions: Array<SelectableValue<string>>; 12 customMetaData: CustomMetaData; 13 datasource: CloudMonitoringDatasource; 14} 15 16export const Alignment: FC<Props> = ({ templateVariableOptions, onChange, query, customMetaData, datasource }) => { 17 return ( 18 <QueryEditorRow 19 label="Alignment function" 20 tooltip="The process of alignment consists of collecting all data points received in a fixed length of time, applying a function to combine those data points, and assigning a timestamp to the result." 21 fillComponent={<AlignmentPeriodLabel datasource={datasource} customMetaData={customMetaData} />} 22 > 23 <AlignmentFunction templateVariableOptions={templateVariableOptions} query={query} onChange={onChange} /> 24 <QueryEditorField label="Alignment period"> 25 <AlignmentPeriod 26 selectWidth={SELECT_WIDTH} 27 templateVariableOptions={templateVariableOptions} 28 query={query} 29 onChange={onChange} 30 /> 31 </QueryEditorField> 32 </QueryEditorRow> 33 ); 34}; 35