diff --git a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss index 5426d86672..5c824e7d92 100644 --- a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss +++ b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss @@ -15,6 +15,10 @@ .y-axis-unit-selector { flex-direction: row !important; align-items: center; + + .heading { + width: 20px; + } } } diff --git a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx index 8ed4c898a7..ea5ef16c2d 100644 --- a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx +++ b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx @@ -20,7 +20,9 @@ export function ColumnUnitSelector( function getAggregateColumnsNamesAndLabels(): string[] { if (currentQuery.queryType === EQueryType.QUERY_BUILDER) { - return currentQuery.builder.queryData.map((q) => q.queryName); + const queries = currentQuery.builder.queryData.map((q) => q.queryName); + const formulas = currentQuery.builder.queryFormulas.map((q) => q.queryName); + return [...queries, ...formulas]; } if (currentQuery.queryType === EQueryType.CLICKHOUSE) { return currentQuery.clickhouse_sql.map((q) => q.name); diff --git a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/__tests__/ColumnSelector.test.tsx b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/__tests__/ColumnSelector.test.tsx new file mode 100644 index 0000000000..03b0f00cc5 --- /dev/null +++ b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/__tests__/ColumnSelector.test.tsx @@ -0,0 +1,105 @@ +import ROUTES from 'constants/routes'; +import { QueryBuilderProvider } from 'providers/QueryBuilder'; +import { useLocation } from 'react-router-dom'; +import { render } from 'tests/test-utils'; +import { Query } from 'types/api/queryBuilder/queryBuilderData'; + +import { ColumnUnitSelector } from '../ColumnUnitSelector'; + +const compositeQueryParam = { + queryType: 'builder', + builder: { + queryData: [ + { + dataSource: 'metrics', + queryName: 'A', + aggregateOperator: 'count', + aggregateAttribute: { + key: 'signoz_latency', + dataType: 'float64', + type: 'ExponentialHistogram', + isColumn: true, + isJSON: false, + id: 'signoz_latency--float64--ExponentialHistogram--true', + }, + timeAggregation: '', + spaceAggregation: 'p90', + functions: [], + filters: { + items: [], + op: 'AND', + }, + expression: 'A', + disabled: false, + stepInterval: 60, + having: [], + limit: null, + orderBy: [], + groupBy: [ + { + key: 'service_name', + dataType: 'string', + type: 'tag', + isColumn: false, + isJSON: false, + id: 'service_name--string--tag--false', + }, + ], + legend: '', + reduceTo: 'avg', + }, + ], + queryFormulas: [ + { + queryName: 'F1', + expression: 'A * 10', + disabled: false, + legend: '', + }, + ], + }, + promql: [ + { + name: 'A', + query: '', + legend: '', + disabled: false, + }, + ], + clickhouse_sql: [ + { + name: 'A', + legend: '', + disabled: false, + query: '', + }, + ], + id: '12e1d311-cb47-4b76-af68-65d8e85c9e0d', +}; + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useLocation: jest.fn(), + useRouteMatch: jest.fn(), +})); + +jest.mock('hooks/queryBuilder/useGetCompositeQueryParam', () => ({ + useGetCompositeQueryParam: (): Query => compositeQueryParam as Query, +})); + +describe('Column unit selector panel unit test', () => { + it('unit selectors should be rendered for queries and formula', () => { + const mockLocation = { + pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.DASHBOARD_WIDGET}/`, + }; + (useLocation as jest.Mock).mockReturnValue(mockLocation); + const { getByText } = render( + + {}} />, + , + ); + + expect(getByText('F1')).toBeInTheDocument(); + expect(getByText('A')).toBeInTheDocument(); + }); +});