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