devpush 0.0.0-stage → 1.0.0-beta.4

package/src/features/servers/server-metric-chart-pending.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from '#devpush/components/ui/skeleton'
+import { LoaderIcon } from 'lucide-react'
+
+export function ServerMetricChartPending({
+  label,
+  latestValue,
+}: {
+  label: string
+  latestValue?: string
+}) {
+  return (
+    <section className="space-y-4 rounded-lg border p-4" aria-busy="true">
+      <div className="flex items-center justify-between gap-4">
+        <h3 className="text-sm font-medium text-muted-foreground">{label}</h3>
+        {latestValue === undefined ? (
+          <Skeleton className="h-5 w-20" />
+        ) : (
+          <p className="font-mono text-sm font-medium tabular-nums">
+            {latestValue}
+          </p>
+        )}
+      </div>
+      <MetricChartLoading />
+    </section>
+  )
+}
+
+export function MetricChartLoading() {
+  return (
+    <div
+      role="status"
+      className="flex h-40 items-center justify-center gap-2 text-sm text-muted-foreground"
+    >
+      <LoaderIcon className="size-4 shrink-0 animate-spin motion-reduce:animate-none" />
+      <span>Loading data…</span>
+    </div>
+  )
+}

package/src/features/servers/server-metric-chart.tsx

