v2.7: one render path, one data path — 180d max, no aggregation, no thinning

Removed the entire band/aggregate branch that caused every recent bug: /api/band,
BandSeries, BandRow, bucketRounds, renderBand, the dual-mode chart instance, and the
ALL window. 90d and 180d now go through the same smoke path as 1h; every sample is
returned as stored, no server-side thinning. 177 lines deleted, 16 added.

Verified in a browser: canvas fingerprint changes on every window switch (6h -> 180d
-> 1h -> 90d -> 24h), no JS errors, /api/band returns 404.

Author: githubflyideas

static/index.html

@@ -113,9 +113,8 @@
       <button data-m="1440">24h</button>
       <button data-m="10080">7d</button>
       <button data-m="43200">30d</button>
-      <button data-d="90">3M</button>
-      <button data-d="180">6M</button>
-      <button data-d="300">ALL</button>
+      <button data-m="129600">90d</button>
+      <button data-m="259200">180d</button>
     </div>
     <div class="rng custom">
       <input type="datetime-local" id="customFrom" step="60">
@@ -158,25 +157,15 @@
   const el = $('themeName'); if (el) el.textContent = theme;
 }
 applyTheme();
-let targets = [], current = null, minutes = 360, days = 0, typeFilter = 'all';
+let targets = [], current = null, minutes = 360, typeFilter = 'all';
 
 // Deep link: /#t=NAME&m=1440 — send "this link, this window" to a colleague
 const hp = new URLSearchParams(location.hash.slice(1));
 if (hp.get('m') && [60,360,720,1440].includes(+hp.get('m'))) minutes = +hp.get('m');
 if (hp.get('t')) current = hp.get('t');
 document.querySelectorAll('.rng button[data-m]').forEach(b => b.classList.toggle('on', +b.dataset.m === minutes));
 
-let chart = echarts.init($('chart'));
-let chartMode = null; // 'smoke' | 'band' —— 视图类型切换时销毁重建实例,
-                      // 避免 visualMap 等组件在 notMerge 重建时状态错乱导致图不重绘。
-function useChart(mode) {
-  if (chartMode !== mode) {
-    chart.dispose();
-    chart = echarts.init($('chart'));
-    chartMode = mode;
-  }
-  return chart;
-}
+const chart = echarts.init($('chart'));
 
 async function loadTargets() {
   targets = await (await fetch('/api/targets')).json() || [];
@@ -194,7 +183,7 @@
   if ((!current || !visible.some(t => t.name === current)) && visible.length) current = visible[0].name;
 }
 
