Merge remote-tracking branch 'upstream/develop' into feat/notification-modal

src/Components/Inputs/Select/index.jsx

@@ -18,6 +18,7 @@ import "./index.css";
  *    @param {string} props.items.name - The display name of each item.
  * @param {function} props.onChange - The function to handle onChange event.
  * @param {object} props.sx - The custom styles object for MUI Select component.
+ * @param {number} props.maxWidth - Maximum width in pixels for the select component. Enables responsive text truncation.
  * @returns {JSX.Element}
  *
  * @example
@@ -50,6 +51,7 @@ const Select = ({
 	sx,
 	name = "",
 	labelControlSpacing = 2,
+	maxWidth,
 }) => {
 	const theme = useTheme();
 	const itemStyles = {
@@ -59,6 +61,13 @@ const Select = ({
 		margin: theme.spacing(2),
 	};
 
+	const responsiveMaxWidth = {
+		xs: `${maxWidth * 0.5}px`,
+		sm: `${maxWidth * 0.75}px`,
+		md: `${maxWidth * 0.9}px`,
+		lg: `${maxWidth}px`,
+	};
+
 	return (
 		<Stack
 			gap={theme.spacing(labelControlSpacing)}
@@ -87,6 +96,7 @@ const Select = ({
 				sx={{
 					fontSize: 13,
 					minWidth: "125px",
+					...(maxWidth && { maxWidth: responsiveMaxWidth }),
 					"& fieldset": {
 						borderRadius: theme.shape.borderRadius,
 						borderColor: theme.palette.primary.lowContrast,
@@ -99,6 +109,22 @@ const Select = ({
 					},
 					...sx,
 				}}
+				renderValue={(selected) => {
+					const selectedItem = items.find((item) => item._id === selected);
+					const displayName = selectedItem ? selectedItem.name : placeholder;
+					return (
+						<Typography
+							sx={{
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+							}}
+							title={displayName}
+						>
+							{displayName}
+						</Typography>
+					);
+				}}
 			>
 				{placeholder && (
 					<MenuItem
@@ -146,6 +172,11 @@ Select.propTypes = {
 	onBlur: PropTypes.func,
 	sx: PropTypes.object,
 	labelControlSpacing: PropTypes.number,
+	/**
+	 * Maximum width in pixels. Used to control text truncation and element width.
+	 * Responsive breakpoints will be calculated as percentages of this value.
+	 */
+	maxWidth: PropTypes.number,
 };
 
 export default Select;

src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx

@@ -75,7 +75,7 @@ const DistributedUptimeMap = ({
 						type: "Feature",
 						geometry: {
 							type: "Point",
-							coordinates: [check.lng, check.lat],
+							coordinates: [check._id.lng, check._id.lat],
 						},
 						properties: {
 							color: theme.palette.accent.main,

src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Area/index.jsx

@@ -63,7 +63,7 @@ const DistributedUptimeResponseAreaChart = ({ checks }) => {
 				</defs>
 				<XAxis
 					stroke={theme.palette.primary.lowContrast}
-					dataKey="_id"
+					dataKey="_id.date"
 					tick={<CustomTick />}
 					minTickGap={0}
 					axisLine={false}

src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Bar/index.jsx

@@ -67,7 +67,7 @@ const DistributedUptimeResponseBarChart = ({ checks }) => {
 				/>
 				<XAxis
 					stroke={theme.palette.primary.lowContrast}
-					dataKey="_id"
+					dataKey="_id.date"
 					tick={<CustomTick />}
 					minTickGap={0}
 					axisLine={false}

src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/Helpers/ToolTip.jsx

@@ -75,7 +75,7 @@ CustomToolTip.propTypes = {
 		PropTypes.shape({
 			value: PropTypes.number,
 			payload: PropTypes.shape({
-				_id: PropTypes.string,
+				_id: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 				avgResponseTime: PropTypes.number,
 				originalAvgResponseTime: PropTypes.number,
 			}),

src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx

@@ -9,6 +9,11 @@ import PropTypes from "prop-types";
 
 const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
 	const theme = useTheme();
+	let timeSinceLastCheck = 0;
+
+	if (monitor?.lastCheckTimestamp) {
+		timeSinceLastCheck = Date.now() - monitor?.lastCheckTimestamp;
+	}
 
 	return (
 		<Stack
@@ -32,7 +37,7 @@ const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
 				heading={"Last check"}
 				subHeading={
 					<LastUpdate
-						lastUpdateTime={monitor?.timeSinceLastCheck ?? 0}
+						lastUpdateTime={timeSinceLastCheck}
 						suffix={"seconds ago"}
 					/>
 				}

src/Pages/DistributedUptime/Details/index.jsx

@@ -75,7 +75,6 @@ const DistributedUptimeDetails = () => {
 			</Stack>
 		);
 	}
-
 	return (
 		<Stack
 			direction="column"

src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx

@@ -25,11 +25,7 @@ const useSubscribeToMonitors = (page, rowsPerPage) => {
 				const initialDataRes = await networkService.getDistributedUptimeMonitors({
 					teamId: user.teamId,
 					limit: 25,
-					types: [
-						typeof import.meta.env.VITE_DEPIN_TESTING === "undefined"
-							? "distributed_http"
-							: "distributed_test",
-					],
+					types: ["distributed_http"],
 					page,
 					rowsPerPage,
 				});

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -254,7 +254,7 @@ const DistributedUptimeStatus = () => {
 						/>
 						<InfoBox
 							heading={isSmallScreen ? "UPT" : "UPT Burned"}
-							subHeading={safelyParseFloat(monitor?.totalUptBurnt).toFixed(4)}
+							subHeading={safelyParseFloat(monitor?.uptBurnt).toFixed(4)}
 							img={UptLogo}
 							alt="Upt Logo"
 							sx={{ width: "50%" }}

src/Pages/Incidents/Components/OptionsHeader/index.jsx

@@ -52,7 +52,7 @@ const OptionsHeader = ({
 						backgroundColor: theme.palette.primary.main,
 						color: theme.palette.primary.contrastTextSecondary,
 					}}
-					truncate={true}
+					maxWidth={250}
 				/>
 			</Stack>
 			<Stack {...stackStyles}>