19 Jan 2025
04:33 PM
- last edited on
20 Jan 2025
08:28 AM
by
MaciejNeumann
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
20 Jan 2025 04:22 AM
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.
21 Jan 2025 03:28 PM
@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
06 Feb 2025 11:07 AM - edited 06 Feb 2025 11:25 AM
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.