Boss Fight: Build a Real App

Build a Real App: Host Health Monitor

Combine everything into a multi-tab monitoring app. This is the actual app deployed on the sprint environment:

App.tsx — Tab Navigation

import React from "react";
import { Flex } from "@dynatrace/strato-components/layouts";
import { Tabs, Tab } from "@dynatrace/strato-components/navigation";

export const App = () => (
  <Flex flexDirection="column" padding={16} style={{ height: "100%" }}>
    <Tabs defaultIndex={0}>
      <Tab title="Overview"><OverviewPage /></Tab>
      <Tab title="Services"><ServicesPage /></Tab>
      <Tab title="Processes"><ProcessesPage /></Tab>
      <Tab title="Logs"><LogsPage /></Tab>
      <Tab title="Security"><SecurityPage /></Tab>
    </Tabs>
  </Flex>
);

Required Scopes

{
  "scopes": [
    { "name": "storage:metrics:read", "comment": "Host CPU/memory/disk metrics" },
    { "name": "storage:entities:read", "comment": "Host, service, process entities" },
    { "name": "storage:events:read", "comment": "Problems and Davis events" },
    { "name": "storage:logs:read", "comment": "Log analytics" },
    { "name": "storage:buckets:read", "comment": "Data buckets" },
    { "name": "storage:system:read", "comment": "System data" }
  ]
}