From 5f5cd47474a0a9a5540325b8472e00a3d42a9a66 Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Mon, 3 Oct 2022 11:51:17 -0700 Subject: [PATCH] [EC-551] Update Event Logs Client Column (#3572) * [EC-551] Fix RxJS warnings * [EC-551] Update page to use CL components and Tailwind classes * [EC-551] Update Client column to use text instead of icon. Update language and i18n. --- apps/web/src/app/core/event.service.ts | 8 +- .../manage/events.component.html | 100 +++++++++--------- .../organizations/manage/events.component.ts | 37 ++++--- apps/web/src/app/shared/shared.module.ts | 7 +- apps/web/src/locales/en/messages.json | 16 +++ libs/components/src/index.ts | 1 + 6 files changed, 99 insertions(+), 70 deletions(-) diff --git a/apps/web/src/app/core/event.service.ts b/apps/web/src/app/core/event.service.ts index 1a17998747e7..ab12faa82d6e 100644 --- a/apps/web/src/app/core/event.service.ts +++ b/apps/web/src/app/core/event.service.ts @@ -464,16 +464,14 @@ export class EventService { private formatGroupId(ev: EventResponse) { const shortId = this.getShortId(ev.groupId); const a = this.makeAnchor(shortId); - a.setAttribute( - "href", - "#/organizations/" + ev.organizationId + "/manage/groups?search=" + shortId - ); + a.setAttribute("href", "#/organizations/" + ev.organizationId + "/groups?search=" + shortId); return a.outerHTML; } private formatCollectionId(ev: EventResponse) { const shortId = this.getShortId(ev.collectionId); const a = this.makeAnchor(shortId); + // TODO: Update view/edit collection link after EC-14 is completed a.setAttribute( "href", "#/organizations/" + ev.organizationId + "/manage/collections?search=" + shortId @@ -488,7 +486,7 @@ export class EventService { "href", "#/organizations/" + ev.organizationId + - "/manage/people?search=" + + "/members?search=" + shortId + "&viewEvents=" + ev.organizationUserId diff --git a/apps/web/src/app/organizations/manage/events.component.html b/apps/web/src/app/organizations/manage/events.component.html index d27b53e8d9d1..ed7ddfad5953 100644 --- a/apps/web/src/app/organizations/manage/events.component.html +++ b/apps/web/src/app/organizations/manage/events.component.html @@ -1,54 +1,57 @@ -
+

{{ "eventLogs" | i18n }}

-
-
- +
+ + {{ "from" | i18n }} - - - + + - + + {{ "to" | i18n }} -
-
+ +
-
+
@@ -63,45 +66,44 @@

{{ "eventLogs" | i18n }}

{{ "noEventsInList" | i18n }}

- - + + - - - - + + + + - - - - - + + - - + - -
{{ "timestamp" | i18n }} - {{ "device" | i18n }} - {{ "user" | i18n }}{{ "event" | i18n }}{{ "timestamp" | i18n }}{{ "client" | i18n }}{{ "member" | i18n }}{{ "event" | i18n }}
{{ e.date | date: "medium" }} - - {{ e.appName }}, {{ e.ip }} + + +
{{ e.date | date: "medium" }} + {{ e.appName }} + {{ e.userName }}
+ + diff --git a/apps/web/src/app/organizations/manage/events.component.ts b/apps/web/src/app/organizations/manage/events.component.ts index 9ee2152f2291..c156328b9fab 100644 --- a/apps/web/src/app/organizations/manage/events.component.ts +++ b/apps/web/src/app/organizations/manage/events.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; import { ActivatedRoute, Router } from "@angular/router"; +import { concatMap, Subject, takeUntil } from "rxjs"; import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; @@ -20,13 +21,13 @@ import { EventService } from "../../core"; selector: "app-org-events", templateUrl: "events.component.html", }) -// eslint-disable-next-line rxjs-angular/prefer-takeuntil -export class EventsComponent extends BaseEventsComponent implements OnInit { +export class EventsComponent extends BaseEventsComponent implements OnInit, OnDestroy { exportFileName = "org-events"; organizationId: string; organization: Organization; private orgUsersUserIdMap = new Map(); + private destroy$ = new Subject(); constructor( private apiService: ApiService, @@ -53,17 +54,20 @@ export class EventsComponent extends BaseEventsComponent implements OnInit { } async ngOnInit() { - // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe - this.route.parent.parent.params.subscribe(async (params) => { - this.organizationId = params.organizationId; - this.organization = await this.organizationService.get(this.organizationId); - if (this.organization == null || !this.organization.useEvents) { - this.router.navigate(["/organizations", this.organizationId]); - return; - } - - await this.load(); - }); + this.route.params + .pipe( + concatMap(async (params) => { + this.organizationId = params.organizationId; + this.organization = await this.organizationService.get(this.organizationId); + if (this.organization == null || !this.organization.useEvents) { + await this.router.navigate(["/organizations", this.organizationId]); + return; + } + await this.load(); + }), + takeUntil(this.destroy$) + ) + .subscribe(); } async load() { @@ -126,4 +130,9 @@ export class EventsComponent extends BaseEventsComponent implements OnInit { return null; } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts index 68c558f226df..203f81c55486 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -1,5 +1,5 @@ import { DragDropModule } from "@angular/cdk/drag-drop"; -import { DatePipe, CommonModule } from "@angular/common"; +import { CommonModule, DatePipe } from "@angular/common"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { RouterModule } from "@angular/router"; @@ -12,9 +12,10 @@ import { ButtonModule, CalloutModule, FormFieldModule, + IconModule, MenuModule, + TableModule, TabsModule, - IconModule, } from "@bitwarden/components"; // Register the locales for the application @@ -46,6 +47,7 @@ import "./locales"; FormFieldModule, IconModule, TabsModule, + TableModule, ], exports: [ CommonModule, @@ -65,6 +67,7 @@ import "./locales"; FormFieldModule, IconModule, TabsModule, + TableModule, ], providers: [DatePipe], bootstrap: [], diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 9edbc7fe94a4..306f27609a4a 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -4512,6 +4512,10 @@ "clients": { "message": "Clients" }, + "client": { + "message": "Client", + "description": "This is used as a table header to describe which client application created an event log." + }, "providerAdmin": { "message": "Provider Admin" }, @@ -5431,5 +5435,17 @@ }, "numberOfUsers": { "message": "Number of users" + }, + "from": { + "message": "From" + }, + "to": { + "message": "To" + }, + "member": { + "message": "Member" + }, + "update": { + "message": "Update" } } diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 264c655d80f7..604d2316fd0f 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -9,5 +9,6 @@ export * from "./menu"; export * from "./dialog"; export * from "./link"; export * from "./tabs"; +export * from "./table"; export * from "./toggle-group"; export * from "./utils/i18n-mock.service";