Feat/observability main

src/Common/BreadCrumb/BreadCrumb.tsx

@@ -16,7 +16,7 @@
 
 import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
-import { useBreadcrumbContext } from './BreadcrumbStore'
+import { getBreadCrumbSeparator, useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
 import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
 
@@ -90,7 +90,7 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
 export const BreadCrumb: React.FC<Breadcrumbs> = ({
     breadcrumbs,
     sep = '/',
-    className = 'dc__devtron-breadcrumb__item',
+    className = 'dc__devtron-breadcrumb__item fs-16 fw-4 lh-1-5 dc__ellipsis-right dc__mxw-155',
 }) => {
     const { url } = useRouteMatch()
     const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name)
@@ -114,9 +114,7 @@ export const BreadCrumb: React.FC<Breadcrumbs> = ({
                         {breadcrumb.name}
                     </ConditionalWrap>
 
-                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && (
-                        <span className={`${className}__separator cn-5`}>{sep}</span>
-                    )}
+                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && getBreadCrumbSeparator()}
                 </React.Fragment>
             ))}
         </>

src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -22,9 +22,14 @@ const initialState = {
 }
 
 export const BreadcrumbText = ({ heading, isActive, shouldTruncate = false }: BreadcrumbTextProps) => (
-    <h2 className={`m-0 fs-16 fw-6 lh-32 ${shouldTruncate ? 'dc__truncate' : ''} ${isActive ? 'cn-9' : 'cb-5'}`}>{heading}</h2>
+    <span className={`dc__breadcrumb-text cb-5 fs-16 lh-1-5 ${shouldTruncate ? 'dc__truncate' : ''} ${isActive ? 'cn-9 fw-6' : 'cb-5 fw-4 dc__mxw-155 dc__ellipsis-right'}`}>{heading}</span>
 )
 
