Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2025-02-07 23:41:37 +01:00
Code Issues Projects Releases Wiki Activity

paging user by server for userList UI

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
AllForNothing 2019-08-01 16:16:43 +08:00
parent 75707adeb9
commit 2f3b4f0933
3 changed files with 294 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/portal/src/app/user/user.component.html
View File

@ -9,7 +9,7 @@
</span> </span>
</div> </div>
<div> <div>
<clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="inProgress" [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="SelectedChange()"> <clr-datagrid (clrDgRefresh)="load($event)" [clrDgLoading]="inProgress" [(clrDgSelected)]="selectedRow">
<clr-dg-action-bar> <clr-dg-action-bar>
<button type="button" class="btn btn-sm btn-secondary" (click)="addNewUser()" [disabled]="!canCreateUser"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'USER.ADD_ACTION' | translate}}</button> <button type="button" class="btn btn-sm btn-secondary" (click)="addNewUser()" [disabled]="!canCreateUser"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'USER.ADD_ACTION' | translate}}</button>
<button type="button" class="btn btn-sm btn-secondary" id="set-admin" [disabled]="!ifSameRole" (click)="changeAdminRole()" ><clr-icon shape="wrench" size="16"></clr-icon>&nbsp;{{ISADMNISTRATOR | translate}}</button> <button type="button" class="btn btn-sm btn-secondary" id="set-admin" [disabled]="!ifSameRole" (click)="changeAdminRole()" ><clr-icon shape="wrench" size="16"></clr-icon>&nbsp;{{ISADMNISTRATOR | translate}}</button>
@ -35,7 +35,7 @@
<clr-dg-footer> <clr-dg-footer>
<span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'USER.OF' | translate }}</span> <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'USER.OF' | translate }}</span>
{{pagination.totalItems}} {{'USER.ITEMS' | translate }} {{pagination.totalItems}} {{'USER.ITEMS' | translate }}
<clr-dg-pagination #pagination [clrDgPageSize]="15" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"> <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount">
</clr-dg-pagination> </clr-dg-pagination>
</clr-dg-footer> </clr-dg-footer>
</clr-datagrid> </clr-datagrid>

589
src/portal/src/app/user/user.component.ts
View File

