fix(reason): add new reason functionality to support recommendations

src/app/app.component.ts

@@ -8,7 +8,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 
 export class AppComponent implements OnInit {
   public stackUrl: string =
-    'https://recommender.api.openshift.io/api/v1/stack-analyses/aafb40f724804b919e0f2eca62a02c81';
+    'https://recommender.api.openshift.io/api/v1/stack-analyses/76c1b4829bf2402e8a86af632c572896';
 
   constructor() {}
   ngOnInit(): void {

src/app/stack/component-level/component-level-component.spec.ts

@@ -1,6 +1,7 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Http, ConnectionBackend, RequestOptions, BaseRequestOptions} from '@angular/http';
 import {Contexts} from 'ngx-fabric8-wit';
+import {TooltipModule} from 'ngx-bootstrap';
 import {ToastNotificationComponent} from '../toast-notification/toast-notification.component';
 import {ComponentLevelComponent} from './component-level.component';
 import {EllipsisDirective} from '../utils/ellipsis.directive';
@@ -21,6 +22,9 @@ describe ('ComponentLevelComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
+            imports: [
+                TooltipModule
+            ],
             declarations: [
                 ComponentLevelComponent,
                 EllipsisDirective,

src/app/stack/component-level/component-level.component.html

@@ -35,7 +35,7 @@
                 </tr>
             </thead>
             <tbody (click)="handleCollapseClick($event)" (hover)="handleHoverState($event)">
-                <tr class="{{dependency['parent-reference'] ? dependency['parent-reference'] : null}}" [ngClass]="{'parent-class': dependency.isParent, 'child-class': dependency.isChild}" *ngFor="let dependency of (dependenciesList | filter: fieldName)">
+                <tr [tooltip]="dependency['reason'] ? dependency['reason'] : null" class="{{dependency['parent-reference'] ? dependency['parent-reference'] : null}}" [ngClass]="{'parent-class': dependency.isParent, 'child-class': dependency.isChild}" *ngFor="let dependency of (dependenciesList | filter: fieldName)">
                     <td ellipsis data-id="{{dependency.compId}}">
                         <span>
                             <i [ngClass]="{'fa': true, 'fa-reply relation-icon': dependency.isChild, 'fa-database': dependency.isParent || isCompanion === true, 'parent-icon': dependency.isParent, 'companion': isCompanion === true}" aria-hidden="true" *ngIf="dependency.isChild || dependency.isParent || isCompanion === true"></i>

src/app/stack/component-level/component-level.component.ts

@@ -451,6 +451,7 @@ export class ComponentLevelComponent implements OnChanges {
         output['has_issue'] = input['security'].length > 0;
         output['security_issue'] = output['has_issue'] ? Math.max.apply(Math, input['security'].map(d => d.CVSS)) : '';
         output['used_by'] = github['used_by'];
+        output['reason'] = input['reason'] || null;
         output['categories'] = input['topic_list'];
         output['categories'] = (output['categories'] && output['categories'].length > 0 && output['categories'].join(', ')) || '';
         output['action'] = canCreateWorkItem ? 'Create Work Item' : '';

src/app/stack/component-level/component-level.module.ts

@@ -1,6 +1,8 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
+import {TooltipModule} from 'ngx-bootstrap';
+
 import {ComponentLevelComponent} from './component-level.component';
 import {EllipsisDirective} from '../utils/ellipsis.directive';
 // import {SentimentModule} from '../utils/sentiment/sentiment.module';
@@ -11,7 +13,8 @@ import {ToastNotificationComponent} from '../toast-notification/toast-notificati
 
 @NgModule({
     imports: [
-        CommonModule
+        CommonModule,
+        TooltipModule.forRoot()
     ],
     declarations: [
         ComponentLevelComponent,

src/app/stack/stack-analyses.service.ts

@@ -47,7 +47,6 @@ export class StackAnalysesService {
   getStackAnalyses(url: string): Observable<any> {
     let options = new RequestOptions({ headers: this.headers });
     let stackReport: StackReportModel = null;
-    // url = 'https://gist.githubusercontent.com/jyasveer/36d3197964899eef0f1fcf5a18063b76/raw/7792af364d3d35dc72e766c907db2023e4247e60/stack-analyses-v2-response.json';
     return this.http.get(url, options)
     // return this.http.get(url)
       .map(this.extractData)