chore: GA event for app metrics

Author: shivani170

src/components/ClusterNodes/ClusterList/ClusterList.tsx

@@ -38,12 +38,9 @@ const ClusterList = ({
     return (
         <div data-testid="cluster-list-container" className="flexbox-col flex-grow-1">
             <div className="cluster-list-row fw-6 cn-7 fs-12 dc__border-bottom pt-8 pb-8 pr-20 pl-20 dc__uppercase bg__primary dc__position-sticky dc__top-0 dc__zi-3">
-                {KubeConfigRowCheckbox === null ? <div /> : null}
+                {KubeConfigRowCheckbox ? <BulkSelection showPagination={false} /> : <div />}
                 {Object.entries(ClusterMapListSortableKeys).map(([cellName, cellKey]) => (
                     <React.Fragment key={cellName}>
-                        {KubeConfigRowCheckbox && cellKey === ClusterMapListSortableKeys.CLUSTER_NAME && (
-                            <BulkSelection showPagination={false} />
-                        )}
                         <SortableTableHeaderCell
                             key={cellName}
                             title={ClusterMapListSortableTitle[cellName]}

src/components/app/details/appDetails/constants.ts

@@ -25,4 +25,12 @@ export const DA_APP_DETAILS_GA_EVENTS = {
         category: 'App Details',
         action: 'DA_APP_DETAIL_GO_TO_ENV_CONFIG',
     },
+    MetricsApplyTimeChange: {
+        category: 'App Metrics',
+        action: 'DA_APP_DETAIL_METRICS_APPLY_TIME_RANGE',
+    },
+    MetricsPresetTimeRange: {
+        category: 'App Metrics',
+        action: 'DA_APP_DETAIL_METRICS_PRESET_TIME_RANGE',
+    },
 }

src/components/common/DatePickers/DayPickerRangeController.tsx

@@ -23,6 +23,7 @@ import moment, { Moment } from 'moment'
 import { isInclusivelyBeforeDay, DayPickerRangeController } from 'react-dates'
 import './calendar.css'
 import { ReactComponent as ArrowDown } from '../../../assets/icons/ic-chevron-down.svg'
+import { DA_APP_DETAILS_GA_EVENTS } from '@Components/app/details/appDetails/constants'
 
 interface DatePickerType2Props {
     calendar
@@ -126,12 +127,16 @@ export class DatePickerType2 extends Component<DatePickerType2Props, any> {
         this.renderDatePresets = this.renderDatePresets.bind(this)
     }
 
-    getInitialVisibleMonth = () => {
-        return this.props.calendar.endDate
+    onClickApplyTimeChange = () => {
+        this.setState({ showCalendar: false })
+        this.props.handleApply()
+        ReactGA.event(DA_APP_DETAILS_GA_EVENTS.MetricsApplyTimeChange)
     }
 
-    handleIsDayBlocked(day) {
-        return false
+    onClickPredefinedTimeRange = (startDate, endDate, endStr) => () => {
+            ReactGA.event(DA_APP_DETAILS_GA_EVENTS.MetricsPresetTimeRange)
+            this.props.handlePredefinedRange(startDate, endDate, endStr)
+            this.setState({ showCalendar: false })
     }
 
     renderDatePresets() {
@@ -179,10 +184,7 @@ export class DatePickerType2 extends Component<DatePickerType2Props, any> {
                         <button
                             type="button"
                             className="cta small"
-                            onClick={() => {
-                                this.setState({ showCalendar: false })
-                                this.props.handleApply()
-                            }}
+                            onClick={this.onClickApplyTimeChange}
                         >
                             Apply Time Range
                         </button>
@@ -209,15 +211,7 @@ export class DatePickerType2 extends Component<DatePickerType2Props, any> {
                                 type="button"
                                 key={text}
                                 style={{ ...buttonStyles, textAlign: 'left' }}
-                                onClick={() => {
-                                    ReactGA.event({
-                                        category: 'Deployment Metrics',
-                                        action: 'Date Range Changed',
-                                        label: 'Predefined',
-                                    })
-                                    this.props.handlePredefinedRange(startDate, endDate, endStr)
-                                    this.setState({ showCalendar: false })
-                                }}
+                                onClick={this.onClickPredefinedTimeRange(startDate, endDate, endStr)}
                             >
                                 {text}
                             </button>