diff --git a/packages/grafana-sql/src/components/QueryEditor.tsx b/packages/grafana-sql/src/components/QueryEditor.tsx index f0df374004c..97e24487a80 100644 --- a/packages/grafana-sql/src/components/QueryEditor.tsx +++ b/packages/grafana-sql/src/components/QueryEditor.tsx @@ -16,6 +16,7 @@ import { VisualEditor } from './visual-query-builder/VisualEditor'; export interface SqlQueryEditorProps extends QueryEditorProps { queryHeaderProps?: Pick; + isVariableQuery?: boolean; } export default function SqlQueryEditor({ @@ -25,6 +26,7 @@ export default function SqlQueryEditor({ onRunQuery, range, queryHeaderProps, + isVariableQuery = false, }: SqlQueryEditorProps) { const [isQueryRunnable, setIsQueryRunnable] = useState(true); const db = datasource.getDB(); @@ -113,6 +115,7 @@ export default function SqlQueryEditor({ queryRowFilter={queryRowFilter} onValidate={setIsQueryRunnable} range={range} + isVariableQuery={isVariableQuery} /> )} diff --git a/packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx b/packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx index 950b089b334..2bd4ce58c65 100644 --- a/packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx +++ b/packages/grafana-sql/src/components/visual-query-builder/SelectRow.tsx @@ -20,18 +20,25 @@ interface SelectRowProps { onQueryChange: (sql: SQLQuery) => void; db: DB; columns: Array>; + isVariableQuery?: boolean; } -export function SelectRow({ query, onQueryChange, db, columns }: SelectRowProps) { +export function SelectRow({ query, onQueryChange, db, columns, isVariableQuery }: SelectRowProps) { const styles = useStyles2(getStyles); const { onSqlChange } = useSqlChange({ query, onQueryChange, db }); - const timeSeriesAliasOpts: Array> = []; + const aliasOpts: Array> = []; // Add necessary alias options for time series format // when that format has been selected if (query.format === QueryFormat.Timeseries) { - timeSeriesAliasOpts.push({ label: t('grafana-sql.components.select-row.label.time', 'time'), value: 'time' }); - timeSeriesAliasOpts.push({ label: t('grafana-sql.components.select-row.label.value', 'value'), value: 'value' }); + aliasOpts.push({ label: t('grafana-sql.components.select-row.label.time', 'time'), value: 'time' }); + aliasOpts.push({ label: t('grafana-sql.components.select-row.label.value', 'value'), value: 'value' }); + } + + // Add variable query alias options for text and value + if (isVariableQuery) { + aliasOpts.push({ label: t('grafana-sql.components.select-row.label.__text', '__text'), value: '__text' }); + aliasOpts.push({ label: t('grafana-sql.components.select-row.label.__value', '__value'), value: '__value' }); } const onAggregationChange = useCallback( @@ -145,7 +152,7 @@ export function SelectRow({ query, onQueryChange, db, columns }: SelectRowProps) value={item.alias ? toOption(item.alias) : null} inputId={`select-alias-${index}-${uniqueId()}`} data-testid={selectors.components.SQLQueryEditor.selectAlias} - options={timeSeriesAliasOpts} + options={aliasOpts} onChange={onAliasChange(item, index)} isClearable menuShouldPortal diff --git a/packages/grafana-sql/src/components/visual-query-builder/VisualEditor.tsx b/packages/grafana-sql/src/components/visual-query-builder/VisualEditor.tsx index 6a0b25eea10..a69cccbe35b 100644 --- a/packages/grafana-sql/src/components/visual-query-builder/VisualEditor.tsx +++ b/packages/grafana-sql/src/components/visual-query-builder/VisualEditor.tsx @@ -16,9 +16,18 @@ interface VisualEditorProps extends QueryEditorProps { db: DB; queryRowFilter: QueryRowFilter; onValidate: (isValid: boolean) => void; + isVariableQuery?: boolean; } -export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }: VisualEditorProps) => { +export const VisualEditor = ({ + query, + db, + queryRowFilter, + onChange, + onValidate, + range, + isVariableQuery, +}: VisualEditorProps) => { const state = useAsync(async () => { const fields = await db.fields(query); return fields; @@ -28,7 +37,13 @@ export const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, <> - + {queryRowFilter.filter && ( diff --git a/public/app/plugins/datasource/grafana-postgresql-datasource/VariableQueryEditor.tsx b/public/app/plugins/datasource/grafana-postgresql-datasource/VariableQueryEditor.tsx index 9a15bfdd3e4..f7155c60012 100644 --- a/public/app/plugins/datasource/grafana-postgresql-datasource/VariableQueryEditor.tsx +++ b/public/app/plugins/datasource/grafana-postgresql-datasource/VariableQueryEditor.tsx @@ -15,6 +15,7 @@ export function VariableQueryEditor(props: QueryEditorProps; }