feat(meter): better defaults in cost meter and user improvement (#9328)

frontend/src/constants/localStorage.ts

@@ -35,4 +35,5 @@ export enum LOCALSTORAGE {
 	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
+	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 }

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -1,19 +1,25 @@
 import './BreakDown.styles.scss';
 
 import { Alert, Typography } from 'antd';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import setLocalStorageApi from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card, CardContainer } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuid } from 'uuid';
 
 import {
@@ -108,27 +114,66 @@ function Section(section: MetricSection): JSX.Element {
 
 function BreakDown(): JSX.Element {
 	const { isCloudUser } = useGetTenantLicense();
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const showInfo =
+		getLocalStorageApi(LOCALSTORAGE.DISSMISSED_COST_METER_INFO) !== 'true';
+	const isDateBeforeAugust22nd2025 = (minTime: number): boolean => {
+		const august22nd2025UTC = dayjs.utc('2025-08-22T00:00:00Z');
+		return dayjs(minTime / 1e6).isBefore(august22nd2025UTC);
+	};
+	const showShortRangeWarning = (maxTime - minTime) / 1e6 < 61 * 60 * 1000;
+
 	return (
 		<div className="meter-explorer-breakdown">
 			<section className="meter-explorer-date-time">
 				<DateTimeSelectionV2 showAutoRefresh={false} />
 			</section>
 			<section className="meter-explorer-graphs">
-				<section className="info">
+				{showInfo && (
 					<Alert
 						type="info"
 						showIcon
+						closable
+						onClose={(): void => {
+							setLocalStorageApi(LOCALSTORAGE.DISSMISSED_COST_METER_INFO, 'true');
+						}}
 						message="Billing is calculated in UTC. To match your meter data with billing, select full-day ranges in UTC time (00:00 – 23:59 UTC). 
-						For example, if you’re in IST, for the billing of Jan 1, select your time range as Jan 1, 5:30 AM – Jan 2, 5:29 AM IST."
+						For example, if you’re in PT, for the billing of Jan 1, select your time range as Dec 31, 4:00 PM – Jan 1, 3:59 PM PT."
 					/>
-					{isCloudUser && (
-						<Alert
-							type="warning"
-							showIcon
-							message="Meter module data is accurate only from 22nd August 2025, 00:00 UTC onwards. Data before this time was collected during the beta phase and may be inaccurate."
-						/>
-					)}
-				</section>
+				)}
+				{isCloudUser && isDateBeforeAugust22nd2025(minTime) && (
+					<Alert
+						type="warning"
+						showIcon
+						message="Meter module data is accurate only from 22nd August 2025, 00:00 UTC onwards. Data before this time was collected during the beta phase and may be inaccurate."
+					/>
+				)}
+
+				{showShortRangeWarning && (
+					<Alert
+						type="warning"
+						showIcon
+						closable
+						message={
+							<>
+								Meter metrics data is aggregated over 1 hour period. Please select time
+								range accordingly.&nbsp;
+								<a
+									href="https://signoz.io/docs/cost-meter/overview/#accessing-cost-meter"
+									rel="noopener noreferrer"
+									target="_blank"
+									style={{ textDecoration: 'underline' }}
+								>
+									Learn more
+								</a>
+								.
+							</>
+						}
+					/>
+				)}
 				<section className="total">
 					<Section
 						id={sections[0].id}

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -53,7 +53,6 @@ const getRoute = (key: string): string => {
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
-	subMenu,
 	setSubMenu,
 	aggregateData,
 	contextLinks,
@@ -69,8 +68,6 @@ const useBaseAggregateOptions = ({
 	} = useUpdatedQuery();
 	const { selectedDashboard } = useDashboard();
 
-	console.log('>>V subMenu', subMenu);
-
 	useEffect(() => {
 		if (!aggregateData) return;
 		const resolveQuery = async (): Promise<void> => {

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -162,6 +162,10 @@ export const getDefaultOption = (route: string): Time => {
 	if (route === ROUTES.APPLICATION) {
 		return Options[2].value;
 	}
+
+	if (route === ROUTES.METER) {
+		return Options[5].value;
+	}
 	return Options[2].value;
 };