chore: dashboard detail - panel data fetched - telemetry (#5871)

* chore: dashboard detail - panel data fetched - telemetry

* chore: dashboard detail - code refactor

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -22,6 +22,7 @@ import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import EmptyWidget from '../EmptyWidget';
 import { MenuItemKeys } from '../WidgetHeader/contants';
 import { GridCardGraphProps } from './types';
+import { isDataAvailableByPanelType } from './utils';
 import WidgetGraphComponent from './WidgetGraphComponent';
 
 function GridCardGraph({
@@ -182,7 +183,9 @@ function GridCardGraph({
 				setErrorMessage(error.message);
 			},
 			onSettled: (data) => {
-				dataAvailable?.(Boolean(data?.payload?.data?.result?.length));
+				dataAvailable?.(
+					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
+				);
 			},
 		},
 	);

frontend/src/container/GridCardLayout/GridCard/utils.ts

@@ -1,6 +1,8 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import getLabelName from 'lib/getLabelName';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 import { LegendEntryProps } from './FullView/types';
@@ -131,3 +133,21 @@ export const toggleGraphsVisibilityInChart = ({
 		lineChartRef?.current?.toggleGraph(index, showLegendData);
 	});
 };
+
+export const isDataAvailableByPanelType = (
+	data?: MetricRangePayloadProps['data'],
+	panelType?: string,
+): boolean => {
+	const getPanelData = (): any[] | undefined => {
+		switch (panelType) {
+			case PANEL_TYPES.TABLE:
+				return (data?.result?.[0] as any)?.table?.rows;
+			case PANEL_TYPES.LIST:
+				return data?.newResult?.data?.result?.[0]?.list as any[];
+			default:
+				return data?.result;
+		}
+	};
+
+	return Boolean(getPanelData()?.length);
+};

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -438,6 +438,10 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 				: true,
 		[selectedDashboard],
 	);
+
+	let isDataAvailableInAnyWidget = false;
+	const isLogEventCalled = useRef<boolean>(false);
+
 	return isDashboardEmpty ? (
 		<DashboardEmptyState />
 	) : (
@@ -516,6 +520,18 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 						);
 					}
 
+					const checkIfDataExists = (isDataAvailable: boolean): void => {
+						if (!isDataAvailableInAnyWidget && isDataAvailable) {
+							isDataAvailableInAnyWidget = true;
+						}
+						if (!isLogEventCalled.current && isDataAvailableInAnyWidget) {
+							isLogEventCalled.current = true;
+							logEvent('Dashboard Detail: Panel data fetched', {
+								isDataAvailableInAnyWidget,
+							});
+						}
+					};
+
 					return (
 						<CardContainer
 							className={isDashboardLocked ? '' : 'enable-resize'}
@@ -534,6 +550,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									variables={variables}
 									version={selectedDashboard?.data?.version}
 									onDragSelect={onDragSelect}
+									dataAvailable={checkIfDataExists}
 								/>
 							</Card>
 						</CardContainer>