feat: complete Loki query, insights, settings and deployment workflows
Add the Loki query UI, access policies, ingress insights, alert and registry settings, and their backend APIs. Include the related Kubernetes deployment and collector updates required by the integrated application. Validated with go test ./..., npm run build, and npm run lint.
This commit is contained in:
1 parent
f9c6c1d826
commit
2d73661dd1
127 files changed
+8117
-2876
No files matched your search
@@ -0,0 +1,97 @@
|
||||
import { memo } from 'react'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface ResourceField {
|
||||
label: string
|
||||
value: React.ReactNode
|
||||
/** 值提示(截断时 title) */
|
||||
title?: string
|
||||
}
|
||||
|
||||
interface ResourceCardProps {
|
||||
/** 头部图标 */
|
||||
icon: LucideIcon
|
||||
/** 图标配色(text-info/success/warning 等语义 token 类) */
|
||||
iconClassName?: string
|
||||
title: string
|
||||
/** 标题旁附加(如 ready 状态点、uuid) */
|
||||
titleExtra?: React.ReactNode
|
||||
/** 右上角徽章(状态/保留天数等) */
|
||||
badges?: React.ReactNode
|
||||
/** 副标题/描述(单行截断) */
|
||||
description?: string
|
||||
/** 信息字段(两列网格;奇数个最后一项占整行) */
|
||||
fields: ResourceField[]
|
||||
/** 底部状态消息(如错误信息,浅底块) */
|
||||
message?: string
|
||||
/** 底部操作区(border-top 分隔) */
|
||||
actions: React.ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* 资源卡片 — 五大资源页(集群/主机/存储/部署/采集)统一样式:
|
||||
* 图标+标题+徽章 → 描述 → 两列信息网格(label 上 value 下) → 分隔线操作区。
|
||||
* 统一 p-4 内边距、hover 阴影、等高布局(网格内自动对齐)。
|
||||
*/
|
||||
export const ResourceCard = memo(function ResourceCard({
|
||||
icon: Icon,
|
||||
iconClassName = 'text-muted-foreground',
|
||||
title,
|
||||
titleExtra,
|
||||
badges,
|
||||
description,
|
||||
fields,
|
||||
message,
|
||||
actions,
|
||||
}: ResourceCardProps) {
|
||||
return (
|
||||
<Card className="border-border hover:shadow-md transition-shadow h-full">
|
||||
<CardContent className="p-4 flex flex-col gap-3 h-full">
|
||||
{/* 头部:图标 + 标题 + 徽章 */}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-9 h-9 rounded-lg bg-muted/70 flex items-center justify-center shrink-0">
|
||||
<Icon className={cn('size-4', iconClassName)} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="font-medium text-sm text-foreground truncate" title={title}>
|
||||
{title}
|
||||
</h3>
|
||||
{titleExtra}
|
||||
{badges && <span className="ml-auto flex items-center gap-1.5 shrink-0">{badges}</span>}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5" title={description}>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 信息:两列网格(label 灰小字在上,value 在下) */}
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
|
||||
{fields.map((f) => (
|
||||
<div key={f.label} className="min-w-0">
|
||||
<p className="text-muted-foreground leading-4">{f.label}</p>
|
||||
<p className="font-medium text-foreground truncate leading-5" title={f.title}>
|
||||
{f.value}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 状态消息(错误/提示) */}
|
||||
{message && (
|
||||
<p className="rounded-md bg-muted/60 px-2.5 py-1.5 text-xs text-muted-foreground" title={message}>
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 操作区:贴底 */}
|
||||
<div className="flex gap-2 pt-3 border-t border-border mt-auto">{actions}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})
|
||||
Reference in new issue
Block a user