From 68f41a390caf5fa26c1bab390a3b5d8ec5285993 Mon Sep 17 00:00:00 2001
From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com>
Date: Wed, 22 Jan 2025 18:50:31 +0530
Subject: [PATCH] fix: parsing issues with date and time

---
 src/components/app/details/appDetails/AppMetrics.tsx  | 5 +++--
 src/components/app/details/appDetails/GraphsModal.tsx | 5 +++--
 src/components/app/details/appDetails/constants.ts    | 1 +
 src/components/app/details/appDetails/utils.tsx       | 5 +++--
 4 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 src/components/app/details/appDetails/constants.ts

diff --git a/src/components/app/details/appDetails/AppMetrics.tsx b/src/components/app/details/appDetails/AppMetrics.tsx
index 9d022a0b5c..6202198240 100644
--- a/src/components/app/details/appDetails/AppMetrics.tsx
+++ b/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) || '',
         })
     }
 
diff --git a/src/components/app/details/appDetails/GraphsModal.tsx b/src/components/app/details/appDetails/GraphsModal.tsx
index 94c0c6ca26..eec5612408 100644
--- a/src/components/app/details/appDetails/GraphsModal.tsx
+++ b/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) || '',
             },
         })
     }
diff --git a/src/components/app/details/appDetails/constants.ts b/src/components/app/details/appDetails/constants.ts
new file mode 100644
index 0000000000..2b554b66a0
--- /dev/null
+++ b/src/components/app/details/appDetails/constants.ts
@@ -0,0 +1 @@
+export const APP_METRICS_CALENDAR_INPUT_DATE_FORMAT = 'DD-MM-YYYY hh:mm:ss'
diff --git a/src/components/app/details/appDetails/utils.tsx b/src/components/app/details/appDetails/utils.tsx
index 8effce1405..3a8aea7e83 100644
--- a/src/components/app/details/appDetails/utils.tsx
+++ b/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()