React SDK

import { MonitoringProvider, useMetricRange } from '@monitoring/sdk-react';

<MonitoringProvider
  baseUrl="https://api.unimoni.example.com"
  fetchToken={async () => {
    const r = await fetch('/api/dashboard-token').then(r => r.json());
    return { token: r.token, expiresAt: new Date(r.expiresAt) };
  }}
>
  <Widget />
</MonitoringProvider>

function Widget() {
  const { data, loading, error } = useMetricRange('system_cpu_usage_percent', {
    last: '1h',
    step: '15s',
    labels: { host: 'web-01' },
  });
  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;
  return <YourChart series={data!.data.result} />;
}

API

• useMetricRange(metric, opts) — для line/sparkline/table
• useMetricLatest(metric, opts) — для gauge/badge