feat: replace time unit in queryText

src/components/QueryEditor.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useMemo, useCallback, useEffect} from 'react'
-import {Button, Modal, SegmentSection, Select, InlineFieldRow, SegmentInput} from '@grafana/ui'
+import {Button, Modal, SegmentSection, Select, InlineFieldRow, SegmentInput, Drawer} from '@grafana/ui'
 import {QueryEditorProps, SelectableValue} from '@grafana/data'
 import {MacroType} from '@grafana/experimental'
 import {FlightSQLDataSource} from '../datasource'
@@ -13,7 +13,7 @@ import {QueryHelp} from './QueryHelp'
 export function QueryEditor(props: QueryEditorProps<FlightSQLDataSource, SQLQuery, FlightSQLDataSourceOptions>) {
   const {onChange, query, datasource} = props
   const [warningModal, showWarningModal] = useState(false)
-  const [helpModal, showHelpModal] = useState(false)
+  const [helpVisible, setHelpVisible] = useState(false)
   const [sqlInfo, setSqlInfo] = useState<any>()
   const [macros, setMacros] = useState<any>()
   const [rawEditor, setRawEditor] = useState<any>(false)
@@ -29,7 +29,7 @@ export function QueryEditor(props: QueryEditorProps<FlightSQLDataSource, SQLQuer
       const systemFunctions = res?.frames[0].data.values[1][20] || []
       const sqlDateTimeFunctions = res?.frames[0].data.values[1][21] || []
       const functions = [...numericFunctions, ...stringFunctions, ...systemFunctions, ...sqlDateTimeFunctions]
-      setSqlInfo({keywords: keywords, builtinFunctions: functions})
+      setSqlInfo({keywords: keywords, builtinFunctions: functions || []})
     })()
   }, [datasource])
 
@@ -38,7 +38,7 @@ export function QueryEditor(props: QueryEditorProps<FlightSQLDataSource, SQLQuer
       const res = await datasource.getMacros()
       const prefix = `$__`
       const macroArr = res?.macros.map((m: any) => prefix.concat(m))
-      const macros = macroArr.map((m: any) => ({text: m, name: m, id: m, type: MacroType.Value, args: []}))
+      const macros = macroArr.map((m: any) => ({text: m, name: m, id: m, type: MacroType.Value, args: []}));
       setMacros(macros)
     })()
   }, [datasource])
@@ -109,6 +109,13 @@ export function QueryEditor(props: QueryEditorProps<FlightSQLDataSource, SQLQuer
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const showHelp = () => {
+    setHelpVisible(true)
+  }
+  const hideHelp = () => {
+    setHelpVisible(false);
+  }
+
   return (
     <>
       {warningModal && (
@@ -172,7 +179,7 @@ export function QueryEditor(props: QueryEditorProps<FlightSQLDataSource, SQLQuer
           <Button style={{marginLeft: '5px'}} fill="outline" size="md" onClick={() => showWarningModal(!warningModal)}>
             {rawEditor ? 'Builder View' : 'Edit SQL'}
           </Button>
-          <Button style={{marginLeft: '5px'}} fill="outline" size="md" onClick={() => showHelpModal(!helpModal)}>
+          <Button style={{marginLeft: '5px'}} fill="outline" size="md" onClick={showHelp}>
             Show Query Help
           </Button>
         </InlineFieldRow>
@@ -186,7 +193,7 @@ export function QueryEditor(props: QueryEditorProps<FlightSQLDataSource, SQLQuer
           </SegmentSection>{' '}
         </div>
       )}
-      {helpModal && <QueryHelp />}
+      {helpVisible && <Drawer title="Query Help" onClose={hideHelp} closeOnMaskClick={true}><QueryHelp /></Drawer>}
     </>
   )
 }

src/components/QueryHelp.tsx

@@ -1,9 +1,7 @@
 import React from 'react'
 
-import {Alert} from '@grafana/ui'
-
 export const QueryHelp = () => (
-  <Alert title="Query Help" severity="info">
+  <div style={{padding: '10px 0'}}>
     <div>
       <h3>Format Options:</h3>
       <h4>Table(default):</h4>
@@ -15,7 +13,7 @@ export const QueryHelp = () => (
     <div>
       <h3>Supported Macros:</h3>
       <li>
-        $__dateBin(time) -&gt; date_bin(interval &apos;30 second&apos;, time, timestamp
+        $__dateBin(time) -&gt; date_bin(interval &apos;30 seconds&apos;, time, timestamp
         &apos;1970-01-01T00:00:00Z&apos;)
       </li>
       <li>
@@ -45,5 +43,5 @@ export const QueryHelp = () => (
       <li> $__timeRangeTo(time) -&gt; time &lt;= &apos;2023-01-01T01:00:00Z&apos;</li>
       <li>$__timeTo(time) -&gt; cast(time as timestamp)</li>
     </div>
-  </Alert>
+  </div>
 )

src/datasource.ts

@@ -63,7 +63,39 @@ toMetricFindValue(rsp: DataQueryResponse): MetricFindValue[] {
     return value
   }
 
+  replaceTimeUnit(timeText: String) {
+    const replaced = timeText.replace(/(\d+)(ms|s|m|h|d)/g, (match, p1, p2) => {
+      switch (p2) {
+        case 'ms':
+          return `${p1} milliseconds`;
+        case 's':
+          return `${p1} seconds`;
+        case 'm':
+          return `${p1} minutes`;
+        case 'h':
+          return `${p1} hours`;
+        case 'd':
+          return `${p1} days`;
+        default:
+          return match;
+      }
+    });
+    console.log('replaced', replaced);
+    return replaced;
+  }
+
+  overrideGrafanaVars(scopedVars: ScopedVars) {
+    // Replace time unit to match Datalayers
+    if (scopedVars.__interval.text) {
+      const v = this.replaceTimeUnit(scopedVars.__interval.value);
+      scopedVars.__interval.value = v;
+    }
+
+    return scopedVars;
+  }
+
   applyTemplateVariables(query: SQLQuery, scopedVars: ScopedVars): Record<string, any> {
+    this.overrideGrafanaVars(scopedVars);
     const interpolatedQuery: SQLQuery = {
       ...query,
       queryText: getTemplateSrv().replace(query.queryText, scopedVars, this.interpolateVariable),