Improve components and change package.json

.gitignore

@@ -44,3 +44,4 @@ src/ui_ng/aot/**/*.json
 **/*ngfactory.ts
 **/aot
 **/dist
+**/.bin

src/ui_ng/lib/README.md

@@ -80,6 +80,8 @@ If **projectId** is set to the id of specified project, then only show the repli
 
 **projectId** is used to specify which projects the repositories are from.
 
+**projectName** is used to generate the related commands for pushing images.
+
 **hasSignedIn** is a user session related property to determined whether a valid user signed in session existing. This component supports anonymous user.
 
 **hasProjectAdminRole** is a user session related property to determined whether the current user has project administrator role. Some action menus might be disabled based on this property.
@@ -87,7 +89,7 @@ If **projectId** is set to the id of specified project, then only show the repli
 **tagClickEvent** is an @output event emitter for you to catch the tag click events.
 
 ```
-<hbr-repository-stackview [projectId]="..." [hasSignedIn]="..." [hasProjectAdminRole]="..." (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
+<hbr-repository-stackview [projectId]="..." [projectName]="" [hasSignedIn]="..." [hasProjectAdminRole]="..." (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
 
 ...
 

src/ui_ng/lib/package.json

@@ -18,21 +18,21 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^4.1.3",
+        "@angular/animations": "~4.1.3",
-        "@angular/common": "^4.1.3",
+        "@angular/common": "~4.1.3",
-        "@angular/compiler": "^4.1.3",
+        "@angular/compiler": "~4.1.3",
-        "@angular/core": "^4.1.3",
+        "@angular/core": "~4.1.3",
-        "@angular/forms": "^4.1.3",
+        "@angular/forms": "~4.1.3",
-        "@angular/http": "^4.1.3",
+        "@angular/http": "~4.1.3",
-        "@angular/platform-browser": "^4.1.3",
+        "@angular/platform-browser": "~4.1.3",
-        "@angular/platform-browser-dynamic": "^4.1.3",
+        "@angular/platform-browser-dynamic": "~4.1.3",
-        "@angular/router": "^4.1.3",
+        "@angular/router": "~4.1.3",
         "@ngx-translate/core": "^6.0.0",
         "@ngx-translate/http-loader": "0.0.3",
         "@webcomponents/custom-elements": "1.0.0-alpha.3",
-        "clarity-angular": "^0.9.7",
+        "clarity-angular": "~0.9.8",
-        "clarity-icons": "^0.9.7",
+        "clarity-icons": "~0.9.8",
-        "clarity-ui": "^0.9.7",
+        "clarity-ui": "~0.9.8",
         "core-js": "^2.4.1",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
@@ -45,12 +45,13 @@
     },
     "devDependencies": {
         "@angular/cli": "^1.0.0",
-        "@angular/compiler-cli": "^4.0.1",
+        "@angular/compiler-cli": "~4.1.3",
         "@types/core-js": "^0.9.41",
         "@types/jasmine": "~2.2.30",
         "@types/node": "^6.0.42",
         "bootstrap": "4.0.0-alpha.5",
         "codelyzer": "~2.0.0-beta.4",
+        "copyfiles": "^1.2.0",
         "enhanced-resolve": "^3.0.0",
         "jasmine-core": "2.4.1",
         "jasmine-spec-reporter": "2.5.0",
@@ -61,14 +62,14 @@
         "karma-phantomjs-launcher": "^1.0.0",
         "karma-remap-istanbul": "^0.2.1",
         "protractor": "^4.0.9",
+        "rimraf": "^2.6.1",
         "rollup": "^0.41.6",
+        "rollup-plugin-node-resolve": "^3.0.0",
         "ts-node": "1.2.1",
         "tslint": "^4.1.1",
         "typescript": "~2.2.0",
         "typings": "^1.4.0",
         "uglify-js": "^2.8.22",
-        "webdriver-manager": "10.2.5",
+        "webdriver-manager": "10.2.5"
-        "rimraf": "^2.6.1",
-        "copyfiles": "^1.2.0"
     }
 }

src/ui_ng/lib/pkg/package.json

@@ -19,21 +19,21 @@
     },
     "homepage": "https://github.com/vmware/harbor#readme",
     "peerDependencies": {
-        "@angular/animations": "^4.1.3",
+        "@angular/animations": "~4.1.3",
-        "@angular/common": "^4.1.3",
+        "@angular/common": "~4.1.3",
-        "@angular/compiler": "^4.1.3",
+        "@angular/compiler": "~4.1.3",
-        "@angular/core": "^4.1.3",
+        "@angular/core": "~4.1.3",
-        "@angular/forms": "^4.1.3",
+        "@angular/forms": "~4.1.3",
-        "@angular/http": "^4.1.3",
+        "@angular/http": "~4.1.3",
-        "@angular/platform-browser": "^4.1.3",
+        "@angular/platform-browser": "~4.1.3",
-        "@angular/platform-browser-dynamic": "^4.1.3",
+        "@angular/platform-browser-dynamic": "~4.1.3",
-        "@angular/router": "^4.1.3",
+        "@angular/router": "~4.1.3",
         "@ngx-translate/core": "^6.0.0",
         "@ngx-translate/http-loader": "0.0.3",
         "@webcomponents/custom-elements": "1.0.0-alpha.3",
-        "clarity-angular": "^0.9.7",
+        "clarity-angular": "~0.9.8",
-        "clarity-icons": "^0.9.7",
+        "clarity-icons": "~0.9.8",
-        "clarity-ui": "^0.9.7",
+        "clarity-ui": "~0.9.8",
         "core-js": "^2.4.1",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",

src/ui_ng/lib/rollup.config.js

@@ -1,3 +1,5 @@
+import resolve from 'rollup-plugin-node-resolve';
+
 export default {
     entry: 'dist/index.js',
     dest: 'dist/bundles/harborui.umd.js',
@@ -11,10 +13,14 @@ export default {
         '@angular/forms',
         '@angular/platform-browser',
         '@angular/http',
+        '@angular/router',
         'clarity-angular',
         '@ngx-translate/core',
         '@ngx-translate/http-loader',
+        'ngx-cookie',
+        'ngx-clipboard',
         'rxjs',
+        'rxjs/Rx',
         'rxjs/Subject',
         'rxjs/Observable',
         'rxjs/add/observable/of',
@@ -29,8 +35,15 @@ export default {
         '@angular/forms': 'ng.forms',
         '@angular/http': 'ng.http',
         '@angular/platform-browser': 'ng.platformBrowser',
+        '@angular/router': 'ng.router',
+        'ngx-clipboard': 'ngx.clipboard',
+        'clarity-angular': 'ng.clarity',
+        'ngx-cookie': 'ngx.cookie',
+        '@ngx-translate/core': 'ngx.translate',
+        '@ngx-translate/http-loader': 'ngx.translate',
         'rxjs': 'rxjs',
         'rxjs/Subject': 'rxjs.Subject',
+        'rxjs/Rx': 'Rx',
         'rxjs/Observable': 'Rx',
         'rxjs/ReplaySubject': 'Rx',
         'rxjs/add/operator/map': 'Rx.Observable.prototype',
@@ -50,5 +63,10 @@ export default {
 
         // console.warn everything else
         console.warn(warning.message);
-    }
+    },
+    plugins: [resolve({
+        customResolveOptions: {
+            moduleDirectory: 'node_modules'
+        }
+    })]
 }

src/ui_ng/lib/src/push-image/push-image.css.ts

@@ -39,4 +39,8 @@ export const PUSH_IMAGE_STYLE: string = `
     min-width: 360px;
     max-width: 720px;
 }
