feat: added metrics for user events (#3237)

* feat: metrics added to tokens redesign

* fix: prettier

* fix: updated event names

* chore: clean up

* fix: moved try catch from onSave func

Author: blegesse-w

src/authorizations/actions/thunks.ts

@@ -139,11 +139,12 @@ export const updateAuthorization = (authorization: Authorization) => async (
     if (resp.status !== 200) {
       throw new Error(resp.data.message)
     }
-
+    event('token.edit.success', {id: authorization.id})
     dispatch(getAuthorizations())
     dispatch(notify(authorizationUpdateSuccess()))
   } catch (e) {
     console.error(e)
+    event('token.edit.failure', {id: authorization.id})
     dispatch(notify(authorizationUpdateFailed(authorization.id)))
   }
 }

src/authorizations/components/redesigned/AllAccessTokenOverlay.tsx

@@ -27,6 +27,7 @@ import {OverlayContext} from 'src/overlays/components/OverlayController'
 
 // Utils
 import {allAccessPermissions} from 'src/authorizations/utils/permissions'
+import {event} from 'src/cloud/utils/reporting'
 
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
@@ -54,6 +55,7 @@ const AllAccessTokenOverlay: FC<OwnProps> = props => {
     }
     dispatch(createAuthorization(token))
     handleDismiss()
+    event('token.allAccess.create.success', {meID, name: description})
     dispatch(showOverlay('access-token', null, () => dismissOverlay()))
   }
 

src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx

@@ -46,6 +46,7 @@ import {
   formatResources,
   generateDescription,
 } from 'src/authorizations/utils/permissions'
+import {event} from 'src/cloud/utils/reporting'
 
 import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 
@@ -243,9 +244,11 @@ const CustomApiTokenOverlay: FC<Props> = props => {
 
     try {
       await createAuthorization(token)
+      event('customApiToken.create.success', {description})
       showOverlay('access-token', null, () => dismissOverlay())
     } catch (e) {
       setStatus(ComponentStatus.Disabled)
+      event('customApiToken.create.failure', {description})
     }
   }
 

src/authorizations/components/redesigned/EditTokenOverlay.tsx

@@ -32,6 +32,7 @@ import {getTelegraf} from 'src/telegrafs/actions/thunks'
 // Utills
 import {formatPermissionsObj} from 'src/authorizations/utils/permissions'
 import _ from 'lodash'
+import {event} from 'src/cloud/utils/reporting'
 interface OwnProps {
   auth: Authorization
   onDismissOverlay: () => void
@@ -89,7 +90,7 @@ const EditTokenOverlay: FC<Props> = props => {
 
   const changeToggle = () => {
     setStatus(ComponentStatus.Default)
-
+    event('tokens.status.updated')
     if (togglestatus) {
       setToggleStatus(false)
       setlabel('inactive')

src/authorizations/components/redesigned/GenerateTokenDropdown.tsx

@@ -14,6 +14,9 @@ import {getAllResources} from 'src/authorizations/actions/thunks'
 import {notify} from 'src/shared/actions/notifications'
 import {getResourcesTokensFailure} from 'src/shared/copy/notifications'
 
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+
 type GenerateTokenProps = RouteComponentProps
 type ReduxProps = ConnectedProps<typeof connector>
 
@@ -29,14 +32,17 @@ const GenerateTokenDropdown: FC<ReduxProps & GenerateTokenProps> = ({
 
   const handleAllAccess = () => {
     showOverlay('add-master-token', null, dismissOverlay)
+    event('generate_token_dropdown.all_access_overlay.opened')
   }
 
   const handleCustomApi = async () => {
     try {
       await getAllResources()
       showOverlay('add-custom-token', null, dismissOverlay)
+      event('generate_token_dropdown.custom_API_token_overlay.opened')
     } catch (e) {
       dispatch(notify(getResourcesTokensFailure()))
+      event('generate_token_dropdown.custom_API_token_overlay.failed')
     }
   }
 

src/authorizations/components/redesigned/TokenRow.tsx

@@ -40,6 +40,7 @@ import {
 
 import {relativeTimestampFormatter} from 'src/shared/utils/relativeTimestampFormatter'
 import {incrementCloneName} from 'src/utils/naming'
+import {event} from 'src/cloud/utils/reporting'
 
 interface OwnProps {
   auth: Authorization
@@ -136,28 +137,37 @@ class TokensRow extends PureComponent<Props> {
     this.props.deleteAuthorization(id, description)
   }
 
-  private handleClone = () => {
+  private handleClone = async () => {
     const {description} = this.props.auth
-
     const allTokenDescriptions = Object.values(this.props.authorizations).map(
       auth => auth.description
     )
 
-    this.props.createAuthorization({
-      ...this.props.auth,
-      description: incrementCloneName(allTokenDescriptions, description),
-    })
-    this.props.showOverlay('access-token', null, () => dismissOverlay())
+    try {
+      await this.props.createAuthorization({
+        ...this.props.auth,
+        description: incrementCloneName(allTokenDescriptions, description),
+      })
+      event('token.clone.success', {id: this.props.auth.id, name: description})
+      this.props.showOverlay('access-token', null, () => dismissOverlay())
+    } catch {
+      event('token.clone.failure', {id: this.props.auth.id, name: description})
+    }
   }
 
   private handleClickDescription = () => {
     const {onClickDescription, auth} = this.props
+    event('token_row.edit_overlay.opened')
     onClickDescription(auth.id)
   }
 
   private handleUpdateName = (value: string) => {
     const {auth, updateAuthorization} = this.props
     updateAuthorization({...auth, description: value})
+    event('token.desciption.edited', {
+      id: this.props.auth.id,
+      description: value,
+    })
   }
 }