feat: add ipfs connection indicator and notifications #802

olizilla · 2018-09-19T10:42:56Z

This is an initial sketch of an idea on how to inform users about IPFS connection issues. It works for both api errors and window.ipfs errors, but it is very high level; just enough info to let the user know that we're not able to talk to ifps at the moment.

Add an IPFS connection status indicator to the top right. It's yellow/orange when when we get errors back from the stats api call, which we poll every 3s, so is a useful indicator of connection health.
Add a dismissible toast style notification to let you know that there is a problem.
The IPFS request error notification is replaced with a "Normal IPFS service has resumed" if it wasn't dismissed, when the connection comes back, otherwise it just stays hidden.

TODO

listen for errors from files tab.
this is branched off of the work in [WIP] feat: add api and api provider info #799 so that needs merging first, which in turn needs fix: multiaddr address handling ipfs-inactive/ipfs-redux-bundle#8

- show the api address when connect via http - otherwise show api provider (window.ipfs, embedded js-ipfs) License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

- got to await the doc title test othewise it resolves after the test ends - e2e tests are carried out on a small screen. the notificaiton div was covering the settings link so it couldnt be clicked. License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

- update to ipfs-redux-bundle v3.0.1 - tweak notify dismiss reactor to more reliably auto dismiss License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

hacdias · 2018-09-20T09:54:32Z

@olizilla oops: found a bug: when going to /welcome it doesn't show the API address in input box. It might be an issue on ipfs-redux-bundle. Will take a look.

hacdias · 2018-09-20T09:59:27Z

@olizilla ~~I think~~ that issue is fixed by ipfs-inactive/ipfs-redux-bundle#12

- also update ipfs-redux-bundle v3.1.0 License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla · 2018-09-20T12:55:35Z

Live action speed play here https://ipfs.io/ipfs/QmevJYiF5yFGxz68kHWwyT62sEDVtTJnn8TssqD3XGEYFM/ipfs-webui-connection-indicator-sneak-peak.mp4

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla · 2018-09-20T13:24:50Z

I'm moving the i18n out of the bundle and into the Notify component and adding tests for the bundle.

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla · 2018-09-20T16:02:42Z

I'd like to merge this to revamp and then move revamp to master 🚢💨
@lidel @alanshaw @fsdiogo pls take a look

fsdiogo · 2018-09-20T16:25:17Z

src/bundles/notify.js

+# Notify
+- show error when ipfs goes away.
+- show ok when it comes back.
+- dismiss the the ok after 2s


dismiss ~~the~~ the ok after 2s 3s

fsdiogo · 2018-09-20T16:34:54Z

src/bundles/notify.js

