diff --git a/dashboards-observability/public/components/app.tsx b/dashboards-observability/public/components/app.tsx
index d7b863eb0..6f3e4e08f 100644
--- a/dashboards-observability/public/components/app.tsx
+++ b/dashboards-observability/public/components/app.tsx
@@ -4,20 +4,21 @@
*/
import { I18nProvider } from '@osd/i18n/react';
+import { QueryManager } from 'common/query_manager';
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter, Route, Switch } from 'react-router-dom';
-import { QueryManager } from 'common/query_manager';
import { CoreStart } from '../../../../src/core/public';
import { observabilityID, observabilityTitle } from '../../common/constants/shared';
import store from '../framework/redux/store';
import { AppPluginStartDependencies } from '../types';
import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
+import { MetricsListener } from './common/metrics_listener';
import { Home as CustomPanelsHome } from './custom_panels/home';
import { EventAnalytics } from './event_analytics';
+import { Home as MetricsHome } from './metrics/index';
import { Main as NotebooksHome } from './notebooks/components/main';
import { Home as TraceAnalyticsHome } from './trace_analytics/home';
-import { Home as MetricsHome } from './metrics/index';
interface ObservabilityAppDeps {
CoreStartProp: CoreStart;
@@ -58,7 +59,7 @@ export const App = ({
- <>
+
- >
+
diff --git a/dashboards-observability/public/components/common/metrics_listener.tsx b/dashboards-observability/public/components/common/metrics_listener.tsx
new file mode 100644
index 000000000..ab971bb51
--- /dev/null
+++ b/dashboards-observability/public/components/common/metrics_listener.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { HttpStart } from '../../../../../src/core/public';
+import { OBSERVABILITY_BASE } from '../../../common/constants/shared';
+
+interface MetricsListenerProps {
+ http: HttpStart;
+}
+
+export const MetricsListener: React.FC = (props) => {
+ const incrementCountMetric = (element?: string | null) => {
+ if (!element) return;
+ props.http.post(`${OBSERVABILITY_BASE}/stats`, {
+ body: JSON.stringify({ element }),
+ });
+ };
+
+ const onClick: React.MouseEventHandler = (e) => {
+ incrementCountMetric(
+ (e.target as HTMLElement | null)
+ ?.closest('[data-click-metric-element]')
+ ?.getAttribute('data-click-metric-element')
+ );
+ };
+
+ return {props.children}
;
+};
diff --git a/dashboards-observability/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/dashboards-observability/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
index 281e70659..9c3997a72 100644
--- a/dashboards-observability/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
+++ b/dashboards-observability/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -882,12 +882,14 @@ exports[`Search bar components renders search bar 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>