Query and visualize Grail data

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 useDqlQuery hook from the @dynatrace-sdk/react-hooks package in your React component.

import { useDqlQuery } 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 { useDqlQuery } from '@dynatrace-sdk/react-hooks';

const query = 'fetch logs | makeTimeseries count()';

const result = useDqlQuery({
  body: {
    query,
  },
});

3. Add needed imports to visualize the result

You'll visualize the result using the DQLResultConverter and TimeseriesChart components. Before using these, add the following imports:

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

4. Visualize the result

The data structure of the DQL result is incompatible with the charting components out of the box. That's why Strato provides the DQLResultConverter, which converts the result to a format compatible with the TimeseriesChart component. Add the following snippet in the return statement of your component to visualize the data. Additionally, you need to ensure that the chart renders only if the result variable is defined.

{
  result.data && (
    <DQLResultConverter queryResult={result.data} convertTo="timeseries">
      {(data) => <TimeseriesChart variant="bar" data={data}></TimeseriesChart>}
    </DQLResultConverter>
  );
}

The DQLResultConverter component has a queryResult property that takes the DQL query result. You also must use the convertTo property to convert the result into a time series. Then, use the result to render the TimeseriesChart.

Tip

The unusual syntax inside DQLResultConverter is called render props. To learn more, see Render props.

Full code example

src/app/App.tsx

import React from 'react';
import { useDqlQuery } from '@dynatrace-sdk/react-hooks';
import { DQLResultConverter, TimeseriesChart } from '@dynatrace/strato-components-preview';

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

  return (
    <>
      {result.data && (
        <DQLResultConverter queryResult={result.data} convertTo="timeseries">
          {(data) => <TimeseriesChart variant="bar" data={data}></TimeseriesChart>}
        </DQLResultConverter>
      )}
    </>
  );
};

Tip

This operation requires the following scopes:

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

Read more about scopes in this guide.

Related topics

• React
• TypeScript