feat: added support for deployment env filtering in overview tble

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -6,7 +6,10 @@ import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
 } from 'components/CeleryTask/CeleryUtils';
-import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
+import {
+	FilterCofigs,
+	useCeleryFilterOptions,
+} from 'components/CeleryTask/useCeleryFilterOptions';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -14,20 +17,24 @@ import { Check, Share2 } from 'lucide-react';
 import { useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
+import { DataSource } from 'types/common/queryBuilder';
 
 interface SelectOptionConfig {
 	placeholder: string;
 	queryParam: QueryParams;
 	filterType: string | string[];
+	filterConfigs?: FilterCofigs;
 }
 
 function FilterSelect({
 	placeholder,
 	queryParam,
 	filterType,
+	filterConfigs,
 }: SelectOptionConfig): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		filterType,
+		filterConfigs,
 	);
 
 	const urlQuery = useUrlQuery();
@@ -65,12 +72,26 @@ function FilterSelect({
 	);
 }
 
+FilterSelect.defaultProps = {
+	filterConfigs: undefined,
+};
+
 function CeleryOverviewConfigOptions(): JSX.Element {
 	const [isURLCopied, setIsURLCopied] = useState(false);
 
 	const [, handleCopyToClipboard] = useCopyToClipboard();
 
 	const selectConfigs: SelectOptionConfig[] = [
+		{
+			placeholder: 'Environment',
+			queryParam: QueryParams.environment,
+			filterType: 'resource_deployment_environment',
+			filterConfigs: {
+				aggregateOperator: 'rate',
+				dataSource: DataSource.METRICS,
+				aggregateAttribute: 'signoz_calls_total',
+			},
+		},
 		{
 			placeholder: 'Service Name',
 			queryParam: QueryParams.service,
@@ -115,6 +136,7 @@ function CeleryOverviewConfigOptions(): JSX.Element {
 						placeholder={config.placeholder}
 						queryParam={config.queryParam}
 						filterType={config.filterType}
+						filterConfigs={config.filterConfigs}
 					/>
 				))}
 			</Row>

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -322,6 +322,11 @@ function makeFilters(urlQuery: URLSearchParams): Filter[] {
 		{ paramName: QueryParams.kindString, key: 'kind_string', operator: 'in' },
 		{ paramName: QueryParams.service, key: 'service.name', operator: 'in' },
 		{ paramName: QueryParams.spanName, key: 'name', operator: 'in' },
+		{
+			paramName: QueryParams.environment,
+			key: 'deployment.environment',
+			operator: 'in',
+		},
 	];
 
 	return filterConfigs

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -6,13 +6,17 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import { useGetAllFilters } from './CeleryTaskConfigOptions/useGetCeleryFilters';
 
+export interface FilterCofigs {
+	aggregateOperator?: string;
+	dataSource?: DataSource;
+	aggregateAttribute?: string;
+	filterAttributeKeyDataType?: DataTypes;
+	tagType?: string;
+}
+
 export const useCeleryFilterOptions = (
 	type: string | string[],
-	aggregateOperator?: string,
-	dataSource?: DataSource,
-	aggregateAttribute?: string,
-	filterAttributeKeyDataType?: DataTypes,
-	tagType?: string,
+	filterCofigs?: FilterCofigs,
 ): {
 	searchText: string;
 	handleSearch: (value: string) => void;
@@ -23,11 +27,7 @@ export const useCeleryFilterOptions = (
 	const { isFetching, options } = useGetAllFilters({
 		attributeKey: type,
 		searchText,
-		aggregateOperator,
-		dataSource,
-		aggregateAttribute,
-		filterAttributeKeyDataType,
-		tagType,
+		...filterCofigs,
 	});
 	const handleDebouncedSearch = useDebouncedFn((searchText): void => {
 		setSearchText(searchText as string);

frontend/src/constants/query.ts

@@ -46,4 +46,5 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
+	environment = 'environment',
 }