1import React from 'react'; 2import { SelectableValue } from '@grafana/data'; 3import { Metrics, LabelFilter, GroupBy, Preprocessor, Alignment } from '.'; 4import { MetricQuery, MetricDescriptor, CustomMetaData, SLOQuery } from '../types'; 5import CloudMonitoringDatasource from '../datasource'; 6 7export interface Props { 8 customMetaData: CustomMetaData; 9 variableOptionGroup: SelectableValue<string>; 10 onMetricTypeChange: (query: MetricDescriptor) => void; 11 onChange: (query: MetricQuery | SLOQuery) => void; 12 query: MetricQuery; 13 datasource: CloudMonitoringDatasource; 14 labels: any; 15} 16 17function Editor({ 18 query, 19 labels, 20 datasource, 21 onChange, 22 onMetricTypeChange, 23 customMetaData, 24 variableOptionGroup, 25}: React.PropsWithChildren<Props>) { 26 return ( 27 <Metrics 28 templateSrv={datasource.templateSrv} 29 projectName={query.projectName} 30 metricType={query.metricType} 31 templateVariableOptions={variableOptionGroup.options} 32 datasource={datasource} 33 onChange={onMetricTypeChange} 34 > 35 {(metric) => ( 36 <> 37 <LabelFilter 38 labels={labels} 39 filters={query.filters!} 40 onChange={(filters: string[]) => onChange({ ...query, filters })} 41 variableOptionGroup={variableOptionGroup} 42 /> 43 <Preprocessor metricDescriptor={metric} query={query} onChange={onChange} /> 44 <GroupBy 45 labels={Object.keys(labels)} 46 query={query} 47 onChange={onChange} 48 variableOptionGroup={variableOptionGroup} 49 metricDescriptor={metric} 50 /> 51 <Alignment 52 datasource={datasource} 53 templateVariableOptions={variableOptionGroup.options} 54 query={query} 55 customMetaData={customMetaData} 56 onChange={onChange} 57 /> 58 </> 59 )} 60 </Metrics> 61 ); 62} 63 64export const VisualMetricQueryEditor = React.memo(Editor); 65