cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Using Timeframe Selector as an input for a DQL query

3ene
Dynatrace Participant
Dynatrace Participant

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: 

3ene_0-1678350471031.png

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.

6 REPLIES 6

Wolfi-Stefan
Dynatrace Participant
Dynatrace Participant

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
Dynatrace Participant
Dynatrace Participant

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
Dynatrace Participant
Dynatrace Participant

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
Dynatrace Participant
Dynatrace Participant

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?

3ene_0-1678373899659.png

 

Wolfi-Stefan
Dynatrace Participant
Dynatrace Participant

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
Dynatrace Participant
Dynatrace Participant

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!

Featured Posts