feat: opsx-loki 全面升级 — 前端重构/用户与LDAP/部署向导/日志查询
基于 WEB-UI-Development-Guide 标准的整体升级,并更名 LokiDeploy → opsx-loki。 前端(Gin+React+shadcn/ui): - 按 02/07 章重构:页面域化拆分(无超 400 行文件)、PageContainer/ListQuery、 反馈分级(成功静默/失败 toast/危险确认)、401 单飞刷新+队列重放 - 暗色模式(next-themes)+ 语义 Token(--primary 品牌色/success/warning/info) - 部署向导(状态推导四步:环境→存储→Loki→采集,内嵌表单闭环) - 日志查询页:LogQL 标签构建器/拖拽直方图/日志上下文/Live Tail/查询历史 - 按用户+标签策略的查询授权(服务端强制合并策略) 后端(Go+Gin+JSON DB): - 简单用户管理(仅 admin,无 RBAC)+ TokenVersion 会话吊销 + 登录 IP 限流 - LDAP 接入:配置(AES 加密存储/hasPassword 脱敏)/测试连接/批量导入/登录 - 存储配置测试连接(SigV4 零依赖)+ 桶不存在自动创建 - Loki 三模式部署修复:SSH 密钥认证、3.x 配置模板、ruler 对象存储嵌套块、 凭证解密、孤儿 deploying 状态恢复、Grafana 部署(可选默认关)+面板导入 - DaemonSet 采集纯 YAML(去 helm 依赖)+ DNS 自愈回退 ClusterIP + 集群名标签 - 日志查询代理:cluster-svc 经 kube-apiserver proxy/url 直连 + cursor 翻页 - 统一 log 命名空间;部署就绪探活;Grafana 访问地址自动记录 修复:run.sh 增量编译检测、Sanitized 脱敏补全、LokiDeployment Update 白名单、 健康检查 CreatedAt 零值等 10+ 存量 bug。 数据兼容:DB 沿用旧 lokideploy.json(新名优先);localStorage 一次性迁移; HKDF 加密前缀保留(已加密凭证不受影响)。
This commit is contained in:
logan committed
1 parent
327e282356
commit
f9c6c1d826
204 files changed
+14107
-9103
No files matched your search
@@ -0,0 +1,171 @@
|
||||
import { memo, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { Monitor, Plus } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { hostApi, deploymentApi, collectorApi } from '@/api'
|
||||
import { PageContainer } from '@/components/PageContainer'
|
||||
import { LoadingSpinner } from '@/components/LoadingSpinner'
|
||||
import { EmptyState } from '@/components/EmptyState'
|
||||
import { ErrorState } from '@/components/ErrorState'
|
||||
import { PaginationBar } from '@/components/PaginationBar'
|
||||
import { ConfirmDialog } from '@/components/ConfirmDialog'
|
||||
import { toast } from 'sonner'
|
||||
import { useListQuery } from '@/hooks/useListQuery'
|
||||
import type { Host } from '@/types'
|
||||
import { HostCard } from './components/HostCard'
|
||||
import { HostFormDialog } from './components/HostFormDialog'
|
||||
import { HostDetailDialog } from './components/HostDetailDialog'
|
||||
import { TerminalDialog } from './components/TerminalDialog'
|
||||
|
||||
/**
|
||||
* 主机管理页 — 只做编排：数据走 useListQuery（取消+版本号），
|
||||
* 卡片/表单/详情/终端/删除确认均为域内子组件。成功操作静默（列表刷新即反馈）。
|
||||
*/
|
||||
const HostsPage = memo(function HostsPage() {
|
||||
const query = useListQuery<Host>((params, signal) =>
|
||||
hostApi.list(params, { signal })
|
||||
)
|
||||
|
||||
const [formOpen, setFormOpen] = useState(false)
|
||||
const [detailHost, setDetailHost] = useState<Host | null>(null)
|
||||
const [terminalHost, setTerminalHost] = useState<Host | null>(null)
|
||||
const [deleteTarget, setDeleteTarget] = useState<Host | null>(null)
|
||||
const [deleting, setDeleting] = useState(false)
|
||||
const [validating, setValidating] = useState<number | null>(null)
|
||||
|
||||
// 验证后延时刷新列表的定时器（卸载清理）
|
||||
const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
|
||||
useEffect(() => {
|
||||
const timers = timeoutsRef.current
|
||||
return () => {
|
||||
timers.forEach((id) => clearTimeout(id))
|
||||
}
|
||||
}, [])
|
||||
|
||||
const [refCount, setRefCount] = useState<{ dep: number; col: number }>({ dep: 0, col: 0 })
|
||||
useEffect(() => {
|
||||
if (!deleteTarget) return
|
||||
Promise.all([
|
||||
deploymentApi.list({ page: 1, pageSize: 100 }),
|
||||
collectorApi.list({ page: 1, pageSize: 100 }),
|
||||
]).then(([d, c]) => {
|
||||
setRefCount({
|
||||
dep: d.list.filter((x) => x.hostID === deleteTarget.id).length,
|
||||
col: c.list.filter((x) => x.hostID === deleteTarget.id).length,
|
||||
})
|
||||
}).catch(() => setRefCount({ dep: 0, col: 0 }))
|
||||
}, [deleteTarget])
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
const id = deleteTarget?.id
|
||||
if (!id) return
|
||||
setDeleting(true)
|
||||
try {
|
||||
await hostApi.remove(id)
|
||||
setDeleteTarget(null)
|
||||
query.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : '删除主机失败')
|
||||
} finally {
|
||||
setDeleting(false)
|
||||
}
|
||||
}, [deleteTarget, query])
|
||||
|
||||
const handleValidate = useCallback(
|
||||
async (id: number) => {
|
||||
setValidating(id)
|
||||
try {
|
||||
await hostApi.validate(id)
|
||||
timeoutsRef.current.push(setTimeout(() => query.refresh(), 3000))
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : '验证失败')
|
||||
} finally {
|
||||
timeoutsRef.current.push(setTimeout(() => setValidating(null), 3000))
|
||||
}
|
||||
},
|
||||
[query]
|
||||
)
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
title="主机管理"
|
||||
description="管理用于二进制方式部署 Loki 的 SSH 主机"
|
||||
action={
|
||||
<Button
|
||||
className="bg-primary hover:bg-primary/90"
|
||||
onClick={() => setFormOpen(true)}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
添加主机
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{query.loading ? (
|
||||
<LoadingSpinner className="h-64" />
|
||||
) : query.error ? (
|
||||
<ErrorState message={query.error} onRetry={query.refresh} />
|
||||
) : query.list.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={Monitor}
|
||||
title="暂无主机"
|
||||
description="添加第一台 SSH 主机开始使用"
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{query.list.map((host) => (
|
||||
<HostCard
|
||||
key={host.id}
|
||||
host={host}
|
||||
validating={validating}
|
||||
onViewInfo={setDetailHost}
|
||||
onOpenTerminal={setTerminalHost}
|
||||
onValidate={handleValidate}
|
||||
onDelete={setDeleteTarget}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<PaginationBar
|
||||
page={query.page}
|
||||
pageSize={query.pageSize}
|
||||
total={query.total}
|
||||
onPageChange={query.setPage}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<HostFormDialog
|
||||
open={formOpen}
|
||||
onOpenChange={setFormOpen}
|
||||
onCreated={query.reload}
|
||||
/>
|
||||
|
||||
<HostDetailDialog
|
||||
key={detailHost?.id ?? 'none'}
|
||||
host={detailHost}
|
||||
onClose={() => setDetailHost(null)}
|
||||
/>
|
||||
|
||||
<TerminalDialog
|
||||
host={terminalHost}
|
||||
onClose={() => setTerminalHost(null)}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
open={deleteTarget !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setDeleteTarget(null)
|
||||
}}
|
||||
name={deleteTarget?.name}
|
||||
loading={deleting}
|
||||
description={
|
||||
refCount.dep + refCount.col > 0
|
||||
? `确定要删除「${deleteTarget?.name}」吗?警告:仍有 ${refCount.dep} 个部署、${refCount.col} 个采集策略引用该主机,删除后它们将无法工作。`
|
||||
: undefined
|
||||
}
|
||||
onConfirm={handleDelete}
|
||||
/>
|
||||
</PageContainer>
|
||||
)
|
||||
})
|
||||
|
||||
export default HostsPage
|
||||
Reference in new issue
Block a user