diff --git a/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx b/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx index c50f379fda..3ff9fbbd36 100644 --- a/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx +++ b/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} /> ))} diff --git a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx index 685ee44f52..ab03e585c5 100644 --- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx +++ b/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 diff --git a/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts b/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts index 1aadcb3d8b..1dbbc1b22f 100644 --- a/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts +++ b/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); diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index 1d9ddc2ceb..4fe20e8107 100644 --- a/frontend/src/constants/query.ts +++ b/frontend/src/constants/query.ts @@ -46,4 +46,5 @@ export enum QueryParams { msgSystem = 'msgSystem', destination = 'destination', kindString = 'kindString', + environment = 'environment', }