feat(core): add google analytics to logger (#9246)

* feat(core): add google analytics to logger * refactor(core): replace core react ga call with logger calls Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · May 26, 2021 · 50e06cb · 50e06cb
1 parent 5956d64
commit 50e06cb
Show file tree

Hide file tree

Showing 40 changed files with 155 additions and 147 deletions.
diff --git a/app/scripts/modules/amazon/src/loadBalancer/AmazonLoadBalancersTag.tsx b/app/scripts/modules/amazon/src/loadBalancer/AmazonLoadBalancersTag.tsx
@@ -3,14 +3,14 @@
 
 import { sortBy } from 'lodash';
 import React from 'react';
-import ReactGA from 'react-ga';
 
 import {
   HealthCounts,
   HoverablePopover,
   ILoadBalancer,
   ILoadBalancersTagProps,
   LoadBalancerDataUtils,
+  logger,
   ReactInjector,
   Spinner,
   Tooltip,
@@ -87,7 +87,7 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
   private showLoadBalancerDetails = (loadBalancer: ILoadBalancer): void => {
     const { $state } = ReactInjector;
     const serverGroup = this.props.serverGroup;
-    ReactGA.event({ category: 'Cluster Pod', action: `Load Load Balancer Details (multiple menu)` });
+    logger.log({ category: 'Cluster Pod', action: `Load Load Balancer Details (multiple menu)` });
     const nextState = $state.current.name.endsWith('.clusters') ? '.loadBalancerDetails' : '^.loadBalancerDetails';
     $state.go(nextState, {
       region: serverGroup.region,
@@ -99,7 +99,7 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
 
   private showTargetGroupDetails = (targetGroup: ITargetGroup): void => {
     const { $state } = ReactInjector;
-    ReactGA.event({ category: 'Cluster Pod', action: `Load Target Group Details (multiple menu)` });
+    logger.log({ category: 'Cluster Pod', action: `Load Target Group Details (multiple menu)` });
     const nextState = $state.current.name.endsWith('.clusters') ? '.targetGroupDetails' : '^.targetGroupDetails';
     $state.go(nextState, {
       region: targetGroup.region,
@@ -111,7 +111,7 @@ export class AmazonLoadBalancersTag extends React.Component<ILoadBalancersTagPro
   };
 
   private handleShowPopover = () => {
-    ReactGA.event({ category: 'Cluster Pod', action: `Show Load Balancers Menu` });
+    logger.log({ category: 'Cluster Pod', action: `Show Load Balancers Menu` });
   };
 
   private handleClick = (e: React.MouseEvent<HTMLElement>): void => {

diff --git a/app/scripts/modules/core/src/application/config/managedResources/ManagedResourceConfig.tsx b/app/scripts/modules/core/src/application/config/managedResources/ManagedResourceConfig.tsx
@@ -1,13 +1,13 @@
 import { module } from 'angular';
 import classNames from 'classnames';
 import React from 'react';
-import ReactGA from 'react-ga';
 import { react2angular } from 'react2angular';
 
 import { ManagedWriter } from 'core/managed';
 import { useLatestCallback, ValidationMessage } from 'core/presentation';
 import { withErrorBoundary } from 'core/presentation/SpinErrorBoundary';
 import { NgReact } from 'core/reactShims';
+import { logger } from 'core/utils';
 
 import { Application } from '../../application.model';
 
@@ -21,10 +21,10 @@ export interface IManagedResourceConfigProps {
 }
 
 const logClick = (label: string, application: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Managed Resource Config',
     action: `${label} clicked`,
-    label: application,
+    data: { label: application },
   });
 
 const getManagementStatus = (paused: boolean) => {

diff --git a/app/scripts/modules/core/src/entityTag/notifications/NotificationsPopover.tsx b/app/scripts/modules/core/src/entityTag/notifications/NotificationsPopover.tsx
@@ -1,13 +1,12 @@
 import { pick, uniq } from 'lodash';
 import React from 'react';
-import ReactGA from 'react-ga';
 
 import { Application } from 'core/application';
 import { ConfirmationModalService } from 'core/confirmationModal';
 import { IEntityTag, IEntityTags } from 'core/domain';
 import { HoverablePopover, IHoverablePopoverContentsProps, Placement } from 'core/presentation';
 import { ITaskMonitorConfig } from 'core/task';
-import { noop } from 'core/utils';
+import { logger, noop } from 'core/utils';
 
 import { CategorizedNotifications } from './CategorizedNotifications';
 import { EntityTagEditor, IEntityTagEditorProps } from '../EntityTagEditor';
@@ -154,7 +153,7 @@ export class NotificationsPopover extends React.Component<INotificationsPopoverP
 
   public fireGAEvent = (): void => {
     const analyticsLabel = this.props.gaLabelFn(this.props);
-    ReactGA.event({ action: 'SPAN', category: 'Alerts hovered', label: analyticsLabel });
+    logger.log({ action: 'SPAN', category: 'Alerts hovered', data: { label: analyticsLabel } });
   };
 
   private PopoverContent = ({ hidePopover }: IHoverablePopoverContentsProps) => {

diff --git a/app/scripts/modules/core/src/filterModel/FilterTags.tsx b/app/scripts/modules/core/src/filterModel/FilterTags.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ReactGA from 'react-ga';
 
 import { CollapsibleSectionStateCache } from 'core/cache';
+import { logger } from 'core/utils';
 
 export interface IFilter {
   label: string;
@@ -39,13 +39,13 @@ export const FilterTags = ({ clearFilters, tags, tagCleared }: IFilterTagsProps)
     if (clearFilters) {
       clearFilters();
     }
-    ReactGA.event({ category: 'Filter Tags', action: 'Clear All clicked' });
+    logger.log({ category: 'Filter Tags', action: 'Clear All clicked' });
   };
 
   const clearIndividualFilter = (tag: IFilterTag): void => {
     tag.clear();
     tagCleared();
-    ReactGA.event({ category: 'Filter Tags', action: 'Individual tag removed' });
+    logger.log({ category: 'Filter Tags', action: 'Individual tag removed' });
   };
 
   return (

diff --git a/app/scripts/modules/core/src/help/HelpField.tsx b/app/scripts/modules/core/src/help/HelpField.tsx
@@ -1,8 +1,8 @@
 import { isUndefined } from 'lodash';
 import React from 'react';
-import ReactGA from 'react-ga';
 
 import { HoverablePopover, Markdown, Placement } from 'core/presentation';
+import { logger } from 'core/utils';
 
 import { HelpTextExpandedContext } from './HelpTextExpandedContext';
 import { HelpContentsRegistry } from './helpContents.registry';
@@ -35,7 +35,7 @@ export function HelpField(props: IHelpFieldProps) {
   const onShow = (): void => setPopoverShownStart(Date.now());
   const onHide = (): void => {
     if (Date.now() - popoverShownStart > 500) {
-      ReactGA.event({ action: 'Help contents viewed', category: 'Help', label: props.id || props.content });
+      logger.log({ action: 'Help contents viewed', category: 'Help', data: { label: props.id || props.content } });
     }
   };
 

diff --git a/app/scripts/modules/core/src/instance/details/InstanceInsights.tsx b/app/scripts/modules/core/src/instance/details/InstanceInsights.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropdown } from 'react-bootstrap';
-import ReactGA from 'react-ga';
 
 import { IInstance } from 'core/domain';
+import { logger } from 'core/utils';
 
 export interface Insight {
   label: string;
@@ -18,10 +18,10 @@ export interface IInstanceInsightsProps {
 
 export const InstanceInsights = ({ analytics, insights, instance, title }: IInstanceInsightsProps) => {
   const logClickEvent = (label: string) => {
-    ReactGA.event({
+    logger.log({
       category: 'Insight Menu (Instance)',
       action: `${label} clicked`,
-      label: `${instance.account}/${instance.region}/${instance.name}/${instance.serverGroup}`,
+      data: { label: `${instance.account}/${instance.region}/${instance.name}/${instance.serverGroup}` },
     });
   };
 

diff --git a/app/scripts/modules/core/src/loadBalancer/LoadBalancersTag.tsx b/app/scripts/modules/core/src/loadBalancer/LoadBalancersTag.tsx
@@ -1,12 +1,12 @@
 import { sortBy } from 'lodash';
 import React from 'react';
-import ReactGA from 'react-ga';
 
 import { ILoadBalancer } from 'core/domain';
 import { HealthCounts } from 'core/healthCounts/HealthCounts';
 import { HoverablePopover } from 'core/presentation';
 import { Tooltip } from 'core/presentation/Tooltip';
 import { ReactInjector } from 'core/reactShims';
+import { logger } from 'core/utils';
 import { Spinner } from 'core/widgets';
 
 import { ILoadBalancersTagProps } from './LoadBalancersTagWrapper';
@@ -72,7 +72,7 @@ export class LoadBalancersTag extends React.Component<ILoadBalancersTagProps, IL
   private showLoadBalancerDetails = (loadBalancer: ILoadBalancer): void => {
     const { $state } = ReactInjector;
     const serverGroup = this.props.serverGroup;
-    ReactGA.event({ category: 'Cluster Pod', action: `Load Load Balancer Details (multiple menu)` });
+    logger.log({ category: 'Cluster Pod', action: `Load Load Balancer Details (multiple menu)` });
     const nextState = $state.current.name.endsWith('.clusters') ? '.loadBalancerDetails' : '^.loadBalancerDetails';
     $state.go(nextState, {
       region: serverGroup.region,
@@ -83,7 +83,7 @@ export class LoadBalancersTag extends React.Component<ILoadBalancersTagProps, IL
   };
 
   private handleShowPopover = () => {
-    ReactGA.event({ category: 'Cluster Pod', action: `Show Load Balancers Menu` });
+    logger.log({ category: 'Cluster Pod', action: `Show Load Balancers Menu` });
   };
 
   private handleClick = (e: React.MouseEvent<HTMLElement>): void => {

diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Dropdown, MenuItem } from 'react-bootstrap';
-import ReactGA from 'react-ga';
 
 import { Application } from 'core/application';
 import { SETTINGS } from 'core/config/settings';
@@ -9,6 +8,7 @@ import { HelpField } from 'core/help';
 import { HoverablePopover } from 'core/presentation';
 import { ReactInjector } from 'core/reactShims';
 
+import { logger } from '..';
 import managedDeliveryLogo from './icons/md-logo-color.svg';
 import { showManagedResourceHistoryModal } from './resourceHistory/ManagedResourceHistoryModal';
 import { toggleResourcePause } from './toggleResourceManagement';
@@ -21,10 +21,10 @@ export interface IManagedResourceDetailsIndicatorProps {
 }
 
 const logClick = (label: string, resourceId: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Managed Resource Menu',
     action: `${label} clicked`,
-    label: resourceId,
+    data: { label: resourceId },
   });
 
 export const ManagedResourceDetailsIndicator = ({

diff --git a/app/scripts/modules/core/src/managed/ToggleManagedResourceForApplication.tsx b/app/scripts/modules/core/src/managed/ToggleManagedResourceForApplication.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useState } from 'react';
-import ReactGA from 'react-ga';
 
 import { Illustration, IllustrationName } from '@spinnaker/presentation';
+import { logger } from 'core/utils';
 
 import { Button } from './Button';
 import { ManagedWriter } from './ManagedWriter';
@@ -16,10 +16,10 @@ import {
 } from '../presentation';
 
 const logClick = (label: string, application: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Environments - toggle application management modal',
     action: `${label} clicked`,
-    label: application,
+    data: { label: application },
   });
 
 export interface IToggleManagedResourceForApplicationModalProps extends IModalComponentProps {

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/MarkArtifactAsBadModal.tsx b/app/scripts/modules/core/src/managed/artifactDetail/MarkArtifactAsBadModal.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useEffect } from 'react';
-import ReactGA from 'react-ga';
 import { Option } from 'react-select';
 
 import { Illustration } from '@spinnaker/presentation';
+import { logger } from 'core/utils';
 
 import { Button } from '../Button';
 import { EnvironmentBadge } from '../EnvironmentBadge';
@@ -28,10 +28,10 @@ import { useEnvironmentTypeFromResources } from '../useEnvironmentTypeFromResour
 const MARK_BAD_DOCS_URL = 'https://www.spinnaker.io/guides/user/managed-delivery/marking-as-bad/';
 
 const logEvent = (label: string, application: string, environment?: string, reference?: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Environments - mark version as bad modal',
     action: label,
-    label: environment ? `${application}:${environment}:${reference}` : application,
+    data: { label: environment ? `${application}:${environment}:${reference}` : application },
   });
 
 type IEnvironmentOptionProps = Required<Option<string>> & {

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/PinArtifactModal.tsx b/app/scripts/modules/core/src/managed/artifactDetail/PinArtifactModal.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useEffect } from 'react';
-import ReactGA from 'react-ga';
 import { Option } from 'react-select';
 
 import { Illustration } from '@spinnaker/presentation';
+import { logger } from 'core/utils';
 
 import { Button } from '../Button';
 import { EnvironmentBadge } from '../EnvironmentBadge';
@@ -28,10 +28,10 @@ import { useEnvironmentTypeFromResources } from '../useEnvironmentTypeFromResour
 const PINNING_DOCS_URL = 'https://www.spinnaker.io/guides/user/managed-delivery/pinning';
 
 const logEvent = (label: string, application: string, environment?: string, reference?: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Environments - pin version modal',
     action: label,
-    label: environment ? `${application}:${environment}:${reference}` : application,
+    data: { label: environment ? `${application}:${environment}:${reference}` : application },
   });
 
 type IEnvironmentOptionProps = Required<Option<string>> & {

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/PreDeploymentStepCard.tsx b/app/scripts/modules/core/src/managed/artifactDetail/PreDeploymentStepCard.tsx
@@ -1,12 +1,11 @@
 import { DateTime } from 'luxon';
 import React, { memo } from 'react';
-import ReactGA from 'react-ga';
 
 import { Button } from '../Button';
 import { StatusCard } from '../StatusCard';
 import { Application } from '../../application';
 import { IManagedArtifactVersionLifecycleStep } from '../../domain';
-import { timeDiffToString } from '../../utils';
+import { logger, timeDiffToString } from '../../utils';
 
 const cardAppearanceByStatus = {
   NOT_STARTED: 'future',
@@ -69,10 +68,10 @@ const cardConfigurationByType = {
 } as const;
 
 const logEvent = (label: string, application: string, reference: string, type: string, status: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Environments - version details',
     action: label,
-    label: `${application}:${reference}:${type}:${status}`,
+    data: { label: `${application}:${reference}:${type}:${status}` },
   });
 
 const getTimestamp = (startedAt?: string, completedAt?: string) => {

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/UnpinArtifactModal.tsx b/app/scripts/modules/core/src/managed/artifactDetail/UnpinArtifactModal.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
-import ReactGA from 'react-ga';
 
 import { Illustration } from '@spinnaker/presentation';
+import { logger } from 'core/utils';
 
 import { Button } from '../Button';
 import { ManagedWriter } from '../ManagedWriter';
@@ -21,10 +21,10 @@ import {
 const PINNING_DOCS_URL = 'https://www.spinnaker.io/guides/user/managed-delivery/pinning';
 
 const logEvent = (label: string, application: string, environment?: string, reference?: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Environments - unpin version modal',
     action: label,
-    label: environment ? `${application}:${environment}:${reference}` : application,
+    data: { label: environment ? `${application}:${environment}:${reference}` : application },
   });
 
 export const UnpinVersionIntro = ({ application, environment }: { application: string; environment: string }) => (

diff --git a/app/scripts/modules/core/src/managed/constraints/ConstraintCard.tsx b/app/scripts/modules/core/src/managed/constraints/ConstraintCard.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { memo, useState } from 'react';
-import ReactGA from 'react-ga';
+
+import { logger } from 'core/utils';
 
 import { Button } from '../Button';
 import { IUpdateConstraintStatusRequest, ManagedWriter } from '../ManagedWriter';
@@ -40,10 +41,10 @@ const skippedConstraintCardAppearanceByStatus: { [key in ConstraintStatus]: ISta
 } as const;
 
 const logEvent = (label: string, application: string, environment: string, reference: string) =>
-  ReactGA.event({
+  logger.log({
     category: 'Environments - version details',
     action: label,
-    label: `${application}:${environment}:${reference}`,
+    data: { label: `${application}:${environment}:${reference}` },
   });
 
 // TODO: improve this logic below

diff --git a/app/scripts/modules/core/src/managed/managedResourceStatusConfig.tsx b/app/scripts/modules/core/src/managed/managedResourceStatusConfig.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactGA from 'react-ga';
 
 import { IconNames } from '@spinnaker/presentation';
 import { Application } from 'core/application';
 import { IManagedResourceSummary, ManagedResourceStatus } from 'core/domain';
+import { logger } from 'core/utils';
 
 interface IViewConfiguration {
   appearance: 'info' | 'warning' | 'error';
@@ -12,10 +12,10 @@ interface IViewConfiguration {
 }
 
 const logClick = (label: string, resourceId: string, status: ManagedResourceStatus) =>
-  ReactGA.event({
+  logger.log({
     category: 'Managed Resource Status Indicator',
     action: `${label} clicked`,
-    label: `${resourceId},${status}`,
+    data: { label: `${resourceId},${status}` },
   });
 
 const LearnMoreLink = ({ resourceSummary }: { resourceSummary: IManagedResourceSummary }) => (