This is an automated email from the ASF dual-hosted git repository.
pefernan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new 5ab9e674ba0 incubator-kie-issues#1274: `Management Console`: Blank
page displayed when trying to open the Process Instance details of an
unexisting instance (#2378)
5ab9e674ba0 is described below
commit 5ab9e674ba0693a26f709da664711bbe447c1952
Author: Pere Fernández <[email protected]>
AuthorDate: Tue May 28 16:00:13 2024 +0200
incubator-kie-issues#1274: `Management Console`: Blank page displayed when
trying to open the Process Instance details of an unexisting instance (#2378)
---
.../ProcessDetailsContainer.tsx | 2 +-
.../ProcessListContainer/ProcessListContainer.tsx | 2 +-
.../ProcessDetailsPage/ProcessDetailsPage.tsx | 119 +++++++++++----------
3 files changed, 62 insertions(+), 61 deletions(-)
diff --git
a/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessDetailsContainer/ProcessDetailsContainer.tsx
b/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessDetailsContainer/ProcessDetailsContainer.tsx
index 20313ed8095..0701ee94bf3 100644
---
a/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessDetailsContainer/ProcessDetailsContainer.tsx
+++
b/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessDetailsContainer/ProcessDetailsContainer.tsx
@@ -49,7 +49,7 @@ const ProcessDetailsContainer:
React.FC<ProcessDetailsContainerProps & OUIAProps
return () => {
unSubscribeHandler.unSubscribe();
};
- }, [processInstance]);
+ }, [gatewayApi, history, processInstance]);
return (
<EmbeddedProcessDetails
diff --git
a/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessListContainer/ProcessListContainer.tsx
b/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessListContainer/ProcessListContainer.tsx
index d2f6f546e25..c99e632268e 100644
---
a/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessListContainer/ProcessListContainer.tsx
+++
b/packages/runtime-tools-management-console-webapp/src/components/containers/ProcessListContainer/ProcessListContainer.tsx
@@ -47,7 +47,7 @@ const ProcessListContainer:
React.FC<ProcessListContainerProps & OUIAProps> = ({
return () => {
unsubscriber.unSubscribe();
};
- }, []);
+ }, [gatewayApi, history]);
return (
<EmbeddedProcessList
diff --git
a/packages/runtime-tools-management-console-webapp/src/components/pages/ProcessDetailsPage/ProcessDetailsPage.tsx
b/packages/runtime-tools-management-console-webapp/src/components/pages/ProcessDetailsPage/ProcessDetailsPage.tsx
index 75d23c5905c..1c4536764a7 100644
---
a/packages/runtime-tools-management-console-webapp/src/components/pages/ProcessDetailsPage/ProcessDetailsPage.tsx
+++
b/packages/runtime-tools-management-console-webapp/src/components/pages/ProcessDetailsPage/ProcessDetailsPage.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
import { Card } from "@patternfly/react-core/dist/js/components/Card";
import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
import { Bullseye } from "@patternfly/react-core/dist/js/layouts/Bullseye";
@@ -51,10 +51,9 @@ const ProcessDetailsPage:
React.FC<RouteComponentProps<MatchProps, StaticContext
const gatewayApi: ProcessDetailsGatewayApi = useProcessDetailsGatewayApi();
const history = useHistory();
- const [processInstance, setProcessInstance] = useState<ProcessInstance>({}
as ProcessInstance);
- const [isLoading, setIsLoading] = useState<boolean>(false);
- const [error, setError] = useState<string>("");
- let currentPage = JSON.parse(window.localStorage.getItem("state"));
+ const [processInstance, setProcessInstance] = useState<ProcessInstance>();
+ const [isLoading, setIsLoading] = useState<boolean>(true);
+ const [error, setError] = useState<string>();
useEffect(() => {
window.onpopstate = () => {
@@ -62,86 +61,88 @@ const ProcessDetailsPage:
React.FC<RouteComponentProps<MatchProps, StaticContext
};
});
- async function fetchDetails() {
- let response: ProcessInstance = {} as ProcessInstance;
+ const fetchDetails = useCallback(async () => {
try {
setIsLoading(true);
- response = await gatewayApi.processDetailsQuery(processId);
+ const response = await gatewayApi.processDetailsQuery(processId);
setProcessInstance(response);
} catch (error) {
setError(error);
} finally {
setIsLoading(false);
- /* istanbul ignore else */
- if (error.length === 0 && Object.keys(response).length === 0) {
- let prevPath;
- /* istanbul ignore else */
- if (currentPage) {
- currentPage = Object.assign({}, currentPage, props.location.state);
- const tempPath = currentPage.prev.split("/");
- prevPath = tempPath.filter((item) => item);
- }
- history.push({
- pathname: "/NoData",
- state: {
- prev: currentPage ? currentPage.prev : "/ProcessInstances",
- title: "Process not found",
- description: `Process instance with the id ${processId} not found`,
- buttonText: currentPage
- ? `Go to ${prevPath[0]
- .replace(/([A-Z])/g, " $1")
- .trim()
- .toLowerCase()}`
- : "Go to process instances",
- rememberedData: Object.assign({}, props.location.state),
- },
- });
- }
}
- }
+ }, [gatewayApi, processId]);
useEffect(() => {
/* istanbul ignore else */
if (processId) {
fetchDetails();
}
- }, [processId]);
+ }, [processId, fetchDetails]);
- const processName = processInstance ? processInstance.processName : "";
+ useEffect(() => {
+ // Redirecting to NoData page if the ProcessInstance cannot be found.
+ if (!isLoading && !error && !processInstance) {
+ let currentPage = JSON.parse(window.localStorage.getItem("state"));
+ let prevPath;
+ /* istanbul ignore else */
+ if (currentPage) {
+ currentPage = Object.assign({}, currentPage, props.location.state);
+ const tempPath = currentPage.prev.split("/");
+ prevPath = tempPath.filter((item) => item);
+ }
+ history.push({
+ pathname: "/NoData",
+ state: {
+ prev: currentPage ? currentPage.prev : "/ProcessInstances",
+ title: "Process not found",
+ description: `Process instance with the id ${processId} not found`,
+ buttonText: currentPage
+ ? `Go to ${prevPath[0]
+ .replace(/([A-Z])/g, " $1")
+ .trim()
+ .toLowerCase()}`
+ : "Go to process instances",
+ rememberedData: Object.assign({}, props.location.state),
+ },
+ });
+ }
+ }, [error, history, isLoading, processId, processInstance,
props.location.state]);
- const renderItems = () => {
- if (!isLoading) {
- return (
- <>
- {processInstance && Object.keys(processInstance).length > 0 &&
!error ? (
- <ProcessDetailsContainer processInstance={processInstance} />
- ) : (
- <>
- {error.length > 0 && (
- <Card className="kogito-management-console__card-size">
- <Bullseye>
- <ServerErrors error={error} variant="large" />
- </Bullseye>
- </Card>
- )}
- </>
- )}
- </>
- );
- } else {
+ const body = useMemo(() => {
+ // Loading State
+ if (isLoading) {
return (
<Card>
<KogitoSpinner spinnerText="Loading process details..." />
</Card>
);
}
- };
+
+ // Error State
+ if (error) {
+ return (
+ <>
+ <Card className="kogito-management-console__card-size">
+ <Bullseye>
+ <ServerErrors error={error} variant="large" />
+ </Bullseye>
+ </Card>
+ </>
+ );
+ }
+
+ // Process Instance Details
+ if (processInstance) {
+ return <ProcessDetailsContainer processInstance={processInstance} />;
+ }
+ }, [error, isLoading, processInstance]);
return (
<React.Fragment>
<PageSectionHeader
titleText="Process Details"
- breadcrumbText={["Home", "Processes", processName]}
+ breadcrumbText={["Home", "Processes", processInstance ?
processInstance.processName : ""]}
breadcrumbPath={[
"/",
{
@@ -150,7 +151,7 @@ const ProcessDetailsPage:
React.FC<RouteComponentProps<MatchProps, StaticContext
},
]}
/>
- <PageSection>{renderItems()}</PageSection>
+ <PageSection>{body}</PageSection>
</React.Fragment>
);
};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
