Skip to content
This repository has been archived by the owner on Jul 5, 2024. It is now read-only.

Angular frontend (new)

Jump to bottom
Tom Lichtenstein edited this page May 29, 2018 · 20 revisions

Frontend

Tech stack

  • Angular 5
  • Angular Material
  • Plotly.js

Concept

overview

Our main concept was 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 of the frontend that are not relevant for the current user experience.

API-Server communication

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 response of request 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.

User state

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.

not authenticated

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).

authenticated

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

Data visualization

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).

Parameters

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.

Metrics

  • bar chart (Chart.js)
  • calculated by MetricCalculatorHelper
  • using parameters
  • calculated for the selected timespan
  • live

Mining Time

  • avg(Blocktime)

Stability

  • deviation(Blocktime)

Throughput

  • avg(numberOfTransactions) / avg(Blocktime)

Data transfer

  • avg(Blocksize) * avg(numberOfNodes) / avg(Blocktime)

Energy consumption

  • avg(CpuUsage) * Faktor

Chain configuration

  • individual configuration options for different chains
  • parses chain info from API-Server
  • adapts state to chain state
  • different configurations for same chain on different target systems

Scenario configuration

Create a scenario

  • select create to create manually
  • name, description, numberOfNodes, transactionInterval, Payload
  • transactionInterval & Payload slider are bordered

Upload a scenario

  • dropzone
  • upload .xes-file
  • name, description necessary

Recordings

  • start recording / stop recording
  • recordings are global | state will be updated to 'recording' + timer
  • display recording -- new selectable chain menu -- blur menus that are not relevant -- display whole recording
Clone this wiki locally