extract strings

client/src/Pages/Logs/TabDiagnostics.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useGet } from "@/Hooks/UseApi";
 import type { Diagnostics } from "@/Types/Diagnostics";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 
 export const TabDiagnostics = () => {
 	const theme = useTheme();
@@ -21,9 +22,9 @@ export const TabDiagnostics = () => {
 	} = useGet<Diagnostics>("/diagnostic/system", {}, { refreshInterval: 5000 });
 
 	return (
-		<Stack gap={theme.spacing(12)}>
-			<Stack gap={theme.spacing(4)}>
-				<Stack gap={theme.spacing(1)}>
+		<Stack gap={theme.spacing(LAYOUT.XL)}>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack gap={theme.spacing(SPACING.SM)}>
 					<Typography
 						variant="eyebrow"
 						color={theme.palette.text.secondary}
@@ -36,8 +37,8 @@ export const TabDiagnostics = () => {
 				</Stack>
 				<Stats diagnostics={diagnostics} />
 			</Stack>
-			<Stack gap={theme.spacing(4)}>
-				<Stack gap={theme.spacing(1)}>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack gap={theme.spacing(SPACING.SM)}>
 					<Typography
 						variant="eyebrow"
 						color={theme.palette.text.secondary}
@@ -50,27 +51,27 @@ export const TabDiagnostics = () => {
 				</Stack>
 				<StatGauges diagnostics={diagnostics} />
 			</Stack>
-			<Stack gap={theme.spacing(4)}>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
 				<Typography
 					variant="eyebrow"
 					color={theme.palette.text.secondary}
 				>
-					{t("MongoDB Stats")}
+					{t("pages.logs.diagnostics.sections.mongoDBStats.title")}
 				</Typography>
 				<Typography color={theme.palette.text.secondary}>
-					{t("Information about MongoDB")}
+					{t("pages.logs.diagnostics.sections.mongoDBStats.description")}
 				</Typography>
 				<MongoStats diagnostics={diagnostics} />
 			</Stack>
-			<Stack gap={theme.spacing(4)}>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
 				<Typography
 					variant="eyebrow"
 					color={theme.palette.text.secondary}
 				>
-					{t("MongoDB Collection Stats")}
+					{t("pages.logs.diagnostics.sections.mongoDBCollectionStats.title")}
 				</Typography>
 				<Typography color={theme.palette.text.secondary}>
-					{t("Information about Collections")}
+					{t("pages.logs.diagnostics.sections.mongoDBCollectionStats.description")}
 				</Typography>
 				<MongoCollectionStats diagnostics={diagnostics} />
 			</Stack>

client/src/Pages/Logs/components/MongoCollectionStats.tsx

@@ -3,6 +3,7 @@ import { StatBox, Gauge, Tooltip } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 
+import { useTranslation } from "react-i18next";
 import prettyBytes from "pretty-bytes";
 import { useTheme } from "@mui/material";
 import type { Diagnostics } from "@/Types/Diagnostics";
@@ -14,6 +15,7 @@ interface MongoStatsProps {
 
 export const MongoCollectionStats = ({ diagnostics }: MongoStatsProps) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 
 	const mongoStats = diagnostics?.mongoStats;
 	if (!mongoStats) {
@@ -41,17 +43,42 @@ export const MongoCollectionStats = ({ diagnostics }: MongoStatsProps) => {
 						justifyContent={"space-between"}
 					>
 						<Stack>
-							<Typography variant="body2">{`Documents: ${colStat.documentCount}`}</Typography>
+							{/* <Typography variant="body2">{`Documents: ${colStat.documentCount}`}</Typography> */}
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.documents", {
+									count: colStat.documentCount,
+								})}
+							</Typography>
 							{colStat.bucketCount !== undefined && (
-								<Typography variant="body2">{`Bucket count: ${colStat.bucketCount}`}</Typography>
+								<Typography variant="body2">
+									{t("pages.logs.diagnostics.mongoDBCollectionStats.bucketCount", {
+										count: colStat.bucketCount,
+									})}
+								</Typography>
 							)}
-							<Typography variant="body2">{`Storage size: ${prettyBytes(colStat.storageSize)}`}</Typography>
-							<Typography variant="body2">{`Index size: ${prettyBytes(colStat.totalIndexSize)}`}</Typography>
-							<Typography variant="body2">{`Total size: ${prettyBytes(colStat.totalSize)}`}</Typography>
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.storageSize", {
+									size: prettyBytes(colStat.storageSize),
+								})}
+							</Typography>
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.indexSize", {
+									size: prettyBytes(colStat.totalIndexSize),
+								})}
+							</Typography>
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.totalSize", {
+									size: prettyBytes(colStat.totalSize),
+								})}
+							</Typography>
 						</Stack>
 						<Stack alignItems={"center"}>
 							<Tooltip
