|
|
# Technical Debt Toolbox - Front-end Walkthrough
|
|
|
|
|
|
The front-end of the Technical Debt Toolbox is actually part of the overall SDK4ED Dashboard. The front-end of the the Technical Debt Toolbox communicates with the back-end, allowing the easy invocation of the main functionalities (i.e., web services) that the toolbox provides, and the visualization of the produced results. In order to connect to the Technical Debt Toolbox front-end, the user needs to navigate to the SDK4ED Dashboard, which is currently located in the following links:
|
|
|
|
|
|
http://160.40.52.130:3000/
|
|
|
http://195.251.210.147:3000/
|
|
|
|
|
|
Technical Debt Toolbox includes Technical Debt and Refactorings Panels as presented in the figure below. Each of these panels is splitted in sub panels.
|
|
|
|
|
|
![DT-0](uploads/technical-debt/PanelsOfTDToolbox.png)
|
|
|
|
|
|
# Technical Debt Panel
|
|
|
|
|
|
Technical Debt Panel consists of TD Analysis and TD New Code.
|
|
|
|
|
|
![DT-1](uploads/technical-debt/TDPanel.png)
|
|
|
|
|
|
|
|
|
# TD Analysis Page
|
|
|
|
|
|
Suppose that the user selects the "TD Analysis" option from the drop-down list of Technical Debt. Then he/she is navigated to the page presented in the figure below.
|
|
|
|
|
|
![DT-2](uploads/technical-debt/TDAnalysis1.png)
|
|
|
|
|
|
As can be seen by the figure above, the page provides a drop-down list for selecting a software project and one buttons, namely ”New Analysis” (the displayed projects in the example are the three projects provided by the use case providers of the SDK4ED Project).
|
|
|
|
|
|
By clicking on the ”New Analysis” button, a new analysis of the selected software application is performed, by invoking the *TD Analysis* web services of the Technical Debt Toolbox back-end (see the [Description](technical-debt-toolbox-description) and [Usage](technica;-debt-toolbox-usage) Wiki Pages for more information regarding these services). In either case, the assessment results of the selected software application are parsed and presented to the user through different types of visualizations.
|
|
|
|
|
|
Suppose that the user selects the "Holisun Arassistance" project from the drop-down list and then clicks either on the "New Analysis" button for new version analysis or just envoke pre-analysed data. Behind the scenes the appropriate web services are invoked and when the results are ready the page is rendered in order to visualize them. The results of the "Holisun Arassistance" Project are presented in the following figures.
|
|
|
|
|
|
At the top part of the page, the results of the *TD Analysis* web service for the "Holisun Arassistance" project are presented (see the figure above).
|
|
|
The top line chart shows the evolution of TD Aspects throught software versions. We present TD Principal, TD Interest, TD Breaking Point and TD Cumulative Interest.
|
|
|
Under the line chart, principal and interest metrics on project level are shown. Principal metrics are TD Principal in minutes and currency, number of bugs, vulnerabilities, code smells and duplications. Interest metrics are breaking point, interest in currency, interest probability, maintainability ranking and interest probability ranking among projects (see the figure below).
|
|
|
|
|
|
![DT-3](uploads/technical-debt/TDAnalysis2.png)
|
|
|
|
|
|
Next, TD Analysis presents some principal and interest metrics in artefact level(file/package level). For more informations of the metrics we use for object-oriented and non-object-oriented languages, see the Deliverable D3.1. Some metrics for object-oriented-language Java are shown in the figures below, the first figure presents interest metrics and the second principal metrics.
|
|
|
|
|
|
![DT-4](uploads/technical-debt/TDAnalysis3.png)
|
|
|
![DT-5](uploads/technical-debt/TDAnalysis4.png)
|
|
|
|
|
|
|