Using Timeframe Selector as an input for a DQL query

[3ene]

Hi,

I'm trying to use a Timeframe Selector (https://developer.dynatrace.com/reference/design-system/preview/forms/TimeframeSelector/) for user input for my DQL query. It's not working as the output of the selector is not compatible with DQL.

Specifically, this is the output of timeframe.from and timeframe.to: 

The DQL editor complains about that because 'now' is a dynamic variable, and DQL queries only work with static ones. Ergo, only now() would work.

Can someone tell me how to do the conversion properly?

Thank you.

[Wolfi-Stefan · Accepted solution]

Hi!

The onChange event returns the actual timestamp values as well, which you can use in your DQL Queries:
https://developer.dynatrace.com/reference/design-system/preview/forms/TimeframeSelector/#get-timefra...

onChange={(timeframe) => {
   setValue(timeframe);
   setTimeframeDetails(timeframe?.details ?? null);
}}

[3ene]

Hi Stefan,

that's cool, but I now run into a different issue: How do I default set TimeframeDetails to now()?

I'd like to run a query immediately on app start and therefore need to have TimeframeDetails already set to now. Is there a way to translate between Timeframe and TimeframeDetails?

[Wolfi-Stefan · Accepted solution]

You can use the parseTime function, which is also used by the TimeframeSelector internally: https://developer.dynatrace.com/reference/design-system/preview/core/utils/parseTime/

The function returns the TimeDetails type.

[3ene]

I just tried it out and unfortunately it doesn't work as parseTime returns a TimeDetails and not a TimeframeDetails object. Can you tell me how to create a TimeframeDetails obj?

[Wolfi-Stefan]

The from and to inside of TimeframeDetails are of the type TimeDetails. You need to call the parser for both, the from and the to.

[3ene · Accepted solution]

There were a couple more bumps in the road, so I want to share my final solution to my problem here. Please note that for my app, I needed to initialize the values of the Timeframe and TimeframeDetail variables upon opening the app, which makes this a little more difficult. I do it with following 2 lines:

const [timeframe, setTimeframe] = React.useState<Timeframe>({from: 'now-7d',to: 'now'});
const [timeframeDetails, setTimeframeDetails] = React.useState<TimeframeDetails>({from: parseTime('now-7d')!, to:parseTime('now')!});

Parsing it into DQL works like this for me:

const queryBase: string = 'fetch events, from: '+JSON.stringify(timeframeDetails?.from.date)+', to:'+JSON.stringify(timeframeDetails?.to.date)

This results in following DQL:

fetch events, from: "2023-03-03T15:01:18.390Z", to:"2023-03-10T15:01:18.390Z" [...]

Thanks, Stefan for helping me figure this out!