mirror of
https://github.com/YuzuZensai/Minikura.git
synced 2026-03-30 20:27:39 +00:00
✨ feat: topology, and improves handling
This commit is contained in:
341
apps/web/components/topology/controls/node-details-panel.tsx
Normal file
341
apps/web/components/topology/controls/node-details-panel.tsx
Normal file
@@ -0,0 +1,341 @@
|
||||
"use client";
|
||||
|
||||
import { Box } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
import type {
|
||||
K8sNodeMetadata,
|
||||
ProxyMetadata,
|
||||
ServerMetadata,
|
||||
TopologyNodeData,
|
||||
} from "@/lib/topology-types";
|
||||
|
||||
interface NodeDetailsPanelProps {
|
||||
node: TopologyNodeData | null;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function NodeDetailsPanel({
|
||||
node,
|
||||
open,
|
||||
onClose,
|
||||
}: NodeDetailsPanelProps) {
|
||||
if (!node) return null;
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onClose}>
|
||||
<SheetContent className="w-full sm:w-[600px] lg:w-[700px] overflow-y-auto p-6">
|
||||
<SheetHeader className="mb-6">
|
||||
<SheetTitle>{node.label}</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="space-y-4 pr-2">
|
||||
{/* Type and Status */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline">
|
||||
{node.type === "server"
|
||||
? "Minecraft Server"
|
||||
: node.type === "proxy"
|
||||
? "Reverse Proxy"
|
||||
: "Kubernetes Node"}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant={
|
||||
node.status === "healthy"
|
||||
? "default"
|
||||
: node.status === "degraded"
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{node.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{node.type === "server" && (
|
||||
<ServerDetails metadata={node.metadata as ServerMetadata} />
|
||||
)}
|
||||
{node.type === "proxy" && (
|
||||
<ProxyDetails metadata={node.metadata as ProxyMetadata} />
|
||||
)}
|
||||
{node.type === "k8s-node" && (
|
||||
<K8sNodeDetails metadata={node.metadata as K8sNodeMetadata} />
|
||||
)}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerDetails({ metadata }: { metadata: ServerMetadata }) {
|
||||
const { server, podCount, readyPods, pods, k8sNodes, connectedProxies } =
|
||||
metadata;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<DetailSection title="Server Configuration">
|
||||
<DetailItem label="ID" value={server.id} />
|
||||
{server.description && (
|
||||
<DetailItem label="Description" value={server.description} />
|
||||
)}
|
||||
<DetailItem label="Type" value={server.type} />
|
||||
<DetailItem label="Jar Type" value={server.jar_type} />
|
||||
<DetailItem
|
||||
label="Minecraft Version"
|
||||
value={server.minecraft_version}
|
||||
/>
|
||||
<DetailItem label="Port" value={server.listen_port.toString()} />
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection title="Kubernetes Info">
|
||||
<DetailItem label="Pods" value={`${readyPods}/${podCount} Ready`} />
|
||||
{k8sNodes.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm mb-2">
|
||||
<Box className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">
|
||||
Running on {k8sNodes.length} K8s node(s):
|
||||
</span>
|
||||
</div>
|
||||
{k8sNodes.map((nodeName) => (
|
||||
<div
|
||||
key={nodeName}
|
||||
className="text-sm p-2 bg-blue-50 border border-blue-200 rounded ml-6"
|
||||
>
|
||||
<span className="font-mono text-xs break-all">{nodeName}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{pods.map((pod) => (
|
||||
<div key={pod.name} className="text-sm mt-2 p-2 bg-muted rounded">
|
||||
<div className="font-medium font-mono text-xs break-all">
|
||||
{pod.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground space-y-0.5 mt-1">
|
||||
<div>
|
||||
Status: {pod.status} • {pod.ready}
|
||||
</div>
|
||||
<div>Restarts: {pod.restarts}</div>
|
||||
{pod.nodeName && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Box className="h-3 w-3 shrink-0" />
|
||||
<span className="break-all">Node: {pod.nodeName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</DetailSection>
|
||||
|
||||
{connectedProxies.length > 0 && (
|
||||
<DetailSection title="Proxy Connections">
|
||||
<DetailItem
|
||||
label="Behind Proxies"
|
||||
value={connectedProxies.length.toString()}
|
||||
/>
|
||||
<div className="mt-2 space-y-1">
|
||||
{connectedProxies.map((proxyId) => (
|
||||
<div
|
||||
key={proxyId}
|
||||
className="text-sm p-2 bg-blue-50 border border-blue-200 rounded font-mono break-all"
|
||||
>
|
||||
{proxyId}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DetailSection>
|
||||
)}
|
||||
|
||||
<DetailSection title="Resources">
|
||||
<DetailItem
|
||||
label="Memory"
|
||||
value={`${server.memory_request}MB / ${server.memory}MB`}
|
||||
/>
|
||||
<DetailItem
|
||||
label="CPU Request"
|
||||
value={server.cpu_request || "Not set"}
|
||||
/>
|
||||
<DetailItem label="CPU Limit" value={server.cpu_limit || "Not set"} />
|
||||
</DetailSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProxyDetails({ metadata }: { metadata: ProxyMetadata }) {
|
||||
const { proxy, podCount, readyPods, pods, k8sNodes, connectedServers } =
|
||||
metadata;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<DetailSection title="Proxy Configuration">
|
||||
<DetailItem label="ID" value={proxy.id} />
|
||||
{proxy.description && (
|
||||
<DetailItem label="Description" value={proxy.description} />
|
||||
)}
|
||||
<DetailItem label="Type" value={proxy.type} />
|
||||
<DetailItem
|
||||
label="External Address"
|
||||
value={`${proxy.external_address}:${proxy.external_port}`}
|
||||
/>
|
||||
<DetailItem label="Listen Port" value={proxy.listen_port.toString()} />
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection title="Kubernetes Info">
|
||||
<DetailItem label="Pods" value={`${readyPods}/${podCount} Ready`} />
|
||||
{k8sNodes.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-sm mb-2">
|
||||
<Box className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">
|
||||
Running on {k8sNodes.length} K8s node(s):
|
||||
</span>
|
||||
</div>
|
||||
{k8sNodes.map((nodeName) => (
|
||||
<div
|
||||
key={nodeName}
|
||||
className="text-sm p-2 bg-blue-50 border border-blue-200 rounded ml-6"
|
||||
>
|
||||
<span className="font-mono text-xs break-all">{nodeName}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{pods.map((pod) => (
|
||||
<div key={pod.name} className="text-sm mt-2 p-2 bg-muted rounded">
|
||||
<div className="font-medium font-mono text-xs break-all">
|
||||
{pod.name}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground space-y-0.5 mt-1">
|
||||
<div>
|
||||
Status: {pod.status} • {pod.ready}
|
||||
</div>
|
||||
<div>Restarts: {pod.restarts}</div>
|
||||
{pod.nodeName && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Box className="h-3 w-3 shrink-0" />
|
||||
<span className="break-all">Node: {pod.nodeName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection title="Connected Servers">
|
||||
<DetailItem label="Total" value={connectedServers.length.toString()} />
|
||||
{connectedServers.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{connectedServers.map((serverId) => (
|
||||
<div
|
||||
key={serverId}
|
||||
className="text-sm p-2 bg-green-50 border border-green-200 rounded font-mono break-all"
|
||||
>
|
||||
{serverId}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</DetailSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
|
||||
const { node, podCount, serverPods, proxyPods } = metadata;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<DetailSection title="Node Information">
|
||||
<DetailItem label="Name" value={node.name || "Unknown"} />
|
||||
<DetailItem label="Status" value={node.status} />
|
||||
{node.version && <DetailItem label="Version" value={node.version} />}
|
||||
{node.internalIP && (
|
||||
<DetailItem label="Internal IP" value={node.internalIP} />
|
||||
)}
|
||||
{node.externalIP && (
|
||||
<DetailItem label="External IP" value={node.externalIP} />
|
||||
)}
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection title="Node Details">
|
||||
<DetailItem label="Roles" value={node.roles} />
|
||||
<DetailItem label="Age" value={node.age} />
|
||||
{node.hostname && <DetailItem label="Hostname" value={node.hostname} />}
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection title="Running Pods">
|
||||
<DetailItem label="Total Pods" value={podCount.toString()} />
|
||||
<DetailItem label="Server Pods" value={serverPods.length.toString()} />
|
||||
<DetailItem label="Proxy Pods" value={proxyPods.length.toString()} />
|
||||
|
||||
{serverPods.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<p className="text-sm font-medium mb-2">Server Pods:</p>
|
||||
<div className="space-y-1">
|
||||
{serverPods.map((podName) => (
|
||||
<div
|
||||
key={podName}
|
||||
className="text-xs p-2 bg-green-50 border border-green-200 rounded font-mono break-all"
|
||||
>
|
||||
{podName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{proxyPods.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<p className="text-sm font-medium mb-2">Proxy Pods:</p>
|
||||
<div className="space-y-1">
|
||||
{proxyPods.map((podName) => (
|
||||
<div
|
||||
key={podName}
|
||||
className="text-xs p-2 bg-blue-50 border border-blue-200 rounded font-mono break-all"
|
||||
>
|
||||
{podName}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DetailSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailSection({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-semibold text-sm">{title}</h3>
|
||||
<div className="space-y-2">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailItem({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex justify-between items-start text-sm gap-4">
|
||||
<span className="text-muted-foreground shrink-0">{label}:</span>
|
||||
<span className="font-medium text-right break-words">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
159
apps/web/components/topology/controls/topology-toolbar.tsx
Normal file
159
apps/web/components/topology/controls/topology-toolbar.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { Box, Filter, Globe, Search, Server } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import type { TopologyFilters } from "@/lib/topology-types";
|
||||
|
||||
interface TopologyToolbarProps {
|
||||
filters: TopologyFilters;
|
||||
onFiltersChange: (filters: TopologyFilters) => void;
|
||||
metadata: {
|
||||
totalServers: number;
|
||||
totalProxies: number;
|
||||
totalK8sNodes: number;
|
||||
totalConnections: number;
|
||||
healthySystems: number;
|
||||
degradedSystems: number;
|
||||
unhealthySystems: number;
|
||||
};
|
||||
}
|
||||
|
||||
export function TopologyToolbar({ filters, onFiltersChange, metadata }: TopologyToolbarProps) {
|
||||
const [searchQuery, setSearchQuery] = useState(filters.searchQuery);
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchQuery(value);
|
||||
onFiltersChange({ ...filters, searchQuery: value });
|
||||
};
|
||||
|
||||
const toggleFilter = (key: keyof TopologyFilters) => {
|
||||
onFiltersChange({ ...filters, [key]: !filters[key] });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 p-4 bg-white/90 backdrop-blur-sm rounded-lg border shadow-lg min-w-[350px]">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="flex flex-col items-center p-2 bg-muted/50 rounded">
|
||||
<div className="flex items-center gap-1 text-muted-foreground mb-1">
|
||||
<Server className="h-3 w-3" />
|
||||
<span className="text-xs">Servers</span>
|
||||
</div>
|
||||
<span className="text-lg font-bold">{metadata.totalServers}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-2 bg-muted/50 rounded">
|
||||
<div className="flex items-center gap-1 text-muted-foreground mb-1">
|
||||
<Globe className="h-3 w-3" />
|
||||
<span className="text-xs">Proxies</span>
|
||||
</div>
|
||||
<span className="text-lg font-bold">{metadata.totalProxies}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-2 bg-muted/50 rounded">
|
||||
<div className="flex items-center gap-1 text-muted-foreground mb-1">
|
||||
<Box className="h-3 w-3" />
|
||||
<span className="text-xs">Nodes</span>
|
||||
</div>
|
||||
<span className="text-lg font-bold">{metadata.totalK8sNodes}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Health Status */}
|
||||
<div className="flex gap-2 justify-between text-xs">
|
||||
<Badge variant="outline" className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500" />
|
||||
{metadata.healthySystems} Healthy
|
||||
</Badge>
|
||||
<Badge variant="outline" className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-yellow-500" />
|
||||
{metadata.degradedSystems} Degraded
|
||||
</Badge>
|
||||
<Badge variant="outline" className="flex items-center gap-1">
|
||||
<div className="w-2 h-2 rounded-full bg-red-500" />
|
||||
{metadata.unhealthySystems} Down
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
Filters
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80" align="start">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-3">Show/Hide</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="show-servers" className="flex items-center gap-2 cursor-pointer">
|
||||
<Server className="h-4 w-4" />
|
||||
<span>Servers</span>
|
||||
</Label>
|
||||
<Switch
|
||||
id="show-servers"
|
||||
checked={filters.showServers}
|
||||
onCheckedChange={() => toggleFilter("showServers")}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="show-proxies" className="flex items-center gap-2 cursor-pointer">
|
||||
<Globe className="h-4 w-4" />
|
||||
<span>Reverse Proxies</span>
|
||||
</Label>
|
||||
<Switch
|
||||
id="show-proxies"
|
||||
checked={filters.showProxies}
|
||||
onCheckedChange={() => toggleFilter("showProxies")}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label
|
||||
htmlFor="show-k8s-nodes"
|
||||
className="flex items-center gap-2 cursor-pointer"
|
||||
>
|
||||
<Box className="h-4 w-4" />
|
||||
<span>K8s Nodes</span>
|
||||
</Label>
|
||||
<Switch
|
||||
id="show-k8s-nodes"
|
||||
checked={filters.showK8sNodes}
|
||||
onCheckedChange={() => toggleFilter("showK8sNodes")}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="show-connections" className="cursor-pointer">
|
||||
Connection Lines
|
||||
</Label>
|
||||
<Switch
|
||||
id="show-connections"
|
||||
checked={filters.showConnections}
|
||||
onCheckedChange={() => toggleFilter("showConnections")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user