[bugfix] deepflow datasource, not support use grafana variables in input

**Phenomenon and reproduction steps**

none

**Root cause and solution**

none

**Impactions**

none

**Test method**

none

**Affected branch(es)**

- main

**Checklist**

- [ ] Dependencies update required
- [ ] Common bug (similar problem in other repo)

Author: twou12031

deepflow-querier-datasource/src/QueryEditor.tsx

@@ -49,7 +49,7 @@ import { TracingIdSelector } from 'components/TracingIdSelector'
 import { format as sqlFormatter } from 'sql-formatter'
 import './QueryEditor.css'
 import { getI18NLabelByName } from 'utils/i18n'
-import { genQueryParams } from 'utils/genQueryParams'
+import { genQueryParams, replaceIntervalAndVariables } from 'utils/genQueryParams'
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>
 
@@ -561,7 +561,8 @@ export class QueryEditor extends PureComponent<Props> {
       }
       let newQuery
       if (appType !== APPTYPE_APP_TRACING_FLAME) {
-        const parsedQueryData = genQueryParams(addTimeToWhere(dataObj), {})
+        const _queryText = JSON.stringify(addTimeToWhere(dataObj))
+        const parsedQueryData = genQueryParams(JSON.parse(replaceIntervalAndVariables(_queryText)), {})
         // @ts-ignore
         const querierJsResult = querierJs.dfQuery(_.cloneDeep(parsedQueryData))
         const { returnTags, returnMetrics, sql } = querierJsResult.resource[0]

deepflow-querier-datasource/src/datasource.ts

@@ -19,7 +19,7 @@ import {
 } from 'utils/tools'
 import _ from 'lodash'
 import * as querierJs from 'deepflow-sdk-js'
-import { genQueryParams, replaceInterval } from 'utils/genQueryParams'
+import { genQueryParams, replaceIntervalAndVariables } from 'utils/genQueryParams'
 import { DATA_SOURCE_SETTINGS, QUERY_DATA_CACHE, SQL_CACHE } from 'utils/cache'
 import { MyVariableQuery } from 'components/VariableQueryEditor'
 import { Observable, of, zip } from 'rxjs'
@@ -191,7 +191,7 @@ export class DataSource extends DataSourceWithBackend<MyQuery, MyDataSourceOptio
   }
 
   applyTemplateVariables(query: MyQuery & { requestId: string }, scopedVars: ScopedVars): any {
-    const _queryText = replaceInterval(query.queryText, scopedVars)
+    const _queryText = replaceIntervalAndVariables(query.queryText, scopedVars)
     const queryData = JSON.parse(_queryText)
     const result = {} as MyQuery
     // set new params after replaced variables

deepflow-querier-datasource/src/utils/genQueryParams.ts

@@ -497,7 +497,7 @@ export function genQueryParams(queryData: Record<any, any>, scopedVars: ScopedVa
     'offset',
     'appType'
   ] as const
-  type KeyTypes = typeof keys[number]
+  type KeyTypes = (typeof keys)[number]
   type Data = {
     [K in KeyTypes]?: string | BasicData[]
   }
@@ -529,19 +529,18 @@ export function genQueryParams(queryData: Record<any, any>, scopedVars: ScopedVa
   return result
 }
 
-export const replaceInterval = (queryText: string, scopedVars: ScopedVars) => {
+export const replaceIntervalAndVariables = (queryText: string, scopedVars?: ScopedVars) => {
+  let _queryText = queryText
   if (typeof scopedVars?.__interval_ms?.value === 'number') {
     const intervalSecond = scopedVars.__interval_ms.value / 1000
-    return (
-      queryText
-        // convert string to number
-        .split(`"${VAR_INTERVAL_LABEL}"`)
-        .join(intervalSecond + '')
-        .split(VAR_INTERVAL_LABEL)
-        .join(intervalSecond + '')
-    )
+    _queryText = queryText
+      // convert string to number
+      .split(`"${VAR_INTERVAL_LABEL}"`)
+      .join(intervalSecond + '')
+      .split(VAR_INTERVAL_LABEL)
+      .join(intervalSecond + '')
   }
-  return queryText
+  return getTemplateSrv().replace(_queryText, scopedVars)
 }
 
 export default genQueryParams