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

Sara4994 · 2020-03-30T07:31:53Z

please enter the commit message for your changes. Lines starting

Sara4994 · 2020-03-30T12:21:48Z

Have developed pages to display 2 different things in management console,

A fallback UI when the server is not available/down, and here is the screenshot of the UI.
UI to display when there are some error occurs on the server and to display that error in the front-end. Screenshot follows,

It is just developed temporarily for now, awaiting for your comments to modify and to make it more relevant. Please have a look when you get time.

srambach · 2020-03-30T20:37:06Z

@Sara4994 nice job! I went over them with @kywalker-rh.
#1, the server error seems good as is.

#2, the graphql error - we were thinking of the following changes:
first line of text: An error occurred while accessing data. See more details. and the More details would have a popover containing the error text. If need be, we can use the maxWidth property on the popover component to adjust it so that it doesn't stay narrow and stretch very tall with a long error message.
button: it doesn't seem that "refresh" would help in this case, so perhaps Go back ?

@cristianonicolai wdyt?

cristianonicolai · 2020-03-31T07:17:43Z

@srambach +1

Sara4994 · 2020-03-31T11:33:53Z

@Sara4994 nice job! I went over them with @kywalker-rh.
#1, the server error seems good as is.

#2, the graphql error - we were thinking of the following changes:
first line of text: An error occurred while accessing data. See more details. and the More details would have a popover containing the error text. If need be, we can use the maxWidth property on the popover component to adjust it so that it doesn't stay narrow and stretch very tall with a long error message.
button: it doesn't seem that "refresh" would help in this case, so perhaps Go back ?

@cristianonicolai wdyt?

@srambach corrections are made..

srambach · 2020-03-31T15:24:31Z

.../management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx

+                        color="var(--pf-global--danger-color--100)" />
+                    <Title headingLevel="h1" size="4xl">Error fetching data</Title>
+                    <EmptyStateBody>
+                        Below error occured on graphql while accessing data. 


Please change this text to An error occurred while accessing data.

@srambach done

cristianonicolai · 2020-04-01T05:36:53Z

.../management-console/src/components/Molecules/DataListItemComponent/DataListItemComponent.tsx

@@ -526,7 +526,7 @@ const DataListItemComponent: React.FC<IOwnProps> = ({
          <DataListItemCells
            dataListCells={[
              <DataListCell key={1}>
-                <Link to={'/ProcessInstances/' + processInstanceData.id}>
+                <Link to={{pathname:'/ProcessInstances/Process/' + processInstanceData.id, state:{ prev: location.pathname}}}>


@Sara4994 would it be something like:

Suggested change

<Link to={{pathname:'/ProcessInstances/Process/' + processInstanceData.id, state:{ prev: location.pathname}}}>

<Link to={{pathname:'/Process/' + processInstanceData.id, state:{ prev: location.pathname}}}>

that would also mean that we need to add a line here https://github.com/kiegroup/kogito-apps/blob/master/management-console/src/main/java/org/kie/kogito/mgmt/VertxRouter.java#L43
to handle the new path in the UI.
As well as updating this test https://github.com/kiegroup/kogito-apps/blob/master/management-console/src/test/java/org/kie/kogito/mgmt/VertxRouterTest.java#L17

@cristianonicolai done

nmirasch · 2020-04-01T08:44:26Z

@Sara4994 (+1 to add the new path at VertxRouter) and it seems some .snap files have to be also updated with the new path.

Sara4994 · 2020-04-01T10:55:52Z

@Sara4994 (+1 to add the new path at VertxRouter) and it seems some .snap files have to be also updated with the new path.

@nmirasch done

bxf12315

The PR can fix issue KOGITO-1659.

cristianonicolai · 2020-04-03T07:42:59Z

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'


@Sara4994 shouldn't this stay for when users hit url directly without a previous state?

@cristianonicolai yep removed by mistake, added it back. thanks

nmirasch · 2020-04-03T08:21:54Z

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));


@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.

@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));?

