a3da4f5ce7
- Add kubernetesStore.ts with Zustand state management (clusters, namespaces, resources, terminals, search, bulk selection) - Create 15 resource list components (Secret, ReplicaSet, Job, CronJob, Ingress, PVC, PV, ServiceAccount, Role, ClusterRole, RoleBinding, ClusterRoleBinding, HPA, Node, Event, ConfigMap) - Add advanced components (Terminal, YamlEditor, MetricsChart, SearchBar, ContextSwitcher, ApplicationView, PodDetail) - Update KubernetesPage.tsx to integrate kubernetesStore and add cluster management - Add ContextInfo and ResourceInfo types to tauriCommands.ts - All components pass ESLint, TypeScript, and pass 114 tests - Build successful
66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import React from "react";
|
|
import { Server } from "lucide-react";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui";
|
|
import { Badge } from "@/components/ui";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui";
|
|
|
|
interface ContextSwitcherProps {
|
|
clusters: { id: string; name: string; context: string; cluster_url?: string }[];
|
|
selectedClusterId: string;
|
|
onClusterChange: (clusterId: string) => void;
|
|
}
|
|
|
|
export function ContextSwitcher({ clusters, selectedClusterId, onClusterChange }: ContextSwitcherProps) {
|
|
const selectedCluster = clusters.find((c) => c.id === selectedClusterId);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Server className="w-5 h-5" />
|
|
Context Switcher
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground mb-2 block">
|
|
Current Cluster
|
|
</label>
|
|
<Select value={selectedClusterId} onValueChange={onClusterChange}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select cluster" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{clusters.map((cluster) => (
|
|
<SelectItem key={cluster.id} value={cluster.id}>
|
|
<div className="flex items-center gap-2">
|
|
<Server className="w-4 h-4" />
|
|
{cluster.name}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{selectedCluster && (
|
|
<div className="p-4 bg-muted rounded-md space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-muted-foreground">Context</span>
|
|
<Badge variant="secondary">{selectedCluster.context}</Badge>
|
|
</div>
|
|
{selectedCluster.cluster_url && (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm text-muted-foreground">Cluster URL</span>
|
|
<span className="text-sm font-mono truncate max-w-[200px]">{selectedCluster.cluster_url}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|