Canvas: Add button element + basic onClick support (#43252)

2025-02-25 18:55:37 -06:00 · 2021-12-17 14:05:57 -08:00
parent 197f4f81f2
commit 8be4182e49
4 changed files with 158 additions and 8 deletions
--- a/public/app/plugins/panel/canvas/editor/APIEditor.tsx
+++ b/public/app/plugins/panel/canvas/editor/APIEditor.tsx
@@ -0,0 +1,114 @@
+import React, { FC, useCallback } from 'react';
+import { Button, InlineField, InlineFieldRow, JSONFormatter, StringValueEditor } from '@grafana/ui';
+import { AppEvents, StandardEditorProps, StandardEditorsRegistryItem, StringFieldConfigSettings } from '@grafana/data';
+import { config, getBackendSrv } from '@grafana/runtime';
+import { appEvents } from 'app/core/core';
+
+export interface APIEditorConfig {
+  endpoint: string;
+  data?: string;
+}
+
+const dummyStringSettings: StandardEditorsRegistryItem<string, StringFieldConfigSettings> = {
+  settings: {},
+} as any;
+
+export const callApi = (api: APIEditorConfig, isTest = false) => {
+  if (api) {
+    getBackendSrv()
+      .fetch({
+        url: api.endpoint!,
+        method: 'POST',
+        data: api.data ?? {},
+      })
+      .subscribe({
+        error: (error: any) => {
+          if (isTest) {
+            appEvents.emit(AppEvents.alertError, ['Error has occurred: ', JSON.stringify(error)]);
+            console.error(error);
+          }
+        },
+        complete: () => {
+          if (isTest) {
+            appEvents.emit(AppEvents.alertSuccess, ['Test successful']);
+          }
+        },
+      });
+  }
+};
+
+export const APIEditor: FC<StandardEditorProps<APIEditorConfig, any, any>> = (props) => {
+  const { value, context, onChange } = props;
+  const labelWidth = 9;
+
+  const onEndpointChange = useCallback(
+    (endpoint) => {
+      onChange({
+        ...value,
+        endpoint,
+      });
+    },
+    [onChange, value]
+  );
+
+  const onDataChange = useCallback(
+    (data) => {
+      onChange({
+        ...value,
+        data,
+      });
+    },
+    [onChange, value]
+  );
+
+  const renderJSON = (data: string) => {
+    try {
+      const json = JSON.parse(data);
+      return <JSONFormatter json={json} />;
+    } catch (error) {
+      return `Invalid JSON provided: ${error.message}`;
+    }
+  };
+
+  const renderTestAPIButton = (api: APIEditorConfig) => {
+    if (api && api.endpoint) {
+      return (
+        <Button onClick={() => callApi(api, true)} title={'Test API'}>
+          Test API
+        </Button>
+      );
+    }
+
+    return;
+  };
+
+  return config.disableSanitizeHtml ? (
+    <>
+      <InlineFieldRow>
+        <InlineField label={'Endpoint'} labelWidth={labelWidth} grow={true}>
+          <StringValueEditor
+            context={context}
+            value={value?.endpoint}
+            onChange={onEndpointChange}
+            item={dummyStringSettings}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <InlineFieldRow>
+        <InlineField label={'Data'} labelWidth={labelWidth} grow={true}>
+          <StringValueEditor
+            context={context}
+            value={value?.data ?? '{}'}
+            onChange={onDataChange}
+            item={dummyStringSettings}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      {renderTestAPIButton(value)}
+      <br />
+      {renderJSON(value?.data ?? '{}')}
+    </>
+  ) : (
+    <>Must enable disableSanitizeHtml feature flag to access</>
+  );
+};