Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-23 02:35:17 +01: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) {
list.state = state;
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');
});
it('check calculateTime function', () => {
expect(component.calculateTime(1000)).toEqual('less than 1 minute');
expect(component.calculateTime(61000)).toEqual('1 minute(s) ago');
expect(component.calculateTime(3601000)).toEqual('1 hour(s) ago');
expect(component.calculateTime(24 * 3601000)).toEqual('1 day(s) ago');
expect(component.calculateTime(
1000,
'less than 1 minute',
' 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 { OperationService } from "./operation.service";
import { Subscription } from "rxjs";
import { OperateInfo, OperationState } from "./operate";
import { forkJoin, Subscription } from "rxjs";
import { OperateInfo, OperateInfosLocalstorage, OperationState } from "./operate";
import { SlideInOutAnimation } from "../../_animations/slide-in-out.animation";
import { TranslateService } from "@ngx-translate/core";
import { SessionService } from "../../services/session.service";
@ -26,12 +26,11 @@ export class OperationComponent implements OnInit, OnDestroy {
@HostListener('window:beforeunload', ['$event'])
beforeUnloadHander(event) {
if (this.session.getCurrentUser()) {
// storage to localStorage
const timp = new Date().getTime();
// store into localStorage
// group by user id
localStorage.setItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`,
JSON.stringify({
timp: timp,
updated: new Date().getTime(),
data: this.resultLists,
newMessageCount: this._newMessageCount
}));
@ -107,28 +106,27 @@ export class OperationComponent implements OnInit, OnDestroy {
init() {
if (this.session.getCurrentUser()) {
let requestCookie = localStorage.getItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`);
if (requestCookie) {
let operInfors: any = JSON.parse(requestCookie);
if (operInfors) {
if (operInfors.newMessageCount) {
this._newMessageCount = operInfors.newMessageCount;
const operationInfosString: string = localStorage.getItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`);
if (operationInfosString) {
const operationInfos: OperateInfosLocalstorage = JSON.parse(operationInfosString);
if (operationInfos) {
if (operationInfos.newMessageCount) {
this._newMessageCount = operationInfos.newMessageCount;
}
if ((new Date().getTime() - operInfors.timp) > MAX_SAVING_TIME) {
localStorage.removeItem(`${OPERATION_KEY}-${this.session.getCurrentUser().user_id}`);
} else {
if (operInfors.data) {
operInfors.data.forEach(operInfo => {
if (operInfo.state === OperationState.progressing) {
operInfo.state = OperationState.interrupt;
operInfo.data.errorInf = 'operation been interrupted';
}
});
this.resultLists = operInfors.data;
}
if (operationInfos.data && operationInfos.data.length) {
// remove expired items
operationInfos.data = operationInfos.data.filter(item => {
return (new Date().getTime() - item.timeStamp) < MAX_SAVING_TIME;
});
operationInfos.data.forEach(operInfo => {
if (operInfo.state === OperationState.progressing) {
operInfo.state = OperationState.interrupt;
operInfo.data.errorInf = 'operation been interrupted';
}
});
this.resultLists = operationInfos.data;
}
}
}
}
}
@ -167,29 +165,31 @@ export class OperationComponent implements OnInit, OnDestroy {
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 => {
timp = new Date().getTime() - +data.timeStamp;
data.timeDiff = this.calculateTime(timp);
const timeDiff: number = new Date().getTime() - +data.timeStamp;
data.timeDiff = this.calculateTime(timeDiff, secondsAgo, minutesAgo, hoursAgo, daysAgo);
});
}
calculateTime(timp: number) {
let dist = Math.floor(timp / 1000 / 60); // change to minute;
calculateTime(timeDiff: number, s: string, m: string, h: string, d: string) {
const dist = Math.floor(timeDiff / 1000 / 60); // change to minute;
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) {
return Math.floor(dist / 60) + ' hour(s) ago';
return Math.floor(dist / 60) + h;
} else if (Math.floor(dist / 60) >= 24) {
return Math.floor(dist / 60 / 24) + ' day(s) ago';
return Math.floor(dist / 60 / 24) + d;
} else {
return 'less than 1 minute';
return s;
}
}
translateTime(tim: string, param?: number) {
this.translate.get(tim, {'param': param}).subscribe((res: string) => {
return res;
});
}
}