json query

Author: speakyourcode

src/buttonPanel.tsx

@@ -1,31 +1,62 @@
-import { PanelProps } from '@grafana/data';
+import { AppEvents, PanelProps } from '@grafana/data';
+import { getBackendSrv, getDataSourceSrv, SystemJS } from '@grafana/runtime';
 import { Button, HorizontalGroup, VerticalGroup } from '@grafana/ui';
 import React from 'react';
 import { ButtonOptions, Options } from 'types';
 
 interface Props extends PanelProps<Options> {}
 
-const Buttons: React.FC<Options> = ({ buttons }) => {
-  return (
-    <React.Fragment>
-      {buttons.map((b: ButtonOptions, index: number) => (
-        <Button key={index} variant={b.variant}>
-          {b.text || 'Button'}
-        </Button>
-      ))}
-    </React.Fragment>
-  );
-};
-
 export const ButtonPanel: React.FC<Props> = ({ options }) => {
+  const renderButtons = (buttons: ButtonOptions[]) => {
+    return buttons.map((b: ButtonOptions, index: number) => (
+      <Button
+        key={index}
+        variant={b.variant}
+        onClick={async () => {
+          const payload = JSON.parse(b.query || '');
+          const ds = await getDataSourceSrv().get(b.datasource);
+          try {
+            const resp = await getBackendSrv().datasourceRequest({
+              method: 'POST',
+              url: 'api/tsdb/query',
+              data: {
+                queries: [
+                  {
+                    datasourceId: ds.id,
+                    refId: '1',
+                    ...payload,
+                  },
+                ],
+              },
+            });
+            SystemJS.load('app/core/app_events').then((appEvents: any) => {
+              appEvents.emit(AppEvents.alertSuccess, [
+                b.text + ': ' + resp.status + ' (' + resp.statusText + ')',
+              ]);
+            });
+          } catch (error) {
+            SystemJS.load('app/core/app_events').then((appEvents: any) => {
+              appEvents.emit(AppEvents.alertError, [
+                b.text + ': ' + error.status + ' (' + error.statusText + ')',
+                error.data.message,
+              ]);
+            });
+          }
+        }}
+      >
+        {b.text || 'Button'}
+      </Button>
+    ));
+  };
+
   return (
     (options.orientation === 'vertical' && (
       <VerticalGroup justify="center" align="center">
-        <Buttons {...options} />
+        {renderButtons(options.buttons)}
       </VerticalGroup>
     )) || (
       <HorizontalGroup justify="center" align="center">
-        <Buttons {...options} />
+        {renderButtons(options.buttons)}
       </HorizontalGroup>
     )
   );

src/editor.tsx

@@ -7,6 +7,7 @@ import {
   Input,
   RadioButtonGroup,
   Select,
+  TextArea,
 } from '@grafana/ui';
 import React from 'react';
 import { ButtonOptions, Options } from 'types';
@@ -77,18 +78,20 @@ const Editor: React.FC<EditorProps> = ({ buttons, onChange }) => {
               onChange={(e: SelectableValue<string>) =>
                 updateButtons(i, { datasource: e.value })
               }
+              value={b.datasource}
               options={elems}
             />
           </Field>
           <Field
             label="Query"
-            description="Query to be triggered on Button Click"
+            description="JSON query to be triggered on Button Click"
           >
-            <Input
+            <TextArea
               id={'q-' + i.toString()}
               value={b.query}
-              placeholder="Query"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              placeholder="{ query: 'your query' }"
+              rows={5}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 updateButtons(i, { query: e.target.value })
               }
             />