nitweb/angular: add metrics tab for packages, groups, modules and classes

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitweb/views/class.html b/share/nitweb/views/class.html
index 2af7b47..ec8ffee 100644 (file)
--- a/share/nitweb/views/class.html
+++ b/share/nitweb/views/class.html
@@ -19,6 +19,11 @@
                        <span class='glyphicon glyphicon-arrow-down'/> Linearization
                </a>
        </li>
+       <li role='presentation'>
+               <a data-toggle='tab' role='tab' data-target='#metrics' aria-controls='metrics' ng-click='entityCtrl.loadStructuralMetrics(); entityCtrl.loadPieChart()'>
+                       <span class='glyphicon glyphicon-stats'/> Metrics
+               </a>
+       </li>
 </ul>
 
 <div class='tab-content'>
@@ -58,4 +63,66 @@
                        </div>
                </div>
        </div>
+       <div role='tabpanel' class='tab-pane fade' id='metrics'>
+               <div class='card'>
+                       <div class='card-heading'>
+                               <h3 class='card-title'>Class inheritance</h3>
+                       </div>
+                       <div class='card-body container-fluid'>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Inheritance kind
+                                               <small>({{metrics.mclass['cnoa'].values[mentity.full_name].value}}
+                                               ancestors)</small>
+                                       </h4>
+                                       <chart-class-inheritance-kind chart-id='chartInheritanceKind'
+                                               chart-metrics='metrics.mclass' />
+                               </div>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Inheritance metrics
+                                       </h4>
+                                       <dl class='dl-horizontal'>
+                                               <dt>{{metrics.mclass.cnoa.values[mentity.full_name].value}}</dt>
+                                               <dd>ancestors</dd>
+                                               <dt>{{metrics.mclass.cnop.values[mentity.full_name].value}}</dt>
+                                               <dd>direct parents</dd>
+                                               <dt>{{metrics.mclass.cnoc.values[mentity.full_name].value}}</dt>
+                                               <dd>direct children</dd>
+                                               <dt>{{metrics.mclass.cnod.values[mentity.full_name].value}}</dt>
+                                               <dd>descendants</dd>
+                                       </dl>
+                                       <dl class='dl-horizontal'>
+                                               <dt>{{metrics.mclass.cdit.values[mentity.full_name].value}}</dt>
+                                               <dd>Depth in Inheritance Tree</dd>
+                                       </dl>
+                               </div>
+                       </div>
+               </div>
+               <div class='card'>
+                       <div class='card-heading'>
+                               <h3 class='card-title'>Class properties</h3>
+                       </div>
+                       <div class='card-body container-fluid'>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Properties kind
+                                               <small>({{metrics.mclass['cnbp'].values[mentity.full_name].value}}
+                                               accessible properties)</small>
+                                       </h4>
+                                       <chart-class-properties-kind chart-id='chartPropertiesKind'
+                                               chart-metrics='metrics.mclass' />
+                               </div>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Properties inheritance
+                                               <small>({{metrics.mclass['cnbp'].values[mentity.full_name].value}}
+                                               accessible properties)</small>
+                                       </h4>
+                                       <chart-class-properties-inh chart-id='chartPropertiesInh'
+                                               chart-metrics='metrics.mclass' />
+                               </div>
+                       </div>
+               </div>
+       </div>
 </div>

diff --git a/share/nitweb/views/group.html b/share/nitweb/views/group.html
index 0b58963..097ec4a 100644 (file)
--- a/share/nitweb/views/group.html
+++ b/share/nitweb/views/group.html
@@ -9,6 +9,11 @@
                        <span class='glyphicon glyphicon-object-align-vertical'/> Imports
                </a>
        </li>
+       <li role='presentation'>
+               <a data-toggle='tab' role='tab' data-target='#metrics' aria-controls='metrics' ng-click='entityCtrl.loadStructuralMetrics()'>
+                       <span class='glyphicon glyphicon-stats'/> Metrics
+               </a>
+       </li>
 </ul>
 
 <div class='tab-content'>
@@ -31,4 +36,30 @@
                        </div>
                </div>
        </div>
+       <div role='tabpanel' class='tab-pane fade' id='metrics'>
+               <metrics-list
+                       list-id='modules_importation'
+                       list-title='Modules importation'
+                       list-metrics='metrics.mmodules'
+                       list-metrics-names='["mdit", "mnoa", "mnop", "mnoc", "mnod"]'
+                       list-metrics-default='"mdit"' />
+               <metrics-list
+                       list-id='modules_definitions'
+                       list-title='Modules content'
+                       list-metrics='metrics.mmodules'
+                       list-metrics-names='["mnbi", "mnbr", "mnbic", "mnbac", "mnbcc"]'
+                       list-metrics-default='"mnbi"' />
+               <metrics-list
+                       list-id='classes_inheritance'
+                       list-title='Classes inheritance'
+                       list-metrics='metrics.mclasses'
+                       list-metrics-names='["cdit", "cnoa", "cnop", "cnoc", "cnod"]'
+                       list-metrics-default='"cdit"' />
+               <metrics-list
+                       list-id='classes_properties'
+                       list-title='Classes properties'
+                       list-metrics='metrics.mclasses'
+                       list-metrics-names='["cnbp", "cnba", "cnbip", "cnbrp", "cnbhp", "cnblp"]'
+                       list-metrics-default='"cnbp"' />
+       </div>
 </div>

diff --git a/share/nitweb/views/module.html b/share/nitweb/views/module.html
index e80f9cf..29e8130 100644 (file)
--- a/share/nitweb/views/module.html
+++ b/share/nitweb/views/module.html
@@ -19,6 +19,11 @@
                        <span class='glyphicon glyphicon-asterisk'/> Class definitions
                </a>
        </li>
