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

 {
     "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

-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 @@ export const REGISTRY_CONFIG_HTML: string = `
         <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>
-`;
\ No newline at end of file
+</div>
\ No newline at end of file

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

-export const REGISTRY_CONFIG_STYLES: string = `
 .info-tips-icon {
     color: grey;
 }
 
 .info-tips-icon:hover {
     color: #007CBB;
-}
-`;
\ No newline at end of file
+}
\ No newline at end of file

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

 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

-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 @@ export const REPLICATION_CONFIG_HTML: string = `
 </div>
 </section>
 </form>
-`;
\ No newline at end of file

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

 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

-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 @@ export const SYSTEM_SETTINGS_HTML: string = `
             </clr-checkbox>
         </div>
 </section>
-</form>
-`;
\ No newline at end of file
+</form>
\ No newline at end of file

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

 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

-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 @@ export const VULNERABILITY_CONFIG_HTML: string = `
             </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;
-}
-`;
\ No newline at end of file
+</form>
\ No newline at end of file

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

+.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.ts → src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.html

-export const CONFIRMATION_DIALOG_TEMPLATE: string = `
 <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">
@@ -6,13 +5,14 @@ export const CONFIRMATION_DIALOG_TEMPLATE: string = `
             <clr-icon shape="warning" class="is-warning" size="64"></clr-icon>
         </div>
         <div class="confirmation-content">{{dialogContent}}</div>
-       <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><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>
+                        <a (click)="toggleErrorTitle(errorInfo)">{{info.status}}</a>
+                        <br>
                         <i #errorInfo style="display: none;">{{info.errorInfo}}</i>
                     </span>
                 </li>
@@ -20,27 +20,26 @@ export const CONFIRMATION_DIALOG_TEMPLATE: string = `
         </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>
+        <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>
-`;
\ No newline at end of file
+</clr-modal>
\ No newline at end of file

src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.css.ts → src/ui_ng/lib/src/confirmation-dialog/confirmation-dialog.component.scss

-export const CONFIRMATION_DIALOG_STYLE: string = `
 .confirmation-icon-inline {
     display: inline-block;
 }
@@ -18,13 +17,41 @@ export const CONFIRMATION_DIALOG_STYLE: string = `
     width: 80%;
     white-space: pre-wrap;
 }
-.batchInfoUl{
-    padding: 20px; list-style-type: none;
+
+.batchInfoUl {
+    padding: 20px;
+    list-style-type: none;
+}
+
+.batchInfoUl li {
+    line-height: 24px;
+    border-bottom: 1px solid #e8e8e8;
+}
+
+.batchInfoUl li span:first-child {
+    padding-right: 20px;
+    width: 240px;
+    display: inline-block;
+    color: #666;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    vertical-align: middle;
 }
-.batchInfoUl li {line-height: 24px;border-bottom: 1px solid #e8e8e8;}
-.batchInfoUl li span:first-child {padding-right: 20px; width: 240px; display: inline-block; color:#666;  
-  text-overflow: ellipsis; overflow: hidden; vertical-align: middle;}
-.batchInfoUl li span:last-child {width: 220px; display: inline-block;  color:#666;}
-.batchInfoUl li span i {display: inline-block; line-height: 1.2em; font-size: 0.8em; color: #999;}
-.batchInfoUl li span a{cursor: pointer; text-decoration: underline;}
-`;
\ No newline at end of file
+
+.batchInfoUl li span:last-child {
+    width: 220px;
+    display: inline-block;
+    color: #666;
+}
+
+.batchInfoUl li span i {
+    display: inline-block;
+    line-height: 1.2em;
+    font-size: 0.8em;
+    color: #999;
+}
+
+.batchInfoUl li span a {
+    cursor: pointer;
+    text-decoration: underline;
+}
\ No newline at end of file

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

@@ -18,14 +18,12 @@ import { ConfirmationMessage } from './confirmation-message';
 import { ConfirmationAcknowledgement } from './confirmation-state-message';
 import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const';
 
-import { CONFIRMATION_DIALOG_TEMPLATE } from './confirmation-dialog.component.html';
-import { CONFIRMATION_DIALOG_STYLE } from './confirmation-dialog.component.css';
 import {BatchInfo} from './confirmation-batch-message';
 
 @Component({
     selector: 'confirmation-dialog',
-    template: CONFIRMATION_DIALOG_TEMPLATE,
-    styles: [ CONFIRMATION_DIALOG_STYLE ]
+    templateUrl: './confirmation-dialog.component.html',
+    styleUrls: [ './confirmation-dialog.component.scss' ]
 })
 
 export class ConfirmationDialogComponent {

src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html.ts → src/ui_ng/lib/src/create-edit-endpoint/create-edit-endpoint.component.html

-export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
 <clr-modal [(clrModalOpen)]="createEditDestinationOpened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalClosable]="closable">
   <h3 class="modal-title">{{modalTitle}}</h3>
   <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
@@ -61,4 +60,4 @@ export const CREATE_EDIT_ENDPOINT_TEMPLATE: string = `
       <button type="button" class="btn btn-outline" (click)="onCancel()"  [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button>
       <button type="submit" class="btn btn-primary" (click)="onSubmit()"  [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}</button>
   </div>
-</clr-modal>`;
\ No newline at end of file
+</clr-modal>
\ No newline at end of file