feat: adding Host component to Infrastructure and adapting it

Client/src/Pages/Infrastructure/index.jsx

@@ -27,6 +27,7 @@ import { Pagination } from "./components/TablePagination";
 // import { getInfrastructureMonitorsByTeamId } from "../../Features/InfrastructureMonitors/infrastructureMonitorsSlice";
 import { networkService } from "../../Utils/NetworkService.js";
 import CustomGauge from "../../Components/Charts/CustomGauge/index.jsx";
+import Host from "../Monitors/Home/host.jsx";
 
 const columns = [
 	{ label: "Host" },
@@ -124,7 +125,8 @@ function Infrastructure(/* {isAdmin} */) {
 	console.log({ monitors });
 	console.log(monitors[0]?.checks[0]?.memory.usage_percent);
 	const monitorsAsRows = monitors.map((monitor) => ({
-		ip: monitor.name,
+		url: monitor.url,
+		name: monitor.name,
 		status: determineState(monitor),
 		processor: (monitor?.checks[0]?.cpu.frequency / 1000).toFixed(2) + " GHz",
 		cpu: monitor?.checks[0]?.cpu.usage_percent * 100,
@@ -228,7 +230,12 @@ function Infrastructure(/* {isAdmin} */) {
 								/* ROWS */ monitorsAsRows.map((row, index) => (
 									<TableRow key={index}>
 										{/* TODO iterate over column and get column id, applying row[column.id] */}
-										<TableCell>{row.ip}</TableCell>
+										<TableCell>
+											<Host
+												title={row.name}
+												url={row.url}
+											/>
+										</TableCell>
 										<TableCell align="center">
 											<StatusLabel
 												status={row.status}

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -274,7 +274,10 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 										<TableCell>
 											<Host
 												key={monitor._id}
-												params={params}
+												url={params.url}
+												title={params.title}
+												percentageColor={params.percentageColor}
+												percentage={params.percentage}
 											/>
 										</TableCell>
 										<TableCell>

Client/src/Pages/Monitors/Home/host.jsx

@@ -6,12 +6,14 @@ import PropTypes from "prop-types";
  *
  * @component
  * @param {Object} params - An object containing the following properties:
+ * @param {string} params.url - The URL of the host.
  * @param {string} params.title - The name of the host.
  * @param {string} params.percentageColor - The color of the percentage text.
  * @param {number} params.percentage - The percentage to display.
  * @returns {React.ElementType} Returns a div element with the host details.
  */
-const Host = ({ params }) => {
+const Host = ({ url, title, percentageColor, percentage }) => {
+	const noTitle = title === undefined || title === url;
 	return (
 		<Box className="host">
 			<Box
@@ -32,30 +34,30 @@ const Host = ({ params }) => {
 					},
 				}}
 			>
-				{params.title}
+				{title}
 			</Box>
-			<Typography
-				component="span"
-				sx={{
-					color: params.percentageColor,
-					fontWeight: 500,
-					ml: "15px",
-				}}
-			>
-				{params.percentage}%
-			</Typography>
-			<Box sx={{ opacity: 0.6 }}>{params.url}</Box>
+			{percentageColor && percentage && (
+				<Typography
+					component="span"
+					sx={{
+						color: percentageColor,
+						fontWeight: 500,
+						ml: "15px",
+					}}
+				>
+					{percentage}%
+				</Typography>
+			)}
+			{!noTitle && <Box sx={{ opacity: 0.6 }}>{url}</Box>}
 		</Box>
 	);
 };
 
 Host.propTypes = {
-	params: PropTypes.shape({
-		title: PropTypes.string,
-		percentageColor: PropTypes.string,
-		percentage: PropTypes.string,
-		url: PropTypes.string,
-	}).isRequired,
+	title: PropTypes.string,
+	percentageColor: PropTypes.string,
+	percentage: PropTypes.string,
+	url: PropTypes.string,
 };
 
 export default Host;