Fix legacy issues that html and css file are written on ts file.

.travis.yml

@@ -81,7 +81,7 @@ script:
   - sudo mkdir -p /harbor
   - sudo mv ./VERSION /harbor/UIVERSION
   - sudo service postgresql stop
-  - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.0
+  - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.1
   - cat ./src/ui_ng/npm-ut-test-results
   - sudo ./tests/testprepare.sh 
   - sudo make -f make/photon/Makefile _build_postgresql _build_db _build_registry -e VERSIONTAG=dev -e CLAIRDBVERSION=dev -e REGISTRYVERSION=v2.6.2
@@ -107,7 +107,7 @@ script:
   - sudo rm -rf /data/config/*
   - sudo rm -rf /data/database/*
   - ls /data/cert
-  - sudo make install GOBUILDIMAGE=golang:1.9.2 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.0 NOTARYFLAG=true CLAIRFLAG=true
+  - sudo make install GOBUILDIMAGE=golang:1.9.2 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.4.1 NOTARYFLAG=true CLAIRFLAG=true
   - sleep 10  
   - docker ps 
   - ./tests/validatecontainers.sh

make/dev/nodeclarity/entrypoint.sh

@@ -34,7 +34,7 @@ sed -i 's/* as//g' src/app/shared/gauge/gauge.component.js
 cp ./dist/build.min.js ../ui/static/
 
 cp -r ./src/i18n/ ../ui/static/
-cp ./src/styles.css ../ui/static/
+cp ./src/styles.scss ../ui/static/
 cp -r ./src/images/ ../ui/static/
 cp ./src/setting.json ../ui/static/
 

src/ui_ng/angular-cli.json

@@ -20,7 +20,7 @@
         "styles": [
             "../node_modules/clarity-icons/clarity-icons.min.css",
             "../node_modules/clarity-ui/clarity-ui.min.css",
-            "styles.css"
+            "styles.scss"
         ],
         "scripts": [
             "../node_modules/core-js/client/shim.min.js",

src/ui_ng/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.7.18-dev.1",
+    "version": "0.7.18-dev.6",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",

src/ui_ng/lib/src/config/registry-config.component.html.ts → src/ui_ng/lib/src/config/registry-config.component.html

@@ -1,4 +1,3 @@
-export const REGISTRY_CONFIG_HTML: string = `
 <div>
     <system-settings #systemSettings [(systemSettings)]="config" [showSubTitle]="true" [hasAdminRole]="hasAdminRole" [hasCAFile]="hasCAFile" [withAdmiral]="withAdmiral"></system-settings>
     <vulnerability-config *ngIf="withClair" #vulnerabilityConfig [(vulnerabilityConfig)]="config" [showSubTitle]="true"></vulnerability-config>
@@ -7,5 +6,4 @@
         <button type="button" class="btn btn-outline" (click)="cancel()" [disabled]="shouldDisable">{{'BUTTON.CANCEL' | translate}}</button>
     </div>
     <confirmation-dialog #cfgConfirmationDialog (confirmAction)="confirmCancel($event)"></confirmation-dialog>
-</div>
-`;
+</div>

src/ui_ng/lib/src/config/registry-config.component.css.ts → src/ui_ng/lib/src/config/registry-config.component.scss

@@ -1,9 +1,7 @@
-export const REGISTRY_CONFIG_STYLES: string = `
 .info-tips-icon {
     color: grey;
 }
 
 .info-tips-icon:hover {
     color: #007CBB;
-}
-`;
+}

src/ui_ng/lib/src/config/registry-config.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, EventEmitter, Output, ViewChild, Input } from '@angular/core';
 
 import { Configuration, ComplexValueItem } from './config';
-import { REGISTRY_CONFIG_HTML } from './registry-config.component.html';
 import { ConfigurationService, SystemInfoService, SystemInfo, ClairDBStatus } from '../service/index';
 import {
     toPromise,
@@ -24,7 +23,7 @@ import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'hbr-registry-config',
-    template: REGISTRY_CONFIG_HTML
+    templateUrl: './registry-config.component.html'
 })
 export class RegistryConfigComponent implements OnInit {
     config: Configuration = new Configuration();

src/ui_ng/lib/src/config/replication/replication-config.component.html.ts → src/ui_ng/lib/src/config/replication/replication-config.component.html

@@ -1,4 +1,3 @@
-export const REPLICATION_CONFIG_HTML: string = `
 <form #replicationConfigFrom="ngForm" class="compact">
 <section class="form-block" style="margin-top:0px;margin-bottom:0px;">
 <label style="font-size:14px;font-weight:600;" *ngIf="showSubTitle">{{'CONFIG.REPLICATION' | translate}}</label>
@@ -13,4 +12,3 @@
 </div>
 </section>
 </form>
-`;

src/ui_ng/lib/src/config/replication/replication-config.component.ts

@@ -1,14 +1,12 @@
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
-import { REPLICATION_CONFIG_HTML } from './replication-config.component.html';
 import { Configuration } from '../config';
-import { REGISTRY_CONFIG_STYLES } from '../registry-config.component.css';
 
 @Component({
     selector: 'replication-config',
-    template: REPLICATION_CONFIG_HTML,
-    styles: [REGISTRY_CONFIG_STYLES]
+    templateUrl: './replication-config.component.html',
+    styles: ['./replication-config.component.scss', '../registry-config.component.scss']
 })
 export class ReplicationConfigComponent {
     config: Configuration;

src/ui_ng/lib/src/config/system/system-settings.component.html.ts → src/ui_ng/lib/src/config/system/system-settings.component.html

@@ -1,4 +1,3 @@
-export const SYSTEM_SETTINGS_HTML: string = `
 <form #systemConfigFrom="ngForm" class="compact">
 <section class="form-block" style="margin-top:0px;margin-bottom:0px;">
   <label style="font-size:14px;font-weight:600;" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
@@ -37,5 +36,4 @@
             </clr-checkbox>
         </div>
 </section>
-</form>
-`;
+</form>

src/ui_ng/lib/src/config/system/system-settings.component.ts

@@ -1,15 +1,13 @@
 import { Component, Input, Output, EventEmitter, ViewChild, Inject } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
-import { SYSTEM_SETTINGS_HTML } from './system-settings.component.html';
 import { Configuration } from '../config';
-import { REGISTRY_CONFIG_STYLES } from '../registry-config.component.css';
 import { SERVICE_CONFIG, IServiceConfig } from '../../service.config';
 
 @Component({
     selector: 'system-settings',
-    template: SYSTEM_SETTINGS_HTML,
-    styles: [REGISTRY_CONFIG_STYLES]
+    templateUrl: './system-settings.component.html',
+    styleUrls: ['./system-settings.component.scss', '../registry-config.component.scss']
 })
 export class SystemSettingsComponent {
     config: Configuration;

src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.template.ts → src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.html

@@ -1,4 +1,3 @@
-export const VULNERABILITY_CONFIG_HTML: string = `
 <form #systemConfigFrom="ngForm" class="compact">
     <section class="form-block" style="margin-top:0px;margin-bottom:0px;">
         <label class="section-title" *ngIf="showSubTitle">{{ 'CONFIG.SCANNING.TITLE' | translate }}</label>
@@ -43,39 +42,4 @@
             </div>
         </div>
     </section>
-</form>
-`;
-
-export const VULNERABILITY_CONFIG_STYLES: string = `
-.form-group-override {
-    padding-left: 0px !important;
-}
-
-.section-title {
-    font-size: 14px !important;
-    font-weight: 600 !important;
-}
-
-.btn-font {
-    font-size: 12px !important;
-}
-
-.namespace {
-    margin-left: 24px;
-}
-
-.clr-dropdown-override {
-    margin-top: -8px;
-}
-.btn-scan-right{
-    margin-left: 10px;
-}
-.btn-scan-right button{
-    width: 160px;
-    margin-bottom: 0px;
-    margin-top: 5px;
-}
-.btn-scan-right span{
-    margin-top: 4px;
-}
-`;
+</form>

src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.scss

@@ -0,0 +1,31 @@
+.form-group-override {
+    padding-left: 0px !important;
+}
+
+.section-title {
+    font-size: 14px !important;
+    font-weight: 600 !important;
+}
+
+.btn-font {
+    font-size: 12px !important;
+}
+
+.namespace {
+    margin-left: 24px;
+}
+
+.clr-dropdown-override {
+    margin-top: -8px;
+}
+.btn-scan-right{
+    margin-left: 10px;
+}
+.btn-scan-right button{
+    width: 160px;
+    margin-bottom: 0px;
+    margin-top: 5px;
+}
+.btn-scan-right span{
+    margin-top: 4px;
+}

src/ui_ng/lib/src/config/vulnerability/vulnerability-config.component.ts

@@ -2,7 +2,6 @@ import { Component, Input, Output, EventEmitter, ViewChild, OnInit } from '@angu
 import { NgForm } from '@angular/forms';
 
 import { Configuration } from '../config';
-import { VULNERABILITY_CONFIG_HTML, VULNERABILITY_CONFIG_STYLES } from './vulnerability-config.component.template';
 import {
     ScanningResultService,
     SystemInfo,
@@ -13,15 +12,13 @@ import { toPromise } from '../../utils';
 import { TranslateService } from '@ngx-translate/core';
 import { ClairDBStatus, ClairDetail } from '../../service/interface';
 
-import { REGISTRY_CONFIG_STYLES } from '../registry-config.component.css';
-
 const ONE_HOUR_SECONDS: number = 3600;
 const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS;
 
 @Component({
     selector: 'vulnerability-config',
-    template: VULNERABILITY_CONFIG_HTML,
-    styles: [VULNERABILITY_CONFIG_STYLES, REGISTRY_CONFIG_STYLES]
+    templateUrl: './vulnerability-config.component.html',
+    styles: ['./vulnerability-config.component.scss', '../registry-config.component.scss']
 })
 export class VulnerabilityConfigComponent implements OnInit {
     _localTime: Date = new Date();

src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,45 @@
+<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" [clrModalStaticBackdrop]="true">
+    <h3 class="modal-title" class="confirmation-title" style="margin-top: 0px;">{{dialogTitle}}</h3>
+    <div class="modal-body">
+        <div class="confirmation-icon-inline">
+            <clr-icon shape="warning" class="is-warning" size="64"></clr-icon>
+        </div>
+        <div class="confirmation-content">{{dialogContent}}</div>
+        <div>
+            <ul class="batchInfoUl">
+                <li *ngFor="let info of batchInfors">
+                    <span><i class="spinner spinner-inline spinner-pos" [hidden]='!info.loading'></i>&nbsp;&nbsp;{{info.name}}</span>
+                    <span *ngIf="!info.errorInfo.length" [style.color]="colorChange(info)">{{info.status}}</span>
+                    <span *ngIf="info.errorInfo.length" [style.color]="colorChange(info)">
+                        <a (click)="toggleErrorTitle(errorInfo)">{{info.status}}</a>
+                        <br>
+                        <i #errorInfo style="display: none;">{{info.errorInfo}}</i>
+                    </span>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="modal-footer" [ngSwitch]="buttons">
+        <ng-template [ngSwitchCase]="0">
+            <button type="button" class="btn btn-outline" (click)="cancel()">{{'BUTTON.CANCEL' | translate}}</button>
+            <button type="button" class="btn btn-primary" (click)="confirm()">{{'BUTTON.CONFIRM' | translate}}</button>
+        </ng-template>
+        <ng-template [ngSwitchCase]="1">
+            <button type="button" class="btn btn-outline" (click)="cancel()">{{'BUTTON.NO' | translate}}</button>
+            <button type="button" class="btn btn-primary" (click)="confirm()">{{ 'BUTTON.YES' | translate}}</button>
+        </ng-template>
+        <ng-template [ngSwitchCase]="2">
+            <button type="button" class="btn btn-outline" (click)="cancel()" [hidden]="isDelete">{{'BUTTON.CANCEL' | translate}}</button>
+            <button type="button" class="btn btn-danger" (click)="operate()" [hidden]="isDelete">{{'BUTTON.DELETE' | translate}}</button>
+            <button type="button" class="btn btn-primary" (click)="cancel()" [disabled]="!batchOverStatus" [hidden]="!isDelete">{{'BUTTON.CLOSE' | translate}}</button>
+        </ng-template>
+        <ng-template [ngSwitchCase]="3">
+            <button type="button" class="btn btn-primary" (click)="cancel()">{{'BUTTON.CLOSE' | translate}}</button>
+        </ng-template>
+        <ng-template [ngSwitchCase]="4">
+            <button type="button" class="btn btn-outline" (click)="cancel()" [hidden]="isDelete">{{'BUTTON.CANCEL' | translate}}</button>
+            <button type="button" class="btn btn-primary" (click)="operate()" [hidden]="isDelete">{{'BUTTON.REPLICATE' | translate}}</button>
+            <button type="button" class="btn btn-primary" (click)="cancel()" [disabled]="!batchOverStatus" [hidden]="!isDelete">{{'BUTTON.CLOSE' | translate}}</button>
+        </ng-template>
+    </div>
+</clr-modal>