1import React from 'react';
2import { Select } from '@grafana/ui';
3import { SelectableValue } from '@grafana/data';
4import { QueryEditorRow } from '..';
5import CloudMonitoringDatasource from '../../datasource';
6import { SLOQuery } from '../../types';
7import { SELECT_WIDTH, SELECTORS } from '../../constants';
8
9export interface Props {
10  onChange: (query: SLOQuery) => void;
11  query: SLOQuery;
12  templateVariableOptions: Array<SelectableValue<string>>;
13  datasource: CloudMonitoringDatasource;
14}
15
16export const Selector: React.FC<Props> = ({ query, templateVariableOptions, onChange, datasource }) => {
17  return (
18    <QueryEditorRow label="Selector">
19      <Select
20        menuShouldPortal
21        width={SELECT_WIDTH}
22        allowCustomValue
23        value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}
24        options={[
25          {
26            label: 'Template Variables',
27            options: templateVariableOptions,
28          },
29          ...SELECTORS,
30        ]}
31        onChange={({ value: selectorName }) => onChange({ ...query, selectorName: selectorName ?? '' })}
32      />
33    </QueryEditorRow>
34  );
35};
36