Drill down in another app

In this section, we'll extend our app's functionality by passing data to other apps using intents.

Send intents

So far, the app gives us an overview of what's happening with the hosts' CPU. However, there's no way to dig deeper into this information. We can use intents to analyze this information further in other apps.

1. Create queries

First, create a couple of queries in the src/app/queries.ts file that our app will send as the intent's payload as follows:

src/app/queries.ts

export const CPU_USAGE_QUERY = `timeseries cpuAvg = avg(dt.host.cpu.usage), by:{dt.entity.host, host.name}
| fieldsRename hostId = dt.entity.host, hostName = host.name
| lookup [
  timeseries {
    idle=avg(dt.host.cpu.idle),
    ioWait=avg(dt.host.cpu.iowait),
    user=avg(dt.host.cpu.user),
    system=avg(dt.host.cpu.system),
    steal=avg(dt.host.cpu.steal)
  },
  by:{dt.entity.host}
  | fieldsAdd idle = arrayAvg(idle), ioWait = arrayAvg(ioWait), user = arrayAvg(user), system = arrayAvg(system), steal = arrayAvg(steal)
  | fieldsAdd other = 100 - idle - ioWait - user - system - steal
], sourceField:hostId, lookupField:dt.entity.host, fields:{idle, ioWait, user, system, steal, other}`;

export const getHostCpuUsageQuery = (hostId: string) => `timeseries {
  idle=avg(dt.host.cpu.idle),
  ioWait=avg(dt.host.cpu.iowait),
  user=avg(dt.host.cpu.user),
  system=avg(dt.host.cpu.system),
  steal=avg(dt.host.cpu.steal)
},
filter:{dt.entity.host == "${hostId}"}
| fieldsAdd other = 100 - idle[] - ioWait[] - user[] - system[] - steal[]`;

export const getHostAvgCpuQuery = (hostId: string) =>
  `timeseries cpuAvg = avg(dt.host.cpu.usage), filter:{dt.entity.host == "${hostId}"}`;

2. Create row action

Then, create a row action in our DataTable and add the IntentButton component with the payload in the HostList component as follows:

src/app/pages/HostList.tsx

import React from 'react';
import { Flex } from '@dynatrace/strato-components/layouts';
import { ProgressCircle } from '@dynatrace/strato-components/content';
import { IntentButton } from '@dynatrace/strato-components/buttons';
import { convertToTimeseries } from '@dynatrace/strato-components-preview/conversion-utilities';
import { TitleBar } from '@dynatrace/strato-components-preview/layouts';
import {
  DataTable,
  TableColumn,
  TableRow,
} from '@dynatrace/strato-components-preview/tables';
import { useDqlQuery } from '@dynatrace-sdk/react-hooks';
import { CPU_USAGE_QUERY, getHostAvgCpuQuery, getHostCpuUsageQuery } from '../queries';
import { Colors } from '@dynatrace/strato-design-tokens';

export const HostList = () => {
  const result = useDqlQuery({
    body: {
      query: CPU_USAGE_QUERY,
    },
  });

  const columns: TableColumn[] = [
    {
      header: 'Host ID',
      accessor: 'hostId',
      autoWidth: true,
    },
    {
      header: 'HostName',
      accessor: 'hostName',
      autoWidth: true,
    },
    {
      id: 'cpuUsage',
      header: 'CPU Usage',
      columnType: 'meterbar',
      accessor: ({ idle, ioWait, user, system, steal, other }) => [
        { name: 'CPU idle', value: idle },
        { name: 'I/O wait', value: ioWait },
        { name: 'CPU user', value: user },
        { name: 'CPU system', value: system },
        { name: 'CPU steal', value: steal },
        { name: 'CPU other', value: other },
      ],
      config: {
        showTooltip: true,
      },
      ratioWidth: 1,
    },
    {
      id: 'avgCpu',
      header: 'Average CPU %',
      columnType: 'sparkline',
      accessor: (row) => (result.data ? convertToTimeseries([row], result.data.types) : []),
      config: {
        color: Colors.Charts.Rainbow.Magenta.Default,
      },
      ratioWidth: 1,
    },
  ];

  return (
    <Flex width="100%" flexDirection="column" justifyContent="center" gap={16}>
      <TitleBar>
        <TitleBar.Title>Hosts Insights</TitleBar.Title>
      </TitleBar>
      {result.isLoading && <ProgressCircle />}
      {result.data && (
        <DataTable data={result.data.records} columns={columns}>
          <DataTable.UserActions>
            <DataTable.RowActions>
              {(row: TableRow) => (
                <IntentButton
                  payload={{
                    'dt.elements': [
                      {
                        'dt.markdown': `# Host ${row.values.hostName} insights`,
                      },
                      {
                        'dt.query': getHostCpuUsageQuery(row.values.hostId),
                        'visualization': 'areaChart',
                      },
                      {
                        'dt.query': getHostAvgCpuQuery(row.values.hostId),
                      },
                    ],
                  }}
                />
              )}
            </DataTable.RowActions>
          </DataTable.UserActions>
          <DataTable.Pagination />
        </DataTable>
      )}
    </Flex>
  );
};

With these lines of code, you've created an app that can interact with other apps using intents.

In the next section, we'll fetch and visualize the data from external APIs.