topic Re: Using Timeframe Selector as an input for a DQL query in Developer Q&A Forum

Using Timeframe Selector as an input for a DQL query

3ene — Tue, 02 May 2023 13:18:02 GMT

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.

Re: Using Timeframe Selector as an input for a DQL query

Wolfi-Stefan — Tue, 02 May 2023 13:18:47 GMT

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-timeframe-details

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

Re: Using Timeframe Selector as an input for a DQL query

3ene — Thu, 09 Mar 2023 09:43:54 GMT

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?

Re: Using Timeframe Selector as an input for a DQL query

Wolfi-Stefan — Tue, 02 May 2023 13:19:14 GMT

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.

Re: Using Timeframe Selector as an input for a DQL query

3ene — Thu, 09 Mar 2023 14:59:15 GMT

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?

Re: Using Timeframe Selector as an input for a DQL query

Wolfi-Stefan — Thu, 09 Mar 2023 15:52:37 GMT

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.

Re: Using Timeframe Selector as an input for a DQL query

3ene — Fri, 10 Mar 2023 15:02:55 GMT

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!