-
Notifications
You must be signed in to change notification settings - Fork 0
Angular frontend architecture (new)
Services are responsible for the API-Server communication and state synchronization. Directory: /src/app/services/
The Chain-selector service is responsible for providing the current chain selection by the user to other components. It also defines the ChainItem and ChainSelection interfaces. This is necessary to provide a consistent state between the chain-data-source-selector and the data-visualization-bar component.
name: string,
target: string,isEmpty(): booleanselectedChains: ChainSelection
setSelectedChains(selectedChains: ChainSelection): voidThe data-retriever is responsible to fetch chain data from the API-server. It takes a target (protected Chains), a chain and a time span to fetch the correct data. If you have to get data from multiple chains (ChainSelection), the service joins them to one result in the getChainData() function. You can also load replay data with the data-retriever. This service also provides an interface for the chain data (ChainData).
access: string
avgBlocktime: Array<number>
avgDifficulty: Array<number>
avgGasPrice: Array<number>
avgHashrate: Array<number>
chainName: string
numberOfHosts: Array<number>
numberOfMiners: Array<number>
timestamp: Array<string>
target: stringgetPublicChainApiData(chain: string, timeSpan: object): Observable<ChainData>
getPrivateChainApiData(chain: string, target: string, timeSpan: object): Observable<ChainData>
getChainData(selectedChains: ChainSelection, timeSpan): Observable<Array<ChainData>>
getReplayApiData(chain: string, target: string, startTime: string, endTime: string): Observable<object>
chainInfo(): Observable<string>
setChainParameters(parameters: object): Observable<string>The Parameter-configurator is used to control the chains. You can get the current state of the chains and start and stop them. The API-server provides configuration options for the chain that can be manipulated by using setChainParameters().
chainInfo(): Observable<string>
setChainParameters(parameters: object): Observable<string>
startChain(chainName: string, target: string): Observable<string>
stopChain(chainName: string, target: string): Observable<string>The Recording-handler is responsible for starting and stopping recordings. It also provides functions to receive all recordings, the current recording state and triggers a replay. To trigger the replay the service provides an interface with all necessary replay data for the data-visualization-bar component.
replaying: boolean
recordingTimes: object
selectedRecordingChains: ChainSelectionThe Scenario-configurator is responsible for scenario uploads, creations and for the scenario selection by providing functions to receive scenario information.
upload(object): Observable<string>
createScenario(object): Observable<string>
getScenarios(): Observable<Object>
getScenario(id: string): Observable<Object>The User-authentication service provides functions to authenticate / logout the user and check the current state to automatically logout the user.
authenticate(username: string, password: string): Observable<boolean>
checkAuthenticationStatus(): Observable<string>
logout(): Observable<string>The frontend is splitted into separate components. All components compose out of following files:
- HTML-file (responsible for the structure of the component)
- .ts-file (responsible for the logic of the component)
- .ts.spec-file (responsible for testing the component)
- .scss-file (responsible for styling the component)
The main component is the app.component. This is the entry point for the construction of the site. All other components are integrated by the app.module file. All other components get included hierarchically in the HTML files. The app.component provides the general structure of the whole website (Header, Footer, content-structure). The content is divided into two bars (also two components). The smaller left bar is responsible for all adjustable options / configuration of the chain (selection-bar). The bigger right bar is responsible for displaying actual data. (data-visualization-bar)
The data-visualization-bar is responsible for fetching, distributing and displaying actual data. It provides two main parts: The parameter visualization and the metric visualization. It is also responsible for calculating the metrics for the given parameters (metric-calculation-helper). The first part is composed by 3 elements. A time span selection, the line chart to display data and a toggle group to select the parameter that should be displayed on the line chart. The second part is an amount of bar charts that receive the metric that should be displayed.
To render the data we use Plotly.js.
The line chart receives data with corresponding timestamps. To keep the chart up to date it has a redraw() function that can be called by the parent component. It also redraws if the input data changes. If the component has to redraw, it purges the existing element and plots a new plot. The line chart has fixed ranges for the x-axis to display the data according to the given time span and not adjusted. Other options such as zooming or scrolling are disabled because they caused bugs.
The bar chart receives data sets of labels and chain names. It maps them together to display them correctly. It also can be redrawn by the parent component. The redraw behavior is analog to the line chart.
To style our components we use the Angular Material framework. Additionally to the already styled components we used SASS in combination with the local styling of Angular. Every component has a .scss-file in the directory that is used to style only this component.