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.
2026-10-25 21:28:32 +08:00
1 parent f9c6c1d826
commit 2d73661dd1
@@ -1,10 +1,9 @@
 import { memo, useEffect, useState } from 'react'
-import { Play, Square, RotateCw, Trash2, Terminal, ExternalLink } from 'lucide-react'
+import { Play, Square, RotateCw, Trash2, Terminal, ExternalLink, Pencil, Rocket } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { StatusBadge, StatusIcon } from '@/components/StatusBadge'
-import { InfoRow } from '@/components/InfoRow'
+import { StatusBadge } from '@/components/StatusBadge'
 import { deploymentApi } from '@/api'
+import { ResourceCard } from '@/components/ResourceCard'
 import type { LokiDeployment } from '@/types'

 /** 部署目标展示：优先集群，其次主机 */
@@ -23,6 +22,7 @@ interface DeploymentCardProps {
  onRestart: (id: number) => void
  onDelete: (d: LokiDeployment) => void
  onViewLogs: (d: LokiDeployment) => void
+  onEditRetention: (d: LokiDeployment) => void
 }

 /** 部署卡片 — 列表项展示与操作入口（部署/停止/重启/日志/访问/删除） */
@@ -34,6 +34,7 @@ export const DeploymentCard = memo(function DeploymentCard({
  onRestart,
  onDelete,
  onViewLogs,
+  onEditRetention,
 }: DeploymentCardProps) {
  // Loki 就绪探测(运行中时经数据源代理 /ready)
  const [ready, setReady] = useState<boolean | null>(null)
@@ -58,122 +59,75 @@ export const DeploymentCard = memo(function DeploymentCard({
  const canDeploy = d.status === 'pending' || d.status === 'failed' || d.status === 'stopped'

  return (
-    <Card className="border-border hover:shadow-md transition-shadow">
-      <CardContent className="p-5">
-        <div className="flex items-start justify-between mb-3">
-          <div className="flex items-center gap-2 min-w-0">
-            <StatusIcon status={d.status} size="md" />
-            <div className="min-w-0">
-              <h3 className="font-semibold text-foreground truncate">
-                {d.name}
-              </h3>
-              <p className="text-xs text-muted-foreground">{d.uuid}</p>
-            </div>
-          </div>
-          <StatusBadge status={d.status} />
-          {d.status === 'running' && ready !== null && (
-            <span
-              className={`w-2 h-2 rounded-full ${ready ? 'bg-success' : 'bg-destructive'}`}
-              title={ready ? 'Loki 就绪' : 'Loki 未就绪'}
-            />
-          )}
-        </div>
-
-        <p className="text-sm text-muted-foreground mb-3">{d.description || '无描述'}</p>
-
-        <div className="space-y-1.5 text-xs text-muted-foreground mb-4">
-          <InfoRow label="方式" value={d.mode} />
-          <InfoRow label="版本" value={d.version} />
-          <InfoRow label="目标" value={getTargetLabel(d)} />
-          <InfoRow label="命名空间" value={d.namespace || 'loki'} />
-          <InfoRow label="副本数" value={String(d.replicas)} />
-          <InfoRow label="存储" value={d.storageConfig?.name || '本地'} />
-          {d.endpoint && (
-            <InfoRow label="访问地址" value={d.endpoint} valueClass="text-primary truncate max-w-[200px]" />
-          )}
-          {d.grafanaEnabled && d.grafanaEndpoint && (
-            <div className="flex justify-between items-center gap-2">
-              <span>Grafana</span>
-              <a
-                href={d.grafanaEndpoint}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="font-medium text-primary hover:underline truncate max-w-[200px]"
-                title={`${d.grafanaEndpoint}（admin/admin）`}
-              >
-                {d.grafanaEndpoint.replace(/^https?:\/\//, '')}
-              </a>
-            </div>
-          )}
-          {d.statusMessage && (
-            <div className="p-2 bg-muted rounded text-xs">
-              {d.statusMessage}
-            </div>
-          )}
-        </div>
-
-        <div className="flex gap-1 pt-3 border-t border-border">
+    <ResourceCard
+      icon={Rocket}
+      iconClassName={d.status === 'running' ? 'text-success' : d.status === 'failed' ? 'text-destructive' : 'text-muted-foreground'}
+      title={d.name}
+      titleExtra={
+        d.status === 'running' && ready !== null ? (
+          <span
+            className={`w-2 h-2 rounded-full shrink-0 ${ready ? 'bg-success' : 'bg-destructive'}`}
+            title={ready ? 'Loki 就绪' : 'Loki 未就绪'}
+          />
+        ) : undefined
+      }
+      badges={<StatusBadge status={d.status} />}
+      description={d.description || d.uuid}
+      fields={[
+        { label: '方式', value: d.mode === 'host-docker' ? '主机 Docker' : d.mode === 'k8s-yaml' ? 'Kubernetes' : d.mode },
+        { label: '版本', value: d.version },
+        { label: '目标', value: getTargetLabel(d) },
+        ...(d.mode !== 'host-docker' ? [
+          { label: '命名空间', value: d.namespace || 'loki' },
+          { label: '副本', value: `${d.replicas} · 保留 ${d.retentionDays || 30} 天` },
+        ] : [{ label: '保留', value: `${d.retentionDays || 30} 天` }]),
+        { label: '存储', value: d.storageConfig?.name || '本地' },
+        ...(d.endpoint ? [{ label: '访问', value: (
+          <span className="text-primary">{d.endpoint.replace(/^https?:\/\//, '')}</span>
+        ), title: d.endpoint }] : []),
+        ...(d.grafanaEnabled && d.grafanaEndpoint ? [{ label: 'Grafana', value: (
+          <a href={d.grafanaEndpoint} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline" title={`${d.grafanaEndpoint}(admin/admin)`}>
+            {d.grafanaEndpoint.replace(/^https?:\/\//, '')}
+          </a>
+        ) }] : []),
+      ]}
+      message={d.statusMessage || undefined}
+      actions={
+        <>
+          <Button variant="outline" size="sm" className="text-xs" onClick={() => onEditRetention(d)} disabled={isDeploying || isBusy}>
+            <Pencil className="size-3 mr-1" />配置
+          </Button>
          {canDeploy ? (
-            <Button
-              variant="outline"
-              size="sm"
-              className="flex-1 text-xs bg-success/10 text-primary hover:bg-success/20 border-success/30"
-              onClick={() => onDeploy(d.id)}
-              disabled={isBusy}
-            >
-              <Play className="w-3 h-3 mr-1" />
-              {isBusy ? '部署中...' : '部署'}
+            <Button variant="outline" size="sm" className="flex-1 text-xs bg-success/10 text-primary hover:bg-success/20 border-success/30" onClick={() => onDeploy(d.id)} disabled={isBusy}>
+              <Play className="size-3 mr-1" />{isBusy ? '部署中...' : '部署'}
            </Button>
          ) : isDeploying ? (
            <Button variant="outline" size="sm" className="flex-1 text-xs" disabled>
-              <RotateCw className="w-3 h-3 mr-1 animate-spin" />
-              部署中...
+              <RotateCw className="size-3 mr-1 animate-spin" />部署中...
            </Button>
          ) : (
            <>
-              <Button variant="outline" size="sm" className="text-xs" onClick={() => onStop(d.id)}>
-                <Square className="w-3 h-3 mr-1" />
-                停止
+              <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onStop(d.id)}>
+                <Square className="size-3 mr-1" />停止
              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                className="text-xs"
-                onClick={() => onRestart(d.id)}
-                disabled={isBusy}
-              >
-                <RotateCw className={`w-3 h-3 mr-1 ${isBusy ? 'animate-spin' : ''}`} />
-                重启
+              <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onRestart(d.id)} disabled={isBusy}>
+                <RotateCw className={`size-3 mr-1 ${isBusy ? 'animate-spin' : ''}`} />重启
              </Button>
            </>
          )}
          <Button variant="outline" size="sm" className="text-xs" onClick={() => onViewLogs(d)}>
-            <Terminal className="w-3 h-3 mr-1" />
-            日志
+            <Terminal className="size-3 mr-1" />日志
          </Button>
          {d.endpoint && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-xs text-primary hover:text-primary/80"
-              onClick={() => window.open(d.endpoint, '_blank', 'noopener,noreferrer')}
-              title="浏览器访问"
-            >
-              <ExternalLink className="w-3 h-3 mr-1" />
-              访问
+            <Button variant="outline" size="sm" className="text-xs text-primary hover:text-primary/80" onClick={() => window.open(d.endpoint, '_blank', 'noopener,noreferrer')} title="浏览器访问">
+              <ExternalLink className="size-3" />
            </Button>
          )}
-          <Button
-            variant="outline"
-            size="sm"
-            aria-label={`删除部署 ${d.name}`}
-            className="text-destructive hover:text-destructive hover:bg-destructive/10"
-            onClick={() => onDelete(d)}
-          >
-            <Trash2 className="w-3 h-3" />
+          <Button variant="outline" size="sm" aria-label={`删除部署 ${d.name}`} className="text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => onDelete(d)}>
+            <Trash2 className="size-3.5" />
          </Button>
-        </div>
-      </CardContent>
-    </Card>
+        </>
+      }
+    />
  )
 })