From c6ebe5a360f65fe0af9e93725514881abf85510a Mon Sep 17 00:00:00 2001
From: ic3w0lf <bob@ic3.space>
Date: Thu, 3 Apr 2025 15:45:59 -0600
Subject: [PATCH 1/2] stop polling on completeion/fail
---
web/src/app/operations/[operationId]/page.tsx | 67 ++++++++++---------
1 file changed, 35 insertions(+), 32 deletions(-)
diff --git a/web/src/app/operations/[operationId]/page.tsx b/web/src/app/operations/[operationId]/page.tsx
index 6f0763c..d712cdd 100644
--- a/web/src/app/operations/[operationId]/page.tsx
+++ b/web/src/app/operations/[operationId]/page.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
import { useParams, useRouter } from "next/navigation";
import { CircularProgress, Typography, Card, CardContent, Button } from "@mui/material";
import Webpage from "@/app/_components/webpage";
@@ -17,23 +17,31 @@ interface Operation {
}
export default function OperationStatusPage() {
- const { operationId } = useParams();
const router = useRouter();
- const [operation, setOperation] = useState<Operation | null>(null);
+ const { operationId } = useParams();
+
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
+ const [operation, setOperation] = useState<Operation | null>(null);
+
+ const intervalRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
if (!operationId) return;
-
+
const fetchOperation = async () => {
try {
const response = await fetch(`/api/operations/${operationId}`);
-
+
if (!response.ok) throw new Error("Failed to fetch operation");
-
- const data = await response.json();
+
+ const data: Operation = await response.json();
setOperation(data);
+
+ if (data.Status !== 0 && intervalRef.current) {
+ clearInterval(intervalRef.current);
+ intervalRef.current = null;
+ }
} catch (err: unknown) {
if (err instanceof Error) {
setError(err.message);
@@ -44,38 +52,33 @@ export default function OperationStatusPage() {
setLoading(false);
}
};
-
+
fetchOperation();
- const interval = setInterval(fetchOperation, 5000);
-
- return () => clearInterval(interval);
+ if (!intervalRef.current) {
+ intervalRef.current = setInterval(fetchOperation, 5000);
+ }
+
+ return () => {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+ };
}, [operationId]);
- const getStatusClass = (status: number) => {
+ const getStatusText = (status: number) => {
switch (status) {
- case 0:
- return "created";
- case 1:
- return "completed";
- case 2:
- return "failed";
- default:
- return "";
+ case 0:
+ return "Created";
+ case 1:
+ return "Completed";
+ case 2:
+ return "Failed";
+ default:
+ return "Unknown";
}
};
- const getStatusText = (status: number) => {
- switch (status) {
- case 0:
- return "Created";
- case 1:
- return "Completed";
- case 2:
- return "Failed";
- default:
- return "Unknown";
- }
- };
+ const getStatusClass = (status: number) => getStatusText(status).toLowerCase();
return (
<Webpage>
--
2.47.1
From 1ff1cae7093e60d95b19c41e2fec5c7eeee69f83 Mon Sep 17 00:00:00 2001
From: Quaternions <krakow20@gmail.com>
Date: Thu, 3 Apr 2025 15:12:18 -0700
Subject: [PATCH 2/2] web: reduce polling interval The operations will usually
take half a second.
---
web/src/app/operations/[operationId]/page.tsx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/web/src/app/operations/[operationId]/page.tsx b/web/src/app/operations/[operationId]/page.tsx
index d712cdd..36f1c8a 100644
--- a/web/src/app/operations/[operationId]/page.tsx
+++ b/web/src/app/operations/[operationId]/page.tsx
@@ -19,12 +19,12 @@ interface Operation {
export default function OperationStatusPage() {
const router = useRouter();
const { operationId } = useParams();
-
+
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [operation, setOperation] = useState<Operation | null>(null);
-
- const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+ const intervalRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
if (!operationId) return;
@@ -55,7 +55,7 @@ export default function OperationStatusPage() {
fetchOperation();
if (!intervalRef.current) {
- intervalRef.current = setInterval(fetchOperation, 5000);
+ intervalRef.current = setInterval(fetchOperation, 1000);
}
return () => {
@@ -77,9 +77,9 @@ export default function OperationStatusPage() {
return "Unknown";
}
};
-
- const getStatusClass = (status: number) => getStatusText(status).toLowerCase();
-
+
+ const getStatusClass = (status: number) => getStatusText(status).toLowerCase();
+
return (
<Webpage>
<main className="operation-status">
@@ -99,7 +99,7 @@ export default function OperationStatusPage() {
<Typography>Owner: {operation.Owner}</Typography>
<Typography>Date: {new Date(operation.Date * 1000).toLocaleString()}</Typography>
<Typography>Path: {operation.Path}</Typography>
-
+
{operation.Status === 1 && (
<div className="submission-button">
<Button
@@ -119,4 +119,4 @@ export default function OperationStatusPage() {
</main>
</Webpage>
);
-}
\ No newline at end of file
+}
--
2.47.1