+
+.btn-font {
+    font-size: 14px !important;
+}
 `;

src/ui_ng/lib/src/push-image/push-image.html.ts

@@ -1,7 +1,7 @@
 export const PUSH_IMAGE_HTML: string = `
 <div>
     <clr-dropdown [clrMenuPosition]="'bottom-right'">
-        <button class="btn btn-link" clrDropdownToggle (click)="onclick()">
+        <button class="btn btn-link btn-font" clrDropdownToggle (click)="onclick()">
         {{ 'PUSH_IMAGE.TITLE' | translate | uppercase}}
         <clr-icon shape="caret down"></clr-icon>
     </button>
@@ -10,10 +10,12 @@ export const PUSH_IMAGE_HTML: string = `
                 <section>
                     <span><h5 class="h5-override">{{ 'PUSH_IMAGE.TITLE' | translate }}</h5></span>
                     <span>
-                        <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">
+                      <clr-tooltip [clrTooltipDirection]="'top-right'" [clrTooltipSize]="'md'">
-                            <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
+                        <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
-                            <span class="tooltip-content">{{ 'PUSH_IMAGE.TOOLTIP' | translate }}</span>
+                          <clr-tooltip-content>
-                    </a>
+                            {{ 'PUSH_IMAGE.TOOLTIP' | translate }}
+                          </clr-tooltip-content>
+                      </clr-tooltip>
                     </span>
                 </section>
                 <section>

src/ui_ng/lib/src/repository-stackview/repository-stackview.component.html.ts

@@ -1,9 +1,10 @@
 export const REPOSITORY_STACKVIEW_TEMPLATE: string = `
 <div>
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height: 24px;">  
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="height: 32px;">  
     <div class="row flex-items-xs-right option-right">
       <div class="flex-xs-middle">
