fix: set format onRunQuery new button (#59)

* set format onRunQuery new button
* always interpolate

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.9.10
+
+Fix - Set format when using the new Run Query button.
+
 ## 0.9.9
 
 Feature - Query Builder.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clickhouse-datasource",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "description": "Clickhouse Datasource",
   "scripts": {
     "build": "grafana-toolkit plugin:build",

src/components/SQLEditor.tsx

@@ -3,34 +3,17 @@ import { QueryEditorProps } from '@grafana/data';
 import { CodeEditor } from '@grafana/ui';
 import { Datasource } from '../data/CHDatasource';
 import { registerSQL, Range, Fetcher } from './sqlProvider';
-import { CHQuery, CHConfig, Format, QueryType } from '../types';
+import { CHQuery, CHConfig, QueryType } from '../types';
 import { styles } from '../styles';
 import { fetchSuggestions as sugg, Schema } from './suggestions';
 import { selectors } from 'selectors';
-import sqlToAST from '../data/ast';
-import { isString } from 'lodash';
+import { getFormat } from './editor';
 
 type SQLEditorProps = QueryEditorProps<Datasource, CHQuery, CHConfig>;
 
 export const SQLEditor = (props: SQLEditorProps) => {
   const { query, onRunQuery, onChange, datasource } = props;
 
-  const getFormat = (sql: string): Format => {
-    // convention to format as time series
-    // first field as "time" alias and requires at least 2 fields (time and metric)
-    const ast = sqlToAST(sql);
-    const select = ast.get('SELECT');
-    if (isString(select)) {
-      // remove function parms that may contain commas
-      const cleanSelect = select.replace(/\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)/, '');
-      const fields = cleanSelect.split(',');
-      if (fields.length > 1) {
-        return fields[0].toLowerCase().endsWith('as time') ? Format.TIMESERIES : Format.TABLE;
-      }
-    }
-    return Format.TABLE;
-  };
-
   const onSqlChange = (sql: string) => {
     const format = getFormat(sql);
     onChange({ ...query, rawSql: sql, format, queryType: QueryType.SQL });

src/components/editor.ts

@@ -0,0 +1,19 @@
+import sqlToAST from 'data/ast';
+import { Format } from 'types';
+import { isString } from 'lodash';
+
+export const getFormat = (sql: string): Format => {
+  // convention to format as time series
+  // first field as "time" alias and requires at least 2 fields (time and metric)
+  const ast = sqlToAST(sql);
+  const select = ast.get('SELECT');
+  if (isString(select)) {
+    // remove function parms that may contain commas
+    const cleanSelect = select.replace(/\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)/, '');
+    const fields = cleanSelect.split(',');
+    if (fields.length > 1) {
+      return fields[0].toLowerCase().endsWith('as time') ? Format.TIMESERIES : Format.TABLE;
+    }
+  }
+  return Format.TABLE;
+};

src/data/CHDatasource.ts

@@ -52,19 +52,16 @@ export class Datasource extends DataSourceWithBackend<CHQuery, CHConfig> {
   }
 
   applyTemplateVariables(query: CHQuery, scoped: ScopedVars): CHQuery {
-    if (query.queryType === QueryType.SQL || query.queryType === QueryType.Builder) {
-      let rawQuery = query.rawSql || '';
-      // we want to skip applying ad hoc filters when we are getting values for ad hoc filters
-      if (!this.skipAdHocFilter) {
-        rawQuery = this.adHocFilter.apply(rawQuery, (this.templateSrv as any)?.getAdhocFilters(this.name));
-      }
-      this.skipAdHocFilter = false;
-      return {
-        ...query,
-        rawSql: this.replace(rawQuery, scoped) || '',
-      };
+    let rawQuery = query.rawSql || '';
+    // we want to skip applying ad hoc filters when we are getting values for ad hoc filters
+    if (!this.skipAdHocFilter) {
+      rawQuery = this.adHocFilter.apply(rawQuery, (this.templateSrv as any)?.getAdhocFilters(this.name));
     }
-    return query;
+    this.skipAdHocFilter = false;
+    return {
+      ...query,
+      rawSql: this.replace(rawQuery, scoped) || '',
+    };
   }
 
   replace(value?: string, scopedVars?: ScopedVars) {

src/views/CHQueryEditor.tsx

@@ -9,6 +9,7 @@ import { Preview } from 'components/queryBuilder/Preview';
 import { QueryTypeSwitcher } from 'components/QueryTypeSwitcher';
 import { Button } from '@grafana/ui';
 import { styles } from 'styles';
+import { getFormat } from 'components/editor';
 
 export type CHQueryEditorProps = QueryEditorProps<Datasource, CHQuery, CHConfig>;
 
@@ -55,13 +56,25 @@ const CHEditorByType = (props: CHQueryEditorProps) => {
 };
 
 export const CHQueryEditor = (props: CHQueryEditorProps) => {
+  const { query, onChange, onRunQuery } = props;
+
+  const runQuery = () => {
+    if (query.queryType === QueryType.SQL) {
+      const format = getFormat(query.rawSql);
+      if (format !== query.format) {
+        onChange({ ...query, format });
+      }
+      onRunQuery();
+    }
+  };
+
   return (
     <>
       <div className={'gf-form ' + styles.QueryEditor.queryType}>
         <span>
           <QueryTypeSwitcher {...props} />
         </span>
-        <Button onClick={() => props.onRunQuery()}>Run Query</Button>
+        <Button onClick={() => runQuery()}>Run Query</Button>
       </div>
       <CHEditorByType {...props} />
     </>