feat: add webui #582

reliveyy · 2020-07-03T01:10:45Z

This PR adds xud-webui-poc (ReactJS based frontend) and xud-socketio (NodeJS based backend) into one container webui. And the container will expose port 8080 to your host. The frontend app uses REST + Websocket (socketio) API to get the order book of different trading pairs. The backend server translates the REST + Websocket API to gRPC calls and send it back to xud container.

How to test?

Run bash setup.sh -b webui --webui, then you should see a web UI in http://localhost:8080 like below. And it will auto-update when orders changed.

Known issues:

Disable webui by default. Add an option like --webui to enable it.
Decimal point alignment

EDIT: closes ExchangeUnion/xud#1495, closes ExchangeUnion/xud#1661

kilrau · 2020-07-03T09:08:50Z

Nice! 🎉

Some minor things looking at the screenshot:

pair switcher left aligned
~~Exchange Union~~ -> OpenDEX centered

raladev · 2020-07-06T16:36:53Z

it looks like listorders call behavior, but I thought it should be more like orderbook call;
Screenshot from 2020-07-06 19-34-40
orderbooks are mixed after pair changing - https://gofile.io/d/SKeo1c

place ETH/BTC and LTC/BTC orders
change pair in web ui
wait ws update
orderbook contains orders of 2 pairs

I removed all orders manually, but last order for each pair still is in orderbook even after page restart
Screenshot from 2020-07-06 20-10-48
Screenshot from 2020-07-06 20-13-18
rename React App tab to OpenDEX (maybe favicon should be changed too).
also, can we remove google play request?)
Screenshot from 2020-07-06 19-54-10

kilrau · 2020-07-06T16:46:47Z

rename "OpenDEX centered" -> "OpenDEX". I meant centred as in the middle of the blue bar, but actually left aligned is fine like this. Just removing the word "centered" is enough.

reliveyy · 2020-07-08T06:49:47Z

it looks like listorders call behavior, but I thought it should be more like orderbook call

Fixed. Orders are merged by price.

orderbooks are mixed after pair changing

Fixed. This is a frontend issue.

I removed all orders manually, but last order for each pair still is in orderbook even after page restart

WIP.

rename React App tab to OpenDEX (maybe favicon should be changed too).

Fixed (include favicon).

also, can we remove google play request?)

WIP.

rename "OpenDEX centered" -> "OpenDEX".

Fixed.

@raladev @kilrau

kilrau · 2020-07-08T07:41:52Z

Fixed. Orders are merged by price.

Tested, works. Marked as done.

orderbooks are mixed after pair changing

I tried a couple of things (placing order, switching pairs back and forth) and couldn't make orders being messed up. Marked as done.

I removed all orders manually, but last order for each pair still is in orderbook even after page restart

I tested this, couldn't reproduce. Removed orders (empty orderbook) and the UI orderbook was empty too. I marked it as done for now, please retest this with this version @raladev

also, can we remove google play request?)

WIP.

I couldn't see it calling play.google.com, but fonts.googleapis.com, we should remove this one too.

kilrau · 2020-07-08T08:38:03Z

Last commit removes the googleapis.com call. All good from my side, final ACK by @raladev

kilrau · 2020-07-08T09:27:42Z

Actually two more things:

we need these additional <network>.conf entries (also in sample conf as usual) and --webui.disabled & webui.port cli paramerters

[webui]
disabled = false / true (default)
port = 28888 (default simnet) / 18888 (default testnet) / 8888 (default mainnet)

the webui container didn't cleanly shutdown and was killed by docker in my case:

-------------------------------------
 diff null
[ltc_btc] current 
---------- OrderBook (2) ----------
ASKS:
BIDS:
- 0.02: 0.01
-------------------------------------
 new 
---------- OrderBook (null) ----------
ASKS:
BIDS:
- 0.02: 0.01
-------------------------------------
 diff null
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses
Failed to fetch orders: Error: 14 UNAVAILABLE: failed to connect to all addresses

raladev · 2020-07-08T10:58:59Z

Same for me with container shutdown
Retested all points, all of them work.

This commit adds xud-webui-poc (ReactJS based frontend) and xud-socketio (NodeJS based backend) into one container `webui`. And the container will expose port 8080 to your host. The frontend app uses REST + Websocket (socketio) API to get the order book of different trading pairs. The backend server translates the REST + Websocket API to gRPC calls and send it back to xud container.

raladev · 2020-07-08T16:15:47Z

web port should be exposed as default (28888/18888/8888 depends on network type). For now I should specify it, if i dont specify it, container will not have exposed ports.
it seems order changing does not solve shutdown problem, webui still dont want shutdown gracefully,
got timeout error once during startup phase.
Screen

kilrau · 2020-07-08T16:34:41Z

Just tested this too, options work all as expected, but found the same two issues as @raladev :

web port should be exposed as default (28888/18888/8888 depends on network type). For now I should specify it, if i dont specify it, container will not have exposed ports.

it seems order changing does not solve shutdown problem, webui still dont want shutdown gracefully,

I think we can ignore this one for now and only tackle it if it happens frequently:

got timeout error once during startup phase.

reliveyy · 2020-07-09T07:18:16Z

web port should be exposed as default (28888/18888/8888 depends on network type). For now I should specify it, if i dont specify it, container will not have exposed ports.

