mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-25 16:59:17 +01:00
AC-2410 Migrate Events Component (#8970)
* AC-2410 Migrate Events Component * AC-2410 Addressed a minor correction
This commit is contained in:
parent
ad3c40297f
commit
dd53a1c5ce
@ -1,4 +1,5 @@
|
||||
import { Directive } from "@angular/core";
|
||||
import { FormControl, FormGroup } from "@angular/forms";
|
||||
|
||||
import { EventResponse } from "@bitwarden/common/models/response/event.response";
|
||||
import { ListResponse } from "@bitwarden/common/models/response/list.response";
|
||||
@ -16,16 +17,16 @@ export abstract class BaseEventsComponent {
|
||||
loading = true;
|
||||
loaded = false;
|
||||
events: EventView[];
|
||||
start: string;
|
||||
end: string;
|
||||
dirtyDates = true;
|
||||
continuationToken: string;
|
||||
refreshPromise: Promise<any>;
|
||||
exportPromise: Promise<any>;
|
||||
morePromise: Promise<any>;
|
||||
|
||||
abstract readonly exportFileName: string;
|
||||
|
||||
protected eventsForm = new FormGroup({
|
||||
start: new FormControl(null),
|
||||
end: new FormControl(null),
|
||||
});
|
||||
|
||||
constructor(
|
||||
protected eventService: EventService,
|
||||
protected i18nService: I18nService,
|
||||
@ -39,8 +40,32 @@ export abstract class BaseEventsComponent {
|
||||
this.end = defaultDates[1];
|
||||
}
|
||||
|
||||
async exportEvents() {
|
||||
if (this.appApiPromiseUnfulfilled() || this.dirtyDates) {
|
||||
get start(): string {
|
||||
return this.eventsForm.value.start;
|
||||
}
|
||||
|
||||
set start(val: string) {
|
||||
this.eventsForm.get("start").setValue(val);
|
||||
}
|
||||
|
||||
get end(): string {
|
||||
return this.eventsForm.value.end;
|
||||
}
|
||||
|
||||
set end(val: string) {
|
||||
this.eventsForm.get("end").setValue(val);
|
||||
}
|
||||
|
||||
loadMoreEvents = async () => {
|
||||
await this.loadEvents(false);
|
||||
};
|
||||
|
||||
refreshEvents = async () => {
|
||||
await this.loadEvents(true);
|
||||
};
|
||||
|
||||
exportEvents = async () => {
|
||||
if (this.dirtyDates) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -51,23 +76,19 @@ export abstract class BaseEventsComponent {
|
||||
return;
|
||||
}
|
||||
|
||||
let promise: Promise<any>;
|
||||
try {
|
||||
this.exportPromise = this.export(dates[0], dates[1]);
|
||||
|
||||
await this.exportPromise;
|
||||
promise = this.export(dates[0], dates[1]);
|
||||
await promise;
|
||||
} catch (e) {
|
||||
this.logService.error(`Handled exception: ${e}`);
|
||||
}
|
||||
|
||||
this.exportPromise = null;
|
||||
promise = null;
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
async loadEvents(clearExisting: boolean) {
|
||||
if (this.appApiPromiseUnfulfilled()) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
loadEvents = async (clearExisting: boolean) => {
|
||||
const dates = this.parseDates();
|
||||
if (dates == null) {
|
||||
return;
|
||||
@ -75,17 +96,14 @@ export abstract class BaseEventsComponent {
|
||||
|
||||
this.loading = true;
|
||||
let events: EventView[] = [];
|
||||
let promise: Promise<any>;
|
||||
try {
|
||||
const promise = this.loadAndParseEvents(
|
||||
promise = this.loadAndParseEvents(
|
||||
dates[0],
|
||||
dates[1],
|
||||
clearExisting ? null : this.continuationToken,
|
||||
);
|
||||
if (clearExisting) {
|
||||
this.refreshPromise = promise;
|
||||
} else {
|
||||
this.morePromise = promise;
|
||||
}
|
||||
|
||||
const result = await promise;
|
||||
this.continuationToken = result.continuationToken;
|
||||
events = result.events;
|
||||
@ -101,9 +119,8 @@ export abstract class BaseEventsComponent {
|
||||
|
||||
this.dirtyDates = false;
|
||||
this.loading = false;
|
||||
this.morePromise = null;
|
||||
this.refreshPromise = null;
|
||||
}
|
||||
promise = null;
|
||||
};
|
||||
|
||||
protected abstract requestEvents(
|
||||
startDate: string,
|
||||
@ -161,10 +178,6 @@ export abstract class BaseEventsComponent {
|
||||
return dates;
|
||||
}
|
||||
|
||||
protected appApiPromiseUnfulfilled() {
|
||||
return this.refreshPromise != null || this.morePromise != null || this.exportPromise != null;
|
||||
}
|
||||
|
||||
private async export(start: string, end: string) {
|
||||
let continuationToken = this.continuationToken;
|
||||
let events = [].concat(this.events);
|
||||
|
@ -1,6 +1,6 @@
|
||||
<app-header></app-header>
|
||||
|
||||
<div class="tw-mb-4">
|
||||
<div class="tw-mb-4" [formGroup]="eventsForm">
|
||||
<div class="tw-mt-4 tw-flex tw-items-center">
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "from" | i18n }}</bit-label>
|
||||
@ -8,7 +8,7 @@
|
||||
bitInput
|
||||
type="datetime-local"
|
||||
placeholder="{{ 'startDate' | i18n }}"
|
||||
[(ngModel)]="start"
|
||||
formControlName="start"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
</bit-form-field>
|
||||
@ -19,51 +19,44 @@
|
||||
bitInput
|
||||
type="datetime-local"
|
||||
placeholder="{{ 'endDate' | i18n }}"
|
||||
[(ngModel)]="end"
|
||||
formControlName="end"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
</bit-form-field>
|
||||
<form #refreshForm [appApiAction]="refreshPromise">
|
||||
<form>
|
||||
<button
|
||||
class="tw-mx-3 tw-mt-1"
|
||||
type="button"
|
||||
bitButton
|
||||
bitFormButton
|
||||
buttonType="primary"
|
||||
(click)="loadEvents(true)"
|
||||
[disabled]="loaded && refreshForm.loading"
|
||||
[bitAction]="refreshEvents"
|
||||
>
|
||||
{{ "update" | i18n }}
|
||||
</button>
|
||||
</form>
|
||||
<form #exportForm [appApiAction]="exportPromise">
|
||||
<form>
|
||||
<button
|
||||
type="button"
|
||||
class="tw-mt-1"
|
||||
bitButton
|
||||
[ngClass]="{ loading: exportForm.loading }"
|
||||
(click)="exportEvents()"
|
||||
[disabled]="(loaded && exportForm.loading) || dirtyDates"
|
||||
bitFormButton
|
||||
[bitAction]="exportEvents"
|
||||
[disabled]="dirtyDates"
|
||||
>
|
||||
<span>{{ "export" | i18n }}</span>
|
||||
<i
|
||||
class="bwi bwi-fw"
|
||||
aria-hidden="true"
|
||||
[ngClass]="{
|
||||
'bwi-sign-in': !exportForm.loading,
|
||||
'bwi-spinner bwi-spin': exportForm.loading
|
||||
}"
|
||||
></i>
|
||||
<i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="loaded">
|
||||
<p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
|
||||
@ -90,21 +83,12 @@
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
<button
|
||||
#moreBtn
|
||||
[appApiAction]="morePromise"
|
||||
type="button"
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
(click)="loadEvents(false)"
|
||||
[disabled]="loaded && $any(moreBtn).loading"
|
||||
[bitAction]="loadMoreEvents"
|
||||
*ngIf="continuationToken"
|
||||
>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
*ngIf="moreBtn.loading"
|
||||
></i>
|
||||
<span>{{ "loadMore" | i18n }}</span>
|
||||
{{ "loadMore" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
@ -108,7 +108,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit, OnDe
|
||||
}
|
||||
}
|
||||
|
||||
await this.loadEvents(true);
|
||||
await this.refreshEvents();
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
|
@ -1,104 +1,97 @@
|
||||
<app-header></app-header>
|
||||
|
||||
<div class="ml-auto d-flex">
|
||||
<div class="form-inline">
|
||||
<label class="sr-only" for="start">{{ "startDate" | i18n }}</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
class="form-control form-control-sm"
|
||||
id="start"
|
||||
placeholder="{{ 'startDate' | i18n }}"
|
||||
[(ngModel)]="start"
|
||||
placeholder="YYYY-MM-DDTHH:MM"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
<span class="mx-2">-</span>
|
||||
<label class="sr-only" for="end">{{ "endDate" | i18n }}</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
class="form-control form-control-sm"
|
||||
id="end"
|
||||
placeholder="{{ 'endDate' | i18n }}"
|
||||
[(ngModel)]="end"
|
||||
placeholder="YYYY-MM-DDTHH:MM"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
<div class="tw-mb-4" [formGroup]="eventsForm">
|
||||
<div class="tw-mt-4 tw-flex tw-items-center">
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "startDate" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="datetime-local"
|
||||
placeholder="{{ 'startDate' | i18n }}"
|
||||
formControlName="start"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
</bit-form-field>
|
||||
<span class="tw-mx-2">-</span>
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "endDate" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="datetime-local"
|
||||
placeholder="{{ 'endDate' | i18n }}"
|
||||
formControlName="end"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
</bit-form-field>
|
||||
<form>
|
||||
<button
|
||||
class="tw-mx-3 tw-mt-1"
|
||||
type="button"
|
||||
bitButton
|
||||
bitFormButton
|
||||
buttonType="primary"
|
||||
[bitAction]="refreshEvents"
|
||||
>
|
||||
{{ "refresh" | i18n }}
|
||||
</button>
|
||||
</form>
|
||||
<form>
|
||||
<button
|
||||
type="button"
|
||||
class="tw-mt-1"
|
||||
bitButton
|
||||
bitFormButton
|
||||
[bitAction]="exportEvents"
|
||||
[disabled]="dirtyDates"
|
||||
>
|
||||
<span>{{ "export" | i18n }}</span>
|
||||
<i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<form #refreshForm [appApiAction]="refreshPromise" class="d-inline">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary ml-3"
|
||||
(click)="loadEvents(true)"
|
||||
[disabled]="loaded && refreshForm.loading"
|
||||
>
|
||||
<i
|
||||
class="bwi bwi-refresh bwi-fw"
|
||||
aria-hidden="true"
|
||||
[ngClass]="{ 'bwi-spin': loaded && refreshForm.loading }"
|
||||
></i>
|
||||
{{ "refresh" | i18n }}
|
||||
</button>
|
||||
</form>
|
||||
<form #exportForm [appApiAction]="exportPromise" class="d-inline">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-primary btn-submit manual ml-3"
|
||||
[ngClass]="{ loading: exportForm.loading }"
|
||||
(click)="exportEvents()"
|
||||
[disabled]="(loaded && exportForm.loading) || dirtyDates"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i>
|
||||
<span>{{ "export" | i18n }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="loaded">
|
||||
<p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
|
||||
<table class="table table-hover" *ngIf="events && events.length">
|
||||
<thead>
|
||||
<bit-table *ngIf="events && events.length">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th class="border-top-0" width="210">{{ "timestamp" | i18n }}</th>
|
||||
<th class="border-top-0" width="40">
|
||||
<span class="sr-only">{{ "device" | i18n }}</span>
|
||||
</th>
|
||||
<th class="border-top-0" width="150">{{ "user" | i18n }}</th>
|
||||
<th class="border-top-0">{{ "event" | i18n }}</th>
|
||||
<th bitCell>{{ "timestamp" | i18n }}</th>
|
||||
<th bitCell>{{ "device" | i18n }}</th>
|
||||
<th bitCell>{{ "user" | i18n }}</th>
|
||||
<th bitCell>{{ "event" | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let e of events">
|
||||
<td>{{ e.date | date: "medium" }}</td>
|
||||
<td>
|
||||
</ng-container>
|
||||
<ng-template body>
|
||||
<tr bitRow *ngFor="let e of events" alignContent="top">
|
||||
<td bitCell class="tw-whitespace-nowrap">{{ e.date | date: "medium" }}</td>
|
||||
<td bitCell>
|
||||
<i
|
||||
class="text-muted bwi bwi-lg {{ e.appIcon }}"
|
||||
class="tw-text-muted bwi bwi-lg {{ e.appIcon }}"
|
||||
title="{{ e.appName }}, {{ e.ip }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ e.appName }}, {{ e.ip }}</span>
|
||||
<span class="tw-sr-only">{{ e.appName }}, {{ e.ip }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<td bitCell>
|
||||
<span title="{{ e.userEmail }}">{{ e.userName }}</span>
|
||||
</td>
|
||||
<td [innerHTML]="e.message"></td>
|
||||
<td bitCell [innerHTML]="e.message"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
<button
|
||||
#moreBtn
|
||||
[appApiAction]="morePromise"
|
||||
bitButton
|
||||
type="button"
|
||||
class="btn btn-block btn-link btn-submit"
|
||||
(click)="loadEvents(false)"
|
||||
[disabled]="loaded && $any(moreBtn).loading"
|
||||
buttonType="primary"
|
||||
[bitAction]="loadMoreEvents"
|
||||
*ngIf="continuationToken"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
|
@ -70,7 +70,7 @@ export class EventsComponent extends BaseEventsComponent implements OnInit {
|
||||
this.providerUsersIdMap.set(u.id, { name: name, email: u.email });
|
||||
this.providerUsersUserIdMap.set(u.userId, { name: name, email: u.email });
|
||||
});
|
||||
await this.loadEvents(true);
|
||||
await this.refreshEvents();
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
|
@ -1,13 +1,13 @@
|
||||
<div class="tw-mb-4">
|
||||
<h1>{{ "eventLogs" | i18n }}</h1>
|
||||
<div class="tw-mt-4 tw-flex tw-items-center">
|
||||
<div class="tw-mt-4 tw-flex tw-items-center" [formGroup]="eventsForm">
|
||||
<bit-form-field>
|
||||
<bit-label>{{ "from" | i18n }}</bit-label>
|
||||
<input
|
||||
bitInput
|
||||
type="datetime-local"
|
||||
placeholder="{{ 'startDate' | i18n }}"
|
||||
[(ngModel)]="start"
|
||||
formControlName="start"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
</bit-form-field>
|
||||
@ -18,51 +18,43 @@
|
||||
bitInput
|
||||
type="datetime-local"
|
||||
placeholder="{{ 'endDate' | i18n }}"
|
||||
[(ngModel)]="end"
|
||||
formControlName="end"
|
||||
(change)="dirtyDates = true"
|
||||
/>
|
||||
</bit-form-field>
|
||||
<form #refreshForm [appApiAction]="refreshPromise">
|
||||
<form>
|
||||
<button
|
||||
class="tw-mx-3 tw-mt-1"
|
||||
type="button"
|
||||
bitButton
|
||||
bitFormButton
|
||||
buttonType="primary"
|
||||
(click)="loadEvents(true)"
|
||||
[disabled]="loaded && refreshForm.loading"
|
||||
[bitAction]="refreshEvents"
|
||||
>
|
||||
{{ "update" | i18n }}
|
||||
</button>
|
||||
</form>
|
||||
<form #exportForm [appApiAction]="exportPromise">
|
||||
<form>
|
||||
<button
|
||||
type="button"
|
||||
class="tw-mt-1"
|
||||
bitButton
|
||||
[ngClass]="{ loading: exportForm.loading }"
|
||||
(click)="exportEvents()"
|
||||
[disabled]="(loaded && exportForm.loading) || dirtyDates"
|
||||
[bitAction]="exportEvents"
|
||||
[disabled]="dirtyDates"
|
||||
>
|
||||
<span>{{ "export" | i18n }}</span>
|
||||
<i
|
||||
class="bwi bwi-fw"
|
||||
aria-hidden="true"
|
||||
[ngClass]="{
|
||||
'bwi-sign-in': !exportForm.loading,
|
||||
'bwi-spinner bwi-spin': exportForm.loading
|
||||
}"
|
||||
></i>
|
||||
<i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="!loaded">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
class="bwi bwi-spinner bwi-spin tw-text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="loaded">
|
||||
<p *ngIf="!events || !events.length">{{ "noEventsInList" | i18n }}</p>
|
||||
@ -85,21 +77,12 @@
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
<button
|
||||
#moreBtn
|
||||
[appApiAction]="morePromise"
|
||||
type="button"
|
||||
bitButton
|
||||
buttonType="primary"
|
||||
(click)="loadEvents(false)"
|
||||
[disabled]="loaded && $any(moreBtn).loading"
|
||||
[bitAction]="loadMoreEvents"
|
||||
*ngIf="continuationToken"
|
||||
>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
*ngIf="moreBtn.loading"
|
||||
></i>
|
||||
<span>{{ "loadMore" | i18n }}</span>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
@ -50,7 +50,7 @@ export class ServiceAccountEventsComponent extends BaseEventsComponent implement
|
||||
}
|
||||
|
||||
async load() {
|
||||
await this.loadEvents(true);
|
||||
await this.refreshEvents();
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user