YuzuZensai/Minikura
1
0
Fork 0
mirror of https://github.com/YuzuZensai/Minikura.git synced 2026-09-13 18:59:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix: align dashboard with secured APIs

Browse Source
This commit is contained in:
yuzu
2026-08-13 03:29:33 +07:00
parent e90dc8382b
commit 3f09e330be
47 changed files with 1280 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/topology/controls/node-details-panel.tsx
+5 -5
View File
@@ -85,7 +85,7 @@ function ServerDetails({ metadata }: { metadata: ServerMetadata }) {
<DetailRow label="Behind Proxies" value={connectedProxies.length.toString()} />
<IdentifierList
items={connectedProxies}
className="text-sm bg-blue-50 border border-blue-200"
className="text-sm bg-info/12 border border-info/30"
/>
</DetailSection>
)}
@@ -129,7 +129,7 @@ function ProxyDetails({ metadata }: { metadata: ProxyMetadata }) {
{connectedServers.length > 0 && (
<IdentifierList
items={connectedServers}
className="text-sm bg-green-50 border border-green-200"
className="text-sm bg-success/12 border border-success/30"
/>
)}
</DetailSection>
@@ -166,7 +166,7 @@ function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
<p className="text-sm font-medium mb-2">Server Pods:</p>
<IdentifierList
items={serverPods}
className="text-xs bg-green-50 border border-green-200"
className="text-xs bg-success/12 border border-success/30"
withMargin={false}
/>
</div>
@@ -177,7 +177,7 @@ function K8sNodeDetails({ metadata }: { metadata: K8sNodeMetadata }) {
<p className="text-sm font-medium mb-2">Proxy Pods:</p>
<IdentifierList
items={proxyPods}
className="text-xs bg-blue-50 border border-blue-200"
className="text-xs bg-info/12 border border-info/30"
withMargin={false}
/>
</div>
@@ -204,7 +204,7 @@ function KubernetesWorkloadDetails({
</div>
<IdentifierList
items={k8sNodes}
className="text-xs bg-blue-50 border border-blue-200 ml-6"
className="text-xs bg-info/12 border border-info/30 ml-6"
withMargin={false}
/>
</div>
apps/web/components/topology/controls/topology-toolbar.tsx
+2 -2
View File
@@ -58,7 +58,7 @@ export function TopologyToolbar({ filters, onFiltersChange, metadata }: Topology
];
return (
<div className="flex min-w-[280px] max-w-[calc(100vw-5rem)] flex-col gap-3 rounded-sm border-2 border-foreground bg-card/95 p-3 shadow-[5px_5px_0_color-mix(in_oklch,var(--foreground)_16%,transparent)] backdrop-blur-sm sm:min-w-[350px] sm:p-4">
<div className="flex w-[calc(100vw-4.5rem)] max-w-[350px] flex-col gap-3 rounded-sm border-2 border-foreground bg-card/95 p-3 shadow-[5px_5px_0_color-mix(in_oklch,var(--foreground)_16%,transparent)] backdrop-blur-sm sm:w-[350px] sm:p-4">
<div className="grid grid-cols-3 gap-2">
{stats.map(({ label, value, icon: Icon }) => (
<div key={label} className="flex flex-col items-center border bg-muted/50 p-2">
@@ -100,7 +100,7 @@ export function TopologyToolbar({ filters, onFiltersChange, metadata }: Topology
Filters
</Button>
</PopoverTrigger>
<PopoverContent className="w-80" align="start">
<PopoverContent className="w-[calc(100vw-3rem)] max-w-80" align="start">
<div className="space-y-4">
<div>
<h4 className="font-semibold mb-3">Show/Hide</h4>
apps/web/components/topology/nodes/k8s-node.tsx
+5 -5
View File
@@ -12,8 +12,8 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
return (
<TopologyNodeCard
selected={selected}
icon={<Box className="h-4 w-4 text-blue-600" />}
iconClassName="bg-blue-500/10"
icon={<Box className="h-4 w-4 text-info" />}
iconClassName="bg-info/10"
title={node.name || "Unknown"}
description="Kubernetes Node"
health={health}
@@ -35,7 +35,7 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
<CompactRow
label="Total Pods"
className="text-xs bg-muted/50 rounded px-2 py-1.5"
valueClassName="font-semibold text-blue-600"
valueClassName="font-semibold text-info"
>
{podCount}
</CompactRow>
@@ -55,7 +55,7 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
<CompactRow
label="CPU"
icon={<Cpu className="h-3 w-3" />}
valueClassName="font-semibold text-xs text-blue-600"
valueClassName="font-semibold text-xs text-info"
>
{metrics.cpuUsage}
</CompactRow>
@@ -64,7 +64,7 @@ export function K8sNodeComponent({ data, selected }: NodeProps) {
<CompactRow
label="Memory"
icon={<HardDrive className="h-3 w-3" />}
valueClassName="font-semibold text-xs text-blue-600"
valueClassName="font-semibold text-xs text-info"
>
{metrics.memoryUsage}
</CompactRow>
apps/web/components/topology/nodes/proxy-node.tsx
+5 -5
View File
@@ -15,8 +15,8 @@ export function ProxyNode({ data, selected }: NodeProps) {
return (
<TopologyNodeCard
selected={selected}
icon={<Globe className="h-4 w-4 text-blue-500" />}
iconClassName="bg-blue-500/10"
icon={<Globe className="h-4 w-4 text-info" />}
iconClassName="bg-info/10"
title={proxy.id}
description={proxy.description}
health={health}
@@ -37,7 +37,7 @@ export function ProxyNode({ data, selected }: NodeProps) {
className="text-xs bg-muted/50 rounded px-2 py-1.5"
valueClassName={cn(
"font-semibold",
readyPods === podCount ? "text-green-600" : "text-yellow-600"
readyPods === podCount ? "text-success" : "text-warning"
)}
>
{readyPods}/{podCount}
@@ -80,7 +80,7 @@ export function ProxyNode({ data, selected }: NodeProps) {
<div className="space-y-1 text-[11px] pt-1 border-t">
<CompactRow
label="Restarts"
valueClassName={restartCount > 0 ? "text-yellow-600" : "text-green-600"}
valueClassName={restartCount > 0 ? "text-warning" : "text-success"}
>
{restartCount}
</CompactRow>
@@ -90,7 +90,7 @@ export function ProxyNode({ data, selected }: NodeProps) {
{pods[0].ip}
</CompactRow>
)}
<CompactRow label="Routing To" valueClassName="font-semibold text-blue-600">
<CompactRow label="Routing To" valueClassName="font-semibold text-info">
{connectedServers.length} servers
</CompactRow>
{k8sNodes.length > 0 && (
apps/web/components/topology/nodes/server-node.tsx
+3 -3
View File
@@ -43,7 +43,7 @@ export function ServerNode({ data, selected }: NodeProps) {
className="text-xs bg-muted/50 rounded px-2 py-1.5"
valueClassName={cn(
"font-semibold",
readyPods === podCount ? "text-green-600" : "text-yellow-600"
readyPods === podCount ? "text-success" : "text-warning"
)}
>
{readyPods}/{podCount}
@@ -77,7 +77,7 @@ export function ServerNode({ data, selected }: NodeProps) {
<div className="space-y-1 text-[11px] pt-1 border-t">
<CompactRow
label="Restarts"
valueClassName={restartCount > 0 ? "text-yellow-600" : "text-green-600"}
valueClassName={restartCount > 0 ? "text-warning" : "text-success"}
>
{restartCount}
</CompactRow>
@@ -93,7 +93,7 @@ export function ServerNode({ data, selected }: NodeProps) {
{(k8sNodes.length > 0 || connectedProxies.length > 0) && (
<div className="space-y-1 text-[11px] pt-1 border-t">
{connectedProxies.length > 0 && (
<CompactRow label="Exposed By" valueClassName="font-semibold text-blue-600">
<CompactRow label="Exposed By" valueClassName="font-semibold text-info">
{connectedProxies.length} proxies
</CompactRow>
)}
apps/web/components/topology/topology-canvas.tsx
+7 -7
View File
@@ -54,7 +54,7 @@ export function TopologyCanvas({ graph }: TopologyCanvasProps) {
}, []);
return (
<div className="h-[calc(100vh-250px)] min-h-[520px] w-full overflow-hidden rounded-sm border-2 border-foreground bg-background shadow-[6px_6px_0_color-mix(in_oklch,var(--foreground)_14%,transparent)]">
<div className="h-[70vh] min-h-[420px] w-full overflow-hidden rounded-sm border-2 border-foreground bg-background shadow-[6px_6px_0_color-mix(in_oklch,var(--foreground)_14%,transparent)] sm:h-[calc(100vh-250px)] sm:min-h-[520px]">
<ReactFlow
nodes={nodes}
edges={edges}
@@ -93,18 +93,18 @@ export function TopologyCanvas({ graph }: TopologyCanvasProps) {
showZoom
showFitView
showInteractive
className="border bg-card/95 shadow-md backdrop-blur-sm"
className="hidden border bg-card/95 shadow-md backdrop-blur-sm sm:block"
/>
<MiniMap
nodeColor={(node: any) => {
const data = node.data as TopologyNodeData;
const colors = {
healthy: "#22c55e",
degraded: "#eab308",
unhealthy: "#ef4444",
unknown: "#94a3b8",
healthy: "var(--success)",
degraded: "var(--warning)",
unhealthy: "var(--destructive)",
unknown: "var(--muted-foreground)",
};
return colors[data.status] || "#94a3b8";
return colors[data.status] || "var(--muted-foreground)";
}}
maskColor="color-mix(in oklch, var(--foreground) 8%, transparent)"
className="border bg-card/95 shadow-md backdrop-blur-sm"
apps/web/components/topology/topology-primitives.tsx
+9 -8
View File
@@ -17,9 +17,10 @@ const healthLabels: Record<HealthStatus, string> = {
};
const solidHealthClasses: Record<Exclude<HealthStatus, "unknown">, string> = {
healthy: "bg-green-500 hover:bg-green-600",
degraded: "bg-yellow-500 hover:bg-yellow-600",
unhealthy: "bg-red-500 hover:bg-red-600",
healthy: "border-transparent bg-success text-success-foreground hover:bg-success/90",
degraded: "border-transparent bg-warning text-warning-foreground hover:bg-warning/90",
unhealthy:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90",
};
interface HealthBadgeProps {
@@ -39,9 +40,9 @@ export function HealthBadge({
if (appearance === "summary") {
const indicatorClasses = {
healthy: "bg-green-500",
degraded: "bg-yellow-500",
unhealthy: "bg-red-500",
healthy: "bg-success",
degraded: "bg-warning",
unhealthy: "bg-destructive",
unknown: "bg-muted-foreground",
}[status];
@@ -156,7 +157,7 @@ interface MetricRowProps {
export function MetricRow({ label, icon, usage, limit }: MetricRowProps) {
return (
<CompactRow label={label} icon={icon} valueClassName="text-xs">
{usage && <span className="text-blue-600">{usage} / </span>}
{usage && <span className="text-info">{usage} / </span>}
<span className="text-muted-foreground">{limit}</span>
</CompactRow>
);
@@ -207,7 +208,7 @@ export function CopyableCode({ value, title = "Copy address" }: CopyableCodeProp
onClick={handleCopy}
title={copied ? "Copied!" : title}
>
{copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
{copied ? <Check className="h-3 w-3 text-success" /> : <Copy className="h-3 w-3" />}
</Button>
</div>
);