@@ -0,0 +1,182 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { useEffect, useState } from 'react'
+import { MetricChartLoading } from './server-metric-chart-pending'
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '#devpush/components/ui/chart'
+import type { ChartConfig } from '#devpush/components/ui/chart'
+import type { ServerMetricsSample } from '#devpush/server/servers/monitoring'
+
+const timeFormatter = new Intl.DateTimeFormat('en', {
+  hour: 'numeric',
+  minute: '2-digit',
+})
+const timestampFormatter = new Intl.DateTimeFormat('en', {
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  second: '2-digit',
+})
+
+type TooltipPayload = ReadonlyArray<{
+  payload?: unknown
+}>
+
+export function formatMetricTooltipTimestamp(payload: TooltipPayload) {
+  const point = payload.at(0)?.payload
+  if (!point || typeof point !== 'object' || !('timestamp' in point)) {
+    return null
+  }
+
+  const timestamp = Reflect.get(point, 'timestamp')
+  if (typeof timestamp !== 'number' || !Number.isFinite(timestamp)) {
+    return null
+  }
+
+  return timestampFormatter.format(timestamp)
+}
+
+type MetricSeries = {
+  key: string
+  label: string
+  color: string
+  getValue: (sample: ServerMetricsSample) => number | null
+}
+
+export function ServerMetricChart({
+  domain = [0, 'auto'],
+  formatValue,
+  label,
+  latestValue,
+  points,
+  series,
+  window,
+}: {
+  domain?: [number | 'auto', number | 'auto']
+  formatValue: (value: number | null) => string
+  label: string
+  latestValue: string
+  points: Array<ServerMetricsSample>
+  series: Array<MetricSeries>
+  window: {
+    startedAt: string
+    endedAt: string
+  }
+}) {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const data = points.flatMap((sample) => {
+    const timestamp = new Date(sample.observedAt).getTime()
+    if (!Number.isFinite(timestamp)) {
+      return []
+    }
+    return [
+      Object.fromEntries([
+        ['timestamp', timestamp],
+        ...series.map((item) => [item.key, item.getValue(sample)]),
+      ]),
+    ]
+  })
+  const valueCount = data.filter((point) =>
+    series.some((item) => point[item.key] !== null),
+  ).length
+  const config = Object.fromEntries(
+    series.map((item) => [item.key, { label: item.label, color: item.color }]),
+  ) satisfies ChartConfig
+
+  return (
+    <section className="space-y-4 rounded-lg border p-4">
+      <div className="flex items-center justify-between gap-4">
+        <h3 className="text-sm font-medium text-muted-foreground">{label}</h3>
+        <p className="font-mono text-sm font-medium tabular-nums">
+          {latestValue}
+        </p>
+      </div>
+      {valueCount > 1 && !isMounted ? (
+        <MetricChartLoading />
+      ) : valueCount > 1 ? (
+        <ChartContainer config={config} className="h-40 w-full aspect-auto">
+          <AreaChart
+            accessibilityLayer
+            data={data}
+            margin={{ top: 4, right: 2, bottom: 0, left: 2 }}
+            syncId="server-metrics"
+            syncMethod="index"
+          >
+            <CartesianGrid vertical={false} strokeOpacity={0.35} />
+            <XAxis
+              allowDataOverflow
+              axisLine={false}
+              dataKey="timestamp"
+              domain={[
+                new Date(window.startedAt).getTime(),
+                new Date(window.endedAt).getTime(),
+              ]}
+              minTickGap={72}
+              scale="time"
+              tickCount={3}
+              tickFormatter={(value: number) => timeFormatter.format(value)}
+              tickLine={false}
+              tickMargin={8}
+              type="number"
+            />
+            <YAxis hide domain={domain} type="number" />
+            <ChartTooltip
+              filterNull
+              cursor={{ stroke: 'var(--muted-foreground)', strokeOpacity: 0.5 }}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(_, payload) =>
+                    formatMetricTooltipTimestamp(payload)
+                  }
+                  formatter={(value, name, item) => (
+                    <>
+                      <span
+                        className="size-2.5 shrink-0 rounded-[2px]"
+                        style={{ backgroundColor: item.color }}
+                      />
+                      <div className="flex min-w-36 flex-1 items-center justify-between gap-4">
+                        <span className="text-muted-foreground">
+                          {config[String(name)]?.label ?? name}
+                        </span>
+                        <span className="font-mono font-medium tabular-nums">
+                          {formatValue(Number(value))}
+                        </span>
+                      </div>
+                    </>
+                  )}
+                />
+              }
+            />
+            {series.map((item) => (
+              <Area
+                key={item.key}
+                activeDot={{ r: 3, strokeWidth: 0 }}
+                connectNulls={false}
+                dataKey={item.key}
+                fill={`var(--color-${item.key})`}
+                fillOpacity={0.12}
+                isAnimationActive={false}
+                stroke={`var(--color-${item.key})`}
+                strokeWidth={1.5}
+                type="linear"
+              />
+            ))}
+          </AreaChart>
+        </ChartContainer>
+      ) : (
+        <div className="flex h-40 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
+          {valueCount === 0 ? 'Not reported by agent' : 'Collecting history'}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/features/servers/server-metric-format.ts

@@ -0,0 +1,50 @@
+export function formatPercent(value: number | null) {
+  if (value === null) {
+    return 'Not reported'
+  }
+
+  return `${value.toFixed(1)}%`
+}
+
+export function formatByteRatio(used: number | null, total: number | null) {
+  if (used === null || total === null || total <= 0) {
+    return 'Not reported'
+  }
+
+  return `${formatBytes(used)} / ${formatBytes(total)}`
+}
+
+export function formatBytesPerSecond(value: number | null) {
+  return value === null ? 'Not reported' : `${formatBytes(value)}/s`
+}
+
+export function formatNetworkSummary(
+  received: number | null,
+  sent: number | null,
+) {
+  if (received === null && sent === null) {
+    return 'Not reported'
+  }
+  return `↓ ${formatBytesPerSecond(received)}  ↑ ${formatBytesPerSecond(sent)}`
+}
+
+export function formatBytePercent(used: number | null, total: number | null) {
+  if (used === null || total === null || total <= 0) {
+    return null
+  }
+
+  return (used / total) * 100
+}
+
+export function formatBytes(value: number) {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let current = value
+  let unitIndex = 0
+
+  while (current >= 1024 && unitIndex < units.length - 1) {
+    current /= 1024
+    unitIndex += 1
+  }
+
+  return `${current.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
+}

package/src/features/servers/server-metrics-pending.tsx

@@ -0,0 +1,75 @@
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from '#devpush/components/ui/empty'
+import { ServerMetricChartPending } from './server-metric-chart-pending'
+import {
+  formatPercent,
+  formatByteRatio,
+  formatNetworkSummary,
+} from './server-metric-format'
+import type { ServerMetricsSample } from '#devpush/server/servers/monitoring'
+
+export function ServerMetricsPending({
+  latestMetrics,
+}: {
+  latestMetrics: ServerMetricsSample | null
+}) {
+  const metrics = [
+    {
+      label: 'CPU usage',
+      latestValue: latestMetrics
+        ? formatPercent(latestMetrics.cpuPercent)
+        : undefined,
+    },
+    {
+      label: 'Memory usage',
+      latestValue: latestMetrics
+        ? formatByteRatio(
+            latestMetrics.memoryUsedBytes,
+            latestMetrics.memoryTotalBytes,
+          )
+        : undefined,
+    },
+    {
+      label: 'Disk usage',
+      latestValue: latestMetrics
+        ? formatByteRatio(
+            latestMetrics.diskUsedBytes,
+            latestMetrics.diskTotalBytes,
+          )
+        : undefined,
+    },
+    {
+      label: 'Network traffic',
+      latestValue: latestMetrics
+        ? formatNetworkSummary(
+            latestMetrics.networkReceiveBytesPerSecond,
+            latestMetrics.networkTransmitBytesPerSecond,
+          )
+        : undefined,
+    },
+  ]
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      {metrics.map((metric) => (
+        <ServerMetricChartPending key={metric.label} {...metric} />
+      ))}
+    </div>
+  )
+}
+
+export function ServerMetricsEmpty() {
+  return (
+    <Empty className="min-h-40 border">
+      <EmptyHeader>
+        <EmptyTitle>No metrics reported yet.</EmptyTitle>
+        <EmptyDescription>
+          Metrics will appear after the agent reports host data.
+        </EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  )
+}

package/src/features/servers/server-metrics.tsx

@@ -0,0 +1,136 @@
+import { useQuery } from '@tanstack/react-query'
+import { serverMetricHistoryQueryOptions } from '#devpush/lib/server-context-query'
+import { ServerMetricChart } from './server-metric-chart'
+import {
+  ServerMetricsPending,
+  ServerMetricsEmpty,
+} from './server-metrics-pending'
+import {
+  formatPercent,
+  formatByteRatio,
+  formatNetworkSummary,
+  formatBytePercent,
+  formatBytesPerSecond,
+} from './server-metric-format'
+
+import { Button } from '#devpush/components/ui/button'
+import type { ServerMetricsSample } from '#devpush/server/servers/monitoring'
+
+export function ServerMetrics({
+  serverId,
+  teamSlug,
+  latestMetrics,
+}: {
+  serverId: string
+  teamSlug: string
+  latestMetrics: ServerMetricsSample | null
+}) {
+  const history = useQuery({
+    ...serverMetricHistoryQueryOptions({ serverId, teamSlug }),
+    enabled: latestMetrics !== null,
+  })
+  if (!latestMetrics) return <ServerMetricsEmpty />
+  if (!history.data) {
+    if (history.isError)
+      return (
+        <div role="alert">
+          Unable to load metric history.{' '}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void history.refetch()}
+          >
+            Retry
+          </Button>
+        </div>
+      )
+    return <ServerMetricsPending latestMetrics={latestMetrics} />
+  }
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <ServerMetricChart
+        domain={[0, 100]}
+        label="CPU usage"
+        latestValue={formatPercent(latestMetrics.cpuPercent)}
+        points={history.data.points}
+        formatValue={formatPercent}
+        series={[
+          {
+            key: 'cpu',
+            label: 'CPU',
+            color: 'var(--chart-1)',
+            getValue: (sample) => sample.cpuPercent,
+          },
+        ]}
+        window={history.data.window}
+      />
+      <ServerMetricChart
+        domain={[0, 100]}
+        label="Memory usage"
+        latestValue={formatByteRatio(
+          latestMetrics.memoryUsedBytes,
+          latestMetrics.memoryTotalBytes,
+        )}
+        points={history.data.points}
+        formatValue={formatPercent}
+        series={[
+          {
+            key: 'memory',
+            label: 'Memory',
+            color: 'var(--chart-1)',
+            getValue: (sample) =>
+              formatBytePercent(
+                sample.memoryUsedBytes,
+                sample.memoryTotalBytes,
+              ),
+          },
+        ]}
+        window={history.data.window}
+      />
+      <ServerMetricChart
+        domain={[0, 100]}
+        label="Disk usage"
+        latestValue={formatByteRatio(
+          latestMetrics.diskUsedBytes,
+          latestMetrics.diskTotalBytes,
+        )}
+        points={history.data.points}
+        formatValue={formatPercent}
+        series={[
+          {
+            key: 'disk',
+            label: 'Disk',
+            color: 'var(--chart-1)',
+            getValue: (sample) =>
+              formatBytePercent(sample.diskUsedBytes, sample.diskTotalBytes),
+          },
+        ]}
+        window={history.data.window}
+      />
+      <ServerMetricChart
+        label="Network traffic"
+        latestValue={formatNetworkSummary(
+          latestMetrics.networkReceiveBytesPerSecond,
+          latestMetrics.networkTransmitBytesPerSecond,
+        )}
+        points={history.data.points}
+        formatValue={formatBytesPerSecond}
+        series={[
+          {
+            key: 'received',
+            label: 'Received',
+            color: 'var(--chart-1)',
+            getValue: (sample) => sample.networkReceiveBytesPerSecond,
+          },
+          {
+            key: 'sent',
+            label: 'Sent',
+            color: 'var(--chart-2)',
+            getValue: (sample) => sample.networkTransmitBytesPerSecond,
+          },
+        ]}
+        window={history.data.window}
+      />
+    </div>
+  )
+}