+      return { ...state, show: false }
+    }
+
+    if (action.type.match(/_FETCH_FAILED$/) || action.type.match(/^FILE_\w+_FAILED$/)) {


The actions are FILES_*, so this should be:

action.type.match(/^FILES_\w+_FAILED$/)`

fsdiogo · 2018-09-20T16:35:28Z

src/bundles/notify.js

+      }
+    }
+
+    if (action.type.match(/_FETCH_FINISHED$/) || action.type.match(/^FILE_\w+_FINISHED$/)) {


Same here: FILES_.

src/components/connected/Connected.js

lidel

Looks 👌

I see potential for small tweaks:

Having spinner in left top corner and connection indicator in the right one is bit distracting.
Perhaps we could merge them and just animate connection indicator instead of having a separate spinner? (This could be a separate PR)
Let's make indicator interactive (would be cool to do it before this is merged):
- cursor: help or cursor: pointer
- Clicking on connection status indicator should display already existing troubleshooting guide:
  - → troubleshooting welcome screen
  - → this screen (enables user to switch to different API without inventing any new UI)

- add a retry-init bundle to track ipfs init failures and retry - Make connection indicator a link to welcome page - Improve language around network traffic graphs License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla · 2018-09-21T10:17:37Z

@lidel very good plan! I have made it so. The spinner is gone. The connection indicator is a link.

For bonus points we now also have auto-retry ipfs init when you get stuck on the welcome page if you open the app with no daemon running. If you go start your daemon, the page will now auto update to show you are now connected, which feels nice.

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla · 2018-09-21T10:28:11Z

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla · 2018-09-21T10:57:25Z

Gonna merge this and see if i can do anything about the bundlesize in a separate PR

lidel

👌

olizilla added 5 commits September 17, 2018 14:49

feat: add api and api provider info

75747dc

- show the api address when connect via http - otherwise show api provider (window.ipfs, embedded js-ipfs) License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

chore: add i18n key for api. update locales.

0d48832

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

Merge remote-tracking branch 'origin/revamp' into more-node-info

2c9da74

wip: notify on connection error

62251cb

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

feat: add connected bundle and status indicator

0482c76

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla mentioned this pull request Sep 19, 2018

v2.0.0 Release 🚢 Shipping the Revamp 🚀 #749

Closed

15 tasks

olizilla added 2 commits September 19, 2018 15:59

fix: keep polling api when in the background

b084bdb

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

chore: update ipfs-redux-bundle

f3340aa

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla mentioned this pull request Sep 19, 2018

[WIP] feat: add api and api provider info #799

Closed

1 task

olizilla added 2 commits September 19, 2018 16:29

fix: e2e tests

629f53b

- got to await the doc title test othewise it resolves after the test ends - e2e tests are carried out on a small screen. the notificaiton div was covering the settings link so it couldnt be clicked. License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

fix: api address is preserved in localStorage

c397f89

- update to ipfs-redux-bundle v3.0.1 - tweak notify dismiss reactor to more reliably auto dismiss License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla requested review from hacdias and alanshaw September 20, 2018 08:16

hacdias approved these changes Sep 20, 2018

View reviewed changes

fix: null guard in Address

a05f656

- also update ipfs-redux-bundle v3.1.0 License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

feat: link to release where possible

4e34368

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

feat: test notify bundle and extract i18n

0eff8f1

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

olizilla requested review from lidel and fsdiogo September 20, 2018 14:43

fsdiogo suggested changes Sep 20, 2018

View reviewed changes

lidel requested changes Sep 20, 2018

View reviewed changes

olizilla mentioned this pull request Sep 21, 2018

fix: maintain failed state while restarting ipfs-inactive/ipfs-redux-bundle#13

Merged

olizilla added 3 commits September 21, 2018 11:00

feat: auto-reinit ipfs after first failure

b9bff06

- add a retry-init bundle to track ipfs init failures and retry - Make connection indicator a link to welcome page - Improve language around network traffic graphs License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

chore: ipfs-redux-bundle@3.2.0

865acf1

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

fix: notify about files errors

19f5dcd

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

fix: update welcome message on connection change

cb02ab3

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

fix: add selectIpfsConnected to peer locatin bundle tests

e9a3d35

License: MIT Signed-off-by: Oli Evans <oli@tableflip.io>

lidel approved these changes Sep 21, 2018

View reviewed changes

olizilla merged commit 3847f78 into revamp Sep 21, 2018

olizilla deleted the notify branch September 21, 2018 10:58

olizilla mentioned this pull request Sep 25, 2018

Handle IPFS connection errors gracefully #773

Closed

3 tasks

lidel mentioned this pull request Sep 29, 2018

Permalinks with API Address #785

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add ipfs connection indicator and notifications #802

feat: add ipfs connection indicator and notifications #802

olizilla commented Sep 19, 2018 •

edited

Loading

hacdias commented Sep 20, 2018

hacdias commented Sep 20, 2018 •

edited

Loading

olizilla commented Sep 20, 2018

olizilla commented Sep 20, 2018

olizilla commented Sep 20, 2018

fsdiogo Sep 20, 2018

fsdiogo Sep 20, 2018

fsdiogo Sep 20, 2018

lidel left a comment

olizilla commented Sep 21, 2018

olizilla commented Sep 21, 2018

olizilla commented Sep 21, 2018

lidel left a comment

feat: add ipfs connection indicator and notifications #802

feat: add ipfs connection indicator and notifications #802

Conversation

olizilla commented Sep 19, 2018 • edited Loading

hacdias commented Sep 20, 2018

hacdias commented Sep 20, 2018 • edited Loading

olizilla commented Sep 20, 2018

olizilla commented Sep 20, 2018

olizilla commented Sep 20, 2018

fsdiogo Sep 20, 2018

Choose a reason for hiding this comment

fsdiogo Sep 20, 2018

Choose a reason for hiding this comment

fsdiogo Sep 20, 2018

Choose a reason for hiding this comment

lidel left a comment

Choose a reason for hiding this comment

olizilla commented Sep 21, 2018

olizilla commented Sep 21, 2018

olizilla commented Sep 21, 2018

lidel left a comment

Choose a reason for hiding this comment

olizilla commented Sep 19, 2018 •

edited

Loading

hacdias commented Sep 20, 2018 •

edited

Loading