Query and visualize Grail data

• How to
• 2 minutes

The Strato Design System offers multiple out-of-the-box components to visualize time-series data. This guide walks you through the steps to query data via Dynatrace Query Language (DQL) and display it in a chart. If you're interested, you can skip ahead and check out the code example at the end of this page.

Tip

Read more about DQL

1. Import DQL query hook

Import the useDql hook from the @dynatrace-sdk/react-hooks package in your React component.

import { useDql } from '@dynatrace-sdk/react-hooks';

Tip

Alternatively, you can use the queryExecutionClient from the @dynatrace-sdk/client-query package. To learn more, visit Storage – Query Service.

2. Define and execute your query

Define the query you want to execute in your component body. In this example, you'll query logs and chart the count of records over time:

import { useDql } from '@dynatrace-sdk/react-hooks';

export const App = () => {
  const query = 'fetch logs | makeTimeseries count()';

  const result = useDql({
    query,
  });
};

3. Add imports to visualize result

Visualize the result using the convertToTimeseries function and the TimeseriesChart component. First, add the following imports:

import { convertToTimeseries, TimeseriesChart } from '@dynatrace/strato-components-preview/charts';

4. Visualize result

The data structure of the DQL result is incompatible with the charting components out of the box. That's why Strato provides the convertToTimeseries function, which makes the result compatible with the TimeseriesChart component. Add the following snippet in the return statement to visualize the data. Make sure the chart renders only if the result variable is defined.

{
  result && <TimeseriesChart variant="bar" data={convertToTimeseries(result.data.records, result.data.types)} />;
}

The convertToTimeseries function takes two parameters: the records from the DQL result and the field types. Once converted into a time series, you can use the result to render the TimeseriesChart.

Full code example

ui/app/App.tsx

import React from 'react';
import { useDql } from '@dynatrace-sdk/react-hooks';
import { convertToTimeseries, TimeseriesChart } from '@dynatrace/strato-components-preview/charts';

export const App = () => {
  const query = 'fetch logs | makeTimeseries count()';
  const result = useDql({
    query,
  });

  return result && <TimeseriesChart variant="bar" data={convertToTimeseries(result.data.records, result.data.types)} />;
};

Tip

This operation requires the following scopes:

• storage:buckets:read
• storage:logs:read

Read more about scopes in this guide.

Related topics

• React
• TypeScript