👾 Boss Level — Module 14

Case Studies & War Stories

Reference

Case Studies: Production Patterns

Real patterns from production Dynatrace apps. These aren't theoretical — they solve problems you'll hit when your app goes beyond a demo.

Pattern 1: Polling Dashboard

Auto-refresh data without user interaction using refetchInterval:

const { data } = useDql({
  body: { query: `timeseries avg(dt.host.cpu.usage), from:-30m` },
  options: { refetchInterval: 30_000 }, // refresh every 30 seconds
});

Combine with a TitleBar.Suffix showing last-updated time so users know the data is live.

Pattern 2: Multi-Entity Comparison

Let users select multiple entities and compare them on one chart:

const [selectedHosts, setSelectedHosts] = useState<string[]>([]);

const filter = selectedHosts.length
  ? `| filter in(dt.entity.host, array(${selectedHosts.map(h => `"${h}"`).join(",")}))`
  : "";

const { data } = useDql({
  body: {
    query: `timeseries avg(dt.host.cpu.usage), by:{dt.entity.host}, from:-2h ${filter}`,
  },
});

Wire selectedHosts to checkboxes in a DataTable for a pick-and-compare UX.

Pattern 3: Error Boundary

Wrap pages in an error boundary so one bad query doesn't crash the whole app:

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<p>Something went wrong. Try refreshing.</p>}>
  <HostExplorer />
</ErrorBoundary>

Pattern 4: Conditional Queries

Only run a query when a dependency is ready:

const { data: hosts } = useDql({
  body: { query: `fetch dt.entity.host | fields entity.name, entity.id | limit 1` },
});

const hostId = hosts?.records?.[0]?.["entity.id"];

const { data: metrics } = useDql({
  body: {
    query: `timeseries avg(dt.host.cpu.usage),
      filter:{dt.entity.host == "${hostId}"},
      from:-24h`,
  },
  options: { enabled: !!hostId },
});

The enabled flag prevents the second query from firing until hostId is available.

Pattern 5: Layout Skeleton

A production-ready page layout template:

import { AppHeader, Page } from "@dynatrace/strato-components";
import { Flex, TitleBar } from "@dynatrace/strato-components";

<Page>
  <Page.Main>
    <Flex flexDirection="column" padding={16} gap={16}>
      <TitleBar>
        <TitleBar.Prefix>Icon</TitleBar.Prefix>
        <TitleBar.Title>Page Title</TitleBar.Title>
        <TitleBar.Subtitle>Description</TitleBar.Subtitle>
        <TitleBar.Suffix>Actions</TitleBar.Suffix>
      </TitleBar>
      {/* Content sections */}
    </Flex>
  </Page.Main>
</Page>

Course Complete

You've gone from zero to a full Dynatrace app. Here's what you covered:

  • Track 1 — Project setup, Strato components, CSP, embedding external content
  • Track 2 — DQL queries, DataTable, charts, timeseries, dashboard layouts
  • Track 3 — App functions, intents, AutomationEngine, deployment
  • Track 4 — Capstone project, advanced patterns, production readiness

The Dynatrace Developer Portal at developer.dynatrace.com has the full API reference, component docs, and sample apps. Build something real.

← Secret Levels