fix: adding navigation events (#4182)

Author: drdelambre

src/accounts/AccountHeader.tsx

@@ -13,7 +13,7 @@ const AccountHeader: FC<Props> = ({testID = 'member-page--header'}) => (
   <Page.Header fullWidth={false} testID={testID}>
     <Page.Title title="Account" />
     <LimitChecker>
-      <RateLimitAlert />
+      <RateLimitAlert location="account" />
     </LimitChecker>
   </Page.Header>
 )

src/alerting/components/AlertingIndex.tsx

@@ -65,7 +65,7 @@ const AlertingIndex: FunctionComponent = () => {
         <Page.Header fullWidth={true} testID="alerts-page--header">
           <Page.Title title="Alerts" />
           <ErrorBoundary>
-            <RateLimitAlert />
+            <RateLimitAlert location="alerting" />
           </ErrorBoundary>
         </Page.Header>
         <Page.Contents

src/annotations/containers/AnnotationsIndex.tsx

@@ -1,27 +1,21 @@
 // Libraries
 import React, {FC} from 'react'
-import {useSelector} from 'react-redux'
 
 // Components
 import SettingsTabbedPage from 'src/settings/components/SettingsTabbedPage'
 import SettingsHeader from 'src/settings/components/SettingsHeader'
 import {Page} from '@influxdata/clockface'
 import {AnnotationsTab} from 'src/annotations/components/AnnotationsTab'
 
-// Selectors
-import {getOrg} from 'src/organizations/selectors'
-
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 
 export const AnnotationsIndex: FC = () => {
-  const org = useSelector(getOrg)
-
   return (
     <>
       <Page titleTag={pageTitleSuffixer(['Annotations', 'Settings'])}>
         <SettingsHeader />
-        <SettingsTabbedPage activeTab="annotations" orgID={org.id}>
+        <SettingsTabbedPage activeTab="annotations">
           {/*
               TODO: GetResources with ResourceType.AnnotationStreams
             */}

src/billing/components/BillingPage.tsx

@@ -19,7 +19,7 @@ const BillingPage: FC = () => {
         <Page.Header fullWidth={false} testID="billing-page--header">
           <Page.Title title="Account" />
           <LimitChecker>
-            <RateLimitAlert />
+            <RateLimitAlert location="billing" />
           </LimitChecker>
         </Page.Header>
         <AccountTabContainer activeTab="billing">

src/checks/components/CheckHistory.tsx

@@ -57,7 +57,7 @@ const CheckHistory: FC = () => {
                   title="Check Statuses"
                   testID="alert-history-title"
                 />
-                <RateLimitAlert />
+                <RateLimitAlert location="check history" />
               </Page.Header>
               <Page.ControlBar fullWidth={true}>
                 <Page.ControlBarLeft>

src/cloud/components/AssetLimitOverlay.tsx

@@ -16,6 +16,7 @@ import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
 
 // Types
 import {AppState} from 'src/types'
+import {event} from 'src/cloud/utils/reporting'
 
 interface OwnProps {
   onClose: () => void
@@ -57,6 +58,9 @@ const AssetLimitOverlay: FC<OwnProps & StateProps> = ({assetName, onClose}) => {
             <CloudUpgradeButton
               size={ComponentSize.Large}
               className="upgrade-payg--button__asset-create"
+              metric={() => {
+                event('asset limit upgrade', {asset: assetName})
+              }}
             />
           </Overlay.Footer>
         </div>

src/cloud/components/RateLimitAlert.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FC, useEffect} from 'react'
-import {connect} from 'react-redux'
+import {useSelector, useDispatch} from 'react-redux'
 import classnames from 'classnames'
 
 // Components
@@ -23,13 +23,12 @@ import {
   extractRateLimitResources,
   extractRateLimitStatus,
 } from 'src/cloud/utils/limits'
+import {event} from 'src/cloud/utils/reporting'
 
 // Constants
 import {CLOUD} from 'src/shared/constants'
 
 // Types
-import {AppState} from 'src/types'
-import {LimitStatus} from 'src/cloud/actions/limits'
 import RateLimitAlertContent from 'src/cloud/components/RateLimitAlertContent'
 
 import {notify} from 'src/shared/actions/notifications'
@@ -42,59 +41,50 @@ import {UpgradeContent} from 'src/cloud/components/RateLimitAlertContent'
 
 import './RateLimitAlert.scss'
 
-interface StateProps {
-  resources: string[]
-  status: LimitStatus['status']
-  showUpgrade: boolean
-}
-
-interface OwnProps {
+interface Props {
   alertOnly?: boolean
   className?: string
-  sendNotify: (_: any) => void
-  handleShowOverlay: any
-  handleDismissOverlay: any
+  location?: string
 }
-type Props = StateProps & OwnProps
 
-const RateLimitAlert: FC<Props> = ({
-  status,
-  alertOnly,
-  className,
-  resources,
-  showUpgrade,
-  sendNotify,
-  handleShowOverlay,
-  handleDismissOverlay,
-}) => {
+const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
+  const resources = useSelector(extractRateLimitResources)
+  const status = useSelector(extractRateLimitStatus)
+  const showUpgrade = useSelector(shouldShowUpgradeButton)
+  const dispatch = useDispatch()
+
   const appearOverlay = () => {
-    handleShowOverlay('write-limit', null, handleDismissOverlay)
+    dispatch(showOverlay('write-limit', null, () => dispatch(dismissOverlay)))
   }
 
   useEffect(() => {
     if (CLOUD && status === 'exceeded' && resources.includes('write')) {
       if (showUpgrade) {
-        sendNotify(
-          writeLimitReached(
-            '',
-            <UpgradeContent
-              type="write"
-              link="https://docs.influxdata.com/influxdb/v2.0/write-data/best-practices/optimize-writes/"
-              className="flex-upgrade-content"
-            />
+        dispatch(
+          notify(
+            writeLimitReached(
+              '',
+              <UpgradeContent
+                type="write"
+                link="https://docs.influxdata.com/influxdb/v2.0/write-data/best-practices/optimize-writes/"
+                className="flex-upgrade-content"
+              />
+            )
           )
         )
       } else {
-        sendNotify(
-          writeLimitReached(
-            "Data in has stopped because you've hit the query write limit. Let's get it flowing again: ",
-            <Button
-              className="rate-alert-overlay-button"
-              color={ComponentColor.Primary}
-              size={ComponentSize.Small}
-              onClick={appearOverlay}
-              text="Request Write Limit Increase"
-            />
+        dispatch(
+          notify(
+            writeLimitReached(
+              "Data in has stopped because you've hit the query write limit. Let's get it flowing again: ",
+              <Button
+                className="rate-alert-overlay-button"
+                color={ComponentColor.Primary}
+                size={ComponentSize.Small}
+                onClick={appearOverlay}
+                text="Request Write Limit Increase"
+              />
+            )
           )
         )
       }
@@ -126,27 +116,17 @@ const RateLimitAlert: FC<Props> = ({
   }
 
   if (CLOUD && !alertOnly) {
-    return <CloudUpgradeButton className="upgrade-payg--button__header" />
+    return (
+      <CloudUpgradeButton
+        className="upgrade-payg--button__header"
+        metric={() => {
+          event('rate limit upgrade', {location})
+        }}
+      />
+    )
   }
 
   return null
 }
 
-const mstp = (state: AppState) => {
-  const resources = extractRateLimitResources(state)
-  const status = extractRateLimitStatus(state)
-  const showUpgrade = shouldShowUpgradeButton(state)
-  return {
-    status,
-    resources,
-    showUpgrade,
-  }
-}
-
-const mdtp = {
-  sendNotify: notify,
-  handleShowOverlay: showOverlay,
-  handleDismissOverlay: dismissOverlay,
-}
-
-export default connect(mstp, mdtp)(RateLimitAlert)
+export default RateLimitAlert

src/cloud/components/RateLimitAlertContent.tsx

@@ -22,20 +22,23 @@ import {event} from 'src/cloud/utils/reporting'
 
 interface Props {
   className?: string
+  location?: string
 }
 
 interface UpgradeProps {
   type: string
   link: string
   className?: string
   limitText?: string
+  location?: string
 }
 
 export const UpgradeContent: FC<UpgradeProps> = ({
   type,
   link,
   className,
   limitText,
+  location,
 }) => {
   return (
     <div className={`${className} rate-alert--content__free`}>
@@ -58,14 +61,14 @@ export const UpgradeContent: FC<UpgradeProps> = ({
       >
         <CloudUpgradeButton
           className="upgrade-payg--button__rate-alert"
-          metric={() => event(`user.limits.${type}.upgrade`)}
+          metric={() => event(`user.limits.${type}.upgrade`, {location})}
         />
       </FlexBox>
     </div>
   )
 }
 
-const RateLimitAlertContent: FC<Props> = ({className}) => {
+const RateLimitAlertContent: FC<Props> = ({className, location}) => {
   const dispatch = useDispatch()
   const showUpgradeButton = useSelector(shouldShowUpgradeButton)
   const rateLimitAlertContentClass = classnames('rate-alert--content', {
@@ -82,6 +85,7 @@ const RateLimitAlertContent: FC<Props> = ({className}) => {
         type="series cardinality"
         link="https://docs.influxdata.com/influxdb/v2.0/write-data/best-practices/resolve-high-cardinality/"
         className={rateLimitAlertContentClass}
+        location={location}
       />
     )
   }

src/dashboards/components/DashboardPage.tsx

@@ -73,7 +73,7 @@ class DashboardPage extends Component<Props> {
             <LimitChecker>
               <HoverTimeProvider>
                 <DashboardHeader onManualRefresh={onManualRefresh} />
-                <RateLimitAlert alertOnly={true} />
+                <RateLimitAlert alertOnly={true} location="dashboard page" />
                 <VariablesControlBar />
                 <ErrorBoundary>
                   <DashboardComponent manualRefresh={manualRefresh} />

src/dashboards/components/dashboard_index/DashboardsIndex.tsx

@@ -64,7 +64,7 @@ class DashboardIndex extends PureComponent<Props, State> {
         >
           <Page.Header fullWidth={false}>
             <Page.Title title="Dashboards" />
-            <RateLimitAlert />
+            <RateLimitAlert location="dashboards" />
           </Page.Header>
           <Page.ControlBar fullWidth={false}>
             <ErrorBoundary>