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