👾 Boss Level — Module 13

Secret Levels

Tutorial

State Persistence

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

const [timeRange, setTimeRange] = useAppState("timeRange", "-2h");
// Survives page navigation — stored in app context

FilterBar

import { FilterBar, SelectV2 } from "@dynatrace/strato-components/filters";

<FilterBar>
  <SelectV2 value={env} onChange={setEnv}>
    <SelectV2.Option value="prod">Production</SelectV2.Option>
    <SelectV2.Option value="staging">Staging</SelectV2.Option>
  </SelectV2>
</FilterBar>

Toast Notifications

import { showToast } from "@dynatrace/strato-components/notifications";

showToast({ title: "Deployed!", type: "success" });
showToast({ title: "API Error", message: "Connection refused", type: "critical" });

Sheet Overlays

import { Sheet } from "@dynatrace/strato-components/overlays";

<Sheet open={showDetail} onClose={() => setShowDetail(false)}>
  <Sheet.Header>Host Details</Sheet.Header>
  <Sheet.Content>{/* detail content */}</Sheet.Content>
</Sheet>

💡 Sheets slide in from the right — perfect for detail views without leaving the current page.

What's Next

Module 14 — Case studies and production patterns.

← Boss Fight: Build a Real AppCase Studies & War Stories →