Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KOGITO-1299: added fallback UI when server unavailable #131

Merged
merged 1 commit into from
Apr 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,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));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Sara4994 The new route "/Process*" includes "/ProcessInstances*. Here I think we have to remove the line: router.route("/ProcessInstances*").handler(ctx -> handle(ctx)); and let just the new route.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nmirasch but actually these two are different routes that directs us to two different pages, '/ProcessInstances' will take us to process list page and '/Process' will take us to process details page. should we still remove the line: router.route("/ProcessInstances*").handler(ctx -> handle(ctx));?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Sara4994 point is that /Process* will also match the same urls, because of the pattern matching, so the line with /ProcessInstances* should be removed or you can simply update that one.

router.route("/DomainExplorer*").handler(ctx -> handle(ctx));
router.route().handler(StaticHandler.create());
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ const DataListItemComponent: React.FC<IOwnProps> = ({
fetchPolicy: 'network-only'
});

const currentPage = { prev: location.pathname}
window.localStorage.setItem('state', JSON.stringify(currentPage))
const setTitle = (titleStatus, titleText) => {
switch (titleStatus) {
case 'success':
Expand Down Expand Up @@ -526,7 +528,7 @@ const DataListItemComponent: React.FC<IOwnProps> = ({
<DataListItemCells
dataListCells={[
<DataListCell key={1}>
<Link to={'/ProcessInstances/' + processInstanceData.id}>
<Link to={'/Process/' + processInstanceData.id}>
<div>
<strong>
<ProcessDescriptor
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ exports[`DataListItem component tests Snapshot tests 1`] = `
Array [
<DataListCell>
<Link
to="/ProcessInstances/c54ca5b0-b975-46e2-a9a0-6a86bf7ac21e"
to="/Process/c54ca5b0-b975-46e2-a9a0-6a86bf7ac21e"
>
<div>
<strong>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.kogito-management-console--Server-Errors__text-color {
color: var(--pf-global--primary-color--100);
cursor: pointer
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React,{useState} from 'react';

import {
PageSection,
Bullseye,
EmptyState,
EmptyStateIcon,
EmptyStateVariant,
Button,
EmptyStateBody,
Title,
Popover,
ClipboardCopy,
ClipboardCopyVariant
} from '@patternfly/react-core';
import {
ExclamationCircleIcon
} from '@patternfly/react-icons';
import './ServerErrorsComponent.css';
import {useHistory} from 'react-router-dom';

const ServerErrorsComponent = (props) => {
const [displayError, setDisplayError] = useState(false)
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 occurred while accessing data. <Button variant="link" isInline onClick={() => setDisplayError(!displayError)}>See more details</Button>
</EmptyStateBody>
{displayError &&<EmptyStateBody>
<ClipboardCopy isCode variant={ClipboardCopyVariant.expansion} isExpanded={true} className="pf-u-text-align-left">{JSON.stringify(props.message)}</ClipboardCopy>
</EmptyStateBody>}
<Button variant="primary" onClick={() => history.goBack()}>
Go back
              </Button>
</EmptyState>
</Bullseye>

</PageSection>
)
}

export default ServerErrorsComponent;
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export interface IOwnProps {
setSelected: any;
data: any;
getPicker: any;
setError: any
}

const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
Expand All @@ -37,6 +38,7 @@ const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
setSelected,
data,
getPicker,
setError
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const [tempDomain, setTempDomain] = useState('');
Expand Down Expand Up @@ -122,7 +124,7 @@ const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
}
});
} catch (error) {
return error;
setError(error)
}
} else {
setDisplayTable(false);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ import ProcessDescriptor from '../../Molecules/ProcessDescriptor/ProcessDescript
const DomainExplorerTable = ({ columnFilters, tableLoading, displayTable }) => {
const [columns, setColumns] = useState([]);
const [rows, setRows] = useState([]);
const currentPage = { prev: location.pathname}
window.localStorage.setItem('state', JSON.stringify(currentPage))

const stateIcon = (state) => {
switch (state) {
Expand Down Expand Up @@ -155,7 +157,7 @@ const DomainExplorerTable = ({ columnFilters, tableLoading, displayTable }) => {
const ele = {
title: (
<>
<Link to={'/ProcessInstances/' + tempObj.id}>
<Link to={'/Process/' + tempObj.id}>
<strong>
<ProcessDescriptor processInstanceData={tempObj}/>
</strong>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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}
Expand All @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const props = {
}
]
},
from: {prev: ''},
loading: true,
childLoading: true,
parentLoading: true,
Expand Down Expand Up @@ -60,6 +61,7 @@ const props2 = {
}
]
},
from: {},
childLoading: true,
parentLoading: true,
parentResult: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,14 @@ exports[`Process Details component Snapshot tests 1`] = `
>
<div>
<Link
to="/ProcessInstances/"
to={
Object {
"pathname": "/Process/",
"state": Object {
"prev": "",
},
}
}
>
<Tooltip
appendTo={[Function]}
Expand Down Expand Up @@ -172,7 +179,14 @@ exports[`Process Details component Snapshot tests 1`] = `
key=""
>
<Link
to="/ProcessInstances/"
to={
Object {
"pathname": "/Process/",
"state": Object {
"prev": "",
},
}
}
>
<Tooltip
appendTo={[Function]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import DomainExplorerColumnPicker from '../../Organisms/DomainExplorerColumnPick
import DomainExplorerTable from '../../Organisms/DomainExplorerTable/DomainExplorerTable';
import PageTitleComponent from '../../Molecules/PageTitleComponent/PageTitleComponent';
import SpinnerComponent from '../../Atoms/SpinnerComponent/SpinnerComponent';
import ServerErrorsComponent from '../../Molecules/ServerErrorsComponent/ServerErrorsComponent';

import {
useGetQueryTypesQuery,
Expand Down Expand Up @@ -52,6 +53,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'] }] }
]);
Expand Down Expand Up @@ -175,6 +177,7 @@ const DomainExplorerDashboard = props => {
setSelected={setSelected}
data={data}
getPicker={getPicker}
setError={setError}
/>
)}
</DataToolbarGroup>
Expand Down Expand Up @@ -218,6 +221,7 @@ const DomainExplorerDashboard = props => {
})}
</Breadcrumb>
</PageSection>
{!error ? (
<PageSection>
{renderToolbar()}

Expand All @@ -234,7 +238,7 @@ const DomainExplorerDashboard = props => {
</Bullseye>
</Card>
)}
</PageSection>
</PageSection>): (<ServerErrorsComponent message={error} />) }
</>
);
};
Expand Down
Loading