use controls offered by the user interface to select your query time frame in DQL

[Lejil]

How can I use controls offered by the user interface to select your query time frame in DQL .

I want to change this DQL fetch logs ,from:now() - 5d to use query timeframe from user interface

[dani_coll]

Hi Lejil,
It's possible to do that by using the onChange callback from the TimeframeSelector component to dynamically modify your DQL query string.

Another solution, which in my opinion is simpler because you don't need to modify the DQL query, is to set the defaultTimeframeStart and defaultTimeframeEnd attributes on your useDql hook instead of modifying the DQL query.

Here's a full snippet of the solution

import { useDql } from "@dynatrace-sdk/react-hooks";
import { TimeframeSelector } from "@dynatrace/strato-components-preview/forms";
import { TimeframeV2 } from "@dynatrace/strato-components-preview/core";
import { useState } from "react";
import React from "react";

export const App = () => { 
    const [timeframe, setTimeframe] = useState<TimeframeV2>({
        from: {
            absoluteDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
            value: 'now()-5d',
            type: 'expression',
        },
        to: {
            absoluteDate: new Date().toISOString(),
            value: 'now()',
            type: 'expression',
        },
    });  

    const logsResult = useDql({
        query: 'fetch logs',
        defaultTimeframeStart: timeframe.from.absoluteDate,
        defaultTimeframeEnd: timeframe.to.absoluteDate,
    })


    return (
    <>
        <TimeframeSelector
            value={timeframe}
            onChange={(tf) => {if(tf) setTimeframe(tf)}}
            precision="seconds"
        />
    </>)
}