-let sel = null; // {from,to} 框选时间段(unix 秒)
+let sel = null; // {from,to} 自定义查询区间(unix 秒)
 let renderSeq = 0;
 let rendering = false; // 一次渲染(含慢速 band 查询)是否仍在进行
 async function render() {
@@ -211,8 +200,7 @@
   await loadTargets();
   const t = targets.find(x => x.name === current);
   if (!t) return;
-  if (!sel && days > 0) { await renderBand(t, seq); return; }
-  let url = `/api/series?target=${encodeURIComponent(current)}&maxpts=12000`;
+  let url = `/api/series?target=${encodeURIComponent(current)}`;
   if (sel) url += `&from=${sel.from}&to=${sel.to}`;
   else url += `&minutes=${minutes}`;
   const rounds = await (await fetch(url)).json() || [];
@@ -265,7 +253,7 @@
   $('conclusion').textContent = (t.down ? '🔴 ' : '🟢 ') + `${t.name}: ${win} P99 ${pool.length ? q(.99).toFixed(1) : '–'} ms · loss ${lossPct.toFixed(2)}% · ${bursts} bursts`;
 
   const phos = cssv('--phos');
-  useChart('smoke').setOption({
+  chart.setOption({
     animation: false,
     grid: { left: 52, right: 46, top: 18, bottom: 42 },
     xAxis: { type: 'time', axisLine: { lineStyle: { color: cssv('--grid-axis') } },
@@ -316,13 +304,12 @@
 }
 
 
-document.querySelectorAll('.rng button[data-m], .rng button[data-d]').forEach(b => b.onclick = () => {
+document.querySelectorAll('.rng button[data-m]').forEach(b => b.onclick = () => {
   sel = null; $('selReset').style.display = 'none';
   $('customFrom').value = ''; $('customTo').value = '';
-  document.querySelectorAll('.rng button[data-m], .rng button[data-d]').forEach(x => x.classList.remove('on'));
+  document.querySelectorAll('.rng button[data-m]').forEach(x => x.classList.remove('on'));
   b.classList.add('on');
-  if (b.dataset.d) { days = +b.dataset.d; minutes = 0; }
-  else { minutes = +b.dataset.m; days = 0; }
+  minutes = +b.dataset.m;
   render();
 });
 $('selReset').onclick = () => { sel = null; $('selReset').style.display = 'none'; render(); };
@@ -332,8 +319,8 @@
   const from = Math.floor(new Date(fv).getTime() / 1000);
   const to = Math.floor(new Date(tv).getTime() / 1000);
   if (to <= from) return;
-  document.querySelectorAll('.rng button[data-m], .rng button[data-d]').forEach(x => x.classList.remove('on'));
-  days = 0; minutes = 0;
+  document.querySelectorAll('.rng button[data-m]').forEach(x => x.classList.remove('on'));
+  minutes = 0;
   sel = { from, to };
   $('selReset').style.display = '';
   render();
@@ -371,75 +358,6 @@
 render();
 setInterval(() => { if (!rendering) render(); }, 60000); // 慢查询进行中时跳过本次自动刷新
 // Long windows: smoke is a hot-data privilege — beyond 24h you get the
-// P50 line, a P50–P99 band, loss bars and burst counts from server-side buckets.
-async function renderBand(t, seq) {
-  const rows = await (await fetch(`/api/band?target=${encodeURIComponent(current)}&days=${days}`)).json() || [];
-  if (seq !== renderSeq) return; // 过期响应:已切走,丢弃
-  const p50 = [], band = [], loss = [], bursts = [];
-  let lossW = 0, nSum = 0, burstSum = 0, p99max = 0, p50W = 0, p90W = 0;
-  rows.forEach(r => {
-    const ts = r.t * 1000;
-    p50.push([ts, r.p50]);
-    band.push([ts, r.p50, r.p99]);
-    if (r.loss > 0) loss.push([ts, r.loss]);
-    if (r.b) { bursts.push([ts, Math.min(r.loss, 100), r.b]); burstSum += r.b; }
-    lossW += r.loss * r.n; p50W += r.p50 * r.n; p90W += r.p90 * r.n; nSum += r.n;
-    if (r.p99 > p99max) p99max = r.p99;
-  });
-  const lp = nSum ? lossW / nSum : 0;
-  $('p50').textContent = nSum ? (p50W/nSum).toFixed(1) : '–';
-  $('p90').textContent = nSum ? (p90W/nSum).toFixed(1) : '–';
-  $('p99').textContent = nSum ? p99max.toFixed(1) : '–';
-  $('loss').textContent = lp.toFixed(2); $('loss').className = 'v' + (lp > 1 ? ' bad' : '');
-  $('bursts').textContent = burstSum; $('bursts').className = 'v' + (burstSum ? ' bad' : '');
-  const win = days >= 300 ? 'all' : days >= 30 ? (days/30) + 'M' : days + 'd';
-  $('conclusion').textContent = (t.down ? '🔴 ' : '🟢 ') + `${t.name}: ${win} peak P99 ${p99max.toFixed(1)} ms · loss ${lp.toFixed(2)}% · ${burstSum} bursts`;
-  const phos = cssv('--phos');
-  useChart('band').setOption({
-    animation: false,
-    grid: { left: 52, right: 46, top: 18, bottom: 42 },
-    tooltip: { trigger: 'axis',
-      backgroundColor: cssv('--panel'), borderColor: cssv('--line'),
-      textStyle: { color: cssv('--ink'), fontSize: 11, fontFamily: 'monospace' },
-      formatter: params => {
-        const ts = params[0] && params[0].axisValue;
-        const i = roundInfo[ts];
-        if (!i) return '';
-        let html = `<b>${new Date(+ts).toLocaleTimeString()}</b>`;
-        html += `<br>rtt min/avg/max/mdev = ${i.lo.toFixed(3)}/${i.avg.toFixed(3)}/${i.hi.toFixed(3)}/${i.mdev.toFixed(3)} ms`;
-        html += `<br>median <b>${i.med.toFixed(1)} ms</b> · ${i.n} samples`;
-        html += `<br><span style="color:${i.lp > 0 ? cssv('--alert') : cssv('--dim')}">loss <b>${i.lp.toFixed(0)}%</b> (${i.lost}/${i.s})</span>`;
-        if (i.b) html += ` <span style="color:${cssv('--alert')}">· ◆ burst z=${i.z ? i.z.toFixed(2) : '—'}</span>`;
-        return html;
-      } },
-    xAxis: { type: 'time', axisLine: { lineStyle: { color: cssv('--grid-axis') } },
-             axisLabel: { color: cssv('--dim'), fontSize: 10 }, splitLine: { lineStyle: { color: cssv('--grid-split') } },
-             axisPointer: { show: true, snap: false,
-               lineStyle: { color: cssv('--dim'), opacity: .45 },
-               label: { show: true, backgroundColor: cssv('--panel'), color: cssv('--ink'),
-                        borderColor: cssv('--line'), borderWidth: 1, fontFamily: 'monospace', fontSize: 10,
-                        formatter: p => new Date(p.value).toLocaleTimeString() } } },
-    yAxis: [
-      { type: 'value', name: 'RTT ms', nameTextStyle: { color: cssv('--dim'), fontSize: 10 },
-        axisLabel: { color: cssv('--dim'), fontSize: 10 }, splitLine: { lineStyle: { color: cssv('--grid-split') } } },
-      { type: 'value', max: 100, show: false }
-    ],
-    series: [
-      { type: 'custom', renderItem: (p, api) => {
-          const lo = api.coord([api.value(0), api.value(1)]), hi = api.coord([api.value(0), api.value(2)]);
-          return { type: 'rect', shape: { x: lo[0]-1.5, y: hi[1], width: 3, height: Math.max(lo[1]-hi[1],1) },
-                   style: { fill: cssv('--smoke') } };
-        }, data: band, silent: true },
-      { type: 'line', data: p50, showSymbol: false,
-        lineStyle: { color: phos, width: 1.5, shadowColor: phos, shadowBlur: +cssv('--glow') }, z: 5 },
-      { type: 'bar', yAxisIndex: 1, data: loss, barMaxWidth: 3,
-        itemStyle: { color: cssv('--lossbar') } },
-      { type: 'scatter', yAxisIndex: 1, data: bursts, symbol: 'diamond', symbolSize: 8,
-        itemStyle: { color: cssv('--alert') }, z: 6,
-        tooltip: { formatter: p => `◆ ${p.value[2]} bursts · loss ${p.value[1].toFixed(1)}%` } }
-    ]
-  }, true);
-}
 
 $('themeBtn').onclick = () => {
   theme = THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length];

store.go

@@ -160,68 +160,7 @@ func (s *Store) RemoveTarget(name string) {
 	}
 }
 
-// BandRow: one aggregated bucket for windows beyond the 24h smoke range.
-type BandRow struct {
-	T      int64   `json:"t"`
-	P50    float64 `json:"p50"`
-	P90    float64 `json:"p90"`
-	P99    float64 `json:"p99"`
-	Loss   float64 `json:"loss"`
-	Bursts int     `json:"b,omitempty"`
-	N      int     `json:"n"`
-}
-
-// BandSeries aggregates raw day files into fixed-width buckets. Bucket width is
-// hardcoded per window so long ranges stay cheap: 7d→10min, 30d→30min, 90d→2h,
-// 180d/all→4h. Reading a season of JSONL takes a moment; it is a manual click.
-func (s *Store) BandSeries(name string, days int) []BandRow {
-	bucket := int64(600)
-	switch {
-	case days > 90:
-		bucket = 14400
-	case days > 30:
-		bucket = 7200
-	case days > 7:
-		bucket = 1800
-	}
-	rows := []BandRow{} // never nil
-	for i := days; i >= 0; i-- {
-		day := time.Now().AddDate(0, 0, -i).Format("2006-01-02")
-		rounds, _ := s.readDay(name, day)
-		if len(rounds) == 0 {
-			continue
-		}
-		rows = append(rows, bucketRounds(rounds, bucket)...)
-	}
-	return rows
-}
-
-func bucketRounds(rounds []Round, size int64) []BandRow {
-	buckets := map[int64][]Round{}
-	for _, r := range rounds {
-		k := r.T / size * size
-		buckets[k] = append(buckets[k], r)
-	}
-	keys := make([]int64, 0, len(buckets))
-	for k := range buckets {
-		keys = append(keys, k)
-	}
-	sort.Slice(keys, func(i, j int) bool { return keys[i] < keys[j] })
-	out := make([]BandRow, 0, len(keys))
-	for _, k := range keys {
-		st := calcStats(buckets[k])
-		out = append(out, BandRow{T: k, P50: round2(st.P50), P90: round2(st.P90),
-			P99: round2(st.P99), Loss: round2(st.LossPct), Bursts: st.Bursts, N: st.Rounds})
-	}
-	return out
-}
-
-// ReadRange returns raw rounds in [from,to]. It reads the in-memory ring when the
-// range is recent, else falls back to per-day files on disk — so smoke can render
-// for any window inside the retention period, not just the last 24h.
-// maxPts>0 thins the result to about that many samples (stride keep) so a 30-day
-// window doesn't ship millions of points the browser can't draw.
-func (s *Store) ReadRange(name string, from, to int64, maxPts int) []Round {
+func (s *Store) ReadRange(name string, from, to int64) []Round {
 	var rounds []Round
 	// ring first (covers the recent tail cheaply)
 	s.mu.RLock()
@@ -249,28 +188,6 @@ func (s *Store) ReadRange(name string, from, to int64, maxPts int) []Round {
 			out = append(out, r)
 		}
 	}
-	return thin(out, maxPts)
-}
-
-// thin keeps roughly maxPts rounds by uniform stride. Rounds flagged as bursts are
-// always kept — an anomaly must never be sampled away.
-func thin(rounds []Round, maxPts int) []Round {
-	if rounds == nil {
-		return []Round{} // never nil: JSON null blanks the chart
-	}
-	if maxPts <= 0 || len(rounds) <= maxPts {
-		return rounds
-	}
-	stride := (len(rounds) + maxPts - 1) / maxPts // ceil: 保证抽样后不超过 maxPts(突发除外)
-	if stride < 1 {
-		stride = 1
-	}
-	out := make([]Round, 0, maxPts+64)
-	for i, r := range rounds {
-		if i%stride == 0 || r.B {
-			out = append(out, r)
-		}
-	}
 	return out
 }
 

web.go

@@ -152,35 +152,23 @@ func serveWeb(cfg *Config, store *Store, users map[string]string) error {
 	}))
 
 	// raw rounds for smoke. Supports either minutes=N (recent window) or from/to unix
-	// (arbitrary range, e.g. box-select). maxpts thins long ranges to stay drawable.
+	// (arbitrary range). No thinning: every sample is returned as stored.
 	mux.HandleFunc("/api/series", guard(func(w http.ResponseWriter, r *http.Request) {
 		q := r.URL.Query()
 		name := q.Get("target")
 		from, _ := strconv.ParseInt(q.Get("from"), 10, 64)
 		to, _ := strconv.ParseInt(q.Get("to"), 10, 64)
-		maxpts, _ := strconv.Atoi(q.Get("maxpts"))
-		if maxpts <= 0 || maxpts > 40000 {
-			maxpts = 12000 // ~one screen of smoke; keeps the browser smooth
-		}
 		if from == 0 || to == 0 {
 			minutes, _ := strconv.Atoi(q.Get("minutes"))
-			if minutes <= 0 || minutes > 43200 { // up to 30-day hot window
+			if minutes <= 0 || minutes > 259200 { // up to 180 days
 				minutes = 360
 			}
 			to = time.Now().Unix()
 			from = to - int64(minutes)*60
 		}
-		writeJSON(w, store.ReadRange(name, from, to, maxpts))
+		writeJSON(w, store.ReadRange(name, from, to))
 	}))
 
-	// aggregated buckets for long windows (7d/1M/3M/6M/all)
-	mux.HandleFunc("/api/band", guard(func(w http.ResponseWriter, r *http.Request) {
-		days, _ := strconv.Atoi(r.URL.Query().Get("days"))
-		if days <= 0 || days > 300 {
-			days = 300
-		}
-		writeJSON(w, store.BandSeries(r.URL.Query().Get("target"), days))
-	}))
 
 	return http.ListenAndServe(cfg.Listen, mux)
 }