From a54fe2f04511f08e4939c76fee9a563f7a56a457 Mon Sep 17 00:00:00 2001 From: monicawoj Date: Tue, 21 Nov 2023 17:08:13 +0100 Subject: [PATCH 01/10] ui of new relative and absolute time pickers --- .../components/src/DateTimePicker/index.tsx | 8 +- .../AbsoluteDatePicker/index.tsx | 57 +++---- .../RelativeDatePicker/index.tsx | 139 ---------------- .../DateTimeRangePickerPanel/index.tsx | 50 ------ .../DateTimeRangePickerTrigger.tsx | 56 ------- .../RelativeDatePicker/index.tsx | 155 ++++++++++++++++++ .../src/DateTimeRangePicker/index.tsx | 58 ++----- .../src/DateTimeRangePicker/utils.ts | 17 ++ ui/packages/shared/icons/package.json | 3 +- .../shared/icons/src/assets/calendar.svg | 1 + ui/packages/shared/icons/src/index.tsx | 2 + .../profile/src/ProfileSelector/index.tsx | 4 - 12 files changed, 225 insertions(+), 325 deletions(-) rename ui/packages/shared/components/src/DateTimeRangePicker/{DateTimeRangePickerPanel => }/AbsoluteDatePicker/index.tsx (53%) delete mode 100644 ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/RelativeDatePicker/index.tsx delete mode 100644 ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/index.tsx delete mode 100644 ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerTrigger.tsx create mode 100644 ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx create mode 100644 ui/packages/shared/icons/src/assets/calendar.svg diff --git a/ui/packages/shared/components/src/DateTimePicker/index.tsx b/ui/packages/shared/components/src/DateTimePicker/index.tsx index b7e661cbc50..48f8363ef07 100644 --- a/ui/packages/shared/components/src/DateTimePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimePicker/index.tsx @@ -13,6 +13,7 @@ import ReactDatePicker from 'react-datepicker'; +import {Calendar} from '@parca/icons'; import {convertLocalToUTCDate, convertUTCToLocalDate} from '@parca/utilities'; interface Props { @@ -26,7 +27,8 @@ const DateTimePicker = ({selected, onChange}: Props): JSX.Element => ( onChange={onChange} showTimeInput dateFormat="yyyy-MM-dd HH:mm:ss" - className="w-full rounded-md border border-gray-200 bg-gray-50 p-2 text-sm dark:border-gray-600 dark:bg-gray-900" + className="w-full rounded-md border border-gray-200 p-2 text-sm dark:border-gray-600 dark:bg-gray-900" + showIcon /> ); @@ -36,7 +38,9 @@ export const UTCDateTimePicker = ({selected, onChange}: Props): JSX.Element => ( onChange={date => onChange(date != null ? convertLocalToUTCDate(date) : null)} showTimeInput dateFormat="yyyy-MM-dd HH:mm:ss" - className="w-full rounded-md border border-gray-200 bg-gray-50 p-2 text-sm dark:border-gray-600 dark:bg-gray-900" + className="w-full rounded-md border border-gray-200 p-2 text-sm dark:border-gray-600 dark:bg-gray-900" + showIcon + icon={} /> ); diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/AbsoluteDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx similarity index 53% rename from ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/AbsoluteDatePicker/index.tsx rename to ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx index a42069bdbf7..9b53b5fa87a 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/AbsoluteDatePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx @@ -11,15 +11,14 @@ // See the License for the specific language governing permissions and // limitations under the License. -import {useState} from 'react'; +import {useEffect, useState} from 'react'; -import {Button} from '../../../Button'; -import {UTCDateTimePicker} from '../../../DateTimePicker'; -import {AbsoluteDate, DateTimeRange, getDateHoursAgo} from '../../utils'; +import {UTCDateTimePicker} from '../../DateTimePicker'; +import {AbsoluteDate, DateTimeRange, RelativeDate, UNITS, getDateHoursAgo} from '../utils'; interface AbsoluteDatePickerProps { range: DateTimeRange; - onChange?: (from: AbsoluteDate, to: AbsoluteDate) => void; + onChange?: (from: AbsoluteDate | RelativeDate, to: AbsoluteDate | RelativeDate) => void; } const AbsoluteDatePicker = ({ @@ -32,39 +31,33 @@ const AbsoluteDatePicker = ({ const [to, setTo] = useState( range.to.isRelative() ? getDateHoursAgo(0) : (range.to as AbsoluteDate).value ); + + useEffect(() => { + onChange(new AbsoluteDate(from), new AbsoluteDate(to)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [from, to]); + return ( -
-
- Absolute Range -
-
-
-
- From: -
+
+
+
+
Start
date != null && setFrom(date)} />
-
-
- To: -
+
+
End
date != null && setTo(date)} />
-
-
- -
-
-

