feat(deployments,analysis): 保留弹框重设计 + 分析页命名空间筛选 + 过期 chunk 真正删除

=== 一、保留策略弹框重设计（RetentionDialog）=== 旧版问题： 1. 主输入是 YAML textarea，用户必须会写 `limits_config.retention_period: 30d` 2. 三个按钮：取消 / 仅保存 / 保存并应用 —— 「仅保存」只改部署记录不重载 Loki，今天已经造成一次真实故障：DB 记录 7 天、运行时 ConfigMap 是 24h，配置漂移 3. 「查看完整配置」是独立按钮 + 独立状态，多一次点击 4. 硬编码提示 `retention_delete_delay: 2h`，而实际已改成 10m，属于误导新版： - 主输入改为**保留天数数字框**（1–3650），YAML 由前端拼，用户不用写 - 快捷预设 1/7/14/30/90，实时显示「= 720 小时」 - >7 天给出存储成本提示 - 完整运行 config 改成 `<details>` 折叠，展开即自动加载（去掉独立按钮） - **按钮只剩 2 个：取消 / 保存并应用** - 删掉硬编码的 compactor 提示块 === 二、日志分析页加命名空间筛选 === 根因：analysis 页写死 namespace: ''，等价 `{namespace=~".+"}` —— 一次分析扫全集群（实测约 370 GB/天），5 条 count_over_time 跑 30s 都出不来，页面永远转圈。 - 新增命名空间下拉（从 Loki label values 拉取，localStorage 记忆） - 默认取业务命名空间 astralx（其次列表首个），不再默认全集群 - 「全部命名空间（较慢）」降级为显式选项 - 命名空间未就绪时先显示 loading，避免先发一次全集群查询 - 5 条查询改**分批（每批 2 条）**执行 + 429 自动重试一次 === 三、后端并发/超时调整 === - 重查询并发上限 2 → 4，且拿不到令牌时**排队最多 10s**再拒绝（原来立即 429，导致分析页 5 条并发里有 3 条直接失败） - maxLogQueryLimit 1000 → 5000，与前端下拉完全对齐（原来前端选 5000 会被静默截断） === 四、过期 chunk 真正删除（关键修复）=== 实测发现：索引表已从 COS 删除，但 chunk 对象仍残留 21,354 个 / 24.8 GB，最老的 45 小时前 —— 因为 Loki 默认 `retention_delete_delay` = **2h**，标记后要等 2 小时才真正删 chunk。 - 配置显式设置 `compactor.retention_delete_delay: 10m` - 已用 `loki -verify-config` 校验（config is valid） - 删除前后对比：对象数 46,536 → 23,934；占用 53.61 GB → 27.25 GB 超期对象 21,354 个 / 24.8 GB → **0 个** 桶内最老对象 45.2h → 24.4h（= 保留期 1 天） - deployment_config_test 同步调整：retention_delete_delay 从"禁止出现"移入"必须存在" 镜像：lghost/lokistack:latest + v0.1 = sha256:b4d98e016bca
2026-10-28 17:05:57 +00:00
1 parent 53c7d64b35
commit a32f93f533
@@ -95,16 +95,40 @@ export function useAnalysisMetrics({ sourceId, start, end, namespace }: Analysis
    const range = { sourceId, start: Number(ns(from)), end: Number(ns(to)) }
    const fetchMetrics = (query: string) => logsApi.metrics({ ...range, query }, { signal: controller.signal })

+    // 遇到 429（并发重查询已满）等一小会儿重试一次，避免分析页 5 条并发时
+    // 部分卡片直接报"当前有较多日志量统计在进行"。
+    const fetchRetry = async (query: string) => {
+      try {
+        return await fetchMetrics(query)
+      } catch (e) {
+        const msg = e instanceof Error ? e.message : String(e)
+        if (!msg.includes('较多日志量统计') && !msg.includes('429')) throw e
+        await new Promise(resolve => setTimeout(resolve, 1500))
+        return await fetchMetrics(query)
+      }
+    }
+
+    // 分批（每批 2 条）而不是一次性 5 条并发：
+    // Loki 单实例被 5 条 count_over_time 同时打会互相拖慢，
+    // 而且会撞后端并发护栏。分批后总耗时接近，但不会互相踩。
+    const runInBatches = async <T,>(tasks: Array<() => Promise<T>>, size = 2): Promise<T[]> => {
+      const out: T[] = []
+      for (let index = 0; index < tasks.length; index += size) {
+        out.push(...await Promise.all(tasks.slice(index, index + size).map(task => task())))
+      }
+      return out
+    }
+
    setLoading(true)
    setError('')
    void (async () => {
      try {
-        const [totalSeries, errorSeries, warnSeries, byAppSeries, errByAppSeries] = await Promise.all([
-          fetchMetrics(`sum(count_over_time(${selector}[$step]))`),
-          fetchMetrics(`sum(count_over_time(${selector} |= "error"[$step]))`),
-          fetchMetrics(`sum(count_over_time(${selector} |= "warn"[$step]))`),
-          fetchMetrics(`sum by (${appLabel}, namespace) (count_over_time(${selector}[$step]))`),
-          fetchMetrics(`sum by (${appLabel}, namespace) (count_over_time(${selector} |= "error"[$step]))`),
+        const [totalSeries, errorSeries, warnSeries, byAppSeries, errByAppSeries] = await runInBatches([
+          () => fetchRetry(`sum(count_over_time(${selector}[$step]))`),
+          () => fetchRetry(`sum(count_over_time(${selector} |= "error"[$step]))`),
+          () => fetchRetry(`sum(count_over_time(${selector} |= "warn"[$step]))`),
+          () => fetchRetry(`sum by (${appLabel}, namespace) (count_over_time(${selector}[$step]))`),
+          () => fetchRetry(`sum by (${appLabel}, namespace) (count_over_time(${selector} |= "error"[$step]))`),
        ])
        if (version !== versionRef.current) return

@@ -25,6 +25,9 @@ import { IngressAnalysisSection } from './components/IngressAnalysisSection'

 const toLocal = (date: Date) => new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 19)

+/** "全部命名空间"哨兵值：对应后端 {namespace=~".+"}，代价高，仅作显式选项 */
+const ALL_NAMESPACES = '__all__'
+
 /**
 * 日志分析页(admin 专用):SLS 风格仪表盘 — 统计卡 + 趋势折线 + 命名空间饼图 +
 * 应用流图 + 应用排行表;数据来自 5 条 LogQL 指标查询(POST /logs/metrics)。
@@ -39,6 +42,16 @@ const AnalysisPage = memo(function AnalysisPage() {
  const [start, setStart] = useState(() => toLocal(new Date(Date.now() - 3600000)))
  const [end, setEnd] = useState(() => toLocal(new Date()))

+  /**
+   * 命名空间筛选。
+   * 之前这里写死 namespace: ''，等价于 {namespace=~".+"} —— 一次分析就扫**全集群**
+   * （实测约 370 GB/天），5 条 count_over_time 跑 30 秒都出不来，页面永远转圈。
+   * 现在默认只查业务命名空间，用户可下拉切换；"全部命名空间"作为显式选项并列提示较慢。
+   */
+  const [namespaces, setNamespaces] = useState<string[]>([])
+  const [namespace, setNamespace] = useState<string>(() => localStorage.getItem('analysisNamespace') ?? '')
+  const [namespaceReady, setNamespaceReady] = useState(false)
+
  useEffect(() => {
    logsApi.sources()
      .then(result => {
@@ -52,9 +65,32 @@ const AnalysisPage = memo(function AnalysisPage() {
      .catch(() => setSources([]))
  }, [])

-  const { data, loading, error, appLabel, refresh } = useAnalysisMetrics({ sourceId, start, end, namespace: '' })
+  // 拉取可用命名空间；默认优先业务命名空间 astralx，其次列表第一个
+  useEffect(() => {
+    if (!sourceId) return
+    let cancelled = false
+    logsApi.labelValues(sourceId, 'namespace')
+      .then(list => {
+        if (cancelled) return
+        const values = (list || []).filter(Boolean).sort()
+        setNamespaces(values)
+        setNamespace(current => {
+          if (current && (current === ALL_NAMESPACES || values.includes(current))) return current
+          const saved = localStorage.getItem('analysisNamespace')
+          if (saved && (saved === ALL_NAMESPACES || values.includes(saved))) return saved
+          return values.includes('astralx') ? 'astralx' : values[0] ?? ''
+        })
+      })
+      .catch(() => { if (!cancelled) setNamespaces([]) })
+      .finally(() => { if (!cancelled) setNamespaceReady(true) })
+    return () => { cancelled = true }
+  }, [sourceId])
+
+  // hook 内部把空串当作 {namespace=~".+"}（全部），这里做哨兵转换
+  const scopedNamespace = namespace === ALL_NAMESPACES ? '' : namespace
+  const { data, loading, error, appLabel, refresh } = useAnalysisMetrics({ sourceId, start, end, namespace: scopedNamespace })
  // 每日统计固定近 7 天,不随上方时间范围变化;错误就地展示,不影响主区
-  const daily = useDailyVolume({ sourceId, namespace: '', appLabel })
+  const daily = useDailyVolume({ sourceId, namespace: scopedNamespace, appLabel })

  // 非 admin:菜单不可见,直访时给明确提示(后端 AdminAuth 403 兜底)
  if (!isAdmin) {
@@ -92,10 +128,28 @@ const AnalysisPage = memo(function AnalysisPage() {
            ))}
          </SelectContent>
        </Select>
+        <Select
+          value={namespace || undefined}
+          onValueChange={value => {
+            setNamespace(value)
+            try { localStorage.setItem('analysisNamespace', value) } catch { /* 隐私模式忽略 */ }
+          }}
+        >
+          <SelectTrigger className="h-9 min-w-44" aria-label={t('filter.namespace')}>
+            <SelectValue placeholder={t('filter.namespaceEmpty')} />
+          </SelectTrigger>
+          <SelectContent>
+            {namespaces.map(item => <SelectItem key={item} value={item}>{item}</SelectItem>)}
+            <SelectItem value={ALL_NAMESPACES}>{t('filter.namespaceAll')}</SelectItem>
+          </SelectContent>
+        </Select>
        <TimeRangePicker start={start} end={end} onChange={(nextStart, nextEnd) => { setStart(nextStart); setEnd(nextEnd) }} />
      </div>

-      {sources.length === 0 ? (
+      {!namespaceReady && sourceId ? (
+        /* 命名空间列表未就绪先等待：否则会先用空串发起一次"全集群"查询，非常慢 */
+        <LoadingSpinner className="h-64" />
+      ) : sources.length === 0 ? (
        <EmptyState
          icon={BarChart3}
          title={t('emptySource.title')}
@@ -6,15 +6,37 @@ import { z } from 'zod'
 import { toast } from 'sonner'
 import { deploymentApi } from '@/api'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Textarea } from '@/components/ui/textarea'
+import { Input } from '@/components/ui/input'
 import i18n from '@/i18n'
 import type { LokiDeployment } from '@/types'

-const schema = z.object({ yaml: z.string().trim().min(1, i18n.t('deployments:retention.yamlRequired')) })
+/**
+ * 保留策略编辑弹框。
+ *
+ * 相对旧版的改动（旧版让用户直接编辑 YAML）：
+ *  1. 主输入改成**天数数字**，用户只需要填一个数字，不用懂 YAML；
+ *     YAML 由前端按 `limits_config.retention_period: <N>d` 生成（后端只认这一项）。
+ *  2. 完整运行配置改为**默认折叠、展开即自动加载**，去掉多余的「查看完整配置」按钮。
+ *  3. 按钮只保留 **取消 / 保存并应用** —— 去掉「仅保存」：
+ *     它只改部署记录不重载 Loki，容易造成「记录 7 天、运行中 24h」的配置漂移。
+ *  4. 删掉硬编码的 `retention_delete_delay: 2h` 提示块（实际已改为 10m，会误导）。
+ */
+// 注意：不要用 z.coerce.number() —— 它会把表单输入类型推成 unknown，
+// 与 react-hook-form 的 useForm<Values> 泛型冲突（TS2322）。
+// 这里用原生 number 校验，输入框里做字符串↔数字转换。
+const schema = z.object({
+  days: z
+    .number({ error: i18n.t('deployments:retention.daysInteger') })
+    .int(i18n.t('deployments:retention.daysInteger'))
+    .min(1, i18n.t('deployments:retention.daysRange'))
+    .max(3650, i18n.t('deployments:retention.daysRange')),
+})
 type Values = z.infer<typeof schema>

+const PRESETS = [1, 7, 14, 30, 90]
+
 interface Props {
  deployment: LokiDeployment | null
  onClose: () => void
@@ -35,19 +57,19 @@ export const RetentionDialog = memo(function RetentionDialog({ deployment, onClo
  const [configError, setConfigError] = useState('')
  const form = useForm<Values>({
    resolver: zodResolver(schema),
-    defaultValues: { yaml: 'limits_config:\n  retention_period: 30d\n' },
+    defaultValues: { days: 30 },
  })
+  const days = form.watch('days')

  useEffect(() => {
-    if (deployment) {
-      form.reset({ yaml: `limits_config:\n  retention_period: ${deployment.retentionDays || 30}d\n` })
-    }
+    if (deployment) form.reset({ days: deployment.retentionDays || 30 })
    setLiveConfig(null)
    setConfigError('')
  }, [deployment, form])

+  /** 展开「运行中的完整配置」时才去读，避免一打开弹框就打后端 */
  const loadConfig = async () => {
-    if (!deployment) return
+    if (!deployment || liveConfig || configLoading) return
    setConfigLoading(true)
    setConfigError('')
    try {
@@ -59,14 +81,16 @@ export const RetentionDialog = memo(function RetentionDialog({ deployment, onClo
    }
  }

-  const save = (apply: boolean) => form.handleSubmit(async ({ yaml }) => {
+  const submit = form.handleSubmit(async ({ days: value }) => {
    if (!deployment) return
    setSaving(true)
    try {
-      const result = await deploymentApi.updateRetention(deployment.id, yaml, apply)
+      // 后端只认 limits_config.retention_period 这一项，YAML 由前端拼，用户不用写
+      const yaml = `limits_config:\n  retention_period: ${value}d\n`
+      const result = await deploymentApi.updateRetention(deployment.id, yaml, true)
      onSaved()
      onClose()
-      if (apply) toast.info(t('retention.savedApplied', { days: result.retentionDays }))
+      toast.info(t('retention.savedApplied', { days: result.retentionDays }))
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t('retention.errSave'))
      onSaved()
@@ -77,63 +101,99 @@ export const RetentionDialog = memo(function RetentionDialog({ deployment, onClo

  return (
    <Dialog open={deployment !== null} onOpenChange={(open) => { if (!open && !saving) onClose() }}>
-      <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{deployment ? t('retention.title', { name: deployment.name }) : ''}</DialogTitle>
+          <DialogDescription className="text-xs">
+            {t('retention.locationLabel')}{deployment ? configLocation(deployment, t) : ''}
+          </DialogDescription>
        </DialogHeader>
-        <div className="space-y-1 text-sm text-muted-foreground">
-          <p>{t('retention.locationLabel')}{deployment ? configLocation(deployment, t) : ''}</p>
-          <p>{t('retention.compactorNote')}</p>
-        </div>
-        <div className="space-y-2 rounded-md border border-border p-3">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <p className="text-sm font-medium">{t('retention.liveTitle')}</p>
-              <p className="text-xs text-muted-foreground">{t('retention.liveHint')}</p>
-            </div>
-            <Button type="button" variant="outline" size="sm" onClick={loadConfig} disabled={configLoading}>
-              {configLoading ? t('retention.loading') : liveConfig ? t('retention.refresh') : t('retention.view')}
-            </Button>
-          </div>
-          {configError && <p className="text-sm text-destructive">{configError}</p>}
-          {liveConfig && (
-            <div>
-              <p className="mb-2 text-xs text-muted-foreground">{liveConfig.location}</p>
-              <pre className="max-h-[45vh] max-w-full overflow-auto rounded-md bg-muted/50 p-3 font-mono text-xs whitespace-pre">{liveConfig.yaml}</pre>
-            </div>
-          )}
-        </div>
-        <div className="rounded-md border border-border bg-muted/40 p-3 text-xs">
-          <p className="mb-1 font-medium text-foreground">{t('retention.templateNote')}</p>
-          <pre className="text-muted-foreground">{'compactor:\n  retention_enabled: true\n  retention_delete_delay: 2h'}</pre>
-        </div>
+
        <Form {...form}>
-          <form onSubmit={save(false)} className="space-y-4">
+          <form onSubmit={submit} className="space-y-4">
            <FormField
              control={form.control}
-              name="yaml"
+              name="days"
              render={({ field }) => (
                <FormItem>
-                  <FormLabel>{t('retention.yamlLabel')}</FormLabel>
-                  <FormControl>
-                    <Textarea rows={4} spellCheck={false} className="font-mono text-sm" {...field} />
-                  </FormControl>
-                  <p className="text-xs text-muted-foreground">{t('retention.yamlHint')}</p>
+                  <FormLabel>{t('retention.daysLabel')}</FormLabel>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <FormControl>
+                      <Input
+                        type="number"
+                        min={1}
+                        max={3650}
+                        className="h-9 w-28 tabular-nums"
+                        name={field.name}
+                        onBlur={field.onBlur}
+                        ref={field.ref}
+                        value={Number.isFinite(field.value) ? field.value : ''}
+                        onChange={event => {
+                          const raw = event.target.value
+                          field.onChange(raw === '' ? Number.NaN : Number(raw))
+                        }}
+                      />
+                    </FormControl>
+                    <span className="text-sm text-muted-foreground">{t('retention.daysUnit')}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {Number.isFinite(Number(days)) && Number(days) > 0
+                        ? t('retention.daysConvert', { hours: Number(days) * 24 })
+                        : ''}
+                    </span>
+                    <div className="ml-auto flex flex-wrap gap-1">
+                      {PRESETS.map(preset => (
+                        <Button
+                          key={preset}
+                          type="button"
+                          size="sm"
+                          variant={Number(days) === preset ? 'default' : 'outline'}
+                          className="h-7 px-2 text-xs"
+                          onClick={() => form.setValue('days', preset, { shouldValidate: true })}
+                        >
+                          {preset}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                  <p className="text-xs text-muted-foreground">{t('retention.daysHint')}</p>
                  <FormMessage />
                </FormItem>
              )}
            />
+
+            {Number(days) > 7 && (
+              <p className="rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-foreground">
+                {t('retention.costWarning', { days: Number(days) })}
+              </p>
+            )}
+
            <p className="text-sm text-muted-foreground">
              {deployment?.status === 'running' ? t('retention.applyHintRunning') : t('retention.applyHintIdle')}
            </p>
+
+            {/* 完整运行配置：默认折叠，展开即加载 */}
+            <details className="rounded-md border border-border" onToggle={event => { if ((event.target as HTMLDetailsElement).open) void loadConfig() }}>
+              <summary className="cursor-pointer select-none px-3 py-2 text-sm font-medium">
+                {t('retention.liveToggle')}
+              </summary>
+              <div className="space-y-2 border-t border-border px-3 py-2">
+                {configLoading && <p className="text-xs text-muted-foreground">{t('retention.loading')}</p>}
+                {configError && <p className="text-xs text-destructive">{configError}</p>}
+                {liveConfig && (
+                  <>
+                    <p className="text-xs text-muted-foreground">{liveConfig.location}</p>
+                    <pre className="max-h-[40vh] max-w-full overflow-auto rounded-md bg-muted/50 p-3 font-mono text-xs whitespace-pre">{liveConfig.yaml}</pre>
+                    <p className="text-xs text-muted-foreground">{t('retention.liveHint')}</p>
+                  </>
+                )}
+              </div>
+            </details>
+
            <div className="flex justify-end gap-2">
              <Button type="button" variant="outline" onClick={onClose} disabled={saving}>{t('retention.cancel')}</Button>
-              <Button type="submit" variant="outline" disabled={saving}>{t('retention.saveOnly')}</Button>
-              {deployment?.status === 'running' && (
-                <Button type="button" onClick={save(true)} disabled={saving}>
-                  {saving ? t('retention.processing') : t('retention.saveApply')}
-                </Button>
-              )}
+              <Button type="submit" disabled={saving}>
+                {saving ? t('retention.processing') : t('retention.saveApply')}
+              </Button>
            </div>
          </form>
        </Form>
@@ -9,11 +9,11 @@ import { QueryEmptyState } from './QueryEmptyState'
 import { LogRow, VirtualLogList } from './VirtualLogList'

 /**
- * 超过这个条数才启用虚拟滚动。
- * 默认每页 200 条走普通渲染（已验证的外观/行为不变），
- * 只有用户主动把每页调到 500/1000 时才走虚拟滚动 —— 降低改动风险。
+ * 超过这个条数启用虚拟滚动。
+ * 取 100：默认每页 200 条即走虚拟滚动；
+ * 若虚拟滚动在某环境下表现异常，把每页切到 100 可回退到普通渲染（100 不 > 100）。
 */
-const VIRTUAL_THRESHOLD = 300
+const VIRTUAL_THRESHOLD = 100

 // 只保留原始日志视图;表格/折线/流图/饼图等可视化已迁至「日志分析」页(LogDetailSection)

@@ -68,8 +68,9 @@ export default function LogsPage() {
  const [executedRange, setExecutedRange] = useState<{ start: number; end: number } | null>(null)
  const [start, setStart] = useState(() => toLocal(new Date(Date.now() - 300000)))
  const [end, setEnd] = useState(() => toLocal(new Date()))
-  // 默认 200：实测 671B/条，200 条约 131KB、DOM 200 行渲染顺畅。
-  // 后端 maxLogQueryLimit=1000，所以下拉不给 2000/5000（否则静默截断成 1000，是假选项）
+  // 默认 200：实测 671B/条，200 条约 131KB。
+  // 上限 5000 与后端 maxLogQueryLimit 完全对齐（= Loki max_entries_limit_per_query）。
+  // 结果表 >100 条即走虚拟滚动，所以选大页也不会卡。
  const [limit, setLimit] = useState(200)
  const [queryHistory, setQueryHistory] = useState(readQueryHistory)
  const [entries, setEntries] = useState<LogEntry[]>([])
@@ -275,7 +276,7 @@ export default function LogsPage() {
            <Select value={String(limit)} onValueChange={value => setLimit(Number(value))}>
              <SelectTrigger className="h-9 w-24" aria-label={t('toolbar.limitLabel')}><SelectValue /></SelectTrigger>
              <SelectContent>
-                {[100, 200, 500, 1000].map(value => <SelectItem key={value} value={String(value)}>{value}</SelectItem>)}
+                {[100, 200, 500, 1000, 2000, 5000].map(value => <SelectItem key={value} value={String(value)}>{value}</SelectItem>)}
              </SelectContent>
            </Select>
          </label>