1import React, { useEffect, useState } 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 } 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 SLO: React.FC<Props> = ({ query, templateVariableOptions, onChange, datasource }) => {
17  const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
18  const { projectName, serviceId } = query;
19
20  useEffect(() => {
21    if (!projectName || !serviceId) {
22      return;
23    }
24
25    datasource.getServiceLevelObjectives(projectName, serviceId).then((sloIds: Array<SelectableValue<string>>) => {
26      setSLOs([
27        {
28          label: 'Template Variables',
29          options: templateVariableOptions,
30        },
31        ...sloIds,
32      ]);
33    });
34  }, [datasource, projectName, serviceId, templateVariableOptions]);
35
36  return (
37    <QueryEditorRow label="SLO">
38      <Select
39        menuShouldPortal
40        width={SELECT_WIDTH}
41        allowCustomValue
42        value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
43        placeholder="Select SLO"
44        options={slos}
45        onChange={async ({ value: sloId = '', label: sloName = '' }) => {
46          const slos = await datasource.getServiceLevelObjectives(projectName, serviceId);
47          const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
48          onChange({ ...query, sloId, sloName, goal: slo?.goal });
49        }}
50      />
51    </QueryEditorRow>
52  );
53};
54