Docs for Siren (#4023)

This adds some documentation for the Siren app into the Lighthouse book.

Co-authored-by: Mavrik <mrricki.m.usmc@gmail.com>

.gitignore

@@ -12,3 +12,4 @@ genesis.ssz
 
 # IntelliJ
 /*.iml
+.idea

book/src/SUMMARY.md

@@ -33,6 +33,11 @@
         * [Authorization Header](./api-vc-auth-header.md)
         * [Signature Header](./api-vc-sig-header.md)
     * [Prometheus Metrics](./advanced_metrics.md)
+* [Lighthouse UI (Siren)](./lighthouse-ui.md)
+	* [Installation](./ui-installation.md)
+	* [Configuration](./ui-configuration.md)
+	* [Usage](./ui-usage.md)
+	* [FAQs](./ui-faqs.md)
 * [Advanced Usage](./advanced.md)
     * [Checkpoint Sync](./checkpoint-sync.md)
     * [Custom Data Directories](./advanced-datadir.md)

book/src/lighthouse-ui.md

@@ -0,0 +1,33 @@
+# Lighthouse UI (Siren)
+
+_Documentation for Siren users and developers._
+
+[![Chat Badge]][Chat Link]
+
+[Chat Badge]: https://img.shields.io/badge/chat-discord-%237289da
+[Chat Link]: https://discord.gg/cyAszAh
+
+![ui-overview](./imgs/ui.png)
+
+Siren is a user interface built for Lighthouse that connects to a Lighthouse Beacon Node and
+a Lighthouse Validator Client to monitor performance and display key validator
+metrics. 
+
+The UI is currently in active development. Its resides in the
+[Siren](https://github.com/sigp/siren) repository.
+
+## Topics
+
+See the following Siren specific topics for more context-specific
+information:
+
+- [Installation Guide](./ui-installation.md) - Information to install and run the Lighthouse UI.
+- [Configuration Guide](./ui-configuration.md) - Explanation of how to setup
+	and configure Siren.
+- [Usage](./ui-usage.md) - Details various Siren components. 
+- [FAQs](./ui-faqs.md) - Frequently Asked Questions.
+
+## Contributing
+
+If you find and issue or bug or would otherwise like to help out with the
+development of the Siren project, please submit issues and PRs to the [Siren](https://github.com/sigp/siren) repository.

book/src/ui-configuration.md

@@ -0,0 +1,47 @@
+# Configuration
+
+Siren requires a connection to both a Lighthouse Validator Client
+and a Lighthouse Beacon Node. Upon running you will first be greeted by the
+following configuration screen.
+
+![ui-configuration](./imgs/ui-configuration.png)
+
+
+## Connecting to the Clients
+
+This allows you to enter the address and ports of the associated Lighthouse
+Beacon node and Lighthouse Validator client.
+
+> The Beacon Node must be run with the `--gui` flag set. To allow the browser
+> to access the node beyond your local computer you also need to allow CORS in
+> the http API. This can be done via `--http-allow-origin "*"`.
+
+A green tick will appear once Siren is able to connect to both clients. You
+can specify different ports for each client by clicking on the advanced tab.
+
+
+## API Token
+
+The API Token is a secret key that allows you to connect to the validator
+client. The validator client's HTTP API is guarded by this key because it
+contains sensitive validator information and the ability to modify
+validators. Please see [`Validator Authorization`](./api-vc-auth-header.md)
+for further details. 
+
+Siren requires this token in order to connect to the Validator client.
+The token is located in the default data directory of the validator
+client. The default path is
+`~/.lighthouse/<network>/validators/api-token.txt`.
+
+The contents of this file for the desired valdiator client needs to be
+entered.
+
+## Name
+
+This is your name, it can be modified and is solely used for aesthetics. 
+
+## Device
+
+This is a name that can be associated with the validator client/beacon
+node pair. Multiple such pairs can be remembered for quick swapping between
+them.

book/src/ui-faqs.md

@@ -0,0 +1,13 @@
+# Frequently Asked Questions
+
+## 1. Where can I find my API token?
+The required Api token may be found in the default data directory of the validator client. For more information please refer to the lighthouse ui configuration [`api token section`](./ui-configuration.md#api-token).
+
+## 2. How do I fix the Node Network Errors?
+If you recieve a red notification with a BEACON or VALIDATOR NODE NETWORK ERROR you can refer to the lighthouse ui configuration and [`connecting to clients section`](./ui-configuration.md#connecting-to-the-clients).
+
+## 3. How do I change my Beacon or Validator address after logging in?
+Once you have successfully arrived to the main dashboard, use the sidebar to access the settings view. In the top right hand corner there is a `Configurtion` action button that will redirect you back to the configuration screen where you can make appropriate changes.
+
+## 4. Why doesn't my validator balance graph show any data?
+If your graph is not showing data, it usually means your validator node is still caching data. The application must wait at least 3 epochs before it can render any graphical visualizations. This could take up to 20min.

book/src/ui-installation.md

@@ -0,0 +1,103 @@
+# 📦 Installation
+
+Siren runs on Linux, MacOS and Windows.
+
+
+## Pre-Built Electron Packages
+
+There are pre-compiled electron packages for each operating systems which can
+be downloaded and executed. These can be found on the
+[releases](https://github.com/sigp/siren/releases) page of the
+Siren repository.
+
+Simply download the package specific to your operating system and run it.
+
+## Building From Source
+
+### Requirements
+
+Building from source requires `Node v18` and `yarn`. 
+
+### Building From Source
+
+The electron app can be built from source by first cloning the repository and
+entering the directory:
+
+```
+$ git clone https://github.com/sigp/siren.git
+$ cd siren
+```
+
+Once cloned, the electron app can be built and ran via the Makefile by:
+
+```
+$ make
+```
+
+alternatively it can be built via:
+
+```
+$ yarn
+```
+
+Once completed successfully the electron app can be run via:
+
+```
+$ yarn dev
+```
+
+### Running In The Browser
+
+#### Docker (Recommended)
+
+Docker is the recommended way to run a webserver that hosts Siren and can be
+connected to via a web browser. We recommend this method as it establishes a
+production-grade web-server to host the application.
+
+`docker` is required to be installed with the service running.
+
+The docker image can be built and run via the Makefile by running:
+```
+$ make docker
+```
+
+Alternatively, to run with Docker, the image needs to be built. From the repository directory
+run:
+```
+$ docker build -t siren .
+```
+
+Then to run the image:
+```
+$ docker run --rm -ti --name siren -p 80:80 siren
+```
+
+This will open port 80 and allow your browser to connect. You can choose
+another local port by modifying the command. For example `-p 8000:80` will open
+port 8000.
+
+To view Siren, simply go to `http://localhost` in your web browser.
+
+#### Development Server
+
+A development server can also be built which will expose a local port 3000 via:
+```
+$ yarn start
+```
+
+Once executed, you can direct your web browser to the following URL to interact
+with the app:
+```
+http://localhost:3000
+```
+
+A production version of the app can be built via
+```
+$ yarn build
+```
+and then further hosted via a production web server.
+
+### Known Issues
+
+If you experience any issues in running the UI please create an issue on the
+[Lighthouse UI](https://github.com/sigp/lighthouse-ui) repository.

book/src/ui-usage.md

@@ -0,0 +1,61 @@
+# Usage
+
+# Dashboard
+
+Siren's dashboard view provides a summary of all performance and key validator metrics. Sync statuses, uptimes, accumulated rewards, hardware and network metrics are all consolidated on the dashboard for evaluation.
+
+![](imgs/ui-dashboard.png)
+
+## Account Earnings
+
+The account earnings component accumulates reward data from all registered validators providing a summation of total rewards earned while staking. Given current conversion rates, this component also converts your balance into your selected fiat currency.
+
+Below in the earning section, you can also view your total earnings or click the adjacent buttons to view your estimated earnings given a specific timeframe based on current device and network conditions.
+
+![](imgs/ui-account-earnings.png)
+
+## Validator Table
+
+The validator table component is a list of all registered validators, which includes data such as name, index, total balance, earned rewards and current status. Each validator row also contains a link to a detailed data modal and additional data provided by [Beaconcha.in](https://beaconcha.in).
+
+![](imgs/ui-validator-table.png)
+
+## Validator Balance Chart
+
+The validator balance component is a graphical representation of each validator balance over the latest 10 epochs. Take note that only active validators are rendered in the chart visualization.
+
+![](imgs/ui-validator-balance1.png)
+
+By clicking on the chart component you can filter selected validators in the render. This call allow for greater resolution in the rendered visualization.
+
+<img src="imgs/ui-balance-modal.png" width="48%" style="display: inline; float: left; margin-right: 4%"/>
+
+<img src="imgs/ui-validator-balance2.png" width="48%"/>
+
+
+## Hardware Usage and Device Diagnostics
+
+The hardware usage component gathers information about the device the Beacon Node is currently running. It displays the Disk usage, CPU metrics and memory usage of the Beacon Node device. The device diagnostics component provides the sync status of the execution client and beacon node.
+
+<img height="350" src="imgs/ui-hardware.png" style="display: inline; float: left; margin-right: 25px"/>
+
+<img height="350" src="imgs/ui-device.png"/>
+
+
+# Validator Management
+
+Siren's validator management view provides a detailed overview of all validators with options to deposit to and/or add new validators. Each validator table row displays the validator name, index, balance, rewards, status and all available actions per validator.
+
+![](imgs/ui-validator-management.png)
+
+## Validator Modal
+
+Clicking the validator icon activates a detailed validator modal component. This component also allows users to trigger validator actions and as well to view and update validator graffiti. Each modal contains the validator total income with hourly, daily and weekly earnings estimates.
+
+<img height="450" src="imgs/ui-validator-modal.png"/>
+
+# Settings
+
+Siren's settings view provides access to the application theme, version, name, device name and important external links. From the settings page users can also access the configuration screen to adjust any beacon or validator node parameters.
+
+![](imgs/ui-settings.png)