fix(added-license-context-color): added license context color, some b…

…ug fixes
fabric8-ui · Oct 23, 2017 · c8f433f · c8f433f
1 parent e555505
commit c8f433f
Show file tree

Hide file tree

Showing 10 changed files with 198 additions and 278 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,16 +1,17 @@
 import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute, ParamMap} from '@angular/router';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 
 @Component({
-    selector: 'f8-app',
-    templateUrl: './app.component.html'
+  selector: 'f8-app',
+  templateUrl: './app.component.html'
 })
 
 export class AppComponent implements OnInit {
-    public stackUrl: string = 'https://recommender.api.openshift.io/api/v1/stack-analyses/9f9a8e4c026c4f6590ed42149c97995d';
+  public stackUrl: string =
+    'https://recommender.api.openshift.io/api/v1/stack-analyses/421249d9e1e5464cbf3e77dde4941463';
 
-    constructor() {}
-    ngOnInit(): void {
-        console.log('Inside ngInit');
-    }
+  constructor() {}
+  ngOnInit(): void {
+    console.log('Inside ngInit');
+  }
 }
diff --git a/src/app/stack/component-level/component-level.component.html b/src/app/stack/component-level/component-level.component.html
@@ -52,14 +52,31 @@
                         <i title="{{dependency.has_issue ? 'CVE Score: ' + dependency.security_issue: null}}" [ngClass]="{'fa': true, 'insecure fa-ban': dependency.has_issue === true, 'secure fa-check-circle-o': dependency.has_issue === false}" aria-hidden="true"></i>
                     </td>
                     <td ellipsis>
-                        <i *ngIf="dependency.license_analysis && dependency.license_analysis.status && dependency.license_analysis.status.toLowerCase() === 'outlier'" [ngClass]="{'fa outlier-icon': true}"></i>
-                        <i *ngIf="dependency.license_analysis && dependency.license_analysis.status && dependency.license_analysis.status.toLowerCase() === 'reallyunknown'" [ngClass]="{'unknown-license': true}"></i>
-                        <i *ngIf="dependency.license_analysis && dependency.license_analysis.status && dependency.license_analysis.status.toLowerCase() === 'licenseconflict'" [ngClass]="{'conflict-license': true}"></i>
-                        {{dependency.license}}
+                        <i *ngIf="dependency.license_analysis && dependency.license_analysis.licensestatus && dependency.license_analysis.licensestatus.toLowerCase() === 'outlier'" [ngClass]="{'fa outlier-icon': true}"></i>
+                        <i *ngIf="dependency.license_analysis && dependency.license_analysis.licensestatus && dependency.license_analysis.licensestatus.toLowerCase() === 'reallyunknown'" [ngClass]="{'unknown-license': true}"></i>
+                        <i *ngIf="dependency.license_analysis && dependency.license_analysis.licensestatus && dependency.license_analysis.licensestatus.toLowerCase() === 'licenseconflict'" [ngClass]="{'conflict-license': true}"></i>
+                        <span *ngFor="let license of dependency.licenses; let i = index">
+                            <span 
+                                *ngIf="dependency.license_analysis && dependency.license_analysis.licensestatus && dependency.license_analysis.licensestatus.toLowerCase() === 'outlier'" 
+                                [ngClass]="{'outlier-license-text': isOutliedLicense(dependency, license)}">
+                                {{ license }}
+                            </span>
+                            <span 
+                                *ngIf="dependency.license_analysis && dependency.license_analysis.licensestatus && dependency.license_analysis.licensestatus.toLowerCase() === 'reallyunknown'" 
+                                [ngClass]="{'unknown-license-text': isUnknownLicense(dependency, license)}">
+                                {{ license }}
+                            </span>
+                            <span 
+                                *ngIf="dependency.license_analysis && dependency.license_analysis.licensestatus && dependency.license_analysis.licensestatus.toLowerCase() === 'licenseconflict'" 
+                                [ngClass]="{'conflict-license-text': isConflictLicense(dependency, license)}">
+                                {{ license }}
+                            </span>
+                            <span *ngIf="isNormalLicense(dependency)">
+                                {{ license }}
+                            </span>
+                            <span *ngIf="i < dependency.licenseCount - 1">, </span>
+                        </span>
                     </td>
-                    <!--<td class="text-center">
-                        <sentiment *ngIf="dependency.sentiment_score" [score]="dependency.sentiment_score"></sentiment>
-                    </td>-->
                     <td class="text-center">{{dependency.osio_user_count}}</td>
                     <td ellipsis class="github-stats">
                         <span *ngIf="dependency.github_user_count > -1">Usage Count: {{dependency.github_user_count}},</span>

diff --git a/src/app/stack/component-level/component-level.component.less b/src/app/stack/component-level/component-level.component.less
@@ -143,9 +143,10 @@
     /* stylelint-disable */
     background: #ed7b01 !important;
     color: @color-pf-white !important;
-    width: 10px;
+    font-size: 10px;
     display: inline-block;
