Fix jwt-token

management/src/pages/System.jsx

@@ -98,63 +98,119 @@ const System = () => {
     )
   }
 
-  const ContainerCard = ({ name, metrics }) => (
-    <div className="bg-gray-50 rounded-lg p-4 border">
-      <h4 className="font-medium text-gray-900 mb-3 truncate" title={name}>
-        {name.replace('drone-detection-', '').replace('uamils-', '')}
-      </h4>
-      {metrics.error || metrics.status === 'health_check_failed' ? (
-        <div className="text-sm text-red-600">
-          <div className="font-medium">
-            {metrics.status === 'health_check_failed' ? 'Health Check Failed' : 'Not Available'}
-          </div>
-          <div className="text-xs mt-1">{metrics.error || metrics.message}</div>
-        </div>
-      ) : metrics.source === 'docker_compose' ? (
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between">
-            <span className="text-gray-500">Status</span>
-            <span className={`font-medium ${metrics.status === 'running' ? 'text-green-600' : 'text-red-600'}`}>
-              {metrics.status}
+  const ContainerCard = ({ name, metrics }) => {
+    const getTypeIcon = (type) => {
+      switch (type) {
+        case 'database': return '🗄️';
+        case 'cache': return '⚡';
+        case 'proxy': return '🌐';
+        case 'application': return '📱';
+        case 'logging': return '📋';
+        case 'monitoring': return '📊';
+        default: return '📦';
+      }
+    };
+    
+    const getTypeColor = (type) => {
+      switch (type) {
+        case 'database': return 'border-l-blue-500';
+        case 'cache': return 'border-l-yellow-500';
+        case 'proxy': return 'border-l-green-500';
+        case 'application': return 'border-l-purple-500';
+        case 'logging': return 'border-l-orange-500';
+        case 'monitoring': return 'border-l-red-500';
+        default: return 'border-l-gray-500';
+      }
+    };
+    
+    return (
+      <div className={`bg-gray-50 rounded-lg p-4 border-l-4 ${getTypeColor(metrics.type)} border border-gray-200`}>
+        <div className="flex items-center justify-between mb-3">
+          <h4 className="font-medium text-gray-900 truncate" title={name}>
+            <span className="mr-2">{getTypeIcon(metrics.type)}</span>
+            {name.replace('drone-detection-', '').replace('uamils-', '')}
+          </h4>
+          {metrics.type && (
+            <span className="text-xs bg-gray-200 text-gray-600 px-2 py-1 rounded-full">
+              {metrics.type}
             </span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-500">Health</span>
-            <span className="font-medium">{metrics.health}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-500">Ports</span>
-            <span className="font-medium text-xs">{metrics.ports || 'N/A'}</span>
-          </div>
-          <div className="text-xs text-blue-600 mt-2">Source: Docker Compose</div>
+          )}
         </div>
-      ) : (
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between">
-            <span className="text-gray-500">CPU</span>
-            <span className="font-medium">{metrics.cpu}</span>
+        
+        {metrics.error || metrics.status === 'health_check_failed' || metrics.status === 'unreachable' ? (
+          <div className="text-sm text-red-600">
+            <div className="font-medium">
+              {metrics.status === 'health_check_failed' ? 'Health Check Failed' :
+               metrics.status === 'unreachable' ? 'Unreachable' :
+               metrics.status === 'timeout' ? 'Timeout' : 'Not Available'}
+            </div>
+            <div className="text-xs mt-1">{metrics.error || metrics.message}</div>
           </div>
-          <div className="flex justify-between">
-            <span className="text-gray-500">Memory</span>
-            <span className="font-medium">{metrics.memory?.percentage || metrics.memory}</span>
+        ) : metrics.status === 'responding' ? (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-500">Status</span>
+              <span className="font-medium text-green-600">Responding</span>
+            </div>
+            <div className="text-xs text-gray-500">
+              Basic connectivity confirmed
+            </div>
           </div>
-          <div className="flex justify-between">
-            <span className="text-gray-500">Network I/O</span>
-            <span className="font-medium text-xs">{metrics.network}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-500">Disk I/O</span>
-            <span className="font-medium text-xs">{metrics.disk}</span>
-          </div>
-          {metrics.source && (
+        ) : metrics.source === 'docker_compose' || metrics.source === 'process_list' ? (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-500">Status</span>
+              <span className={`font-medium ${
+                metrics.status === 'running' ? 'text-green-600' : 
+                metrics.status === 'Up' ? 'text-green-600' : 'text-red-600'
+              }`}>
+                {metrics.status}
+              </span>
+            </div>
+            {metrics.health && (
+              <div className="flex justify-between">
+                <span className="text-gray-500">Health</span>
+                <span className="font-medium">{metrics.health}</span>
+              </div>
+            )}
+            {metrics.ports && (
+              <div className="flex justify-between">
+                <span className="text-gray-500">Ports</span>
+                <span className="font-medium text-xs">{metrics.ports}</span>
+              </div>
+            )}
             <div className="text-xs text-blue-600 mt-2">
               Source: {metrics.source.replace('_', ' ').toUpperCase()}
             </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
+          </div>
+        ) : (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-500">CPU</span>
+              <span className="font-medium">{metrics.cpu}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Memory</span>
+              <span className="font-medium">{metrics.memory?.percentage || metrics.memory}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Network I/O</span>
+              <span className="font-medium text-xs">{metrics.network}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Disk I/O</span>
+              <span className="font-medium text-xs">{metrics.disk}</span>
+            </div>
+            {metrics.source && (
+              <div className="text-xs text-blue-600 mt-2">
+                Source: {metrics.source.replace('_', ' ').toUpperCase()}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
 
   const SSLCard = ({ domain, ssl }) => (
     <div className="bg-gray-50 rounded-lg p-4 border">
@@ -336,10 +392,38 @@ const System = () => {
               <div className="text-sm mt-1">{systemInfo.containers.message}</div>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {Object.entries(systemInfo.containers).map(([name, metrics]) => (
-                <ContainerCard key={name} name={name} metrics={metrics} />
-              ))}
+            <div className="space-y-6">
+              {/* Group containers by type */}
+              {['application', 'database', 'cache', 'proxy', 'logging', 'monitoring', 'unknown'].map(type => {
+                const containersOfType = Object.entries(systemInfo.containers).filter(([name, metrics]) => 
+                  metrics.type === type || (type === 'unknown' && !metrics.type)
+                );
+                
+                if (containersOfType.length === 0) return null;
+                
+                const typeLabels = {
+                  application: '📱 Application Services',
+                  database: '🗄️ Database Services', 
+                  cache: '⚡ Cache Services',
+                  proxy: '🌐 Proxy & Load Balancers',
+                  logging: '📋 Logging Services',
+                  monitoring: '📊 Monitoring Services',
+                  unknown: '📦 Other Services'
+                };
+                
+                return (
+                  <div key={type}>
+                    <h4 className="text-sm font-medium text-gray-700 mb-3 border-b pb-2">
+                      {typeLabels[type]} ({containersOfType.length})
+                    </h4>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {containersOfType.map(([name, metrics]) => (
+                        <ContainerCard key={name} name={name} metrics={metrics} />
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
           )}
         </StatusCard>