feat:

--ADDED System matric
	--ADDED Node performante UI

src/App.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from 'react'
 import { Navigate, Route, Routes, useMatch, useNavigate, useParams } from 'react-router-dom'
 import './App.css'
 import NodeConnections from './NodeConnections'
+import NodeActiveConnections from './NodeActiveConnections'
+import NodePerformance from './NodePerformance'
 import NodeHardware from './NodeHardware'
 import ClusterNodeCard from './ClusterNodeCard'
 
@@ -619,7 +621,19 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
               </button>
             </div>
             {nodeId && clusterDetails.nodes.some((node) => node.uuid === nodeId) && (
-              <NodeConnections key={`${clusterId}/${nodeId}`} nodeId={nodeId} />
+              <>
+                <NodeActiveConnections
+                  key={`metrics/${clusterId}/${nodeId}`}
+                  nodeId={nodeId}
+                  nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
+                />
+                <NodePerformance
+                  key={`performance/${clusterId}/${nodeId}`}
+                  nodeId={nodeId}
+                  nodeName={clusterDetails.nodes.find((node) => node.uuid === nodeId)!.node_name}
+                />
+                <NodeConnections key={`${clusterId}/${nodeId}`} nodeId={nodeId} />
+              </>
             )}
           </section>
         )}