Filtering an application that is using data from useDQL

[johnacreek]

I am developing an app for a user, using useDQL and an DatatablesV2 control. I am trying to create filters on the DatatableV2 using filtering controls (FilterBar), but none of the examples use DQL as a source and I cannot get filtering to work. Does Dynatrace have an example app that filters a DatatableV2 using data from useDQL (UseDqlResult/ResultRecord) type?

[doesterr · Accepted solution]

Hey there,
You are right. None of the existing examples we have uses data from a DQL query as a base.

Here's a minimal example that does pretty much the same as https://developer.dynatrace.com/design/components-preview/filters/FilterBar/#render-filtered-data-in... but uses data from a DQL query as a base.

It fetches logs via DQL, shows them in a DataTableV2, and allows simple filtering of the log level via a TextInput in a FilterBar.

import React from 'react';
import { Flex } from '@dynatrace/strato-components/layouts';
import { DataTableV2 } from '@dynatrace/strato-components-preview/tables';
import { useFilteredData } from '@dynatrace/strato-components-preview/tables';
import { FilterBar } from '@dynatrace/strato-components-preview/filters';
import { TextInput } from '@dynatrace/strato-components-preview/forms';
import { useDql } from '@dynatrace-sdk/react-hooks';

export const App = () => {
  const queryString =
    'fetch logs | fields timestamp, loglevel, content | sort timestamp desc | limit 100';
  const { data } = useDql({ query: queryString });

  function filterFn(filters, entry) {
    const filterValue = filters.loglevel?.value ?? '';
    const loglevelValue =
      typeof entry.loglevel === 'string' ? entry.loglevel : '';
    return (
      !filterValue ||
      loglevelValue.toLowerCase().includes(filterValue.toLowerCase())
    );
  }

  const { onChange, filteredData } = useFilteredData(
    data?.records ?? [],
    filterFn
  );
  return (
    <Flex flexDirection="column" padding={32}>
      <FilterBar onFilterChange={onChange}>
        <FilterBar.Item name="loglevel" label="Log Level">
          <TextInput />
        </FilterBar.Item>
      </FilterBar>
      <DataTableV2
        columns={[
          { id: 'timestamp', header: 'Timestamp', accessor: 'timestamp' },
          { id: 'loglevel', header: 'Log Level', accessor: 'loglevel' },
          {
            id: 'content',
            header: 'Content',
            accessor: 'content',
            width: '2fr',
          },
        ]}
        data={filteredData}
        fullWidth
      />
    </Flex>
  );
};

I hope that helps!