- Note: All date and time values are in UTC. -

+
); }; diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/RelativeDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/RelativeDatePicker/index.tsx deleted file mode 100644 index aa439fa15d1..00000000000 --- a/ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/RelativeDatePicker/index.tsx +++ /dev/null @@ -1,139 +0,0 @@ -// Copyright 2022 The Parca Authors -// 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 {capitalize} from '@parca/utilities'; - -import {Button} from '../../../Button'; -import Input from '../../../Input'; -import Select, {contructItemsFromArray} from '../../../Select'; -import {DateTimeRange, RelativeDate, UNITS, UNIT_TYPE} from '../../utils'; - -const constructKeyAndLabels = (UNITS: UNIT_TYPE[]): Array<{key: string; label: string}> => { - return UNITS.map(unit => ({ - key: unit, - label: `${capitalize(unit)}s`, - })); -}; - -interface RelativeDatePickerProps { - range: DateTimeRange; - onChange?: (from: RelativeDate, to: RelativeDate) => void; -} - -const quickPresetRanges = [ - { - title: 'Last 15 min', - unit: UNITS.MINUTE, - value: 15, - }, - { - title: 'Last 1 hour', - unit: UNITS.HOUR, - value: 1, - }, - { - title: 'Last 3 hours', - unit: UNITS.HOUR, - value: 3, - }, - { - title: 'Last 6 hours', - unit: UNITS.HOUR, - value: 6, - }, - { - title: 'Last 12 hours', - unit: UNITS.HOUR, - value: 12, - }, - { - title: 'Last 1 day', - unit: UNITS.DAY, - value: 1, - }, -]; - -const NOW = new RelativeDate(UNITS.MINUTE, 0); - -const RelativeDatePicker = ({ - range, - onChange = () => null, -}: RelativeDatePickerProps): JSX.Element => { - const date = range.from as RelativeDate; - const [unit, setUnit] = useState(date.isRelative() ? date.unit : UNITS.MINUTE); - const [value, setValue] = useState(date.isRelative() ? date.value : 15); - return ( -
-
-
- Quick Ranges -
-
- {quickPresetRanges.map(({title, unit, value}) => ( - - ))} -
-
-
-
- OR -
-
- Last - ) => - setValue(parseInt(e.target.value, 10)) - } - /> - { + // parse the input value and check whether it is valid + // if it is valid, set the range + // if it is not valid, set the range to the previous value + + const parsedInput = parseInput(rangeInputString); + + if (parsedInput === null) { + setRangeInputString(`${validRange.value}${unitShort[validRange.unit]}`); + return; + } + const {value, unit} = parsedInput; + setValidRange({value, unit}); + }} + /> +
+ +
+ +
+ ); +}; + +export default RelativeDatePicker; diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx index 4a6d49bf640..2b4c6ef0658 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/index.tsx @@ -11,14 +11,8 @@ // See the License for the specific language governing permissions and // limitations under the License. -import {useRef, useState} from 'react'; - -import {Popover} from '@headlessui/react'; -import cx from 'classnames'; -import {useClickAway} from 'react-use'; - -import DateTimeRangePickerPanel from './DateTimeRangePickerPanel'; -import DateTimeRangePickerTrigger from './DateTimeRangePickerTrigger'; +import AbsoluteDatePicker from './AbsoluteDatePicker'; +import RelativeDatePicker from './RelativeDatePicker'; import {DateTimeRange, DateUnion} from './utils'; interface DateTimeRangePickerProps { @@ -27,40 +21,22 @@ interface DateTimeRangePickerProps { } const DateTimeRangePicker = ({onRangeSelection, range}: DateTimeRangePickerProps): JSX.Element => { - const [isActive, setIsActive] = useState(false); - const containerRef = useRef(null); - useClickAway(containerRef, () => { - setIsActive(false); - }); + const isRelativeRange = range.from.isRelative(); - return ( - -
- { - setIsActive(!isActive); - }} - /> - {isActive ? ( - - { - onRangeSelection(new DateTimeRange(from, to)); - setIsActive(false); - }} - /> - - ) : null} -
- + return isRelativeRange ? ( + { + onRangeSelection(new DateTimeRange(from, to)); + }} + /> + ) : ( + { + onRangeSelection(new DateTimeRange(from, to)); + }} + /> ); }; diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/utils.ts b/ui/packages/shared/components/src/DateTimeRangePicker/utils.ts index 4e7e61b5ccb..9c72e514b1e 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/utils.ts +++ b/ui/packages/shared/components/src/DateTimeRangePicker/utils.ts @@ -175,6 +175,23 @@ export const getDateHoursAgo = (hours = 1): Date => { return now; }; +export const getHistoricalDate = ({value, unit}: {value: number; unit: string}): Date => { + const now = new Date(); + switch (unit) { + case UNITS.MINUTE: + now.setMinutes(now.getMinutes() - value); + return now; + case UNITS.HOUR: + now.setHours(now.getHours() - value); + return now; + case UNITS.DAY: + now.setDate(now.getDate() - value); + return now; + default: + return now; + } +}; + const getRelativeDateMs = (date: RelativeDate): number => { const now = new Date().getTime(); const {unit, value} = date; diff --git a/ui/packages/shared/icons/package.json b/ui/packages/shared/icons/package.json index bd357f5e56c..08586af1de8 100644 --- a/ui/packages/shared/icons/package.json +++ b/ui/packages/shared/icons/package.json @@ -4,7 +4,8 @@ "description": "Parca commonly used icons", "main": "src/index.tsx", "scripts": { - "test": "jest --coverage --config ../../../jest.config.js ./src/*" + "test": "jest --coverage --config ../../../jest.config.js ./src/*", + "watch": "tsc-watch --onSuccess 'tailwindcss -o dist/styles.css --minify'" }, "keywords": [], "author": "", diff --git a/ui/packages/shared/icons/src/assets/calendar.svg b/ui/packages/shared/icons/src/assets/calendar.svg new file mode 100644 index 00000000000..a55eccacc9f --- /dev/null +++ b/ui/packages/shared/icons/src/assets/calendar.svg @@ -0,0 +1 @@ + diff --git a/ui/packages/shared/icons/src/index.tsx b/ui/packages/shared/icons/src/index.tsx index 723388a299d..4f869593800 100644 --- a/ui/packages/shared/icons/src/index.tsx +++ b/ui/packages/shared/icons/src/index.tsx @@ -13,6 +13,7 @@ import CloseIcon from './CloseIcon'; import {ReactComponent as ArrowForward} from './assets/arrow-forward.svg'; +import {ReactComponent as Calendar} from './assets/calendar.svg'; import {ReactComponent as Checkmark} from './assets/checkmark.svg'; import {ReactComponent as CompareArrows} from './assets/compare-arrows.svg'; import {ReactComponent as GitHub} from './assets/github.svg'; @@ -33,4 +34,5 @@ export { LinkedIn, Twitter, ArrowForward, + Calendar, }; diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx index 332e1b247b3..6c679a12f3f 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/index.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/index.tsx @@ -236,15 +236,12 @@ const ProfileSelector = ({ error={error} />
-
- {(query.matchers.length > 0 || query.inputMatcherString.length > 0) && viewComponent !== undefined &&
{viewComponent(query.toString())}
}
-
- Date: Wed, 22 Nov 2023 14:49:16 +0100 Subject: [PATCH 02/10] fix styling and relative timepicker input functionality --- .../components/src/DateTimePicker/index.tsx | 8 +-- .../AbsoluteDatePicker/index.tsx | 10 ++-- .../RelativeDatePicker/index.tsx | 58 ++++++++++--------- .../shared/icons/src/assets/calendar.svg | 1 - ui/packages/shared/icons/src/index.tsx | 2 - .../profile/src/MatchersInput/index.tsx | 2 +- .../profile/src/ProfileSelector/index.tsx | 18 +++--- 7 files changed, 47 insertions(+), 52 deletions(-) delete mode 100644 ui/packages/shared/icons/src/assets/calendar.svg diff --git a/ui/packages/shared/components/src/DateTimePicker/index.tsx b/ui/packages/shared/components/src/DateTimePicker/index.tsx index 48f8363ef07..08327e7299e 100644 --- a/ui/packages/shared/components/src/DateTimePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimePicker/index.tsx @@ -13,7 +13,6 @@ import ReactDatePicker from 'react-datepicker'; -import {Calendar} from '@parca/icons'; import {convertLocalToUTCDate, convertUTCToLocalDate} from '@parca/utilities'; interface Props { @@ -27,8 +26,7 @@ const DateTimePicker = ({selected, onChange}: Props): JSX.Element => ( onChange={onChange} showTimeInput dateFormat="yyyy-MM-dd HH:mm:ss" - className="w-full rounded-md border border-gray-200 p-2 text-sm dark:border-gray-600 dark:bg-gray-900" - showIcon + className="h-[38px] w-full rounded-md border border-gray-200 p-2 text-center text-sm dark:border-gray-600 dark:bg-gray-900" /> ); @@ -38,9 +36,7 @@ export const UTCDateTimePicker = ({selected, onChange}: Props): JSX.Element => ( onChange={date => onChange(date != null ? convertLocalToUTCDate(date) : null)} showTimeInput dateFormat="yyyy-MM-dd HH:mm:ss" - className="w-full rounded-md border border-gray-200 p-2 text-sm dark:border-gray-600 dark:bg-gray-900" - showIcon - icon={} + className="flex h-[38px] w-full rounded-md border border-gray-200 p-2 text-center text-sm dark:border-gray-600 dark:bg-gray-900" /> ); diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx index 9b53b5fa87a..87cd6e23244 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx @@ -39,13 +39,13 @@ const AbsoluteDatePicker = ({ return (
-
+
-
Start
+
Start
date != null && setFrom(date)} />
-
End
+
End
date != null && setTo(date)} />
@@ -56,7 +56,9 @@ const AbsoluteDatePicker = ({ onChange(new RelativeDate(UNITS.HOUR, 6), new RelativeDate(UNITS.HOUR, 0)); }} > -

Use relative range instead

+

+ Use relative range instead +

); diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx index e1b87aaf2dd..8379601160d 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx @@ -80,11 +80,11 @@ const RelativeDatePicker = ({ -
+
-
- { - // parse the input value and check whether it is valid - // if it is valid, set the range - // if it is not valid, set the range to the previous value - - const parsedInput = parseInput(rangeInputString); - - if (parsedInput === null) { - setRangeInputString(`${validRange.value}${unitShort[validRange.unit]}`); - return; - } - const {value, unit} = parsedInput; - setValidRange({value, unit}); - }} - /> -
+ { + setRangeInputString(e.target.value); + }} + onBlur={() => { + const parsedInput = parseInput(rangeInputString); + + // if parsed input is not valid, set input to the previous valid value + if (parsedInput === null) { + setRangeInputString(`${validRange.value}${unitShort[validRange.unit]}`); + return; + } + + // if parsed input is valid, set valid range state + const {value, unit} = parsedInput; + setValidRange({value, unit}); + }} + />
); diff --git a/ui/packages/shared/icons/src/assets/calendar.svg b/ui/packages/shared/icons/src/assets/calendar.svg deleted file mode 100644 index a55eccacc9f..00000000000 --- a/ui/packages/shared/icons/src/assets/calendar.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ui/packages/shared/icons/src/index.tsx b/ui/packages/shared/icons/src/index.tsx index 4f869593800..723388a299d 100644 --- a/ui/packages/shared/icons/src/index.tsx +++ b/ui/packages/shared/icons/src/index.tsx @@ -13,7 +13,6 @@ import CloseIcon from './CloseIcon'; import {ReactComponent as ArrowForward} from './assets/arrow-forward.svg'; -import {ReactComponent as Calendar} from './assets/calendar.svg'; import {ReactComponent as Checkmark} from './assets/checkmark.svg'; import {ReactComponent as CompareArrows} from './assets/compare-arrows.svg'; import {ReactComponent as GitHub} from './assets/github.svg'; @@ -34,5 +33,4 @@ export { LinkedIn, Twitter, ArrowForward, - Calendar, }; diff --git a/ui/packages/shared/profile/src/MatchersInput/index.tsx b/ui/packages/shared/profile/src/MatchersInput/index.tsx index a4493d2fde8..48341264900 100644 --- a/ui/packages/shared/profile/src/MatchersInput/index.tsx +++ b/ui/packages/shared/profile/src/MatchersInput/index.tsx @@ -197,7 +197,7 @@ const MatchersInput = ({
-
-
+
+
-
-
+
+
{(query.matchers.length > 0 || query.inputMatcherString.length > 0) && viewComponent !== undefined &&
{viewComponent(query.toString())}
} @@ -249,12 +249,10 @@ const ProfileSelector = ({ currentQuery={query} />
-
- -
+ {!searchDisabled && ( <> From 7d24115ae263b361cac07450a0b7ec3e1eef8d1e Mon Sep 17 00:00:00 2001 From: monicawoj Date: Wed, 22 Nov 2023 15:13:34 +0100 Subject: [PATCH 03/10] send request immediately on time range change --- .../shared/profile/src/ProfileSelector/index.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx index ccfded8cc43..34b75cafc5e 100644 --- a/ui/packages/shared/profile/src/ProfileSelector/index.tsx +++ b/ui/packages/shared/profile/src/ProfileSelector/index.tsx @@ -100,6 +100,7 @@ const ProfileSelector = ({ data: profileTypesData, error, } = useProfileTypes(queryClient); + const [isDataLoading, setIsDataLoading] = useState(false); const {heightStyle} = useMetricsGraphDimensions(comparing); const {viewComponent} = useParcaContext(); @@ -108,6 +109,18 @@ const ProfileSelector = ({ ); const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression); + useEffect(() => { + setIsDataLoading(true); + const handleNewTimeRange = async () => { + await setQueryExpression(); + await setIsDataLoading(false); + }; + + handleNewTimeRange(); + }, [timeRangeSelection]); + + console.log(isDataLoading); + useEffect(() => { if (enforcedProfileName !== '') { const [q, changed] = Query.parse(querySelection.expression).setProfileName( @@ -277,7 +290,8 @@ const ProfileSelector = ({
- {querySelection.expression !== undefined && + {isDataLoading !== true && + querySelection.expression !== undefined && querySelection.expression.length > 0 && querySelection.from !== undefined && querySelection.to !== undefined ? ( From 8389218203d57aff442d54f3ee13d208c13b5417 Mon Sep 17 00:00:00 2001 From: monicawoj Date: Wed, 22 Nov 2023 21:29:35 +0100 Subject: [PATCH 04/10] fix metrics graph axis and range incrementer --- .../RelativeDatePicker/index.tsx | 63 ++++++++++++++----- .../profile/src/ProfileSelector/index.tsx | 2 - ui/packages/shared/utilities/src/time.ts | 33 +++++++++- 3 files changed, 77 insertions(+), 21 deletions(-) diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx index 8379601160d..613cfedd380 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx @@ -45,7 +45,7 @@ const presetRanges = [ const NOW = new RelativeDate(UNITS.MINUTE, 0); const parseInput = (input: string): {value: number; unit: string} | null => { - const match = input.match(/(\d+)([smhdwMy])/); + const match = input.match(/(\d+)([mhd])/); if (match == null) { return null; } @@ -71,9 +71,46 @@ const RelativeDatePicker = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [validRange]); - const currentRangeIndex = presetRanges.findIndex( - ({value, unit}) => value === date.value && unit === date.unit - ); + const getMultiplyFactor = unit => { + switch (unit) { + case UNITS.HOUR: + return 60; + case UNITS.DAY: + return 1440; + case UNITS.MINUTE: + default: + return 1; + } + }; + + const getClosestPresetIndex = () => { + const currentPresetIndex = presetRanges.findIndex( + ({value, unit}) => value === date.value && unit === date.unit + ); + + if (currentPresetIndex !== -1) { + return currentPresetIndex; + } + + const presetRangesTotalMinutes = presetRanges.map(({value, unit}) => { + const multiplyFactor = getMultiplyFactor(unit); + return value * multiplyFactor; + }); + + const currentTotalMinutes = getMultiplyFactor(date.unit) * date.value; + const closestPresetIndex = + [...presetRangesTotalMinutes, currentTotalMinutes] + .sort((a, b) => a - b) + .findIndex(totalMinutes => { + return totalMinutes === currentTotalMinutes; + }) - 1; + + return closestPresetIndex; + }; + + const currentPresetIndex = getClosestPresetIndex(); + + console.log(currentPresetIndex, presetRanges[currentPresetIndex]); return (
@@ -83,13 +120,10 @@ const RelativeDatePicker = ({
- {isDataLoading !== true && + {!isDataLoading && querySelection.expression !== undefined && querySelection.expression.length > 0 && querySelection.from !== undefined && From 53e9a1b6157d9528ecfab0c1ce7fae566a2418b1 Mon Sep 17 00:00:00 2001 From: monicawoj Date: Wed, 22 Nov 2023 21:49:22 +0100 Subject: [PATCH 06/10] add back ts expect error declaration --- ui/packages/shared/components/src/Table/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/packages/shared/components/src/Table/index.tsx b/ui/packages/shared/components/src/Table/index.tsx index 15529fcf22f..88ed500cd99 100644 --- a/ui/packages/shared/components/src/Table/index.tsx +++ b/ui/packages/shared/components/src/Table/index.tsx @@ -27,6 +27,7 @@ import cx from 'classnames'; import {useVirtual} from 'react-virtual'; declare module '@tanstack/table-core' { + // @ts-expect-error interface ColumnMeta { align: 'left' | 'right'; } From 39228105723b09697ef31d174fbc2695ef9100f1 Mon Sep 17 00:00:00 2001 From: monicawoj Date: Thu, 23 Nov 2023 13:11:22 +0100 Subject: [PATCH 07/10] remove stray console log --- .../src/DateTimeRangePicker/RelativeDatePicker/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx index 3cc4418348d..b59fe44ed92 100644 --- a/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx +++ b/ui/packages/shared/components/src/DateTimeRangePicker/RelativeDatePicker/index.tsx @@ -117,8 +117,6 @@ const RelativeDatePicker = ({ const currentPresetIndex = getClosestPresetIndex(); - console.log(currentPresetIndex, presetRanges[currentPresetIndex]); - return (