From ae509b4ae9ac341b9c829ab56d7afa3a657397a7 Mon Sep 17 00:00:00 2001
From: Aditya Singh <adityasinghssj1@gmail.com>
Date: Tue, 22 Apr 2025 21:15:49 +0530
Subject: [PATCH] Resource attr filter: style fix and quick filter changes
 (#7691)

* chore: resource attr filter init

* chore: resource attr filter api integration

* chore: operator config updated

* chore: fliter show hide logic and styles

* chore: add support for custom operator list to qb

* chore: minor refactor

* chore: minor code refactor

* test: quick filters test suite added

* test: quick filters test suite added

* test: all errors test suite added

* chore: style fix

* test: all errors mock fix

* chore: test case fix and mixpanel update

* chore: color update

* chore: minor refactor

* chore: style fix

* chore: set default query in exceptions tab

* chore: style fix

* chore: minor refactor

* chore: minor refactor

* chore: minor refactor

* chore: test update

* chore: fix filter header with no query name

* fix: scroll fix

* chore: add data source traces to quick filters

* chore: replace div with fragment

---------

Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>
---
 frontend/src/pages/AllErrors/index.tsx | 35 +++++++++++++++-----------
 frontend/src/pages/AllErrors/utils.tsx |  8 ++++++
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/AllErrors/index.tsx b/frontend/src/pages/AllErrors/index.tsx
index 4d0c9d7b88..38d7bc44b3 100644
--- a/frontend/src/pages/AllErrors/index.tsx
+++ b/frontend/src/pages/AllErrors/index.tsx
@@ -8,6 +8,7 @@ import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
+import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
@@ -60,21 +61,25 @@ function AllErrors(): JSX.Element {
 					showFilters ? 'filter-visible' : '',
 				)}
 			>
-				<Toolbar
-					showAutoRefresh={false}
-					leftActions={
-						!showFilters ? (
-							<Tooltip title="Show Filters">
-								<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-									<FilterOutlined />
-								</Button>
-							</Tooltip>
-						) : undefined
-					}
-					rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
-				/>
-				<ResourceAttributesFilterV2 />
-				<RouteTab routes={routes} activeKey={pathname} history={history} />
+				<TypicalOverlayScrollbar>
+					<>
+						<Toolbar
+							showAutoRefresh={false}
+							leftActions={
+								!showFilters ? (
+									<Tooltip title="Show Filters">
+										<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+											<FilterOutlined />
+										</Button>
+									</Tooltip>
+								) : undefined
+							}
+							rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+						/>
+						<ResourceAttributesFilterV2 />
+						<RouteTab routes={routes} activeKey={pathname} history={history} />
+					</>
+				</TypicalOverlayScrollbar>
 			</section>
 		</div>
 	);
diff --git a/frontend/src/pages/AllErrors/utils.tsx b/frontend/src/pages/AllErrors/utils.tsx
index 7f52e89193..af0e7c29e7 100644
--- a/frontend/src/pages/AllErrors/utils.tsx
+++ b/frontend/src/pages/AllErrors/utils.tsx
@@ -3,11 +3,13 @@ import {
 	IQuickFiltersConfig,
 } from 'components/QuickFilters/types';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
 
 export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'Environment',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'deployment.environment',
 			dataType: DataTypes.String,
@@ -20,6 +22,7 @@ export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'Service Name',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'service.name',
 			dataType: DataTypes.String,
@@ -32,6 +35,7 @@ export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'Hostname',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'host.name',
 			dataType: DataTypes.String,
@@ -44,6 +48,7 @@ export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'K8s Cluster Name',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'k8s.cluster.name',
 			dataType: DataTypes.String,
@@ -56,6 +61,7 @@ export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'K8s Deployment Name',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'k8s.deployment.name',
 			dataType: DataTypes.String,
@@ -68,6 +74,7 @@ export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'K8s Namespace Name',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'k8s.namespace.name',
 			dataType: DataTypes.String,
@@ -80,6 +87,7 @@ export const ExceptionsQuickFiltersConfig: IQuickFiltersConfig[] = [
 	{
 		type: FiltersType.CHECKBOX,
 		title: 'K8s Pod Name',
+		dataSource: DataSource.TRACES,
 		attributeKey: {
 			key: 'k8s.pod.name',
 			dataType: DataTypes.String,