1import React, { FunctionComponent } from 'react';
2import { SelectableValue } from '@grafana/data';
3import { Segment } from '@grafana/ui';
4import { QueryType } from '../types';
5import { QUERY_TYPES } from '../constants';
6
7export interface Props {
8  value: QueryType;
9  onChange: (slo: QueryType) => void;
10  templateVariableOptions: Array<SelectableValue<string>>;
11}
12
13function asQueryType(input: Array<SelectableValue<string>>) {
14  const res: Array<SelectableValue<QueryType>> = [];
15  input.forEach((v) => {
16    if (v.value === QueryType.METRICS) {
17      res.push({ ...v, value: QueryType.METRICS });
18    }
19    if (v.value === QueryType.SLO) {
20      res.push({ ...v, value: QueryType.SLO });
21    }
22  });
23  return res;
24}
25
26export const QueryTypeSelector: FunctionComponent<Props> = ({ onChange, value, templateVariableOptions }) => {
27  return (
28    <div className="gf-form-inline">
29      <label className="gf-form-label query-keyword width-9">Query Type</label>
30      <Segment
31        value={[...QUERY_TYPES, ...asQueryType(templateVariableOptions)].find((qt) => qt.value === value)}
32        options={[
33          ...QUERY_TYPES,
34          {
35            label: 'Template Variables',
36            options: templateVariableOptions,
37          },
38        ]}
39        onChange={({ value }: SelectableValue<QueryType>) => onChange(value!)}
40      />
41
42      <div className="gf-form gf-form--grow">
43        <label className="gf-form-label gf-form-label--grow"></label>
44      </div>
45    </div>
46  );
47};
48