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

Adding timeframe selector in CustomApp

Tanveermd
Participant

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

3 REPLIES 3

chris_cho
Contributor

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

@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

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.

Certified Dynatrace Professional | Certified Dynatrace Services - Observability | Certified Dynatrace Services - App Developer
Dynatrace Partner yourcompass.ca

Featured Posts