Feedback from Jose re: telemetry (#1294)

webapp/src/components/backstage/playbook_editor/outline/outline.tsx

@@ -9,7 +9,7 @@ import {useIntl} from 'react-intl';
 import {PlaybookWithChecklist} from 'src/types/playbook';
 import MarkdownEdit from 'src/components/markdown_edit';
 import ChecklistList from 'src/components/checklist/checklist_list';
-import {usePlaybookNavigationTelemetry} from 'src/hooks/telemetry';
+import {usePlaybookViewTelemetry, PlaybookTarget} from 'src/hooks/telemetry';
 
 import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
 
@@ -33,7 +33,7 @@ interface Props {
 type StyledAttrs = {className?: string};
 
 const Outline = ({playbook, refetch}: Props) => {
-    usePlaybookNavigationTelemetry('outline', playbook.id);
+    usePlaybookViewTelemetry(PlaybookTarget.Outline, playbook.id);
 
     const {formatMessage} = useIntl();
     const updatePlaybook = useUpdatePlaybook(playbook.id);

webapp/src/components/backstage/playbook_runs/playbook_run_backstage/overview/overview.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import {usePlaybookRunNavigationTelemetry} from 'src/hooks/telemetry';
+import {usePlaybookRunViewTelemetry, PlaybookRunTarget} from 'src/hooks/telemetry';
 
 import Description from 'src/components/backstage/playbook_runs/playbook_run_backstage/overview/description';
 import Updates from 'src/components/backstage/playbook_runs/playbook_run_backstage/overview/updates';
@@ -15,7 +15,7 @@ import {Container, Left, Right} from 'src/components/backstage/playbook_runs/sha
 import {PlaybookRun} from 'src/types/playbook_run';
 
 export const Overview = (props: {playbookRun: PlaybookRun}) => {
-    usePlaybookRunNavigationTelemetry('overview', props.playbookRun.id);
+    usePlaybookRunViewTelemetry(PlaybookRunTarget.Overview, props.playbookRun.id);
 
     return (
         <Container>

webapp/src/components/backstage/playbook_runs/playbook_run_backstage/retrospective/retrospective.tsx

@@ -15,7 +15,7 @@ import {Container, Content, Left, Right, Title} from 'src/components/backstage/p
 import UpgradeBanner from 'src/components/upgrade_banner';
 import {AdminNotificationType} from 'src/constants';
 
-import {useAllowPlaybookAndRunMetrics, useAllowRetrospectiveAccess, usePlaybookRunNavigationTelemetry} from 'src/hooks';
+import {useAllowPlaybookAndRunMetrics, useAllowRetrospectiveAccess, usePlaybookRunViewTelemetry, PlaybookRunTarget} from 'src/hooks';
 import {PlaybookRun, RunMetricData} from 'src/types/playbook_run';
 import {Metric} from 'src/types/playbook';
 
@@ -58,7 +58,7 @@ const PUB_TIME = {
 };
 
 export const Retrospective = (props: Props) => {
-    usePlaybookRunNavigationTelemetry('retrospective', props.playbookRun.id);
+    usePlaybookRunViewTelemetry(PlaybookRunTarget.Retrospective, props.playbookRun.id);
 
     const allowRetrospectiveAccess = useAllowRetrospectiveAccess();
     const {formatMessage} = useIntl();

webapp/src/components/backstage/playbooks/metrics/playbook_key_metrics.tsx

@@ -13,7 +13,7 @@ import {PlaybookRunStatus} from 'src/types/playbook_run';
 import MetricsRunList from 'src/components/backstage/playbooks/metrics/metrics_run_list';
 import NoMetricsPlaceholder from 'src/components/backstage/playbooks/metrics/no_metrics_placeholder';
 import {Metric} from 'src/types/playbook';
-import {usePlaybookNavigationTelemetry} from 'src/hooks/telemetry';
+import {usePlaybookViewTelemetry, PlaybookTarget} from 'src/hooks/telemetry';
 
 const defaultPlaybookFetchParams = {
     page: 0,
@@ -37,7 +37,7 @@ const PlaybookKeyMetrics = ({
     stats,
     ...attrs
 }: Props & Attrs) => {
-    usePlaybookNavigationTelemetry('reports', playbookID);
+    usePlaybookViewTelemetry(PlaybookTarget.Reports, playbookID);
     const allowStatsView = useAllowPlaybookAndRunMetrics();
     const [playbookRuns, totalCount, fetchParams, setFetchParams] = useRunsList(defaultPlaybookFetchParams);
 

webapp/src/components/backstage/playbooks/playbook_usage.tsx

@@ -10,7 +10,7 @@ import StatsView from 'src/components/backstage/playbooks/stats_view';
 import {useRunsList} from 'src/hooks';
 import RunList from '../runs_list/runs_list';
 import {PlaybookRunStatus} from 'src/types/playbook_run';
-import {usePlaybookNavigationTelemetry} from 'src/hooks/telemetry';
+import {usePlaybookViewTelemetry, PlaybookTarget} from 'src/hooks/telemetry';
 
 const defaultPlaybookFetchParams = {
     page: 0,
@@ -32,7 +32,7 @@ const PlaybookUsage = ({
     stats,
     ...attrs
 }: Props & Attrs) => {
-    usePlaybookNavigationTelemetry('usage', playbookID);
+    usePlaybookViewTelemetry(PlaybookTarget.Usage, playbookID);
     const [filterPill, setFilterPill] = useState<ReactNode>(null);
     const [playbookRuns, totalCount, fetchParams, setFetchParams] = useRunsList(defaultPlaybookFetchParams);
 

webapp/src/components/rhs/rhs_run_details.tsx

@@ -23,14 +23,14 @@ import {FINISHED, RunDetailsTutorialSteps, SKIPPED, TutorialTourCategories} from
 import {displayRhsRunDetailsTourDialog} from 'src/actions';
 import {useTutorialStepper} from '../tutorial/tutorial_tour_tip/manager';
 import {browserHistory} from 'src/webapp_globals';
-import {usePlaybookRunNavigationTelemetry} from 'src/hooks/telemetry';
+import {usePlaybookRunViewTelemetry, PlaybookRunTarget} from 'src/hooks/telemetry';
 
 const RHSRunDetails = () => {
     const dispatch = useDispatch();
     const scrollbarsRef = useRef<Scrollbars>(null);
 
     const playbookRun = useSelector(currentPlaybookRun);
-    usePlaybookRunNavigationTelemetry('channels_rhs_details', playbookRun?.id);
+    usePlaybookRunViewTelemetry(PlaybookRunTarget.ChannelsRHSDetails, playbookRun?.id);
 
     const prevStatus = usePrevious(playbookRun?.current_status);
 

webapp/src/hooks/telemetry.ts

@@ -2,18 +2,30 @@ import {useEffect} from 'react';
 
 import {telemetryEventForPlaybook, telemetryEventForPlaybookRun} from 'src/client';
 
-export const usePlaybookNavigationTelemetry = (target: string, playbookID?: string) => {
+export enum PlaybookTarget {
+    Usage = 'view_playbook_usage',
+    Outline = 'view_playbook_outline',
+    Reports = 'view_playbook_reports'
+}
+
+export enum PlaybookRunTarget {
+    Overview = 'view_run_overview',
+    Retrospective = 'view_run_retrospective',
+    ChannelsRHSDetails = 'view_run_channels_rhs_details',
+}
+
+export const usePlaybookViewTelemetry = (target: PlaybookTarget, playbookID?: string) => {
     useEffect(() => {
         if (playbookID) {
-            telemetryEventForPlaybook(playbookID, `navigate_playbook_${target}`);
+            telemetryEventForPlaybook(playbookID, target);
         }
     }, [playbookID]);
 };
 
-export const usePlaybookRunNavigationTelemetry = (target: string, playbookRunID?: string) => {
+export const usePlaybookRunViewTelemetry = (target: PlaybookRunTarget, playbookRunID?: string) => {
     useEffect(() => {
         if (playbookRunID) {
-            telemetryEventForPlaybookRun(playbookRunID, `navigate_run_${target}`);
+            telemetryEventForPlaybookRun(playbookRunID, target);
         }
     }, [playbookRunID]);
 };