+ {{'OPERATION.EVENT_LOG' | translate}}
+
+
diff --git a/src/ui_ng/lib/src/operation/operation.component.ts b/src/ui_ng/lib/src/operation/operation.component.ts
new file mode 100644
index 000000000..c14c7070a
--- /dev/null
+++ b/src/ui_ng/lib/src/operation/operation.component.ts
@@ -0,0 +1,144 @@
+import {Component, OnInit, OnDestroy, HostListener} from '@angular/core';
+import {OperationService} from "./operation.service";
+import {Subscription} from "rxjs/Subscription";
+import {OperateInfo, OperationState} from "./operate";
+import {SlideInOutAnimation} from "../_animations/slide-in-out.animation";
+import {TranslateService} from "@ngx-translate/core";
+
+
+@Component({
+ selector: 'hbr-operation-model',
+ templateUrl: './operation.component.html',
+ styleUrls: ['./operation.component.css'],
+ animations: [SlideInOutAnimation],
+})
+export class OperationComponent implements OnInit, OnDestroy {
+ batchInfoSubscription: Subscription;
+ resultLists: OperateInfo[] = [];
+ animationState = "out";
+
+ @HostListener('window:beforeunload', ['$event'])
+ beforeUnloadHander(event) {
+ // storage to localStorage
+ let timp = new Date().getTime();
+ localStorage.setItem('operaion', JSON.stringify({timp: timp, data: this.resultLists}));
+ }
+
+ constructor(
+ private operationService: OperationService,
+ private translate: TranslateService) {
+
+ this.batchInfoSubscription = operationService.operationInfo$.subscribe(data => {
+ // this.resultLists = data;
+ this.openSlide();
+ if (data) {
+ if (this.resultLists.length >= 50) {
+ this.resultLists.splice(49, this.resultLists.length - 49);
+ }
+ this.resultLists.unshift(data);
+ }
+ });
+ }
+
+ public get runningLists(): OperateInfo[] {
+ let runningList: OperateInfo[] = [];
+ this.resultLists.forEach(data => {
+ if (data.state === 'progressing') {
+ runningList.push(data);
+ }
+ });
+ return runningList;
+ }
+
+ public get failLists(): OperateInfo[] {
+ let failedList: OperateInfo[] = [];
+ this.resultLists.forEach(data => {
+ if (data.state === 'failure') {
+ failedList.push(data);
+ }
+ });
+ return failedList;
+ }
+
+ ngOnInit() {
+ let requestCookie = localStorage.getItem('operaion');
+ if (requestCookie) {
+ let operInfors: any = JSON.parse(requestCookie);
+ if (operInfors) {
+ if ((new Date().getTime() - operInfors.timp) > 1000 * 60 * 60 * 24) {
+ localStorage.removeItem('operaion');
+ }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;
+ }
+ }
+ }
+
+ }
+ }
+ ngOnDestroy(): void {
+ if (this.batchInfoSubscription) {
+ this.batchInfoSubscription.unsubscribe();
+ }
+ }
+
+ toggleTitle(errorSpan: any) {
+ errorSpan.style.display = (errorSpan.style.display === 'none') ? 'block' : 'none';
+ }
+
+ slideOut(): void {
+ this.animationState = this.animationState === 'out' ? 'in' : 'out';
+ }
+
+ openSlide(): void {
+ this.animationState = 'in';
+ }
+
+
+ TabEvent(): void {
+ let timp: any;
+ this.resultLists.forEach(data => {
+ timp = new Date().getTime() - +data.timeStamp;
+ data.timeDiff = this.calculateTime(timp);
+ });
+ }
+
+ calculateTime(timp: number) {
+ let dist = Math.floor(timp / 1000 / 60); // change to minute;
+ if (dist > 0 && dist < 60) {
+ return Math.floor(dist) + ' minute(s) ago';
+ }else if (dist >= 60 && Math.floor(dist / 60) < 24) {
+ return Math.floor(dist / 60) + ' hour(s) ago';
+ } else if (Math.floor(dist / 60) >= 24) {
+ return Math.floor(dist / 60 / 24) + ' day ago';
+ } else {
+ return 'less 1 minute';
+ }
+
+ }
+
+ /*calculateTime(timp: number) {
+ let dist = Math.floor(timp / 1000 / 60); // change to minute;
+ if (dist > 0 && dist < 60) {
+ return this.translateTime('OPERATION.MINUTE_AGO', Math.floor(dist));
+ }else if (dist > 60 && Math.floor(dist / 60) < 24) {
+ return this.translateTime('OPERATION.HOUR_AGO', Math.floor(dist / 60));
+ } else if (Math.floor(dist / 60) >= 24 && Math.floor(dist / 60) <= 48) {
+ return this.translateTime('OPERATION.DAY_AGO', Math.floor(dist / 60 / 24));
+ } else {
+ return this.translateTime('OPERATION.SECOND_AGO');
+ }
+ }*/
+
+ translateTime(tim: string, param?: number) {
+ this.translate.get(tim, { 'param': param }).subscribe((res: string) => {
+ return res;
+ });
+ }
+}
diff --git a/src/ui_ng/lib/src/operation/operation.service.ts b/src/ui_ng/lib/src/operation/operation.service.ts
new file mode 100644
index 000000000..3e81fa0e9
--- /dev/null
+++ b/src/ui_ng/lib/src/operation/operation.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import {OperateInfo} from "./operate";
+
+@Injectable()
+export class OperationService {
+ subjects: Subject
+
+{{'OPERATION.LOCAL_EVENT' | translate}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{list.data.name}}{{list.timeDiff | translate}}
+
+
+
+
+
+
+
+
+
+ {{list.data.name}}{{list.timeDiff | translate}}
+
+
+
+
+
+
+
+
+
+ {{list.data.name}}{{list.timeDiff | translate}}
+
+
+
-
-
-
-
-
-
- {{'REPOSITORY.NAME' | translate}}
- {{'REPOSITORY.TAGS_COUNT' | translate}}
- {{'REPOSITORY.PULL_COUNT' | translate}}
- {{'REPOSITORY.PLACEHOLDER' | translate }}
-
- ![]()
{{r.name}}{{r.tags_count}}
- {{r.pull_count}}
-
-
+
@@ -90,5 +93,5 @@
-
\ No newline at end of file
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.spec.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.spec.ts
index 536447aa7..c73a77582 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.spec.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.spec.ts
@@ -22,6 +22,7 @@ import { PUSH_IMAGE_BUTTON_DIRECTIVES } from '../push-image/index';
import { INLINE_ALERT_DIRECTIVES } from '../inline-alert/index';
import { JobLogViewerComponent } from '../job-log-viewer/index';
import {LabelPieceComponent} from "../label-piece/label-piece.component";
+import {OperationService} from "../operation/operation.service";
describe('RepositoryComponentGridview (inline template)', () => {
@@ -115,7 +116,8 @@ describe('RepositoryComponentGridview (inline template)', () => {
{ provide: SERVICE_CONFIG, useValue: config },
{ provide: RepositoryService, useClass: RepositoryDefaultService },
{ provide: TagService, useClass: TagDefaultService },
- { provide: SystemInfoService, useClass: SystemInfoDefaultService }
+ { provide: SystemInfoService, useClass: SystemInfoDefaultService },
+ { provide: OperationService }
]
});
}));
diff --git a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
index eebaab31c..9b72b4d30 100644
--- a/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
+++ b/src/ui_ng/lib/src/repository-gridview/repository-gridview.component.ts
@@ -1,559 +1,496 @@
import {
- Component,
- Input,
- Output,
- OnInit,
- ViewChild,
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- EventEmitter,
- OnChanges,
- SimpleChanges
+ Component,
+ Input,
+ Output,
+ OnInit,
+ ViewChild,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ EventEmitter,
+ OnChanges,
+ SimpleChanges
} from "@angular/core";
-import { Router } from "@angular/router";
-import { Observable } from "rxjs/Observable";
+import {Router} from "@angular/router";
+import {Observable} from "rxjs/Observable";
import "rxjs/add/observable/forkJoin";
-import { TranslateService } from "@ngx-translate/core";
-import { Comparator, State } from "clarity-angular";
+import {TranslateService} from "@ngx-translate/core";
+import {Comparator, State} from "clarity-angular";
import {
- Repository,
- SystemInfo,
- SystemInfoService,
- RepositoryService,
- RequestQueryParams,
- RepositoryItem,
- TagService
-} from "../service/index";
-import { ErrorHandler } from "../error-handler/error-handler";
-import {
- toPromise,
- CustomComparator,
- DEFAULT_PAGE_SIZE,
- calculatePage,
- doFiltering,
- doSorting,
- clone
-} from "../utils";
-import {
- ConfirmationState,
- ConfirmationTargets,
- ConfirmationButtons
-} from "../shared/shared.const";
-import { ConfirmationDialogComponent } from "../confirmation-dialog/confirmation-dialog.component";
-import { ConfirmationMessage } from "../confirmation-dialog/confirmation-message";
-import { ConfirmationAcknowledgement } from "../confirmation-dialog/confirmation-state-message";
-import { Tag } from "../service/interface";
-import {
- BatchInfo,
- BathInfoChanges
-} from "../confirmation-dialog/confirmation-batch-message";
-import { GridViewComponent } from "../gridview/grid-view.component";
+ Repository,
+ SystemInfo,
+ SystemInfoService,
+ RepositoryService,
+ RequestQueryParams,
+ RepositoryItem,
+ TagService
+} from '../service/index';
+import {ErrorHandler} from '../error-handler/error-handler';
+import {toPromise, CustomComparator, DEFAULT_PAGE_SIZE, calculatePage, doFiltering, doSorting, clone} from '../utils';
+import {ConfirmationState, ConfirmationTargets, ConfirmationButtons} from '../shared/shared.const';
+import {ConfirmationDialogComponent} from '../confirmation-dialog/confirmation-dialog.component';
+import {ConfirmationMessage} from '../confirmation-dialog/confirmation-message';
+import {ConfirmationAcknowledgement} from '../confirmation-dialog/confirmation-state-message';
+import {Tag} from '../service/interface';
+import {GridViewComponent} from '../gridview/grid-view.component';
+import {OperationService} from "../operation/operation.service";
+import {OperateInfo, OperationState, operateChanges} from "../operation/operate";
@Component({
- selector: "hbr-repository-gridview",
- templateUrl: "./repository-gridview.component.html",
- styleUrls: ["./repository-gridview.component.scss"],
- changeDetection: ChangeDetectionStrategy.OnPush
+ selector: "hbr-repository-gridview",
+ templateUrl: "./repository-gridview.component.html",
+ styleUrls: ["./repository-gridview.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class RepositoryGridviewComponent implements OnChanges, OnInit {
- signedCon: { [key: string]: any | string[] } = {};
- @Input() projectId: number;
- @Input() projectName = "unknown";
- @Input() urlPrefix: string;
- @Input() hasSignedIn: boolean;
- @Input() hasProjectAdminRole: boolean;
- @Input() mode = "admiral";
- @Output() repoClickEvent = new EventEmitter
+
+
+
+
+
+
+
+
+ {{'REPOSITORY.NAME' | translate}}
+ {{'REPOSITORY.TAGS_COUNT' | translate}}
+ {{'REPOSITORY.PULL_COUNT' | translate}}
+ {{'REPOSITORY.PLACEHOLDER' | translate }}
+
+ ![]()
{{r.name}}{{r.tags_count}}
+ {{r.pull_count}}
+
+
-
+ {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'REPOSITORY.OF' | translate}}
+ {{pagination.totalItems}} {{'REPOSITORY.ITEMS' | translate}}
+
{{ manifestInfoTitle | translate }}
diff --git a/src/ui_ng/lib/src/tag/tag.component.spec.ts b/src/ui_ng/lib/src/tag/tag.component.spec.ts
index 37909f30a..6f173b33d 100644
--- a/src/ui_ng/lib/src/tag/tag.component.spec.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.spec.ts
@@ -18,6 +18,7 @@ import { JobLogViewerComponent } from '../job-log-viewer/index';
import {CopyInputComponent} from "../push-image/copy-input.component";
import {LabelPieceComponent} from "../label-piece/label-piece.component";
import {LabelDefaultService, LabelService} from "../service/label.service";
+import {OperationService} from "../operation/operation.service";
describe('TagComponent (inline template)', () => {
@@ -112,7 +113,8 @@ describe('TagComponent (inline template)', () => {
{ provide: SERVICE_CONFIG, useValue: config },
{ provide: TagService, useClass: TagDefaultService },
{ provide: ScanningResultService, useClass: ScanningResultDefaultService },
- {provide: LabelService, useClass: LabelDefaultService}
+ {provide: LabelService, useClass: LabelDefaultService},
+ { provide: OperationService }
]
});
}));
diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts
index 36057ef77..82556b06b 100644
--- a/src/ui_ng/lib/src/tag/tag.component.ts
+++ b/src/ui_ng/lib/src/tag/tag.component.ts
@@ -53,11 +53,10 @@ import {
clone,
} from "../utils";
-
import {CopyInputComponent} from "../push-image/copy-input.component";
-import {BatchInfo, BathInfoChanges} from "../confirmation-dialog/confirmation-batch-message";
-
import {LabelService} from "../service/label.service";
+import {operateChanges, OperateInfo, OperationState} from "../operation/operate";
+import {OperationService} from "../operation/operation.service";
export interface LabelState {
iconsShow: boolean;
@@ -97,7 +96,6 @@ export class TagComponent implements OnInit, AfterViewInit {
staticBackdrop = true;
closable = false;
lastFilteredTagName: string;
- batchDelectionInfos: BatchInfo[] = [];
inprogress: boolean;
openLabelFilterPanel: boolean;
openLabelFilterPiece: boolean;
@@ -146,6 +144,7 @@ export class TagComponent implements OnInit, AfterViewInit {
private labelService: LabelService,
private translateService: TranslateService,
private ref: ChangeDetectorRef,
+ private operationService: OperationService,
private channel: ChannelService
) { }
@@ -566,12 +565,8 @@ export class TagComponent implements OnInit, AfterViewInit {
deleteTags(tags: Tag[]) {
if (tags && tags.length) {
let tagNames: string[] = [];
- this.batchDelectionInfos = [];
tags.forEach(tag => {
tagNames.push(tag.name);
- let initBatchMessage = new BatchInfo ();
- initBatchMessage.name = tag.name;
- this.batchDelectionInfos.push(initBatchMessage);
});
let titleKey: string, summaryKey: string, content: string, buttons: ConfirmationButtons;
@@ -598,7 +593,7 @@ export class TagComponent implements OnInit, AfterViewInit {
if (tags && tags.length) {
let promiseLists: any[] = [];
tags.forEach(tag => {
- promiseLists.push(this.delOperate(tag.signature, tag.name));
+ promiseLists.push(this.delOperate(tag));
});
Promise.all(promiseLists).then((item) => {
@@ -609,34 +604,43 @@ export class TagComponent implements OnInit, AfterViewInit {
}
}
- delOperate(signature: any, name: string) {
- let findedList = this.batchDelectionInfos.find(data => data.name === name);
- if (signature) {
+ delOperate(tag: Tag) {
+ // init operation info
+ let operMessage = new OperateInfo();
+ operMessage.name = 'OPERATION.DELETE_TAG';
+ operMessage.data.id = tag.id;
+ operMessage.state = OperationState.progressing;
+ operMessage.data.name = tag.name;
+ this.operationService.publishInfo(operMessage);
+
+ if (tag.signature) {
Observable.forkJoin(this.translateService.get("BATCH.DELETED_FAILURE"),
this.translateService.get("REPOSITORY.DELETION_SUMMARY_TAG_DENIED")).subscribe(res => {
- let wrongInfo: string = res[1] + "notary -s https://" + this.registryUrl + ":4443 -d ~/.docker/trust remove -p " +
- this.registryUrl + "/" + this.repoName + " " + name;
- findedList = BathInfoChanges(findedList, res[0], false, true, wrongInfo);
+ let wrongInfo: string = res[1] + "notary -s https://" + this.registryUrl +
+ ":4443 -d ~/.docker/trust remove -p " +
+ this.registryUrl + "/" + this.repoName +
+ " " + name;
+ operateChanges(operMessage, OperationState.failure, wrongInfo);
});
} else {
return toPromise(this.tagService
- .deleteTag(this.repoName, name))
+ .deleteTag(this.repoName, tag.name))
.then(
response => {
this.translateService.get("BATCH.DELETED_SUCCESS")
.subscribe(res => {
- findedList = BathInfoChanges(findedList, res);
+ operateChanges(operMessage, OperationState.success);
});
}).catch(error => {
if (error.status === 503) {
Observable.forkJoin(this.translateService.get('BATCH.DELETED_FAILURE'),
this.translateService.get('REPOSITORY.TAGS_NO_DELETE')).subscribe(res => {
- findedList = BathInfoChanges(findedList, res[0], false, true, res[1]);
+ operateChanges(operMessage, OperationState.failure, res[1]);
});
return;
}
this.translateService.get("BATCH.DELETED_FAILURE").subscribe(res => {
- findedList = BathInfoChanges(findedList, res, false, true);
+ operateChanges(operMessage, OperationState.failure, res);
});
});
}
diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json
index 45ba52ae7..702f111a5 100644
--- a/src/ui_ng/package.json
+++ b/src/ui_ng/package.json
@@ -32,7 +32,6 @@
"clarity-icons": "^0.10.27",
"clarity-ui": "^0.10.27",
"core-js": "^2.4.1",
- "harbor-ui": "0.7.19-dev.8",
"intl": "^1.2.5",
"mutationobserver-shim": "^0.3.2",
"ngx-cookie": "^1.0.0",
@@ -50,6 +49,7 @@
"bootstrap": "4.0.0-alpha.5",
"codelyzer": "~2.0.0-beta.4",
"enhanced-resolve": "^3.0.0",
+ "harbor-ui": "0.7.19-test-3",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "~1.7.0",
diff --git a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html
index b47b68883..a47bf1940 100644
--- a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html
@@ -49,6 +49,7 @@
+
{{dialogContent}}
-
-
-
-
-
- {{info.name}}
- {{info.status}}
-
- {{info.status}}
- {{info.errorInfo}} - -
-