Merge pull request #2392 from devtron-labs/fix/time-range-modal

fix: parsing issues with date and time

Author: eshankvaish

src/components/app/details/appDetails/AppMetrics.tsx

@@ -51,6 +51,7 @@ import HostErrorImage from '../../../../assets/img/ic-error-hosturl.png'
 import { ReactComponent as DropDownIcon } from '../../../../assets/icons/appstatus/ic-chevron-down.svg'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
+import { APP_METRICS_CALENDAR_INPUT_DATE_FORMAT } from './constants'
 
 export const AppMetrics: React.FC<{
     appName: string
@@ -104,8 +105,8 @@ export const AppMetrics: React.FC<{
             endDate,
         })
         setCalendarInput({
-            startDate: startDate?.format('DD-MM-YYYY hh:mm:ss'),
-            endDate: endDate?.format('DD-MM-YYYY hh:mm:ss') || '',
+            startDate: startDate?.format(APP_METRICS_CALENDAR_INPUT_DATE_FORMAT),
+            endDate: endDate?.format(APP_METRICS_CALENDAR_INPUT_DATE_FORMAT) || '',
         })
     }
 

src/components/app/details/appDetails/GraphsModal.tsx

@@ -23,6 +23,7 @@ import { AppMetricsTabType, ChartType, StatusType, ChartTypes, StatusTypes, AppM
 import { getIframeSrc, isK8sVersionValid, ThroughputSelect, getCalendarValue, LatencySelect } from './utils'
 import { ReactComponent as GraphIcon } from '../../../../assets/icons/ic-graph.svg'
 import { DEFAULTK8SVERSION } from '../../../../config'
+import { APP_METRICS_CALENDAR_INPUT_DATE_FORMAT } from './constants'
 
 export const ChartNames = {
     cpu: 'CPU Usage',
@@ -198,8 +199,8 @@ export class GraphModal extends Component<GraphModalProps, GraphModalState> {
                 endDate: end,
             },
             calendarInputs: {
-                startDate: start?.format('DD MM YYYY hh:mm:ss'),
-                endDate: end?.format('DD MM YYYY hh:mm:ss') || '',
+                startDate: start?.format(APP_METRICS_CALENDAR_INPUT_DATE_FORMAT),
+                endDate: end?.format(APP_METRICS_CALENDAR_INPUT_DATE_FORMAT) || '',
             },
         })
     }

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

@@ -0,0 +1 @@
+export const APP_METRICS_CALENDAR_INPUT_DATE_FORMAT = 'DD-MM-YYYY hh:mm:ss'

src/components/app/details/appDetails/utils.tsx

@@ -21,7 +21,7 @@ import { AggregationKeys } from '../../types'
 import { getVersionArr, isVersionLessThanOrEqualToTarget, DayPickerRangeControllerPresets } from '../../../common'
 import { ReactComponent as ArrowDown } from '../../../../assets/icons/ic-chevron-down.svg'
 import { ChartTypes, AppMetricsTabType, StatusType, StatusTypes } from './appDetails.type'
-import { ZERO_TIME_STRING, Nodes, NodeType, ACTION_STATE, ButtonStyleType } from '@devtron-labs/devtron-fe-common-lib'
+import { ZERO_TIME_STRING, Nodes, NodeType, ACTION_STATE, ButtonStyleType, prefixZeroIfSingleDigit } from '@devtron-labs/devtron-fe-common-lib'
 import CreatableSelect from 'react-select/creatable'
 
 export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: boolean): AggregationKeys {
@@ -336,7 +336,8 @@ const getTimestampFromDateIfAvailable = (dateString: string): string => {
     try {
         const [day, month, yearAndTime] = dateString.split('-')
         const [year, time] = yearAndTime.split(' ')
-        const formattedDate = `${year}-${month}-${day}T${time}`
+        const updatedTime = time.split(':').map((item) => ['0', '00'].includes(item) ? '00' : prefixZeroIfSingleDigit(Number(item))).join(':')
+        const formattedDate = `${year}-${prefixZeroIfSingleDigit(Number(month))}-${prefixZeroIfSingleDigit(Number(day))}T${updatedTime}`
         const parsedDate = new Date(formattedDate).getTime()
 
         return isNaN(parsedDate) ? dateString : parsedDate.toString()