Done.

it seems order changing does not solve shutdown problem, webui still dont want shutdown gracefully,

Fixed (using supervisord).

got timeout error once during startup phase.

The supervisord will take care of the startup failure and restart it.

@raladev

raladev · 2020-07-09T12:28:45Z

images/utils/launcher/config/mainnet.conf

@@ -131,3 +131,4 @@

 [webui]
 #disabled = false
+#expose-ports = ["8888"]


change to #expose-ports = ["8888:8080"]

raladev · 2020-07-09T12:29:07Z

images/utils/launcher/config/simnet.conf

+#disabled = false
+#expose-ports = ["28888"]


change to #expose-ports = ["28888:8080"]

raladev · 2020-07-09T12:29:24Z

images/utils/launcher/config/testnet.conf

@@ -134,3 +134,4 @@

 [webui]
 #disabled = false
+#expose-ports = ["18888"]


change to #expose-ports = ["18888:8080"]

reliveyy requested a review from raladev July 3, 2020 01:10

reliveyy self-assigned this Jul 3, 2020

reliveyy marked this pull request as draft July 3, 2020 01:11

reliveyy force-pushed the webui branch from 8307ab1 to a06cf2c Compare July 6, 2020 11:40

reliveyy marked this pull request as ready for review July 6, 2020 11:42

kilrau self-requested a review July 6, 2020 14:03

kilrau added the P2 mid priority label Jul 6, 2020

reliveyy force-pushed the webui branch from 4f1d480 to e7c3b80 Compare July 7, 2020 05:59

reliveyy force-pushed the webui branch from 98b86bf to 953752e Compare July 8, 2020 05:43

reliveyy added 9 commits July 8, 2020 21:51

revert xud changes

9f010cf

fixup! testnet and mainnet

01ab555

add --webui option

142414a

fix arm grpc-tools

15d12bc

update

ef91504

update favicon

8ccdc6d

use fontsource-roboto

de2a9e9

add --webui.disabled and --webui.expose-ports options

51cb492

reliveyy force-pushed the webui branch from a147a4c to 51cb492 Compare July 8, 2020 13:52

move webui before xud

8ade7dd

reliveyy added 3 commits July 9, 2020 08:06

add missing --use-local-images

5699392

expose webui port by default

a34974d

stop webui gracefully

54d1537

add webui expose-ports option in network.conf

70952ae

raladev requested changes Jul 9, 2020

View reviewed changes

8080

baa261a

raladev self-requested a review July 9, 2020 13:29

raladev approved these changes Jul 9, 2020

View reviewed changes

raladev merged commit 47cd7a8 into master Jul 9, 2020

raladev deleted the webui branch July 9, 2020 13:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add webui #582

feat: add webui #582

reliveyy commented Jul 3, 2020 •

edited by kilrau

Loading

kilrau commented Jul 3, 2020 •

edited by raladev

Loading

raladev commented Jul 6, 2020 •

edited

Loading

kilrau commented Jul 6, 2020 •

edited

Loading

reliveyy commented Jul 8, 2020 •

edited

Loading

kilrau commented Jul 8, 2020 •

edited

Loading

kilrau commented Jul 8, 2020

kilrau commented Jul 8, 2020 •

edited by raladev

Loading

raladev commented Jul 8, 2020

raladev commented Jul 8, 2020 •

edited

Loading

kilrau commented Jul 8, 2020 •

edited

Loading

reliveyy commented Jul 9, 2020 •

edited

Loading

raladev Jul 9, 2020

raladev Jul 9, 2020

raladev Jul 9, 2020

feat: add webui #582

feat: add webui #582

Conversation

reliveyy commented Jul 3, 2020 • edited by kilrau Loading

How to test?

Known issues:

kilrau commented Jul 3, 2020 • edited by raladev Loading

raladev commented Jul 6, 2020 • edited Loading

kilrau commented Jul 6, 2020 • edited Loading

reliveyy commented Jul 8, 2020 • edited Loading

kilrau commented Jul 8, 2020 • edited Loading

kilrau commented Jul 8, 2020

kilrau commented Jul 8, 2020 • edited by raladev Loading

raladev commented Jul 8, 2020

raladev commented Jul 8, 2020 • edited Loading

kilrau commented Jul 8, 2020 • edited Loading

reliveyy commented Jul 9, 2020 • edited Loading

raladev Jul 9, 2020

Choose a reason for hiding this comment

raladev Jul 9, 2020

Choose a reason for hiding this comment

raladev Jul 9, 2020

Choose a reason for hiding this comment

reliveyy commented Jul 3, 2020 •

edited by kilrau

Loading

kilrau commented Jul 3, 2020 •

edited by raladev

Loading

raladev commented Jul 6, 2020 •

edited

Loading

kilrau commented Jul 6, 2020 •

edited

Loading

reliveyy commented Jul 8, 2020 •

edited

Loading

kilrau commented Jul 8, 2020 •

edited

Loading

kilrau commented Jul 8, 2020 •

edited by raladev

Loading

raladev commented Jul 8, 2020 •

edited

Loading

kilrau commented Jul 8, 2020 •

edited

Loading

reliveyy commented Jul 9, 2020 •

edited

Loading