-
Notifications
You must be signed in to change notification settings - Fork 0
Angular frontend (new)
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.
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.
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).
- line chart (Plotly.js)
- timeline-chart (set time span top right)
- Parameter selection
- direct comparison of multiple chains
- live
- bar chart (Chart.js)
- calculated by MetricCalculatorHelper
- using parameters
- calculated for the selected timespan
- live
- avg(Blocktime)
- deviation(Blocktime)
- avg(numberOfTransactions) / avg(Blocktime)
- avg(Blocksize) * avg(numberOfNodes) / avg(Blocktime)
- avg(CpuUsage) * Faktor
- 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
- select create to create manually
- name, description, numberOfNodes, transactionInterval, Payload
- transactionInterval & Payload slider are bordered
- dropzone
- upload .xes-file
- name, description necessary
- 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