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

Currently, our html and css files are written as string on .ts file. This pr is to solve the legacy issue.

.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.5",
     "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: ['../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: ['../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>