Skip to content

Commit b0d77cf

Browse files
brettkolodnybrettkolodny
committed
fix: remove ternary
1 parent e81688c commit b0d77cf

File tree

1 file changed

+140
-134
lines changed

1 file changed

+140
-134
lines changed

‎site/src/pages/HealthPage/HealthLayout.tsx

Lines changed: 140 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -47,165 +47,171 @@ export const HealthLayout: FC = () => {
4747
const link = useClassName(classNames.link, []);
4848
const activeLink = useClassName(classNames.activeLink, []);
4949

50+
if (isLoading || !healthStatus) {
51+
return (
52+
<div className="p-6">
53+
<Loader />
54+
</div>
55+
);
56+
}
57+
58+
if (error) {
59+
return (
60+
<div className="p-6">
61+
<ErrorAlert error={error} />
62+
</div>
63+
);
64+
}
65+
5066
return (
5167
<>
5268
<Helmet>
5369
<title>{pageTitle("Health")}</title>
5470
</Helmet>
5571

56-
{healthStatus ? (
57-
<DashboardFullPage>
72+
<DashboardFullPage>
73+
<div
74+
css={{
75+
display: "flex",
76+
flexBasis: 0,
77+
flex: 1,
78+
overflow: "hidden",
79+
}}
80+
>
5881
<div
5982
css={{
60-
display: "flex",
61-
flexBasis: 0,
62-
flex: 1,
63-
overflow: "hidden",
83+
width: 256,
84+
flexShrink: 0,
85+
borderRight: `1px solid ${theme.palette.divider}`,
86+
fontSize: 14,
6487
}}
6588
>
6689
<div
6790
css={{
68-
width: 256,
69-
flexShrink: 0,
70-
borderRight: `1px solid ${theme.palette.divider}`,
71-
fontSize: 14,
91+
padding: 24,
92+
display: "flex",
93+
flexDirection: "column",
94+
gap: 16,
7295
}}
7396
>
74-
<div
75-
css={{
76-
padding: 24,
77-
display: "flex",
78-
flexDirection: "column",
79-
gap: 16,
80-
}}
81-
>
82-
<div>
83-
<div
84-
css={{
85-
display: "flex",
86-
alignItems: "center",
87-
justifyContent: "space-between",
88-
}}
89-
>
90-
<HealthIcon size={32} severity={healthStatus.severity} />
97+
<div>
98+
<div
99+
css={{
100+
display: "flex",
101+
alignItems: "center",
102+
justifyContent: "space-between",
103+
}}
104+
>
105+
<HealthIcon size={32} severity={healthStatus.severity} />
91106

92-
<Tooltip title="Refresh health checks">
93-
<IconButton
94-
size="small"
95-
disabled={isRefreshing}
96-
data-testid="healthcheck-refresh-button"
97-
onClick={() => {
98-
forceRefresh();
99-
}}
100-
>
101-
{isRefreshing ? (
102-
<CircularProgress size={16} />
103-
) : (
104-
<ReplayIcon css={{ width: 20, height: 20 }} />
105-
)}
106-
</IconButton>
107-
</Tooltip>
108-
</div>
109-
<div css={{ fontWeight: 500, marginTop: 16 }}>
110-
{healthStatus.healthy ? "Healthy" : "Unhealthy"}
111-
</div>
112-
<div
113-
css={{
114-
color: theme.palette.text.secondary,
115-
lineHeight: "150%",
116-
}}
117-
>
118-
{healthStatus.healthy
119-
? Object.keys(visibleSections).some((key) => {
120-
const section =
121-
healthStatus[key as keyof typeof visibleSections];
122-
return (
123-
section.warnings && section.warnings.length > 0
124-
);
125-
})
126-
? "All systems operational, but performance might be degraded"
127-
: "All systems operational"
128-
: "Some issues have been detected"}
129-
</div>
107+
<Tooltip title="Refresh health checks">
108+
<IconButton
109+
size="small"
110+
disabled={isRefreshing}
111+
data-testid="healthcheck-refresh-button"
112+
onClick={() => {
113+
forceRefresh();
114+
}}
115+
>
116+
{isRefreshing ? (
117+
<CircularProgress size={16} />
118+
) : (
119+
<ReplayIcon css={{ width: 20, height: 20 }} />
120+
)}
121+
</IconButton>
122+
</Tooltip>
130123
</div>
131-
132-
<div css={{ display: "flex", flexDirection: "column" }}>
133-
<span css={{ fontWeight: 500 }}>Last check</span>
134-
<span
135-
data-chromatic="ignore"
136-
css={{
137-
color: theme.palette.text.secondary,
138-
lineHeight: "150%",
139-
}}
140-
>
141-
{createDayString(healthStatus.time)}
142-
</span>
124+
<div css={{ fontWeight: 500, marginTop: 16 }}>
125+
{healthStatus.healthy ? "Healthy" : "Unhealthy"}
143126
</div>
144-
145-
<div css={{ display: "flex", flexDirection: "column" }}>
146-
<span css={{ fontWeight: 500 }}>Version</span>
147-
<span
148-
data-chromatic="ignore"
149-
css={{
150-
color: theme.palette.text.secondary,
151-
lineHeight: "150%",
152-
}}
153-
>
154-
{healthStatus.coder_version}
155-
</span>
127+
<div
128+
css={{
129+
color: theme.palette.text.secondary,
130+
lineHeight: "150%",
131+
}}
132+
>
133+
{healthStatus.healthy
134+
? Object.keys(visibleSections).some((key) => {
135+
const section =
136+
healthStatus[key as keyof typeof visibleSections];
137+
return section.warnings && section.warnings.length > 0;
138+
})
139+
? "All systems operational, but performance might be degraded"
140+
: "All systems operational"
141+
: "Some issues have been detected"}
156142
</div>
157143
</div>
158144

159-
<nav css={{ display: "flex", flexDirection: "column", gap: 1 }}>
160-
{Object.entries(visibleSections)
161-
.sort()
162-
.map(([key, label]) => {
163-
const healthSection =
164-
healthStatus[key as keyof typeof visibleSections];
145+
<div css={{ display: "flex", flexDirection: "column" }}>
146+
<span css={{ fontWeight: 500 }}>Last check</span>
147+
<span
148+
data-chromatic="ignore"
149+
css={{
150+
color: theme.palette.text.secondary,
151+
lineHeight: "150%",
152+
}}
153+
>
154+
{createDayString(healthStatus.time)}
155+
</span>
156+
</div>
157+
158+
<div css={{ display: "flex", flexDirection: "column" }}>
159+
<span css={{ fontWeight: 500 }}>Version</span>
160+
<span
161+
data-chromatic="ignore"
162+
css={{
163+
color: theme.palette.text.secondary,
164+
lineHeight: "150%",
165+
}}
166+
>
167+
{healthStatus.coder_version}
168+
</span>
169+
</div>
170+
</div>
171+
172+
<nav css={{ display: "flex", flexDirection: "column", gap: 1 }}>
173+
{Object.entries(visibleSections)
174+
.sort()
175+
.map(([key, label]) => {
176+
const healthSection =
177+
healthStatus[key as keyof typeof visibleSections];
165178

166-
return (
167-
<NavLink
168-
end
169-
key={key}
170-
to={`/health/${kebabCase(key)}`}
171-
className={({ isActive }) =>
172-
cx([link, isActive && activeLink])
173-
}
174-
>
175-
<HealthIcon
176-
size={16}
177-
severity={healthSection.severity as HealthSeverity}
179+
return (
180+
<NavLink
181+
end
182+
key={key}
183+
to={`/health/${kebabCase(key)}`}
184+
className={({ isActive }) =>
185+
cx([link, isActive && activeLink])
186+
}
187+
>
188+
<HealthIcon
189+
size={16}
190+
severity={healthSection.severity as HealthSeverity}
191+
/>
192+
{label}
193+
{healthSection.dismissed && (
194+
<NotificationsOffOutlined
195+
css={{
196+
fontSize: 14,
197+
marginLeft: "auto",
198+
color: theme.palette.text.disabled,
199+
}}
178200
/>
179-
{label}
180-
{healthSection.dismissed && (
181-
<NotificationsOffOutlined
182-
css={{
183-
fontSize: 14,
184-
marginLeft: "auto",
185-
color: theme.palette.text.disabled,
186-
}}
187-
/>
188-
)}
189-
</NavLink>
190-
);
191-
})}
192-
</nav>
193-
</div>
201+
)}
202+
</NavLink>
203+
);
204+
})}
205+
</nav>
206+
</div>
194207

195-
<div css={{ overflowY: "auto", width: "100%" }}>
196-
<Suspense fallback={<Loader />}>
197-
<Outlet context={healthStatus} />
198-
</Suspense>
199-
</div>
208+
<div css={{ overflowY: "auto", width: "100%" }}>
209+
<Suspense fallback={<Loader />}>
210+
<Outlet context={healthStatus} />
211+
</Suspense>
200212
</div>
201-
</DashboardFullPage>
202-
) : !isLoading && error ? (
203-
<div className="p-6">
204-
<ErrorAlert error={error} />
205213
</div>
206-
) : (
207-
<Loader />
208-
)}
214+
</DashboardFullPage>
209215
</>
210216
);
211217
};

0 commit comments

Comments
 (0)