fetch datasource query settings from query editor (#149)

src/ConfigEditor.tsx

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import { TabsBar, Tab, TabContent, IconName } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps, SelectableValue, KeyValue } from '@grafana/data';
 import { DruidSettings, DruidSecureSettings } from './types';
+import { normalizeData } from './configuration/settings';
 import { DruidConnectionSettings } from './configuration/ConnectionSettings';
 import { ConnectionSettingsOptions } from './configuration/ConnectionSettings/types';
 import { DruidQueryDefaultSettings } from './configuration/QuerySettings';
@@ -24,43 +25,18 @@ export class ConfigEditor extends PureComponent<Props, State> {
     activeTab: Tabs.Connection,
   };
 
-  normalizeData = (data: Record<string, any>, namespaced: boolean, namespace: string): object => {
-    const keyPrefix = namespace + '.';
-    const keys = Object.keys(data).filter((key) => {
-      if (namespaced) {
-        return !key.includes('.');
-      } else {
-        return key.startsWith(keyPrefix);
-      }
-    });
-    if (keys.length === 0) {
-      return {};
-    }
-    return keys
-      .map((key, index) => {
-        let newKey: string = keyPrefix + key;
-        if (!namespaced) {
-          newKey = key.replace(keyPrefix, '');
-        }
-        return { [newKey]: data[key] };
-      })
-      .reduce((acc, item) => {
-        return { ...acc, ...item };
-      });
-  };
-
   onSelectTab = (item: SelectableValue<Tabs>) => {
     this.setState({ activeTab: item.value! });
   };
 
   onConnectionOptionsChange = (connectionSettingsOptions: ConnectionSettingsOptions) => {
     const { options, onOptionsChange } = this.props;
     const { settings, secretSettings, secretSettingsFields } = connectionSettingsOptions;
-    const connectionSettings = this.normalizeData(settings, true, 'connection');
+    const connectionSettings = normalizeData(settings, true, 'connection');
     const jsonData = { ...options.jsonData, ...connectionSettings };
-    const connectionSecretSettings = this.normalizeData(secretSettings, true, 'connection');
+    const connectionSecretSettings = normalizeData(secretSettings, true, 'connection');
     const secureJsonData = { ...options.secureJsonData, ...connectionSecretSettings };
-    const connectionSecretSettingsFields = this.normalizeData(
+    const connectionSecretSettingsFields = normalizeData(
       secretSettingsFields,
       true,
       'connection'
@@ -72,24 +48,24 @@ export class ConfigEditor extends PureComponent<Props, State> {
   onQueryOptionsChange = (querySettingsOptions: QuerySettingsOptions) => {
     const { onOptionsChange, options } = this.props;
     const { settings } = querySettingsOptions;
-    const querySettings = this.normalizeData(settings, true, 'query');
+    const querySettings = normalizeData(settings, true, 'query');
     const jsonData = { ...options.jsonData, ...querySettings };
     onOptionsChange({ ...options, jsonData });
   };
 
   connectionOptions = (): ConnectionSettingsOptions => {
     const { jsonData, secureJsonData, secureJsonFields } = this.props.options;
     return {
-      settings: this.normalizeData(jsonData, false, 'connection'),
-      secretSettings: this.normalizeData(secureJsonData || {}, false, 'connection'),
-      secretSettingsFields: this.normalizeData(secureJsonFields || {}, false, 'connection') as KeyValue<boolean>,
+      settings: normalizeData(jsonData, false, 'connection'),
+      secretSettings: normalizeData(secureJsonData || {}, false, 'connection'),
+      secretSettingsFields: normalizeData(secureJsonFields || {}, false, 'connection') as KeyValue<boolean>,
     };
   };
 
   queryOptions = (): QuerySettingsOptions => {
     const { jsonData } = this.props.options;
     return {
-      settings: this.normalizeData(jsonData, false, 'query'),
+      settings: normalizeData(jsonData, false, 'query'),
     };
   };
 

src/DruidDataSource.ts

@@ -5,8 +5,10 @@ import { DruidSettings, DruidQuery } from './types';
 const druidVariableRegex = /\"\[\[(\w+)(?::druid:(\w+))?\]\]\"|\"\${(\w+)(?::druid:(\w+))?}\"/g;
 
 export class DruidDataSource extends DataSourceWithBackend<DruidQuery, DruidSettings> {
+  settingsData: DruidSettings;
   constructor(instanceSettings: DataSourceInstanceSettings<DruidSettings>) {
     super(instanceSettings);
+    this.settingsData = instanceSettings.jsonData;
   }
   filterQuery(query: DruidQuery) {
     return !query.hide;

src/QueryEditor.tsx

@@ -4,6 +4,7 @@ import { QueryEditorProps } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { DruidDataSource } from './DruidDataSource';
 import { DruidSettings, DruidQuery } from './types';
+import { normalizeData } from './configuration/settings';
 import { DruidQuerySettings } from './configuration/QuerySettings';
 import { QuerySettingsOptions } from './configuration/QuerySettings/types';
 import { DruidQueryBuilder } from './builder/';
@@ -14,7 +15,11 @@ interface Props extends QueryEditorProps<DruidDataSource, DruidQuery, DruidSetti
 export const QueryEditor = (props: Props) => {
   const { builder, settings } = props.query;
   const builderOptions = { builder: builder || {}, settings: settings || {} };
-  const settingsOptions = { settings: settings || {} };
+  const datasourceQuerySettings = normalizeData(props.datasource.settingsData, false, 'query');
+  /*TODO merging settings that way is not good: things like query context won't get merged
+  the query settings context will replace the datasource query settings context instead of merging
+  backend side of the plugin does already merge them properly: we need to move the (proper) merging from backend to frontend*/
+  const settingsOptions = { settings: {...datasourceQuerySettings, ...settings} || {} };
   const onBuilderOptionsChange = (queryBuilderOptions: QueryBuilderOptions) => {
     const { query, onChange, onRunQuery } = props;
     //todo: need to implement some kind of hook system to alter a query from modules

src/configuration/settings.ts

@@ -0,0 +1,24 @@
+export function normalizeData(data: Record<string, any>, namespaced: boolean, namespace: string): object {
+  const keyPrefix = namespace + '.';
+  const keys = Object.keys(data).filter((key) => {
+    if (namespaced) {
+      return !key.includes('.');
+    } else {
+      return key.startsWith(keyPrefix);
+    }
+  });
+  if (keys.length === 0) {
+    return {};
+  }
+  return keys
+    .map((key, index) => {
+      let newKey: string = keyPrefix + key;
+      if (!namespaced) {
+        newKey = key.replace(keyPrefix, '');
+      }
+      return { [newKey]: data[key] };
+    })
+    .reduce((acc, item) => {
+      return { ...acc, ...item };
+    });
+};