@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.

nmirasch · 2020-04-03T08:23:02Z

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';


@Sara4994 maybe remove the comment :)

@nmirasch this is done :)

srambach · 2020-04-03T13:26:55Z

.../management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx

+                        An error occured while accessing data. <strong className="kogito-management-console--Server-Errors__text-color" onClick={() => setDisplayError(!displayError)}> See more details</strong>
+                    </EmptyStateBody>
+                    {displayError &&<EmptyStateBody>
+                        <ClipboardCopy isCode variant={ClipboardCopyVariant.expansion} isExpanded={true}>{JSON.stringify(props.message)}</ClipboardCopy>             


We can left align the text and make it more readable by adding className="pf-u-text-align-left" to the ClipboardCopy.

@srambach done:)

Sorry, one more thing - I missed that "occurred" is still spelled incorrectly. 2 rs.

@srambach done )

srambach · 2020-04-03T15:08:03Z

.../management-console/src/components/Molecules/ServerErrorsComponent/ServerErrorsComponent.tsx

+                        color="var(--pf-global--danger-color--100)" />
+                    <Title headingLevel="h1" size="4xl">Error fetching data</Title>
+                    <EmptyStateBody>
+                        An error occurred while accessing data. <strong className="kogito-management-console--Server-Errors__text-color" onClick={() => setDisplayError(!displayError)}> See more details</strong>


The "See more details" needs to be coded as a link or button. Otherwise, it is not accessible using the keyboard. <Button variant="link" isInline onClick={() => setDisplayError(!displayError)}>See more details</Button> should work for you I think. We don't need the <strong> tag and don't need to set the text color or cursor with a new class since that will come from the link. So that CSS can also be removed.

@srambach done. Thanks 👍

cristianonicolai · 2020-04-06T04:34:52Z

...t-console/src/components/Organisms/DomainExplorerColumnPicker/DomainExplorerColumnPicker.tsx

