chore: update the filter in / filter out operators (#5923)

* chore: update the filter in / filter out operators * fix: handle cases for old logs explorer
SigNoz · Sep 13, 2024 · 6661aa7 · 6661aa7
1 parent 8d54e3b
commit 6661aa7
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/frontend/src/components/Logs/AddToQueryHOC.tsx b/frontend/src/components/Logs/AddToQueryHOC.tsx
@@ -15,7 +15,7 @@ function AddToQueryHOC({
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
 		event.stopPropagation();
-		onAddToQuery(fieldKey, fieldValue, OPERATORS.IN);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS['=']);
 	};
 
 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [

diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -122,10 +122,10 @@ function TableView({
 		fieldValue: string,
 	) => (): void => {
 		handleClick(operator, fieldKey, fieldValue);
-		if (operator === OPERATORS.IN) {
+		if (operator === OPERATORS['=']) {
 			setIsFilterInLoading(true);
 		}
-		if (operator === OPERATORS.NIN) {
+		if (operator === OPERATORS['!=']) {
 			setIsFilterOutLoading(true);
 		}
 	};

diff --git a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
@@ -139,7 +139,7 @@ export function TableViewActions(
 									<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
 								)
 							}
-							onClick={onClickHandler(OPERATORS.IN, fieldFilterKey, fieldData.value)}
+							onClick={onClickHandler(OPERATORS['='], fieldFilterKey, fieldData.value)}
 						/>
 					</Tooltip>
 					<Tooltip title="Filter out value">
@@ -152,7 +152,11 @@ export function TableViewActions(
 									<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
 								)
 							}
-							onClick={onClickHandler(OPERATORS.NIN, fieldFilterKey, fieldData.value)}
+							onClick={onClickHandler(
+								OPERATORS['!='],
+								fieldFilterKey,
+								fieldData.value,
+							)}
 						/>
 					</Tooltip>
 					{!isOldLogsExplorerOrLiveLogsPage && (

diff --git a/frontend/src/container/LogDetailedView/index.tsx b/frontend/src/container/LogDetailedView/index.tsx
@@ -1,6 +1,7 @@
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ROUTES from 'constants/routes';
+import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import getStep from 'lib/getStep';
 import { getIdConditions } from 'pages/Logs/utils';
@@ -57,10 +58,11 @@ function LogDetailedView({
 
 	const handleAddToQuery = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string) => {
+			const newOperator = getOldLogsOperatorFromNew(operator);
 			const updatedQueryString = getGeneratedFilterQueryString(
 				fieldKey,
 				fieldValue,
-				operator,
+				newOperator,
 				queryString,
 			);
 
@@ -71,10 +73,11 @@ function LogDetailedView({
 
 	const handleClickActionItem = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string): void => {
+			const newOperator = getOldLogsOperatorFromNew(operator);
 			const updatedQueryString = getGeneratedFilterQueryString(
 				fieldKey,
 				fieldValue,
-				operator,
+				newOperator,
 				queryString,
 			);
 

diff --git a/frontend/src/hooks/logs/useActiveLog.ts b/frontend/src/hooks/logs/useActiveLog.ts
@@ -1,6 +1,6 @@
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -24,6 +24,16 @@ import { v4 as uuid } from 'uuid';
 
 import { UseActiveLog } from './types';
 
+export function getOldLogsOperatorFromNew(operator: string): string {
+	switch (operator) {
+		case OPERATORS['=']:
+			return OPERATORS.IN;
+		case OPERATORS['!=']:
+			return OPERATORS.NIN;
+		default:
+			return operator;
+	}
+}
 export const useActiveLog = (): UseActiveLog => {
 	const dispatch = useDispatch();
 
@@ -178,10 +188,11 @@ export const useActiveLog = (): UseActiveLog => {
 	);
 	const onAddToQueryLogs = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string) => {
+			const newOperator = getOldLogsOperatorFromNew(operator);
 			const updatedQueryString = getGeneratedFilterQueryString(
 				fieldKey,
 				fieldValue,
-				operator,
+				newOperator,
 				queryString,
 			);