fix(bug): fix for improper rendering of modal for the second time

fabric8-ui · Aug 31, 2017 · be17061 · be17061
1 parent f4583f8
commit be17061
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "@angular/forms": "4.0.1",
     "@angular/http": "4.0.1",
     "c3": "0.4.11",
-    "ng2-bootstrap": "1.3.3",
+    "ngx-bootstrap": "1.9.0",
     "ngx-base": "1.2.9",
     "ngx-fabric8-wit": "6.18.11",
     "ngx-login-client": "0.6.32",

diff --git a/src/app/stack/component-level/component-level.component.ts b/src/app/stack/component-level/component-level.component.ts
@@ -78,7 +78,6 @@ export class ComponentLevelComponent implements OnChanges {
         };
         if (this.context && this.context.current) {
             this.context.current.subscribe(val => {
-                console.log('Inside', val);
                 this.spaceName = val.name;
                 this.userName = val.user.attributes.username;
             });
@@ -247,7 +246,6 @@ export class ComponentLevelComponent implements OnChanges {
 
     ngOnChanges(): void {
         if (this.component) {
-            console.log(this.component);
             if (this.isCompanion === undefined) {
                 this.dependencies = this.component['dependencies'];
                 this.recommendations = this.component['recommendations'];
@@ -467,7 +465,6 @@ export class ComponentLevelComponent implements OnChanges {
         //}
 
         let workFlow: Observable<any> = this.addWorkFlowService.addWorkFlow(newItem);
-        console.log(this.userName, this.spaceName);
         workFlow.subscribe((data) => {
             if (data) {
                 let inputUrlArr: Array<string> = [];

diff --git a/src/app/stack/stack-analyses.service.ts b/src/app/stack/stack-analyses.service.ts
@@ -53,8 +53,6 @@ export class StackAnalysesService {
       .map(this.extractData)
       .map((data) => {
         stackReport = data;
-        console.log(typeof stackReport);
-        console.log(stackReport instanceof StackReportModel);
         return stackReport;
       })
       .catch(this.handleError);
@@ -81,7 +79,6 @@ export class StackAnalysesService {
     let body = res.json() || {};
     body['statusCode'] = res.status;
     body['statusText'] = res.statusText;
-    console.log(body as StackReportModel);
     return body as StackReportModel;
   }
 

diff --git a/src/app/stack/stack-details/stack-details-component.spec.ts b/src/app/stack/stack-details/stack-details-component.spec.ts
@@ -6,8 +6,7 @@ import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 
 import { ModalModule } from 'ngx-modal';
-import {TabsModule} from 'ng2-bootstrap';
-import {AccordionModule} from 'ng2-bootstrap';
+import {TabsModule, AccordionModule} from 'ngx-bootstrap';
 
 import { GlobalConstants } from '../constants/constants.service';
 

diff --git a/src/app/stack/stack-details/stack-details.component.html b/src/app/stack/stack-details/stack-details.component.html
@@ -11,7 +11,7 @@
             [heading]="tabz.title"
             (select)="tabSelection(tabz)"
             (removed)="removeTabHandler(tabz)"
-            [customClass]="tabz.customClass">
+            [customClass]="tabz.active ? 'active-menu-item' : 'inactive-menu'">
             <accordion>
               <accordion-group
                    [isOpen]="true"

diff --git a/src/app/stack/stack-details/stack-details.component.scss b/src/app/stack/stack-details/stack-details.component.scss
@@ -9,6 +9,14 @@
         top: unset;
         margin-left: 10px;
     }
+    .active-menu-item {
+        .nav-link {
+            &.active {
+                color: #000;
+                font-weight: bold;
+            }
+        }
+    }
 
     .pre-loader {
         position: absolute;
@@ -40,11 +48,11 @@
         }
     }
 
-    .customClass {
+    .accordion-custom {
         cursor: pointer;
     }
 
-    .card.customClass .card-header {
+    .card.accordion-custom .card-header {
         background: #6fc0f9;
         color: #fff;
         cursor: pointer;

diff --git a/src/app/stack/stack-details/stack-details.component.ts b/src/app/stack/stack-details/stack-details.component.ts
@@ -39,7 +39,7 @@ export class StackDetailsComponent implements OnChanges {
     public componentLevel: any = {};
 
     public componentFilterBy: string = '';
-    public customClass: string = 'customClass';
+    public customClass: string = 'accordion-custom';
     public analysis: any = {};
 
 
@@ -159,15 +159,14 @@ export class StackDetailsComponent implements OnChanges {
     }
 
     private resetFields(): void {
-        console.log('Reset');
-        console.log(this.tabs);
         this.tabs.length = 0;
         this.dataLoaded = false;
         this.errorMessage = null;
         this.recommendationsArray = [];
         this.stackLevelOutliers = {};
         this.componentLevelInformation = {};
         this.companionLevelRecommendation = {};
+        this.cacheResponse = {};
         // this.dataLoaded = false;
     }
 
@@ -177,12 +176,10 @@ export class StackDetailsComponent implements OnChanges {
         if (data && (!data.hasOwnProperty('error') && Object.keys(data).length !== 0)) {
             let resultInformation: Observable<StackReportModel> = getStackReportModel(data);
             resultInformation.subscribe((response) => {
-                console.log(response);
                 let result: Array<ResultInformationModel> = response.result;
                 this.totalManifests = result.length;
                 this.userStackInformationArray = result.map((r) => r.user_stack_info);
                 result.forEach((r, index) => {
-                    console.log('HEre');
                     this.tabs.push({
                         title: r.manifest_file_path,
                         content: r,
@@ -218,8 +215,6 @@ export class StackDetailsComponent implements OnChanges {
                         this.handleResponse(data);
                     },
                     error => {
-                        // this.handleError(error);
-                        console.log(error);
                         let title: string = '';
                         if (error.status >= 500) {
                             title = 'Something unexpected happened';
@@ -234,7 +229,6 @@ export class StackDetailsComponent implements OnChanges {
                             status: error.status,
                             title: title
                         });
-                        console.log(this.errorMessage);
                     });
             }
         }

diff --git a/src/app/stack/stack-details/stack-details.module.ts b/src/app/stack/stack-details/stack-details.module.ts
@@ -4,8 +4,7 @@ import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 
 import { ModalModule } from 'ngx-modal';
-import {TabsModule} from 'ng2-bootstrap';
-import {AccordionModule} from 'ng2-bootstrap';
+import {TabsModule, AccordionModule} from 'ngx-bootstrap';
 
 import { GlobalConstants } from '../constants/constants.service';
 import { StackDetailsComponent } from './stack-details.component';

diff --git a/src/app/stack/stack-level/stack-level.component.ts b/src/app/stack/stack-level/stack-level.component.ts
@@ -138,7 +138,6 @@ export class StackLevelComponent {
             columnData[3][0] = 'Others';
             columnData[3][1] = otherLicensesRatio;
         }
-        console.log(columnData);
         this.licenseInfo = {
             data: {
                 columns: columnData,
@@ -177,6 +176,5 @@ export class StackLevelComponent {
                 }
             }
         };
-        console.log (licenses);
     }
 }
diff --git a/src/app/stack/stack-report-inshort/stack-report-inshort-component.spec.ts b/src/app/stack/stack-report-inshort/stack-report-inshort-component.spec.ts
@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {TabsModule} from 'ng2-bootstrap';
+import {TabsModule} from 'ngx-bootstrap';
 import {StackReportInShortComponent} from './stack-report-inshort.component';
 import {ChartModule} from '../utils/chart/chart.module';
 import {StackDetailsModule} from '../stack-details/stack-details.module';

diff --git a/src/app/stack/stack-report-inshort/stack-report-inshort.component.html b/src/app/stack/stack-report-inshort/stack-report-inshort.component.html
@@ -1,10 +1,11 @@
 <div class="stack-report-inshort">
 <div *ngIf="!error">
-    <tabset>
+    <tabset *ngIf="tabs && tabs.length > 0">
         <tab *ngFor="let tabz of tabs"
             [heading]="tabz.title"
             [active]="tabz.active"
             (select)="tabSelection(tabz)"
+            [customClass]="tabz.active ? 'active-menu-item' : 'inactive-menu'"
             (deselect)="tabz.active = false">
 
             <!-- Stack Report Snippet -->

diff --git a/src/app/stack/stack-report-inshort/stack-report-inshort.component.scss b/src/app/stack/stack-report-inshort/stack-report-inshort.component.scss
@@ -7,6 +7,14 @@
     .center-text {
         margin: 0 auto;
     }
+    .active-menu-item {
+        .nav-link {
+            &.active {
+                color: #000;
+                font-weight: bold;
+            }
+        }
+    }
     .pre-loader {
         position: absolute;
         top: 0;

diff --git a/src/app/stack/stack-report-inshort/stack-report-inshort.component.ts b/src/app/stack/stack-report-inshort/stack-report-inshort.component.ts
@@ -42,10 +42,12 @@ export class StackReportInShortComponent implements OnChanges {
                 .subscribe((data) => {
                     if (data && (!data.hasOwnProperty('error') && Object.keys(data).length !== 0)) {
                         let resultInformation: Observable<StackReportModel> = getStackReportModel(data);
-                        resultInformation.subscribe((response) => {
-                            this.result = response;
-                            this.buildReportInShort();
-                        });
+                        if (resultInformation) {
+                            resultInformation.subscribe((response) => {
+                                this.result = response;
+                                this.buildReportInShort();
+                            });
+                        }
                     } else {
                         // Handle Errors here 'API error'
                         this.handleError({
@@ -73,12 +75,13 @@ export class StackReportInShortComponent implements OnChanges {
         let currentIndex: number = tab['index'];
         this.stackLevel = tab.content.user_stack_info;
         this.recommendations = tab.content.recommendation;
-        this.stackLevelOutliers = {
-            'usage': this.recommendations.usage_outliers
-        };
+        if (this.recommendations) {
+            this.stackLevelOutliers = {
+                'usage': this.recommendations.usage_outliers
+            };
+        }
         this.handleLicenseInformation(this.stackLevel);
         this.handleSecurityInformation(this.stackLevel);
-        console.log(tab);
     }
 
     private sortChartColumnData(array: Array<Array<any>>): Array<Array<any>> {
@@ -175,7 +178,6 @@ export class StackReportInShortComponent implements OnChanges {
             columnData[3][0] = 'Others';
             columnData[3][1] = otherLicensesRatio;
         }
-        console.log(columnData);
         this.licenseInfo = {
             data: {
                 columns: columnData,
@@ -214,18 +216,17 @@ export class StackReportInShortComponent implements OnChanges {
                 }
             }
         };
-        console.log (licenses);
     }
 
     private buildReportInShort(): void {
         let resultInformation: Array<ResultInformationModel> = this.result.result;
         if (resultInformation && resultInformation.length > 0) {
             resultInformation.forEach((one: ResultInformationModel, index: number) => {
-                this.tabs.push({
+                this.tabs[index] = {
                     title: one.manifest_file_path,
                     content: one,
                     index: index
-                });
+                };
             });
             if (this.tabs[0]) this.tabs[0]['active'] = true;
             this.tabSelection(this.tabs[0]);

diff --git a/src/app/stack/stack-report-inshort/stack-report-inshort.module.ts b/src/app/stack/stack-report-inshort/stack-report-inshort.module.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
-import {TabsModule} from 'ng2-bootstrap';
+import {TabsModule} from 'ngx-bootstrap';
 import {ChartModule} from '../utils/chart/chart.module';
 import {StackDetailsModule} from '../stack-details/stack-details.module';
 import {StackReportInShortComponent} from './stack-report-inshort.component';