diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml index 3646d02..34e0a98 100644 --- a/.github/workflows/backend.yml +++ b/.github/workflows/backend.yml @@ -19,6 +19,6 @@ jobs: - name: Run tests working-directory: ./backend run: cargo test --verbose - - name: Request help + - name: Build release and call executable working-directory: ./backend run: cargo run --release -- --help diff --git a/README.md b/README.md index bfe2b54..43a75be 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +![Frontend](https://github.com/paritytech/substrate-telemetry/workflows/Frontend%20CI/badge.svg) +![Backend](https://github.com/paritytech/substrate-telemetry/workflows/Backend%20CI/badge.svg) + # Polkadot Telemetry ## Overview @@ -37,7 +40,7 @@ This example listen on all interfaces and on port :8888 ```sh cd frontend -yarn +yarn install yarn start ``` @@ -49,7 +52,41 @@ Follow up installation instructions from the [Polkadot repo](https://github.com/ polkadot --dev --telemetry-url ws://localhost:8000/submit ``` -### Run via Docker +## Docker + +### Run the backend and frontend + +Obviously, the frontend need to be aware of the backend. In a similar way, your node will need to connect to the backend. +For the sake of brevity below, I will name the containers `backend` and `frontend`. In a complex environment, you will want to use names such as `telemetry-backend` for instance to avoid conflicts with other `backend` containers. + +Let's start the backend first. We will be using the published 'chevdor' images here, feel free to replace with you own image. + +``` +docker run --rm -i --name backend -p 8000:8000 chevdor/substrate-telemetry-backend -l 0.0.0.0:8000 +``` + +Let's now start the frontend: + +``` +docker run --rm -i --name frontend --link backend -p 80:80 -e SUBSTRATE_TELEMETRY_URL=ws://localhost:8000/feed chevdor/substrate-telemetry-frontend +``` + +WARNING: Do not forget the /feed part of the URL... + +NOTE: Here we used `SUBSTRATE_TELEMETRY_URL=ws://localhost:8000/feed`. This will work if you test on your laptop but NOT if your backend runs on a remote server. Keep in mind that the frontend docker image is serving a static site running your browser. The `SUBSTRATE_TELEMETRY_URL` is the WebSocket url that your browser will use to reach the backend. Say your backend runs on a remore server at `192.168.0.100`, you will need to set the IP/url accordingly. + +At that point, you can already open your browser at [http://localhost](http://localhost/) and see that telemetry is waiting for data. + +Let's bring some data in with a node: + +``` +docker run --rm -i --name substrate --link backend -p 9944:9944 chevdor/substrate substrate --dev --telemetry-url 'ws://backend:8000/submit 0' +``` + +You should now see your noe showing up in the telemetry frontend: +![image](doc/screenshot01.png) + +### Run via docker-compose To run via docker make sure that you have Docker Desktop. If you don't you can download for you OS here [Docker Desktop](https://www.docker.com/products/docker-desktop) @@ -62,14 +99,12 @@ docker-compose up --build -d - `--build` will build the images and rebuild, but this is not required every time - If you want to makes UI changes, there is no need to rebuild the image as the files are being copied in via volumes. -Now navigate to localhost:3000 in your browser to view the app. - -## Docker +Now navigate to [http://localhost:3000](http://localhost:3000/) in your browser to view the app. ### Build & Publish the Frontend docker image The building process is standard. You just need to notice that the Dockerfile is in ./packages/frontend/ and tell docker about it. The context must remain the repository's root though. ``` -DOCKER_USER=chevdor ./scripts/build-docker-frontend.sh +DOCKER_USER=chevdor ./scripts/build-docker-frontend.sh ``` diff --git a/backend/Cargo.toml b/backend/Cargo.toml index 301cac9..4b31649 100644 --- a/backend/Cargo.toml +++ b/backend/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "telemetry" -version = "0.2.0" +version = "0.2.1" authors = ["Parity Technologies Ltd. "] edition = "2018" license = "GPL-3.0" diff --git a/doc/screenshot01.png b/doc/screenshot01.png new file mode 100644 index 0000000..843efa6 Binary files /dev/null and b/doc/screenshot01.png differ diff --git a/frontend/package.json b/frontend/package.json index 67e8b74..89bf5b2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "@dotstats/frontend", - "version": "0.2.0", + "version": "0.2.1", "author": "Parity Technologies Ltd. ", "license": "GPL-3.0", "description": "Polkadot Telemetry frontend",