diff --git a/package.json b/package.json index 26e0f6937b..5e74047f0e 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "moment": "^2.29.4", "query-string": "^7.1.1", "react": "^17.0.2", - "react-dates": "^21.8.0", "react-dom": "^17.0.2", "react-ga4": "^1.4.1", "react-gtm-module": "^2.0.11", @@ -74,7 +73,6 @@ "@types/jest": "^27.4.1", "@types/node": "20.11.0", "@types/react": "17.0.39", - "@types/react-dates": "^21.8.6", "@types/react-dom": "17.0.13", "@types/react-router-dom": "^5.3.3", "@types/react-transition-group": "^4.4.4", diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx index 69b94aa06c..690e838b40 100644 --- a/src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx +++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx @@ -23,6 +23,7 @@ import { ButtonStyleType, ButtonVariantType, ComponentSizeType, + DATE_TIME_FORMATS, FeatureTitleWithInfo, GenericFilterEmptyState, } from '@devtron-labs/devtron-fe-common-lib' @@ -30,7 +31,7 @@ import { import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-interactive.svg' import { ReactComponent as Key } from '../../../../assets/icons/ic-key-bulb.svg' import { ReactComponent as Edit } from '../../../../assets/icons/ic-pencil.svg' -import { HEADER_TEXT, MomentDateFormat } from '../../../../config' +import { HEADER_TEXT } from '../../../../config' import { APITokenListType, TokenListType } from './apiToken.type' import { isTokenExpired } from './apiToken.utils' import DeleteAPITokenModal from './DeleteAPITokenModal' @@ -126,7 +127,9 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
{list.lastUsedAt - ? moment(list.lastUsedAt).format(MomentDateFormat) + ? moment(list.lastUsedAt).format( + DATE_TIME_FORMATS.WEEKDAY_WITH_DATE_MONTH_AND_YEAR, + ) : 'Never used'}
{list.lastUsedByIp ? list.lastUsedByIp : '-'}
@@ -136,7 +139,7 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType ) : ( <> {isTokenExpired(list.expireAtInMs) ? 'Expired on ' : ''} - {moment(list.expireAtInMs).format(MomentDateFormat)} + {moment(list.expireAtInMs).format(DATE_TIME_FORMATS.TWELVE_HOURS_FORMAT)} )} diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx index 7b425b5acc..b6bd585f66 100644 --- a/src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx +++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/ApiTokens.component.tsx @@ -33,6 +33,7 @@ import APITokenList from './APITokenList' import CreateAPIToken from './CreateAPIToken' import EditAPIToken from './EditAPIToken' import { getGeneratedAPITokenList } from './service' +import { ExpirationDateSelectOptionType } from './types' import './apiToken.scss' @@ -48,7 +49,7 @@ const ApiTokens = () => { const [errorStatusCode, setErrorStatusCode] = useState(0) const [showGenerateModal, setShowGenerateModal] = useState(false) const [showRegenerateTokenModal, setShowRegenerateTokenModal] = useState(false) - const [selectedExpirationDate, setSelectedExpirationDate] = useState<{ label: string; value: number }>({ + const [selectedExpirationDate, setSelectedExpirationDate] = useState({ label: '30 days', value: 30, }) diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx index 973fed3f23..1c9206b313 100644 --- a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx +++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx @@ -18,7 +18,7 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ import { useEffect, useState } from 'react' import { useHistory, useRouteMatch } from 'react-router-dom' -import { Moment } from 'moment' +import dayjs from 'dayjs' import { CustomInput, @@ -49,6 +49,7 @@ import ExpirationDate from './ExpirationDate' import GenerateActionButton from './GenerateActionButton' import GenerateModal from './GenerateModal' import { createGeneratedAPIToken } from './service' +import { ExpirationDateSelectOptionType } from './types' import { ValidationRules } from './validationRules' const showStatus = !!importComponentFromFELibrary('StatusHeaderCell', null, 'function') @@ -103,7 +104,7 @@ const CreateAPIToken = ({ isSaveDisabled, allowManageAllAccess, } = usePermissionConfiguration() - const [customDate, setCustomDate] = useState(null) + const [customDate, setCustomDate] = useState(dayjs().add(1, 'day').toDate()) const [tokenResponse, setTokenResponse] = useState({ success: false, token: '', @@ -147,11 +148,11 @@ const CreateAPIToken = ({ } } - const onCustomDateChange = (event) => { - setCustomDate(event) + const onCustomDateChange = (date: Date) => { + setCustomDate(date) setFormData({ ...formData, - expireAtInMs: event.valueOf(), + expireAtInMs: date.valueOf(), dateType: 'Custom', }) @@ -167,12 +168,15 @@ const CreateAPIToken = ({ history.push(`${match.path.split('create')[0]}list`) } - const onChangeSelectFormData = (selectedOption: { label: string; value: number }) => { + const onChangeSelectFormData = (selectedOption: ExpirationDateSelectOptionType) => { setSelectedExpirationDate(selectedOption) + const parsedMilliseconds = selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value) + setFormData({ ...formData, - expireAtInMs: selectedOption.value === 0 ? 0 : getDateInMilliseconds(selectedOption.value), - dateType: selectedOption.label, + expireAtInMs: + typeof selectedOption.value === 'number' ? parsedMilliseconds : selectedOption.value.valueOf(), + dateType: selectedOption.label as string, }) } @@ -283,7 +287,7 @@ const CreateAPIToken = ({ placeholder="Enter a description to remember where you have used this token" error={formDataErrorObj.invalidDescription && formDataErrorObj.invalidDescriptionMessage} /> - - diff --git a/src/components/app/details/appDetails/appDetails.type.ts b/src/components/app/details/appDetails/appDetails.type.ts index 1cf29233aa..84018ddd00 100644 --- a/src/components/app/details/appDetails/appDetails.type.ts +++ b/src/components/app/details/appDetails/appDetails.type.ts @@ -50,15 +50,9 @@ export enum StatusType { Throughput = 'Throughput', } -export enum CalendarFocusInput { - StartDate = 'startDate', - EndDate = 'endDate', -} - export type AppMetricsTabType = 'aggregate' | 'pod' export type ChartTypes = 'cpu' | 'ram' | 'status' | 'latency' export type StatusTypes = '5xx' | '4xx' | '2xx' | 'Throughput' -export type CalendarFocusInputType = 'startDate' | 'endDate' export interface AppDetailsPathParams { appId: string diff --git a/src/components/app/details/appDetails/types.ts b/src/components/app/details/appDetails/types.ts index ee51a1d8fc..353de57ddc 100644 --- a/src/components/app/details/appDetails/types.ts +++ b/src/components/app/details/appDetails/types.ts @@ -15,6 +15,7 @@ */ import { SyntheticEvent } from 'react' +import moment from 'moment' import { AppMetricsTabType, ChartTypes, HibernationModalTypes, StatusTypes } from './appDetails.type' import { AppInfo } from './utils' @@ -39,3 +40,8 @@ export interface HibernationModalProps { hibernateConfirmationModal: HibernationModalTypes handleHibernateConfirmationModalClose: (e?: SyntheticEvent) => void } + +export type GrafanaPresetOptionHandlerType = ( + startString: string, + momentDiff: { magnitude: number; unit: moment.unitOfTime.DurationConstructor }, +) => void diff --git a/src/components/app/details/appDetails/utils.tsx b/src/components/app/details/appDetails/utils.tsx index c20bb402ae..67186b1ab2 100644 --- a/src/components/app/details/appDetails/utils.tsx +++ b/src/components/app/details/appDetails/utils.tsx @@ -31,9 +31,9 @@ import { AppEnvironment, SelectPickerOptionType, IconsProps, - DayPickerRangeControllerPresets, + DateTimePickerProps, } from '@devtron-labs/devtron-fe-common-lib' -import { GetIFrameSrcParamsType } from './types' +import { GetIFrameSrcParamsType, GrafanaPresetOptionHandlerType } from './types' export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: boolean): AggregationKeys { switch (nodeType) { @@ -140,18 +140,15 @@ export const LatencySelect = (props) => { ) } -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 -} +export const getAppMetricsPresetOptions = (onClick: GrafanaPresetOptionHandlerType): DateTimePickerProps['rangeShortcutOptions'] => [ + { label: 'Last 5 minutes', onClick: () => onClick('now-5m', { magnitude: 5, unit: 'minutes' }) }, + { label: 'Last 30 minutes', onClick: () => onClick('now-30m', { magnitude: 30, unit: 'minutes' }) }, + { label: 'Last 1 hour', onClick: () => onClick('now-1h', { magnitude: 1, unit: 'hours' }) }, + { label: 'Last 24 hours', onClick: () => onClick('now-24h', { magnitude: 24, unit: 'hours' }) }, + { label: 'Last 7 days', onClick: () => onClick('now-7d', { magnitude: 7, unit: 'days' }) }, + { label: 'Last 1 month', onClick: () => onClick('now-1M', { magnitude: 1, unit: 'months' }) }, + { label: 'Last 6 months', onClick: () => onClick('now-6M', { magnitude: 6, unit: 'months' }) }, +] export function isK8sVersionValid(k8sVersion: string): boolean { if (!k8sVersion) { diff --git a/src/components/app/details/metrics/DeploymentMetrics.tsx b/src/components/app/details/metrics/DeploymentMetrics.tsx index 2c4c1c37ca..ce71d3d26c 100644 --- a/src/components/app/details/metrics/DeploymentMetrics.tsx +++ b/src/components/app/details/metrics/DeploymentMetrics.tsx @@ -23,6 +23,7 @@ import { Chart, ChartColorKey, ChartProps, + DateTimePicker, EMPTY_STATE_STATUS, ErrorScreenManager, GenericEmptyState, @@ -30,6 +31,7 @@ import { SelectPicker, showError, Tooltip, + UpdateDateRangeType, URLS, } from '@devtron-labs/devtron-fe-common-lib' @@ -42,7 +44,7 @@ import SelectEnvImage from '@Images/ic-empty-dep-metrics@2x.png' import { ViewType } from '../../../../config' import { getAppOtherEnvironmentMin } from '../../../../services/service' -import { DatePicker, useAppContext } from '../../../common' +import { useAppContext } from '../../../common' import { BenchmarkModal } from './BenchmarkModal' import { getDeploymentMetrics } from './deploymentMetrics.service' import { @@ -61,6 +63,7 @@ import { } from './deploymentMetrics.util' import { DeploymentTable } from './DeploymentTable' import { DeploymentTableModal } from './DeploymentTableModal' +import { getRangeShortcutOptions } from './utils' import './deploymentMetrics.scss' @@ -239,7 +242,6 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps) benchmarkModalData: undefined, startDate: moment().set({ hour: 0, minute: 0, seconds: 0 }).subtract(6, 'months'), endDate: moment().set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }), - focusedInput: null, meanLeadTimeLabel: '', leadTimeBenchmark: undefined, meanRecoveryTimeLabel: '', @@ -348,18 +350,14 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps) }) } - const handleDatesChange = ({ startDate: newStartDate, endDate: newEndDate }): void => { + const handleDatesChange: UpdateDateRangeType = ({ from: newStartDate, to: newEndDate }): void => { setState((prev) => ({ ...prev, - startDate: newStartDate?.set({ hour: 0, minute: 0, seconds: 0 }), - endDate: newEndDate?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }), + startDate: moment(newStartDate)?.set({ hour: 0, minute: 0, seconds: 0 }), + endDate: moment(newEndDate)?.set({ hour: 23, minute: 59, seconds: 59, milliseconds: 999 }), })) } - const handleFocusChange = (focusedInput): void => { - setState((prev) => ({ ...prev, focusedInput })) - } - const handleTableFilter = (event): void => { ReactGA.event({ category: 'Deployment Metrics', @@ -481,6 +479,8 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps) handleEnvironmentChange(selected) } + const isOutsideRange = (date: Date) => moment(date).isAfter(moment(), 'day') + const renderInputs = () => (
@@ -494,14 +494,20 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps) options={state.environments} />
-
+
{selectedEnvironment ? ( - ) : null}
diff --git a/src/components/app/details/metrics/deploymentMetrics.types.ts b/src/components/app/details/metrics/deploymentMetrics.types.ts index eaa08c69ad..0f4e6bda7b 100644 --- a/src/components/app/details/metrics/deploymentMetrics.types.ts +++ b/src/components/app/details/metrics/deploymentMetrics.types.ts @@ -104,7 +104,6 @@ export interface DeploymentMetricsState { startDate: Moment endDate: Moment - focusedInput: any filterBy: { startDate: undefined | Moment endDate: undefined | Moment diff --git a/src/components/app/details/metrics/utils.ts b/src/components/app/details/metrics/utils.ts new file mode 100644 index 0000000000..8c85864398 --- /dev/null +++ b/src/components/app/details/metrics/utils.ts @@ -0,0 +1,23 @@ +import dayjs from 'dayjs' + +import { DateTimePickerProps } from '@devtron-labs/devtron-fe-common-lib' + +const getRangeOptionBeforeMonths = (monthCount: number): DateTimePickerProps['rangeShortcutOptions'][number] => ({ + label: `Last ${monthCount} month${monthCount > 1 ? 's' : ''}`, + value: { + from: dayjs().subtract(monthCount, 'month').toDate(), + to: dayjs().toDate(), + }, +}) + +export const getRangeShortcutOptions = (): DateTimePickerProps['rangeShortcutOptions'] => + [ + { + label: 'Last 15 days', + value: { + from: dayjs().subtract(15, 'day').toDate(), + to: dayjs().toDate(), + }, + }, + ...[1, 2, 3, 4, 5, 6].map((month) => getRangeOptionBeforeMonths(month)), + ] satisfies DateTimePickerProps['rangeShortcutOptions'] diff --git a/src/components/common/DatePickers/Calender.tsx b/src/components/common/DatePickers/Calender.tsx deleted file mode 100644 index 51a6cdded6..0000000000 --- a/src/components/common/DatePickers/Calender.tsx +++ /dev/null @@ -1,248 +0,0 @@ -/* - * 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 React, { Component, useState } from 'react' -import 'react-dates/initialize' -import 'react-dates/lib/css/_datepicker.css' -import CustomizableCalendarDay from 'react-dates/esm/components/CustomizableCalendarDay.js' -import ReactGA from 'react-ga4' -import moment, { Moment } from 'moment' -import { isInclusivelyBeforeDay, DateRangePicker, SingleDatePicker } from 'react-dates' -import { noop } from '@devtron-labs/devtron-fe-common-lib' -import './calendar.css' - -interface DatePickerProps { - endDate - startDate - handleFocusChange - handleDatesChange - focusedInput -} - -const hoveredSpanStyles = { - background: 'var(--B100)', - color: 'var(--B500)', -} - -const selectedStyles = { - background: 'var(--B100)', - color: 'var(--B500)', - - hover: { - background: 'var(--B500)', - color: 'var(--N0)', - }, -} - -const selectedSpanStyles = { - background: 'var(--B100)', - color: 'var(--B500)', - hover: { - background: 'var(--B500)', - color: 'var(--N0)', - }, -} - -export const customDayStyles = { - selectedStartStyles: selectedStyles, - selectedEndStyles: selectedStyles, - hoveredSpanStyles, - selectedSpanStyles, - selectedStyles, - border: 'none', -} - -const styless = { - PresetDateRangePicker_panel: { - padding: '22px 16px', - width: '200px', - height: '100%', - }, - PresetDateRangePicker_button: { - width: '178px', - background: 'var(--transparent)', - border: 'none', - color: 'var(--N900)', - padding: '8px', - font: 'inherit', - fontWeight: 500, - lineHeight: 'normal', - overflow: 'visible', - cursor: 'pointer', - ':active': { - outline: 0, - }, - }, - DayPicker_portal__horizontal: { - zIndex: 1, - }, - PresetDateRangePicker_button__selected: { - color: 'var(--B500)', - fontWeight: 600, - background: 'var(--B100)', - outline: 'none', - }, -} - -export class DatePicker extends Component { - constructor(props) { - super(props) - - this.renderDatePresets = this.renderDatePresets.bind(this) - } - - getInitialVisibleMonth = () => { - return this.props.endDate - } - - handleIsDayBlocked(day) { - return false - } - - renderDatePresets() { - const p = [ - { text: 'Last 15 days', end: moment(), start: moment().subtract(15, 'days') }, - { text: 'Last 1 month', end: moment(), start: moment().subtract(1, 'months') }, - { text: 'Last 2 months', end: moment(), start: moment().subtract(2, 'months') }, - { text: 'Last 3 months', end: moment(), start: moment().subtract(3, 'months') }, - { text: 'Last 4 months', end: moment(), start: moment().subtract(4, 'months') }, - { text: 'Last 5 months', end: moment(), start: moment().subtract(5, 'months') }, - { text: 'Last 6 months', end: moment(), start: moment().subtract(6, 'months') }, - ] - return ( -
- {p.map(({ text, start, end }) => { - const isSelected = - start.isSame(this.props.startDate, 'day') && end.isSame(this.props.endDate, 'day') - let buttonStyles = { - ...styless.PresetDateRangePicker_button, - } - if (isSelected) { - buttonStyles = { - ...buttonStyles, - ...styless.PresetDateRangePicker_button__selected, - ...styless.DayPicker_portal__horizontal, - } - } - return ( - - ) - })} -
- ) - } - - render() { - return ( - { - ReactGA.event({ - category: 'Deployment Metrics', - action: 'Date Range Changed', - label: 'Custom', - }) - this.props.handleDatesChange(range) - }} // PropTypes.func.isRequired, - focusedInput={this.props.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, - onFocusChange={this.props.handleFocusChange} // PropTypes.func.isRequired, - displayFormat="DD-MM-YYYY" - isOutsideRange={(day) => !isInclusivelyBeforeDay(day, moment())} // enable past dates - renderCalendarInfo={this.renderDatePresets} - calendarInfoPosition="before" - initialVisibleMonth={this.getInitialVisibleMonth} - renderCalendarDay={(props) => } - hideKeyboardShortcutsPanel - numberOfMonths={1} - block={false} - small - withFullScreenPortal={false} - anchorDirection="right" - orientation="horizontal" - minimumNights={1} - isDayBlocked={this.handleIsDayBlocked} - /> - ) - } -} - -interface SingleDatePickerProps { - date: Moment - handleDatesChange: (e) => void - readOnly?: boolean - isTodayBlocked?: boolean -} - -const blockToday = (day: Moment): boolean => { - return day.isSame(moment(), 'day') -} - -/** - * - * @param param0 date, handleDatesChange, readOnly, isTodayBlocked - * @deprecated it is replaced with DatePicker in common - * @returns - */ - -export const SingleDatePickerComponent = ({ - date, - handleDatesChange, - readOnly, - isTodayBlocked, -}: SingleDatePickerProps) => { - const [focused, setFocused] = useState(false) - - const handleFocusChange = ({ focused }) => { - setFocused(focused) - } - - return ( - } - hideKeyboardShortcutsPanel - withFullScreenPortal={false} - orientation="horizontal" - readOnly={readOnly || false} - isDayBlocked={isTodayBlocked ? blockToday : noop} - /> - ) -} diff --git a/src/components/common/DatePickers/calendar.css b/src/components/common/DatePickers/calendar.css deleted file mode 100644 index b395ca0d3a..0000000000 --- a/src/components/common/DatePickers/calendar.css +++ /dev/null @@ -1,167 +0,0 @@ -/* - * 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. - */ - -/* OVerride Date picker */ - -.DayPicker__horizontal, .SingleDatePicker_picker { - z-index: 11; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.05), - 0 0 0 1px rgba(0, 0, 0, 0.07); - background: var(--bg-overlay-primary); -} - -.DateRangePickerInput__withBorder { - border: solid 1px var(--N200); - background-color: var(--bg-secondary); -} - -.DateRangePickerInput { - height: 40px; - border-radius: 4px; -} - -.DateInput__small { - background: var(--transparent); - padding: 4px 8px; -} - -.DateInput__small, -.DateInput_input__focused, -.DateInput_input { - height: 100%; -} - -.DateInput_input { - font-weight: 400; - border: none; -} - -.DateInput_input__focused { - border-bottom: solid 2px var(--B500); -} - -.DateInput__small:first-child { - height: 100%; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} - -.DateInput__small:first-child .DateInput_input { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} - -.DateInput__small:last-child { - height: 100%; - border-bottom-right-radius: 4px; - border-top-right-radius: 4px; -} - -.DateInput__small:last-child .DateInput_input { - border-bottom-right-radius: 4px; - border-top-right-radius: 4px; -} - -.SingleDatePickerInput__withBorder, -.SingleDatePickerInput__withBorder .DateInput, -.SingleDatePickerInput__withBorder .DateInput_input#single_date_picker { - border-radius: 4px; -} - -.SingleDatePickerInput__withBorder .DateInput { - width: 200px; - height: 36px; -} - -.SingleDatePickerInput__withBorder .DateInput_input#single_date_picker { - font-size: 13px; - border-bottom: none; - cursor: pointer; - background-color: var(--bg-secondary); -} - -.SingleDatePickerInput__withBorder .DateInput_input__focused#single_date_picker { - border-color: var(--B500); -} - -.SingleDatePickerInput__withBorder .SingleDatePicker_picker { - bottom: 0 !important; - top: 46px !important; -} - -.SingleDatePickerInput__withBorder .DateInput_input__focused#single_date_picker + .DateInput_fang { - display: none; -} - -.SingleDatePickerInput__withBorder .DayPicker .CalendarDay[aria-disabled='true'] { - border: 1px solid var(--N100) !important; - color: var(--N200) !important; - background: var(--bg-primary) !important; -} - -.CalendarMonthGrid__horizontal, .CalendarMonth { - background: var(--transparent); -} - -.CalendarMonth_caption { - color: var(--N700); -} - -.DayPickerNavigation_button__default { - border: 1px solid var(--N200); - background-color: var(--transparent); - color: var(--N200); - - &:hover,&:active,&:focus-visible,&:focus { - border-color: var(--N300); - background-color: var(--transparent); - } -} - -.DayPickerNavigation_svg__horizontal { - fill: var(--N600); -} - -.CalendarDay { - border: 1px solid var(--N200) !important; - color: var(--N700) !important; - background: var(--transparent) !important; - - &[aria-disabled="true"] { - opacity: 0.5; - cursor: not-allowed; - } - - &[aria-label^="Selected"] { - background: var(--B300) !important; - color: var(--N0) !important; - } - - &:hover:not([aria-disabled="true"]) { - color: var(--B500) !important; - background: var(--bg-secondary) !important; - } -} - -.DateRangePicker_picker { - background: var(--bg-overlay-primary); - border-radius: 4px; -} - -.DateRangePickerInput_arrow { - color: var(--N700); -} diff --git a/src/components/common/index.ts b/src/components/common/index.ts index b040c6a3f0..adf11f38db 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -15,7 +15,6 @@ */ export * from './Contexts' -export * from './DatePickers/Calender' export { default as RectangularEdge } from './edge/rectangularEdge' export { default as ErrorBoundary } from './errorBoundary' export * from './formFields/Typeahead' diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx index 13209322d1..3ecf06d9e6 100644 --- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx +++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx @@ -23,13 +23,10 @@ import { ComponentSizeType, CustomInput, InfoBlock, + DateTimePicker, } from '@devtron-labs/devtron-fe-common-lib' import Select from 'react-select' -import { SingleDatePicker } from 'react-dates' -import 'react-dates/initialize' -import 'react-dates/lib/css/_datepicker.css' import moment from 'moment' -import CustomizableCalendarDay from 'react-dates/lib/components/CustomizableCalendarDay' import { Option } from '../../../../../common/ReactSelect.utils' import { ReactComponent as Close } from '../../../../../../../assets/icons/ic-close.svg' import { ReactComponent as CalendarIcon } from '../../../../../../../assets/icons/ic-calendar.svg' @@ -45,7 +42,6 @@ import { getTimeStamp, } from '../../nodeDetail.util' import { multiSelectStyles } from '../../../../../common/ReactSelectCustomization' -import { customDayStyles } from '../../../../../../common' import { CustomLogFilterOptionsType, SelectedCustomLogFilterType } from '../node.type' const DropdownIndicator = () => { @@ -88,20 +84,22 @@ export const InputForSelectedOption = ({ } }, []) - const handleDatesChange = (selected) => { - if (!selected) { + const handleDatesChange = (selectedDate: Date) => { + if (!selectedDate) { return } + const momentDate = moment(selectedDate) + setCustomLogFilterOptions({ ...customLogFilterOptions, [filterTypeRadio]: { ...customLogFilterOptions[filterTypeRadio], - date: selected, - value: getTimeStamp(selected, customLogFilterOptions[filterTypeRadio].time.value).toString(), + date: momentDate, + value: getTimeStamp(momentDate, customLogFilterOptions[filterTypeRadio].time.value).toString(), }, }) - if (selected.isSame(moment(), 'day')) { + if (momentDate.isSame(moment(), 'day')) { setUntilTimeOptionsWithExcluded() } else { setUntilTimeOptions(ALLOW_UNTIL_TIME_OPTIONS) @@ -213,25 +211,14 @@ export const InputForSelectedOption = ({
View logs since
-
- ( - - )} - hideKeyboardShortcutsPanel - withFullScreenPortal={false} - orientation="horizontal" - customInputIcon={} - isOutsideRange={(day) => moment().startOf('day').isBefore(day, 'day')} - displayFormat="DD MMM YYYY" +
+ moment().startOf('day').isBefore(moment(day), 'day')} />