Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-10-05 00:37:32 +02:00
Code Issues Projects Releases Wiki Activity

Improve event log component (#15191)

Browse Source 
Signed-off-by: AllForNothing <sshijun@vmware.com>
This commit is contained in:
孙世军 2021-06-29 18:15:17 +08:00 committed by GitHub
parent 2a3b91a11a
commit ff11cbafa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 66 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/portal/src/app/shared/components/operation/operate.ts
View File

@ -13,6 +13,12 @@ export class OperateInfo {
} }
} }
export interface OperateInfosLocalstorage {
updated: number; // millisecond
data: OperateInfo[];
newMessageCount: number;
}
export function operateChanges(list: OperateInfo, state?: string, errorInfo?: string, timeStamp?: 0) { export function operateChanges(list: OperateInfo, state?: string, errorInfo?: string, timeStamp?: 0) {
list.state = state; list.state = state;
list.data.errorInf = errorInfo; list.data.errorInf = errorInfo;

25
src/portal/src/app/shared/components/operation/operation.component.spec.ts
View File

@ -65,9 +65,26 @@ describe('OperationComponent', () => {
expect(errorSpan.style.display).toEqual('none'); expect(errorSpan.style.display).toEqual('none');
}); });
it('check calculateTime function', () => { it('check calculateTime function', () => {
expect(component.calculateTime(1000)).toEqual('less than 1 minute'); expect(component.calculateTime(
expect(component.calculateTime(61000)).toEqual('1 minute(s) ago'); 1000,
expect(component.calculateTime(3601000)).toEqual('1 hour(s) ago'); 'less than 1 minute',
expect(component.calculateTime(24 * 3601000)).toEqual('1 day(s) ago'); ' minute(s) ago',
' hour(s) ago',
' day(s) ago')).toEqual('less than 1 minute');
expect(component.calculateTime(61000,
'less than 1 minute',
' minute(s) ago',
' hour(s) ago',
' day(s) ago')).toEqual('1 minute(s) ago');
expect(component.calculateTime(3601000,
'less than 1 minute',
' minute(s) ago',
' hour(s) ago',
' day(s) ago')).toEqual('1 hour(s) ago');
expect(component.calculateTime(24 * 3601000,
'less than 1 minute',
' minute(s) ago',
' hour(s) ago',
' day(s) ago')).toEqual('1 day(s) ago');
}); });
}); });

78
src/portal/src/app/shared/components/operation/operation.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
import { OperationService } from "./operation.service"; import { OperationService } from "./operation.service";
import { Subscription } from "rxjs"; import { forkJoin, Subscription } from "rxjs";
import { OperateInfo, OperationState } from "./operate"; import { OperateInfo, OperateInfosLocalstorage, OperationState } from "./operate";
import { SlideInOutAnimation } from "../../_animations/slide-in-out.animation"; import { SlideInOutAnimation } from "../../_animations/slide-in-out.animation";
import { TranslateService } from "@ngx-translate/core"; import { TranslateService } from "@ngx-translate/core";
import { SessionService } from "../../services/session.service"; import { SessionService } from "../../services/session.service";
@ -26,12 +26,11 @@ export class OperationComponent implements OnInit, OnDestroy {
@HostListener('window:beforeunload', ['$event']) @HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) { beforeUnloadHander(event) {
if (this.session.getCurrentUser()) { if (this.session.getCurrentUser()) {
// storage to localStorage // store into localStorage
const timp = new Date().getTime();
// group by user id // group by user id
localStorage.setItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`, localStorage.setItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`,
JSON.stringify({ JSON.stringify({
timp: timp, updated: new Date().getTime(),
data: this.resultLists, data: this.resultLists,
newMessageCount: this._newMessageCount newMessageCount: this._newMessageCount
})); }));
@ -107,28 +106,27 @@ export class OperationComponent implements OnInit, OnDestroy {
init() { init() {
if (this.session.getCurrentUser()) { if (this.session.getCurrentUser()) {
let requestCookie = localStorage.getItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`); const operationInfosString: string = localStorage.getItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`);
if (requestCookie) { if (operationInfosString) {
let operInfors: any = JSON.parse(requestCookie); const operationInfos: OperateInfosLocalstorage = JSON.parse(operationInfosString);
if (operInfors) { if (operationInfos) {
if (operInfors.newMessageCount) { if (operationInfos.newMessageCount) {
this._newMessageCount = operInfors.newMessageCount; this._newMessageCount = operationInfos.newMessageCount;
} }
if ((new Date().getTime() - operInfors.timp) > MAX_SAVING_TIME) { if (operationInfos.data && operationInfos.data.length) {
localStorage.removeItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`); // remove expired items
} else { operationInfos.data = operationInfos.data.filter(item => {
if (operInfors.data) { return (new Date().getTime() - item.timeStamp) < MAX_SAVING_TIME;
operInfors.data.forEach(operInfo => { });
if (operInfo.state === OperationState.progressing) { operationInfos.data.forEach(operInfo => {
operInfo.state = OperationState.interrupt; if (operInfo.state === OperationState.progressing) {
operInfo.data.errorInf = 'operation been interrupted'; operInfo.state = OperationState.interrupt;
} operInfo.data.errorInf = 'operation been interrupted';
}); }
this.resultLists = operInfors.data; });
} this.resultLists = operationInfos.data;
} }
} }
} }
} }
} }
@ -167,29 +165,31 @@ export class OperationComponent implements OnInit, OnDestroy {
TabEvent(): void { TabEvent(): void {
let timp: any; let secondsAgo: string, minutesAgo: string, hoursAgo: string, daysAgo: string;
forkJoin([
this.translate.get("OPERATION.SECOND_AGO"),
this.translate.get("OPERATION.MINUTE_AGO"),
this.translate.get("OPERATION.HOUR_AGO"),
this.translate.get("OPERATION.DAY_AGO"),
]).subscribe(res => {
[secondsAgo, minutesAgo, hoursAgo, daysAgo] = res;
});
this.resultLists.forEach(data => { this.resultLists.forEach(data => {
timp = new Date().getTime() - +data.timeStamp; const timeDiff: number = new Date().getTime() - +data.timeStamp;
data.timeDiff = this.calculateTime(timp); data.timeDiff = this.calculateTime(timeDiff, secondsAgo, minutesAgo, hoursAgo, daysAgo);
}); });
} }
calculateTime(timp: number) { calculateTime(timeDiff: number, s: string, m: string, h: string, d: string) {
let dist = Math.floor(timp / 1000 / 60); // change to minute; const dist = Math.floor(timeDiff / 1000 / 60); // change to minute;
if (dist > 0 && dist < 60) { if (dist > 0 && dist < 60) {
return Math.floor(dist) + ' minute(s) ago'; return Math.floor(dist) + m;
} else if (dist >= 60 && Math.floor(dist / 60) < 24) { } else if (dist >= 60 && Math.floor(dist / 60) < 24) {
return Math.floor(dist / 60) + ' hour(s) ago'; return Math.floor(dist / 60) + h;
} else if (Math.floor(dist / 60) >= 24) { } else if (Math.floor(dist / 60) >= 24) {
return Math.floor(dist / 60 / 24) + ' day(s) ago'; return Math.floor(dist / 60 / 24) + d;
} else { } else {
return 'less than 1 minute'; return s;
} }
} }
translateTime(tim: string, param?: number) {
this.translate.get(tim, {'param': param}).subscribe((res: string) => {
return res;
});
}
} }