Case Studies & War Stories

Production Patterns

Polling Dashboard

const { data } = useDql({
  query: `timeseries avg(dt.host.cpu.usage), from:-30m`,
  options: { refetchInterval: 30000 }
});

Conditional Queries

const { data } = useDql({
  query: `fetch dt.entity.host | filter id == "${selectedHost}"`,
  options: { enabled: !!selectedHost }  // only run when host selected
});

Error Boundary

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

<ErrorBoundary fallback={<Text>Something went wrong</Text>}>
  <MyComponent />
</ErrorBoundary>

Layout Skeleton

// Show structure immediately, fill data as it loads
<Flex flexDirection="column" gap={16}>
  <TitleBar>...</TitleBar>
  {isLoading ? <ProgressCircle /> : <DataTable ... />}
</Flex>

Multi-Entity Comparison

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

🎉 Apps Course Complete!

You've learned to build full Dynatrace applications — from DOOM to production dashboards. Key skills:

• DQL queries with useDql
• Strato components (DataTable, charts, layouts)
• App functions for external APIs
• Intents for cross-app navigation
• Production patterns (polling, error handling, state)