Skip to content

Commit 4b506b4

Browse files
author
yusing
committed
fix: UI fixes, drop react babel compiler completely
1 parent 077bfaf commit 4b506b4

File tree

9 files changed

+93
-364
lines changed

9 files changed

+93
-364
lines changed

‎Dockerfile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,6 @@ ENV PORT=3000
4848
ENV NODE_ENV=production
4949
ENV HOSTNAME="127.0.0.1"
5050

51+
USER 1001:1001
52+
5153
CMD ["server.js"]

‎next.config.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@
66
/** @type {import("next").NextConfig} */
77
const config = {
88
experimental: {
9-
optimizePackageImports: ["@chakra-ui/react","godoxy-schemas"],
10-
// disable react compiler in production to avoid misterious user input bugs
11-
reactCompiler: process.env.NODE_ENV !== "production",
9+
optimizePackageImports: ["@chakra-ui/react", "godoxy-schemas"],
1210
},
1311
transpilePackages: ["geist"],
1412
output: "standalone",

‎package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,8 @@
6060
"@types/react-resizable": "^3.0.8",
6161
"@typescript-eslint/eslint-plugin": "^8.31.0",
6262
"@typescript-eslint/parser": "^8.31.0",
63-
"babel-plugin-react-compiler": "19.1.0-rc.1",
6463
"eslint": "^9.25.1",
6564
"eslint-config-next": "^15.3.1",
66-
"eslint-plugin-react-compiler": "19.1.0-rc.1",
6765
"postcss": "^8.5.3",
6866
"prettier": "^3.5.3",
6967
"prettier-plugin-tailwindcss": "^0.6.11",

‎pnpm-lock.yaml

Lines changed: 7 additions & 307 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/config_editor/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function ConfigEditorPage() {
3030
>
3131
<UIEditor />
3232
</Box>
33-
<Stack w="40%" minW="800px" overflow="auto" fontSize="sm">
33+
<Stack minW="40%" overflow="auto" fontSize="sm">
3434
<YAMLConfigEditor />
3535
<ValidationErrorText />
3636
</Stack>

‎src/components/dashboard/favicon.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
import { Skeleton } from "@/components/ui/skeleton";
22
import Endpoints from "@/types/api/endpoints";
33
import { HomepageItem } from "@/types/api/route/homepage_item";
4-
import React, { useState } from "react";
4+
import { memo, useState } from "react";
55
import { Avatar, AvatarProps } from "../ui/avatar";
66

7-
interface FavIconProps {
7+
interface FavIconProps extends Omit<AvatarProps, "size"> {
88
size?: number | string;
99
item?: HomepageItem;
1010
url?: string;
1111
}
1212

13-
export const FavIcon: React.FC<FavIconProps & Omit<AvatarProps, "size">> = ({
14-
size,
15-
item,
16-
url,
17-
...props
18-
}) => {
13+
function FavIcon_({ size, item, url, ...props }: FavIconProps) {
1914
const [loading, setLoading] = useState(true);
2015
return (
2116
<Skeleton
@@ -34,4 +29,12 @@ export const FavIcon: React.FC<FavIconProps & Omit<AvatarProps, "size">> = ({
3429
/>
3530
</Skeleton>
3631
);
37-
};
32+
}
33+
34+
export const FavIcon = memo(FavIcon_, (prev, next) => {
35+
return (
36+
prev.item?.alias === next.item?.alias &&
37+
prev.url === next.url &&
38+
prev.size === next.size
39+
);
40+
});

‎src/components/health_status.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
HealthStatusType,
44
} from "@/types/api/health";
55
import { Status as ChakraStatus, HStack, Text } from "@chakra-ui/react";
6-
import React from "react";
6+
import React, { memo } from "react";
77
import { Tag } from "./ui/tag";
88

99
export interface HealthStatusProps extends ChakraStatus.RootProps {
@@ -39,9 +39,9 @@ const HealthStatusTag_: React.FC<HealthStatusProps & { fontSize?: string }> = ({
3939
);
4040
};
4141

42-
export const HealthStatus = React.memo(HealthStatus_, (prev, next) => {
42+
export const HealthStatus = memo(HealthStatus_, (prev, next) => {
4343
return prev.value === next.value;
4444
});
45-
export const HealthStatusTag = React.memo(HealthStatusTag_, (prev, next) => {
45+
export const HealthStatusTag = memo(HealthStatusTag_, (prev, next) => {
4646
return prev.value === next.value;
4747
});

‎src/components/metrics/settings.tsx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -165,21 +165,19 @@ export function MetricsSettings() {
165165
</Stack>
166166
</Table.Cell>
167167
<Table.Cell asChild>
168-
<Stack gap="2">
169-
<Field label="Temperature Unit">
170-
<RadioGroup
171-
value={temperatureUnit.val}
172-
onValueChange={({ value }) =>
173-
temperatureUnit.set(value as "fahrenheit" | "celsius")
174-
}
175-
>
176-
<HStack gap="4">
177-
<Radio value="celsius">°C</Radio>
178-
<Radio value="fahrenheit">°F</Radio>
179-
</HStack>
180-
</RadioGroup>
181-
</Field>
182-
</Stack>
168+
<Field label="Temperature Unit">
169+
<RadioGroup
170+
value={temperatureUnit.val}
171+
onValueChange={({ value }) =>
172+
temperatureUnit.set(value as "fahrenheit" | "celsius")
173+
}
174+
>
175+
<HStack gap="4">
176+
<Radio value="celsius">°C</Radio>
177+
<Radio value="fahrenheit">°F</Radio>
178+
</HStack>
179+
</RadioGroup>
180+
</Field>
183181
</Table.Cell>
184182
</Table.Row>
185183
</Table.Body>

‎src/components/metrics/uptime.tsx

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
Spinner,
2929
Stack,
3030
} from "@chakra-ui/react";
31-
import React, { FC, useState, useMemo, memo } from "react";
31+
import React, { FC, memo, useMemo, useState } from "react";
3232
import { useLocation, useWindowSize } from "react-use";
3333
import { FavIcon } from "../dashboard/favicon";
3434
import { HealthStatus, HealthStatusTag } from "../health_status";
@@ -134,36 +134,53 @@ const Layout = ({ metrics }: { metrics: RouteUptimeMetrics }) => {
134134
);
135135
};
136136

137+
function title(metrics: RouteUptimeMetrics) {
138+
if (!metrics.display_name) {
139+
return metrics.alias;
140+
}
141+
// if (metrics.display_name.length === metrics.alias.length) {
142+
// return metrics.display_name;
143+
// }
144+
// return `${metrics.display_name} (${metrics.alias})`;
145+
return metrics.display_name;
146+
}
147+
148+
function TitleLabel_({ metrics }: { metrics: RouteUptimeMetrics }) {
149+
return (
150+
<Label fontSize={"md"} title={metrics.alias}>
151+
{title(metrics)}
152+
</Label>
153+
);
154+
}
155+
156+
const TitleLabel = memo(
157+
TitleLabel_,
158+
(prev, next) => title(prev.metrics) === title(next.metrics),
159+
);
160+
137161
interface RouteUptimeProps extends CardRootProps {
138162
metrics: RouteUptimeMetrics;
139163
}
140164

141165
const RouteUptime: FC<RouteUptimeProps> = ({ metrics, ...props }) => {
142166
return (
143-
<Card.Root
144-
size="sm"
145-
minW="300px"
146-
maxW="full"
147-
maxH="180px"
148-
title={metrics.alias}
149-
{...props}
150-
>
167+
<Card.Root size="sm" minW="300px" maxW="full" maxH="180px" {...props}>
151168
<Card.Header>
152169
<HStack justify={"space-between"}>
153170
<Group overflow={"hidden"}>
154171
<FavIcon
155172
size="24px"
156173
item={{ alias: metrics.alias } as HomepageItem}
157174
/>
158-
<Label>{metrics.display_name || metrics.alias}</Label>
175+
<TitleLabel metrics={metrics} />
159176
</Group>
160177
<HealthStatusTag
161178
value={metrics.statuses[metrics.statuses.length - 1]!.status}
162179
/>
163180
</HStack>
164181
</Card.Header>
165182
<Card.Body>
166-
<UptimeTracker statuses={metrics.statuses} />
183+
<UptimeTracker alias={metrics.alias} statuses={metrics.statuses} />
167184
</Card.Body>
168185
<Card.Footer>
169186
<HStack gap="2" w="full" justify={"space-between"}>
@@ -192,7 +209,6 @@ const RouteUptimeSquare: FC<RouteUptimeProps> = ({ metrics, ...props }) => {
192209
size="sm"
193210
w={`${squareCardSize.val}px`}
194211
h={`${squareCardSize.val}px`}
195-
title={metrics.alias}
196212
overflow={"hidden"}
197213
{...props}
198214
>
@@ -207,7 +223,7 @@ const RouteUptimeSquare: FC<RouteUptimeProps> = ({ metrics, ...props }) => {
207223
item={{ alias: metrics.alias } as HomepageItem}
208224
/>
209225
<Label w={`${squareCardSize.val * 0.85}px`} textAlign={"center"}>
210-
{metrics.display_name || metrics.alias}
226+
{title(metrics)}
211227
</Label>
212228
</Stack>
213229
</Center>
@@ -232,17 +248,15 @@ const RouteUptimeSquare: FC<RouteUptimeProps> = ({ metrics, ...props }) => {
232248

233249
const RouteUptimeMinimal: FC<RouteUptimeProps> = ({ metrics, ...props }) => {
234250
return (
235-
<Card.Root size="sm" maxH="180px" title={metrics.alias} {...props}>
251+
<Card.Root size="sm" maxH="180px" {...props}>
236252
<Card.Body>
237253
<HStack w="full" justifyContent={"space-between"}>
238254
<HStack gap="2" overflow={"hidden"}>
239255
<FavIcon
240256
size="26px"
241257
item={{ alias: metrics.alias } as HomepageItem}
242258
/>
243-
<Label fontSize={"md"}>
244-
{metrics.display_name || metrics.alias}
245-
</Label>
259+
<TitleLabel metrics={metrics} />
246260
</HStack>
247261
<HealthStatusTag
248262
fontSize={"sm"}
@@ -294,16 +308,25 @@ function fillStatuses(statuses: RouteStatus[], count: number): RouteStatus[] {
294308
return [...dummy, ...statuses];
295309
}
296310

297-
const UptimeTracker: React.FC<{ statuses: RouteStatus[] }> = ({ statuses }) => {
311+
const UptimeTracker: React.FC<{ alias: string; statuses: RouteStatus[] }> = ({
312+
alias,
313+
statuses,
314+
}) => {
298315
const { width } = useWindowSize();
299316
const colsCount = useColsCount();
300-
const count = useMemo(() => Math.floor(width / colsCount.val / 15), [width, colsCount.val]);
301-
const statusesToShow = useMemo(() => fillStatuses(statuses, count), [statuses, count]);
317+
const count = useMemo(
318+
() => Math.floor(width / colsCount.val / 15.5),
319+
[width, colsCount.val],
320+
);
321+
const statusesToShow = useMemo(
322+
() => fillStatuses(statuses, count),
323+
[statuses, count],
324+
);
302325

303326
return (
304327
<HStack gap="1">
305328
{statusesToShow.map((s, i) => (
306-
<UptimeStatus key={i} status={s} />
329+
<UptimeStatus key={`${alias}-${i}`} status={s} />
307330
))}
308331
</HStack>
309332
);
@@ -315,13 +338,20 @@ const UptimeStatus = memo<{ status: RouteStatus }>(
315338
return <Box borderRadius={"xs"} w="full" h="6" bg={"gray.500"} />;
316339
}
317340
return (
318-
<Tooltip content={`${formatTimestamp(status.timestamp)} - ${status.latency.toFixed(0)}ms`}>
319-
<Box borderRadius={"xs"} w="full" h="6" bg={healthStatusColors[status.status]} />
341+
<Tooltip
342+
content={`${formatTimestamp(status.timestamp)} - ${status.latency.toFixed(0)}ms`}
343+
>
344+
<Box
345+
borderRadius={"xs"}
346+
w="full"
347+
h="6"
348+
bg={healthStatusColors[status.status]}
349+
/>
320350
</Tooltip>
321351
);
322352
},
323353
(prev, next) =>
324354
prev.status.timestamp === next.status.timestamp &&
325355
prev.status.latency === next.status.latency &&
326-
prev.status.status === next.status.status
356+
prev.status.status === next.status.status,
327357
);

0 commit comments

Comments
 (0)