ApmPage

Code

import { ApmPage } from "@fadymondy/nasaq/web";import { useState } from "react";export function Performance({ service, data }: { service: React.ComponentProps<typeof ApmPage>["service"]; data?: React.ComponentProps<typeof ApmPage>["data"] }) {  const [hours, setHours] = useState(6);  return <ApmPage service={service} data={data} app="api.nasaq.dev" targetMs={500} slo={0.01} period={hours} onPeriodChange={setHours} onConnect={async () => {}} onDisconnect={async () => {}} />;}

Monitoring · beta

Live examples and controls: ApmPage in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/apm-page.json

The APM page composes MetricTiles (requests, throughput, p95, error rate), LatencyPercentiles, ErrorRatePanel, a throughput TimeSeriesPanel, and tabs for slow endpoints (EndpointTable) and recent traces (TraceList, with a span waterfall). The window is in hours: period is 1, 6 or 24 by default. Until connected it shows AnalyticsConnect.

When to useCopy Anchor Link

• Watching an API or service after a deploy.
• Finding slow endpoints and failing requests.

When not to useCopy Anchor Link

• Business analytics: use GoogleAnalyticsPage.
• Raw logs: use LogViewer.

ImportCopy Anchor Link

import { ApmPage } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { ApmPage } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Performance({ service, data }: { service: React.ComponentProps<typeof ApmPage>["service"]; data?: React.ComponentProps<typeof ApmPage>["data"] }) {
  const [hours, setHours] = useState(6);
  return <ApmPage service={service} data={data} app="api.nasaq.dev" targetMs={500} slo={0.01} period={hours} onPeriodChange={setHours} onConnect={async () => {}} onDisconnect={async () => {}} />;
}

AnatomyCopy Anchor Link

ApmPage                AnalyticsPageFrame
  MetricTiles
  LatencyPercentiles   + ErrorRatePanel
  TimeSeriesPanel      throughput
  Tabs (underline)     Slow endpoints | Traces

APICopy Anchor Link

ApmPageCopy Anchor Link

ApmDataCopy Anchor Link

summary (requests, throughput, p95, errorRate; each { value, previous?, trend? }), latency, latencySummary?, previousLatencySummary?, errors, previousErrorRate?, topErrors?, throughput (rows of date, rpm), previousThroughput?, endpoints and traces.

ExamplesCopy Anchor Link

Sign-in expired:

import { ApmPage } from "@fadymondy/nasaq/web";

export const Expired = () => (
  <ApmPage
    service={{ id: "apm", name: "Nasaq APM", scopes: [{ id: "apm.read", label: "Read traces and metrics", required: true }], status: "needs-reauth" }}
    period={6}
    onPeriodChange={() => {}}
    onConnect={async () => {}}
    onDisconnect={async () => {}}
  />
);

AccessibilityCopy Anchor Link

The page has one h1; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through labels.

RTL & i18nCopy Anchor Link

• The whole page mirrors; charts run right to left.
• URLs, paths and identifiers stay left-to-right inside Arabic text.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.
• Routes, methods, status codes and span names are left-to-right.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Composed from tokens only; extend with className.

Do / Don'tCopy Anchor Link

• Do pass percentiles in milliseconds and rates as fractions.
• Do attach spans to traces so the waterfall works.
• Don't show averages instead of percentiles.

RelatedCopy Anchor Link

• apm-panels
• metric-tiles
• time-series-panel
• analytics-connect
• log-viewer

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-monitoring-pages-apm--docs