@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/clamav-service-status/ClamAVServiceStatus.stories.tsx

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ClamAVServiceStatus } from "./index"
+
+const meta = {
+  title: "Blocks/Antivirus/ClamAVServiceStatus",
+  component: ClamAVServiceStatus,
+  parameters: {
+    layout: "padded"
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof ClamAVServiceStatus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const generateUptimeHistory = (pattern: "healthy" | "degraded") => {
+  const hours = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+
+  if (pattern === "healthy") {
+    return hours.map(hour => ({
+      hour,
+      status: Math.random() > 0.95 ? ("degraded" as const) : ("up" as const)
+    }))
+  }
+
+  return hours.map(hour => ({
+    hour,
+    status: Math.random() > 0.7 ? ("up" as const) : Math.random() > 0.5 ? ("degraded" as const) : ("down" as const)
+  }))
+}
+
+export const Healthy: Story = {
+  args: {
+    status: "running",
+    version: "1.0.3",
+    uptime: 259200, // 3 days
+    metrics: {
+      cpuUsage: 2.5,
+      memoryUsage: 512,
+      threads: 4,
+      scanQueue: 0,
+      activeConnections: 3
+    },
+    signatures: {
+      version: "27456",
+      count: 8764532,
+      lastUpdate: new Date(Date.now() - 3600000), // 1h ago
+      freshclamStatus: "running",
+      nextScheduledUpdate: new Date(Date.now() + 3600000) // in 1h
+    },
+    socketType: "tcp",
+    socketPath: "3310",
+    uptimeHistory: generateUptimeHistory("healthy"),
+    onRestart: () => console.log("Restart clicked"),
+    onUpdateSignatures: () => console.log("Update signatures clicked"),
+    onViewLogs: () => console.log("View logs clicked")
+  }
+}
+
+export const Degraded: Story = {
+  args: {
+    status: "running",
+    version: "1.0.3",
+    uptime: 86400, // 1 day
+    metrics: {
+      cpuUsage: 78.3,
+      memoryUsage: 892,
+      threads: 8,
+      scanQueue: 12,
+      activeConnections: 15
+    },
+    signatures: {
+      version: "27450",
+      count: 8762104,
+      lastUpdate: new Date(Date.now() - 172800000), // 2 days ago
+      freshclamStatus: "error",
+      nextScheduledUpdate: new Date(Date.now() + 3600000)
+    },
+    socketType: "unix",
+    socketPath: "/var/run/clamav/clamd.sock",
+    uptimeHistory: generateUptimeHistory("degraded"),
+    onRestart: () => console.log("Restart clicked"),
+    onUpdateSignatures: () => console.log("Update signatures clicked"),
+    onViewLogs: () => console.log("View logs clicked")
+  }
+}
+
+export const Stopped: Story = {
+  args: {
+    status: "stopped",
+    version: "1.0.3",
+    uptime: 0,
+    metrics: {
+      cpuUsage: 0,
+      memoryUsage: 0,
+      threads: 0,
+      scanQueue: 0,
+      activeConnections: 0
+    },
+    signatures: {
+      version: "27456",
+      count: 8764532,
+      lastUpdate: new Date(Date.now() - 7200000), // 2h ago
+      freshclamStatus: "stopped"
+    },
+    socketType: "tcp",
+    socketPath: "3310",
+    uptimeHistory: [],
+    onRestart: () => console.log("Restart clicked"),
+    onUpdateSignatures: () => console.log("Update signatures clicked"),
+    onViewLogs: () => console.log("View logs clicked")
+  }
+}
+
+export const Error: Story = {
+  args: {
+    status: "error",
+    version: "1.0.3",
+    uptime: 0,
+    metrics: {
+      cpuUsage: 0,
+      memoryUsage: 128,
+      threads: 1,
+      scanQueue: 0,
+      activeConnections: 0
+    },
+    signatures: {
+      version: "27456",
+      count: 8764532,
+      lastUpdate: new Date(Date.now() - 86400000), // 1 day ago
+      freshclamStatus: "error"
+    },
+    socketType: "tcp",
+    socketPath: "3310",
+    uptimeHistory: generateUptimeHistory("degraded"),
+    onRestart: () => console.log("Restart clicked"),
+    onUpdateSignatures: () => console.log("Update signatures clicked"),
+    onViewLogs: () => console.log("View logs clicked")
+  }
+}
+
+export const Restarting: Story = {
+  args: {
+    status: "restarting",
+    version: "1.0.3",
+    uptime: 0,
+    metrics: {
+      cpuUsage: 15.2,
+      memoryUsage: 256,
+      threads: 2,
+      scanQueue: 0,
+      activeConnections: 0
+    },
+    signatures: {
+      version: "27456",
+      count: 8764532,
+      lastUpdate: new Date(Date.now() - 3600000),
+      freshclamStatus: "stopped"
+    },
+    socketType: "tcp",
+    socketPath: "3310",
+    uptimeHistory: generateUptimeHistory("healthy"),
+    onRestart: () => console.log("Restart clicked"),
+    onUpdateSignatures: () => console.log("Update signatures clicked"),
+    onViewLogs: () => console.log("View logs clicked")
+  }
+}
+
+export const UpdatingSignatures: Story = {
+  args: {
+    status: "running",
+    version: "1.0.3",
+    uptime: 172800, // 2 days
+    metrics: {
+      cpuUsage: 45.8,
+      memoryUsage: 678,
+      threads: 6,
+      scanQueue: 3,
+      activeConnections: 5
+    },
+    signatures: {
+      version: "27456",
+      count: 8764532,
+      lastUpdate: new Date(Date.now() - 1800000), // 30min ago
+      freshclamStatus: "updating",
+      nextScheduledUpdate: new Date(Date.now() + 1800000)
+    },
+    socketType: "tcp",
+    socketPath: "3310",
+    uptimeHistory: generateUptimeHistory("healthy"),
+    onRestart: () => console.log("Restart clicked"),
+    onUpdateSignatures: () => console.log("Update signatures clicked"),
+    onViewLogs: () => console.log("View logs clicked")
+  }
+}

package/src/blocks/clamav-service-status/index.tsx

@@ -0,0 +1,370 @@
+"use client"
+
+import { Activity, AlertTriangle, CheckCircle, Clock, Database, HardDrive, Loader2, RefreshCw, Terminal, Wifi } from "lucide-react"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card } from "../../components/card"
+import { Progress } from "../../components/progress"
+import { cn } from "../../utils/cn"
+
+export type DaemonStatus = "running" | "stopped" | "error" | "restarting"
+export type FreshclamStatus = "running" | "stopped" | "error" | "updating"
+
+export interface ClamAVMetrics {
+  cpuUsage: number
+  memoryUsage: number
+  threads: number
+  scanQueue: number
+  activeConnections: number
+}
+
+export interface SignatureInfo {
+  version: string
+  count: number
+  lastUpdate: Date
+  freshclamStatus: FreshclamStatus
+  nextScheduledUpdate?: Date
+}
+
+export interface UptimeEntry {
+  hour: string
+  status: "up" | "degraded" | "down"
+}
+
+export interface ClamAVServiceStatusProps {
+  status?: DaemonStatus
+  version?: string
+  uptime?: number // seconds
+  metrics?: ClamAVMetrics
+  signatures?: SignatureInfo
+  socketType?: "tcp" | "unix"
+  socketPath?: string
+  uptimeHistory?: UptimeEntry[]
+  onRestart?: () => void
+  onUpdateSignatures?: () => void
+  onViewLogs?: () => void
+  className?: string
+}
+
+const formatUptime = (seconds: number): string => {
+  const days = Math.floor(seconds / 86400)
+  const hours = Math.floor((seconds % 86400) / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+
+  if (days > 0) return `${days}d ${hours}h`
+  if (hours > 0) return `${hours}h ${minutes}m`
+  return `${minutes}m`
+}
+
+const formatDate = (date: Date): string => {
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(diff / 3600000)
+  const days = Math.floor(diff / 86400000)
+
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  return `${days}d ago`
+}
+
+const statusConfig = {
+  running: {
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+    borderColor: "border-green-500/20",
+    icon: CheckCircle,
+    label: "Running"
+  },
+  stopped: {
+    color: "text-gray-500",
+    bgColor: "bg-gray-500/10",
+    borderColor: "border-gray-500/20",
+    icon: Activity,
+    label: "Stopped"
+  },
+  error: {
+    color: "text-red-500",
+    bgColor: "bg-red-500/10",
+    borderColor: "border-red-500/20",
+    icon: AlertTriangle,
+    label: "Error"
+  },
+  restarting: {
+    color: "text-yellow-500",
+    bgColor: "bg-yellow-500/10",
+    borderColor: "border-yellow-500/20",
+    icon: Loader2,
+    label: "Restarting"
+  }
+}
+
+const freshclamConfig = {
+  running: { color: "text-green-500", label: "Running" },
+  stopped: { color: "text-gray-500", label: "Stopped" },
+  error: { color: "text-red-500", label: "Error" },
+  updating: { color: "text-blue-500", label: "Updating" }
+}
+
+const uptimeStatusConfig = {
+  up: "bg-green-500",
+  degraded: "bg-yellow-500",
+  down: "bg-red-500"
+}
+
+export const ClamAVServiceStatus = ({
+  status = "running",
+  version = "1.0.3",
+  uptime = 259200, // 3 days
+  metrics = {
+    cpuUsage: 2.5,
+    memoryUsage: 512,
+    threads: 4,
+    scanQueue: 0,
+    activeConnections: 3
+  },
+  signatures = {
+    version: "27456",
+    count: 8764532,
+    lastUpdate: new Date(Date.now() - 3600000), // 1h ago
+    freshclamStatus: "running",
+    nextScheduledUpdate: new Date(Date.now() + 3600000) // in 1h
+  },
+  socketType = "tcp",
+  socketPath = "3310",
+  uptimeHistory = [],
+  onRestart,
+  onUpdateSignatures,
+  onViewLogs,
+  className
+}: ClamAVServiceStatusProps) => {
+  const config = statusConfig[status]
+  const StatusIcon = config.icon
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Main Status Card */}
+      <Card className={cn("p-6 border-2", config.borderColor, config.bgColor)}>
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start gap-4">
+            <div className={cn("p-3 rounded-xl", config.bgColor)}>
+              <StatusIcon className={cn("w-8 h-8", config.color, status === "restarting" && "animate-spin")} />
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <h3 className="text-2xl font-semibold">ClamAV Daemon</h3>
+                <Badge variant={status === "error" ? "destructive" : "secondary"} className={status === "running" ? "bg-green-500/10 text-green-600 border-green-500/20" : ""}>
+                  {config.label}
+                </Badge>
+              </div>
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                <span>Version {version}</span>
+                <span className="flex items-center gap-1">
+                  <Clock className="w-3.5 h-3.5" />
+                  Uptime: {formatUptime(uptime)}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={onViewLogs}>
+              <Terminal className="w-4 h-4 mr-2" />
+              Logs
+            </Button>
+            <Button variant="outline" size="sm" onClick={onRestart} disabled={status === "restarting"}>
+              <RefreshCw className={cn("w-4 h-4 mr-2", status === "restarting" && "animate-spin")} />
+              Restart
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* System Metrics */}
+        <Card className="p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Activity className="w-5 h-5 text-primary" />
+            <h4 className="font-semibold">System Metrics</h4>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <div className="flex justify-between text-sm mb-1.5">
+                <span className="text-muted-foreground">CPU Usage</span>
+                <span className="font-medium">{metrics.cpuUsage.toFixed(1)}%</span>
+              </div>
+              <Progress
+                value={metrics.cpuUsage}
+                className={cn(
+                  "h-2",
+                  metrics.cpuUsage > 80 && "bg-red-500/20",
+                  metrics.cpuUsage > 50 && metrics.cpuUsage <= 80 && "bg-yellow-500/20"
+                )}
+              />
+            </div>
+
+            <div>
+              <div className="flex justify-between text-sm mb-1.5">
+                <span className="text-muted-foreground">Memory Usage</span>
+                <span className="font-medium">{metrics.memoryUsage} MB</span>
+              </div>
+              <Progress
+                value={(metrics.memoryUsage / 1024) * 100}
+                className={cn(
+                  "h-2",
+                  metrics.memoryUsage > 800 && "bg-red-500/20",
+                  metrics.memoryUsage > 600 && metrics.memoryUsage <= 800 && "bg-yellow-500/20"
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-3 gap-4 pt-2">
+              <div className="space-y-1">
+                <div className="text-xs text-muted-foreground">Threads</div>
+                <div className="text-2xl font-semibold">{metrics.threads}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-xs text-muted-foreground">Scan Queue</div>
+                <div className="text-2xl font-semibold">{metrics.scanQueue}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-xs text-muted-foreground">Connections</div>
+                <div className="text-2xl font-semibold flex items-center gap-1">
+                  {metrics.activeConnections}
+                  <Wifi className="w-4 h-4 text-muted-foreground" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Signature Database */}
+        <Card className="p-6">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <Database className="w-5 h-5 text-primary" />
+              <h4 className="font-semibold">Signature Database</h4>
+            </div>
+            <Button variant="outline" size="sm" onClick={onUpdateSignatures}>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Update
+            </Button>
+          </div>
+
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1">
+                <div className="text-xs text-muted-foreground">Version</div>
+                <div className="text-lg font-semibold">{signatures.version}</div>
+              </div>
+              <div className="space-y-1">
+                <div className="text-xs text-muted-foreground">Signatures</div>
+                <div className="text-lg font-semibold">{signatures.count.toLocaleString()}</div>
+              </div>
+            </div>
+
+            <div className="space-y-2 pt-2 border-t">
+              <div className="flex justify-between text-sm">
+                <span className="text-muted-foreground">Last Updated</span>
+                <span className="font-medium">{formatDate(signatures.lastUpdate)}</span>
+              </div>
+              {signatures.nextScheduledUpdate && (
+                <div className="flex justify-between text-sm">
+                  <span className="text-muted-foreground">Next Update</span>
+                  <span className="font-medium">in {formatDate(new Date(Date.now() - (Date.now() - signatures.nextScheduledUpdate.getTime())))}</span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between pt-2 border-t">
+              <span className="text-sm text-muted-foreground">Freshclam Status</span>
+              <Badge
+                variant={
+                  signatures.freshclamStatus === "error" ? "destructive" :
+                  signatures.freshclamStatus === "updating" ? "default" :
+                  "secondary"
+                }
+                className={signatures.freshclamStatus === "running" ? "bg-green-500/10 text-green-600 border-green-500/20" : ""}
+              >
+                <span className={cn(freshclamConfig[signatures.freshclamStatus].color)}>
+                  {freshclamConfig[signatures.freshclamStatus].label}
+                </span>
+              </Badge>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Connection Info & Uptime History */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <Card className="p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Wifi className="w-5 h-5 text-primary" />
+            <h4 className="font-semibold">Connection</h4>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex justify-between">
+              <span className="text-sm text-muted-foreground">Socket Type</span>
+              <Badge variant="outline">{socketType.toUpperCase()}</Badge>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-sm text-muted-foreground">{socketType === "tcp" ? "Port" : "Path"}</span>
+              <span className="text-sm font-mono font-medium">{socketPath}</span>
+            </div>
+            <div className="flex justify-between pt-2 border-t">
+              <span className="text-sm text-muted-foreground">Active Connections</span>
+              <span className="text-lg font-semibold">{metrics.activeConnections}</span>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6 lg:col-span-2">
+          <div className="flex items-center gap-2 mb-4">
+            <HardDrive className="w-5 h-5 text-primary" />
+            <h4 className="font-semibold">Uptime History (Last 7 Days)</h4>
+          </div>
+
+          {uptimeHistory.length > 0 ? (
+            <div className="flex items-end justify-between gap-1 h-20">
+              {uptimeHistory.map((entry, index) => (
+                <div key={index} className="flex-1 flex flex-col items-center gap-1">
+                  <div
+                    className={cn(
+                      "w-full rounded-t transition-all",
+                      uptimeStatusConfig[entry.status],
+                      entry.status === "up" && "h-full",
+                      entry.status === "degraded" && "h-3/4",
+                      entry.status === "down" && "h-1/4"
+                    )}
+                  />
+                  <span className="text-[10px] text-muted-foreground">{entry.hour}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="h-20 flex items-center justify-center text-sm text-muted-foreground">
+              No uptime history available
+            </div>
+          )}
+
+          <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-t">
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded bg-green-500" />
+              <span className="text-xs text-muted-foreground">Up</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded bg-yellow-500" />
+              <span className="text-xs text-muted-foreground">Degraded</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-3 h-3 rounded bg-red-500" />
+              <span className="text-xs text-muted-foreground">Down</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}