-								title={`% of MongoDB storage used by ${colStat.name.toUpperCase()}`}
+								title={t("pages.logs.diagnostics.mongoDBCollectionStats.dbUsageTooltip", {
+									percentage: ((colStat.totalSize / mongoStats.totalSize) * 100).toFixed(
+										2
+									),
+								})}
 								placement="top"
 								slotProps={{
 									popper: {
@@ -66,10 +93,7 @@ export const MongoCollectionStats = ({ diagnostics }: MongoStatsProps) => {
 									},
 								}}
 							>
-								<Gauge
-									progress={(colStat.totalSize / mongoStats.totalSize) * 100}
-									unit="%"
-								/>
+								<Gauge progress={(colStat.totalSize / mongoStats.totalSize) * 100} />
 							</Tooltip>
 						</Stack>
 					</Stack>

client/src/Pages/Logs/components/MongoStats.tsx

@@ -1,6 +1,7 @@
 import Box from "@mui/material/Box";
 import { StatBox } from "@/Components/design-elements";
 
+import { useTranslation } from "react-i18next";
 import prettyBytes from "pretty-bytes";
 import { useTheme } from "@mui/material";
 import type { Diagnostics } from "@/Types/Diagnostics";
@@ -12,6 +13,7 @@ interface MongoStatsProps {
 
 export const MongoStats = ({ diagnostics }: MongoStatsProps) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 
 	const mongoStats = diagnostics?.mongoStats;
 	if (!mongoStats) {
@@ -28,23 +30,23 @@ export const MongoStats = ({ diagnostics }: MongoStatsProps) => {
 			}}
 		>
 			<StatBox
-				title={"Ready state"}
+				title={t("pages.logs.diagnostics.mongoDBStats.readyState")}
 				subtitle={mongoStats.readyState.toString()}
 			/>
 			<StatBox
-				title={"Host"}
+				title={t("pages.logs.diagnostics.mongoDBStats.host")}
 				subtitle={mongoStats.host}
 			/>
 			<StatBox
-				title={"Port"}
+				title={t("pages.logs.diagnostics.mongoDBStats.port")}
 				subtitle={mongoStats.port.toString()}
 			/>
 			<StatBox
-				title={"DB Name"}
+				title={t("pages.logs.diagnostics.mongoDBStats.dbName")}
 				subtitle={mongoStats.dbName}
 			/>
 			<StatBox
-				title={"Storage size"}
+				title={t("pages.logs.diagnostics.mongoDBStats.storageSize")}
 				subtitle={prettyBytes(mongoStats.totalSize)}
 			/>
 		</Box>

client/src/locales/en.json

@@ -952,6 +952,14 @@
 					"memoryCpu": {
 						"title": "Memory & CPU",
 						"description": "How the process is using its allocated memory and host CPU."
+					},
+					"mongoDBStats": {
+						"title": "MongoDB stats",
+						"description": "Snapshot of MongoDB metrics"
+					},
+					"mongoDBCollectionStats": {
+						"title": "MongoDB collection stats",
+						"description": "Stats for MongoDB collections"
 					}
 				},
 				"stats": {
@@ -961,6 +969,21 @@
 					"totalHeapSize": "Total heap size",
 					"osMemoryLimit": "OS memory limit"
 				},
+				"mongoDBStats": {
+					"readyState": "Ready state",
+					"host": "Host",
+					"port": "Port",
+					"dbName": "Database name",
+					"storageSize": "Storage size"
+				},
+				"mongoDBCollectionStats": {
+					"documents": "Documents: {{count}}",
+					"bucketCount": "Bucket count: {{count}}",
+					"storageSize": "Storage size: {{size}}",
+					"indexSize": "Index size: {{size}}",
+					"totalSize": "Total size: {{size}}",
+					"dbUsageTooltip": "{{percentage}}% of DB storage"
+				},
 				"gauges": {
 					"heapAllocation": "Heap allocation",
 					"heapUsage": "Heap usage",