Warp Zones (Intents)

Warp Zones: Intents

Intents are Dynatrace's cross-app navigation system. Your app can send users to Notebooks, Dashboards, or any other app — with pre-filled data. Other apps can navigate to yours the same way.

IntentButton

import { IntentButton } from "@dynatrace/strato-components/buttons";

<IntentButton
  options={{
    recommendedAppId: "dynatrace.notebooks",
    recommendedIntentId: "view-multiple-elements",
  }}
  payload={{
    "dt.elements": [
      {
        "dt.query": `timeseries avg(dt.host.cpu.usage), by:{dt.entity.host}, from:-2h`,
      },
    ],
  }}
>
  Open in Notebooks
</IntentButton>

This opens Dynatrace Notebooks with your DQL query pre-loaded. The user sees the chart immediately — no copy-pasting.

Common Intent Targets

dynatrace.notebooks    + view-multiple-elements  → Open query in Notebooks
dynatrace.dashboards   + view-dashboard           → Open a dashboard
dynatrace.data-explorer + explore-metrics          → Open Data Explorer

Row-Level Drill-Down

Add intent buttons to DataTable rows:

const columns = [
  { accessor: "entity.name", header: "Host" },
  {
    accessor: "actions",
    header: "",
    cell: ({ row }) => (
      <IntentButton
        options={{
          recommendedAppId: "dynatrace.notebooks",
          recommendedIntentId: "view-multiple-elements",
        }}
        payload={{
          "dt.elements": [{
            "dt.query": `timeseries avg(dt.host.cpu.usage),
              filter:{dt.entity.host == "${row.original["entity.id"]}"},
              from:-24h`,
          }],
        }}
      >
        Details
      </IntentButton>
    ),
  },
];

Programmatic Navigation

import { useNavigation } from "@dynatrace-sdk/navigation";

const { navigate } = useNavigation();

navigate("dynatrace.notebooks", {
  intentId: "view-multiple-elements",
  payload: { "dt.elements": [{ "dt.query": "..." }] },
});

Receiving Intents

Register intent handlers in app.config.json so other apps can navigate to yours:

{
  "app": {
    "intents": [
      {
        "intentId": "view-host-details",
        "description": "View detailed host metrics",
        "payloadSchema": {
          "type": "object",
          "properties": {
            "hostId": { "type": "string" }
          }
        }
      }
    ]
  }
}

Then read the incoming payload in your component:

import { useIntentPayload } from "@dynatrace-sdk/react-hooks";

const payload = useIntentPayload();
const hostId = payload?.hostId;

What's Next

In Module 10, we explore AutomationEngine workflows — triggering actions from events and schedules within the platform.