-    text-align: center;
+    border-radius: 50%;
+    padding: 3px;
     /* stylelint-enable */
     &:after {
       content: 'L';
@@ -155,12 +156,24 @@
     /* stylelint-disable */
     background: @color-pf-red-100 !important;
     color: @color-pf-white !important;
-    width: 10px;
+    font-size: 10px;
     display: inline-block;
-    text-align: center;
+    border-radius: 50%;
+    padding: 3px;
     /* stylelint-enable */
     &:after {
       content: 'L';
     }
   }
+  .outlier-license-text {
+    font-weight: bold;
+  }
+  .unknown-license-text {
+    color: #ed7b01;
+    font-weight: bold;
+  }
+  .conflict-license-text {
+    color: @color-pf-red-100;
+    font-weight: bold;
+  }
 }
diff --git a/src/app/stack/component-level/component-level.component.ts b/src/app/stack/component-level/component-level.component.ts
@@ -263,6 +263,39 @@ export class ComponentLevelComponent implements OnChanges {
         }
     }
 
+    isNormalLicense(dependency) {
+        if (dependency.license_analysis &&
+            dependency.license_analysis.licensestatus &&
+            (dependency.license_analysis.licensestatus.toLowerCase() === 'outlier' ||
+            dependency.license_analysis.licensestatus.toLowerCase() === 'reallyunknown' ||
+            dependency.license_analysis.licensestatus.toLowerCase() === 'licenseconflict')) {
+            return false;
+        }
+        return true;
+    }
+
+    isOutliedLicense(dependency: any, licenseToCheck: string): boolean {
+        if (dependency.license_analysis.outliedLicense === licenseToCheck) {
+            return true;
+        }
+        return false;
+    }
+
+    isUnknownLicense(dependency: any, licenseToCheck: string): boolean {
+        if (dependency.license_analysis.unknownLicense === licenseToCheck) {
+            return true;
+        }
+        return false;
+    }
+
+    isConflictLicense(dependency: any, licenseToCheck: string): boolean {
+        if (dependency.license_analysis.conflictingLicenses[0]['license1'] === licenseToCheck ||
+            dependency.license_analysis.conflictingLicenses[0]['license2'] === licenseToCheck) {
+            return true;
+        }
+        return false;
+    }
+
     ngOnChanges(): void {
         if (this.component) {
             if (this.isCompanion === undefined) {
@@ -401,8 +434,10 @@ export class ComponentLevelComponent implements OnChanges {
         output['recommended_version'] = this.putNA(output['recommended_version']);
         output['current_version'] = this.putNA(output['current_version']);
         output['latest_version'] = this.putNA(input['latest_version']);
-        output['license'] = input['licenses'] && input['licenses'].join(', ') || '-';
-        output['license_analysis'] = input['license_analysis'] && input['license_analysis'];
+        output['licenses'] =
+            input['licenses'] && input['licenses'].length ? input['licenses'] : '-';
+        output['licenseCount'] = output['licenses'] ? output['licenses'].length : 0;
+        output['license_analysis'] = input['license_analysis'];
         output['sentiment_score'] = input['sentiment'] && input['sentiment']['overall_score'];
         output['github_user_count'] = input['github'] && input['github']['dependent_repos'];
         output['github_user_count'] = this.putNA(output['github_user_count']);
@@ -428,7 +463,7 @@ export class ComponentLevelComponent implements OnChanges {
             if (dependency.name.toLocaleLowerCase() === item.package.toLocaleLowerCase()) {
                 dependency['isLicenseOutlier'] = true;
                 dependency['license_analysis'] = {
-                    'status': 'outlier',
+                    'licensestatus': 'outlier',
                     'outliedLicense': item.license
                 };
             }
@@ -442,7 +477,7 @@ export class ComponentLevelComponent implements OnChanges {
             if (item.package.toLocaleLowerCase() === dependency.name.toLocaleLowerCase()) {
                 dependency['isUnknownLicense'] = true;
                 dependency['license_analysis'] = {
-                    'status': 'reallyunknown',
+                    'licensestatus': 'reallyunknown',
                     'unknownLicense': item.license
                 };
             }
@@ -456,8 +491,8 @@ export class ComponentLevelComponent implements OnChanges {
             if (item.package.toLocaleLowerCase() === dependency.name.toLocaleLowerCase()) {
                 dependency['isLicenseConflictInComponent'] = true;
                 dependency['license_analysis'] = {
-                    'status': 'licenseconflict',
-                    'conflictinglicenses': item.conflict_licenses
+                    'licensestatus': 'licenseconflict',
+                    'conflictingLicenses': item.conflict_licenses
                 };
             }
         });

diff --git a/src/app/stack/stack-level/stack-level.component.html b/src/app/stack/stack-level/stack-level.component.html
@@ -56,7 +56,7 @@ <h3>
                 <h3>
                     <span>Licenses</span>
                 </h3>
-                <div class="stat-content chart-area" *ngIf="licenseAnalysis && licenseAnalysis.status.toLowerCase() !== 'failure'">
+                <div class="stat-content license-area" *ngIf="licenseAnalysis && licenseAnalysis.status.toLowerCase() !== 'failure'">
                     <div class="stack-license-text flex-3" *ngIf="licenseAnalysis.status.toLowerCase() === 'successful'">
                         <div class="metric-desc">
                             Possible Stack License
@@ -73,7 +73,7 @@ <h3>
                             <span>{{licenseAnalysis.licenseOutliersCount}}</span>
                         </div>
                     </div>
-                    <div class="conflict-license flex-1" *ngIf="licenseAnalysis && licenseAnalysis.status.toLowerCase() === 'stackconflict'">
+                    <div class="conflict-license flex-1" *ngIf="licenseAnalysis && licenseAnalysis.status.toLowerCase() === 'conflict'">
                         <div class="metric-desc">
                             Conflict <strong>between</strong> two Components
                         </div>
@@ -83,11 +83,11 @@ <h3>
                             </span>
                         </div>
                     </div>
-                    <div class="conflict-license-direction-icon flex-1" *ngIf="licenseAnalysis && licenseAnalysis.status.toLowerCase() === 'stackconflict'">
+                    <div class="conflict-license-direction-icon flex-1" *ngIf="licenseAnalysis && licenseAnalysis.status.toLowerCase() === 'conflict'">
                         <span class="fa fa-arrow-right"></span>
                     </div>
                     <div class="conflict-license-container flex-4" 
-                        *ngIf="licenseAnalysis.status.toLowerCase() === 'stackconflict'" [popover]="popLicenseTemplate" 
+                        *ngIf="licenseAnalysis.status.toLowerCase() === 'conflict'" [popover]="popLicenseTemplate" 
                         popoverTitle="All Stack License Conflicts" 
                         placement="left"
                         containerClass="conflict-license-container"

diff --git a/src/app/stack/stack-level/stack-level.component.less b/src/app/stack/stack-level/stack-level.component.less
@@ -39,11 +39,60 @@
           flex: 6;
           justify-content: center;
         }
-        &.chart-area {
+        &.license-area {
           text-align: center;
           flex: 6;
-          .c3-chart-arcs-title { font-size: 10px; }
-          f8-chart { margin: 0 auto; }
+          .conflict-license {
+            padding-left: 5px;
+          }
+          .conflict-license-direction-icon {
+            color: @color-pf-black-500;
+            font-size: 35px;
+          }
+          .conflict-license-container {
+            display: flex;
+            flex-flow: row wrap;
+            .packages {
+              color: @color-pf-black-500;
+              font-size: 15px;
+              text-align: right;
+              .conflict-group {
+                border-bottom: @color-pf-black-500 1px solid;
+              }
+              span.fa {
+                margin: 0 0 0 10px;
+              }
+              .ellipsis-icon {
+                color: @color-pf-black-500;
+                font-size: 25px;
+                margin: 10px 4px 0 0;
+              }
+            }
+            .licenses {
+              color: @color-pf-black-500;
+              font-size: 15px;
+              text-align: left;
+              .conflict-group {
+                border-bottom: @color-pf-black-500 1px solid;
+                padding-left: 10px;
+                margin-right: 45px;
+              }
+            }
+            &.popover {
+              flex-flow: column;
+              max-width: 400px;
+              .license-template {
+                display: flex;
+                line-height: 25px;
+                width: 350px;
+                .licenses {
+                  .conflict-group {
+                    margin-right: 0;
+                  }
+                }
+              }
+            }
+          }
         }
         .metric {
           height: 40px;
@@ -55,54 +104,6 @@
           span { margin: 0 auto; }
         }
         .metric-desc { font-size: 14px; }
-        .conflict-license-direction-icon {
-          color: @color-pf-black-500;
-          font-size: 35px;
-        }
-        .conflict-license-container {
-          display: flex;
-          flex-flow: row wrap;
-          .packages {
-            color: @color-pf-black-500;
-            font-size: 15px;
-            text-align: right;
-            .conflict-group {
-              border-bottom: @color-pf-black-500 1px solid;
-            }
-            span.fa {
-              margin: 0 0 0 10px;
-            }
-            .ellipsis-icon {
-              color: @color-pf-black-500;
-              font-size: 25px;
-              margin: 10px 4px 0 0;
-            }
-          }
-          .licenses {
-            color: @color-pf-black-500;
-            font-size: 15px;
-            text-align: left;
-            .conflict-group {
-              border-bottom: @color-pf-black-500 1px solid;
-              padding-left: 10px;
-              margin-right: 45px;
-            }
-          }
-          &.popover {
-            flex-flow: column;
-            max-width: 400px;
-            .license-template {
-              display: flex;
-              line-height: 25px;
-              width: 350px;
-              .licenses {
-                .conflict-group {
-                  margin-right: 0;
-                }
-              }
-            }
-          }
-        }
       }
     }
     &:after {
@@ -116,10 +117,10 @@
     .stat-container {
       margin: 10px 5px;
       border: 1px solid #ccc;
-      border-radius: 5px;
+      border-radius: 2px;
       flex: 1;
       &.outlier-stat { flex: 2; }
-      &.stack-license-stat { flex: 3; }
+      &.stack-license-stat { flex: 2; }
       &.security-issues-stat {
         .cve-message {
           font-size: 12px;