feat: added support for units for formula columns in table panel type (#5638)

* feat: added support for formula columns units

* chore: add unit test cases for query and formula units

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;
+		}
 	}
 }
 

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);

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(
+			<QueryBuilderProvider>
+				<ColumnUnitSelector columnUnits={{}} setColumnUnits={(): void => {}} />,
+			</QueryBuilderProvider>,
+		);
+
+		expect(getByText('F1')).toBeInTheDocument();
+		expect(getByText('A')).toBeInTheDocument();
+	});
+});