Upstream
/
harbor
mirror of https://github.com/goharbor/harbor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Upgrade to Angular 4 and Clarity 0.9.0

This commit is contained in:
kunw 2017-04-18 19:00:51 +08:00
parent 425106524f
commit 3ca69d7596
41 changed files with 219 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@ -28,4 +28,10 @@ src/ui_ng/typings/
**/ssl/
**/proxy.config.json
src/ui_ng/src/**/*.js
src/ui_ng/src/**/*.js.map
src/ui_ng/src/**/*.json
src/ui_ng/aot/**/*.js
src/ui_ng/aot/**/*.js.map
src/ui_ng/aot/**/*.json

123
src/ui_ng/package.json
View File

@ -1,63 +1,62 @@
{
"name": "harbor",
"version": "0.6.0",
"description": "Harbor UI with Clarity",
"angular-cli": {},
"scripts": {
"start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --single-run",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "^2.4.1",
"@angular/compiler": "^2.4.1",
"@angular/core": "^2.4.1",
"@angular/forms": "^2.4.1",
"@angular/http": "^2.4.1",
"@angular/platform-browser": "^2.4.1",
"@angular/platform-browser-dynamic": "^2.4.1",
"@angular/router": "^3.4.1",
"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "0.0.3",
"@webcomponents/custom-elements": "1.0.0-alpha.3",
"angular2-cookie": "^1.2.6",
"clarity-angular": "0.8.7",
"clarity-icons": "0.8.7",
"clarity-ui": "0.8.7",
"core-js": "^2.4.1",
"fs": "0.0.1-security",
"jquery": "^2.2.4",
"mutationobserver-shim": "^0.3.2",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.2.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.4.1",
"@angular/cli": "^1.0.0",
"@types/core-js": "^0.9.34",
"@types/jasmine": "^2.2.30",
"@types/node": "^6.0.42",
"bootstrap": "4.0.0-alpha.5",
"codelyzer": "~1.0.0-beta.3",
"enhanced-resolve": "^3.0.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "^4.1.1",
"typescript": "~2.2.1",
"typings": "^1.4.0",
"webdriver-manager": "10.2.5"
}
}
"name": "harbor",
"version": "0.6.0",
"description": "Harbor UI with Clarity",
"angular-cli": {},
"scripts": {
"start": "ng serve --ssl 1 --ssl-key ssl/server.key --ssl-cert ssl/server.crt --host 0.0.0.0 --proxy-config proxy.config.json",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --single-run",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/common": "^4.0.1",
"@angular/compiler": "^4.0.1",
"@angular/core": "^4.0.1",
"@angular/forms": "^4.0.1",
"@angular/http": "^4.0.1",
"@angular/platform-browser": "^4.0.1",
"@angular/platform-browser-dynamic": "^4.0.1",
"@angular/router": "^4.0.1",
"@ngx-translate/core": "^6.0.0",
"@ngx-translate/http-loader": "0.0.3",
"@webcomponents/custom-elements": "1.0.0-alpha.3",
"angular2-cookie": "^1.2.6",
"clarity-angular": "^0.9.0",
"clarity-icons": "^0.9.0",
"clarity-ui": "^0.9.0",
"core-js": "^2.4.1",
"mutationobserver-shim": "^0.3.2",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.2.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^4.0.1",
"@types/core-js": "^0.9.34",
"@types/jasmine": "~2.2.30",
"@types/node": "^6.0.42",
"bootstrap": "4.0.0-alpha.5",
"codelyzer": "~2.0.0-beta.4",
"enhanced-resolve": "^3.0.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "^4.1.1",
"typescript": "~2.2.0",
"typings": "^1.4.0",
"webdriver-manager": "10.2.5"
}
}

3
src/ui_ng/src/app/app.component.ts
View File

@ -43,8 +43,7 @@ export class AppComponent {
}
let selectedLang = this.isLangMatch(langSetting, supportedLangs) ? langSetting : enLang;
translate.use(selectedLang);
//this.session.switchLanguage(selectedLang).catch(error => console.error(error));
translate.use(selectedLang);
//Override page title
let key: string = "APP_TITLE.HARBOR";

7
src/ui_ng/src/app/core/core.module.ts
View File