+       <li role='presentation'>
+               <a data-toggle='tab' role='tab' data-target='#metrics' aria-controls='metrics' ng-click='entityCtrl.loadStructuralMetrics()'>
+                       <span class='glyphicon glyphicon-stats'/> Metrics
+               </a>
+       </li>
 </ul>
 
 <div class='tab-content'>
@@ -54,4 +59,70 @@
                        </div>
                </div>
        </div>
+       <div role='tabpanel' class='tab-pane fade' id='metrics'>
+               <div class='card'>
+                       <div class='card-heading'>
+                               <h3 class='card-title'>Module importation</h3>
+                       </div>
+                       <div class='card-body container-fluid'>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Importation metrics
+                                       </h4>
+                                       <dl class='dl-horizontal'>
+                                               <dt>{{metrics.mmodule.mnoa.values[mentity.full_name].value}}</dt>
+                                               <dd>ancestors</dd>
+                                               <dt>{{metrics.mmodule.mnop.values[mentity.full_name].value}}</dt>
+                                               <dd>direct parents</dd>
+                                               <dt>{{metrics.mmodule.mnoc.values[mentity.full_name].value}}</dt>
+                                               <dd>direct children</dd>
+                                               <dt>{{metrics.mmodule.mnod.values[mentity.full_name].value}}</dt>
+                                               <dd>descendants</dd>
+                                       </dl>
+                                       <dl class='dl-horizontal'>
+                                               <dt>{{metrics.mmodule.mdit.values[mentity.full_name].value}}</dt>
+                                               <dd>Depth in Inheritance Tree</dd>
+                                       </dl>
+                               </div>
+                       </div>
+               </div>
+               <div class='card'>
+                       <div class='card-heading'>
+                               <h3 class='card-title'>Module definitions</h3>
+                       </div>
+                       <div class='card-body container-fluid'>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Class definition kinds
+                                               <small>({{metrics.mmodule['mnbi'].values[mentity.full_name].value +
+                                                       metrics.mclass['mnbc'].values[mentity.full_name].value}}
+                                               class definitions)</small>
+                                       </h4>
+                                       <chart-module-definitions-kind chart-id='chartDefinitionsKind'
+                                               chart-metrics='metrics.mmodule' />
+                               </div>
+                               <div class='col-sm-6'>
+                                       <h4>
+                                               Class definition inheritance
+                                               <small>({{metrics.mmodule['mnbd'].values[mentity.full_name].value}}
+                                               accessible definitions)</small>
+                                       </h4>
+                                       <chart-module-definitions-inh chart-id='chartDefinitionsInh'
+                                               chart-metrics='metrics.mmodule' />
+                               </div>
+                       </div>
+               </div>
+               <metrics-list
+                       list-id='classes_inheritance'
+                       list-title='Classes inheritance'
+                       list-metrics='metrics.mclasses'
+                       list-metrics-names='["cdit", "cnoa", "cnop", "cnoc", "cnod"]'
+                       list-metrics-default='"cdit"' />
+               <metrics-list
+                       list-id='classes_properties'
+                       list-title='Classes properties'
+                       list-metrics='metrics.mclasses'
+                       list-metrics-names='["cnbp", "cnba", "cnbip", "cnbrp", "cnbhp", "cnblp"]'
+                       list-metrics-default='"cnbp"' />
+       </div>
 </div>

diff --git a/share/nitweb/views/package.html b/share/nitweb/views/package.html
index 32d9a2f..f1f3055 100644 (file)
--- a/share/nitweb/views/package.html
+++ b/share/nitweb/views/package.html
@@ -9,6 +9,11 @@
                        <span class='glyphicon glyphicon-object-align-vertical'/> Dependencies
                </a>
        </li>
+       <li role='presentation'>
+               <a data-toggle='tab' role='tab' data-target='#metrics' aria-controls='metrics' ng-click='entityCtrl.loadStructuralMetrics()'>
+                       <span class='glyphicon glyphicon-stats'/> Metrics
+               </a>
+       </li>
 </ul>
 
 <div class='tab-content'>
@@ -25,4 +30,30 @@
                        </div>
                </div>
        </div>
+       <div role='tabpanel' class='tab-pane fade' id='metrics'>
+               <metrics-list
+                       list-id='modules_importation'
+                       list-title='Modules importation'
+                       list-metrics='metrics.mmodules'
+                       list-metrics-names='["mdit", "mnoa", "mnop", "mnoc", "mnod"]'
+                       list-metrics-default='"mdit"' />
+               <metrics-list
+                       list-id='modules_definitions'
+                       list-title='Modules content'
+                       list-metrics='metrics.mmodules'
+                       list-metrics-names='["mnbi", "mnbr", "mnbic", "mnbac", "mnbcc"]'
+                       list-metrics-default='"mnbi"' />
+               <metrics-list
+                       list-id='classes_inheritance'
+                       list-title='Classes inheritance'
+                       list-metrics='metrics.mclasses'
+                       list-metrics-names='["cdit", "cnoa", "cnop", "cnoc", "cnod"]'
+                       list-metrics-default='"cdit"' />
+               <metrics-list
+                       list-id='classes_properties'
+                       list-title='Classes properties'
+                       list-metrics='metrics.mclasses'
+                       list-metrics-names='["cnbp", "cnba", "cnbip", "cnbrp", "cnbhp", "cnblp"]'
+                       list-metrics-default='"cnbp"' />
+       </div>
 </div>