mirror of https://github.com/grafana/grafana
SQL: Add macro support in select case (#88514)
* Feat: timeGroup macro handling in VQB * Add tests * Add functions to SQL ds * Fix lint errors * Add feature toggle * Add rendering based on object * Fix lint * Fix CI failures * Fix tests * Address review comments * Add docs * Fix JSX runtime warnings * Remove docs part that mentions suggest more macros * Update docs/sources/shared/datasources/sql-query-builder-macros.md Co-authored-by: Jack Baldry <jack.baldry@grafana.com> * Add smoke test for this feature * lint * Add supported macros to influx * Add setupTests.ts to include in tsconfig.json * Import jest-dom instead of setupTests.ts --------- Co-authored-by: Jack Baldry <jack.baldry@grafana.com>pull/95794/head
Zoltán Bedi
1 year ago
committed by
GitHub
parent
aacc83be5c
commit
85c696c4ad
@ -0,0 +1,22 @@ |
||||
--- |
||||
headless: true |
||||
labels: |
||||
products: |
||||
- enterprise |
||||
- oss |
||||
--- |
||||
|
||||
#### Macros |
||||
|
||||
You can enable macros support in the select clause to create time-series queries. |
||||
|
||||
{{< docs/experimental product="Macros support in visual query builder" featureFlag="`sqlQuerybuilderFunctionParameters`" >}} |
||||
|
||||
Use the **Data operations** drop-down to select a macro like `$__timeGroup` or `$__timeGroupAlias`. |
||||
Select a time column from the **Column** drop-down and a time interval from the **Interval** drop-down to create a time-series query. |
||||
|
||||
{{< figure src="/media/docs/grafana/data-sources/screenshot-sql-builder-time-series-query.png" class="docs-image--no-shadow" caption="SQL query builder time-series query" >}} |
||||
|
||||
You can also add custom value to the **Data operations**. |
||||
For example, a function that's not in the drop-down list. |
||||
This allows you to add any number of parameters. |
||||
@ -0,0 +1,23 @@ |
||||
import { PlaywrightTestArgs } from '@playwright/test'; |
||||
|
||||
import { PluginFixture } from '@grafana/plugin-e2e'; |
||||
|
||||
import { datasetResponse, fieldsResponse, tablesResponse } from './mocks/mysql.mocks'; |
||||
|
||||
export async function mockDataSourceRequest({ context, explorePage, selectors }: PlaywrightTestArgs & PluginFixture) { |
||||
await explorePage.datasource.set('gdev-mysql'); |
||||
await context.route(selectors.apis.DataSource.queryPattern, async (route, request) => { |
||||
const refId = request.postDataJSON().queries[0].refId; |
||||
if (/fields-.*/g.test(refId)) { |
||||
return route.fulfill({ json: fieldsResponse(refId), status: 200 }); |
||||
} |
||||
switch (refId) { |
||||
case 'tables': |
||||
return route.fulfill({ json: tablesResponse, status: 200 }); |
||||
case 'datasets': |
||||
return route.fulfill({ json: datasetResponse, status: 200 }); |
||||
default: |
||||
return route.continue(); |
||||
} |
||||
}); |
||||
} |
||||
@ -0,0 +1,47 @@ |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { test, expect } from '@grafana/plugin-e2e'; |
||||
|
||||
import { normalTableName } from './mocks/mysql.mocks'; |
||||
import { mockDataSourceRequest } from './utils'; |
||||
|
||||
test.beforeEach(mockDataSourceRequest); |
||||
|
||||
test.use({ featureToggles: { sqlQuerybuilderFunctionParameters: true } }); |
||||
|
||||
test('visual query builder should handle macros', async ({ explorePage, page }) => { |
||||
await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.headerTableSelector).click(); |
||||
await page.getByText(normalTableName, { exact: true }).click(); |
||||
|
||||
// Open Data operations
|
||||
await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectAggregation).click(); |
||||
const select = page.getByLabel('Select options menu'); |
||||
await select.locator(page.getByText('$__timeGroupAlias')).click(); |
||||
|
||||
// Open column selector
|
||||
await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectFunctionParameter('Column')).click(); |
||||
await select.locator(page.getByText('createdAt')).click(); |
||||
|
||||
// Open Interval selector
|
||||
await explorePage |
||||
.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectFunctionParameter('Interval')) |
||||
.click(); |
||||
await select.locator(page.getByText('$__interval')).click(); |
||||
|
||||
await page.getByRole('button', { name: 'Add column' }).click(); |
||||
|
||||
await explorePage.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectAggregation).nth(1).click(); |
||||
await select.locator(page.getByText('AVG')).click(); |
||||
|
||||
await explorePage |
||||
.getByGrafanaSelector(selectors.components.SQLQueryEditor.selectFunctionParameter('Column')) |
||||
.nth(1) |
||||
.click(); |
||||
await select.locator(page.getByText('bigint')).click(); |
||||
|
||||
// Validate the query
|
||||
await expect( |
||||
explorePage.getByGrafanaSelector(selectors.components.CodeEditor.container).getByRole('textbox') |
||||
).toHaveValue( |
||||
`SELECT\n $__timeGroupAlias(createdAt, $__interval),\n AVG(\`bigint\`)\nFROM\n DataMaker.normalTable\nLIMIT\n 50` |
||||
); |
||||
}); |
||||
@ -1,30 +0,0 @@ |
||||
import { SelectableValue, toOption } from '@grafana/data'; |
||||
|
||||
import { COMMON_AGGREGATE_FNS } from '../../constants'; |
||||
import { QueryWithDefaults } from '../../defaults'; |
||||
import { DB, SQLQuery } from '../../types'; |
||||
import { useSqlChange } from '../../utils/useSqlChange'; |
||||
|
||||
import { SelectRow } from './SelectRow'; |
||||
|
||||
interface SQLSelectRowProps { |
||||
fields: SelectableValue[]; |
||||
query: QueryWithDefaults; |
||||
onQueryChange: (query: SQLQuery) => void; |
||||
db: DB; |
||||
} |
||||
|
||||
export function SQLSelectRow({ fields, query, onQueryChange, db }: SQLSelectRowProps) { |
||||
const { onSqlChange } = useSqlChange({ query, onQueryChange, db }); |
||||
const functions = [...COMMON_AGGREGATE_FNS, ...(db.functions?.() || [])].map(toOption); |
||||
|
||||
return ( |
||||
<SelectRow |
||||
columns={fields} |
||||
sql={query.sql!} |
||||
format={query.format} |
||||
functions={functions} |
||||
onSqlChange={onSqlChange} |
||||
/> |
||||
); |
||||
} |
||||
@ -0,0 +1,30 @@ |
||||
import { useId } from 'react'; |
||||
|
||||
import { SelectableValue } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { EditorField } from '@grafana/experimental'; |
||||
import { Select } from '@grafana/ui'; |
||||
|
||||
interface Props { |
||||
columns: Array<SelectableValue<string>>; |
||||
onParameterChange: (value?: string) => void; |
||||
value: SelectableValue<string> | null; |
||||
} |
||||
|
||||
export function SelectColumn({ columns, onParameterChange, value }: Props) { |
||||
const selectInputId = useId(); |
||||
|
||||
return ( |
||||
<EditorField label="Column" width={25}> |
||||
<Select |
||||
value={value} |
||||
data-testid={selectors.components.SQLQueryEditor.selectColumn} |
||||
inputId={selectInputId} |
||||
menuShouldPortal |
||||
options={[{ label: '*', value: '*' }, ...columns]} |
||||
allowCustomValue |
||||
onChange={(s) => onParameterChange(s.value)} |
||||
/> |
||||
</EditorField> |
||||
); |
||||
} |
||||
@ -0,0 +1,137 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useCallback } from 'react'; |
||||
|
||||
import { SelectableValue } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { Button, InlineLabel, Input, Stack, useStyles2 } from '@grafana/ui'; |
||||
|
||||
import { QueryEditorExpressionType } from '../../expressions'; |
||||
import { SQLExpression, SQLQuery } from '../../types'; |
||||
import { getColumnValue } from '../../utils/sql.utils'; |
||||
|
||||
import { SelectColumn } from './SelectColumn'; |
||||
|
||||
interface Props { |
||||
columns: Array<SelectableValue<string>>; |
||||
query: SQLQuery; |
||||
onSqlChange: (sql: SQLExpression) => void; |
||||
onParameterChange: (index: number) => (value?: string) => void; |
||||
currentColumnIndex: number; |
||||
} |
||||
|
||||
export function SelectCustomFunctionParameters({ |
||||
columns, |
||||
query, |
||||
onSqlChange, |
||||
onParameterChange, |
||||
currentColumnIndex, |
||||
}: Props) { |
||||
const styles = useStyles2(getStyles); |
||||
const macroOrFunction = query.sql?.columns?.[currentColumnIndex]; |
||||
|
||||
const addParameter = useCallback( |
||||
(index: number) => { |
||||
const item = query.sql?.columns?.[index]; |
||||
if (!item) { |
||||
return; |
||||
} |
||||
|
||||
item.parameters = item.parameters |
||||
? [...item.parameters, { type: QueryEditorExpressionType.FunctionParameter, name: '' }] |
||||
: []; |
||||
|
||||
const newSql: SQLExpression = { |
||||
...query.sql, |
||||
columns: query.sql?.columns?.map((c, i) => (i === index ? item : c)), |
||||
}; |
||||
|
||||
onSqlChange(newSql); |
||||
}, |
||||
[onSqlChange, query.sql] |
||||
); |
||||
|
||||
const removeParameter = useCallback( |
||||
(columnIndex: number, index: number) => { |
||||
const item = query.sql?.columns?.[columnIndex]; |
||||
if (!item?.parameters) { |
||||
return; |
||||
} |
||||
item.parameters = item.parameters?.filter((_, i) => i !== index); |
||||
|
||||
const newSql: SQLExpression = { |
||||
...query.sql, |
||||
columns: query.sql?.columns?.map((c, i) => (i === columnIndex ? item : c)), |
||||
}; |
||||
|
||||
onSqlChange(newSql); |
||||
}, |
||||
[onSqlChange, query.sql] |
||||
); |
||||
|
||||
function renderParameters(columnIndex: number) { |
||||
if (!macroOrFunction?.parameters || macroOrFunction.parameters.length <= 1) { |
||||
return null; |
||||
} |
||||
|
||||
const paramComponents = macroOrFunction.parameters.map((param, index) => { |
||||
// Skip the first parameter as it is the column name
|
||||
if (index === 0) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<Stack key={index} gap={2}> |
||||
<InlineLabel className={styles.label}>,</InlineLabel> |
||||
<Input |
||||
onChange={(e) => onParameterChange(index)(e.currentTarget.value)} |
||||
value={param.name} |
||||
aria-label={`Parameter ${index} for column ${columnIndex}`} |
||||
data-testid={selectors.components.SQLQueryEditor.selectInputParameter} |
||||
addonAfter={ |
||||
<Button |
||||
title="Remove parameter" |
||||
type="button" |
||||
icon="times" |
||||
variant="secondary" |
||||
size="md" |
||||
onClick={() => removeParameter(columnIndex, index)} |
||||
/> |
||||
} |
||||
/> |
||||
</Stack> |
||||
); |
||||
}); |
||||
return paramComponents; |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<InlineLabel className={styles.label}>(</InlineLabel> |
||||
<SelectColumn |
||||
columns={columns} |
||||
onParameterChange={(s) => onParameterChange(0)(s)} |
||||
value={getColumnValue(macroOrFunction?.parameters?.[0])} |
||||
/> |
||||
{renderParameters(currentColumnIndex)} |
||||
<Button |
||||
type="button" |
||||
onClick={() => addParameter(currentColumnIndex)} |
||||
variant="secondary" |
||||
size="md" |
||||
icon="plus" |
||||
title="Add parameter" |
||||
/> |
||||
<InlineLabel className={styles.label}>)</InlineLabel> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const getStyles = () => { |
||||
return { |
||||
label: css({ |
||||
padding: 0, |
||||
margin: 0, |
||||
width: 'unset', |
||||
}), |
||||
}; |
||||
}; |
||||
@ -0,0 +1,167 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { useCallback, useEffect, useId, useState } from 'react'; |
||||
|
||||
import { SelectableValue } from '@grafana/data'; |
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
import { EditorField } from '@grafana/experimental'; |
||||
import { InlineLabel, Input, Select, Stack, useStyles2 } from '@grafana/ui'; |
||||
|
||||
import { QueryEditorExpressionType } from '../../expressions'; |
||||
import { DB, SQLExpression, SQLQuery } from '../../types'; |
||||
import { getColumnValue } from '../../utils/sql.utils'; |
||||
|
||||
import { SelectColumn } from './SelectColumn'; |
||||
import { SelectCustomFunctionParameters } from './SelectCustomFunctionParameters'; |
||||
|
||||
interface Props { |
||||
query: SQLQuery; |
||||
onSqlChange: (sql: SQLExpression) => void; |
||||
currentColumnIndex: number; |
||||
db: DB; |
||||
columns: Array<SelectableValue<string>>; |
||||
} |
||||
|
||||
export function SelectFunctionParameters({ query, onSqlChange, currentColumnIndex, db, columns }: Props) { |
||||
const selectInputId = useId(); |
||||
const macroOrFunction = query.sql?.columns?.[currentColumnIndex]; |
||||
const styles = useStyles2(getStyles); |
||||
const func = db.functions().find((f) => f.name === macroOrFunction?.name); |
||||
|
||||
const [fieldsFromFunction, setFieldsFromFunction] = useState<Array<Array<SelectableValue<string>>>>([]); |
||||
|
||||
useEffect(() => { |
||||
const getFieldsFromFunction = async () => { |
||||
if (!func) { |
||||
return; |
||||
} |
||||
const options: Array<Array<SelectableValue<string>>> = []; |
||||
for (const param of func.parameters ?? []) { |
||||
if (param.options) { |
||||
options.push(await param.options(query)); |
||||
} else { |
||||
options.push([]); |
||||
} |
||||
} |
||||
setFieldsFromFunction(options); |
||||
}; |
||||
getFieldsFromFunction(); |
||||
|
||||
// It is fine to ignore the warning here and omit the query object
|
||||
// only table property is used in the query object and whenever table changes the component is re-rendered
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [macroOrFunction?.name]); |
||||
|
||||
const onParameterChange = useCallback( |
||||
(index: number, keepIndex?: boolean) => (s: string | undefined) => { |
||||
const item = query.sql?.columns?.[currentColumnIndex]; |
||||
if (!item) { |
||||
return; |
||||
} |
||||
if (!item.parameters) { |
||||
item.parameters = []; |
||||
} |
||||
if (item.parameters[index] === undefined) { |
||||
item.parameters[index] = { type: QueryEditorExpressionType.FunctionParameter, name: s }; |
||||
} else if (s == null && keepIndex) { |
||||
// Remove value from index
|
||||
item.parameters = item.parameters.map((p, i) => (i === index ? { ...p, name: '' } : p)); |
||||
// Remove the last empty parameter
|
||||
if (item.parameters[item.parameters.length - 1]?.name === '') { |
||||
item.parameters = item.parameters.filter((p) => p.name !== ''); |
||||
} |
||||
} else if (s == null) { |
||||
item.parameters = item.parameters.filter((_, i) => i !== index); |
||||
} else { |
||||
item.parameters = item.parameters.map((p, i) => (i === index ? { ...p, name: s } : p)); |
||||
} |
||||
|
||||
const newSql: SQLExpression = { |
||||
...query.sql, |
||||
columns: query.sql?.columns?.map((c, i) => (i === currentColumnIndex ? item : c)), |
||||
}; |
||||
|
||||
onSqlChange(newSql); |
||||
}, |
||||
[currentColumnIndex, onSqlChange, query.sql] |
||||
); |
||||
|
||||
function renderParametersWithFunctions() { |
||||
if (!func?.parameters) { |
||||
return null; |
||||
} |
||||
|
||||
return func?.parameters.map((funcParam, index) => { |
||||
return ( |
||||
<Stack key={index} alignItems="flex-end" gap={2}> |
||||
<EditorField label={funcParam.name} width={25} optional={!funcParam.required}> |
||||
<> |
||||
{funcParam.options ? ( |
||||
<Select |
||||
value={getColumnValue(macroOrFunction?.parameters![index])} |
||||
options={fieldsFromFunction?.[index]} |
||||
data-testid={selectors.components.SQLQueryEditor.selectFunctionParameter(funcParam.name)} |
||||
inputId={selectInputId} |
||||
menuShouldPortal |
||||
allowCustomValue |
||||
isClearable |
||||
onChange={(s) => onParameterChange(index, true)(s?.value)} |
||||
/> |
||||
) : ( |
||||
<Input |
||||
onChange={(e) => onParameterChange(index, true)(e.currentTarget.value)} |
||||
value={macroOrFunction?.parameters![index]?.name} |
||||
data-testid={selectors.components.SQLQueryEditor.selectInputParameter} |
||||
/> |
||||
)} |
||||
</> |
||||
</EditorField> |
||||
{func.parameters!.length !== index + 1 && <InlineLabel className={styles.label}>,</InlineLabel>} |
||||
</Stack> |
||||
); |
||||
}); |
||||
} |
||||
|
||||
// This means that no function is selected, we render a column selector
|
||||
if (macroOrFunction?.name === undefined) { |
||||
return ( |
||||
<SelectColumn |
||||
columns={columns} |
||||
onParameterChange={(s) => onParameterChange(0)(s)} |
||||
value={getColumnValue(macroOrFunction?.parameters?.[0])} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
// If the function is not found, that means that it might be a custom value
|
||||
// we let the user add any number of parameters
|
||||
if (!func) { |
||||
return ( |
||||
<SelectCustomFunctionParameters |
||||
query={query} |
||||
onSqlChange={onSqlChange} |
||||
currentColumnIndex={currentColumnIndex} |
||||
columns={columns} |
||||
onParameterChange={onParameterChange} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
// Else we render the function parameters based on the provided settings
|
||||
return ( |
||||
<> |
||||
<InlineLabel className={styles.label}>(</InlineLabel> |
||||
{renderParametersWithFunctions()} |
||||
<InlineLabel className={styles.label}>)</InlineLabel> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
const getStyles = () => { |
||||
return { |
||||
label: css({ |
||||
padding: 0, |
||||
margin: 0, |
||||
width: 'unset', |
||||
}), |
||||
}; |
||||
}; |
||||
@ -0,0 +1,307 @@ |
||||
import '@testing-library/jest-dom'; |
||||
import { render, screen } from '@testing-library/react'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
|
||||
import { selectors } from '@grafana/e2e-selectors'; |
||||
|
||||
import { QueryEditorExpressionType } from '../../expressions'; |
||||
import { SQLQuery } from '../../types'; |
||||
import { buildMockDB } from '../SqlComponents.testHelpers'; |
||||
|
||||
import { SelectRow } from './SelectRow'; |
||||
|
||||
// Mock featureToggle sqlQuerybuilderFunctionParameters
|
||||
jest.mock('@grafana/runtime', () => ({ |
||||
config: { |
||||
featureToggles: { |
||||
sqlQuerybuilderFunctionParameters: true, |
||||
}, |
||||
}, |
||||
})); |
||||
|
||||
describe('SelectRow', () => { |
||||
const query = Object.freeze<SQLQuery>({ |
||||
refId: 'A', |
||||
rawSql: '', |
||||
sql: { |
||||
columns: [ |
||||
{ |
||||
name: '$__timeGroup', |
||||
parameters: [ |
||||
{ name: 'createdAt', type: QueryEditorExpressionType.FunctionParameter }, |
||||
{ name: '$__interval', type: QueryEditorExpressionType.FunctionParameter }, |
||||
], |
||||
alias: 'time', |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
|
||||
it('should show query passed as a prop', () => { |
||||
const onQueryChange = jest.fn(); |
||||
render(<SelectRow onQueryChange={onQueryChange} query={query} columns={[]} db={buildMockDB()} />); |
||||
|
||||
expect(screen.getByTestId(selectors.components.SQLQueryEditor.selectAggregation)).toHaveTextContent('$__timeGroup'); |
||||
expect(screen.getByTestId(selectors.components.SQLQueryEditor.selectAlias)).toHaveTextContent('time'); |
||||
expect(screen.getByTestId(selectors.components.SQLQueryEditor.selectColumn)).toHaveTextContent('createdAt'); |
||||
expect(screen.getByTestId(selectors.components.SQLQueryEditor.selectInputParameter)).toHaveValue('$__interval'); |
||||
}); |
||||
|
||||
describe('should handle multiple columns manipulations', () => { |
||||
it('adding column', () => { |
||||
const onQueryChange = jest.fn(); |
||||
render(<SelectRow onQueryChange={onQueryChange} query={query} columns={[]} db={buildMockDB()} />); |
||||
screen.getByRole('button', { name: 'Add column' }).click(); |
||||
expect(onQueryChange).toHaveBeenCalledWith({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: undefined, |
||||
parameters: [], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
it('show multiple columns when new column added', () => { |
||||
const onQueryChange = jest.fn(); |
||||
render( |
||||
<SelectRow |
||||
columns={[]} |
||||
onQueryChange={onQueryChange} |
||||
db={buildMockDB()} |
||||
query={{ |
||||
...query, |
||||
sql: { |
||||
...query.sql, |
||||
|
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ name: undefined, parameters: [], type: QueryEditorExpressionType.Function }, |
||||
], |
||||
}, |
||||
}} |
||||
/> |
||||
); |
||||
|
||||
// Check the first column values
|
||||
expect(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectAggregation)[0]).toHaveTextContent( |
||||
'$__timeGroup' |
||||
); |
||||
expect(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectAlias)[0]).toHaveTextContent('time'); |
||||
expect(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectColumn)[0]).toHaveTextContent('createdAt'); |
||||
expect(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectInputParameter)[0]).toHaveValue( |
||||
'$__interval' |
||||
); |
||||
|
||||
// Check the second column values
|
||||
expect( |
||||
screen.getAllByTestId(selectors.components.SQLQueryEditor.selectAggregationInput)[1] |
||||
).toBeEmptyDOMElement(); |
||||
expect(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectAliasInput)[1]).toBeEmptyDOMElement(); |
||||
expect(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectColumnInput)[1]).toBeEmptyDOMElement(); |
||||
expect(screen.queryAllByTestId(selectors.components.SQLQueryEditor.selectInputParameter)[1]).toBeFalsy(); |
||||
}); |
||||
|
||||
it('removing column', () => { |
||||
const onQueryChange = jest.fn(); |
||||
render( |
||||
<SelectRow |
||||
columns={[]} |
||||
db={buildMockDB()} |
||||
onQueryChange={onQueryChange} |
||||
query={{ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: undefined, |
||||
parameters: [], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}} |
||||
/> |
||||
); |
||||
screen.getAllByRole('button', { name: 'Remove column' })[1].click(); |
||||
expect(onQueryChange).toHaveBeenCalledWith(query); |
||||
}); |
||||
|
||||
it('modifying second column aggregation', async () => { |
||||
const onQueryChange = jest.fn(); |
||||
const db = buildMockDB(); |
||||
db.functions = () => [{ name: 'AVG' }]; |
||||
const multipleColumns = Object.freeze<SQLQuery>({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '', |
||||
parameters: [{ name: 'gaugeValue', type: QueryEditorExpressionType.FunctionParameter }], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
render(<SelectRow columns={[]} db={db} onQueryChange={onQueryChange} query={multipleColumns} />); |
||||
await userEvent.click(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectAggregation)[1]); |
||||
await userEvent.click(screen.getByText('AVG')); |
||||
|
||||
expect(onQueryChange).toHaveBeenCalledWith({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: 'AVG', |
||||
parameters: [{ name: 'gaugeValue', type: QueryEditorExpressionType.FunctionParameter }], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
it('modifying second column name with custom value', async () => { |
||||
const onQueryChange = jest.fn(); |
||||
const db = buildMockDB(); |
||||
const multipleColumns = Object.freeze<SQLQuery>({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '', |
||||
parameters: [{ name: undefined, type: QueryEditorExpressionType.FunctionParameter }], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
render( |
||||
<SelectRow |
||||
db={db} |
||||
columns={[{ label: 'newColumn', value: 'newColumn' }]} |
||||
onQueryChange={onQueryChange} |
||||
query={multipleColumns} |
||||
/> |
||||
); |
||||
await userEvent.click(screen.getAllByTestId(selectors.components.SQLQueryEditor.selectColumn)[1]); |
||||
await userEvent.type( |
||||
screen.getAllByTestId(selectors.components.SQLQueryEditor.selectColumnInput)[1], |
||||
'newColumn2{enter}' |
||||
); |
||||
|
||||
expect(onQueryChange).toHaveBeenCalledWith({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '', |
||||
parameters: [{ name: 'newColumn2', type: QueryEditorExpressionType.FunctionParameter }], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
it('handles second parameter', async () => { |
||||
const onQueryChange = jest.fn(); |
||||
const db = buildMockDB(); |
||||
const multipleColumns = Object.freeze<SQLQuery>({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '$__timeGroup', |
||||
parameters: [{ name: 'gaugeValue', type: QueryEditorExpressionType.FunctionParameter }], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
render( |
||||
<SelectRow |
||||
db={db} |
||||
columns={[{ label: 'gaugeValue', value: 'gaugeValue' }]} |
||||
onQueryChange={onQueryChange} |
||||
query={multipleColumns} |
||||
/> |
||||
); |
||||
|
||||
await userEvent.click(screen.getAllByRole('button', { name: 'Add parameter' })[1]); |
||||
|
||||
expect(onQueryChange).toHaveBeenCalledWith({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '$__timeGroup', |
||||
parameters: [ |
||||
{ name: 'gaugeValue', type: QueryEditorExpressionType.FunctionParameter }, |
||||
{ name: '', type: QueryEditorExpressionType.FunctionParameter }, |
||||
], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
it('handles second parameter removal', () => { |
||||
const onQueryChange = jest.fn(); |
||||
const db = buildMockDB(); |
||||
render( |
||||
<SelectRow |
||||
onQueryChange={onQueryChange} |
||||
db={db} |
||||
columns={[]} |
||||
query={{ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '$__timeGroup', |
||||
parameters: [ |
||||
{ name: 'gaugeValue', type: QueryEditorExpressionType.FunctionParameter }, |
||||
{ name: 'null', type: QueryEditorExpressionType.FunctionParameter }, |
||||
], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}} |
||||
/> |
||||
); |
||||
|
||||
screen.getAllByRole('button', { name: 'Remove parameter' })[1].click(); |
||||
|
||||
expect(onQueryChange).toHaveBeenCalledWith({ |
||||
...query, |
||||
sql: { |
||||
columns: [ |
||||
...query.sql?.columns!, |
||||
{ |
||||
name: '$__timeGroup', |
||||
parameters: [{ name: 'gaugeValue', type: QueryEditorExpressionType.FunctionParameter }], |
||||
type: QueryEditorExpressionType.Function, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
|
Loading…
Reference in new issue