@ -11,13 +11,19 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, OnInit, ViewChild, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Subscription, Observable, forkJoin } from "rxjs"; import { Subscription, Observable, forkJoin } from "rxjs";
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const'; import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../shared/shared.const';
import { operateChanges, OperateInfo, OperationService, OperationState, errorHandler as errorHandFn } from '@harbor/ui'; import {
operateChanges,
OperateInfo,
OperationService,
OperationState,
errorHandler as errorHandFn,
} from '@harbor/ui';
import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service'; import { ConfirmationDialogService } from '../shared/confirmation-dialog/confirmation-dialog.service';
import { ConfirmationMessage } from '../shared/confirmation-dialog/confirmation-message'; import { ConfirmationMessage } from '../shared/confirmation-dialog/confirmation-message';
import { MessageHandlerService } from '../shared/message-handler/message-handler.service'; import { MessageHandlerService } from '../shared/message-handler/message-handler.service';
@ -41,348 +47,305 @@ import { throwError as observableThrowError } from "rxjs";
*/ */
@Component({ @Component({
selector: 'harbor-user', selector: 'harbor-user',
templateUrl: 'user.component.html', templateUrl: 'user.component.html',
styleUrls: ['user.component.scss'], styleUrls: ['user.component.scss'],
providers: [UserService], providers: [UserService],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class UserComponent implements OnInit, OnDestroy { export class UserComponent implements OnInit, OnDestroy {
users: User[] = []; users: User[] = [];
originalUsers: Observable<User[]>; selectedRow: User[] = [];
selectedRow: User[] = []; ISADMNISTRATOR: string = "USER.ENABLE_ADMIN_ACTION";
ISADMNISTRATOR: string = "USER.ENABLE_ADMIN_ACTION";
currentTerm: string; currentTerm: string;
totalCount: number = 0; totalCount: number = 0;
currentPage: number = 1; currentPage: number = 1;
timerHandler: any; pageSize: number = 15;
timerHandler: any;
private onGoing: boolean = true; private onGoing: boolean = true;
private adminMenuText: string = ""; private adminMenuText: string = "";
private adminColumn: string = ""; private adminColumn: string = "";
private deletionSubscription: Subscription; private deletionSubscription: Subscription;
@ViewChild(NewUserModalComponent) @ViewChild(NewUserModalComponent)
newUserDialog: NewUserModalComponent; newUserDialog: NewUserModalComponent;
@ViewChild(ChangePasswordComponent) @ViewChild(ChangePasswordComponent)
changePwdDialog: ChangePasswordComponent; changePwdDialog: ChangePasswordComponent;
constructor( constructor(
private userService: UserService, private userService: UserService,
private translate: TranslateService, private translate: TranslateService,
private deletionDialogService: ConfirmationDialogService, private deletionDialogService: ConfirmationDialogService,
private msgHandler: MessageHandlerService, private msgHandler: MessageHandlerService,
private session: SessionService, private session: SessionService,
private appConfigService: AppConfigService, private appConfigService: AppConfigService,
private operationService: OperationService, private operationService: OperationService) {
private ref: ChangeDetectorRef) { this.deletionSubscription = deletionDialogService.confirmationConfirm$.subscribe(confirmed => {
this.deletionSubscription = deletionDialogService.confirmationConfirm$.subscribe(confirmed => { if (confirmed &&
if (confirmed && confirmed.source === ConfirmationTargets.USER &&
confirmed.source === ConfirmationTargets.USER && confirmed.state === ConfirmationState.CONFIRMED) {
confirmed.state === ConfirmationState.CONFIRMED) { this.delUser(confirmed.data);
this.delUser(confirmed.data); }
} });
});
}
isMySelf(uid: number): boolean {
let currentUser = this.session.getCurrentUser();
if (currentUser) {
if (currentUser.user_id === uid) {
return true;
}
} }
return false; isMySelf(uid: number): boolean {
} let currentUser = this.session.getCurrentUser();
if (currentUser) {
if (currentUser.user_id === uid) {
return true;
}
}
get onlySelf(): boolean {
return this.selectedRow.length === 1 && this.isMySelf(this.selectedRow[0].user_id);
}
public get canCreateUser(): boolean {
let appConfig = this.appConfigService.getConfig();
if (appConfig) {
return !(appConfig.auth_mode === 'ldap_auth' || appConfig.auth_mode === 'uaa_auth' || appConfig.auth_mode === 'oidc_auth');
} else {
return true;
}
}
public get ifSameRole(): boolean {
let usersRole: number[] = [];
this.selectedRow.forEach(user => {
if (user.user_id === 0 || this.isMySelf(user.user_id)) {
return false; return false;
}
if (user.has_admin_role) {
usersRole.push(1);
} else {
usersRole.push(0);
}
});
if (usersRole.length && usersRole.every(num => num === 0)) {
this.ISADMNISTRATOR = 'USER.ENABLE_ADMIN_ACTION';
return true;
}
if (usersRole.length && usersRole.every(num => num === 1)) {
this.ISADMNISTRATOR = 'USER.DISABLE_ADMIN_ACTION';
return true;
}
return false;
}
isSystemAdmin(u: User): string {
if (!u) {
return "{{MISS}}";
}
let key: string = u.has_admin_role ? "USER.IS_ADMIN" : "USER.IS_NOT_ADMIN";
this.translate.get(key).subscribe((res: string) => this.adminColumn = res);
return this.adminColumn;
}
adminActions(u: User): string {
if (!u) {
return "{{MISS}}";
}
let key: string = u.has_admin_role ? "USER.DISABLE_ADMIN_ACTION" : "USER.ENABLE_ADMIN_ACTION";
this.translate.get(key).subscribe((res: string) => this.adminMenuText = res);
return this.adminMenuText;
}
public get inProgress(): boolean {
return this.onGoing;
}
ngOnInit(): void { }
ngOnDestroy(): void {
if (this.deletionSubscription) {
this.deletionSubscription.unsubscribe();
} }
if (this.timerHandler) { get onlySelf(): boolean {
clearInterval(this.timerHandler); return this.selectedRow.length === 1 && this.isMySelf(this.selectedRow[0].user_id);
this.timerHandler = null;
}
}
openChangePwdModal(): void {
if (this.selectedRow.length === 1) {
this.changePwdDialog.open(this.selectedRow[0].user_id);
} }
} public get canCreateUser(): boolean {
let appConfig = this.appConfigService.getConfig();
if (appConfig) {
return !(appConfig.auth_mode === 'ldap_auth' || appConfig.auth_mode === 'uaa_auth' || appConfig.auth_mode === 'oidc_auth');
} else {
return true;
}
}
// Filter items by keywords public get ifSameRole(): boolean {
doFilter(terms: string): void { let usersRole: number[] = [];
this.selectedRow = []; this.selectedRow.forEach(user => {
this.currentTerm = terms; if (user.user_id === 0 || this.isMySelf(user.user_id)) {
this.originalUsers.subscribe(users => { return false;
if (terms.trim() === "") { }
this.refreshUser((this.currentPage - 1) * 15, this.currentPage * 15); if (user.has_admin_role) {
} else { usersRole.push(1);
let selectUsers = users.filter(user => { } else {
return this.isMatchFilterTerm(terms, user.username); usersRole.push(0);
}
}); });
this.totalCount = selectUsers.length; if (usersRole.length && usersRole.every(num => num === 0)) {
this.users = selectUsers.slice((this.currentPage - 1) * 15, this.currentPage * 15); // First page this.ISADMNISTRATOR = 'USER.ENABLE_ADMIN_ACTION';
return true;
this.forceRefreshView(5000);
}
});
}
// Disable the admin role for the specified user
changeAdminRole(): void {
let observableLists: any[] = [];
if (this.selectedRow.length) {
if (this.ISADMNISTRATOR === 'USER.ENABLE_ADMIN_ACTION') {
for (let i = 0; i < this.selectedRow.length; i++) {
// Double confirm user is existing
if (this.selectedRow[i].user_id === 0 || this.isMySelf(this.selectedRow[i].user_id)) {
continue;
}
let updatedUser: User = new User();
updatedUser.user_id = this.selectedRow[i].user_id;
updatedUser.has_admin_role = true; // Set as admin
observableLists.push(this.userService.updateUserRole(updatedUser));
} }
} if (usersRole.length && usersRole.every(num => num === 1)) {
if (this.ISADMNISTRATOR === 'USER.DISABLE_ADMIN_ACTION') { this.ISADMNISTRATOR = 'USER.DISABLE_ADMIN_ACTION';
for (let i = 0; i < this.selectedRow.length; i++) { return true;
// Double confirm user is existing
if (this.selectedRow[i].user_id === 0 || this.isMySelf(this.selectedRow[i].user_id)) {
continue;
}
let updatedUser: User = new User();
updatedUser.user_id = this.selectedRow[i].user_id;
updatedUser.has_admin_role = false; // Set as none admin
observableLists.push(this.userService.updateUserRole(updatedUser));
} }
} return false;
forkJoin(...observableLists).subscribe(() => {
this.selectedRow = [];
this.refresh();
}, error => {
this.selectedRow = [];
this.msgHandler.handleError(error);
});
}
}
// Delete the specified user
deleteUsers(users: User[]): void {
let userArr: string[] = [];
if (this.onlySelf) {
return;
} }
if (users && users.length) { isSystemAdmin(u: User): string {
users.forEach(user => { if (!u) {
userArr.push(user.username); return "{{MISS}}";
}); }
let key: string = u.has_admin_role ? "USER.IS_ADMIN" : "USER.IS_NOT_ADMIN";
this.translate.get(key).subscribe((res: string) => this.adminColumn = res);
return this.adminColumn;
} }
// Confirm deletion
let msg: ConfirmationMessage = new ConfirmationMessage(
"USER.DELETION_TITLE",
"USER.DELETION_SUMMARY",
userArr.join(','),
users,
ConfirmationTargets.USER,
ConfirmationButtons.DELETE_CANCEL
);
this.deletionDialogService.openComfirmDialog(msg);
}
delUser(users: User[]): void { adminActions(u: User): string {
let observableLists: any[] = []; if (!u) {
if (users && users.length) { return "{{MISS}}";
users.forEach(user => { }
observableLists.push(this.delOperate(user)); let key: string = u.has_admin_role ? "USER.DISABLE_ADMIN_ACTION" : "USER.ENABLE_ADMIN_ACTION";
}); this.translate.get(key).subscribe((res: string) => this.adminMenuText = res);
return this.adminMenuText;
}
forkJoin(...observableLists).subscribe((item) => { public get inProgress(): boolean {
return this.onGoing;
}
ngOnInit(): void {
}
ngOnDestroy(): void {
if (this.deletionSubscription) {
this.deletionSubscription.unsubscribe();
}
if (this.timerHandler) {
clearInterval(this.timerHandler);
this.timerHandler = null;
}
}
openChangePwdModal(): void {
if (this.selectedRow.length === 1) {
this.changePwdDialog.open(this.selectedRow[0].user_id);
}
}
// Filter items by keywords
doFilter(terms: string): void {
this.selectedRow = []; this.selectedRow = [];
this.currentTerm = terms.trim();
this.currentPage = 1;
this.onGoing = true;
this.getUserListByPaging();
}
// Disable the admin role for the specified user
changeAdminRole(): void {
let observableLists: any[] = [];
if (this.selectedRow.length) {
if (this.ISADMNISTRATOR === 'USER.ENABLE_ADMIN_ACTION') {
for (let i = 0; i < this.selectedRow.length; i++) {
// Double confirm user is existing
if (this.selectedRow[i].user_id === 0 || this.isMySelf(this.selectedRow[i].user_id)) {
continue;
}
let updatedUser: User = new User();
updatedUser.user_id = this.selectedRow[i].user_id;
updatedUser.has_admin_role = true; // Set as admin
observableLists.push(this.userService.updateUserRole(updatedUser));
}
}
if (this.ISADMNISTRATOR === 'USER.DISABLE_ADMIN_ACTION') {
for (let i = 0; i < this.selectedRow.length; i++) {
// Double confirm user is existing
if (this.selectedRow[i].user_id === 0 || this.isMySelf(this.selectedRow[i].user_id)) {
continue;
}
let updatedUser: User = new User();
updatedUser.user_id = this.selectedRow[i].user_id;
updatedUser.has_admin_role = false; // Set as none admin
observableLists.push(this.userService.updateUserRole(updatedUser));
}
}
forkJoin(...observableLists).subscribe(() => {
this.selectedRow = [];
this.refresh();
}, error => {
this.selectedRow = [];
this.msgHandler.handleError(error);
});
}
}
// Delete the specified user
deleteUsers(users: User[]): void {
let userArr: string[] = [];
if (this.onlySelf) {
return;
}
if (users && users.length) {
users.forEach(user => {
userArr.push(user.username);
});
}
// Confirm deletion
let msg: ConfirmationMessage = new ConfirmationMessage(
"USER.DELETION_TITLE",
"USER.DELETION_SUMMARY",
userArr.join(','),
users,
ConfirmationTargets.USER,
ConfirmationButtons.DELETE_CANCEL
);
this.deletionDialogService.openComfirmDialog(msg);
}
delUser(users: User[]): void {
let observableLists: any[] = [];
if (users && users.length) {
users.forEach(user => {
observableLists.push(this.delOperate(user));
});
forkJoin(...observableLists).subscribe((item) => {
this.selectedRow = [];
this.currentTerm = '';
this.refresh();
});
}
}
delOperate(user: User): Observable<any> {
// init operation info
let operMessage = new OperateInfo();
operMessage.name = 'OPERATION.DELETE_USER';
operMessage.data.id = user.user_id;
operMessage.state = OperationState.progressing;
operMessage.data.name = user.username;
this.operationService.publishInfo(operMessage);
if (this.isMySelf(user.user_id)) {
return this.translate.get('BATCH.DELETED_FAILURE').pipe(map(res => {
operateChanges(operMessage, OperationState.failure, res);
}));
}
return this.userService.deleteUser(user.user_id).pipe(map(() => {
this.translate.get('BATCH.DELETED_SUCCESS').subscribe(res => {
operateChanges(operMessage, OperationState.success);
});
}), catchError(error => {
const message = errorHandFn(error);
this.translate.get(message).subscribe(res =>
operateChanges(operMessage, OperationState.failure, res)
);
return observableThrowError(message);
}));
}
// Refresh the user list
refreshUser(): void {
this.selectedRow = [];
// Start to get
this.currentTerm = ''; this.currentTerm = '';
this.onGoing = true;
this.getUserListByPaging();
}
// Add new user
addNewUser(): void {
if (!this.canCreateUser) {
return; // No response to this hacking action
}
this.newUserDialog.open();
}
// Add user to the user list
addUserToList(user: User): void {
// Currently we can only add it by reloading all
this.refresh(); this.refresh();
});
}
}
delOperate(user: User): Observable<any> {
// init operation info
let operMessage = new OperateInfo();
operMessage.name = 'OPERATION.DELETE_USER';
operMessage.data.id = user.user_id;
operMessage.state = OperationState.progressing;
operMessage.data.name = user.username;
this.operationService.publishInfo(operMessage);
if (this.isMySelf(user.user_id)) {
return this.translate.get('BATCH.DELETED_FAILURE').pipe(map(res => {
operateChanges(operMessage, OperationState.failure, res);
}));
} }
return this.userService.deleteUser(user.user_id).pipe(map(() => { // Data loading
this.translate.get('BATCH.DELETED_SUCCESS').subscribe(res => { load(state: any): void {
operateChanges(operMessage, OperationState.success); this.selectedRow = [];
}); this.onGoing = true;
}), catchError(error => { this.getUserListByPaging();
const message = errorHandFn(error);
this.translate.get(message).subscribe(res =>
operateChanges(operMessage, OperationState.failure, res)
);
return observableThrowError(message);
}));
}
// Refresh the user list
refreshUser(from: number, to: number): void {
this.selectedRow = [];
// Start to get
this.currentTerm = '';
this.onGoing = true;
this.originalUsers = this.userService.getUsers();
this.originalUsers.subscribe(users => {
this.onGoing = false;
this.totalCount = users.length;
this.users = users.slice(from, to); // First page
this.forceRefreshView(5000);
return users;
}, error => {
this.onGoing = false;
this.msgHandler.handleError(error);
this.forceRefreshView(5000);
});
}
// Add new user
addNewUser(): void {
if (!this.canCreateUser) {
return; // No response to this hacking action
} }
this.newUserDialog.open();
}
// Add user to the user list refresh(): void {
addUserToList(user: User): void { this.currentPage = 1; // Refresh pagination
// Currently we can only add it by reloading all this.refreshUser();
this.refresh();
}
// Data loading
load(state: any): void {
this.selectedRow = [];
if (state && state.page) {
if (this.originalUsers) {
this.originalUsers.subscribe(users => {
this.users = users.slice(state.page.from, state.page.to + 1);
});
this.forceRefreshView(5000);
} else {
this.refreshUser(state.page.from, state.page.to + 1);
}
} else {
// Refresh
this.refresh();
} }
}
refresh(): void { getUserListByPaging() {
this.currentPage = 1; // Refresh pagination this.userService.getUserListByPaging(this.currentPage, this.pageSize, this.currentTerm)
this.refreshUser(0, 15); .subscribe(response => {
} // Get total count
if (response.headers) {
SelectedChange(): void { let xHeader: string = response.headers.get("X-Total-Count");
this.forceRefreshView(5000); if (xHeader) {
} this.totalCount = parseInt(xHeader, 0);
}
forceRefreshView(duration: number): void { }
// Reset timer this.users = response.body as User[];
if (this.timerHandler) { this.onGoing = false;
clearInterval(this.timerHandler); }, error => {
this.msgHandler.handleError(error);
this.onGoing = false;
});
} }
this.timerHandler = setInterval(() => this.ref.markForCheck(), 100);
setTimeout(() => {
if (this.timerHandler) {
clearInterval(this.timerHandler);
this.timerHandler = null;
}
}, duration);
}
private isMatchFilterTerm(terms: string, testedItem: string): boolean {
return testedItem.toLowerCase().indexOf(terms.toLowerCase()) !== -1;
}
} }

19
src/portal/src/app/user/user.service.ts
View File

@ -12,14 +12,15 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
import { map, catchError } from "rxjs/operators"; import { map, catchError } from "rxjs/operators";
import { Observable, throwError as observableThrowError } from "rxjs"; import { Observable, throwError as observableThrowError } from "rxjs";
import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS} from "@harbor/ui"; import {HTTP_JSON_OPTIONS, HTTP_GET_OPTIONS, buildHttpRequestOptionsWithObserveResponse} from "@harbor/ui";
import { User, LDAPUser } from './user'; import { User, LDAPUser } from './user';
import LDAPUsertoUser from './user'; import LDAPUsertoUser from './user';
const userMgmtEndpoint = '/api/users'; const userMgmtEndpoint = '/api/users';
const userListSearch = '/api/users/search?'; const userListSearch = '/api/users/search?';
const ldapUserEndpoint = '/api/ldap/users'; const ldapUserEndpoint = '/api/ldap/users';
@ -34,7 +35,19 @@ const ldapUserEndpoint = '/api/ldap/users';
export class UserService { export class UserService {
constructor(private http: HttpClient) { } constructor(private http: HttpClient) { }
// Get paging user list
getUserListByPaging(page: number, pageSize: number, username?: string) {
let params = new HttpParams();
if (page && pageSize) {
params = params.set('page', page + '').set('page_size', pageSize + '');
}
if (username) {
params = params.set('username', username);
}
return this.http
.get<HttpResponse<User[]>>(userMgmtEndpoint, buildHttpRequestOptionsWithObserveResponse(params)).pipe(
catchError(error => observableThrowError(error)), );
}
// Handle the related exceptions // Handle the related exceptions
handleError(error: any): Observable<any> { handleError(error: any): Observable<any> {
return observableThrowError(error.error || error); return observableThrowError(error.error || error);