From 4f6414ef61503a5cb339d7ccf29521cafd08ea1e Mon Sep 17 00:00:00 2001 From: Aditya Singh Date: Wed, 2 Sep 2026 12:13:37 +0000 Subject: [PATCH] fix(logs): preserve active viewKey in log-details filter/group/replace (#12757) #### Description - Fixes the issue where applying filter for value / filter out (also group by and replace filter) from the log details drawer was removing the added columns from the table. - As part of this fix, we rename `id` and `name` fields in explorerTabChange input type. Now it reads `viewName` and `viewKey` and avoids confusion - Now consumers of explorerTabChange need to send viewName and viewKey only if needed. As now this is an optional field #### Screenshots/Recording Before https://github.com/user-attachments/assets/4c6145e3-4979-4386-9230-f74eb00721c8 After https://github.com/user-attachments/assets/52bc3083-40a2-4345-aebd-63770882b06c #### Issues closed by this PR Closes https://github.com/SigNoz/engineering-pod/issues/6012 #### Additional Information - same issue was present in the old drawer (group by, replace filter) and the metrics explorer detail (passed the metric name)..both fixed here. metrics never surfaced as a bug since it opens in time series with no columns to collapse - filter for/out in the old drawer was never affected, it uses a different add to query path --- .../components/ExplorerCard/MenuItemGenerator.tsx | 4 ++-- .../container/ExplorerOptions/ExplorerOptions.tsx | 8 ++++---- .../src/container/Home/SavedViews/SavedViews.tsx | 4 ++-- .../LogDetailedView/BodyTitleRenderer.tsx | 5 ----- .../LogDetailedView/TableView/TableViewActions.tsx | 8 -------- .../TableView/__test__/TableViewActions.test.tsx | 2 -- .../hooks/useLogAttributeActions.tsx | 11 ----------- .../MetricDetails/AllAttributes.tsx | 4 ---- .../MetricDetails/MetricDetails.tsx | 2 -- frontend/src/hooks/useHandleExplorerTabChange.ts | 14 ++++++++------ frontend/src/pages/SaveView/index.tsx | 4 ++-- 11 files changed, 18 insertions(+), 48 deletions(-) diff --git a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx index 7cbd24a5e0c..9772658fe2a 100644 --- a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx +++ b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx @@ -57,8 +57,8 @@ function MenuItemGenerator({ handleExplorerTabChange(currentPanelType, { query, - name, - id, + viewName: name, + viewKey: id, }); }, [viewData, handleExplorerTabChange], diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 712ff7c8e3b..330bd2c45fe 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx @@ -452,15 +452,15 @@ function ExplorerOptions({ if (handleChangeSelectedView) { handleChangeSelectedView(panelTypeToExplorerView[currentPanelType], { query, - name, - id, + viewName: name, + viewKey: id, }); } else { // to remove this after traces cleanup handleExplorerTabChange(currentPanelType, { query, - name, - id, + viewName: name, + viewKey: id, }); } }, diff --git a/frontend/src/container/Home/SavedViews/SavedViews.tsx b/frontend/src/container/Home/SavedViews/SavedViews.tsx index c0eb6ff3ab9..0fc734bd5ec 100644 --- a/frontend/src/container/Home/SavedViews/SavedViews.tsx +++ b/frontend/src/container/Home/SavedViews/SavedViews.tsx @@ -115,8 +115,8 @@ export default function SavedViews({ currentPanelType, { query, - name, - id, + viewName: name, + viewKey: id, }, SOURCEPAGE_VS_ROUTES[selectedEntity], ); diff --git a/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx b/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx index b34279abe37..09317afdc72 100644 --- a/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx +++ b/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx @@ -16,7 +16,6 @@ import { } from 'constants/antlrQueryConstants'; import { FeatureKeys } from 'constants/features'; import { useActiveLog } from 'hooks/logs/useActiveLog'; -import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange'; import { useNotifications } from 'hooks/useNotifications'; @@ -49,7 +48,6 @@ function BodyTitleRenderer({ const { featureFlags } = useAppContext(); const [, setCopy] = useCopyToClipboard(); const { notifications } = useNotifications(); - const { viewName } = useGetSavedViewParams(); const cleanedNodeKey = removeObjectFromString(nodeKey); const isBodyJsonQueryEnabled = @@ -123,8 +121,6 @@ function BodyTitleRenderer({ ); const queryData: ICurrentQueryData = { - name: viewName, - id: updatedQuery.id, query: updatedQuery, }; @@ -137,7 +133,6 @@ function BodyTitleRenderer({ stagedQuery, updateQueriesData, value, - viewName, ]); const onClickHandler = (key: string): void => { diff --git a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx index 42234a7440a..d915fa6336b 100644 --- a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx +++ b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx @@ -12,7 +12,6 @@ import ROUTES from 'constants/routes'; import { ChangeViewFunctionType } from 'container/ExplorerOptions/types'; import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config'; import { MetricsType } from 'container/MetricsApplication/constant'; -import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange'; import { @@ -140,7 +139,6 @@ export default function TableViewActions( const { pathname } = useLocation(); const { stagedQuery, updateQueriesData } = useQueryBuilder(); - const { viewName } = useGetSavedViewParams(); const { dataType, logType: fieldType } = getFieldAttributes(record.field); // there is no option for where clause in old logs explorer and live logs page or infra monitoring @@ -201,8 +199,6 @@ export default function TableViewActions( ); const queryData: ICurrentQueryData = { - name: viewName, - id: updatedQuery.id, query: updatedQuery, }; @@ -214,7 +210,6 @@ export default function TableViewActions( fieldType, dataType, handleChangeSelectedView, - viewName, ]); const handleReplaceFilter = useCallback((): void => { @@ -264,8 +259,6 @@ export default function TableViewActions( ); const queryData: ICurrentQueryData = { - name: viewName, - id: updatedQuery.id, query: updatedQuery, }; @@ -278,7 +271,6 @@ export default function TableViewActions( dataType, fieldData, handleChangeSelectedView, - viewName, ]); // Memoize textToCopy computation diff --git a/frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx b/frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx index 536613b94bd..5f307667177 100644 --- a/frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx +++ b/frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx @@ -272,8 +272,6 @@ describe('TableViewActions', () => { expect(defaultProps.handleChangeSelectedView).toHaveBeenCalledWith( ExplorerViews.TIMESERIES, expect.objectContaining({ - name: '', - id: 'test-query-id', query: expect.objectContaining({ builder: expect.objectContaining({ queryData: expect.arrayContaining([ diff --git a/frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx b/frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx index 736a826c282..f1b454d686b 100644 --- a/frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx +++ b/frontend/src/container/LogDetailedView/hooks/useLogAttributeActions.tsx @@ -5,7 +5,6 @@ import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils'; import { FeatureKeys } from 'constants/features'; import ROUTES from 'constants/routes'; import { ChangeViewFunctionType } from 'container/ExplorerOptions/types'; -import { useGetSavedViewParams } from 'hooks/saveViews/useGetSavedViewParams'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange'; import { ExplorerViews } from 'pages/LogsExplorer/utils'; @@ -57,7 +56,6 @@ export function useLogAttributeActions({ const { pathname } = useLocation(); const { stagedQuery, updateQueriesData } = useQueryBuilder(); const { featureFlags } = useAppContext(); - const { viewName } = useGetSavedViewParams(); const isBodyJsonQueryEnabled = featureFlags?.find((flag) => flag.name === FeatureKeys.USE_JSON_BODY) @@ -110,8 +108,6 @@ export function useLogAttributeActions({ ); const queryData: ICurrentQueryData = { - name: viewName, - id: updatedQuery.id, query: updatedQuery, }; handleChangeSelectedView?.(ExplorerViews.LIST, queryData); @@ -120,7 +116,6 @@ export function useLogAttributeActions({ stagedQuery, isBodyJsonQueryEnabled, updateQueriesData, - viewName, handleChangeSelectedView, onApplyLogFilter, ], @@ -147,8 +142,6 @@ export function useLogAttributeActions({ ); const queryData: ICurrentQueryData = { - name: viewName, - id: updatedQuery.id, query: updatedQuery, }; handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData); @@ -157,7 +150,6 @@ export function useLogAttributeActions({ stagedQuery, isBodyJsonQueryEnabled, updateQueriesData, - viewName, handleChangeSelectedView, ], ); @@ -183,8 +175,6 @@ export function useLogAttributeActions({ ); const queryData: ICurrentQueryData = { - name: viewName, - id: updatedQuery.id, query: updatedQuery, }; handleChangeSelectedView?.(ExplorerViews.LIST, queryData); @@ -193,7 +183,6 @@ export function useLogAttributeActions({ stagedQuery, isBodyJsonQueryEnabled, updateQueriesData, - viewName, handleChangeSelectedView, ], ); diff --git a/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx b/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx index a93c4f803e0..eb97903eb1b 100644 --- a/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx +++ b/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx @@ -78,8 +78,6 @@ function AllAttributes({ PANEL_TYPES.TIME_SERIES, { query: compositeQuery, - name: metricName, - id: metricName, }, ROUTES.METRICS_EXPLORER_EXPLORER, true, @@ -109,8 +107,6 @@ function AllAttributes({ PANEL_TYPES.TIME_SERIES, { query: compositeQuery, - name: metricName, - id: metricName, }, ROUTES.METRICS_EXPLORER_EXPLORER, true, diff --git a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx index c3d7fba041a..5a7128235e9 100644 --- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx +++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx @@ -92,8 +92,6 @@ function MetricDetails({ PANEL_TYPES.TIME_SERIES, { query: compositeQuery, - name: metricName, - id: metricName, }, ROUTES.METRICS_EXPLORER_EXPLORER, true, diff --git a/frontend/src/hooks/useHandleExplorerTabChange.ts b/frontend/src/hooks/useHandleExplorerTabChange.ts index 88940358d61..9513280ecba 100644 --- a/frontend/src/hooks/useHandleExplorerTabChange.ts +++ b/frontend/src/hooks/useHandleExplorerTabChange.ts @@ -10,8 +10,8 @@ import { useGetSavedViewParams } from './saveViews/useGetSavedViewParams'; import { useQueryBuilder } from './queryBuilder/useQueryBuilder'; export interface ICurrentQueryData { - name: string; - id: string; + viewName?: string; + viewKey?: string; query: Query; } @@ -57,6 +57,8 @@ export const useHandleExplorerTabChange = (): { [currentQuery, updateAllQueriesOperators, updateQueriesData], ); + //TODO: this util is used not just to change explorer tab but also + // for changing just the query or saved view. consider renaming this. const handleExplorerTabChange = useCallback( ( type: string, @@ -77,8 +79,8 @@ export const useHandleExplorerTabChange = (): { query, { [QueryParams.panelTypes]: newPanelType, - [QueryParams.viewName]: currentQueryData?.name || viewName, - [QueryParams.viewKey]: currentQueryData?.id || viewKey, + [QueryParams.viewName]: currentQueryData?.viewName || viewName, + [QueryParams.viewKey]: currentQueryData?.viewKey || viewKey, }, redirectToUrl, undefined, @@ -89,8 +91,8 @@ export const useHandleExplorerTabChange = (): { query, { [QueryParams.panelTypes]: newPanelType, - [QueryParams.viewName]: currentQueryData?.name || viewName, - [QueryParams.viewKey]: currentQueryData?.id || viewKey, + [QueryParams.viewName]: currentQueryData?.viewName || viewName, + [QueryParams.viewKey]: currentQueryData?.viewKey || viewKey, }, undefined, undefined, diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx index 4ccd9332f03..59d93933749 100644 --- a/frontend/src/pages/SaveView/index.tsx +++ b/frontend/src/pages/SaveView/index.tsx @@ -209,8 +209,8 @@ function SaveView(): JSX.Element { currentPanelType, { query, - name, - id, + viewName: name, + viewKey: id, }, SOURCEPAGE_VS_ROUTES[sourcepage], );