diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
index 2609c0fdc..1d82524cf 100644
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -13,7 +13,8 @@
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React, { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
+import clsx from "clsx";
import {
ICloseEvent,
IMessageEvent,
@@ -72,19 +73,19 @@ const styles = (theme: Theme) =>
textAlign: "center",
marginBottom: 10,
},
- startDiagnostic: {
- textAlign: "center",
- marginBottom: 25,
- },
progressResult: {
textAlign: "center",
marginBottom: 25,
},
- diagNew: {
+ startDiagnostic: {
textAlign: "right",
margin: 25,
marginBottom: 0,
},
+ startDiagnosticCenter: {
+ textAlign: "center",
+ marginTop: 0,
+ },
...actionsTray,
...containerForHeader(theme.spacing(4)),
});
@@ -104,12 +105,17 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
(state: AppState) => state.system.serverDiagnosticStatus
);
const [startDiagnostic, setStartDiagnostic] = useState(false);
- const [diagStarted, setDiagStarted] = useState(false);
const [downloadDisabled, setDownloadDisabled] = useState(true);
const [localMessage, setMessage] = useState("");
+ const [buttonStartText, setButtonStartText] =
+ useState("Start Diagnostic");
const [title, setTitle] = useState("New Diagnostic");
const [diagFileContent, setDiagFileContent] = useState("");
+ const isDiagnosticComplete =
+ serverDiagnosticStatus === DiagStatSuccess ||
+ serverDiagnosticStatus === DiagStatError;
+
const download = () => {
let element = document.createElement("a");
element.setAttribute(
@@ -129,19 +135,26 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
useEffect(() => {
if (serverDiagnosticStatus === DiagStatInProgress) {
setTitle("Diagnostic in progress...");
+ setMessage(
+ "Diagnostic started. Please do not refresh page during diagnosis."
+ );
return;
}
- if (serverDiagnosticStatus === DiagStatSuccess && diagStarted) {
+ if (serverDiagnosticStatus === DiagStatSuccess) {
setTitle("Diagnostic complete");
+ setMessage("Diagnostic file is ready to be downloaded.");
+ setButtonStartText("Start New Diagnostic");
return;
}
if (serverDiagnosticStatus === DiagStatError) {
setTitle("Error");
+ setMessage("An error occurred while getting the Diagnostic file.");
+ setButtonStartText("Retry Diagnostic");
return;
}
- }, [serverDiagnosticStatus, startDiagnostic, diagStarted]);
+ }, [serverDiagnosticStatus, startDiagnostic]);
useEffect(() => {
if (
@@ -186,7 +199,6 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
interval = setInterval(() => {
c.send("ok");
}, 10 * 1000);
- setDiagStarted(true);
setMessage(
"Diagnostic started. Please do not refresh page during diagnosis."
);
@@ -219,7 +231,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
) {
// handle close with error
console.log("connection closed by server with code:", event.code);
- setMessage("An error occurred while getting Diagnostic file.");
+ setMessage("An error occurred while getting the Diagnostic file.");
dispatch(setServerDiagStat(DiagStatError));
} else {
console.log("connection closed by server");
@@ -242,39 +254,21 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
- {!diagStarted && (
-
-
-
- )}
- {diagStarted && (
-
- {localMessage}
- {serverDiagnosticStatus === DiagStatInProgress ? (
-
-
-
- ) : (
-
- {serverDiagnosticStatus !== DiagStatError && (
+
+ {localMessage}
+ {serverDiagnosticStatus === DiagStatInProgress ? (
+
+
+
+ ) : (
+
+ {serverDiagnosticStatus !== DiagStatError &&
+ !downloadDisabled && (
)}
-
-
-
-
- )}
-
- )}
+
+
+
+
+ )}
+
- {!diagStarted && (
+ {!startDiagnostic && (
}
help={}
diff --git a/portal-ui/tests/permissions-5/diagnostics.ts b/portal-ui/tests/permissions-5/diagnostics.ts
index 8819a7cbd..3b9cd6afe 100644
--- a/portal-ui/tests/permissions-5/diagnostics.ts
+++ b/portal-ui/tests/permissions-5/diagnostics.ts
@@ -63,7 +63,7 @@ test("Download button exists after Diagnostic is completed", async (t) => {
// Only proceed if there is no error
const matchingElement = ClientFunction(() =>
document.evaluate(
- "//div[text()='An error occurred while getting Diagnostic file.']",
+ "//div[text()='An error occurred while getting the Diagnostic file.']",
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
@@ -87,7 +87,7 @@ test("Download button is clickable after Diagnostic is completed", async (t) =>
// Only proceed if there is no error
const matchingElement = ClientFunction(() =>
document.evaluate(
- "//div[text()='An error occurred while getting Diagnostic file.']",
+ "//div[text()='An error occurred while getting the Diagnostic file.']",
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
@@ -111,7 +111,7 @@ test("Start New Diagnostic button exists after Diagnostic is completed", async (
// Only proceed if there is no error
const matchingElement = ClientFunction(() =>
document.evaluate(
- "//div[text()='An error occurred while getting Diagnostic file.']",
+ "//div[text()='An error occurred while getting the Diagnostic file.']",
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
@@ -139,7 +139,7 @@ test("Start New Diagnostic button is clickable after Diagnostic is completed", a
// Only proceed if there is no error
const matchingElement = ClientFunction(() =>
document.evaluate(
- "//div[text()='An error occurred while getting Diagnostic file.']",
+ "//div[text()='An error occurred while getting the Diagnostic file.']",
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,