Angular frontend (new)
- Angular 5
- Angular Material
- Plotly.js
Our main concept was to design the new frontend as a one page website. We created two bars, one to set the chain parameters and other settings and one to display the data, so you do not have to switch between the configuration and the analytical part and can observe the changes immediately. To avoid having too many input fields and indicators, we hide those that are not relevant for the current user experience.
The whole API-server communication is encapsulated in different services. (src/app/services/) They are semantically divided into following parts:
-
user-authentication(handles user login / logout and current state operations) -
data-retriever(accesses the live chain data from the API server) -
parameter-configurator(sends chain parameter changes and receives current chain state) -
recording-handler(starts / stops recordings and receives recording data for the visualization) -
scenario-configurator(creates new scenarios via upload or manual configuration and receives all stored scenarios)
The whole communication takes place via the HTTP protocol. Every method returns an observable object for the component. The component has to handle errors by itself. This leads to more accurate error messages for the user. The responses of requests are visualized as snack bars at the bottom of the screen.
The only exception is the chain-selector service. This service stores the state of the current selected chains. Services can be injected into other components to have a consistent state between both components. This is important for the communication between the data-visualization-bar component and the chain-data-source-selector component to update the charts according to the current selection.
The user state defines the configuration options a user has to manipulate the current state of the backend. There are two states: authenticated and not authenticated. The different interfaces are not implemented by redirection. The user stays on the same site but the state changes controls the rendering of some components.
While not authenticated, the user has no options to control or manipulate the state in the background. The user is only allowed to select currently active chains and display the live data (parameters and metrics).
An authenticated user has more options. The user has complete access to:
- chain parameter configuration
- start, stop and display recordings (recordings are global events, only one recording at a time)
- create, upload and start scenarios
The data is visualized by charts in the data-visualization-bar component. The displayed data depends on the current chain selection for live data or the chain selection of a recording. The time span of the live recording can be changed via the selection above the line chart (parameter display). It updates its data every 15 seconds or when a state change is performed. (new chain selection or new display time selection).
The parameters can be accessed from the API-Server. They describe the live state of the blockchain. We choose a line chart to give an overview over the behavior of the chain for the last minutes / hours. To correctly display the data we integrated the time series bar from Plotly.js. To simplify the comparison of multiple chains, we display all selected chains in the same chart. Because you can only compare the values of same parameters with each other, we added a parameter selection menu below the chart. The chart data adapts to the selected parameter immediately. Selectable parameters are:
- Number of hosts
- Number of miners
- Hashrate
- Blocktime
- Blocksize
- Transactions per Block
- Difficulty
The metrics are displayed below the parameter chart. They are being calculated using the parameters (of the current live time selection or replay) from the API-Server. All calculation methods are performed by the MetricCalculatorHelper. A description with further details appears, if you hover over the metrics. (src/app/data-visualization-bar/metric-calculation-helper).
- avg(Blocktime)
- 1 / deviation(Blocktime)
- avg(numberOfTransactions) / avg(Blocktime)
- avg(Blocksize) * avg(numberOfNodes) / avg(Blocktime)
- minCpuConsumption + (minCpuConsumption - maxCpuConsumption) * avg(CpuUsage) / 100 * numberOfCpus
All chains can be configured individually on each target system. The customization menu adapts to the possible customization options provided by the API-server. To provide the current state of the chains and the targets, the Configurator polls the status information from the API-Server. New configuration options appear if all other necessary options are selected. (e.g.: Chain / Scenario Configuration) Additionally to the chain configuration you can select the scenario that you want to start on the selected chain.
If you want to create your own scenario, you can upload a Scylla log file or select the Create field in the scenario selection (Configurator). Now you can create a generic scenario with a minimum number of chain nodes, a transaction interval and a payload size. The transaction interval and the payload size are bordered by the slider to avoid a denial of service. When you create a new scenario the selection will update itself and provide the new scenario.
To upload a scenario you simply create a scenario log with Scylla (.xes-file). Drag it into the upload box and add a name and a description to upload it.
Start a recording by adding a name and clicking the recording button.
Recordings are global events. Everyone can see the current recording and a counter which displays the time the recording is already running. There can be only one recording simultaneously.
Select a recording to replay it. The graphs will show the whole recording parameters and calculated metrics. You can select the chains individually in a new chain menu. Other menus will disappear until the replay stops because they are not relevant at the time.