Merge branch 'develop' into fix/fe/monitors-rename

Client/src/Pages/Infrastructure/CreateMonitor/index.jsx

@@ -303,7 +303,6 @@ const CreateInfrastructureMonitor = () => {
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
-						<Typography component="p">When there is a new incident,</Typography>
 						<Checkbox
 							id="notify-email-default"
 							label={`Notify via email (to ${user.email})`}

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -283,7 +283,7 @@ const InfrastructureDetails = () => {
 			{
 				type: "memory",
 				value: decimalToPercentage(memoryUsagePercent),
-				heading: "Memory Usage",
+				heading: "Memory usage",
 				metricOne: "Used",
 				valueOne: formatBytes(memoryUsedBytes),
 				metricTwo: "Total",
@@ -292,7 +292,7 @@ const InfrastructureDetails = () => {
 			{
 				type: "cpu",
 				value: decimalToPercentage(cpuUsagePercent),
-				heading: "CPU Usage",
+				heading: "CPU usage",
 				metricOne: "Cores",
 				valueOne: cpuPhysicalCores ?? 0,
 				metricTwo: "Frequency",
@@ -364,7 +364,7 @@ const InfrastructureDetails = () => {
 				heading: "Memory usage",
 				strokeColor: theme.palette.primary.main,
 				gradientStartColor: theme.palette.primary.main,
-				yLabel: "Memory Usage",
+				yLabel: "Memory usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
 				xTick: <TzTick />,
@@ -372,7 +372,7 @@ const InfrastructureDetails = () => {
 					<InfrastructureTooltip
 						dotColor={theme.palette.primary.main}
 						yKey={"memory.usage_percent"}
-						yLabel={"Memory Usage"}
+						yLabel={"Memory usage"}
 					/>
 				),
 			},
@@ -383,7 +383,7 @@ const InfrastructureDetails = () => {
 				heading: "CPU usage",
 				strokeColor: theme.palette.success.main,
 				gradientStartColor: theme.palette.success.main,
-				yLabel: "CPU Usage",
+				yLabel: "CPU usage",
 				yDomain: [0, 1],
 				yTick: <PercentTick />,
 				xTick: <TzTick />,
@@ -391,7 +391,7 @@ const InfrastructureDetails = () => {
 					<InfrastructureTooltip
 						dotColor={theme.palette.success.main}
 						yKey={"cpu.usage_percent"}
-						yLabel={"CPU Usage"}
+						yLabel={"CPU usage"}
 					/>
 				),
 			},

Client/src/Pages/Infrastructure/index.jsx

@@ -191,31 +191,26 @@ function Infrastructure() {
 				<SkeletonLayout />
 			) : monitorState.monitors?.length !== 0 ? (
 				<Stack gap={theme.spacing(8)}>
-					<Breadcrumbs list={BREADCRUMBS} />
-					<Stack
-						direction="row"
-						sx={{
-							justifyContent: "end",
-							alignItems: "center",
-							gap: "1rem",
-							flexWrap: "wrap",
-							marginBottom: "2rem",
-						}}
-					>
-						{/* 
-				This will be removed from here, but keeping the commented code to remind me to add a max width to the greeting component
-				<Box style={{ maxWidth: "65ch" }}>
-					<Greeting type="uptime" />
-				</Box> */}
-						<Button
-							variant="contained"
-							color="primary"
-							onClick={navigateToCreate}
-							sx={{ fontWeight: 500 }}
+					<Box>
+						<Breadcrumbs list={BREADCRUMBS} />
+						<Stack
+							direction="row"
+							justifyContent="end"
+							alignItems="center"
+							mt={theme.spacing(5)}
 						>
-							Create infrastructure monitor
-						</Button>
-					</Stack>
+							{isAdmin && (
+								<Button
+									variant="contained"
+									color="primary"
+									onClick={navigateToCreate}
+									sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
+								>
+									Create new
+								</Button>
+							)}
+						</Stack>
+					</Box>
 					<Stack
 						sx={{
 							gap: "1rem",