{
+ logEvent(MetricsExplorerEvents.TabChanged, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ });
+ }, []);
+
+ useEffect(() => {
+ logEvent(MetricsExplorerEvents.TimeUpdated, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ });
+ }, [maxTime, minTime]);
+
// This is used to avoid the filters from being serialized with the id
const queryFiltersWithoutId = useMemo(() => {
const filtersWithoutId = {
@@ -154,6 +168,9 @@ function Summary(): JSX.Element {
[SUMMARY_FILTERS_KEY]: JSON.stringify(value),
});
setCurrentPage(1);
+ logEvent(MetricsExplorerEvents.FilterApplied, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ });
},
[setSearchParams, searchParams],
);
@@ -169,6 +186,14 @@ function Summary(): JSX.Element {
const onPaginationChange = (page: number, pageSize: number): void => {
setCurrentPage(page);
setPageSize(pageSize);
+ logEvent(MetricsExplorerEvents.PageNumberChanged, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ [MetricsExplorerEventKeys.PageNumber]: page,
+ });
+ logEvent(MetricsExplorerEvents.PageSizeChanged, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ [MetricsExplorerEventKeys.PageSize]: pageSize,
+ });
};
const formattedMetricsData = useMemo(
@@ -176,7 +201,10 @@ function Summary(): JSX.Element {
[metricsData],
);
- const openMetricDetails = (metricName: string): void => {
+ const openMetricDetails = (
+ metricName: string,
+ view: 'list' | 'treemap',
+ ): void => {
setSelectedMetricName(metricName);
setIsMetricDetailsOpen(true);
setSearchParams({
@@ -184,6 +212,10 @@ function Summary(): JSX.Element {
[IS_METRIC_DETAILS_OPEN_KEY]: 'true',
[SELECTED_METRIC_NAME_KEY]: metricName,
});
+ logEvent(MetricsExplorerEvents.MetricClicked, {
+ [MetricsExplorerEventKeys.MetricName]: metricName,
+ [MetricsExplorerEventKeys.View]: view,
+ });
};
const closeMetricDetails = (): void => {
@@ -217,6 +249,23 @@ function Summary(): JSX.Element {
});
};
+ const handleSetHeatmapView = (view: TreemapViewType): void => {
+ setHeatmapView(view);
+ logEvent(MetricsExplorerEvents.TreemapViewChanged, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ [MetricsExplorerEventKeys.ViewType]: view,
+ });
+ };
+
+ const handleSetOrderBy = (orderBy: OrderByPayload): void => {
+ setOrderBy(orderBy);
+ logEvent(MetricsExplorerEvents.OrderByApplied, {
+ [MetricsExplorerEventKeys.Tab]: 'summary',
+ [MetricsExplorerEventKeys.ColumnName]: orderBy.columnName,
+ [MetricsExplorerEventKeys.Order]: orderBy.order,
+ });
+ };
+
return (
}>
@@ -227,7 +276,7 @@ function Summary(): JSX.Element {
isError={isProportionViewError}
viewType={heatmapView}
openMetricDetails={openMetricDetails}
- setHeatmapView={setHeatmapView}
+ setHeatmapView={handleSetHeatmapView}
/>
{
);
fireEvent.click(screen.getByText('Metric 1'));
- expect(mockOpenMetricDetails).toHaveBeenCalledWith('metric1');
+ expect(mockOpenMetricDetails).toHaveBeenCalledWith('metric1', 'list');
});
it('calls setOrderBy when column header is clicked', () => {
diff --git a/frontend/src/container/MetricsExplorer/Summary/types.ts b/frontend/src/container/MetricsExplorer/Summary/types.ts
index 4996a7942416..b836c9d79a09 100644
--- a/frontend/src/container/MetricsExplorer/Summary/types.ts
+++ b/frontend/src/container/MetricsExplorer/Summary/types.ts
@@ -1,5 +1,5 @@
import { MetricsTreeMapResponse } from 'api/metricsExplorer/getMetricsTreeMap';
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
import {
IBuilderQuery,
TagFilter,
@@ -12,9 +12,9 @@ export interface MetricsTableProps {
pageSize: number;
currentPage: number;
onPaginationChange: (page: number, pageSize: number) => void;
- setOrderBy: Dispatch>;
+ setOrderBy: (orderBy: OrderByPayload) => void;
totalCount: number;
- openMetricDetails: (metricName: string) => void;
+ openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
queryFilters: TagFilter;
}
@@ -28,7 +28,7 @@ export interface MetricsTreemapProps {
isLoading: boolean;
isError: boolean;
viewType: TreemapViewType;
- openMetricDetails: (metricName: string) => void;
+ openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
setHeatmapView: (value: TreemapViewType) => void;
}
diff --git a/frontend/src/container/MetricsExplorer/events.ts b/frontend/src/container/MetricsExplorer/events.ts
new file mode 100644
index 000000000000..014f533cfd16
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/events.ts
@@ -0,0 +1,51 @@
+/**
+ * This file contains all analytics events for the Metrics Explorer.
+ */
+export enum MetricsExplorerEvents {
+ TabChanged = 'Metrics Explorer: Tab visited',
+ ModalOpened = 'Metrics Explorer: Modal opened',
+ MetricClicked = 'Metrics Explorer: Metric clicked',
+ FilterApplied = 'Metrics Explorer: Filter applied',
+ TimeUpdated = 'Metrics Explorer: Time updated',
+ TreemapViewChanged = 'Metrics Explorer: Treemap view changed',
+ PageNumberChanged = 'Metrics Explorer: Page number changed',
+ PageSizeChanged = 'Metrics Explorer: Page size changed',
+ OrderByApplied = 'Metrics Explorer: Order by applied',
+ MetricMetadataUpdated = 'Metrics Explorer: Metric metadata updated',
+ OpenInExplorerClicked = 'Metrics Explorer: Open in explorer clicked',
+ InspectViewChanged = 'Metrics Explorer: Inspect view changed',
+ InspectQueryChanged = 'Metrics Explorer: Inspect query changed',
+ InspectPointClicked = 'Metrics Explorer: Inspect point clicked',
+ QueryBuilderQueryChanged = 'Metrics Explorer: QueryBuilder query changed',
+ YAxisUnitApplied = 'Metrics Explorer: Y axis unit applied',
+ AddToAlertClicked = 'Metrics Explorer: Add to alert clicked',
+ AddToDashboardClicked = 'Metrics Explorer: Add to dashboard clicked',
+ SaveViewClicked = 'Metrics Explorer: Save view clicked',
+ SearchApplied = 'Metrics Explorer: Search applied',
+ ViewEdited = 'Metrics Explorer: View edited',
+ ViewDeleted = 'Metrics Explorer: View deleted',
+}
+
+export enum MetricsExplorerEventKeys {
+ Tab = 'tab',
+ Modal = 'modal',
+ View = 'view',
+ Interval = 'interval',
+ ViewType = 'viewType',
+ PageNumber = 'pageNumber',
+ PageSize = 'pageSize',
+ ColumnName = 'columnName',
+ Order = 'order',
+ AttributeKey = 'attributeKey',
+ AttributeValue = 'attributeValue',
+ MetricName = 'metricName',
+ InspectView = 'inspectView',
+ TimeAggregationOption = 'timeAggregationOption',
+ TimeAggregationInterval = 'timeAggregationInterval',
+ SpaceAggregationOption = 'spaceAggregationOption',
+ SpaceAggregationLabels = 'spaceAggregationLabels',
+ OneChartPerQueryEnabled = 'oneChartPerQueryEnabled',
+ YAxisUnit = 'yAxisUnit',
+ ViewName = 'viewName',
+ Filters = 'filters',
+}
diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx
index e470cf3013b3..c8c8fd810cf0 100644
--- a/frontend/src/pages/SaveView/index.tsx
+++ b/frontend/src/pages/SaveView/index.tsx
@@ -17,6 +17,10 @@ import {
} from 'components/ExplorerCard/utils';
import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
import { getRandomColor } from 'container/ExplorerOptions/utils';
+import {
+ MetricsExplorerEventKeys,
+ MetricsExplorerEvents,
+} from 'container/MetricsExplorer/events';
import { useDeleteView } from 'hooks/saveViews/useDeleteView';
import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
import { useUpdateView } from 'hooks/saveViews/useUpdateView';
@@ -155,6 +159,10 @@ function SaveView(): JSX.Element {
logEvent('Logs Views: Views visited', {
number: viewsData?.data?.data?.length,
});
+ } else if (sourcepage === DataSource.METRICS) {
+ logEvent(MetricsExplorerEvents.TabChanged, {
+ [MetricsExplorerEventKeys.Tab]: 'views',
+ });
}
logEventCalledRef.current = true;
}
@@ -176,6 +184,9 @@ function SaveView(): JSX.Element {
});
hideEditViewModal();
refetchAllView();
+ logEvent(MetricsExplorerEvents.ViewEdited, {
+ [MetricsExplorerEventKeys.Tab]: 'views',
+ });
},
onError: (err) => {
showErrorNotification(notifications, err);
@@ -204,6 +215,10 @@ function SaveView(): JSX.Element {
},
SOURCEPAGE_VS_ROUTES[sourcepage],
);
+ logEvent(MetricsExplorerEvents.OpenInExplorerClicked, {
+ [MetricsExplorerEventKeys.Tab]: 'views',
+ [MetricsExplorerEventKeys.ViewName]: name,
+ });
}
};
diff --git a/frontend/src/pages/SaveView/utils.ts b/frontend/src/pages/SaveView/utils.ts
index fff54a6cebeb..637ac5542edb 100644
--- a/frontend/src/pages/SaveView/utils.ts
+++ b/frontend/src/pages/SaveView/utils.ts
@@ -1,6 +1,11 @@
import { NotificationInstance } from 'antd/es/notification/interface';
+import logEvent from 'api/common/logEvent';
import { MenuItemLabelGeneratorProps } from 'components/ExplorerCard/types';
import { showErrorNotification } from 'components/ExplorerCard/utils';
+import {
+ MetricsExplorerEventKeys,
+ MetricsExplorerEvents,
+} from 'container/MetricsExplorer/events';
import { UseMutateAsyncFunction } from 'react-query';
import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
@@ -29,6 +34,9 @@ export const deleteViewHandler = ({
message: 'View Deleted Successfully',
});
refetchAllView();
+ logEvent(MetricsExplorerEvents.ViewDeleted, {
+ [MetricsExplorerEventKeys.Tab]: 'views',
+ });
},
onError: (err) => {
showErrorNotification(notifications, err);