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

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

View File

@ -1,10 +1,9 @@
import React, { useEffect, useState } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental';
import { Select } from '@grafana/ui';
import { QueryEditorRow } from '..';
import { SELECT_WIDTH } from '../../constants';
import CloudMonitoringDatasource from '../../datasource';
import { SLOQuery } from '../../types';
@ -37,18 +36,20 @@ export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions
}, [datasource, projectName, templateVariableOptions]);
return (
<QueryEditorRow label="Service" htmlFor={`${refId}-slo-service`}>
<Select
inputId={`${refId}-slo-service`}
width={SELECT_WIDTH}
allowCustomValue
value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
placeholder="Select service"
options={services}
onChange={({ value: serviceId = '', label: serviceName = '' }) =>
onChange({ ...query, serviceId, serviceName, sloId: '' })
}
/>
</QueryEditorRow>
<EditorRow>
<EditorField label="Service">
<Select
inputId={`${refId}-slo-service`}
width="auto"
allowCustomValue
value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
placeholder="Select service"
options={services}
onChange={({ value: serviceId = '', label: serviceName = '' }) =>
onChange({ ...query, serviceId, serviceName, sloId: '' })
}
/>
</EditorField>
</EditorRow>
);
};