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
This commit is contained in:
1 parent
53c7d64b35
commit
a32f93f533
12 files changed
+265
-97
No files matched your search
@@ -67,12 +67,15 @@ func TestGeneratedLokiConfigKeepsRequiredSettingsWithoutDefaults(t *testing.T) {
|
||||
// loki_config.go 里对 s3/oss/minio/cos/obs 刻意把 compactor 的删除请求存到
|
||||
// 本地盘(见该处注释),避免各云 S3 兼容实现差异导致 compactor 启动失败。
|
||||
// loki_object_store_test.go 断言的也是 filesystem —— 两处必须一致。
|
||||
for _, required := range []string{"retention_period: 2160h", "retention_enabled: true", "delete_request_store: filesystem", "bucketnames: logs", "store: tsdb", "schema: v13"} {
|
||||
for _, required := range []string{"retention_period: 2160h", "retention_enabled: true", "delete_request_store: filesystem", "retention_delete_delay: 10m", "bucketnames: logs", "store: tsdb", "schema: v13"} {
|
||||
if !strings.Contains(config, required) {
|
||||
t.Fatalf("required setting %q missing", required)
|
||||
}
|
||||
}
|
||||
for _, defaultSetting := range []string{"http_listen_port:", "grpc_listen_port:", "chunk_idle_period:", "compaction_interval:", "retention_delete_delay:", "max_entries_limit_per_query:", "frontend_worker:", "chunk_store_config:", "autoforget_unhealthy:"} {
|
||||
// 注意:retention_delete_delay 已从"不该出现"清单移除 —— 现在**有意**配置为 10m。
|
||||
// 默认 2h 会让对象存储里多留 2 小时数据(实测桶内超期对象一度占 24.6GB),
|
||||
// 预发环境用 10m 既保留安全窗口又不白付存储费。
|
||||
for _, defaultSetting := range []string{"http_listen_port:", "grpc_listen_port:", "chunk_idle_period:", "compaction_interval:", "max_entries_limit_per_query:", "frontend_worker:", "chunk_store_config:", "autoforget_unhealthy:"} {
|
||||
if strings.Contains(config, defaultSetting) {
|
||||
t.Fatalf("unnecessary setting %q remained", defaultSetting)
|
||||
}
|
||||
|
||||
@@ -23,10 +23,11 @@ import (
|
||||
"lokistack/repository"
|
||||
)
|
||||
|
||||
// maxLogQueryLimit 单页硬上限。依据:实测每条日志约 671B——
|
||||
// 1000 条 ≈ 655KB 响应;而前端结果表**没有虚拟滚动**,1000 行会全部渲染成
|
||||
// DOM 节点导致卡顿。前端下拉只给到 1000,超过会被这里静默收敛。
|
||||
const maxLogQueryLimit = 1000
|
||||
// maxLogQueryLimit 单页硬上限,与前端下拉选项保持**完全一致**,
|
||||
// 避免"前端能选 5000、后端静默截成 1000"这种假选项。
|
||||
// 取值 5000 = Loki limits_config.max_entries_limit_per_query 的默认上限;
|
||||
// 前端结果表已加虚拟滚动(>100 条只渲染可视区),5000 行不会卡。
|
||||
const maxLogQueryLimit = 5000
|
||||
const logQueryTimeout = 120 * time.Second
|
||||
|
||||
var lokiHTTPClients = [2]*http.Client{
|
||||
@@ -417,8 +418,13 @@ const (
|
||||
maxHistogramRange = 7 * 24 * time.Hour
|
||||
// 重查询(histogram/metrics)单独的更短超时,避免长时间占用 CPU
|
||||
heavyQueryTimeout = 30 * time.Second
|
||||
// 全局并发重查询上限:超过直接快速失败,保护单实例 Loki
|
||||
maxConcurrentHeavyQueries = 2
|
||||
// 全局并发重查询上限。取 4 而不是 2:
|
||||
// 日志分析页一次会并发 5 条 count_over_time,限制 2 会让大部分请求拿不到令牌。
|
||||
maxConcurrentHeavyQueries = 4
|
||||
// 拿不到令牌时最多排队 10 秒再拒绝。
|
||||
// 原来"立即 429"会把分析页 5 条并发里的 3 条直接打回,
|
||||
// 用户看到的就是"当前有较多日志量统计在进行"。
|
||||
heavyQueryWait = 10 * time.Second
|
||||
)
|
||||
|
||||
// ErrTooManyQueries 并发重查询超限(handler 映射为 429)
|
||||
@@ -427,11 +433,20 @@ var ErrTooManyQueries = errors.New("当前有较多日志量统计在进行,
|
||||
// heavyQuerySem 全局重查询信号量
|
||||
var heavyQuerySem = make(chan struct{}, maxConcurrentHeavyQueries)
|
||||
|
||||
// acquireHeavyQuery 先尝试立即获取;拿不到则最多排队 heavyQueryWait。
|
||||
// 突发(如分析页并发 5 条)会自然排队消化,只有持续超载才返回 429。
|
||||
func acquireHeavyQuery() bool {
|
||||
select {
|
||||
case heavyQuerySem <- struct{}{}:
|
||||
return true
|
||||
default:
|
||||
}
|
||||
timer := time.NewTimer(heavyQueryWait)
|
||||
defer timer.Stop()
|
||||
select {
|
||||
case heavyQuerySem <- struct{}{}:
|
||||
return true
|
||||
case <-timer.C:
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,6 +53,10 @@ compactor:
|
||||
working_directory: /var/lib/loki/compactor
|
||||
retention_enabled: true
|
||||
delete_request_store: {{ .CompactorStoreType }}
|
||||
# 过期 chunk 的「标记 → 真正删除」间隔。默认 2h 会让对象存储里
|
||||
# 多留 2 小时的数据(实测桶内超过保留期的对象一度占到 24.6 GB)。
|
||||
# 预发环境取 10m:既保留短暂的安全窗口,又不会长期占用存储成本。
|
||||
retention_delete_delay: 10m
|
||||
|
||||
limits_config:
|
||||
retention_period: {{ .RetentionPeriod }}h
|
||||
|
||||
@@ -14,6 +14,9 @@ export default {
|
||||
filter: {
|
||||
source: 'Source',
|
||||
sourceEmpty: 'No sources',
|
||||
namespace: 'Namespace',
|
||||
namespaceEmpty: 'Loading namespaces…',
|
||||
namespaceAll: 'All namespaces (slow)',
|
||||
refresh: 'Refresh',
|
||||
},
|
||||
stats: {
|
||||
|
||||
@@ -89,26 +89,25 @@ export default {
|
||||
storageSizeMin: 'Alibaba Cloud ESSD requires at least 20Gi — enter 20Gi or more',
|
||||
},
|
||||
retention: {
|
||||
title: 'Edit Loki Config · {{name}}',
|
||||
title: 'Edit retention policy · {{name}}',
|
||||
locationLabel: 'Config location: ',
|
||||
locationHostBinary: '/etc/loki/loki.yaml → limits_config.retention_period',
|
||||
locationHostDocker: 'Host /etc/lokistack/loki-{{id}}/loki.yaml → limits_config.retention_period',
|
||||
locationK8s: 'ConfigMap {{namespace}}/loki-config → loki.yaml',
|
||||
compactorNote: 'Retention is enforced by the Loki compactor; MinIO only stores the log objects.',
|
||||
liveTitle: 'Full live loki.yaml',
|
||||
liveHint:
|
||||
'Read from the deployment target with storage credentials masked; retention days below are edited separately.',
|
||||
view: 'View Full Config',
|
||||
refresh: 'Refresh',
|
||||
liveHint: 'Read from the deployment target with storage credentials masked.',
|
||||
daysLabel: 'Retention days',
|
||||
daysUnit: 'days',
|
||||
daysConvert: '= {{hours}} hours',
|
||||
daysHint: 'Just enter a number — no YAML needed. Range 1–3650 days.',
|
||||
daysInteger: 'Enter a whole number of days',
|
||||
daysRange: 'Days must be between 1 and 3650',
|
||||
costWarning: 'Keeping {{days}} days grows object-storage usage linearly with retention.',
|
||||
loading: 'Loading…',
|
||||
templateNote: 'Generated by the deployment template',
|
||||
yamlLabel: 'Retention Config YAML',
|
||||
yamlHint: 'Edit retention_period, e.g. 90d / 2160h; only this setting is accepted.',
|
||||
applyHintRunning:
|
||||
'Save only updates the deployment record; Save & Apply redeploys Loki and queries may be briefly interrupted.',
|
||||
applyHintIdle: 'Takes effect on the next deployment.',
|
||||
liveToggle: 'Show the full live loki.yaml (read-only)',
|
||||
applyHintRunning: 'Save & Apply redeploys Loki; log queries may be briefly interrupted (~1 min).',
|
||||
applyHintIdle: 'Saves and deploys this Loki instance immediately.',
|
||||
cancel: 'Cancel',
|
||||
saveOnly: 'Save Only',
|
||||
saveApply: 'Save & Apply',
|
||||
processing: 'Processing…',
|
||||
savedApplied: 'Saved {{days}} days — Loki is being redeployed',
|
||||
|
||||
@@ -13,6 +13,9 @@ export default {
|
||||
filter: {
|
||||
source: '数据源',
|
||||
sourceEmpty: '暂无数据源',
|
||||
namespace: '命名空间',
|
||||
namespaceEmpty: '正在加载命名空间…',
|
||||
namespaceAll: '全部命名空间(较慢)',
|
||||
refresh: '刷新',
|
||||
},
|
||||
stats: {
|
||||
|
||||
@@ -88,7 +88,7 @@ export default {
|
||||
storageSizeMin: '阿里云 ESSD 最小 20Gi,请填 20Gi 或以上',
|
||||
},
|
||||
retention: {
|
||||
title: '编辑 Loki 配置 · {{name}}',
|
||||
title: '编辑保留策略 · {{name}}',
|
||||
locationLabel: '配置位置:',
|
||||
locationHostBinary: '/etc/loki/loki.yaml → limits_config.retention_period',
|
||||
locationHostDocker: '主机 /etc/lokistack/loki-{{id}}/loki.yaml → limits_config.retention_period',
|
||||
@@ -96,16 +96,18 @@ export default {
|
||||
compactorNote: '保留策略由 Loki compactor 执行;MinIO 只负责存储日志对象。',
|
||||
liveTitle: '运行中的完整 loki.yaml',
|
||||
liveHint: '从部署目标读取,存储凭证已遮盖;下方保留天数仍单独编辑。',
|
||||
view: '查看完整配置',
|
||||
refresh: '刷新配置',
|
||||
daysLabel: '保留天数',
|
||||
daysUnit: '天',
|
||||
daysConvert: '= {{hours}} 小时',
|
||||
daysHint: '填一个数字即可,无需写 YAML。范围 1–3650 天。',
|
||||
daysInteger: '请填写整数天数',
|
||||
daysRange: '天数需在 1–3650 之间',
|
||||
costWarning: '保留 {{days}} 天会让对象存储占用随天数线性增长;清空历史日志请谨慎。',
|
||||
loading: '读取中…',
|
||||
templateNote: '由部署模板生成',
|
||||
yamlLabel: '保留配置 YAML',
|
||||
yamlHint: '编辑 retention_period,如 90d / 2160h;仅支持这一项。',
|
||||
applyHintRunning: '仅保存会更新部署记录;保存并应用会重新部署 Loki,查询可能短暂中断。',
|
||||
applyHintIdle: '保存后在下次部署时生效。',
|
||||
liveToggle: '查看运行中的完整 loki.yaml(只读)',
|
||||
applyHintRunning: '保存并应用会重新部署 Loki,查询可能短暂中断(约 1 分钟)。',
|
||||
applyHintIdle: '保存后会立即部署该 Loki 实例。',
|
||||
cancel: '取消',
|
||||
saveOnly: '仅保存',
|
||||
saveApply: '保存并应用',
|
||||
processing: '处理中…',
|
||||
savedApplied: '已保存 {{days}} 天,Loki 正在重新部署',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user