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

@@ -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
+				<TypicalOverlayScrollbar>
-					showAutoRefresh={false}
+					<>
-					leftActions={
+						<Toolbar
-						!showFilters ? (
+							showAutoRefresh={false}
-							<Tooltip title="Show Filters">
+							leftActions={
-								<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+								!showFilters ? (
-									<FilterOutlined />
+									<Tooltip title="Show Filters">
-								</Button>
+										<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-							</Tooltip>
+											<FilterOutlined />
-						) : undefined
+										</Button>
-					}
+									</Tooltip>
-					rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+								) : undefined
-				/>
+							}
-				<ResourceAttributesFilterV2 />
+							rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
-				<RouteTab routes={routes} activeKey={pathname} history={history} />
+						/>
+						<ResourceAttributesFilterV2 />
+						<RouteTab routes={routes} activeKey={pathname} history={history} />
+					</>
+				</TypicalOverlayScrollbar>
 			</section>
 		</div>
 	);

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,