release: refresh v0.4.8 realtime chart and update fixes

Author: ersinkoc

CHANGELOG.md

@@ -16,9 +16,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - `DNS Resolver Matrix` is now streamlined into a high-signal default view (4 core cards) with optional expand/collapse for secondary metrics.
 - `Query Type Counters` redesigned into a compact footprint to reduce visual noise while preserving quick type distribution visibility.
 - Dashboard control toolbar (refresh/auto/ws chips) is hidden by default and can be toggled from the title area.
+- `Traffic Stability & QPS Over Time` now renders on a 1-second UI heartbeat while keeping backend polling lightweight, reducing chart freeze during high-variance traffic spikes.
 
 ### Performance
 - Default top tracker retention increased to `2000` for clients/domains (`web.top_clients_limit`, `web.top_domains_limit`) to match high-cardinality operational monitoring needs.
+- Time-series aggregation interval moved from 10s to 1s for smoother and more responsive dashboard trend lines.
+
+### Fixed
+- Web update endpoint now handles read-only filesystem installs gracefully and returns a clear operator hint instead of a generic temp-file failure.
 
 ## [0.4.7] - 2026-04-04
 

README.md

@@ -15,14 +15,15 @@
 - **Single binary** — DNS resolver + web dashboard + auth, everything in one 6.8 MB executable
 - **Web dashboard** — Real-time DNS monitoring, cache management, live query stream, dark/light theme
 - **Operator-first dashboard** — Compact high-signal matrix, expandable secondary metrics, and inline cache query modal from top domains
+- **Smooth live charts** — Dashboard trend charts redraw every second to stay responsive during bursty traffic changes
 - **Zero-config start** — Interactive setup wizard on first run, sane defaults for everything
 - **Recursive only** — Navigates root → TLD → authoritative, caches results
 - **RFC compliant** — RFC 1035, 2308, 3596, 4033-4035, 6891, 7858, 8484, 8767, 9114, 9156
 - **DNSSEC validation** — Full signature verification (RSA, ECDSA, ED25519), trust chain from root KSK
 - **DNS blocklist** — Pi-hole style domain blocking with hosts/domain/AdBlock Plus list formats
 - **Secure** — JWT auth, bcrypt passwords, bailiwick enforcement, rate limiting, ACL
 - **Observable** — Prometheus metrics, Zabbix agent, structured logging, WebSocket query stream
-- **Self-updating** — Automatic version check + one-click update from web dashboard
+- **Self-updating** — Automatic version check + one-click update from web dashboard (read-only installs require host-level update/redeploy)
 - **Fast** — Sharded cache, >22M cache reads/sec, <50µs cache hit latency, request coalescing
 
 ## Quick Install
@@ -85,7 +86,7 @@ On first run (no config file), the dashboard shows an interactive setup wizard:
 
 | Page | Description |
 |------|-------------|
-| **Dashboard** | Real-time DNS stats with compact matrix view, expandable secondary metrics, paged Top Clients/Top Domains (up to 2000), and inline domain cache-query modal |
+| **Dashboard** | Real-time DNS stats with compact matrix view, expandable secondary metrics, 1-second chart redraw cadence, paged Top Clients/Top Domains (up to 2000), and inline domain cache-query modal |
 | **Queries** | Live DNS query stream via WebSocket — filterable, pausable, DNSSEC badges, blocked indicators |
 | **Cache** | Cache stats, lookup tool, flush, delete individual entries, negative cache view |
 | **Blocklist** | List management, quick block/unblock, domain check, source stats |

web/api_stats.go

@@ -79,7 +79,8 @@ func (s *AdminServer) handleTimeSeries(w http.ResponseWriter, r *http.Request) {
 	}
 
 	jsonResponse(w, http.StatusOK, map[string]interface{}{
-		"window":  windowStr,
-		"buckets": buckets,
+		"window":         windowStr,
+		"bucket_seconds": int(bucketInterval.Seconds()),
+		"buckets":        buckets,
 	})
 }

web/timeseries.go

@@ -6,8 +6,8 @@ import (
 )
 
 const (
-	bucketInterval = 10 * time.Second
-	maxBuckets     = 360 // 1 hour at 10s intervals
+	bucketInterval = 1 * time.Second
+	maxBuckets     = 3600 // 1 hour at 1s intervals
 )
 
 // Bucket represents an aggregated time-series data point.
