IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

CloudMonitoring: Update Service to use experimental UI components (#51838)

Browse Source
This commit is contained in:
Kevin Yu 2022-07-07 01:25:53 -07:00 committed by GitHub
parent 5bd58be334
commit 19fa4ef9af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
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,18 +36,20 @@ export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions
}, [datasource, projectName, templateVariableOptions]); }, [datasource, projectName, templateVariableOptions]);
return ( return (
<QueryEditorRow label="Service" htmlFor={`${refId}-slo-service`}> <EditorRow>
<Select <EditorField label="Service">
inputId={`${refId}-slo-service`} <Select
width={SELECT_WIDTH} inputId={`${refId}-slo-service`}
allowCustomValue width="auto"
value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }} allowCustomValue
placeholder="Select service" value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
options={services} placeholder="Select service"
onChange={({ value: serviceId = '', label: serviceName = '' }) => options={services}
onChange({ ...query, serviceId, serviceName, sloId: '' }) onChange={({ value: serviceId = '', label: serviceName = '' }) =>
} onChange({ ...query, serviceId, serviceName, sloId: '' })
/> }
</QueryEditorRow> />
</EditorField>
</EditorRow>
); );
}; };