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

Canvas: Button API Editor visual feedback on response (#76499)

Browse Source
This commit is contained in:
Adela Almasan
2023-10-13 00:11:08 -05:00
committed by GitHub
parent 18128c2666
commit d5945bc26e
4 changed files with 71 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
public/app/plugins/panel/canvas/editor/element/APIEditor.tsx
View File

@@ -132,7 +132,7 @@ export function APIEditor({ value, context, onChange }: Props) {
const renderTestAPIButton = (api: APIEditorConfig) => {
if (api && api.endpoint) {
return (
<Button onClick={() => callApi(api, true)} title="Test API">
<Button onClick={() => callApi(api)} title="Test API">
Test API
</Button>
);
@@ -158,36 +158,36 @@ export function APIEditor({ value, context, onChange }: Props) {
<RadioButtonGroup value={value?.method} options={httpMethodOptions} onChange={onMethodChange} fullWidth />
</InlineField>
</InlineFieldRow>
{value?.method === HttpRequestMethod.POST && (
<InlineFieldRow>
<InlineField label="Content-Type" labelWidth={LABEL_WIDTH} grow={true}>
<Select
options={contentTypeOptions}
allowCustomValue={true}
formatCreateLabel={formatCreateLabel}
value={value?.contentType}
onChange={onContentTypeChange}
/>
</InlineField>
</InlineFieldRow>
)}
<br />
<Field label="Query parameters">
<ParamsEditor value={value?.queryParams ?? []} onChange={onQueryParamsChange} />
</Field>
<Field label="Header parameters">
<ParamsEditor value={value?.headerParams ?? []} onChange={onHeaderParamsChange} />
</Field>
{value?.method === HttpRequestMethod.POST && (
<>
<InlineFieldRow>
<InlineField label="Content-Type" labelWidth={LABEL_WIDTH} grow={true}>
<Select
options={contentTypeOptions}
allowCustomValue={true}
formatCreateLabel={formatCreateLabel}
value={value?.contentType}
onChange={onContentTypeChange}
/>
</InlineField>
</InlineFieldRow>
{value?.contentType && (
<Field label="Payload">
<StringValueEditor
context={context}
value={value?.data ?? '{}'}
onChange={onDataChange}
item={{ ...dummyStringSettings, settings: { useTextarea: true } }}
/>
</Field>
)}
</>
{value?.method === HttpRequestMethod.POST && value?.contentType && (
<Field label="Payload">
<StringValueEditor
context={context}
value={value?.data ?? '{}'}
onChange={onDataChange}
item={{ ...dummyStringSettings, settings: { useTextarea: true } }}
/>
</Field>
)}
{renderTestAPIButton(value)}
<br />

16
public/app/plugins/panel/canvas/editor/element/utils.ts
View File

@@ -7,11 +7,14 @@ import { HttpRequestMethod } from '../../panelcfg.gen';
import { APIEditorConfig } from './APIEditor';
export const callApi = (api: APIEditorConfig, isTest = false) => {
type IsLoadingCallback = (loading: boolean) => void;
export const callApi = (api: APIEditorConfig, updateLoadingStateCallback?: IsLoadingCallback) => {
if (api && api.endpoint) {
// If API endpoint origin matches Grafana origin, don't call it.
if (requestMatchesGrafanaOrigin(api.endpoint)) {
appEvents.emit(AppEvents.alertError, ['Cannot call API at Grafana origin.']);
updateLoadingStateCallback && updateLoadingStateCallback(false);
return;
}
const request = getRequest(api);
@@ -20,15 +23,12 @@ export const callApi = (api: APIEditorConfig, isTest = false) => {
.fetch(request)
.subscribe({
error: (error) => {
if (isTest) {
appEvents.emit(AppEvents.alertError, ['Error has occurred: ', JSON.stringify(error)]);
console.error(error);
}
appEvents.emit(AppEvents.alertError, ['An error has occurred: ', JSON.stringify(error)]);
updateLoadingStateCallback && updateLoadingStateCallback(false);
},
complete: () => {
if (isTest) {
appEvents.emit(AppEvents.alertSuccess, ['Test successful']);
}
appEvents.emit(AppEvents.alertSuccess, ['API call was successful']);
updateLoadingStateCallback && updateLoadingStateCallback(false);
},
});
}