7911 Add graphql datasource plugin (#47)

* 7911 Update FN_README

* 7911 Add graphql plugin

* 7911 Add graphql plugin

Co-authored-by: Katarzyna Ziomek-Zdanowicz <[email protected]>

Author: ziomecka

FN_README.md

@@ -3,12 +3,22 @@
 ## How to work with it?
 
 We created our fork of [snakey-panel](https://github.com/IsmaelMasharo/sankey-panel) ---> [our fork](https://github.com/fluxninja/sankey-panel) and if we want to add some changes to it we need to:
+
 - git clone our fork
 - add changes we want
 - build plugin using `yarn build` (if you want to test something use `yarn dev` because the normal build removes all console.logs)
 - copy-paste builded version of plugin into grafana `public/app/plugins/panel/sankey-panel-0.5.0`
 - refresh grafana
 
+# [Grafadruid-druid datasource plugin](./public/app/plugins/datasource//grafadruid-druid-datasource/)
+
+https://github.com/grafadruid/druid-grafana/tree/master/src
+
+# [Graphql datasource plugin](./public/app/plugins//datasource//fifemon-graphql-datasource/)
+
+https://github.com/fifemon/graphql-datasource/tree/v1.3.0/src
+
+Release: v1.3.0
 
 # Troubleshooting
 
@@ -18,11 +28,11 @@ Smart IDEs (such as VSCode or IntelliJ) require special configuration for TypeSc
 A collection of settings for each editor can be found under the (link)[https://yarnpkg.com/getting-started/editor-sdks#vscode]
 
 Generally speaking: the editor SDKs and settings can be generated using `yarn dlx @yarnpkg/sdks` (or yarn sdks if you added @yarnpkg/sdks to your dependencies):
+
 - Use yarn sdks vscode vim to generate both the base SDKs and the settings for the specified supported editors.
 - Use yarn sdks base to generate the base SDKs and then manually tweak the configuration of unsupported editors.
 - Use yarn sdks to update all installed SDKs and editor settings.
 
-
 ### VSCode
 
 To support features like go-to-definition a plugin like ZipFS is needed.

pkg/plugins/backendplugin/coreplugin/registry.go

@@ -38,6 +38,7 @@ const (
 	Loki            = "loki"
 	OpenTSDB        = "opentsdb"
 	Druid           = "grafadruid-druid-datasource"
+	Graphql			= "fifemon-graphql-datasource"
 	Prometheus      = "prometheus"
 	Tempo           = "tempo"
 	TestData        = "testdata"

pkg/plugins/pfs/corelist/loadlist_gen.go

@@ -46,6 +46,7 @@ func coreTreeList(rt *thema.Runtime) pfs.TreeList {
 		makeTreeOrPanic("public/app/plugins/datasource/cloudwatch", "cloudwatch", rt),
 		makeTreeOrPanic("public/app/plugins/datasource/dashboard", "dashboard", rt),
 		makeTreeOrPanic("public/app/plugins/datasource/elasticsearch", "elasticsearch", rt),
+		makeTreeOrPanic("public/app/plugins/datasource/fifemon-graphql-datasource", "fifemon_graphql_datasource", rt),
 		makeTreeOrPanic("public/app/plugins/datasource/grafadruid-druid-datasource", "grafadruid_druid_datasource", rt),
 		makeTreeOrPanic("public/app/plugins/datasource/grafana", "grafana", rt),
 		makeTreeOrPanic("public/app/plugins/datasource/grafana-azure-monitor-datasource", "grafana_azure_monitor_datasource", rt),

pkg/services/publicdashboards/supported_datasources_gen.go

@@ -25,6 +25,8 @@ const postgresPlugin = async () =>
   await import(/* webpackChunkName: "postgresPlugin" */ 'app/plugins/datasource/postgres/module');
 const grafadruidDruidDatasourcePlugin = async () =>
   await import(/* webpackChunkName: "druidPlugin" */ 'app/plugins/datasource/grafadruid-druid-datasource/module');
+const fifemonGraphqlDatasourcePlugin = async () =>
+  await import(/* webpackChunkName: "graphqlPlugin" */ 'app/plugins/datasource/fifemon-graphql-datasource/module');
 const prometheusPlugin = async () =>
   await import(/* webpackChunkName: "prometheusPlugin" */ 'app/plugins/datasource/prometheus/module');
 const mssqlPlugin = async () =>
@@ -116,6 +118,7 @@ const builtInPlugins: any = {
   'app/plugins/datasource/postgres/module': postgresPlugin,
   'app/plugins/datasource/mssql/module': mssqlPlugin,
   'app/plugins/datasource/grafadruid-druid-datasource/module': grafadruidDruidDatasourcePlugin,
+  'app/plugins/datasource/fifemon-graphql-datasource/module': fifemonGraphqlDatasourcePlugin,
   'app/plugins/datasource/prometheus/module': prometheusPlugin,
   'app/plugins/datasource/testdata/module': testDataDSPlugin,
   'app/plugins/datasource/cloud-monitoring/module': cloudMonitoringPlugin,

public/app/features/plugins/built_in_plugins.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { MyDataSourceOptions } from './types';
+
+export type Props = DataSourcePluginOptionsEditorProps<MyDataSourceOptions>;
+export const ConfigEditor = (props: Props) => {
+  const { options, onOptionsChange } = props;
+
+  return (
+    <>
+      <DataSourceHttpSettings
+        defaultUrl="http://localhost:9999"
+        dataSourceConfig={options}
+        onChange={onOptionsChange}
+        showAccessOptions={true}
+      />
+    </>
+  );
+};