Skip to content

Commit 1792977

Browse files
miaawongmiaawong
committed
f
1 parent cc44442 commit 1792977

File tree

2 files changed

+125
-164
lines changed

2 files changed

+125
-164
lines changed

‎web/src/components/wizard/setup/LinuxPreflightCheck.tsx

Lines changed: 94 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { ClusterConfig } from "../../../contexts/ConfigContext";
3-
import {
4-
XCircle,
5-
CheckCircle,
6-
Loader2,
7-
AlertTriangle,
8-
ChevronRight,
9-
} from "lucide-react";
3+
import { XCircle, CheckCircle, Loader2, AlertTriangle, ChevronRight } from "lucide-react";
104
import { useQuery, useMutation } from "@tanstack/react-query";
115
import Button from "../../common/Button";
126

@@ -44,10 +38,8 @@ interface InstallationConfigResponse {
4438
state: "Failed" | "Succeeded" | "Running";
4539
}
4640

47-
const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({
48-
onComplete,
49-
}) => {
50-
const [isChecking, setIsChecking] = useState(false);
41+
const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({ onComplete }) => {
42+
const [isPreflightsPolling, setIsPreflightsPolling] = useState(false);
5143
const [isConfigPolling, setIsConfigPolling] = useState(true);
5244

5345
// Mutation to run preflight checks
@@ -67,10 +59,10 @@ const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({
6759
return response.json() as Promise<PreflightResponse>;
6860
},
6961
onSuccess: () => {
70-
setIsChecking(true);
62+
setIsPreflightsPolling(true);
7163
},
7264
onError: () => {
73-
setIsChecking(false);
65+
setIsPreflightsPolling(false);
7466
onComplete(false);
7567
},
7668
});
@@ -100,10 +92,10 @@ const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({
10092
});
10193

10294
// Query to poll installation config status
103-
const {
104-
data: installationConfigStatus,
105-
isLoading: isInstallationConfigPolling,
106-
} = useQuery<InstallationConfigResponse, Error>({
95+
const { data: installationConfigStatus, isLoading: isInstallationConfigPolling } = useQuery<
96+
InstallationConfigResponse,
97+
Error
98+
>({
10799
queryKey: ["installationConfigStatus"],
108100
queryFn: async () => {
109101
const response = await fetch("/api/install/installation/status", {
@@ -138,43 +130,38 @@ const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({
138130
}
139131
return response.json() as Promise<PreflightResponse>;
140132
},
141-
enabled: isChecking,
133+
enabled: isPreflightsPolling,
142134
refetchInterval: 1000,
143135
});
144136

145137
// Handle preflight status changes
146138
useEffect(() => {
147-
if (
148-
preflightResponse?.status?.state === "Succeeded" ||
149-
preflightResponse?.status?.state === "Failed"
150-
) {
151-
setIsChecking(false);
139+
if (preflightResponse?.status?.state === "Succeeded" || preflightResponse?.status?.state === "Failed") {
140+
setIsPreflightsPolling(false);
152141
// Consider it successful if there are no failures
153142
const hasFailures = (preflightResponse.output?.fail?.length ?? 0) > 0;
154143
onComplete(!hasFailures);
155144
}
156145
}, [preflightResponse, onComplete]);
157146

158147
useEffect(() => {
148+
console.log(installationConfigStatus?.state, "installationConfigStatus");
159149
if (installationConfigStatus?.state === "Failed") {
160150
setIsConfigPolling(false);
161151
return; // Prevent running preflights if failed
162152
}
163153
if (installationConfigStatus?.state === "Succeeded") {
164154
runPreflights();
165-
setIsChecking(true);
155+
setIsPreflightsPolling(true);
166156
}
167157
}, [installationConfigStatus, runPreflights]);
168158

169-
const renderCheckStatus = (
170-
result: PreflightResult,
171-
type: "pass" | "warn" | "fail"
172-
) => {
159+
const renderCheckStatus = (result: PreflightResult, type: "pass" | "warn" | "fail") => {
173160
let Icon = Loader2;
174161
let statusColor = "text-blue-500";
175162
let iconClasses = "animate-spin";
176163

177-
if (!isChecking) {
164+
if (!setIsPreflightsPolling) {
178165
switch (type) {
179166
case "pass":
180167
Icon = CheckCircle;
@@ -199,16 +186,10 @@ const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({
199186
<Icon className={`w-5 h-5 ${iconClasses}`} />
200187
</div>
201188
<div className="ml-3">
202-
<h4 className="text-sm font-medium text-gray-900">
203-
{result.title}
204-
</h4>
189+
<h4 className="text-sm font-medium text-gray-900">{result.title}</h4>
205190
<p
206191
className={`mt-1 text-sm ${
207-
type === "pass"
208-
? "text-gray-500"
209-
: type === "warn"
210-
? "text-yellow-600"
211-
: "text-red-600"
192+
type === "pass" ? "text-gray-500" : type === "warn" ? "text-yellow-600" : "text-red-600"
212193
}`}
213194
>
214195
{result.message}
@@ -224,140 +205,120 @@ const LinuxPreflightCheck: React.FC<LinuxPreflightCheckProps> = ({
224205
{isInstallationConfigPolling && (
225206
<div className="flex flex-col items-center justify-center border rounded-xl bg-white py-16 px-8 w-full max-w-2xl mx-auto shadow-sm">
226207
<Loader2 className="w-10 h-10 text-blue-500 animate-spin mb-6" />
227-
<div className="text-2xl font-bold text-gray-900 mb-2">
228-
Validating host requirements...
229-
</div>
230-
<div className="text-gray-500 text-base">
231-
Please wait while we check your system.
232-
</div>
208+
<div className="text-2xl font-bold text-gray-900 mb-2">Validating host requirements...</div>
209+
<div className="text-gray-500 text-base">Please wait while we check your system.</div>
233210
</div>
234211
)}
235212
{!isInstallationConfigPolling && (
236213
<>
237214
{/* Header for Host Requirements Not Met */}
238-
{!isChecking &&
239-
(preflightResponse?.output?.fail?.length ?? 0) > 0 && (
240-
<div className="mb-6">
241-
<div className="flex items-center mb-2">
242-
<XCircle className="w-7 h-7 text-red-500 mr-2" />
243-
<span className="text-xl font-semibold text-gray-900">
244-
Host Requirements Not Met
245-
</span>
215+
{!setIsPreflightsPolling && (preflightResponse?.output?.fail?.length ?? 0) > 0 && (
216+
<div className="mb-6">
217+
<div className="flex items-center mb-2">
218+
<XCircle className="w-7 h-7 text-red-500 mr-2" />
219+
<span className="text-xl font-semibold text-gray-900">Host Requirements Not Met</span>
220+
</div>
221+
<div className="text-gray-600 text-sm mb-2">
222+
We found some issues that need to be resolved before proceeding with the installation.
223+
</div>
224+
</div>
225+
)}{" "}
226+
{isConfigPolling && (
227+
<div className="py-3">
228+
<div className="flex items-start">
229+
<div className="flex-shrink-0 text-blue-500">
230+
<Loader2 className="w-5 h-5 animate-spin" />
246231
</div>
247-
<div className="text-gray-600 text-sm mb-2">
248-
We found some issues that need to be resolved before
249-
proceeding with the installation.
232+
<div className="ml-3">
233+
<h4 className="text-sm font-medium text-gray-900">Validating host requirements...</h4>
234+
<p>Please wait while we check your system.</p>
250235
</div>
251236
</div>
252-
)}
253-
<h3 className="text-lg font-medium text-gray-900 mb-4">
254-
System Requirements Check
255-
</h3>
237+
</div>
238+
)}{" "}
256239
<div className="space-y-2 divide-y divide-gray-200">
257-
{isChecking ? (
240+
{isPreflightsPolling && (
258241
<div className="py-3">
259242
<div className="flex items-start">
260243
<div className="flex-shrink-0 text-blue-500">
261244
<Loader2 className="w-5 h-5 animate-spin" />
262245
</div>
263246
<div className="ml-3">
264-
<h4 className="text-sm font-medium text-gray-900">
265-
Running checks...
266-
</h4>
247+
<h4 className="text-sm font-medium text-gray-900">Running checks...</h4>
267248
</div>
268249
</div>
269250
</div>
270-
) : preflightResponse?.output ? (
251+
)}{" "}
252+
{preflightResponse?.output && (
271253
<>
272254
{/* Failures Box */}
273-
{preflightResponse.output.fail &&
274-
preflightResponse.output.fail.length > 0 && (
275-
<div className="mb-6 border border-red-200 bg-red-50 rounded-lg p-4">
276-
{preflightResponse.output.fail.map(
277-
(result: PreflightResult, index: number) => (
278-
<div
279-
key={`fail-${index}`}
280-
className="py-3 border-b last:border-b-0 border-red-100 flex items-start"
281-
>
282-
<div className="flex-shrink-0 text-red-500 mt-1">
283-
<XCircle className="w-5 h-5" />
284-
</div>
285-
<div className="ml-3">
286-
<h4 className="text-sm font-semibold text-gray-900">
287-
{result.title}
288-
</h4>
289-
<p className="mt-1 text-sm text-red-600">
290-
{result.message}
291-
</p>
292-
</div>
293-
</div>
294-
)
295-
)}
296-
</div>
297-
)}
298-
{/* Passes and Warnings */}
299-
{preflightResponse.output.pass?.map(
300-
(result: PreflightResult, index: number) => (
301-
<div key={`pass-${index}`}>
302-
{renderCheckStatus(result, "pass")}
303-
</div>
304-
)
305-
)}
306-
{preflightResponse.output.warn?.map(
307-
(result: PreflightResult, index: number) => (
308-
<div key={`warn-${index}`}>
309-
{renderCheckStatus(result, "warn")}
310-
</div>
311-
)
255+
{preflightResponse.output.fail && preflightResponse.output.fail.length > 0 && (
256+
<div className="mb-6 border border-red-200 bg-red-50 rounded-lg p-4">
257+
{preflightResponse.output.fail.map((result: PreflightResult, index: number) => (
258+
<div
259+
key={`fail-${index}`}
260+
className="py-3 border-b last:border-b-0 border-red-100 flex items-start"
261+
>
262+
<div className="flex-shrink-0 text-red-500 mt-1">
263+
<XCircle className="w-5 h-5" />
264+
</div>
265+
<div className="ml-3">
266+
<h4 className="text-sm font-semibold text-gray-900">{result.title}</h4>
267+
<p className="mt-1 text-sm text-red-600">{result.message}</p>
268+
</div>
269+
</div>
270+
))}
271+
</div>
312272
)}
273+
{/* Passes and Warnings */}
274+
{preflightResponse.output.pass?.map((result: PreflightResult, index: number) => (
275+
<div key={`pass-${index}`}>{renderCheckStatus(result, "pass")}</div>
276+
))}
277+
{preflightResponse.output.warn?.map((result: PreflightResult, index: number) => (
278+
<div key={`warn-${index}`}>{renderCheckStatus(result, "warn")}</div>
279+
))}
313280
</>
314-
) : (
281+
)}
282+
{installationConfigStatus?.state === "Failed" && (
315283
<div className="py-3">
316284
<div className="flex items-start">
317285
<div className="flex-shrink-0 text-red-500">
318286
<XCircle className="w-5 h-5" />
319287
</div>
320288
<div className="ml-3">
321-
<h4 className="text-sm font-medium text-gray-900">
322-
Failed to run checks
323-
</h4>
324-
<p className="mt-1 text-sm text-red-600">
325-
Unable to complete system requirement checks
326-
</p>
289+
<h4 className="text-sm font-medium text-gray-900">Failed to run checks</h4>
290+
<p className="mt-1 text-sm text-red-600">Unable to complete system requirement checks</p>
291+
<p className="mt-1 text-sm text-red-600">{installationConfigStatus?.description}</p>
327292
</div>
328293
</div>
329294
</div>
330295
)}
331296
</div>
332297
{/* What's Next Section - always at the bottom if there are failures */}
333-
{preflightResponse?.output?.fail &&
334-
preflightResponse.output.fail.length > 0 && (
335-
<div className="mt-8 bg-gray-50 border border-gray-200 rounded-lg p-4 w-full">
336-
<div className="font-semibold mb-2">What's Next?</div>
337-
<ul className="list-disc list-inside text-sm text-gray-700 space-y-1">
338-
<li>Review and address each failed requirement</li>
339-
<li>Click "Back" to modify your setup if needed</li>
340-
<li>Re-run the validation once issues are addressed</li>
341-
</ul>
342-
<button
343-
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
344-
onClick={() => runPreflights()}
345-
>
346-
Run Validation Again
347-
</button>
348-
</div>
349-
)}
298+
{preflightResponse?.output?.fail && preflightResponse.output.fail.length > 0 && (
299+
<div className="mt-8 bg-gray-50 border border-gray-200 rounded-lg p-4 w-full">
300+
<div className="font-semibold mb-2">What's Next?</div>
301+
<ul className="list-disc list-inside text-sm text-gray-700 space-y-1">
302+
<li>Review and address each failed requirement</li>
303+
<li>Click "Back" to modify your setup if needed</li>
304+
<li>Re-run the validation once issues are addressed</li>
305+
</ul>
306+
<button
307+
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
308+
onClick={() => runPreflights()}
309+
>
310+
Run Validation Again
311+
</button>
312+
</div>
313+
)}
350314
</>
351315
)}
352-
{/* doesn't matter if preflights is running or not, show install btn */}
353-
{!isChecking && (
354-
<Button
355-
onClick={runInstall}
356-
icon={<ChevronRight className="w-5 h-5" />}
357-
>
316+
{/* doesn't matter if preflights is running or not, show install btn
317+
{!setIsPreflightsPolling && (
318+
<Button onClick={runInstall} icon={<ChevronRight className="w-5 h-5" />}>
358319
{isSubmitting ? "Setting up..." : "Start Installation"}
359320
</Button>
360-
)}
321+
)} */}
361322
</div>
362323
);
363324
};

0 commit comments

Comments
 (0)