@@ -122,7 +124,8 @@ const DomainExplorerColumnPicker: React.FC<IOwnProps> = ({
            }
          });
      } catch (error) {
-        return error;
+        setError(error)
+        // return error;


@Sara4994 remove comment out code please

@cristianonicolai done

cristianonicolai · 2020-04-06T04:35:31Z

packages/management-console/src/components/Templates/ProcessDetailsPage/ProcessDetailsPage.tsx

+          </PageSection>
+          </>):(<ServerErrorsComponent message={error.message} />)}
+      </>);
+      {/* {!error ?


please remove comment out code

@cristianonicolai done

sonarcloud · 2020-04-06T13:00:00Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

100.0% Coverage
0.0% Duplication

Sara4994 requested review from cristianonicolai, nmirasch, srambach and AjayJagan March 30, 2020 07:32

Sara4994 force-pushed the Kogito-1299 branch 3 times, most recently from 7e7d017 to 8457ccc Compare March 30, 2020 12:10

Sara4994 force-pushed the Kogito-1299 branch from 8457ccc to 45c4d9c Compare March 30, 2020 13:47

Sara4994 force-pushed the Kogito-1299 branch 2 times, most recently from dbae9c6 to 60fccf0 Compare March 31, 2020 10:42

Sara4994 force-pushed the Kogito-1299 branch from 60fccf0 to 2ca9476 Compare March 31, 2020 11:36

srambach reviewed Mar 31, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch from 2ca9476 to 0d84b68 Compare March 31, 2020 15:27

cristianonicolai reviewed Apr 1, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch from 0d84b68 to 14aad51 Compare April 1, 2020 07:28

Sara4994 force-pushed the Kogito-1299 branch 4 times, most recently from 08b4d0c to a264bb7 Compare April 1, 2020 10:54

Sara4994 force-pushed the Kogito-1299 branch from a264bb7 to e0f284c Compare April 1, 2020 11:04

cristianonicolai requested a review from bxf12315 April 2, 2020 13:49

Sara4994 force-pushed the Kogito-1299 branch 3 times, most recently from d6e0a5d to 85a76a5 Compare April 2, 2020 15:32

Sara4994 force-pushed the Kogito-1299 branch from 85a76a5 to 7719fd3 Compare April 2, 2020 15:34

bxf12315 approved these changes Apr 2, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch from 7719fd3 to bcd5ae8 Compare April 3, 2020 04:51

AjayJagan approved these changes Apr 3, 2020

View reviewed changes

cristianonicolai reviewed Apr 3, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch from bcd5ae8 to 421db7e Compare April 3, 2020 08:00

nmirasch reviewed Apr 3, 2020

View reviewed changes

srambach reviewed Apr 3, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch 3 times, most recently from f23e3fe to a97d9cd Compare April 3, 2020 14:47

srambach reviewed Apr 3, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch from 41a2bc4 to ec67371 Compare April 5, 2020 11:13

cristianonicolai reviewed Apr 6, 2020

View reviewed changes

Sara4994 force-pushed the Kogito-1299 branch 2 times, most recently from bd035c2 to d47c00c Compare April 6, 2020 06:24

cristianonicolai approved these changes Apr 6, 2020

View reviewed changes

nmirasch approved these changes Apr 6, 2020

View reviewed changes

KOGITO-1299: added fallback UI when server unavailable

f52969a

Sara4994 force-pushed the Kogito-1299 branch from d47c00c to f52969a Compare April 6, 2020 12:08

cristianonicolai merged commit 8a7e2bf into apache:master Apr 6, 2020

almope pushed a commit to almope/kogito-apps that referenced this pull request Oct 7, 2021

Remove OpenShift example tests (apache#131)

f2bf087

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Sara4994 commented Mar 30, 2020

Sara4994 commented Mar 30, 2020 •

edited

Loading

srambach commented Mar 30, 2020

cristianonicolai commented Mar 31, 2020

Sara4994 commented Mar 31, 2020

srambach Mar 31, 2020

Sara4994 Mar 31, 2020

cristianonicolai Apr 1, 2020

cristianonicolai Apr 1, 2020

Sara4994 Apr 1, 2020

nmirasch commented Apr 1, 2020

Sara4994 commented Apr 1, 2020

bxf12315 left a comment

cristianonicolai Apr 3, 2020

Sara4994 Apr 3, 2020

nmirasch Apr 3, 2020

Sara4994 Apr 3, 2020

cristianonicolai Apr 6, 2020

nmirasch Apr 3, 2020

Sara4994 Apr 3, 2020

srambach Apr 3, 2020

Sara4994 Apr 3, 2020

srambach Apr 3, 2020

Sara4994 Apr 3, 2020

srambach Apr 3, 2020 •

edited

Loading

Sara4994 Apr 5, 2020

cristianonicolai Apr 6, 2020

Sara4994 Apr 6, 2020

cristianonicolai Apr 6, 2020

Sara4994 Apr 6, 2020

sonarcloud bot commented Apr 6, 2020

	<Link to={{pathname:'/ProcessInstances/Process/' + processInstanceData.id, state:{ prev: location.pathname}}}>
	<Link to={{pathname:'/Process/' + processInstanceData.id, state:{ prev: location.pathname}}}>

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

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

Conversation

Sara4994 commented Mar 30, 2020

Sara4994 commented Mar 30, 2020 • edited Loading

srambach commented Mar 30, 2020

cristianonicolai commented Mar 31, 2020

Sara4994 commented Mar 31, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nmirasch commented Apr 1, 2020

Sara4994 commented Apr 1, 2020

bxf12315 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

srambach Apr 3, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarcloud bot commented Apr 6, 2020

Sara4994 commented Mar 30, 2020 •

edited

Loading

srambach Apr 3, 2020 •

edited

Loading