@@ -30,7 +30,7 @@ type activeBucket struct {
 	totalLatency float64
 }
 
-// TimeSeriesAggregator collects rolling 1-hour bucketed counters at 10-second intervals.
+// TimeSeriesAggregator collects rolling 1-hour bucketed counters at 1-second intervals.
 type TimeSeriesAggregator struct {
 	mu      sync.Mutex
 	buckets []Bucket

web/ui/src/api/client.ts

@@ -2,7 +2,7 @@ import type {
   TopListResponse,
   NegativeCacheEntry,
   QueryEntry,
-  TimeSeriesBucket,
+  TimeSeriesResponse,
   UpdateInfo,
   BlocklistStats,
   BlocklistListEntry,
@@ -128,7 +128,7 @@ export const api = {
   stats: () => request<Record<string, unknown>>('/api/stats'),
 
   timeseries: (window = '5m') =>
-    request<{ buckets: TimeSeriesBucket[] }>(`/api/stats/timeseries?window=${window}`),
+    request<TimeSeriesResponse>(`/api/stats/timeseries?window=${window}`),
 
   recentQueries: (limit = 50) =>
     request<{ entries: QueryEntry[]; count: number }>(`/api/queries/recent?limit=${limit}`),

web/ui/src/api/types.ts

@@ -44,6 +44,12 @@ export interface TimeSeriesBucket {
   avg_latency_ms: number
 }
 
+export interface TimeSeriesResponse {
+  window?: string
+  bucket_seconds?: number
+  buckets: TimeSeriesBucket[]
+}
+
 export interface SystemProfileResponse {
   hostname: string
   network: {

web/ui/src/pages/DashboardPage.tsx

@@ -25,7 +25,7 @@ import {
   CartesianGrid,
 } from 'recharts'
 import { api } from '@/api/client'
-import type { StatsResponse, TimeSeriesBucket, TopEntry, SystemProfileResponse, CacheEntry, TopListResponse } from '@/api/types'
+import type { StatsResponse, TimeSeriesBucket, TopEntry, SystemProfileResponse, CacheEntry, TopListResponse, TimeSeriesResponse } from '@/api/types'
 import { formatBytes, formatNumber, formatUptime, formatVersion } from '@/lib/utils'
 import { useQueryStream } from '@/hooks/useWebSocket'
 
@@ -58,6 +58,8 @@ const CHART_SERIES_LABELS: Record<ChartSeriesKey, string> = {
 const CHART_SERIES_STORAGE_KEY = 'labyrinth.dashboard.chart_series_visibility'
 const TOP_PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const
 const TOP_WINDOW_LIMIT = 2000
+const CHART_HEARTBEAT_MS = 1000
+const TIMESERIES_POLL_MS = 5000
 
 function movingAverage(values: number[], windowSize = 4): number[] {
   if (values.length === 0) return []
@@ -79,10 +81,6 @@ function ema(values: number[], alpha = 0.35): number[] {
   return out
 }
 
-function toTenSecondBucket(tsMs: number): number {
-  return Math.floor(tsMs / 10_000) * 10_000
-}
-
 function defaultChartSeriesVisibility(): Record<ChartSeriesKey, boolean> {
   return {
     queries: true,
@@ -138,10 +136,12 @@ export default function DashboardPage() {
   const [stats, setStats] = useState<StatsResponse | null>(null)
   const [profile, setProfile] = useState<SystemProfileResponse | null>(null)
   const [timeseries, setTimeseries] = useState<TimeSeriesBucket[]>([])
+  const [bucketSeconds, setBucketSeconds] = useState(10)
   const [timeWindow, setTimeWindow] = useState<TimeWindow>('15m')
   const [topClients, setTopClients] = useState<TopEntry[]>([])
   const [topDomains, setTopDomains] = useState<TopEntry[]>([])
   const [statsSnapshotAtMs, setStatsSnapshotAtMs] = useState(0)
+  const [chartHeartbeatAtMs, setChartHeartbeatAtMs] = useState(() => Date.now())
   const [updatedAt, setUpdatedAt] = useState<Date | null>(null)
   const [autoRefresh, setAutoRefresh] = useState(true)
   const [refreshMs, setRefreshMs] = useState(15000)
@@ -276,13 +276,23 @@ export default function DashboardPage() {
     }
   }, [])
 
+  useEffect(() => {
+    const tick = setInterval(() => {
+      if (document.hidden) return
+      setChartHeartbeatAtMs(Date.now())
+    }, CHART_HEARTBEAT_MS)
+    return () => clearInterval(tick)
+  }, [])
+
   useEffect(() => {
     let cancelled = false
     const fetchTimeseries = async () => {
       try {
-        const tsData = await api.timeseries(timeWindow) as { buckets?: TimeSeriesBucket[] }
+        const tsData = await api.timeseries(timeWindow) as TimeSeriesResponse
         if (cancelled) return
         setTimeseries(tsData?.buckets || [])
+        const secs = Number(tsData?.bucket_seconds)
+        setBucketSeconds(Number.isFinite(secs) && secs > 0 ? secs : 10)
       } catch {
         // keep last timeseries on transient errors
       }
@@ -292,7 +302,7 @@ export default function DashboardPage() {
     const interval = setInterval(() => {
       if (!autoRefresh || document.hidden) return
       void fetchTimeseries()
-    }, 1000)
+    }, TIMESERIES_POLL_MS)
     return () => {
       cancelled = true
       clearInterval(interval)
@@ -333,6 +343,27 @@ export default function DashboardPage() {
     }
   }, [streamQueries])
 
+  const liveSecondStats = useMemo(() => {
+    const now = chartHeartbeatAtMs
+    const cutoff = now - 1_000
+    let queries = 0
+    let errors = 0
+    let latencyTotal = 0
+    for (const q of streamQueries) {
+      const ts = Date.parse(q.ts || '')
+      if (!Number.isFinite(ts) || ts < cutoff || ts > now) continue
+      queries++
+      latencyTotal += Number(q.duration_ms || 0)
+      if (q.blocked || (q.rcode && q.rcode !== 'NOERROR')) errors++
+    }
+    return {
+      bucketMs: Math.floor(now / 1000) * 1000,
+      queries,
+      errors,
+      avgLatencyMs: queries > 0 ? latencyTotal / queries : 0,
+    }
+  }, [streamQueries, chartHeartbeatAtMs])
+
   const streamDelta = useMemo(() => {
     const queryTypeDelta: Record<string, number> = {}
     const rcodeDelta: Record<string, number> = {}
@@ -384,34 +415,70 @@ export default function DashboardPage() {
     : 0
 
   const chartDataRaw = useMemo(() => {
-    return (timeseries || [])
+    const perBucketSeconds = Math.max(1, bucketSeconds)
+    const rows = (timeseries || [])
       .map((b) => {
         const ts = b.timestamp || b.ts || ''
         const tsMs = Date.parse(ts)
-        const bucketMs = Number.isFinite(tsMs) ? toTenSecondBucket(tsMs) : 0
+        const bucketMs = Number.isFinite(tsMs) ? tsMs : 0
         const queryCount = b.queries || 0
+        const qpsRaw = queryCount / perBucketSeconds
         return {
           ts,
           bucketMs,
-          time: ts ? new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '',
+          time: ts ? new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '',
           queries: queryCount,
           cacheHits: b.cache_hits || 0,
           cacheMisses: b.cache_misses || 0,
           errors: b.errors || 0,
           avgLatencyMs: b.avg_latency_ms || 0,
-          qps: Number((queryCount / 10).toFixed(2)),
+          qpsRaw,
         }
       })
       .filter((row) => row.ts)
       .sort((a, b) => a.bucketMs - b.bucketMs)
-  }, [timeseries])
+    if (streamConnected) {
+      const liveRow = {
+        ts: new Date(liveSecondStats.bucketMs).toISOString(),
+        bucketMs: liveSecondStats.bucketMs,
+        time: new Date(liveSecondStats.bucketMs).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
+        queries: liveSecondStats.queries,
+        cacheHits: 0,
+        cacheMisses: 0,
+        errors: liveSecondStats.errors,
+        avgLatencyMs: liveSecondStats.avgLatencyMs,
+        qpsRaw: liveSecondStats.queries,
+      }
+      if (rows.length === 0) {
+        rows.push(liveRow)
+      } else {
+        const lastIdx = rows.length - 1
+        const last = rows[lastIdx]
+        if (liveRow.bucketMs <= last.bucketMs+perBucketSeconds*1000) {
+          rows[lastIdx] = { ...last, ...liveRow }
+        } else {
+          rows.push(liveRow)
+        }
+      }
+    }
+    const maxPoints = timeWindow === '5m' ? 300 : timeWindow === '15m' ? 900 : 1200
+    if (rows.length <= maxPoints) return rows
+    const stride = Math.ceil(rows.length / maxPoints)
+    const sampled = rows.filter((_, idx) => idx % stride === 0)
+    const last = rows[rows.length - 1]
+    if (sampled[sampled.length - 1]?.bucketMs !== last.bucketMs) sampled.push(last)
+    return sampled
+  }, [timeseries, bucketSeconds, liveSecondStats, streamConnected, timeWindow])
   const trendWindow = timeWindow === '5m' ? 4 : timeWindow === '15m' ? 6 : 8
   const queryTrend = movingAverage(chartDataRaw.map((x) => x.queries), trendWindow)
   const queryEMA = ema(chartDataRaw.map((x) => x.queries), 0.35)
+  const qpsWindowPoints = Math.max(1, Math.round(10 / Math.max(1, bucketSeconds)))
+  const qpsTrend = movingAverage(chartDataRaw.map((x) => x.qpsRaw), qpsWindowPoints)
   const chartData = chartDataRaw.map((x, i) => ({
     ...x,
     queriesTrend: Number((queryTrend[i] || 0).toFixed(2)),
     queriesEMA: Number((queryEMA[i] || 0).toFixed(2)),
+    qps: Number((qpsTrend[i] || 0).toFixed(2)),
   }))
 
   const windowQueries = chartData.reduce((sum, row) => sum + row.queries, 0)
@@ -811,19 +878,19 @@ export default function DashboardPage() {
                       }}
                     />
                     {chartSeriesVisibility.queries && (
-                      <Area yAxisId="q" type="monotone" dataKey="queries" fill="url(#queriesAreaGrad)" stroke="#22d3ee" strokeWidth={1.8} name="Queries" />
+                      <Area yAxisId="q" type="monotone" dataKey="queries" fill="url(#queriesAreaGrad)" stroke="#22d3ee" strokeWidth={1.8} name="Queries" isAnimationActive={false} />
                     )}
                     {chartSeriesVisibility.moving_avg && (
-                      <Line yAxisId="q" type="linear" dataKey="queriesTrend" stroke="#f59e0b" strokeWidth={2.3} dot={false} name="Moving Avg" />
+                      <Line yAxisId="q" type="linear" dataKey="queriesTrend" stroke="#f59e0b" strokeWidth={2.3} dot={false} name="Moving Avg" isAnimationActive={false} connectNulls />
                     )}
                     {chartSeriesVisibility.ema && (
-                      <Line yAxisId="q" type="linear" dataKey="queriesEMA" stroke="#60a5fa" strokeWidth={2} dot={false} strokeDasharray="4 4" name="EMA" />
+                      <Line yAxisId="q" type="linear" dataKey="queriesEMA" stroke="#60a5fa" strokeWidth={2} dot={false} strokeDasharray="4 4" name="EMA" isAnimationActive={false} connectNulls />
                     )}
                     {chartSeriesVisibility.errors && (
-                      <Line yAxisId="q" type="linear" dataKey="errors" stroke="#ef4444" strokeWidth={1.8} dot={false} name="Errors" />
+                      <Line yAxisId="q" type="linear" dataKey="errors" stroke="#ef4444" strokeWidth={1.8} dot={false} name="Errors" isAnimationActive={false} connectNulls />
                     )}
                     {chartSeriesVisibility.qps && (
-                      <Line yAxisId="qps" type="linear" dataKey="qps" stroke="#14b8a6" strokeWidth={2} dot={false} name="QPS" />
+                      <Line yAxisId="qps" type="linear" dataKey="qps" stroke="#14b8a6" strokeWidth={2} dot={false} name="QPS" isAnimationActive={false} connectNulls />
                     )}
                   </ComposedChart>
                 </ResponsiveContainer>