feat: apply resource fitlers on coming from service details to traces…

… page
SigNoz · Sep 5, 2024 · b96b444 · b96b444
1 parent 16738ea
commit b96b444
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 18 deletions.
diff --git a/frontend/src/container/MetricsApplication/Tabs/util.ts b/frontend/src/container/MetricsApplication/Tabs/util.ts
@@ -90,12 +90,15 @@ export function onGraphClickHandler(
  };
 }
 
-export const handleNonInQueryRange = (tags: TagFilterItem[]): TagFilterItem[] =>
+export const handleNonInQueryRange = (
+ tags: TagFilterItem[],
+ isTrace = false,
+): TagFilterItem[] =>
  tags.map((tag) => {
  if (tag.op === 'Not IN') {
  return {
  ...tag,
- op: 'NIN',
+ op: isTrace ? 'nin' : 'NIN',
  };
  }
  return tag;

diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
@@ -7,8 +7,11 @@ import { ResizeTable } from 'components/ResizeTable';
 import Download from 'container/Download/Download';
 import { filterDropdown } from 'container/ServiceApplication/Filter/FilterDropdown';
 import useResourceAttribute from 'hooks/useResourceAttribute';
-import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
-import { useRef } from 'react';
+import {
+ convertRawQueriesToTraceSelectedTags,
+ resourceAttributesToTracesFilterItems,
+} from 'hooks/useResourceAttribute/utils';
+import { useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -18,7 +21,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuid } from 'uuid';
 
 import { IServiceName } from './Tabs/types';
-import { useGetAPMToTracesQueries } from './Tabs/util';
+import { handleNonInQueryRange, useGetAPMToTracesQueries } from './Tabs/util';
 import {
  convertedTracesToDownloadData,
  getErrorRate,
@@ -45,24 +48,32 @@ function TopOperationsTable({
  const apmToTraceQuery = useGetAPMToTracesQueries({ servicename });
 
  const params = useParams<{ servicename: string }>();
+ const tagFilters = useMemo(
+ () =>
+ handleNonInQueryRange(resourceAttributesToTracesFilterItems(queries), true),
+ [queries],
+ );
 
  const handleOnClick = (operation: string): void => {
  const { servicename: encodedServiceName } = params;
  const servicename = decodeURIComponent(encodedServiceName);
 
- const opFilter: TagFilterItem = {
- id: uuid().slice(0, 8),
- key: {
- key: 'name',
- dataType: DataTypes.String,
- type: 'tag',
- isColumn: true,
- isJSON: false,
- id: 'name--string--tag--true',
+ const opFilters: TagFilterItem[] = [
+ {
+ id: uuid().slice(0, 8),
+ key: {
+ key: 'name',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'name--string--tag--true',
+ },
+ op: 'in',
+ value: [operation],
  },
- op: 'in',
- value: [operation],
- };
+ ...tagFilters,
+ ];
 
  const preparedQuery: Query = {
  ...apmToTraceQuery,
@@ -72,7 +83,7 @@ function TopOperationsTable({
  ...item,
  filters: {
  ...item.filters,
- items: [...item.filters.items, opFilter],
+ items: [...item.filters.items, ...opFilters],
  },
  })),
  },

diff --git a/frontend/src/hooks/useResourceAttribute/utils.ts b/frontend/src/hooks/useResourceAttribute/utils.ts
@@ -93,6 +93,22 @@ export const resourceAttributesToTagFilterItems = (
  value: `${res.tagValue}`.split(','),
  }));
 };
+/* Convert resource attributes to trace filters items for queryBuilder */
+export const resourceAttributesToTracesFilterItems = (
+ queries: IResourceAttribute[],
+): TagFilterItem[] =>
+ queries.map((res) => ({
+ id: `${res.id}`,
+ key: {
+ key: convertMetricKeyToTrace(res.tagKey),
+ isColumn: false,
+ type: MetricsType.Resource,
+ dataType: DataTypes.String,
+ id: `${convertMetricKeyToTrace(res.tagKey)}--string--resource--true`,
+ },
+ op: `${res.operator}`,
+ value: `${res.tagValue}`.split(','),
+ }));
 
 export const OperatorSchema: IOption[] = OperatorConversions.map(
  (operator) => ({