Merge pull request #70 from oslabs-beta/dev

Dev

Author: amitharor

client/src/components/ClusterSelector.tsx

@@ -7,14 +7,15 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useCluster } from '@/contexts/ClusterContext';
-import { ServerIcon, MapPinIcon } from 'lucide-react';
+import { ServerIcon } from 'lucide-react';
 
 const ClusterSelector: React.FC = () => {
-  const { clusters, selectedCluster, setSelectedCluster, loading } = useCluster();
+  const { clusters, selectedCluster, setSelectedCluster, loading } =
+    useCluster();
 
   if (loading) {
     return (
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <div className="text-muted-foreground flex items-center gap-2 text-sm">
         <ServerIcon className="h-4 w-4" />
         Loading clusters...
       </div>
@@ -23,7 +24,7 @@ const ClusterSelector: React.FC = () => {
 
   if (clusters.length === 0) {
     return (
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <div className="text-muted-foreground flex items-center gap-2 text-sm">
         <ServerIcon className="h-4 w-4" />
         No clusters available
       </div>
@@ -32,21 +33,23 @@ const ClusterSelector: React.FC = () => {
 
   const handleClusterChange = (value: string) => {
     const [name, location] = value.split('|');
-    const cluster = clusters.find(c => c.name === name && c.location === location);
+    const cluster = clusters.find(
+      (c) => c.name === name && c.location === location,
+    );
     if (cluster) {
       setSelectedCluster(cluster);
     }
   };
 
-  const selectedValue = selectedCluster 
+  const selectedValue = selectedCluster
     ? `${selectedCluster.name}|${selectedCluster.location}`
     : '';
 
   return (
     <div className="flex items-center gap-3">
       <div className="flex items-center gap-2 text-sm font-medium">
-        <ServerIcon className="h-4 w-4 text-primary" />
-        <span>Cluster:</span>
+        <ServerIcon className="text-primary h-4 w-4" />
+        <span>Connected to</span>
       </div>
       <Select value={selectedValue} onValueChange={handleClusterChange}>
         <SelectTrigger className="w-[280px]">
@@ -60,10 +63,6 @@ const ClusterSelector: React.FC = () => {
                 <div className="flex items-center gap-2">
                   <div className="flex flex-col">
                     <span className="font-medium">{cluster.name}</span>
-                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                      <MapPinIcon className="h-3 w-3" />
-                      {cluster.location}
-                    </div>
                   </div>
                 </div>
               </SelectItem>
@@ -76,4 +75,3 @@ const ClusterSelector: React.FC = () => {
 };
 
 export default ClusterSelector;
-

client/src/components/EnhancedInfoCard.tsx

@@ -9,6 +9,7 @@ import {
   NetworkIcon,
   ServerIcon,
   Activity,
+  MapPinIcon,
 } from 'lucide-react';
 import { useFetchMetrics } from '../hooks/hookMetric';
 import { motion } from 'motion/react';
@@ -43,7 +44,11 @@ const StatusBadge = ({ status }: { status: string }) => {
 };
 
 const GKEClusterCard: React.FC = () => {
-  const { selectedCluster: cluster, loading: clusterLoading, error } = useCluster();
+  const {
+    selectedCluster: cluster,
+    loading: clusterLoading,
+    error,
+  } = useCluster();
 
   const cpuMetric = 'kubernetes.io/container/cpu/limit_utilization';
   const memMetric = 'kubernetes.io/container/memory/request_utilization';