@ -15,6 +15,7 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClarityModule } from 'clarity-angular';
@NgModule({
@ -22,13 +23,15 @@ import { ClarityModule } from 'clarity-angular';
BrowserModule,
FormsModule,
HttpModule,
ClarityModule.forRoot()
ClarityModule.forRoot(),
BrowserAnimationsModule
],
exports: [
BrowserModule,
FormsModule,
HttpModule,
ClarityModule
ClarityModule,
BrowserAnimationsModule
]
})
export class CoreModule {

6
src/ui_ng/src/app/log/audit-log.component.ts
View File

@ -77,7 +77,6 @@ export class AuditLogComponent implements OnInit {
ngOnInit(): void {
this.projectId = +this.route.snapshot.parent.params['id'];
console.log('Get projectId from route params snapshot:' + this.projectId);
this.queryParam.project_id = this.projectId;
this.queryParam.page_size = this.pageSize;
}
@ -92,7 +91,6 @@ export class AuditLogComponent implements OnInit {
response=>{
this.totalRecordCount = response.headers.get('x-total-count');
this.totalPage = Math.ceil(this.totalRecordCount / this.pageSize);
console.log('TotalRecordCount:' + this.totalRecordCount + ', totalPage:' + this.totalPage);
this.auditLogs = response.json();
},
error=>{
@ -117,7 +115,6 @@ export class AuditLogComponent implements OnInit {
this.queryParam.end_timestamp = new Date(strDate).getTime() / 1000 + oneDayOffset;
break;
}
console.log('Search audit log filtered by time range, begin: ' + this.queryParam.begin_timestamp + ', end:' + this.queryParam.end_timestamp);
this.retrieve();
}
@ -136,8 +133,7 @@ export class AuditLogComponent implements OnInit {
operationFilter = [];
}
this.queryParam.keywords = operationFilter.join('/');
this.retrieve();
console.log('Search option filter:' + operationFilter.join('/'));
this.retrieve();
}
toggleOptionalName(option: number): void {

2
src/ui_ng/src/app/log/recent-log.component.html
View File

@ -25,7 +25,7 @@
<clr-dg-column>{{'AUDIT_LOG.TAGS' | translate}}</clr-dg-column>
<clr-dg-column>{{'AUDIT_LOG.OPERATION' | translate}}</clr-dg-column>
<clr-dg-column>{{'AUDIT_LOG.TIMESTAMP' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let l of recentLogs">
<clr-dg-row *clrDgItems="let l of recentLogs">
<clr-dg-cell>{{l.username}}</clr-dg-cell>
<clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
<clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>

4
src/ui_ng/src/app/project/list-project/list-project.component.html
View File

@ -4,7 +4,7 @@
<clr-dg-column *ngIf="showRoleInfo">{{'PROJECT.ROLE' | translate}}</clr-dg-column>
<clr-dg-column>{{'PROJECT.REPO_COUNT'| translate}}</clr-dg-column>
<clr-dg-column>{{'PROJECT.CREATION_TIME' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let p of projects" [clrDgItem]="p">
<clr-dg-row *clrDgItems="let p of projects">
<clr-dg-action-overflow [hidden]="!(p.current_user_role_id === 1 || isSystemAdmin)">
<button class="action-item" (click)="newReplicationRule(p)" [hidden]="!isSystemAdmin">{{'PROJECT.REPLICATION_RULE' | translate}}</button>
<button class="action-item" (click)="toggleProject(p)">{{'PROJECT.MAKE' | translate}} {{(p.public === 0 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} </button>
@ -18,6 +18,6 @@
</clr-dg-row>
<clr-dg-footer>
{{totalRecordCount || (projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}
<clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
<clr-dg-pagination [clrDgPageSize]="15"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>

22
src/ui_ng/src/app/project/list-project/list-project.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, EventEmitter, Output, Input, OnInit } from '@angular/core';
import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { Project } from '../project';
import { ProjectService } from '../project.service';
@ -24,17 +24,12 @@ import { State } from 'clarity-angular';
@Component({
selector: 'list-project',
templateUrl: 'list-project.component.html'
templateUrl: 'list-project.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListProjectComponent implements OnInit {
export class ListProjectComponent {
@Input() projects: Project[];
@Input() totalPage: number;
@Input() totalRecordCount: number;
pageOffset: number = 1;
@Input() filteredType: string;
@Output() paginate = new EventEmitter<State>();
@ -47,10 +42,11 @@ export class ListProjectComponent implements OnInit {
constructor(
private session: SessionService,
private router: Router,
private searchTrigger: SearchTriggerService) { }
ngOnInit(): void {
}
private searchTrigger: SearchTriggerService,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
get showRoleInfo(): boolean {
return this.filteredType === ProjectTypes[0];

2
src/ui_ng/src/app/project/member/add-member/add-member.component.ts
View File

@ -63,7 +63,6 @@ export class AddMemberComponent implements AfterViewChecked {
.subscribe(
response=>{
this.messageHandlerService.showSuccess('MEMBER.ADDED_SUCCESS');
console.log('Added member successfully.');
this.added.emit(true);
this.addMemberOpened = false;
},
@ -89,7 +88,6 @@ export class AddMemberComponent implements AfterViewChecked {
.subscribe(errorMessage=>this.inlineAlert.showInlineError(errorMessage));
}
}
console.log('Failed to add member of project:' + this.projectId, ' with error:' + error);
}
);
}

2
src/ui_ng/src/app/project/member/member.component.html
View File

@ -17,7 +17,7 @@
<clr-datagrid>
<clr-dg-column>{{'MEMBER.NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'MEMBER.ROLE' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let m of members">
<clr-dg-row *clrDgItems="let m of members">
<clr-dg-action-overflow [hidden]="m.user_id === currentUser.user_id || !hasProjectAdminRole">
<button class="action-item" (click)="changeRole(m, 1)">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
<button class="action-item" (click)="changeRole(m, 2)">{{'MEMBER.DEVELOPER' | translate}}</button>

25
src/ui_ng/src/app/project/member/member.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Response } from '@angular/http';
@ -41,7 +41,8 @@ import { Project } from '../../project/project';
@Component({
templateUrl: 'member.component.html',
styleUrls: ['./member.component.css']
styleUrls: ['./member.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MemberComponent implements OnInit, OnDestroy {
@ -64,7 +65,8 @@ export class MemberComponent implements OnInit, OnDestroy {
private memberService: MemberService,
private messageHandlerService: MessageHandlerService,
private deletionDialogService: ConfirmationDialogService,
private session: SessionService) {
private session: SessionService,
private ref: ChangeDetectorRef) {
this.delSub = deletionDialogService.confirmationConfirm$.subscribe(message => {
if (message &&
@ -75,20 +77,25 @@ export class MemberComponent implements OnInit, OnDestroy {
.subscribe(
response => {
this.messageHandlerService.showSuccess('MEMBER.DELETED_SUCCESS');
console.log('Successful delete member: ' + message.data);
this.retrieve(this.projectId, '');
},
error => this.messageHandlerService.handleError(error)
);
}
});
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
retrieve(projectId: number, username: string) {
this.memberService
.listMembers(projectId, username)
.subscribe(
response => this.members = response,
response => {
this.members = response;
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
},
error => {
this.router.navigate(['/harbor', 'projects']);
this.messageHandlerService.handleError(error);
@ -103,18 +110,13 @@ export class MemberComponent implements OnInit, OnDestroy {
ngOnInit() {
//Get projectId from route params snapshot.
this.projectId = +this.route.snapshot.parent.params['id'];
console.log('Get projectId from route params snapshot:' + this.projectId);
this.projectId = +this.route.snapshot.parent.params['id'];
this.currentUser = this.session.getCurrentUser();
//Get current user from registered resolver.
let resolverData = this.route.snapshot.parent.data;
if(resolverData) {
this.hasProjectAdminRole = (<Project>resolverData['projectResolver']).has_project_admin_role;
}
this.retrieve(this.projectId, '');
}
@ -134,7 +136,6 @@ export class MemberComponent implements OnInit, OnDestroy {
.subscribe(
response => {
this.messageHandlerService.showSuccess('MEMBER.SWITCHED_SUCCESS');
console.log('Successful change role with user ' + m.user_id + ' to roleId ' + roleId);
this.retrieve(this.projectId, '');
},
error => this.messageHandlerService.handleError(error)

4
src/ui_ng/src/app/project/member/member.service.ts
View File

@ -27,7 +27,6 @@ export class MemberService {
constructor(private http: Http) {}
listMembers(projectId: number, username: string): Observable<Member[]> {
console.log('Get member from project_id:' + projectId + ', username:' + username);
return this.http
.get(`/api/projects/${projectId}/members?username=${username}`)
.map(response=>response.json() as Member[])
@ -35,7 +34,6 @@ export class MemberService {
}
addMember(projectId: number, username: string, roleId: number): Observable<any> {
console.log('Adding member with username:' + username + ', roleId:' + roleId + ' under projectId:' + projectId);
return this.http
.post(`/api/projects/${projectId}/members`, { username: username, roles: [ roleId ] })
.map(response=>response.status)
@ -43,7 +41,6 @@ export class MemberService {
}
changeMemberRole(projectId: number, userId: number, roleId: number): Observable<any> {
console.log('Changing member role with userId:' + ' to roleId:' + roleId + ' under projectId:' + projectId);
return this.http
.put(`/api/projects/${projectId}/members/${userId}`, { roles: [ roleId ]})
.map(response=>response.status)
@ -51,7 +48,6 @@ export class MemberService {
}
deleteMember(projectId: number, userId: number): Observable<any> {
console.log('Deleting member role with userId:' + userId + ' under projectId:' + projectId);
return this.http
.delete(`/api/projects/${projectId}/members/${userId}`)
.map(response=>response.status)

1
src/ui_ng/src/app/project/project-routing-resolver.service.ts
View File

@ -29,7 +29,6 @@ export class ProjectRoutingResolver implements Resolve<Project>{
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Project> {
let projectId = route.params['id'];
console.log('Project resolver, projectID:' + projectId);
return this.projectService
.getProject(projectId)
.toPromise()

2
src/ui_ng/src/app/project/project.component.html
View File

@ -24,6 +24,6 @@
</a>
</div>
</div>
<list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)" [totalPage]="totalPage" [totalRecordCount]="totalRecordCount"></list-project>
<list-project [projects]="changedProjects" [filteredType]="projectTypes[currentFilteredType]" (toggle)="toggleProject($event)" (delete)="deleteProject($event)" (paginate)="retrieve($event)"></list-project>
</div>
</div>

14
src/ui_ng/src/app/project/project.component.ts
View File

@ -47,7 +47,6 @@ import { StatisticHandler } from '../shared/statictics/statistic-handler.service
})
export class ProjectComponent implements OnInit, OnDestroy {
selected = [];
changedProjects: Project[];
projectTypes = ProjectTypes;
@ -64,12 +63,6 @@ export class ProjectComponent implements OnInit, OnDestroy {
projectName: string;
isPublic: number;
page: number = 1;
pageSize: number = 15;
totalPage: number;
totalRecordCount: number;
constructor(
private projectService: ProjectService,
private messageHandlerService: MessageHandlerService,
@ -129,15 +122,10 @@ export class ProjectComponent implements OnInit, OnDestroy {
}
retrieve(state?: State): void {
if (state) {
this.page = state.page.to + 1;
}
this.projectService
.listProjects(this.projectName, this.isPublic, this.page, this.pageSize)
.listProjects(this.projectName, this.isPublic)
.subscribe(
response => {
this.totalRecordCount = response.headers.get('x-total-count');
this.totalPage = Math.ceil(this.totalRecordCount / this.pageSize);
this.changedProjects = response.json();
},
error => this.messageHandlerService.handleError(error)

6
src/ui_ng/src/app/project/project.service.ts
View File

@ -42,8 +42,10 @@ export class ProjectService {
listProjects(name: string, isPublic: number, page?: number, pageSize?: number): Observable<any>{
let params = new URLSearchParams();
params.set('page', page + '');
params.set('page_size', pageSize + '');
if(page && pageSize) {
params.set('page', page + '');
params.set('page_size', pageSize + '');
}
return this.http
.get(`/api/projects?project_name=${name}&is_public=${isPublic}`, {search: params})
.map(response=>response)

2
src/ui_ng/src/app/replication/create-edit-destination/create-edit-destination.component.ts
View File

@ -157,7 +157,6 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
.subscribe(
response=>{
this.messageHandlerService.showSuccess('DESTINATION.CREATED_SUCCESS');
console.log('Successful added target.');
this.createEditDestinationOpened = false;
this.reload.emit(true);
},
@ -206,7 +205,6 @@ export class CreateEditDestinationComponent implements AfterViewChecked {
.subscribe(
response=>{
this.messageHandlerService.showSuccess('DESTINATION.UPDATED_SUCCESS');
console.log('Successful updated target.');
this.createEditDestinationOpened = false;
this.reload.emit(true);
},

2
src/ui_ng/src/app/replication/destination/destination.component.html
View File

@ -18,7 +18,7 @@
<clr-dg-column>{{'DESTINATION.NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'DESTINATION.URL' | translate}}</clr-dg-column>
<clr-dg-column>{{'DESTINATION.CREATION_TIME' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let t of targets" [clrDgItem]='t'>
<clr-dg-row *clrDgItems="let t of targets" [clrDgItem]='t'>
<clr-dg-action-overflow>
<button class="action-item" (click)="editTarget(t)">{{'DESTINATION.TITLE_EDIT' | translate}}</button>
<button class="action-item" (click)="deleteTarget(t)">{{'DESTINATION.DELETE' | translate}}</button>

18
src/ui_ng/src/app/replication/destination/destination.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Target } from '../target';
import { ReplicationService } from '../replication.service';
import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
@ -28,7 +28,8 @@ import { CreateEditDestinationComponent } from '../create-edit-destination/creat
@Component({
selector: 'destination',
templateUrl: 'destination.component.html',
styleUrls: ['./destination.component.css']
styleUrls: ['./destination.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DestinationComponent implements OnInit {
@ -44,7 +45,8 @@ export class DestinationComponent implements OnInit {
constructor(
private replicationService: ReplicationService,
private messageHandlerService: MessageHandlerService,
private deletionDialogService: ConfirmationDialogService) {
private deletionDialogService: ConfirmationDialogService,
private ref: ChangeDetectorRef) {
this.subscription = this.deletionDialogService.confirmationConfirm$.subscribe(message => {
if (message &&
message.source === ConfirmationTargets.TARGET &&
@ -66,6 +68,8 @@ export class DestinationComponent implements OnInit {
});
}
});
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
ngOnInit(): void {
@ -83,7 +87,11 @@ export class DestinationComponent implements OnInit {
this.replicationService
.listTargets(targetName)
.subscribe(
targets => this.targets = targets,
targets => {
this.targets = targets || [];
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
},
error => this.messageHandlerService.handleError(error)
);
}
@ -124,6 +132,8 @@ export class DestinationComponent implements OnInit {
}
}
this.createEditDestinationComponent.openCreateEditTarget(editable, target.id);
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
},
error=>this.messageHandlerService.handleError(error)
);

12
src/ui_ng/src/app/replication/list-job/list-job.component.ts
View File

@ -11,14 +11,15 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Job } from '../job';
import { State } from 'clarity-angular';
import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
@Component({
selector: 'list-job',
templateUrl: 'list-job.component.html'
templateUrl: 'list-job.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListJobComponent {
@Input() jobs: Job[];
@ -26,7 +27,12 @@ export class ListJobComponent {
@Input() totalPage: number;
@Output() paginate = new EventEmitter<State>();
constructor(private messageHandlerService: MessageHandlerService) {}
constructor(
private messageHandlerService: MessageHandlerService,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
pageOffset: number = 1;

8
src/ui_ng/src/app/replication/replication.component.ts
View File

@ -98,7 +98,7 @@ export class ReplicationComponent implements OnInit {
private messageHandlerService: MessageHandlerService,
private replicationService: ReplicationService,
private route: ActivatedRoute) {
this.currentUser = this.sessionService.getCurrentUser();
this.currentUser = this.sessionService.getCurrentUser();
}
ngOnInit(): void {
@ -120,7 +120,7 @@ export class ReplicationComponent implements OnInit {
.listPolicies(this.search.policyName, this.projectId)
.subscribe(
response=>{
this.changedPolicies = response;
this.changedPolicies = response || [];
if(this.changedPolicies && this.changedPolicies.length > 0) {
this.initSelectedId = this.changedPolicies[0].id;
}
@ -128,8 +128,6 @@ export class ReplicationComponent implements OnInit {
if(this.changedPolicies && this.changedPolicies.length > 0) {
this.search.policyId = this.changedPolicies[0].id;
this.fetchPolicyJobs();
} else {
this.changedJobs = [];
}
},
error=>this.messageHandlerService.handleError(error)
@ -169,7 +167,7 @@ export class ReplicationComponent implements OnInit {
this.messageHandlerService.showError('REPLICATION.FOUND_ERROR_IN_JOBS', '');
break;
}
}
}
},
error=>this.messageHandlerService.handleError(error)
);

2
src/ui_ng/src/app/replication/replication.service.ts
View File

@ -100,7 +100,6 @@ export class ReplicationService {
}
enablePolicy(policyId: number, enabled: number): Observable<any> {
console.log('Enable or disable policy ID:' + policyId + ' with activation status:' + enabled);
return this.http
.put(`/api/policies/replication/${policyId}/enablement`, {enabled: enabled})
.map(response=>response.status)
@ -108,7 +107,6 @@ export class ReplicationService {
}
deletePolicy(policyId: number): Observable<any> {
console.log('Delete policy ID:' + policyId);
return this.http
.delete(`/api/policies/replication/${policyId}`)
.map(response=>response.status)

11
src/ui_ng/src/app/replication/total-replication/total-replication.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ReplicationService } from '../../replication/replication.service';
import { CreateEditPolicyComponent } from '../../shared/create-edit-policy/create-edit-policy.component';
@ -24,7 +24,8 @@ import { Policy } from '../../replication/policy';
selector: 'total-replication',
templateUrl: 'total-replication.component.html',
providers: [ ReplicationService ],
styleUrls: ['./total-replication.component.css']
styleUrls: ['./total-replication.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TotalReplicationComponent implements OnInit {
@ -38,7 +39,11 @@ export class TotalReplicationComponent implements OnInit {
constructor(
private replicationService: ReplicationService,
private messageHandlerService: MessageHandlerService) {}
private messageHandlerService: MessageHandlerService,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
ngOnInit() {
this.retrievePolicies();

4
src/ui_ng/src/app/repository/list-repository/list-repository.component.html
View File

@ -2,7 +2,7 @@
<clr-dg-column>{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let r of repositories" [clrDgItem]='r'>
<clr-dg-row *clrDgItems="let r of repositories" [clrDgItem]='r'>
<clr-dg-action-overflow [hidden]="!hasProjectAdminRole">
<button class="action-item" (click)="deleteRepo(r.name)">{{'REPOSITORY.DELETE' | translate}}</button>
</clr-dg-action-overflow>
@ -12,6 +12,6 @@
</clr-dg-row>
<clr-dg-footer>
{{totalRecordCount || (repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}}
<clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
<clr-dg-pagination [clrDgPageSize]="15"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>

15
src/ui_ng/src/app/repository/list-repository/list-repository.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { Repository } from '../repository';
import { State } from 'clarity-angular';
@ -20,18 +20,15 @@ import { SearchTriggerService } from '../../base/global-search/search-trigger.se
@Component({
selector: 'list-repository',
templateUrl: 'list-repository.component.html'
templateUrl: 'list-repository.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListRepositoryComponent implements OnInit {
@Input() projectId: number;
@Input() repositories: Repository[];
@Output() delete = new EventEmitter<string>();
@Input() totalPage: number;
@Input() totalRecordCount: number;
@Output() paginate = new EventEmitter<State>();
@Input() hasProjectAdminRole: boolean;
@ -40,7 +37,11 @@ export class ListRepositoryComponent implements OnInit {
constructor(
private router: Router,
private searchTrigger: SearchTriggerService) { }
private searchTrigger: SearchTriggerService,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
ngOnInit() { }

2
src/ui_ng/src/app/repository/repository.component.html
View File

@ -8,6 +8,6 @@
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<list-repository [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [totalPage]="totalPage" [totalRecordCount]="totalRecordCount" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></list-repository>
<list-repository [projectId]="projectId" [repositories]="changedRepositories" (delete)="deleteRepo($event)" [hasProjectAdminRole]="hasProjectAdminRole" (paginate)="retrieve($event)"></list-repository>
</div>
</div>

12
src/ui_ng/src/app/repository/repository.component.ts
View File

@ -41,9 +41,6 @@ export class RepositoryComponent implements OnInit {
lastFilteredRepoName: string;
page: number = 1;
pageSize: number = 15;
totalPage: number;
totalRecordCount: number;
@ -71,7 +68,6 @@ export class RepositoryComponent implements OnInit {
response => {
this.refresh();
this.messageHandlerService.showSuccess('REPOSITORY.DELETED_REPO_SUCCESS');
console.log('Successful deleted repo:' + repoName);
},
error => this.messageHandlerService.handleError(error)
);
@ -97,16 +93,10 @@ export class RepositoryComponent implements OnInit {
}
retrieve(state?: State) {
if (state) {
this.page = state.page.to + 1;
}
this.repositoryService
.listRepositories(this.projectId, this.lastFilteredRepoName, this.page, this.pageSize)
.listRepositories(this.projectId, this.lastFilteredRepoName)
.subscribe(
response => {
this.totalRecordCount = response.headers.get('x-total-count');
this.totalPage = Math.ceil(this.totalRecordCount / this.pageSize);
console.log('TotalRecordCount:' + this.totalRecordCount + ', totalPage:' + this.totalPage);
this.changedRepositories = response.json();
},
error => this.messageHandlerService.handleError(error)

9
src/ui_ng/src/app/repository/repository.service.ts
View File

@ -28,10 +28,11 @@ export class RepositoryService {
constructor(private http: Http){}
listRepositories(projectId: number, repoName: string, page?: number, pageSize?: number): Observable<any> {
console.log('List repositories with project ID:' + projectId);
let params = new URLSearchParams();
params.set('page', page + '');
params.set('page_size', pageSize + '');
if(page && pageSize) {
params.set('page', page + '');
params.set('page_size', pageSize + '');
}
return this.http
.get(`/api/repositories?project_id=${projectId}&q=${repoName}&detail=1`, {search: params})
.map(response=>response)
@ -75,7 +76,6 @@ export class RepositoryService {
}
deleteRepository(repoName: string): Observable<any> {
console.log('Delete repository with repo name:' + repoName);
return this.http
.delete(`/api/repositories/${repoName}/tags`)
.map(response=>response.status)
@ -83,7 +83,6 @@ export class RepositoryService {
}
deleteRepoByTag(repoName: string, tag: string): Observable<any> {
console.log('Delete repository with repo name:' + repoName + ', tag:' + tag);
return this.http
.delete(`/api/repositories/${repoName}/tags/${tag}`)
.map(response=>response.status)

2
src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html
View File

@ -24,7 +24,7 @@
<clr-dg-column>{{'REPOSITORY.DOCKER_VERSION' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.ARCHITECTURE' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.OS' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let t of tags" [clrDgItem]='t'>
<clr-dg-row *clrDgItems="let t of tags" [clrDgItem]='t'>
<clr-dg-action-overflow>
<button class="action-item" (click)="showTagID('tag', t)">{{'REPOSITORY.COPY_ID' | translate}}</button>
<button class="action-item" (click)="showTagID('parent', t)">{{'REPOSITORY.COPY_PARENT_ID' | translate}}</button>

13
src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RepositoryService } from '../repository.service';
@ -35,7 +35,8 @@ import { Project } from '../../project/project';
@Component({
selector: 'tag-repository',
templateUrl: 'tag-repository.component.html',
styleUrls: ['./tag-repository.component.css']
styleUrls: ['./tag-repository.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TagRepositoryComponent implements OnInit, OnDestroy {
@ -66,8 +67,9 @@ export class TagRepositoryComponent implements OnInit, OnDestroy {
private deletionDialogService: ConfirmationDialogService,
private repositoryService: RepositoryService,
private appConfigService: AppConfigService,
private session: SessionService){
private session: SessionService,
private ref: ChangeDetectorRef){
this.subscription = this.deletionDialogService.confirmationConfirm$.subscribe(
message => {
if (message &&
@ -85,7 +87,6 @@ export class TagRepositoryComponent implements OnInit, OnDestroy {
response => {
this.retrieve();
this.messageHandlerService.showSuccess('REPOSITORY.DELETED_TAG_SUCCESS');
console.log('Deleted repo:' + this.repoName + ' with tag:' + tagName);
},
error => this.messageHandlerService.handleError(error)
);
@ -148,6 +149,8 @@ export class TagRepositoryComponent implements OnInit, OnDestroy {
tag.parent = data['parent'];
this.tags.push(tag);
});
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
deleteTag(tag: TagView) {

13
src/ui_ng/src/app/shared/create-edit-policy/create-edit-policy.component.ts
View File

@ -157,7 +157,6 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
}
newDestination(checkedAddNew: boolean): void {
console.log('CheckedAddNew:' + checkedAddNew);
this.isCreateDestination = checkedAddNew;
if(this.isCreateDestination) {
this.createEditPolicy.targetName = '';
@ -201,13 +200,11 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
}
createPolicy(): void {
console.log('Create policy with existing target in component.');
this.replicationService
.createPolicy(this.getPolicyByForm())
.subscribe(
response=>{
this.messageHandlerService.showSuccess('REPLICATION.CREATED_SUCCESS');
console.log('Successful created policy: ' + response);
this.createEditPolicyOpened = false;
this.reload.emit(true);
},
@ -220,18 +217,16 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
} else {
this.inlineAlert.showInlineError(error);
}
console.log('Failed to create policy:' + error.status + ', error message:' + JSON.stringify(error['_body']));
console.error('Failed to create policy:' + error.status + ', error message:' + JSON.stringify(error['_body']));
});
}
createOrUpdatePolicyAndCreateTarget(): void {
console.log('Creating policy with new created target.');
this.replicationService
.createOrUpdatePolicyWithNewTarget(this.getPolicyByForm(), this.getTargetByForm())
.subscribe(
response=>{
this.messageHandlerService.showSuccess('REPLICATION.CREATED_SUCCESS');
console.log('Successful created policy and target:' + response);
this.createEditPolicyOpened = false;
this.reload.emit(true);
},
@ -244,18 +239,16 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
} else {
this.inlineAlert.showInlineError(error);
}
console.log('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body']));
console.error('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body']));
}
);
}
updatePolicy(): void {
console.log('Creating policy with existing target.');
this.replicationService
.updatePolicy(this.getPolicyByForm())
.subscribe(
response=>{
console.log('Successful created policy and target:' + response);
this.messageHandlerService.showSuccess('REPLICATION.UPDATED_SUCCESS')
this.createEditPolicyOpened = false;
this.reload.emit(true);
@ -269,7 +262,7 @@ export class CreateEditPolicyComponent implements OnInit, AfterViewChecked {
} else {
this.inlineAlert.showInlineError(error);
}
console.log('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body']));
console.error('Failed to create policy and target:' + error.status + ', error message:' + JSON.stringify(error['_body']));
}
);
}

14
src/ui_ng/src/app/shared/list-policy/list-policy.component.html
View File

@ -5,26 +5,26 @@
<clr-dg-column>{{'REPLICATION.DESTINATION_NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPLICATION.LAST_START_TIME' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPLICATION.ACTIVATION' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let p of policies;let i = index;" [clrDgItem]="p" (click)="selectPolicy(p)" [style.backgroundColor]="(!projectless && selectedId === p.id) ? '#eee' : ''">
<clr-dg-row *clrDgItems="let p of policies" [clrDgItem]="p" (click)="selectPolicy(p)" [style.backgroundColor]="(!projectless && selectedId === p.id) ? '#eee' : ''">
<clr-dg-action-overflow>
<button class="action-item" (click)="editPolicy(p)">{{'REPLICATION.EDIT_POLICY' | translate}}</button>
<button class="action-item" (click)="togglePolicy(p)">{{ (p.enabled === 0 ? 'REPLICATION.ENABLE' : 'REPLICATION.DISABLE') | translate}}</button>
<button class="action-item" (click)="deletePolicy(p)">{{'REPLICATION.DELETE_POLICY' | translate}}</button>
</clr-dg-action-overflow>
<clr-dg-cell>
<template [ngIf]="projectless">
<ng-template [ngIf]="projectless">
<a href="javascript:void(0)" [routerLink]="['/harbor', 'projects', p.project_id, 'replication']">{{p.name}}</a>
</template>
<template [ngIf]="!projectless">
</ng-template>
<ng-template [ngIf]="!projectless">
{{p.name}}
</template>
</ng-template>
</clr-dg-cell>
<clr-dg-cell *ngIf="projectless">{{p.project_name}}</clr-dg-cell>
<clr-dg-cell>{{p.description ? p.description : '-'}}</clr-dg-cell>
<clr-dg-cell>{{p.target_name}}</clr-dg-cell>
<clr-dg-cell>
<template [ngIf]="p.start_time === nullTime">-</template>
<template [ngIf]="p.start_time !== nullTime">{{p.start_time | date: 'short'}}</template>
<ng-template [ngIf]="p.start_time === nullTime">-</ng-template>
<ng-template [ngIf]="p.start_time !== nullTime">{{p.start_time | date: 'short'}}</ng-template>
</clr-dg-cell>
<clr-dg-cell>
{{ (p.enabled === 1 ? 'REPLICATION.ENABLED' : 'REPLICATION.DISABLED') | translate}}

16
src/ui_ng/src/app/shared/list-policy/list-policy.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter, ViewChild, OnDestroy } from '@angular/core';
import { Component, Input, Output, EventEmitter, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ReplicationService } from '../../replication/replication.service';
import { Policy } from '../../replication/policy';
@ -28,6 +28,7 @@ import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'list-policy',
templateUrl: 'list-policy.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListPolicyComponent implements OnDestroy {
@ -49,8 +50,9 @@ export class ListPolicyComponent implements OnDestroy {
private replicationService: ReplicationService,
private toggleConfirmDialogService: ConfirmationDialogService,
private deletionDialogService: ConfirmationDialogService,
private messageHandlerService: MessageHandlerService) {
private messageHandlerService: MessageHandlerService,
private ref: ChangeDetectorRef) {
setInterval(()=>ref.markForCheck(), 500);
this.toggleSubscription = this.toggleConfirmDialogService
.confirmationConfirm$
.subscribe(
@ -60,13 +62,11 @@ export class ListPolicyComponent implements OnDestroy {
message.state === ConfirmationState.CONFIRMED) {
let policy: Policy = message.data;
policy.enabled = policy.enabled === 0 ? 1 : 0;
console.log('Enable policy ID:' + policy.id + ' with activation status ' + policy.enabled);
this.replicationService
.enablePolicy(policy.id, policy.enabled)
.subscribe(
response => {
this.messageHandlerService.showSuccess('REPLICATION.TOGGLED_SUCCESS');
console.log('Successful toggled policy status')
},
error => this.messageHandlerService.handleError(error)
);
@ -85,7 +85,6 @@ export class ListPolicyComponent implements OnDestroy {
.subscribe(
response => {
this.messageHandlerService.showSuccess('REPLICATION.DELETED_SUCCESS');
console.log('Successful delete policy with ID:' + message.data);
this.reload.emit(true);
},
error => {
@ -98,8 +97,7 @@ export class ListPolicyComponent implements OnDestroy {
);
}
}
);
);
}
ngOnDestroy() {
@ -113,12 +111,10 @@ export class ListPolicyComponent implements OnDestroy {
selectPolicy(policy: Policy): void {
this.selectedId = policy.id;
console.log('Select policy ID:' + policy.id);
this.selectOne.emit(policy);
}
editPolicy(policy: Policy) {
console.log('Open modal to edit policy.');
this.editOne.emit(policy);
}

4
src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.html
View File

@ -3,7 +3,7 @@
<clr-dg-column>{{'PROJECT.PUBLIC_OR_PRIVATE' | translate}}</clr-dg-column>
<clr-dg-column>{{'PROJECT.REPO_COUNT'| translate}}</clr-dg-column>
<clr-dg-column>{{'PROJECT.CREATION_TIME' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let p of projects" [clrDgItem]="p">
<clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p">
<clr-dg-cell><a href="javascript:void(0)" (click)="goToLink(p.project_id)">{{p.name}}</a></clr-dg-cell>
<clr-dg-cell>{{ (p.public === 1 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}}</clr-dg-cell>
<clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
@ -11,6 +11,6 @@
</clr-dg-row>
<clr-dg-footer>
{{totalRecordCount || (projects ? projects.length : 0)}} {{'PROJECT.ITEMS' | translate}}
<clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
<clr-dg-pagination [clrDgPageSize]="5"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>

16
src/ui_ng/src/app/shared/list-project-ro/list-project-ro.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, EventEmitter, Output, Input } from '@angular/core';
import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { SearchTriggerService } from '../../base/global-search/search-trigger.service';
@ -21,20 +21,20 @@ import { State } from 'clarity-angular';
@Component({
selector: 'list-project-ro',
templateUrl: 'list-project-ro.component.html'
templateUrl: 'list-project-ro.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListProjectROComponent {
@Input() projects: Project[];
@Input() totalPage: number;
@Input() totalRecordCount: number;
pageOffset: number = 1;
@Output() paginate = new EventEmitter<State>();
constructor(
private searchTrigger: SearchTriggerService,
private router: Router) { }
private router: Router,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
goToLink(proId: number): void {
this.searchTrigger.closeSearch(true);

4
src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.html
View File

@ -2,13 +2,13 @@
<clr-dg-column>{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
<clr-dg-column>{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let r of repositories" [clrDgItem]='r'>
<clr-dg-row *clrDgItems="let r of repositories" [clrDgItem]='r'>
<clr-dg-cell><a href="javascript:void(0)" (click)="gotoLink(projectId || r.project_id, r.name || r.repository_name)">{{r.name || r.repository_name}}</a></clr-dg-cell>
<clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
<clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
{{totalRecordCount || (repositories ? repositories.length : 0)}} {{'REPOSITORY.ITEMS' | translate}}
<clr-dg-pagination [clrDgPageSize]="pageOffset" [clrDgTotalItems]="totalPage"></clr-dg-pagination>
<clr-dg-pagination [clrDgPageSize]="3"></clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>

17
src/ui_ng/src/app/shared/list-repository-ro/list-repository-ro.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
import { Repository } from '../../repository/repository';
import { State } from 'clarity-angular';
@ -20,22 +20,23 @@ import { SearchTriggerService } from '../../base/global-search/search-trigger.se
@Component({
selector: 'list-repository-ro',
templateUrl: 'list-repository-ro.component.html'
templateUrl: 'list-repository-ro.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListRepositoryROComponent {
@Input() projectId: number;
@Input() repositories: Repository[];
@Input() totalPage: number;
@Input() totalRecordCount: number;
@Output() paginate = new EventEmitter<State>();
pageOffset: number = 1;
constructor(
private router: Router,
private searchTrigger: SearchTriggerService
) { }
private searchTrigger: SearchTriggerService,
private ref: ChangeDetectorRef) {
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
refresh(state: State) {
if (this.repositories) {

1
src/ui_ng/src/app/shared/shared.utils.ts
View File

@ -24,7 +24,6 @@ export const errorHandler = function (error: any): string {
if (!error) {
return "UNKNOWN_ERROR";
}
console.log(error);
if (!(error.statusCode || error.status)) {
//treat as string message
return '' + error;

1
src/ui_ng/src/app/shared/target-exists-directive.ts
View File

@ -51,7 +51,6 @@ export class TargetExistsValidatorDirective implements Validator, OnChanges {
targetExistsValidator(target: string): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
console.log('Target:' + target + ', validate value:' + control.value);
switch(target) {
case 'PROJECT_NAME':
return new Promise(resolve=>{

2
src/ui_ng/src/app/user/user.component.html
View File

@ -17,7 +17,7 @@
<clr-dg-column>{{'USER.COLUMN_ADMIN' | translate}}</clr-dg-column>
<clr-dg-column>{{'USER.COLUMN_EMAIL' | translate}}</clr-dg-column>
<clr-dg-column>{{'USER.COLUMN_REG_NAME' | translate}}</clr-dg-column>
<clr-dg-row *ngFor="let user of users" [clrDgItem]="user">
<clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
<clr-dg-action-overflow [hidden]="isMySelf(user.user_id)">
<button class="action-item" (click)="changeAdminRole(user)">{{adminActions(user)}}</button>
<button class="action-item" (click)="deleteUser(user)">{{'USER.DEL_ACTION' | translate}}</button>

20
src/ui_ng/src/app/user/user.component.ts
View File

@ -11,7 +11,7 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { Subscription } from 'rxjs/Subscription';
@ -31,8 +31,8 @@ import { AppConfigService } from '../app-config.service';
selector: 'harbor-user',
templateUrl: 'user.component.html',
styleUrls: ['user.component.css'],
providers: [UserService]
providers: [UserService],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent implements OnInit, OnDestroy {
@ -54,7 +54,8 @@ export class UserComponent implements OnInit, OnDestroy {
private deletionDialogService: ConfirmationDialogService,
private msgHandler: MessageHandlerService,
private session: SessionService,
private appConfigService: AppConfigService) {
private appConfigService: AppConfigService,
private ref: ChangeDetectorRef) {
this.deletionSubscription = deletionDialogService.confirmationConfirm$.subscribe(confirmed => {
if (confirmed &&
confirmed.source === ConfirmationTargets.USER &&
@ -62,6 +63,8 @@ export class UserComponent implements OnInit, OnDestroy {
this.delUser(confirmed.data);
}
});
let hnd = setInterval(()=>ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
private isMySelf(uid: number): boolean {
@ -132,6 +135,8 @@ export class UserComponent implements OnInit, OnDestroy {
})
}
});
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
//Disable the admin role for the specified user
@ -159,6 +164,8 @@ export class UserComponent implements OnInit, OnDestroy {
.then(() => {
//Change view now
user.has_admin_role = updatedUser.has_admin_role;
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
})
.catch(error => {
this.msgHandler.handleError(error);
@ -195,6 +202,8 @@ export class UserComponent implements OnInit, OnDestroy {
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);
});
})
.catch(error => {
@ -211,7 +220,6 @@ export class UserComponent implements OnInit, OnDestroy {
this.originalUsers = this.userService.getUsers()
.then(users => {
this.onGoing = false;
this.users = users;
return users;
})
@ -219,6 +227,8 @@ export class UserComponent implements OnInit, OnDestroy {
this.onGoing = false;
this.msgHandler.handleError(error);
});
let hnd = setInterval(()=>this.ref.markForCheck(), 100);
setTimeout(()=>clearInterval(hnd), 1000);
}
//Add new user