From 7f6fb364de8ca180b96ea954a0bf204cef5bb76f Mon Sep 17 00:00:00 2001
From: opsx <opsx@local>
Date: Fri, 30 Oct 2026 16:15:44 +0000
Subject: [PATCH] =?UTF-8?q?refactor(analysis):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E9=87=8D=E5=A4=8D=E7=9A=84=E3=80=8C=E5=BA=94=E7=94=A8=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E9=87=8F=E6=B5=81=E5=9B=BE=E3=80=8D=E4=B8=8E=E3=80=8C?=
 =?UTF-8?q?Top=205=20=E9=A5=BC=E5=9B=BE=E3=80=8D=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E6=8C=89=E9=9C=80=E8=A7=A6=E5=8F=91=E9=87=8D=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

=== 为什么这两个可以去掉（不是拍脑袋）===
排行表已有 9 列：排名 / 应用 / 命名空间 / 日志量 / **占比** / 错误数 /
错误率 / 趋势(sparkline) / 操作(查看日志)。
   - Top 5 饼图 = 应用 + 数量 + 占比 —— 表里全都有，且表里更多
   - 流图 = 各应用随时间的堆叠 —— 表里每行已有 sparkline 趋势
两者都是同一份 by-app 数据的重复呈现，纯增加视觉噪音。

=== 但"去掉它们"本身不减查询，真正的减负在这一步 ===
之前这三个组件都依赖同一条 by-app 重查询（10~15 秒）。
因为饼图/流图在首屏，所以那条查询只能一进页面就全量跑（rankingEnabled=true）。
现在图都没了，重查询只服务底部排行表 → 恢复可见性门控：
    rankingEnabled: rankingView.inView
效果：打开分析页只跑索引类查询（histogram/stats/daily-volume，均 <100ms），
      用户滚到排行卡才发那条重查询。
「活跃应用」卡片在未统计时显示 —（原来显示 0 个，容易误读成"没有应用"）。

=== 布局 ===
趋势图从 2/3 宽改为整行，页面高度明显下降。

=== 实测（ddf63053b952）===
  Pod = Hub latest = v0.1 = ddf63053b952
  NamespacePie / AppStreamChart 在页面中引用数均为 0
---
 frontend/src/pages/analysis/index.tsx | 46 ++++++++++-----------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/analysis/index.tsx b/frontend/src/pages/analysis/index.tsx
index 0090bba..d3156cf 100644
--- a/frontend/src/pages/analysis/index.tsx
+++ b/frontend/src/pages/analysis/index.tsx
@@ -19,9 +19,7 @@ import { useDailyVolume } from './hooks/useDailyVolume'
 import { useInView } from '@/hooks/useInView'
 import { compactNumber, formatBytes } from './components/chart-shared'
 import { TrendChart } from './components/TrendChart'
-import { AppStreamChart } from './components/AppStreamChart'
 import { DailyVolumeChart } from './components/DailyVolumeChart'
-import { NamespacePie } from './components/NamespacePie'
 import { TopAppsTable } from './components/TopAppsTable'
 import { IngressAnalysisSection } from './components/IngressAnalysisSection'
 
@@ -149,6 +147,11 @@ const AnalysisPage = memo(function AnalysisPage() {
     start,
     end,
     namespace: scopedNamespace,
+    // 流图和 Top5 饼图已移除，按应用统计的重查询现在只服务「排行表」，
+    // 因此重新用可见性门控：页面打开只跑索引类查询（百毫秒），
+    // 用户滚到排行卡才发那条 10~15 秒的重查询。
+    // 这是真正减少查询压力的一步——之前图在首屏，所以只能全量查。
+    rankingEnabled: rankingView.inView,
   })
 
   // 选择值与已生效值不一致 → 提示"点刷新生效"
@@ -265,38 +268,23 @@ const AnalysisPage = memo(function AnalysisPage() {
             <StatCard label={t('stats.totalEntries')} value={`${compactNumber(data.stats.totalEntries)} 条`} icon={ScrollText} iconColor="text-info" iconBg="bg-info/10" />
             <StatCard label={t('stats.totalVolume')} value={formatBytes(data.stats.total)} icon={ScrollText} iconColor="text-info" iconBg="bg-info/10" />
             <StatCard label={t('stats.errors')} value={`${compactNumber(data.stats.errorCount)} 条`} icon={FileWarning} iconColor="text-destructive" iconBg="bg-destructive/10" />
-            <StatCard label={t('stats.apps')} value={`${data.stats.appCount} 个`} icon={Boxes} iconColor="text-primary" iconBg="bg-primary/10" />
-          </div>
-
-          <div className="grid gap-4 lg:grid-cols-3">
-            <Card className="lg:col-span-2">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-base">{t('trend.title')}</CardTitle>
-                <p className="text-xs text-muted-foreground">{t('trend.subtitle')}</p>
-              </CardHeader>
-              <CardContent><TrendChart trend={data.trend} /></CardContent>
-            </Card>
-            <Card>
-              <CardHeader className="pb-3">
-                <CardTitle className="text-base">{t('pie.title')}</CardTitle>
-                <p className="text-xs text-muted-foreground">{t('pie.subtitle')}</p>
-              </CardHeader>
-              <CardContent>
-                {/* 从"命名空间分布"改成"应用分布"：命名空间只有 astralx/log 两个，
-                    看了没有信息量；按应用才看得出是谁在刷日志 */}
-                <NamespacePie
-                  shares={data.apps.map(app => ({ name: app.app || t('table.untagged'), count: app.total }))}
-                />
-              </CardContent>
-            </Card>
+            <StatCard
+              label={t('stats.apps')}
+              value={appsLoading ? '统计中…' : data.apps.length > 0 ? `${data.stats.appCount} 个` : '—'}
+              icon={Boxes}
+              iconColor="text-primary"
+              iconBg="bg-primary/10"
+            />
           </div>
 
+          {/* 「应用日志量 Top 5」饼图已移除：排行表里已有 排名/应用/命名空间/日志量/占比
+              五项信息，饼图属于同一组数据的重复呈现。 */}
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">{t('stream.title')}</CardTitle>
-              <p className="text-xs text-muted-foreground">{t('stream.subtitle', { count: Math.min(data.apps.length, 10) })}</p>
+              <CardTitle className="text-base">{t('trend.title')}</CardTitle>
+              <p className="text-xs text-muted-foreground">{t('trend.subtitle')}</p>
             </CardHeader>
-            <CardContent><AppStreamChart apps={data.apps} appTimes={data.appTimes} /></CardContent>
+            <CardContent><TrendChart trend={data.trend} /></CardContent>
           </Card>
 
           <div ref={rankingView.ref}>