+        <hbr-push-image-button style="display: inline-block;" [registryUrl]="registryUrl" [projectName]="projectName"></hbr-push-image-button>
         <hbr-filter [withDivider]="true" filterPlaceholder="{{'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate}}" (filter)="doSearchRepoNames($event)"></hbr-filter>  
         <span class="refresh-btn" (click)="refresh()"><clr-icon shape="refresh"></clr-icon></span>
       </div>

src/ui_ng/lib/src/repository-stackview/repository-stackview.component.spec.ts

@@ -15,6 +15,8 @@ import { RepositoryService, RepositoryDefaultService } from '../service/reposito
 import { TagService, TagDefaultService } from '../service/tag.service';
 import { SystemInfoService, SystemInfoDefaultService } from '../service/system-info.service';
 import { VULNERABILITY_DIRECTIVES } from '../vulnerability-scanning/index';
+import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index';
+import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index';
 
 import { click } from '../utils';
 
@@ -92,7 +94,9 @@ describe('RepositoryComponentStackview (inline template)', () => {
         TagComponent,
         ConfirmationDialogComponent,
         FilterComponent,
-        VULNERABILITY_DIRECTIVES
+        VULNERABILITY_DIRECTIVES,
+        PUSH_IMAGE_BUTTON_DIRECTIVES,
+        INLINE_ALERT_DIRECTIVES
       ],
       providers: [
         ErrorHandler,

src/ui_ng/lib/src/repository-stackview/repository-stackview.component.ts

@@ -41,6 +41,7 @@ import { Tag, TagClickEvent } from '../service/interface';
 export class RepositoryStackviewComponent implements OnInit {
 
   @Input() projectId: number;
+  @Input() projectName: string = "unknown";
 
   @Input() hasSignedIn: boolean;
   @Input() hasProjectAdminRole: boolean;

src/ui_ng/lib/src/vulnerability-scanning/result-grid.component.ts

@@ -61,6 +61,8 @@ export class ResultGridComponent implements OnInit {
                 return 'VULNERABILITY.SEVERITY.MEDIUM';
             case VulnerabilitySeverity.LOW:
                 return 'VULNERABILITY.SEVERITY.LOW';
+            case VulnerabilitySeverity.NONE:
+                return 'VULNERABILITY.SEVERITY.NEGLIGIBLE';
             case VulnerabilitySeverity.UNKNOWN:
                 return 'VULNERABILITY.SEVERITY.UNKNOWN';
             default:

src/ui_ng/lib/src/vulnerability-scanning/result-tip.component.ts

@@ -41,7 +41,9 @@ export class ResultTipComponent implements OnInit {
         this.totalPackages = this.summary && this.summary.components ? this.summary.components.total : 0;
         if (this.summary && this.summary.components && this.summary.components.summary) {
             this.summary.components.summary.forEach(item => {
-                this.packagesWithVul += item.count
+                if (item.severity != VulnerabilitySeverity.NONE) {
+                    this.packagesWithVul += item.count
+                }
 
                 switch (item.severity) {
                     case VulnerabilitySeverity.UNKNOWN:

src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts

@@ -1,8 +1,6 @@
 export const SCANNING_STYLES: string = `
 .bar-wrapper {
     width: 120px;
-    height: 24px;
-    display: inline-block;
 }
 .bar-state {
     text-align: center !important;
@@ -18,7 +16,6 @@ export const SCANNING_STYLES: string = `
 .tip-wrapper {
     display: inline-block;
     height: 10px;
-    max-height: 10px;
     max-width: 120px;
 }
 .tip-position {

src/ui_ng/lib/src/vulnerability-scanning/scanning.html.ts

@@ -62,7 +62,13 @@ export const GRID_COMPONENT_HTML: string = `
         <clr-dg-placeholder>{{'VULNERABILITY.GRID.PLACEHOLDER' | translate}}</clr-dg-placeholder>
         <clr-dg-row *clrDgItems="let res of scanningResults">
             <clr-dg-cell>{{res.id}}</clr-dg-cell>
-            <clr-dg-cell>{{severityText(res.severity) | translate}}</clr-dg-cell>
+            <clr-dg-cell [ngSwitch]="res.severity">
+              <span *ngSwitchCase="5" class="label label-danger">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="4" class="label label-warning">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="3" class="label label-success">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchCase="1" class="label label-info">{{severityText(res.severity) | translate}}</span>
+              <span *ngSwitchDefault>{{severityText(res.severity) | translate}}</span>
+            </clr-dg-cell>
             <clr-dg-cell>{{res.package}}</clr-dg-cell>
             <clr-dg-cell>{{res.version}}</clr-dg-cell>
             <clr-dg-cell>{{res.fixedVersion}}</clr-dg-cell>

src/ui_ng/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Harbor UI with Clarity",
     "angular-cli": {},
     "scripts": {
@@ -13,25 +13,25 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^4.1.3",
+        "@angular/animations": "~4.1.3",
-        "@angular/common": "^4.1.3",
+        "@angular/common": "~4.1.3",
-        "@angular/compiler": "^4.1.3",
+        "@angular/compiler": "~4.1.3",
-        "@angular/compiler-cli": "^4.0.2",
+        "@angular/compiler-cli": "~4.1.3",
-        "@angular/core": "^4.1.3",
+        "@angular/core": "~4.1.3",
-        "@angular/forms": "^4.1.3",
+        "@angular/forms": "~4.1.3",
-        "@angular/http": "^4.1.3",
+        "@angular/http": "~4.1.3",
-        "@angular/platform-browser": "^4.1.3",
+        "@angular/platform-browser": "~4.1.3",
-        "@angular/platform-browser-dynamic": "^4.1.3",
+        "@angular/platform-browser-dynamic": "~4.1.3",
-        "@angular/router": "^4.1.3",
+        "@angular/router": "~4.1.3",
         "@ngx-translate/core": "^6.0.0",
         "@ngx-translate/http-loader": "0.0.3",
         "@types/jquery": "^2.0.41",
         "@webcomponents/custom-elements": "1.0.0-alpha.3",
-        "clarity-angular": "^0.9.7",
+        "clarity-angular": "^0.9.8",
-        "clarity-icons": "^0.9.7",
+        "clarity-icons": "^0.9.8",
-        "clarity-ui": "^0.9.7",
+        "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
-        "harbor-ui": "^0.1.99",
+        "harbor-ui": "^0.2.12",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-clipboard": "^8.0.2",
@@ -43,7 +43,7 @@
     },
     "devDependencies": {
         "@angular/cli": "^1.0.0",
-        "@angular/compiler-cli": "^4.0.2",
+        "@angular/compiler-cli": "~4.1.3",
         "@types/core-js": "^0.9.34",
         "@types/jasmine": "~2.2.30",
         "@types/node": "^6.0.42",

src/ui_ng/src/app/repository/repository-page.component.html

@@ -1,3 +1,3 @@
 <div style="margin-top: 24px;">
-    <hbr-repository-stackview [projectId]="projectId" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
+    <hbr-repository-stackview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
 </div>

src/ui_ng/src/app/repository/repository-page.component.ts

@@ -27,6 +27,7 @@ export class RepositoryPageComponent implements OnInit {
   projectId: number;
   hasProjectAdminRole: boolean;
   hasSignedIn: boolean;
+  projectName: string;
 
   constructor(
     private route: ActivatedRoute,
@@ -39,7 +40,9 @@ export class RepositoryPageComponent implements OnInit {
     this.projectId = this.route.snapshot.parent.params['id'];
     let resolverData = this.route.snapshot.parent.data;
     if (resolverData) {
-      this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
+      let pro: Project = <Project>resolverData['projectResolver'];
+      this.hasProjectAdminRole = pro.has_project_admin_role;
+      this.projectName = pro.name;
     }
     this.hasSignedIn = this.session.getCurrentUser() !== null;
   }

src/ui_ng/src/i18n/lang/en-us-lang.json

@@ -465,12 +465,13 @@
         },
         "CHART": {
             "SCANNING_TIME": "Scan completed",
-            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} vulnerabilities across {{totalPackages}} packages."
+            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} packages with vulnerabilities across all {{totalPackages}} packages."
         },
         "SEVERITY": {
             "HIGH": "High level",
             "MEDIUM": "Medium level",
             "LOW": "Low level",
+            "NEGLIGIBLE": "Negligible",
             "UNKNOWN": "Unknown",
             "NONE": "None"
         },

src/ui_ng/src/i18n/lang/es-es-lang.json

@@ -464,12 +464,13 @@
         },
         "CHART": {
             "SCANNING_TIME": "Scan completed",
-            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} vulnerabilities across {{totalPackages}} packages."
+            "TOOLTIPS_TITLE": "This tag has {{totalVulnerability}} packages with vulnerabilities across all {{totalPackages}} packages."
         },
         "SEVERITY": {
             "HIGH": "High level",
             "MEDIUM": "Medium level",
             "LOW": "Low level",
+            "NEGLIGIBLE": "Negligible",
             "UNKNOWN": "Unknown",
             "NONE": "None"
         },

src/ui_ng/src/i18n/lang/zh-cn-lang.json

@@ -465,12 +465,13 @@
         },
         "CHART": {
             "SCANNING_TIME": "扫描完成",
-            "TOOLTIPS_TITLE": "在此镜像的{{totalPackages}}包中扫描出{{totalVulnerability}}缺陷。"
+            "TOOLTIPS_TITLE": "在此镜像的{{totalPackages}}包中扫描出{{totalVulnerability}}个有缺陷的包。"
         },
         "SEVERITY": {
             "HIGH": "严重",
             "MEDIUM": "中等",
             "LOW": "一般",
+            "NEGLIGIBLE": "可忽略",
             "UNKNOWN": "未知",
             "NONE": "无"
         },