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 加密前缀保留(已加密凭证不受影响)。
2026-10-24 13:20:12 +08:00
1 parent 327e282356
commit f9c6c1d826
@@ -0,0 +1,136 @@
+import { useEffect, memo, useCallback, useState } from 'react'
+import { HardDrive, Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { storageApi, deploymentApi } 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 { StorageConfig } from '@/types'
+import { StorageCard } from './components/StorageCard'
+import { StorageFormDialog } from './components/StorageFormDialog'
+
+/**
+ * 存储配置页 — 只做编排：数据走 useListQuery（取消+版本号），
+ * 卡片/表单/删除确认为域内子组件。成功操作静默（列表刷新即反馈）。
+ */
+const StoragePage = memo(function StoragePage() {
+  const query = useListQuery<StorageConfig>((params, signal) =>
+    storageApi.list(params, { signal })
+  )
+
+  const [formOpen, setFormOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<StorageConfig | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const [depRefCount, setDepRefCount] = useState(0)
+  useEffect(() => {
+    if (!deleteTarget) return
+    deploymentApi
+      .list({ page: 1, pageSize: 100 })
+      .then((d) => setDepRefCount(d.list.filter((x) => x.storageConfigID === deleteTarget.id).length))
+      .catch(() => setDepRefCount(0))
+  }, [deleteTarget])
+
+  const handleDelete = useCallback(async () => {
+    const id = deleteTarget?.id
+    if (!id) return
+    setDeleting(true)
+    try {
+      await storageApi.remove(id)
+      setDeleteTarget(null)
+      query.refresh()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : '删除存储配置失败')
+    } finally {
+      setDeleting(false)
+    }
+  }, [deleteTarget, query])
+
+  // 设为默认存储（后端保证唯一默认：置新默认会取消旧默认）
+  const handleSetDefault = useCallback(
+    async (id: number) => {
+      try {
+        await storageApi.update(id, { isDefault: true })
+        query.refresh()
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : '设置默认存储失败')
+      }
+    },
+    [query]
+  )
+
+  return (
+    <PageContainer
+      title="存储配置"
+      description="为 Loki 配置对象存储后端"
+      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={HardDrive}
+          title="暂无存储配置"
+          description="添加第一个 Loki 存储后端"
+        />
+      ) : (
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {query.list.map((storage) => (
+              <StorageCard
+                key={storage.id}
+                storage={storage}
+                onSetDefault={handleSetDefault}
+                onDelete={setDeleteTarget}
+              />
+            ))}
+          </div>
+          <PaginationBar
+            page={query.page}
+            pageSize={query.pageSize}
+            total={query.total}
+            onPageChange={query.setPage}
+          />
+        </>
+      )}
+
+      <StorageFormDialog
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        onCreated={query.reload}
+      />
+
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTarget(null)
+        }}
+        name={deleteTarget?.name}
+        loading={deleting}
+        description={
+          depRefCount > 0
+            ? `确定要删除「${deleteTarget?.name}」吗?警告:仍有 ${depRefCount} 个部署使用该存储,删除后这些部署的对象存储配置将失效。`
+            : undefined
+        }
+        onConfirm={handleDelete}
+      />
+    </PageContainer>
+  )
+})
+
+export default StoragePage