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