topic Re: Adding timeframe selector in CustomApp in Developer Q&A Forum

Adding timeframe selector in CustomApp

Tanveermd — Mon, 20 Jan 2025 08:28:54 GMT

Hello there, I have created a custom app to display the trend of problems in a bar chart and how are they trending over a period of time side by side, it all looks well when built, but I think I am only able to see last 2 hours of data by default and I wanted to add timeframe selector to control the data display...I have referred https://developer.dynatrace.com/design/components-preview/forms/TimeframeSelector/ but when adding this to the code, it doesn't appear to apply...I am fairly new to ReactJS and need help here pl.

Highlighted in bold is the code I have added referring to the Dynatrace Developer documentation but I no luck so far

import React, { useState } from 'react';
import { Flex } from '@dynatrace/strato-components/layouts';
import { TitleBar } from '@dynatrace/strato-components-preview/layouts';
import { ProgressCircle } from '@dynatrace/strato-components/content';
import { convertToTimeseries } from '@dynatrace/strato-components-preview/conversion-utilities';
import { DataTable,TableColumn } from '@dynatrace/strato-components-preview/tables';
import { useDqlQuery } from '@dynatrace-sdk/react-hooks';
import { PROBLEMS_QUERY } from '../queries';
import { Colors } from '@dynatrace/strato-design-tokens';
import type { TimeframeV2 } from '@dynatrace/strato-components-preview/core';
import { TimeframeSelector } from '@dynatrace/strato-components-preview/forms';

export const ProblemsList = () => {
const result = useDqlQuery({
body: {
query: PROBLEMS_QUERY,
},
});

const Controlled = () => {
const [value, setValue] = useState<TimeframeV2 | null>(null);

return <TimeframeSelector value={value} onChange={setValue} />;
};

const columns: TableColumn[] = [
{
header: 'Event Category',

Thanks

Re: Adding timeframe selector in CustomApp

chris_cho — Mon, 20 Jan 2025 04:22:15 GMT

Hello @Tanveermd ,

Before rendering the DataTable control, you may need to check isLoading property from the result.
If true, show something that is loading the data, once is false, show the DataTable.
You may also consider the examples related to DataTableV2 control.

Re: Adding timeframe selector in CustomApp

imsingh — Tue, 21 Jan 2025 15:28:15 GMT

@Tanveermd You have to pass the value from the timeframe selector to the useDqlQuery hook to make it work, as following:

const queryResult = useDqlQuery({ body: { query: "fetch logs", defaultTimeframeStart: value?.from.absoluteDate, defaultTimeframeEnd: value?.to.absoluteDate, } });

Let me know it works
Indermohan Singh

Re: Adding timeframe selector in CustomApp

MostafaHussein — Thu, 06 Feb 2025 11:25:26 GMT

take in consideration if you've any dependent components like filtration bar form you'll need to save its state before refetch your DQL Query when you change the timeframe value try the below

queries.ts

export const PROBLEMS_QUERY = (timeframeFrom, timeframeTo) => { return `fetch ..problems.. , from:${timeframe}, to:${timeframeTo}` }

ProblemList.tsx

import React, { useState } from 'react'; import { Flex } from '@dynatrace/strato-components/layouts'; import { TitleBar } from '@dynatrace/strato-components-preview/layouts'; import { ProgressCircle } from '@dynatrace/strato-components/content'; import { convertToTimeseries } from '@dynatrace/strato-components-preview/conversion-utilities'; import { DataTable,TableColumn } from '@dynatrace/strato-components-preview/tables'; import { useDqlQuery } from '@dynatrace-sdk/react-hooks'; import { PROBLEMS_QUERY } from '../queries'; import { Colors } from '@dynatrace/strato-design-tokens'; import type { TimeframeV2 } from '@dynatrace/strato-components-preview/core'; import { TimeframeSelector } from '@dynatrace/strato-components-preview/forms'; export const ProblemsList = () => { const [timeframeValue, setTimeframeValue] = useState<TimeframeV2 | null>(null); const [filtrationValues, setFiltraionValues] = useState<object | null>(null); const queryResult = useDqlQuery({ body: { query: PROBLEMS_QUERY(timeframeValue.from, timeframeValue.to) }); const handleProblemFilterChange = (filterValues) => { setFilterValues(filterValues); // the rest of your filtration logic } useEffect(() => { if(filtrationValues !== null) { handleProblemFilterChange(filtrationValues); } }, [queryResult]); return (.. your react components ..) });

without this, every time you change the timeframe values the other dependent components states will be reset to nulls (e.g. problem state) and you've to re-select its old values again.

hope this helps,
Mostafa Hussein.

Re: Adding timeframe selector in CustomApp

zaid-bashir — Mon, 10 Feb 2025 11:33:08 GMT

Hi @Tanveermd

I was also creating one app having same use case, i did it using the below simple steps.
1) Create a hook for state variable as

const [value, setValue] = useState<TimeframeV2 | null>(null);

2) Use TimeFrame Component as below with onChange prop that will help you to get new selected timeframe object and value prop which is an object contains two sub objects from and to.

=======================
from : value.from.value
to: value.to.value

=======================

3)Finally if you have to now give dynamic timeframe to dql query here is the query with null conditions resolved.

const fetchDistinctBizEvents = `fetch bizevents, from:{${value == null ? "now()-24h" : value?.from.value}}, to:{${value == null ? "now()" : value?.to.value}}

Thanks