-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
KOGITO-1299: added fallback UI when server unavailable (#131)
- Loading branch information
Showing
16 changed files
with
341 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
packages/management-console/src/components/Molecules/NoServerComponent/NoServerComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
4 changes: 4 additions & 0 deletions
4
...nagement-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
| } |
51 changes: 51 additions & 0 deletions
51
...nagement-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.