[feature] Add support for adhoc filters. (#103)

.env

@@ -1,7 +1,7 @@
 COMPOSE_DOCKER_CLI_BUILD=1
 COMPOSE_FILE="docker/docker-compose.yml"
 COMPOSE_PROJECT_NAME="druidgrafana"
-DRUID_VERSION="24.0.0"
-GRAFANA_VERSION="9.1.6"
+DRUID_VERSION="25.0.0"
+GRAFANA_VERSION="9.3.6"
 POSTGRES_VERSION="14.5"
 ZOOKEEPER_VERSION="3.8.0"

.gitignore

@@ -43,3 +43,6 @@ e2e-results/
 
 #API key
 .api.key
+
+# Mac OS
+.DS_Store

README.md

@@ -102,6 +102,32 @@ Where `$VERSION` is for instance `1.0.0` and `$YOUR_PLUGIN_DIR` is for instance
 
 (Source: https://grafana.com/docs/grafana/latest/plugins/installation/)
 
+### Build lolo-druid plugin on Mac and Install it via Kubernetes manually
+#### Build lolo-druid plugin
+
+Tested on Mac Pro M1 - Monterey v12.6:
+
+* Launch Desktop Docker
+* Build
+```sh
+./mage-macos buildAll
+```
+
+#### Copy the plugin into a Grafana Pod in Kubernetes
+
+* Make sure you have set a proper Kubernetes context
+* Rename the `dist` folder into like `lolo-grafadruid-druid-datasource`
+* Copy the plugin into a Grafana Pod in Kubernetes (e.g.,)
+```sh
+$ kubectl get pod -n <yourNamespace>
+NAME                       READY   STATUS    RESTARTS   AGE
+grafana-7c549965bc-47trw   1/1     Running   0          1d
+
+$ kubectl cp -n <yourNamespace> ./dist grafana-7c549965bc-47trw:/var/lib/grafana/plugins/lolo-grafadruid-druid-datasource
+```
+* Make sure your Grafana pod has the env variable: `GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS : lolo-grafadruid-druid-datasource`
+* Restart the pod and check if lolo-druid is installed :)
+
 ## Examples
 
 You can try out various advanced features of the plugin by importing the [demo dashboard](https://github.com/grafadruid/druid-grafana/blob/master/docker/grafana/dashboards/dashboard.json) and running it against the Wikipedia dataset used in the [Druid quickstart tutorial](https://druid.apache.org/docs/latest/tutorials/index.html#step-4-load-data).

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "druid-grafana",
+  "name": "loloco-druid-grafana",
   "version": "1.4.1",
   "description": "Connects Grafana to Druid",
   "scripts": {
@@ -9,7 +9,7 @@
     "dev": "grafana-toolkit plugin:dev",
     "watch": "grafana-toolkit plugin:dev --watch"
   },
-  "author": "Grafadruid",
+  "author": "Loloco Grafadruid",
   "license": "Apache-2.0",
   "devDependencies": {
     "@emotion/css": "^11.10.0",
@@ -22,7 +22,8 @@
     "ace-builds": "^1.11.2",
     "react-ace": "^10.1.0",
     "react-datepicker": "^4.8.0",
-    "tslib": "^2.4.0"
+    "tslib": "^2.4.0",
+    "node-sql-parser": "^4.6.6"
   },
   "engines": {
     "node": ">=16"

src/ConfigEditor.tsx

@@ -8,10 +8,20 @@ import { DruidConnectionSettings } from './configuration/ConnectionSettings';
 import { ConnectionSettingsOptions } from './configuration/ConnectionSettings/types';
 import { DruidQueryDefaultSettings } from './configuration/QuerySettings';
 import { QuerySettingsOptions } from './configuration/QuerySettings/types';
+import { DruidAdhocSettings } from 'configuration/AdhocSettings';
+import { AdhocSettingsOptions } from 'configuration/AdhocSettings/types';
+
+interface TabType {
+  label: string;
+  value: Tabs;
+  content: JSX.Element;
+  icon: IconName;
+}
 
 enum Tabs {
   Connection,
   Query,
+  Adhoc,
 }
 
 interface Props extends DataSourcePluginOptionsEditorProps<DruidSettings, DruidSecureSettings> {}
@@ -36,11 +46,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
     const jsonData = { ...options.jsonData, ...connectionSettings };
     const connectionSecretSettings = normalizeData(secretSettings, true, 'connection');
     const secureJsonData = { ...options.secureJsonData, ...connectionSecretSettings };
-    const connectionSecretSettingsFields = normalizeData(
-      secretSettingsFields,
-      true,
-      'connection'
-    ) as KeyValue<boolean>;
+    const connectionSecretSettingsFields = normalizeData(secretSettingsFields, true, 'connection') as KeyValue<boolean>;
     const secureJsonFields = { ...options.secureJsonFields, ...connectionSecretSettingsFields };
     onOptionsChange({ ...options, jsonData, secureJsonData, secureJsonFields });
   };
@@ -53,6 +59,14 @@ export class ConfigEditor extends PureComponent<Props, State> {
     onOptionsChange({ ...options, jsonData });
   };
 
+  onAdhocOptionsChange = (adhocSettingsOptions: AdhocSettingsOptions) => {
+    const { onOptionsChange, options } = this.props;
+    const { settings } = adhocSettingsOptions;
+    const adhocSettings = normalizeData(settings, true, 'adhoc');
+    const jsonData = { ...options.jsonData, ...adhocSettings };
+    onOptionsChange({ ...options, jsonData });
+  };
+
   connectionOptions = (): ConnectionSettingsOptions => {
     const { jsonData, secureJsonData, secureJsonFields } = this.props.options;
     return {
@@ -69,24 +83,38 @@ export class ConfigEditor extends PureComponent<Props, State> {
     };
   };
 
+  adhocOptions = (): AdhocSettingsOptions => {
+    const { jsonData } = this.props.options;
+    return {
+      settings: normalizeData(jsonData, false, 'adhoc'),
+    };
+  };
+
   render() {
     const connectionOptions = this.connectionOptions();
     const queryOptions = this.queryOptions();
+    const adhocOptions = this.adhocOptions();
 
-    const ConnectionTab = {
+    const ConnectionTab: TabType = {
       label: 'Connection',
       value: Tabs.Connection,
       content: <DruidConnectionSettings options={connectionOptions} onOptionsChange={this.onConnectionOptionsChange} />,
       icon: 'signal',
     };
-    const QueryTab = {
+    const QueryTab: TabType = {
       label: 'Query defaults',
       value: Tabs.Query,
       content: <DruidQueryDefaultSettings options={queryOptions} onOptionsChange={this.onQueryOptionsChange} />,
       icon: 'database',
     };
+    const AdhochTab: TabType = {
+      label: 'Adhoc variables',
+      value: Tabs.Adhoc,
+      content: <DruidAdhocSettings options={adhocOptions} onOptionsChange={this.onAdhocOptionsChange} />,
+      icon: 'code-branch',
+    };
 
-    const tabs = [ConnectionTab, QueryTab];
+    const tabs = [ConnectionTab, QueryTab, AdhochTab];
     const { activeTab } = this.state;
 
     return (
@@ -98,7 +126,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               label={t.label}
               active={t.value === activeTab}
               onChangeTab={() => this.onSelectTab(t)}
-              icon={t.icon as IconName}
+              icon={t.icon}
             />
           ))}
         </TabsBar>