fix: address review feedback

- Replace hardcoded button text with translation
- Fix status box translation to avoid showing removed title
- Add conditional rendering for optional gauge metrics

client/src/Pages/Logs/Diagnostics/components/gauges/index.jsx

@@ -14,10 +14,9 @@ const BaseContainer = ({children}) => {
 	return(
 		<Box 
 			sx={{
-				backgroundColor: theme.palette.background.paper,
 				padding: theme.spacing(3),
 				borderRadius: theme.spacing(2),
-				border: `1px solid ${theme.palette.primary.lowContrast}`,
+				border: `1px solid ${theme.palette.divider}`,
 				minWidth: 250,
 				width: "fit-content",
 			}}>
@@ -28,15 +27,28 @@ const BaseContainer = ({children}) => {
 
 const InfrastructureStyleGauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
 	const theme = useTheme();
-	const valueStyle = {
-		borderRadius: theme.spacing(2),
-		backgroundColor: theme.palette.tertiary.main,
-		width: "40%",
-		mb: theme.spacing(2),
-		mt: theme.spacing(2),
-		pr: theme.spacing(2),
-		textAlign: "right",
-	};
+
+	const MetricRow = ({ label, value }) => (
+		<Stack
+			justifyContent="space-between"
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(2)}
+		>
+			<Typography>{label}</Typography>
+			<Typography sx={{
+				borderRadius: theme.spacing(2),
+				backgroundColor: theme.palette.tertiary.main,
+				width: "40%",
+				mb: theme.spacing(2),
+				mt: theme.spacing(2),
+				pr: theme.spacing(2),
+				textAlign: "right",
+			}}>
+				{value}
+			</Typography>
+		</Stack>
+	);
 
 	return(
 		<BaseContainer>
@@ -47,7 +59,6 @@ const InfrastructureStyleGauge = ({ value, heading, metricOne, valueOne, metricT
 						flexDirection: "column",
 						alignItems: "center",
 						width: "100%",
-						backgroundColor: theme.palette.gradient?.color1 || "transparent"
 					}}
 				>
 					<CustomGauge progress={value} radius={100}/>
@@ -55,25 +66,11 @@ const InfrastructureStyleGauge = ({ value, heading, metricOne, valueOne, metricT
 						{heading}
 					</Typography>		
 				</Box>
-				<Box sx={{ width:"100%", borderTop:`1px solid ${theme.palette.primary.lowContrast}`}}>
-					<Stack
-						justifyContent={"space-between"}
-						direction="row"
-						alignItems="center"
-						gap={theme.spacing(2)}
-					>
-						<Typography>{metricOne}</Typography>
-						<Typography sx={valueStyle}>{valueOne}</Typography>
-					</Stack>
-					<Stack
-						justifyContent={"space-between"}
-						direction="row"
-						alignItems="center"
-						gap={theme.spacing(2)}
-					>
-						<Typography>{metricTwo}</Typography>
-						<Typography sx={valueStyle}>{valueTwo}</Typography>
-					</Stack>
+				<Box sx={{ width:"100%", borderTop:`1px solid ${theme.palette.divider}`}}>
+					<MetricRow label={metricOne} value={valueOne} />
+					{metricTwo && valueTwo && (
+						<MetricRow label={metricTwo} value={valueTwo} />
+					)}
 				</Box>
 			</Stack>
 		</BaseContainer>
@@ -105,38 +102,38 @@ const Gauges = ({ diagnostics, isLoading }) => {
 			spacing={theme.spacing(8)}
 			flexWrap="wrap"
 		>
-			<InfrastructureStyleGauge 
-			  value={heapTotalSize}
-			  heading={t("diagnosticsPage.gauges.heapAllocationTitle")}
-			  metricOne="% of available memory"
-			  valueOne={`${heapTotalSize?.toFixed(1)}%`}
-			  metricTwo="Total Heap Limit"
-			  valueTwo={formatBytes(diagnostics?.v8HeapStats?.heapSizeLimitBytes)}
-			  />
-			<InfrastructureStyleGauge 
-			  value={heapUsedSize}
-			  heading={t("diagnosticsPage.gauges.heapUsageTitle")}
-			  metricOne="% of available memory"
-			  valueOne={`${heapTotalSize?.toFixed(1)}%`}
-			  metricTwo="Used Heap Size"
-			  valueTwo={formatBytes(diagnostics?.v8HeapStats?.usedHeapSizeBytes)}
-			  />
-			<InfrastructureStyleGauge 
-			  value={actualHeapUsed}
-			  heading={t("diagnosticsPage.gauges.heapUtilizationTitle")}
-			  metricOne="% of available memory"
-			  valueOne={`${heapTotalSize?.toFixed(1)}%`}
-			  metricTwo="Total Heap Limit"
-			  valueTwo={formatBytes(diagnostics?.v8HeapStats?.totalHeapSizeBytes)}
-			  />
-			<InfrastructureStyleGauge 
-			  value={diagnostics?.cpuUsage?.usagePercentage}
-			  heading={t("diagnosticsPage.gauges.instantCpuUsageTitle")}
-			  metricOne="% of CPU used"
-			  valueOne={`${diagnostics?.cpuUsage?.usagePercentage?.toFixed(2)}%`}
-			  metricTwo="Usage level"
-			  valueTwo={diagnostics?.cpuUsage?.usagePercentage > 80 ? "High" : diagnostics?.cpuUsage?.usagePercentage > 50 ? "Medium" : "Low"}
-			  />
+			<InfrastructureStyleGauge
+				value={heapTotalSize}
+				heading={t("diagnosticsPage.gauges.heapAllocationTitle")}
+				metricOne={t("diagnosticsPage.gauges.heapAllocationSubtitle")}
+				valueOne={`${heapTotalSize?.toFixed(1) || 0}%`}
+				metricTwo={t("total")}
+				valueTwo={formatBytes(diagnostics?.v8HeapStats?.heapSizeLimitBytes)}
+			/>
+			<InfrastructureStyleGauge
+				value={heapUsedSize}
+				heading={t("diagnosticsPage.gauges.heapUsageTitle")}
+				metricOne={t("diagnosticsPage.gauges.heapUsageSubtitle")}
+				valueOne={`${heapUsedSize?.toFixed(1) || 0}%`}
+				metricTwo={t("used")}
+				valueTwo={formatBytes(diagnostics?.v8HeapStats?.usedHeapSizeBytes)}
+			/>
+			<InfrastructureStyleGauge
+				value={actualHeapUsed}
+				heading={t("diagnosticsPage.gauges.heapUtilizationTitle")}
+				metricOne={t("diagnosticsPage.gauges.heapUtilizationSubtitle")}
+				valueOne={`${actualHeapUsed?.toFixed(1) || 0}%`}
+				metricTwo={t("total")}
+				valueTwo={formatBytes(diagnostics?.v8HeapStats?.totalHeapSizeBytes)}
+			/>
+			<InfrastructureStyleGauge
+				value={diagnostics?.cpuUsage?.usagePercentage}
+				heading={t("diagnosticsPage.gauges.instantCpuUsageTitle")}
+				metricOne={t("diagnosticsPage.gauges.instantCpuUsageSubtitle")}
+				valueOne={`${diagnostics?.cpuUsage?.usagePercentage?.toFixed(1) || 0}%`}
+				metricTwo=""
+				valueTwo=""
+			/>
 		</Stack>
 	);
 };
@@ -146,4 +143,17 @@ Gauges.propTypes = {
 	isLoading: PropTypes.bool,
 };
 
+InfrastructureStyleGauge.propTypes = {
+    value: PropTypes.number,
+    heading: PropTypes.string,
+    metricOne: PropTypes.string,
+    valueOne: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    metricTwo: PropTypes.string,
+    valueTwo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+};
+ 
+BaseContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
 export default Gauges;

client/src/Pages/Logs/Diagnostics/index.jsx

@@ -20,39 +20,39 @@ const Diagnostics = () => {
 	// Setup
 	return (
 		<Stack gap={theme.spacing(10)}>
-			<StatusBoxes shouldRender={!isLoading} flexWrap="wrap">
+			<StatusBoxes flexWrap="wrap">
 				<StatBox
 					gradient={true}
 					status="up"
 					heading={t("status")}
 					subHeading={
 						error 
-							? "Error" 
+							? t("logsPage.logLevelSelect.values.error")
 							: isLoading 
-								? "Loading..." 
+								? t("commonSaving")
 								: diagnostics 
-									? "Diagnostics Available" 
-									: "No Data"
+									? t("diagnosticsPage.diagnosticDescription") 
+									: t("general.noOptionsFound", { unit: "data" })
 					}
 				/>
 				<StatBox
-					heading="Event loop delay"
+					heading={t("diagnosticsPage.stats.eventLoopDelayTitle")}
 					subHeading={getHumanReadableDuration(diagnostics?.eventLoopDelayMs)}
 				/>
 				<StatBox
-					heading="Uptime"
+					heading={t("diagnosticsPage.stats.uptimeTitle")}
 					subHeading={getHumanReadableDuration(diagnostics?.uptimeMs)}
 				/>
 				<StatBox
-					heading="Used Heap Size"
+					heading={t("diagnosticsPage.stats.usedHeapSizeTitle")}
 					subHeading={formatBytes(diagnostics?.v8HeapStats?.usedHeapSizeBytes)}
 				/>
 				<StatBox
-					heading="Total Heap Size"
+					heading={t("diagnosticsPage.stats.totalHeapSizeTitle")}
 					subHeading={formatBytes(diagnostics?.v8HeapStats?.totalHeapSizeBytes)}
 				/>
 				<StatBox
-					heading="OS Memory Limit"
+					heading={t("diagnosticsPage.stats.osMemoryLimitTitle")}
 					subHeading={formatBytes(diagnostics?.osStats?.totalMemoryBytes)}
 				/>
 			</StatusBoxes>
@@ -67,7 +67,7 @@ const Diagnostics = () => {
 					onClick={fetchDiagnostics}
 					loading={isLoading}
 				>
-					Fetch Diagnostics
+					{t("queuePage.refreshButton")}
 				</Button>
 			</Box>
 		</Stack>