Merge pull request #2754 from devtron-labs/chore/ga-events

feat: add ga events in resource browser

Author: arunjaindev

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-4",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-5",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/assets/icons/ic-world.svg

@@ -49,6 +49,7 @@ import {
     FloatingVariablesSuggestions,
     TriggerType,
     DeleteCINodeButton,
+    handleAnalyticsEvent,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -541,6 +542,11 @@ export default function CIPipeline({
         handleClose()
     }
 
+    const handleAdvancedOptions = () => {
+        setIsAdvanced(true)
+        handleAnalyticsEvent({category: 'CI Pipeline', action: 'DA_BUILD_ADVANCED'})
+    }
+
     const renderSecondaryButton = () => {
         if (ciPipelineId) {
             const canDeletePipeline = connectCDPipelines === 0 && ciPipeline.linkedCount === 0
@@ -582,9 +588,7 @@ export default function CIPipeline({
                     type="button"
                     data-testid="create-build-pipeline-advanced-options-button"
                     className="cta cta--workflow cancel mr-16 flex"
-                    onClick={() => {
-                        setIsAdvanced(true)
-                    }}
+                    onClick={handleAdvancedOptions}
                 >
                     Advanced options
                     {mandatoryPluginData && (!mandatoryPluginData.isValidPre || !mandatoryPluginData.isValidPost) && (

src/components/CIPipelineN/CIPipeline.tsx

@@ -23,6 +23,7 @@ import {
     ComponentSizeType,
     get,
     getIsRequestAborted,
+    handleAnalyticsEvent,
     NodeTaintType,
     noop,
     OptionType,
@@ -642,7 +643,13 @@ const ClusterTerminal = ({
     }
 
     const toggleScreenView = (): void => {
-        setFullScreen(!isFullScreen)
+        if (!isFullScreen) {
+            handleAnalyticsEvent({
+                category: 'Cluster Terminal',
+                action: 'RB_TERMINAL_FULLSCREEN',
+            })
+        }
+        setFullScreen((prev) => !prev)
     }
 
     const selectEventsTab = (): void => {

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -15,7 +15,6 @@
  */
 
 import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react'
-import ReactGA from 'react-ga4'
 import {
     generatePath,
     Redirect,
@@ -37,14 +36,15 @@ import {
     TabProps,
     TabGroup,
     URLS as CommonURLS,
+    handleAnalyticsEvent,
 } from '@devtron-labs/devtron-fe-common-lib'
 import AppConfig from '../../../Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig'
 import Overview from '../../app/Overview/Overview'
 import CIDetails from '../../app/details/cIDetails/CIDetails'
 import TriggerView from '../../app/details/triggerView/TriggerView'
 import { getAppMetaInfo } from '../../app/service'
 import { AppMetaInfo } from '../../app/types'
-import { ErrorBoundary, trackByGAEvent } from '../../common'
+import { ErrorBoundary } from '../../common'
 import { ReactComponent as Settings } from '../../../assets/icons/ic-settings.svg'
 import { AppSelector } from '../../AppSelector'
 import '../../app/details/appDetails/appDetails.scss'
@@ -122,7 +122,7 @@ const JobHeader = ({ jobName }: { jobName: string }) => {
     }
 
     function handleEventClick(event) {
-        trackByGAEvent('Job', event.currentTarget.dataset.action)
+        handleAnalyticsEvent({ category: 'Job', action: event.currentTarget.dataset.action })
         onClickTabPreventDefault(event, 'active')
     }
 
@@ -135,10 +135,9 @@ const JobHeader = ({ jobName }: { jobName: string }) => {
             const tab = currentPathname.current.replace(match.url, '').split('/')[1]
             const newUrl = generatePath(match.path, { appId: value })
             history.push(`${newUrl}/${tab}`)
-            ReactGA.event({
+            handleAnalyticsEvent({
                 category: 'Job Selector',
                 action: 'Job Selection Changed',
-                label: tab,
             })
         },
         [location.pathname],

src/components/Jobs/JobDetails/JobDetails.tsx

@@ -22,9 +22,9 @@ import {
     DEFAULT_BASE_PAGE_SIZE,
     Pagination,
     SortableTableHeaderCell,
+    handleAnalyticsEvent,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useHistory, useLocation } from 'react-router-dom'
-import { trackByGAEvent } from '../../common'
 import { ReactComponent as Edit } from '../../../assets/icons/ic-settings.svg'
 import { ReactComponent as JobIcon } from '../../../assets/icons/ic-job-node.svg'
 import { ReactComponent as Arrow } from '../../../assets/icons/ic-dropdown-filled.svg'
@@ -52,7 +52,7 @@ export default function JobListView(props: JobListViewProps) {
     const handleEditJob = (event): void => {
         event.stopPropagation()
         event.preventDefault()
-        trackByGAEvent('Job List', event.currentTarget.dataset.action)
+        handleAnalyticsEvent({ category: 'Job List', action: event.currentTarget.dataset.action })
         props.handleEditJob(event.currentTarget.dataset.key)
     }
 

src/components/Jobs/JobList/JobListView.tsx

@@ -17,7 +17,13 @@
 import React, { useState } from 'react'
 import { generatePath, Route, useHistory } from 'react-router-dom'
 
-import { Button, ButtonComponentType, ComponentSizeType, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    Button,
+    ButtonComponentType,
+    ComponentSizeType,
+    handleAnalyticsEvent,
+    useMainContext,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import CreateCluster from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component'
 import {
@@ -33,7 +39,13 @@ import { CreateResourceButtonType, CreateResourceType } from './Types'
 export const CreateResourceButton: React.FC<CreateResourceButtonType> = ({ clusterId, closeModal }) => {
     const [showModal, setShowModal] = useState(false)
 
-    const handleModalOpen = () => setShowModal(true)
+    const handleCreateResource = () => {
+        setShowModal(true)
+        handleAnalyticsEvent({
+            category: 'RB Create Resource',
+            action: 'RB_CREATE_RESOURCE',
+        })
+    }
 
     const handleModalClose = () => {
         setShowModal(false)
@@ -44,7 +56,7 @@ export const CreateResourceButton: React.FC<CreateResourceButtonType> = ({ clust
         <>
             <Button
                 dataTestId="create-resource"
-                onClick={handleModalOpen}
+                onClick={handleCreateResource}
                 text="Create resource"
                 startIcon={<Add />}
                 size={ComponentSizeType.small}

src/components/ResourceBrowser/PageHeader.buttons.tsx

@@ -17,13 +17,16 @@
 import React, { useEffect, useState } from 'react'
 
 import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
     CodeEditor,
     createNewResource,
     CreateResourceDTO,
     Drawer,
     GenericEmptyState,
+    handleAnalyticsEvent,
     InfoBlock,
-    Progressing,
     showError,
     useRegisterShortcut,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -68,6 +71,10 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
     }
 
     const onSave = async (): Promise<void> => {
+        handleAnalyticsEvent({
+            category: 'RB Create Resource',
+            action: 'RB_CREATE_RESOURCE_APPLY',
+        })
         try {
             setLoader(true)
             const resourceListPayload: CreateResourcePayload = {
@@ -90,18 +97,21 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
         if (showCodeEditorView) {
             return (
                 <div className="dc__border-top flex right p-16">
-                    <button className="cta cancel h-36 lh-36 mr-12" type="button" disabled={loader} onClick={onClose}>
-                        {CREATE_RESOURCE_MODAL_MESSAGING.actionButtonText.cancel}
-                    </button>
-                    <button
-                        type="button"
-                        className="cta h-36 lh-36"
-                        disabled={loader || !resourceYAML}
+                    <Button
+                        dataTestId="cancel-create-resource"
+                        text={CREATE_RESOURCE_MODAL_MESSAGING.actionButtonText.cancel}
+                        disabled={loader}
+                        onClick={onClose}
+                        variant={ButtonVariantType.secondary}
+                        style={ButtonStyleType.neutral}
+                    />
+                    <Button
+                        dataTestId="create-kubernetes-resource-button"
+                        text={CREATE_RESOURCE_MODAL_MESSAGING.actionButtonText.apply}
+                        disabled={!resourceYAML}
                         onClick={onSave}
-                        data-testid="create-kubernetes-resource-button"
-                    >
-                        {loader ? <Progressing /> : CREATE_RESOURCE_MODAL_MESSAGING.actionButtonText.apply}
-                    </button>
+                        isLoading={loader}
+                    />
                 </div>
             )
         }

src/components/ResourceBrowser/ResourceList/CreateResource.tsx

@@ -76,6 +76,10 @@ const ResourceFilterOptions = ({
         setShowFilterModal(true)
     }
 
+    const handleCloseFilterModal = () => {
+        setShowFilterModal(false)
+    }
+
     useEffect(() => {
         if (registerShortcut && isOpen) {
             registerShortcut({ keys: ['R'], callback: handleInputShortcut })
@@ -154,7 +158,8 @@ const ResourceFilterOptions = ({
                                 clusterName={selectedCluster?.label || ''}
                                 updateTabUrl={updateK8sResourceTab}
                                 showModal={showFilterModal}
-                                setShowModal={setShowFilterModal}
+                                handleShowFilterModal={handleShowFilterModal}
+                                handleCloseFilterModal={handleCloseFilterModal}
                             />
                         )}
                         <SelectPicker

src/components/ResourceBrowser/ResourceList/ResourceFilterOptions.tsx

@@ -24,6 +24,7 @@ import {
     DynamicTabType,
     ErrorScreenManager,
     getResourceGroupListRaw,
+    handleAnalyticsEvent,
     InitTabType,
     noop,
     useAsync,
@@ -282,6 +283,10 @@ const ResourceList = () => {
     }, [location.pathname])
 
     const onClusterChange = (selected: ClusterOptionType) => {
+        handleAnalyticsEvent({
+            category: 'Resource Browser',
+            action: 'RB_CLUSTER_SWITCH_CLUSTER',
+        })
         if (selected.value === selectedCluster?.value) {
             return
         }