+export const getBreadCrumbSeparator = (sep: string = '/') => (
+    <span className="dc__devtron-breadcrumb__item__separator">{sep}</span>
+)
+
+
 const Store = ({ children }) => {
     const [state, setState] = useState(initialState)
     return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>

src/Common/Constants.ts

@@ -49,6 +49,7 @@ export const PATTERNS = {
 }
 
 const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps'
+const OBSERVABILITY_ROOT = '/observability'
 
 export const URLS = {
     LOGIN: '/login',
@@ -88,6 +89,10 @@ 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`,
 } as const
 
 export const ROUTES = {

src/Shared/Components/DatePicker/DayPickerRangeController.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react'
+import { DayPickerRangeController, isInclusivelyBeforeDay } from 'react-dates'
+import CustomizableCalendarDay from 'react-dates/esm/components/CustomizableCalendarDay.js'
+import moment, { Moment } from 'moment'
+
+import { ComponentSizeType } from '@Shared/constants'
+
+import 'react-dates/initialize'
+
+import { Button } from '../Button'
+import { Icon } from '../Icon'
+import { customDayStyles, DayPickerCalendarInfoHorizontal, DayPickerRangeControllerPresets, styles } from './constants'
+import { DatePickerRangeControllerProps } from './types'
+
+import 'react-dates/lib/css/_datepicker.css'
+
+export const DatePickerRangeController = ({
+    handlePredefinedRange,
+    handleApply,
+    calendar,
+    calendarInputs,
+    handleDateInput,
+    handleDatesChange,
+    calendarValue,
+    focusedInput,
+    handleFocusChange,
+}: DatePickerRangeControllerProps) => {
+    const [showCalendar, setShowCalender] = useState(false)
+    const onClickApplyTimeChange = () => {
+        setShowCalender(false)
+        handleApply()
+    }
+
+    const onClickPredefinedTimeRange = (startDate: Moment, endDate: Moment, endStr: string) => () => {
+        handlePredefinedRange(startDate, endDate, endStr)
+        setShowCalender(false)
+    }
+
+    const renderDatePresets = () => (
+        <div
+            className="flex left top"
+            style={{
+                ...styles.PresetDateRangePicker_panel,
+                ...DayPickerCalendarInfoHorizontal,
+                ...{
+                    PresetDateRangePicker_panel: {
+                        padding: '0px',
+                        width: '200px',
+                        height: '100%',
+                    },
+                    ...styles.DayPicker__horizontal,
+                },
+            }}
+        >
+            <div className="w-300 h-300 p-16">
+                <p className="mb-16 fw-6">Pick time range</p>
+                <div>
+                    <div className="w-100 mb-16">
+                        <span>From</span>
+                        <input
+                            type="text"
+                            className="dc__block w-100 dc__border"
+                            value={calendarInputs.startDate}
+                            onChange={(event) => {
+                                handleDateInput('startDate', event.target.value)
+                            }}
+                        />
+                    </div>
+                    <div className="w-100 mb-16">
+                        <span>To</span>
+                        <input
+                            type="text"
+                            className="dc__block w-100 dc__border"
+                            value={calendarInputs.endDate}
+                            onChange={(event) => {
+                                handleDateInput('endDate', event.target.value)
+                            }}
+                        />
+                    </div>
+                    <Button
+                        text="Apply Time Range"
+                        onClick={onClickApplyTimeChange}
+                        dataTestId="apply-time-range"
+                        size={ComponentSizeType.medium}
+                    />
+                </div>
+            </div>
+            <div className="w-200 p-16 h-300">
+                {DayPickerRangeControllerPresets.map(({ text, startDate, endDate, endStr }) => {
+                    const isSelected =
+                        startDate.isSame(calendar.startDate, 'minute') &&
+                        startDate.isSame(calendar.startDate, 'hour') &&
+                        startDate.isSame(calendar.startDate, 'day') &&
+                        endDate.isSame(calendar.endDate, 'day')
+                    let buttonStyles = {
+                        ...styles.PresetDateRangePicker_button,
+                    }
+                    if (isSelected) {
+                        buttonStyles = {
+                            ...buttonStyles,
+                            ...styles.PresetDateRangePicker_button__selected,
+                        }
+                    }
+                    return (
+                        <button
+                            type="button"
+                            key={text}
+                            style={{ ...buttonStyles, textAlign: 'left' }}
+                            onClick={onClickPredefinedTimeRange(startDate, endDate, endStr)}
+                        >
+                            {text}
+                        </button>
+                    )
+                })}
+            </div>
+        </div>
+    )
+
+    const toggleCalender = () => {
+        setShowCalender(!showCalendar)
+    }
+
+    const hideCalender = () => setShowCalender(false)
+
+    return (
+        <>
+            <div
+                data-testid="app-metrics-range-picker-box"
+                className="flex h-36"
+                style={{ borderRadius: '4px', border: 'solid 1px var(--N200)' }}
+                onClick={toggleCalender}
+            >
+                <p className="cursor mb-0 h-32 p-6">{calendarValue}</p>
+                <Icon name="ic-caret-down-small" color="N600" />
+            </div>
+            {showCalendar && (
+                <DayPickerRangeController
+                    startDate={calendar.startDate}
+                    endDate={calendar.endDate}
+                    focusedInput={focusedInput}
+                    onDatesChange={handleDatesChange}
+                    onFocusChange={handleFocusChange}
+                    numberOfMonths={1}
+                    withPortal
+                    renderCalendarInfo={renderDatePresets}
+                    calendarInfoPosition="after"
+                    hideKeyboardShortcutsPanel
+                    isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())} // enable past dates
+                    renderCalendarDay={(props) => <CustomizableCalendarDay {...props} {...customDayStyles} />}
+                    onOutsideClick={hideCalender}
+                    initialVisibleMonth={() => moment().subtract(2, 'd')} //
+                />
+            )}
+        </>
+    )
+}

src/Shared/Components/DatePicker/constants.ts

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-const selectedStyles = {
+import moment from 'moment'
+
+export const selectedStyles = {
     background: 'var(--B100)',
     color: 'var(--B500)',
 
@@ -24,7 +26,7 @@ const selectedStyles = {
     },
 }
 
-const selectedSpanStyles = {
+export const selectedSpanStyles = {
     background: 'var(--B100)',
     color: 'var(--B500)',
     hover: {
@@ -33,7 +35,7 @@ const selectedSpanStyles = {
     },
 }
 
-const hoveredSpanStyles = {
+export const hoveredSpanStyles = {
     background: 'var(--B100)',
     color: 'var(--B500)',
 }
@@ -145,3 +147,74 @@ export const DATE_PICKER_IDS = {
     MONTH: 'month_picker',
     TIME: 'time_picker',
 }
+
+export const styles = {
+    PresetDateRangePicker_panel: {
+        padding: '0px',
+        width: '200px',
+        height: '100%',
+    },
+    PresetDateRangePicker_button: {
+        width: '188px',
+        background: 'var(--transparent)',
+        border: 'none',
+        color: 'var(--N900)',
+        padding: '8px',
+        font: 'inherit',
+        fontWeight: 500,
+        lineHeight: 'normal',
+        overflow: 'visible',
+        cursor: 'pointer',
+        ':active': {
+            outline: 0,
+        },
+    },
+    DayPicker__horizontal: {
+        borderRadius: '4px',
+    },
+    PresetDateRangePicker_button__selected: {
+        color: 'var(--B500)',
+        fontWeight: 600,
+        background: 'var(--B100)',
+        outline: 'none',
+    },
+}
+
+export const DayPickerCalendarInfoHorizontal = {
+    width: '532px',
+    boxShadow: 'none',
+}
+
+export const DayPickerRangeControllerPresets = [
+    { text: 'Last 5 minutes', endDate: moment(), startDate: moment().subtract(5, 'minutes'), endStr: 'now-5m' },
+    { text: 'Last 30 minutes', endDate: moment(), startDate: moment().subtract(30, 'minutes'), endStr: 'now-30m' },
+    { text: 'Last 1 hour', endDate: moment(), startDate: moment().subtract(1, 'hours'), endStr: 'now-1h' },
+    { text: 'Last 24 hours', endDate: moment(), startDate: moment().subtract(24, 'hours'), endStr: 'now-24h' },
+    { text: 'Last 7 days', endDate: moment(), startDate: moment().subtract(7, 'days'), endStr: 'now-7d' },
+    { 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/index.ts

@@ -16,6 +16,7 @@
 
 export * from './constants'
 export { default as DateTimePicker } from './DateTimePicker'
+export { DatePickerRangeController } from './DayPickerRangeController'
 export * from './MonthlySelect'
 export { default as SingleDatePickerComponent } from './SingleDatePickerComponent'
 export * from './TimeSelect'

src/Shared/Components/DatePicker/types.ts

@@ -143,3 +143,16 @@ export interface DateTimePickerProps
      */
     onChange: (date: Date) => void
 }
+
+export interface DatePickerRangeControllerProps {
+    calendar
+    calendarInputs
+    focusedInput
+    handleFocusChange
+    handleDatesChange
+    handleCalendarInputs?
+    calendarValue: string
+    handlePredefinedRange: (start: Moment, end: Moment, endStr: string) => void
+    handleDateInput: (key: 'startDate' | 'endDate', value: string) => void
+    handleApply: (...args) => void
+}