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

Concept

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

logged out

  • only data display and chain selection

logged in

  • many more options

Data visualization

Parameters

  • line chart (Plotly.js)
  • timeline-chart (set time span top right)
  • Parameter selection
  • direct comparison of multiple chains
  • live

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