KOGITO-1299: added fallback UI when server unavailable

please enter the commit message for your changes. Lines starting
apache · Apr 1, 2020 · 08b4d0c · 08b4d0c
1 parent f0d43c1
commit 08b4d0c
Show file tree

Hide file tree

Showing 15 changed files with 306 additions and 73 deletions.
diff --git a/management-console/src/main/java/org/kie/kogito/mgmt/VertxRouter.java b/management-console/src/main/java/org/kie/kogito/mgmt/VertxRouter.java
@@ -41,6 +41,7 @@ public void init() {
     void setupRouter(@Observes Router router) {
         router.route("/").handler(ctx -> ctx.response().putHeader("location", "/ProcessInstances/").setStatusCode(302).end());
         router.route("/ProcessInstances*").handler(ctx -> handle(ctx));
+        router.route("/Process*").handler(ctx -> handle(ctx));
         router.route("/DomainExplorer*").handler(ctx -> handle(ctx));
         router.route().handler(StaticHandler.create());
     }

diff --git a/management-console/src/test/java/org/kie/kogito/mgmt/VertxRouterTest.java b/management-console/src/test/java/org/kie/kogito/mgmt/VertxRouterTest.java
@@ -14,7 +14,7 @@ public void testHandlePath() {
                 .then()
                 .statusCode(200);
 
-        given().when().get("/ProcessInstances/a1e139d5-4e77-48c9-84ae-34578e904e5a")
+        given().when().get("/Process/a1e139d5-4e77-48c9-84ae-34578e904e5a")
                 .then()
                 .statusCode(200);
 

diff --git a/...nagement-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx b/...nagement-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx
@@ -85,6 +85,8 @@ const DataListItemComponent: React.FC<IOwnProps> = ({
     fetchPolicy: 'network-only'
   });
 
+  const temp = { prev: location.pathname}
+  window.localStorage.setItem('state', JSON.stringify(temp))
   const setTitle = (titleStatus, titleText) => {
     switch (titleStatus) {
       case 'success':
@@ -526,7 +528,7 @@ const DataListItemComponent: React.FC<IOwnProps> = ({
           <DataListItemCells
             dataListCells={[
               <DataListCell key={1}>
-                <Link to={'/ProcessInstances/' + processInstanceData.id}>
+                <Link to={{pathname:'/Process/' + processInstanceData.id, state:{ prev: location.pathname}}}>
                   <div>
                     <strong>
                       <ProcessDescriptor

diff --git a/packages/management-console/src/components/Molecules/NoDataComponent/NoDataComponent.tsx b/packages/management-console/src/components/Molecules/NoDataComponent/NoDataComponent.tsx
@@ -18,8 +18,6 @@ const NoDataComponent = (props) => {
     let prevPath;
     if (props.location.state !== undefined) {
         prevPath = props.location.state.prev;
-    } else {
-        prevPath = '/ProcessInstances'
     }
 
     const tempPath = prevPath.split('/');

diff --git a/packages/management-console/src/components/Molecules/NoServerComponent/NoServerComponent.tsx b/packages/management-console/src/components/Molecules/NoServerComponent/NoServerComponent.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import {
+  PageSection,
+  Bullseye,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Button,
+  EmptyStateBody,
+  Title,
+  Page,
+  SkipToContent,
+  PageSidebar,
+  PageHeader,
+  Nav,
+  NavList,
+  NavItem,
+  Brand,
+} from '@patternfly/react-core';
+import {
+  ExclamationCircleIcon
+} from '@patternfly/react-icons';
+import { BrowserRouter as Router, Link } from 'react-router-dom';
+import Avatar from '../../Atoms/AvatarComponent/AvatarComponent';
+import PageToolbarComponent from '../../Organisms/PageToolbarComponent/PageToolbarComponent';
+import managementConsoleLogo from '../../../static/managementConsoleLogo.svg';
+
+const NoServerComponent = (props) => {
+  const [isNavOpen, setIsNavOpen] = useState(true);
+  const onNavToggle = () => {
+    setIsNavOpen(!isNavOpen);
+  };
+
+  const Header = (
+    <PageHeader
+      logo={<Brand
+        src={managementConsoleLogo}
+        alt="Management Console Logo"
+      />}
+      toolbar={<PageToolbarComponent />}
+      avatar={<Avatar />}
+      showNavToggle
+      isNavOpen={isNavOpen}
+      onNavToggle={onNavToggle}
+    />
+  );
+
+  const PageNav = (
+    <Nav aria-label="Nav" theme="dark">
+      <NavList>
+        <NavItem>
+          <Link to="/ProcessInstances">Process Instances</Link>
+        </NavItem>
+        <NavItem>
+          <Link to="/DomainExplorer">Domain Explorer</Link>
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+  const Sidebar = (
+    <PageSidebar nav={PageNav} isNavOpen={isNavOpen} theme="dark" />
+  );
+
+  const pageId = 'main-content-page-layout-default-nav';
+  const PageSkipToContent = (
+    <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>
+  );
+
+  return (
+    <>
+    <Router>
+    <Page
+        header={Header}
+        skipToContent={PageSkipToContent}
+        mainContainerId={pageId}
+        sidebar={Sidebar}
+        isManagedSidebar
+        className="kogito-management-console--dashboard-page"
+      >
+      <PageSection variant="light">
+        <Bullseye>
+          <EmptyState variant={EmptyStateVariant.full}>
+            <EmptyStateIcon
+              icon={ExclamationCircleIcon}
+              size="md"
+              color="var(--pf-global--danger-color--100)" />
+            <Title headingLevel="h1" size="4xl">Error connecting server</Title>
+            <EmptyStateBody>
+              The management console could not access the server to display content.
+            </EmptyStateBody>
+            <EmptyStateBody>
+              Try reloading the page, or contact your administrator for more information.
+            </EmptyStateBody>
+            <Button variant="primary" onClick={() => window.location.reload()}>
+              Refresh
+              </Button>
+          </EmptyState>
+        </Bullseye>
+      </PageSection>
+    </Page>
+    </Router>
+    </>
+  );
+};
+
+export default NoServerComponent;
diff --git a/...nagement-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.css b/...nagement-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.css
@@ -0,0 +1,3 @@
+.kogito-management-console--Server-Errors__text-color {
+    color: var(--pf-global--primary-color--100)
+}
diff --git a/...nagement-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx b/...nagement-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+    DataToolbar,
+    DataToolbarContent,
+    DataToolbarToggleGroup,
+    DataToolbarGroup,
+    PageSection,
+    Breadcrumb,
+    BreadcrumbItem,
+    Card,
+    Bullseye,
+    EmptyState,
+    EmptyStateIcon,
+    EmptyStateVariant,
+    Button,
+    EmptyStateBody,
+    Title,
+    Popover, PopoverPosition,
+} from '@patternfly/react-core';
+import {
+    ExclamationCircleIcon
+} from '@patternfly/react-icons';
+import './ServerErrorsComponent.css';
+import {useHistory} from 'react-router-dom';
+
+const ServerErrorsComponent = (props) => {
+    const history = useHistory();
+    return (
+        <PageSection variant="light">
+            <Bullseye>
+                <EmptyState variant={EmptyStateVariant.full}>
+                    <EmptyStateIcon
+                        icon={ExclamationCircleIcon}
+                        size="md"
+                        color="var(--pf-global--danger-color--100)" />
+                    <Title headingLevel="h1" size="4xl">Error fetching data</Title>
+                    <EmptyStateBody>
+                        An error occured while accessing data. 
+                        <Popover
+                            headerContent={<div>Error</div>}
+                            bodyContent={
+                                <div>{props.message}</div>
+                            }
+                        >
+                            <strong className="kogito-management-console--Server-Errors__text-color"> See more details</strong>
+                        </Popover>
+                    </EmptyStateBody>
+                    <Button variant="primary" onClick={() => history.goBack()}>
+                        Go back
+              </Button>
+                </EmptyState>
+            </Bullseye>
+
+        </PageSection>
+    )
+}
+
+export default ServerErrorsComponent;
diff --git a/...onsole/src/components/Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker.tsx b/...onsole/src/components/Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker.tsx
@@ -23,6 +23,7 @@ export interface IOwnProps {
   setSelected: any;
   data: any;
   getPicker: any;
+  setError: any
 }
 
 const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
@@ -37,6 +38,7 @@ const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
   setSelected,
   data,
   getPicker,
+  setError
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [tempDomain, setTempDomain] = useState('');
@@ -122,7 +124,8 @@ const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
             }
           });
       } catch (error) {
-        return error;
+        setError(error.message)
+        // return error;
       }
     } else {
       setDisplayTable(false);

diff --git a/...s/management-console/src/components/Organisms/DomainExplorerTable/DomainExplorerTable.tsx b/...s/management-console/src/components/Organisms/DomainExplorerTable/DomainExplorerTable.tsx
@@ -39,6 +39,8 @@ import ProcessDescriptor from '../../Molecules/ProcessDescriptor/ProcessDescript
 const DomainExplorerTable = ({ columnFilters, tableLoading, displayTable }) => {
   const [columns, setColumns] = useState([]);
   const [rows, setRows] = useState([]);
+  const temp = { prev: location.pathname}
+  window.localStorage.setItem('state', JSON.stringify(temp))
 
   const stateIcon = (state) => {
     switch (state) {
@@ -155,7 +157,7 @@ const DomainExplorerTable = ({ columnFilters, tableLoading, displayTable }) => {
                 const ele = {
                   title: (
                     <>
-                     <Link to={'/ProcessInstances/' + tempObj.id}>
+                     <Link to={{pathname:'/Process/' + tempObj.id, state:{ prev: location.pathname}}}>
                     <strong>
                       <ProcessDescriptor processInstanceData={tempObj}/>
                       </strong>

diff --git a/packages/management-console/src/components/Organisms/ProcessDetails/ProcessDetails.tsx b/packages/management-console/src/components/Organisms/ProcessDetails/ProcessDetails.tsx
@@ -27,8 +27,9 @@ import ProcessDescriptor from '../../Molecules/ProcessDescriptor/ProcessDescript
 
 interface IOwnProps {
   data: any;
+  from: any;
 }
-const ProcessDetails: React.FC<IOwnProps> = ({ data }) => {
+const ProcessDetails: React.FC<IOwnProps> = ({ data, from }) => {
   const stateIconCreator = state => {
     switch (state) {
       case ProcessInstanceState.Active:
@@ -139,10 +140,11 @@ const ProcessDetails: React.FC<IOwnProps> = ({ data }) => {
             <FormGroup label="Parent Process" fieldId="parent">
               <div>
                 <Link
-                  to={
-                    '/ProcessInstances/' +
-                    data.ProcessInstances[0].parentProcessInstance.id
-                  }
+                  to={{
+                   pathname: '/Process/' +
+                    data.ProcessInstances[0].parentProcessInstance.id,
+                   state: from
+                  }}
                 >
                   <Tooltip
                     content={data.ProcessInstances[0].parentProcessInstance.id}
@@ -165,7 +167,7 @@ const ProcessDetails: React.FC<IOwnProps> = ({ data }) => {
               {data.ProcessInstances[0].childProcessInstances.map(
                 (child, index) => (
                   <div key={child.id}>
-                    <Link to={'/ProcessInstances/' + child.id}>
+                    <Link to={{pathname:'/Process/' + child.id,state: from}}>
                       <Tooltip content={child.id}>
                         <Button variant="link" icon={<LevelDownAltIcon />}>
                           <ProcessDescriptor processInstanceData={child} />

diff --git a/.../management-console/src/components/Organisms/ProcessDetails/tests/ProcessDetails.test.tsx b/.../management-console/src/components/Organisms/ProcessDetails/tests/ProcessDetails.test.tsx
@@ -22,6 +22,7 @@ const props = {
       }
     ]
   },
+  from: {prev: ''},
   loading: true,
   childLoading: true,
   parentLoading: true,
@@ -60,6 +61,7 @@ const props2 = {
       }
     ]
   },
+  from: {},
   childLoading: true,
   parentLoading: true,
   parentResult: {

diff --git a/packages/management-console/src/components/Templates/DashboardComponent/Dashboard.tsx b/packages/management-console/src/components/Templates/DashboardComponent/Dashboard.tsx
@@ -85,7 +85,7 @@ const Dashboard: React.FC<{}> = (props: any) => {
           <Route exact path="/ProcessInstances" component={DataListContainer} />
           <Route
             exact
-            path="/ProcessInstances/:instanceID"
+            path="/Process/:instanceID"
             component={ProcessDetailsPage}
           />
           <Route

diff --git a/...ment-console/src/components/Templates/DomainExplorerDashboard/DomainExplorerDashboard.tsx b/...ment-console/src/components/Templates/DomainExplorerDashboard/DomainExplorerDashboard.tsx
@@ -15,6 +15,7 @@ import './DomainExplorerDashboard.css';
 import DomainExplorerColumnPicker from '../../Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker';
 import DomainExplorerTable from '../../Organisms/DomainExplorerTable/DomainExplorerTable';
 import PageTitleComponent from '../../Molecules/PageTitleComponent/PageTitleComponent';
+import ServerErrorsComponent from '../../Molecules/ServerErrorsComponent/ServerErrorsComponent';
 
 import {
   useGetQueryTypesQuery,
@@ -49,6 +50,7 @@ const DomainExplorerDashboard = props => {
   const [tableLoading, setTableLoading] = useState(true);
   const [displayTable, setDisplayTable] = useState(false);
   const [selected, setSelected] = useState([]);
+  const [error, setError] = useState()
   const [parameters, setParameters] = useState([
     { metadata: [{ processInstances: ['id','processName', 'state', 'start', 'lastUpdate','businessKey'] }] }
   ]);
@@ -172,6 +174,7 @@ const DomainExplorerDashboard = props => {
                   setSelected={setSelected}
                   data={data}
                   getPicker={getPicker}
+                  setError={setError}
                 />
               )}
             </DataToolbarGroup>
@@ -215,6 +218,7 @@ const DomainExplorerDashboard = props => {
           })}
         </Breadcrumb>
       </PageSection>
+      {!error ? (
       <PageSection>
         {renderToolbar()}
 
@@ -225,7 +229,7 @@ const DomainExplorerDashboard = props => {
             displayTable={displayTable}
           />
         </div>
-      </PageSection>
+      </PageSection>): (<ServerErrorsComponent message={error} />)}
     </>
   );
 };