Merge branch 'develop' into introduce-base-rule

frontend/src/constants/localStorage.ts

@@ -19,5 +19,6 @@ export enum LOCALSTORAGE {
 	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 	THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
+	LAST_USED_SAVED_VIEWS = 'LAST_USED_SAVED_VIEWS',
 	SHOW_LOGS_QUICK_FILTERS = 'SHOW_LOGS_QUICK_FILTERS',
 }

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -19,6 +19,7 @@ import axios from 'axios';
 import cx from 'classnames';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -48,6 +49,7 @@ import {
 	Dispatch,
 	SetStateAction,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
 	useState,
@@ -61,7 +63,9 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
+import { PreservedViewsTypes } from './constants';
 import ExplorerOptionsHideArea from './ExplorerOptionsHideArea';
+import { PreservedViewsInLocalStorage } from './types';
 import {
 	DATASOURCE_VS_ROUTES,
 	generateRGBAFromHex,
@@ -90,6 +94,12 @@ function ExplorerOptions({
 	const history = useHistory();
 	const ref = useRef<RefSelectProps>(null);
 	const isDarkMode = useIsDarkMode();
+	const isLogsExplorer = sourcepage === DataSource.LOGS;
+
+	const PRESERVED_VIEW_LOCAL_STORAGE_KEY = LOCALSTORAGE.LAST_USED_SAVED_VIEWS;
+	const PRESERVED_VIEW_TYPE = isLogsExplorer
+		? PreservedViewsTypes.LOGS
+		: PreservedViewsTypes.TRACES;
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -107,7 +117,7 @@ function ExplorerOptions({
 			logEvent('Traces Explorer: Save view clicked', {
 				panelType,
 			});
-		} else if (sourcepage === DataSource.LOGS) {
+		} else if (isLogsExplorer) {
 			logEvent('Logs Explorer: Save view clicked', {
 				panelType,
 			});
@@ -141,7 +151,7 @@ function ExplorerOptions({
 			logEvent('Traces Explorer: Create alert', {
 				panelType,
 			});
-		} else if (sourcepage === DataSource.LOGS) {
+		} else if (isLogsExplorer) {
 			logEvent('Logs Explorer: Create alert', {
 				panelType,
 			});
@@ -166,7 +176,7 @@ function ExplorerOptions({
 			logEvent('Traces Explorer: Add to dashboard clicked', {
 				panelType,
 			});
-		} else if (sourcepage === DataSource.LOGS) {
+		} else if (isLogsExplorer) {
 			logEvent('Logs Explorer: Add to dashboard clicked', {
 				panelType,
 			});
@@ -265,6 +275,31 @@ function ExplorerOptions({
 		[viewsData, handleExplorerTabChange],
 	);
 
+	const updatePreservedViewInLocalStorage = (option: {
+		key: string;
+		value: string;
+	}): void => {
+		// Retrieve stored views from local storage
+		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+
+		// Initialize or parse the stored views
+		const updatedViews: PreservedViewsInLocalStorage = storedViews
+			? JSON.parse(storedViews)
+			: {};
+
+		// Update the views with the new selection
+		updatedViews[PRESERVED_VIEW_TYPE] = {
+			key: option.key,
+			value: option.value,
+		};
+
+		// Save the updated views back to local storage
+		localStorage.setItem(
+			PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+			JSON.stringify(updatedViews),
+		);
+	};
+
 	const handleSelect = (
 		value: string,
 		option: { key: string; value: string },
@@ -277,18 +312,42 @@ function ExplorerOptions({
 				panelType,
 				viewName: option?.value,
 			});
-		} else if (sourcepage === DataSource.LOGS) {
+		} else if (isLogsExplorer) {
 			logEvent('Logs Explorer: Select view', {
 				panelType,
 				viewName: option?.value,
 			});
 		}
+
+		updatePreservedViewInLocalStorage(option);
+
 		if (ref.current) {
 			ref.current.blur();
 		}
 	};
 
+	const removeCurrentViewFromLocalStorage = (): void => {
+		// Retrieve stored views from local storage
+		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+
+		if (storedViews) {
+			// Parse the stored views
+			const parsedViews = JSON.parse(storedViews);
+
+			// Remove the current view type from the parsed views
+			delete parsedViews[PRESERVED_VIEW_TYPE];
+
+			// Update local storage with the modified views
+			localStorage.setItem(
+				PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+				JSON.stringify(parsedViews),
+			);
+		}
+	};
+
 	const handleClearSelect = (): void => {
+		removeCurrentViewFromLocalStorage();
+
 		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
 	};
 
@@ -323,7 +382,7 @@ function ExplorerOptions({
 				panelType,
 				viewName: newViewName,
 			});
-		} else if (sourcepage === DataSource.LOGS) {
+		} else if (isLogsExplorer) {
 			logEvent('Logs Explorer: Save view successful', {
 				panelType,
 				viewName: newViewName,
@@ -358,6 +417,44 @@ function ExplorerOptions({
 
 	const isEditDeleteSupported = allowedRoles.includes(role as string);
 
+	const [
+		isRecentlyUsedSavedViewSelected,
+		setIsRecentlyUsedSavedViewSelected,
+	] = useState(false);
+
+	useEffect(() => {
+		const parsedPreservedView = JSON.parse(
+			localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
+		);
+
+		const preservedView = parsedPreservedView[PRESERVED_VIEW_TYPE] || {};
+
+		let timeoutId: string | number | NodeJS.Timeout | undefined;
+
+		if (
+			!!preservedView?.key &&
+			viewsData?.data?.data &&
+			!(!!viewName || !!viewKey) &&
+			!isRecentlyUsedSavedViewSelected
+		) {
+			// prevent the race condition with useShareBuilderUrl
+			timeoutId = setTimeout(() => {
+				onMenuItemSelectHandler({ key: preservedView.key });
+			}, 0);
+			setIsRecentlyUsedSavedViewSelected(false);
+		}
+
+		return (): void => clearTimeout(timeoutId);
+	}, [
+		PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+		PRESERVED_VIEW_TYPE,
+		isRecentlyUsedSavedViewSelected,
+		onMenuItemSelectHandler,
+		viewKey,
+		viewName,
+		viewsData?.data?.data,
+	]);
+
 	return (
 		<div className="explorer-options-container">
 			{isQueryUpdated && !isExplorerOptionHidden && (
@@ -476,12 +573,12 @@ function ExplorerOptions({
 						<Tooltip
 							title={
 								<div>
-									{sourcepage === DataSource.LOGS
+									{isLogsExplorer
 										? 'Learn more about Logs explorer '
 										: 'Learn more about Traces explorer '}
 									<Typography.Link
 										href={
-											sourcepage === DataSource.LOGS
+											isLogsExplorer
 												? 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar'
 												: 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar'
 										}

frontend/src/container/ExplorerOptions/constants.ts

@@ -0,0 +1,4 @@
+export enum PreservedViewsTypes {
+	LOGS = 'logs',
+	TRACES = 'traces',
+}

frontend/src/container/ExplorerOptions/types.ts

@@ -8,6 +8,8 @@ import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 import { SaveViewPayloadProps, SaveViewProps } from 'types/api/saveViews/types';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
+import { PreservedViewsTypes } from './constants';
+
 export interface SaveNewViewHandlerProps {
 	viewName: string;
 	compositeQuery: ICompositeMetricQuery;
@@ -26,3 +28,11 @@ export interface SaveNewViewHandlerProps {
 	redirectWithQueryBuilderData: QueryBuilderContextType['redirectWithQueryBuilderData'];
 	setNewViewName: Dispatch<SetStateAction<string>>;
 }
+
+export type PreservedViewType =
+	| PreservedViewsTypes.LOGS
+	| PreservedViewsTypes.TRACES;
+
+export type PreservedViewsInLocalStorage = Partial<
+	Record<PreservedViewType, { key: string; value: string }>
+>;

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -4,6 +4,8 @@ import ROUTES from 'constants/routes';
 import { routeConfig } from 'container/SideNav/config';
 import { getQueryString } from 'container/SideNav/helper';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useResourceAttribute from 'hooks/useResourceAttribute';
+import { resourceAttributesToTracesFilterItems } from 'hooks/useResourceAttribute/utils';
 import history from 'lib/history';
 import { traceFilterKeys } from 'pages/TracesExplorer/Filter/filterUtils';
 import { Dispatch, SetStateAction, useMemo } from 'react';
@@ -142,7 +144,12 @@ export function useGetAPMToTracesQueries({
 	filters?: TagFilterItem[];
 }): Query {
 	const { updateAllQueriesOperators } = useQueryBuilder();
+	const { queries } = useResourceAttribute();
 
+	const resourceAttributesFilters = useMemo(
+		() => resourceAttributesToTracesFilterItems(queries),
+		[queries],
+	);
 	const finalFilters: TagFilterItem[] = [];
 	let spanKindFilter: TagFilterItem;
 	let dbCallFilter: TagFilterItem;
@@ -185,6 +192,10 @@ export function useGetAPMToTracesQueries({
 		finalFilters.push(...filters);
 	}
 
+	if (resourceAttributesFilters?.length) {
+		finalFilters.push(...resourceAttributesFilters);
+	}
+
 	return useMemo(() => {
 		const updatedQuery = updateAllQueriesOperators(
 			initialQueriesMap.traces,
@@ -199,5 +210,5 @@ export function useGetAPMToTracesQueries({
 			finalFilters,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [servicename, updateAllQueriesOperators]);
+	}, [servicename, queries, updateAllQueriesOperators]);
 }

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -50,19 +50,21 @@ function TopOperationsTable({
 		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],
-		};
+		];
 
 		const preparedQuery: Query = {
 			...apmToTraceQuery,
@@ -72,7 +74,7 @@ function TopOperationsTable({
 					...item,
 					filters: {
 						...item.filters,
-						items: [...item.filters.items, opFilter],
+						items: [...item.filters.items, ...opFilters],
 					},
 				})),
 			},

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -140,6 +140,7 @@ function TimeSeriesView({
 				className="graph-container"
 				style={{ height: '100%', width: '100%' }}
 				ref={graphRef}
+				data-testid="time-series-graph"
 			>
 				{isLoading &&
 					(dataSource === DataSource.LOGS ? <LogsLoading /> : <TracesLoading />)}