From 0d84b68f4a795f61876568cc6a7dc8cc5368b99c Mon Sep 17 00:00:00 2001 From: Saravana Balaji Date: Tue, 24 Mar 2020 20:10:24 +0530 Subject: [PATCH] KOGITO-1299: added fallback UI when server unavailable please enter the commit message for your changes. Lines starting --- .../DataListItemComponent.tsx | 2 +- .../NoDataComponent/NoDataComponent.tsx | 2 - .../NoServerComponent/NoServerComponent.tsx | 106 ++++++++++++++++++ .../ServerErrorsComponent.css | 3 + .../ServerErrorsComponent.tsx | 59 ++++++++++ .../DomainExplorerColumnPicker.tsx | 5 +- .../DomainExplorerTable.tsx | 2 +- .../ProcessDetails/ProcessDetails.tsx | 4 +- .../DashboardComponent/Dashboard.tsx | 2 +- .../DomainExplorerDashboard.tsx | 6 +- .../ProcessDetailsPage/ProcessDetailsPage.tsx | 17 ++- packages/management-console/src/index.tsx | 27 ++++- 12 files changed, 219 insertions(+), 16 deletions(-) create mode 100644 packages/management-console/src/components/Molecules/NoServerComponent/NoServerComponent.tsx create mode 100644 packages/management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.css create mode 100644 packages/management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx diff --git a/packages/management-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx b/packages/management-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx index 23962734c8..32c97f0316 100755 --- a/packages/management-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx +++ b/packages/management-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx @@ -526,7 +526,7 @@ const DataListItemComponent: React.FC = ({ - +
{ 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 new file mode 100644 index 0000000000..4b08af1458 --- /dev/null +++ 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 = ( + } + toolbar={} + avatar={} + showNavToggle + isNavOpen={isNavOpen} + onNavToggle={onNavToggle} + /> + ); + + const PageNav = ( + + ); + const Sidebar = ( + + ); + + const pageId = 'main-content-page-layout-default-nav'; + const PageSkipToContent = ( + Skip to Content + ); + + return ( + <> + + + + + + + Error connecting server + + The management console could not access the server to display content. + + + Try reloading the page, or contact your administrator for more information. + + + + + + + + + ); +}; + +export default NoServerComponent; \ No newline at end of file diff --git a/packages/management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.css b/packages/management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.css new file mode 100644 index 0000000000..100bbe768c --- /dev/null +++ b/packages/management-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) +} \ No newline at end of file diff --git a/packages/management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx b/packages/management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx new file mode 100644 index 0000000000..e18011e544 --- /dev/null +++ b/packages/management-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 ( + + + + + Error fetching data + + An error occured while accessing data. + Error
} + bodyContent={ +
{props.message}
+ } + > + See more details + + + + + + + + ) +} + +export default ServerErrorsComponent; \ No newline at end of file diff --git a/packages/management-console/src/components/Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker.tsx b/packages/management-console/src/components/Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker.tsx index 16c78dc2b4..6ef663a7a0 100644 --- a/packages/management-console/src/components/Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker.tsx +++ b/packages/management-console/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 = ({ @@ -37,6 +38,7 @@ const DomainExplorerColumnPicker: React.FC = ({ setSelected, data, getPicker, + setError }) => { const [isExpanded, setIsExpanded] = useState(false); const [tempDomain, setTempDomain] = useState(''); @@ -122,7 +124,8 @@ const DomainExplorerColumnPicker: React.FC = ({ } }); } catch (error) { - return error; + setError(error.message) + // return error; } } else { setDisplayTable(false); diff --git a/packages/management-console/src/components/Organisms/DomainExplorerTable/DomainExplorerTable.tsx b/packages/management-console/src/components/Organisms/DomainExplorerTable/DomainExplorerTable.tsx index 390a5885e7..abfa657adc 100644 --- a/packages/management-console/src/components/Organisms/DomainExplorerTable/DomainExplorerTable.tsx +++ b/packages/management-console/src/components/Organisms/DomainExplorerTable/DomainExplorerTable.tsx @@ -155,7 +155,7 @@ const DomainExplorerTable = ({ columnFilters, tableLoading, displayTable }) => { const ele = { title: ( <> - + diff --git a/packages/management-console/src/components/Organisms/ProcessDetails/ProcessDetails.tsx b/packages/management-console/src/components/Organisms/ProcessDetails/ProcessDetails.tsx index 75d8c1d96d..8aef3ac3ae 100755 --- a/packages/management-console/src/components/Organisms/ProcessDetails/ProcessDetails.tsx +++ b/packages/management-console/src/components/Organisms/ProcessDetails/ProcessDetails.tsx @@ -140,7 +140,7 @@ const ProcessDetails: React.FC = ({ data }) => {
@@ -165,7 +165,7 @@ const ProcessDetails: React.FC = ({ data }) => { {data.ProcessInstances[0].childProcessInstances.map( (child, index) => (
- +
- + ): ()} ); }; diff --git a/packages/management-console/src/components/Templates/ProcessDetailsPage/ProcessDetailsPage.tsx b/packages/management-console/src/components/Templates/ProcessDetailsPage/ProcessDetailsPage.tsx index 139aa2c18b..b77a571072 100755 --- a/packages/management-console/src/components/Templates/ProcessDetailsPage/ProcessDetailsPage.tsx +++ b/packages/management-console/src/components/Templates/ProcessDetailsPage/ProcessDetailsPage.tsx @@ -20,26 +20,32 @@ import { useGetProcessInstanceByIdQuery } from '../../../graphql/types'; import ProcessDescriptor from '../../Molecules/ProcessDescriptor/ProcessDescriptor'; import SpinnerComponent from '../../Atoms/SpinnerComponent/SpinnerComponent'; import PageTitleComponent from '../../Molecules/PageTitleComponent/PageTitleComponent'; +import ServerErrorsComponent from '../../Molecules/ServerErrorsComponent/ServerErrorsComponent'; -const ProcessDetailsPage = ({ match }) => { - const id = match.params.instanceID; +const ProcessDetailsPage = (props) => { + const id = props.match.params.instanceID; const { loading, error, data } = useGetProcessInstanceByIdQuery({ variables: { id } }); if (data) { + let prevPath; const result = data.ProcessInstances; + if(props.location.state){ + const tempPath = props.location.state.prev.split('/') + prevPath = tempPath.filter(item => item) + } if (result.length === 0) { return ( @@ -49,6 +55,8 @@ const ProcessDetailsPage = ({ match }) => { return ( <> + {!error ? + (<> {!loading ? @@ -99,6 +107,7 @@ const ProcessDetailsPage = ({ match }) => { )} + ) : } ); }; diff --git a/packages/management-console/src/index.tsx b/packages/management-console/src/index.tsx index db06311841..42f8081375 100755 --- a/packages/management-console/src/index.tsx +++ b/packages/management-console/src/index.tsx @@ -1,15 +1,36 @@ import '@patternfly/patternfly/patternfly.css'; import React from 'react'; import ReactDOM from 'react-dom'; -import ApolloClient from 'apollo-boost'; +import { ApolloClient } from 'apollo-client'; +// import ApolloClient from 'apollo-boost'; import { ApolloProvider } from 'react-apollo'; import Keycloak from 'keycloak-js'; import axios from 'axios'; import BaseComponent from './components/Templates/BaseComponent/BaseComponent'; +import { HttpLink } from 'apollo-link-http'; +import { onError } from 'apollo-link-error'; +import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory'; +import NoServerComponent from './components/Molecules/NoServerComponent/NoServerComponent'; -const client = new ApolloClient({ +// @ts-ignore +const httpLink = new HttpLink({ uri: window.DATA_INDEX_ENDPOINT || process.env.KOGITO_DATAINDEX_HTTP_URL, }); + +const logoutLink = onError(({networkError}:any) => { + if (networkError && networkError.stack === 'TypeError: Failed to fetch') { + return ReactDOM.render( + + + , + document.getElementById('root') + ); + } +}) + +const cache = new InMemoryCache(); +const client: ApolloClient = new ApolloClient({ + cache, + link: logoutLink.concat(httpLink), // @ts-ignore - uri: window.DATA_INDEX_ENDPOINT || process.env.KOGITO_DATAINDEX_HTTP_URL, request: operation => { if (process.env.KOGITO_AUTH_ENABLED) { const kcInfo = JSON.parse(localStorage.getItem('keycloakData'));