feat: Refactor DatePicker UI to use Button component,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.21.0",
+    "version": "1.21.0-beta-14",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -49,6 +49,7 @@
         "@types/dompurify": "^3.0.5",
         "@types/json-schema": "^7.0.15",
         "@types/react": "17.0.39",
+        "@types/react-csv": "^1.1.10",
         "@types/react-dates": "^21.8.6",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
@@ -126,6 +127,7 @@
         "nanoid": "^3.3.8",
         "qrcode.react": "^4.2.0",
         "react-canvas-confetti": "^2.0.7",
+        "react-csv": "^2.2.2",
         "react-dates": "^21.8.0",
         "react-draggable": "^4.4.5",
         "react-international-phone": "^4.5.0",

src/Common/Constants.ts

@@ -89,10 +89,15 @@ export const URLS = {
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`,
     LICENSE_AUTH: '/license-auth',
     GLOBAL_CONFIG_EDIT_CLUSTER: '/global-config/cluster-env/edit/:clusterId',
+
     // OBSERVABILITY
     OBSERVABILITY: OBSERVABILITY_ROOT,
     OBSERVABILITY_OVERVIEW: `${OBSERVABILITY_ROOT}/overview`,
-    OBSERVABILITY_CUSTOMER_LIST: `${OBSERVABILITY_ROOT}/tenants`,
+    OBSERVABILITY_TENANTS: `${OBSERVABILITY_ROOT}/tenants`,
+    OBSERVABILITY_TENANT_DETAILS: `${OBSERVABILITY_ROOT}/tenants/:tenantName`,
+    OBSERVABILITY_TENANT_OVERVIEW: `${OBSERVABILITY_ROOT}/tenants/:tenantName/overview`,
+    OBSERVABILITY_TENANT_VMS: `${OBSERVABILITY_ROOT}/tenants/:tenantName/vms`,
+    OBSERVABILITY_TENANT_VM_DETAILS: `${OBSERVABILITY_ROOT}/tenants/:tenantName/vms/:vmName`,
 } as const
 
 export const ROUTES = {
@@ -424,6 +429,7 @@ export const DATE_TIME_FORMATS = {
     DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, hh:mm',
     DD_MMM_YYYY: 'DD MMM YYYY',
     'DD/MM/YYYY': 'DD/MM/YYYY',
+    FULL_DATE_WITH_TIME: 'DD-MM-YYYY hh:mm:ss',
 }
 
 export const SEMANTIC_VERSION_DOCUMENTATION_LINK = 'https://semver.org/'

src/Shared/Components/DatePicker/DayPickerRangeController.tsx

@@ -24,7 +24,7 @@ import { ComponentSizeType } from '@Shared/constants'
 
 import 'react-dates/initialize'
 
-import { Button } from '../Button'
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
 import { customDayStyles, DayPickerCalendarInfoHorizontal, DayPickerRangeControllerPresets, styles } from './constants'
 import { DatePickerRangeControllerProps } from './types'
@@ -141,15 +141,19 @@ export const DatePickerRangeController = ({
 
     return (
         <>
-            <div
-                data-testid="app-metrics-range-picker-box"
-                className="flex h-36"
-                style={{ borderRadius: '4px', border: 'solid 1px var(--N200)' }}
+            <Button
+                dataTestId="app-metrics-range-picker-box"
                 onClick={toggleCalender}
-            >
-                <p className="cursor mb-0 h-32 p-6">{calendarValue}</p>
-                <Icon name="ic-caret-down-small" color="N600" />
-            </div>
+                {...(calendarValue
+                    ? { text: calendarValue, endIcon: <Icon name="ic-caret-down-small" color="N600" /> }
+                    : {
+                          icon: <Icon name="ic-caret-down-small" color="N600" />,
+                          ariaLabel: 'Show calendar',
+                          showAriaLabelInTippy: false,
+                      })}
+                variant={ButtonVariantType.secondary}
+                style={ButtonStyleType.neutral}
+            />
             {showCalendar && (
                 <DayPickerRangeController
                     startDate={calendar.startDate}

src/Shared/Components/DatePicker/constants.ts

@@ -194,27 +194,3 @@ export const DayPickerRangeControllerPresets = [
     { text: 'Last 1 month', endDate: moment(), startDate: moment().subtract(1, 'months'), endStr: 'now-1M' },
     { text: 'Last 6 months', endDate: moment(), startDate: moment().subtract(6, 'months'), endStr: 'now-6M' },
 ]
-
-/**
- * Returns a string representing the range of dates
- * given by the start and end dates. If the end date
- * is 'now' and the start date includes 'now',
- * it will return the corresponding range from the
- * DayPickerRangeControllerPresets array.
- * @param startDateStr - the start date string
- * @param endDateStr - the end date string
- * @returns - a string representing the range of dates
- */
-
-export function getCalendarValue(startDateStr: string, endDateStr: string): string {
-    let str: string = `${startDateStr} - ${endDateStr}`
-    if (endDateStr === 'now' && startDateStr.includes('now')) {
-        const range = DayPickerRangeControllerPresets.find((d) => d.endStr === startDateStr)
-        if (range) {
-            str = range.text
-        } else {
-            str = `${startDateStr} - ${endDateStr}`
-        }
-    }
-    return str
-}

src/Shared/Components/DatePicker/types.ts

@@ -144,6 +144,8 @@ export interface DateTimePickerProps
     onChange: (date: Date) => void
 }
 
+export type CalendarFocusInputType = 'startDate' | 'endDate'
+
 export interface DatePickerRangeControllerProps {
     calendar
     calendarInputs

src/Shared/Components/DatePicker/utils.tsx

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
+import { prefixZeroIfSingleDigit } from '@Common/Helper'
+
 import { SelectPickerOptionType } from '../SelectPicker'
-import { MONTHLY_DATES_CONFIG, TIME_OPTIONS_CONFIG } from './constants'
+import { DayPickerRangeControllerPresets, MONTHLY_DATES_CONFIG, TIME_OPTIONS_CONFIG } from './constants'
 
 /**
  * Return the options for the dates in label and value format
@@ -113,3 +115,46 @@ export const getDefaultDateFromTimeToLive = (timeToLive: string, isTomorrow?: bo
     nextDate.setHours(hours, minutes, 0)
     return nextDate
 }
+
+/**
+ * Returns a string representing the range of dates
+ * given by the start and end dates. If the end date
+ * is 'now' and the start date includes 'now',
+ * it will return the corresponding range from the
+ * DayPickerRangeControllerPresets array.
+ * @param startDateStr - the start date string
+ * @param endDateStr - the end date string
+ * @returns - a string representing the range of dates
+ */
+
+export const getCalendarValue = (startDateStr: string, endDateStr: string): string => {
+    let str: string = `${startDateStr} - ${endDateStr}`
+    if (endDateStr === 'now' && startDateStr.includes('now')) {
+        const range = DayPickerRangeControllerPresets.find((d) => d.endStr === startDateStr)
+        if (range) {
+            str = range.text
+        } else {
+            str = `${startDateStr} - ${endDateStr}`
+        }
+    }
+    return str
+}
+
+// Need to send either the relative time like: now-5m or the timestamp to grafana
+// Assuming format is 'DD-MM-YYYY hh:mm:ss'
+export const getTimestampFromDateIfAvailable = (dateString: string): string => {
+    try {
+        const [day, month, yearAndTime] = dateString.split('-')
+        const [year, time] = yearAndTime.split(' ')
+        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 Number.isNaN(parsedDate) ? dateString : parsedDate.toString()
+    } catch {
+        return dateString
+    }
+}