Merge pull request #2614 from steven-zou/master

Update UI builder to 1.2.5
2024-11-26 12:15:20 +01:00 · 2017-06-26 14:24:55 +08:00 · 2017-06-26 14:24:55 +08:00 · 30ece92360
commit 30ece92360
parent c50e2a5606 8a15a5002c
16 changed files with 62 additions and 51 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -74,13 +74,12 @@ before_script:
  - sudo chmod 777 /tmp/registry.db

 script:
-  - sudo cp ./src/ui_ng/package.json ./src/ui_ng/src
  - sudo mkdir -p /etc/ui/ca/
  - sudo mv ./tests/ca.crt /etc/ui/ca/
  - sudo mkdir -p /harbor
  - sudo mv ./VERSION /harbor/VERSION
  - sudo service mysql stop
-  - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4
+  - sudo make run_clarity_ut CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.6
  - cat ./src/ui_ng/lib/npm-ut-test-results
  - sudo ./tests/testprepare.sh 
  - sudo docker-compose -f ./make/docker-compose.test.yml up -d
@ -101,7 +100,7 @@ script:
  - docker-compose -f make/docker-compose.test.yml down
  - sudo rm -rf /data/config/*  
  - ls /data/cert
-  - sudo make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4 NOTARYFLAG=true
+  - sudo make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.6 NOTARYFLAG=true
  
  - docker ps
  - ./tests/notarytest.sh
--- a/9
+++ b/9
@ -96,7 +96,8 @@ CLAIRDBVERSION=9.6.3

 #clarity parameters
 CLARITYIMAGE=vmware/harbor-clarity-ui-builder[:tag]
-CLARITYSEEDPATH=/harbor_ui
+CLARITYSEEDPATH=/harbor_src
+CLARITYUTPATH=${CLARITYSEEDPATH}/ui_ng/lib
 CLARITYBUILDSCRIPT=/entrypoint.sh

 # docker parameters
@ -266,9 +267,9 @@ compile_jobservice:
 compile_clarity:
 	@echo "compiling binary for clarity ui..."
 	@if [ "$(HTTPPROXY)" != "" ] ; then \
-		$(DOCKERCMD) run --rm -v $(UIPATH)/static:$(CLARITYSEEDPATH)/dist -v $(UINGPATH)/src:$(CLARITYSEEDPATH)/src $(CLARITYIMAGE) $(SHELL) $(CLARITYBUILDSCRIPT) -p $(HTTPPROXY); \
+		$(DOCKERCMD) run --rm -v $(BUILDPATH)/src:$(CLARITYSEEDPATH) $(CLARITYIMAGE) $(SHELL) $(CLARITYBUILDSCRIPT) -p $(HTTPPROXY); \
 	else \
-		$(DOCKERCMD) run --rm -v $(UIPATH)/static:$(CLARITYSEEDPATH)/dist -v $(UINGPATH)/src:$(CLARITYSEEDPATH)/src $(CLARITYIMAGE) $(SHELL) $(CLARITYBUILDSCRIPT); \
+		$(DOCKERCMD) run --rm -v $(BUILDPATH)/src:$(CLARITYSEEDPATH) $(CLARITYIMAGE) $(SHELL) $(CLARITYBUILDSCRIPT); \
 	fi
 	@echo "Done."

@ -389,7 +390,7 @@ refresh_clarity_builder:

 run_clarity_ut:
 	@echo "run clarity ut ..."
-	@$(DOCKERCMD) run --rm -v $(UINGPATH)/lib:$(CLARITYSEEDPATH)/lib -v $(BUILDPATH)/tests:$(CLARITYSEEDPATH)/tests $(CLARITYIMAGE) $(SHELL) $(CLARITYSEEDPATH)/tests/run-clarity-ut.sh
+	@$(DOCKERCMD) run --rm -v $(UINGPATH)/lib:$(CLARITYSEEDPATH) -v $(BUILDPATH)/tests:$(CLARITYSEEDPATH)/tests $(CLARITYIMAGE) $(SHELL) $(CLARITYSEEDPATH)/tests/run-clarity-ut.sh

 pushimage:
 	@echo "pushing harbor images ..."
--- a/docs/compile_guide.md
+++ b/docs/compile_guide.md
@ -50,13 +50,13 @@ You can compile the code by one of the three approaches:
 *  Build, install and bring up Harbor without Notary:

   ```sh
-      $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4
+      $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.6
   ```

 *  Build, install and bring up Harbor with Notary:

   ```sh
-      $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.4 NOTARYFLAG=true
+      $ make install GOBUILDIMAGE=golang:1.7.3 COMPILETAG=compile_golangimage CLARITYIMAGE=vmware/harbor-clarity-ui-builder:1.2.6 NOTARYFLAG=true
   ```

 #### II. Compile code with your own Golang environment, then build Harbor
--- a/make/dev/nodeclarity/Dockerfile
+++ b/make/dev/nodeclarity/Dockerfile
@ -1,20 +1,14 @@
 FROM node:7.5.0

-RUN mkdir -p /harbor_ui
+RUN mkdir -p /harbor_resources
+RUN mkdir -p /harbor_src

-COPY src/ui_ng/package.json /harbor_ui
-COPY src/ui_ng/tslint.json /harbor_ui
-COPY src/ui_ng/typings.json /harbor_ui
-COPY src/ui_ng/yarn.lock /harbor_ui
-COPY make/dev/nodeclarity/angular-cli.json /harbor_ui
+COPY src/ui_ng/package.json /harbor_resources
 COPY make/dev/nodeclarity/entrypoint.sh /

-COPY src/ui_ng/tsconfig-aot.json /harbor_ui
-COPY src/ui_ng/rollup-config.js /harbor_ui
-
-WORKDIR /harbor_ui
+WORKDIR /harbor_resources

 RUN npm __proxy__ install -g @angular/cli  && \
 	npm __proxy__ install && \
    chmod u+x /entrypoint.sh
-VOLUME ["/harbor_ui", "/harbor_ui/dist"]
+VOLUME ["/harbor_src"]
--- a/make/dev/nodeclarity/entrypoint.sh
+++ b/make/dev/nodeclarity/entrypoint.sh
@ -1,7 +1,7 @@
 #!/bin/bash
 set -e

-cd /harbor_ui
+cd /harbor_src/ui_ng
 rm -rf dist/*

 npm_proxy=
@ -18,19 +18,22 @@ if [ ! -z "$npm_proxy" -a "$npm_proxy" != " " ]; then
 	npm config set proxy $npm_proxy
 fi

-cp ./src/package.json .
+rm -rf ./node_modules
+mv /harbor_resources/node_modules ./
+
+cat ./package.json
 npm install

 ./node_modules/.bin/ngc -p tsconfig-aot.json
 sed -i 's/* as//g' src/app/shared/gauge/gauge.component.js
 ./node_modules/.bin/rollup -c rollup-config.js

-cp -r ./src/i18n/ dist/
-cp ./src/styles.css dist/
+cp -r ./src/i18n/ ../ui/static/
+cp ./src/styles.css ../ui/static/

-cp ./node_modules/clarity-icons/clarity-icons.min.css dist/
-cp ./node_modules/mutationobserver-shim/dist/mutationobserver.min.js dist/
-cp ./node_modules/@webcomponents/custom-elements/custom-elements.min.js dist/
-cp ./node_modules/clarity-icons/clarity-icons.min.js dist/
-cp ./node_modules/clarity-ui/clarity-ui.min.css dist/
-cp -r ./node_modules/clarity-icons/shapes/ dist/
+cp ./node_modules/clarity-icons/clarity-icons.min.css ../ui/static/
+cp ./node_modules/mutationobserver-shim/dist/mutationobserver.min.js ../ui/static/
+cp ./node_modules/@webcomponents/custom-elements/custom-elements.min.js ../ui/static/
+cp ./node_modules/clarity-icons/clarity-icons.min.js ../ui/static/
+cp ./node_modules/clarity-ui/clarity-ui.min.css ../ui/static/
+cp -r ./node_modules/clarity-icons/shapes/ ../ui/static/
--- a/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts
+++ b/src/ui_ng/lib/src/repository-stackview/repository-stackview.component.css.ts
@ -12,9 +12,16 @@ export const REPOSITORY_STACKVIEW_STYLES: string = `
 .refresh-btn:hover {
    color: #007CBB;
 }
-:host >>> .datagrid .datagrid-body .datagrid-row {
+
+:host >>> .datagrid .datagrid-body {
  overflow-x: hidden;
-  overflow-y: hidden;
+}
+
+:host >>> .datagrid .datagrid-foot {
+  border-top: 1px solid #ccc;
+}
+
+:host >>> .datagrid .datagrid-body .datagrid-row {
  background-color: #ccc;
 }

--- a/src/ui_ng/lib/src/tag/tag.component.css.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.css.ts
@ -13,6 +13,7 @@ export const TAG_STYLE = `

 :host >>> .datagrid {
  margin: 0;
+  border-bottom: none;
 }

 :host >>> .datagrid-placeholder {
--- a/src/ui_ng/lib/src/tag/tag.component.html.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.html.ts
@ -17,8 +17,8 @@ export const TAG_TEMPLATE = `
 <clr-datagrid [clrDgLoading]="loading" [class.embeded-datagrid]="isEmbedded">
    <clr-dg-column style="width: 80px;" [clrDgField]="'name'">{{'REPOSITORY.TAG' | translate}}</clr-dg-column>
    <clr-dg-column style="min-width: 180px;">{{'REPOSITORY.PULL_COMMAND' | translate}}</clr-dg-column>
+    <clr-dg-column style="width: 160px;" *ngIf="withClair">{{'VULNERABILITY.SINGULAR' | translate}}</clr-dg-column>
    <clr-dg-column style="width: 80px;" *ngIf="withNotary">{{'REPOSITORY.SIGNED' | translate}}</clr-dg-column>
-    <clr-dg-column style="width: 150px;" *ngIf="withClair">{{'VULNERABILITY.SINGULAR' | translate}}</clr-dg-column>
    <clr-dg-column style="width: 100px;">{{'REPOSITORY.AUTHOR' | translate}}</clr-dg-column>
    <clr-dg-column style="width: 160px;"[clrDgSortBy]="createdComparator">{{'REPOSITORY.CREATED' | translate}}</clr-dg-column>
    <clr-dg-column style="width: 80px;" [clrDgField]="'docker_version'" *ngIf="!withClair">{{'REPOSITORY.DOCKER_VERSION' | translate}}</clr-dg-column>
@ -35,6 +35,9 @@ export const TAG_TEMPLATE = `
        <span *ngSwitchDefault>{{t.name}}</span>
      </clr-dg-cell>
      <clr-dg-cell style="min-width: 180px;" class="truncated" title="docker pull {{registryUrl}}/{{repoName}}:{{t.name}}">docker pull {{registryUrl}}/{{repoName}}:{{t.name}}</clr-dg-cell>
+      <clr-dg-cell style="width: 160px;" *ngIf="withClair">
+        <hbr-vulnerability-bar [tagId]="t.name" [summary]="t.scan_overview" (startScanning)="scanTag($event)"></hbr-vulnerability-bar>
+      </clr-dg-cell>
      <clr-dg-cell style="width: 80px;" *ngIf="withNotary"  [ngSwitch]="t.signature !== null">
        <clr-icon shape="check" *ngSwitchCase="true" style="color: #1D5100;"></clr-icon>
        <clr-icon shape="close" *ngSwitchCase="false" style="color: #C92100;"></clr-icon>
@ -43,9 +46,6 @@ export const TAG_TEMPLATE = `
          <span class="tooltip-content">{{'REPOSITORY.NOTARY_IS_UNDETERMINED' | translate}}</span>
        </a>
      </clr-dg-cell>
-      <clr-dg-cell style="width: 150px;" *ngIf="withClair">
-        <hbr-vulnerability-bar [tagId]="t.name" [summary]="t.scan_overview" (startScanning)="scanTag($event)"></hbr-vulnerability-bar>
-      </clr-dg-cell>
      <clr-dg-cell style="width: 100px;">{{t.author}}</clr-dg-cell>
      <clr-dg-cell style="width: 160px;">{{t.created | date: 'short'}}</clr-dg-cell>
      <clr-dg-cell style="width: 80px;" *ngIf="!withClair">{{t.docker_version}}</clr-dg-cell>
--- a/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts
+++ b/src/ui_ng/lib/src/vulnerability-scanning/scanning.css.ts
@ -8,13 +8,12 @@ export const SCANNING_STYLES: string = `
 }

 .bar-state-chart {
-    position: relative;
-    top: 2px;
+    margin-top: 2px;
 }

 .bar-state-error {
    position: relative;
-    top: -3px;
+    top: -4px;
 }

 .error-text {
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@ -31,7 +31,7 @@
        "clarity-icons": "^0.9.8",
        "clarity-ui": "^0.9.8",
        "core-js": "^2.4.1",
-        "harbor-ui": "^0.2.19",
+        "harbor-ui": "^0.2.25",
        "intl": "^1.2.5",
        "mutationobserver-shim": "^0.3.2",
        "ngx-cookie": "^1.0.0",
--- a/src/ui_ng/src/app/project/list-project/list-project.component.html
+++ b/src/ui_ng/src/app/project/list-project/list-project.component.html
@ -1,4 +1,4 @@
-<clr-datagrid (clrDgRefresh)="refresh($event)">
+<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">
    <clr-dg-column>{{'PROJECT.NAME' | translate}}</clr-dg-column>
    <clr-dg-column>{{'PROJECT.ACCESS_LEVEL' | translate}}</clr-dg-column>
    <clr-dg-column *ngIf="showRoleInfo">{{'PROJECT.ROLE' | translate}}</clr-dg-column>
--- a/src/ui_ng/src/app/project/list-project/list-project.component.ts
+++ b/src/ui_ng/src/app/project/list-project/list-project.component.ts
@ -30,6 +30,7 @@ import { State } from 'clarity-angular';
 export class ListProjectComponent {
  _filterType: string = ProjectTypes[0];

+  @Input() loading: boolean = true;
  @Input() projects: Project[];
  @Input()
  get filteredType(): string {
--- a/src/ui_ng/src/app/project/project.component.html
+++ b/src/ui_ng/src/app/project/project.component.html
@ -25,6 +25,6 @@
                </span>
            </div>
        </div>
-        <list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)"></list-project>
+        <list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)" [loading]="loading"></list-project>
    </div>
 </div>
--- a/src/ui_ng/src/app/project/project.component.ts
+++ b/src/ui_ng/src/app/project/project.component.ts
@ -60,6 +60,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
  projectName: string = "";

  subscription: Subscription;
+  loading: boolean = true;

  constructor(
    private projectService: ProjectService,
@ -122,13 +123,19 @@ export class ProjectComponent implements OnInit, OnDestroy {
  }

  getProjects(name?: string, isPublic?: number, page?: number, pageSize?: number): void {
+    this.loading = true;
+
    this.projectService
      .listProjects(name, isPublic, page, pageSize)
      .subscribe(
      response => {
        this.changedProjects = response.json();
+        this.loading = false;
      },
-      error => this.messageHandlerService.handleError(error)
+      error => {
+        this.loading = false;
+        this.messageHandlerService.handleError(error);
+      }
      );
  }

--- a/src/ui_ng/src/app/user/user.component.ts
+++ b/src/ui_ng/src/app/user/user.component.ts
@ -211,12 +211,9 @@ export class UserComponent implements OnInit, OnDestroy {
        //Remove it from current user list
        //and then view refreshed
        this.currentTerm = '';
-        this.originalUsers.then(users => {
-          this.users = users.filter(u => u.user_id != user.user_id);
-          this.msgHandler.showSuccess("USER.DELETE_SUCCESS");
-          let hnd = setInterval(() => this.ref.markForCheck(), 100);
-          setTimeout(() => clearInterval(hnd), 1000);
-        });
+
+        this.msgHandler.showSuccess("USER.DELETE_SUCCESS");
+        this.refresh();
      })
      .catch(error => {
        this.msgHandler.handleError(error);
--- a/tests/run-clarity-ut.sh
+++ b/tests/run-clarity-ut.sh
@ -2,9 +2,11 @@

 set -e

-cp -r /harbor_ui/lib/* /harbor_ui
+cd /harbor_src
+ 
+mv /harbor_resources/node_modules ./

 npm install
-npm run test > lib/npm-ut-test-results
+npm run test > ./npm-ut-test-results