public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CloudMonitoring: Update SLO to use experimental UI components (#51839)

Browse Source
This commit is contained in:
Kevin Yu
2022-07-07 10:26:24 +02:00
committed by GitHub
parent 19fa4ef9af
commit 6d2d99e804
1 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
+18 -17
View File
@@ -1,10 +1,9 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
import { Select } from '@grafana/ui'; import { Select } from '@grafana/ui';
import { QueryEditorRow } from '..';
import { SELECT_WIDTH } from '../../constants';
import CloudMonitoringDatasource from '../../datasource'; import CloudMonitoringDatasource from '../../datasource';
import { SLOQuery } from '../../types'; import { SLOQuery } from '../../types';
@@ -37,20 +36,22 @@ export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, on
}, [datasource, projectName, serviceId, templateVariableOptions]); }, [datasource, projectName, serviceId, templateVariableOptions]);
return ( return (
<QueryEditorRow label="SLO" htmlFor={`${refId}-slo`}> <EditorRow>
<Select <EditorField label="SLO">
inputId={`${refId}-slo`} <Select
width={SELECT_WIDTH} inputId={`${refId}-slo`}
allowCustomValue width="auto"
value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }} allowCustomValue
placeholder="Select SLO" value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
options={slos} placeholder="Select SLO"
onChange={async ({ value: sloId = '', label: sloName = '' }) => { options={slos}
const slos = await datasource.getServiceLevelObjectives(projectName, serviceId); onChange={async ({ value: sloId = '', label: sloName = '' }) => {
const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId)); const slos = await datasource.getServiceLevelObjectives(projectName, serviceId);
onChange({ ...query, sloId, sloName, goal: slo?.goal }); const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
}} onChange({ ...query, sloId, sloName, goal: slo?.goal });
/> }}
</QueryEditorRow> />
</EditorField>
</EditorRow>
); );
}; };