Adding timeframe selector in CustomApp

[Tanveermd]

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

[chris_cho]

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.

[imsingh · Accepted solution]

@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

[MostafaHussein]

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.

[zaid-bashir]

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

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

<TimeframeSelector style={{ alignItems: "right" }} value={value} onChange={setValue} />

 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