Angular: Audit Trail feature

cypress/e2e/audit-overview-page.cy.ts

@@ -0,0 +1,29 @@
+import { testA11y } from 'cypress/support/utils';
+
+describe('Audit Overview Page', () => {
+  beforeEach(() => {
+    // Must login as an Admin to see the page
+    cy.visit('/auditlogs');
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+  });
+
+  it('page structure should be correct and should pass accessibility tests', () => {
+    // Page must first be visible
+    cy.get('ds-audit-overview').should('be.visible');
+    // Check for presence of main container and title
+    cy.get('.container').should('exist');
+    cy.get('[data-test="audit-title"]').should('be.visible');
+    cy.get('body').then($body => {
+      const hasTable = $body.find('[data-test="audit-table"]').length > 0;
+      const hasEmpty = $body.find('[data-test="audit-empty"]').length > 0;
+      // At least one present and not both
+      expect(hasTable || hasEmpty).to.equal(true);
+      expect(!(hasTable && hasEmpty)).to.equal(true);
+    });
+    // Analyze <ds-audit-overview> for accessibility issues
+    testA11y('ds-audit-overview');
+  });
+
+
+
+});

src/app/app-routes.ts

@@ -265,6 +265,11 @@ export const APP_ROUTES: Route[] = [
         loadChildren: () => import('./access-control/access-control-routes').then((m) => m.ROUTES),
         canActivate: [groupAdministratorGuard, endUserAgreementCurrentUserGuard],
       },
+      {
+        path: 'auditlogs',
+        loadChildren: () => import('./audit-page/audit-page-routes').then((m) => m.ROUTES),
+        canActivate: [siteAdministratorGuard, endUserAgreementCurrentUserGuard],
+      },
       {
         path: 'subscriptions',
         loadChildren: () => import('./subscriptions-page/subscriptions-page-routes')

src/app/app.menus.ts

@@ -10,6 +10,8 @@ import { MenuID } from './shared/menu/menu-id.model';
 import { MenuRoute } from './shared/menu/menu-route.model';
 import { AccessControlMenuProvider } from './shared/menu/providers/access-control.menu';
 import { AdminSearchMenuProvider } from './shared/menu/providers/admin-search.menu';
+import { AuditLogsMenuProvider } from './shared/menu/providers/audit-item.menu';
+import { AuditOverviewMenuProvider } from './shared/menu/providers/audit-overview.menu';
 import { BrowseMenuProvider } from './shared/menu/providers/browse.menu';
 import { CoarNotifyMenuProvider } from './shared/menu/providers/coar-notify.menu';
 import { SubscribeMenuProvider } from './shared/menu/providers/comcol-subscribe.menu';
@@ -72,6 +74,7 @@ export const MENUS = buildMenuStructure({
     HealthMenuProvider,
     SystemWideAlertMenuProvider,
     CoarNotifyMenuProvider,
+    AuditOverviewMenuProvider,
   ],
   [MenuID.DSO_EDIT]: [
     DsoOptionMenuProvider.withSubs([
@@ -90,6 +93,11 @@ export const MENUS = buildMenuStructure({
       VersioningMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
       ),
+      AuditLogsMenuProvider.onRoute(
+        MenuRoute.COMMUNITY_PAGE,
+        MenuRoute.COLLECTION_PAGE,
+        MenuRoute.ITEM_PAGE,
+      ),
       OrcidMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
       ),

src/app/audit-page/audit-page-routes.ts

@@ -0,0 +1,21 @@
+import { Route } from '@angular/router';
+
+import { authenticatedGuard } from '../core/auth/authenticated.guard';
+import { i18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { AuditOverviewComponent } from './overview/audit-overview.component';
+
+export const ROUTES: Route[] = [
+  {
+    path: '',
+    canActivate: [authenticatedGuard],
+    children: [
+      {
+        path: '',
+        component: AuditOverviewComponent,
+        data: { title: 'audit.overview.title', breadcrumbKey: 'audit.overview' },
+        resolve: { breadcrumb: i18nBreadcrumbResolver },
+      },
+    ],
+  },
+
+];

src/app/audit-page/audit-table/audit-table.component.html

@@ -0,0 +1,157 @@
+@if (audits.totalElements === 0) {
+  <div>{{ 'audit.data.not-found' | translate }}</div>
+} @else {
+  <ds-pagination
+    [paginationOptions]="pageConfig"
+    [collectionSize]="audits?.totalElements"
+    [hideGear]="true"
+    [hidePagerWhenSinglePage]="true">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+          <th>{{ 'audit.overview.table.entityType' | translate }}</th>
+          <th>{{ 'audit.overview.table.eperson' | translate }}</th>
+          <th>{{ 'audit.overview.table.timestamp' | translate }}</th>
+          @if (isOverviewPage) {
+            <th>{{ 'audit.overview.table.subjectUUID' | translate }}</th>
+            <th>{{ 'audit.overview.table.subjectType' | translate }}</th>
+            <th>{{ 'audit.overview.table.objectUUID' | translate }}</th>
+            <th>{{ 'audit.overview.table.objectType' | translate }}</th>
+          } @else {
+            <th>{{ 'audit.overview.table.other' | translate }}</th>
+          }
+        </tr>
+        </thead>
+        <tbody>
+          @for (audit of audits?.page; track audit) {
+            <tr>
+              <td>
+                @if (audit.hasDetails) {
+                  <div role="button" class="d-flex align-items-center" (click)="toggleCollapse(audit)">
+                    <div class="btn btn-link p-1 mr-1">
+                      @if (audit.isCollapsed) {
+                        <i class="fas fa-caret-right"></i>
+                      } @else {
+                        <i class="fas fa-caret-down"></i>
+                      }
+                    </div>
+                    <div>
+                      {{ audit.eventType }}
+                    </div>
+                  </div>
+                } @else {
+                  <div class="ml-4">
+                    {{ audit.eventType }}
+                  </div>
+                }
+              </td>
+              <td>{{ audit.epersonName }}</td>
+              <td>{{ audit.timeStamp | date:dateFormat:'UTC' }}</td>
+              @if (isOverviewPage) {
+                <td>
+                  @if (audit.objectUUID) {
+                    <ng-container *ngVar="(getObjectRoute$(audit.objectUUID) | async) as objectRoute">
+                      @if (objectRoute !== ('/' + auditPath)) {
+                        <a [routerLink]="[objectRoute]">{{audit.objectUUID}}</a>
+                      } @else {
+                        <span>{{audit.objectUUID}}</span>
+                      }
+                    </ng-container>
+                  }
+                </td>
+                <td>{{ audit.objectType }}</td>
+                <td>
+                  @if (audit.subjectUUID) {
+                    <ng-container *ngVar="(getObjectRoute$(audit.subjectUUID) | async) as subjectRoute">
+                      @if (subjectRoute !== ('/' + auditPath)) {
+                        <a [routerLink]="[subjectRoute]">{{audit.subjectUUID}}</a>
+                      } @else {
+                        <span>{{audit.subjectUUID}}</span>
+                      }
+                    </ng-container>
+                  }
+                </td>
+                <td>{{ audit.subjectType }}</td>
+              } @else {
+                <td>
+                  <span>
+                    @if (audit.otherAuditObject; as dso) {
+                      {{ getDsoName(dso) }} <em>({{ dso.type }})</em>
+                    } @else {
+                      {{ dataNotAvailable }}
+                    }
+                  </span>
+                </td>
+              }
+            </tr>
+            @if (audit.hasDetails) {
+              <tr [(ngbCollapse)]="audit.isCollapsed" [id]="audit.id" [ngClass]="{'border-top-0': !audit.isCollapsed}" class="w-100 nested-row">
+                @if (isOverviewPage) {
+                  <td colspan="7" class="border-top-0">
+                    <ng-container *ngTemplateOutlet="auditInto; context: { audit }"></ng-container>
+                  </td>
+                } @else {
+                  <td colspan="4" class="border-top-0">
+                    <ng-container *ngTemplateOutlet="auditInto; context: { audit }"></ng-container>
+                  </td>
+                }
+              </tr>
+            }
+          }
+        </tbody>
+      </table>
+    </div>
+  </ds-pagination>
+}
+
+<ng-template #auditInto let-audit=audit>
+  <div class="w-100">
+    <div class="d-flex flex-column mw-100 w-100">
+      @if (audit.metadataField) {
+        <div class="d-flex mb-1">
+          <small class="font-weight-bold me-2" >{{"audit.detail.metadata.field" | translate}}</small>
+          <small>{{ audit.metadataField | dsStringReplace: "_":"." }}</small>
+        </div>
+      }
+      @if (audit.value) {
+        <div class="d-flex mb-1">
+          <small class="font-weight-bold me-2">{{"audit.detail.metadata.value" | translate}}</small>
+          <small class="content dont-break-out preserve-line-breaks">
+            {{ audit.value }}
+          </small>
+        </div>
+      }
+      @if (audit.authority) {
+        <div class="d-flex mb-1">
+          <small class="font-weight-bold me-2">{{"audit.detail.metadata.authority" | translate}}</small>
+          <small>{{ audit.authority }}</small>
+        </div>
+      }
+      @if (audit.confidence !== null) {
+        <div class="d-flex mb-1">
+          <small class="font-weight-bold me-2">{{"audit.detail.metadata.confidence" | translate}}</small>
+          <small>{{ audit.confidence }}</small>
+        </div>
+      }
+      @if (audit.place !== null) {
+        <div class="d-flex mb-1">
+          <small class="font-weight-bold me-2">{{"audit.detail.metadata.place" | translate}}</small>
+          <small>{{ audit.place }}</small>
+        </div>
+      }
+      @if (audit.action) {
+        <div class="d-flex mb-1">
+          <small class="font-weight-bold me-2">{{"audit.detail.metadata.action" | translate}}</small>
+          <small>{{ audit.action }}</small>
+        </div>
+      }
+      @if (audit.checksum) {
+        <div class="d-flex">
+          <small class="font-weight-bold me-2">{{"audit.detail.metadata.checksum" | translate}}</small>
+          <small>{{ audit.checksum }}</small>
+        </div>
+      }
+    </div>
+  </div>
+</ng-template>

src/app/audit-page/audit-table/audit-table.component.spec.ts

@@ -0,0 +1,103 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Audit } from '@dspace/core/audit/model/audit.model';
+import { DSONameService } from '@dspace/core/breadcrumbs/dso-name.service';
+import { DSpaceObjectDataService } from '@dspace/core/data/dspace-object-data.service';
+import { PaginatedList } from '@dspace/core/data/paginated-list.model';
+import { DSpaceObject } from '@dspace/core/shared/dspace-object.model';
+import { AuditMock } from '@dspace/core/testing/audit.mock';
+import { DSONameServiceMock } from '@dspace/core/testing/dso-name.service.mock';
+import { createSuccessfulRemoteDataObject$ } from '@dspace/core/utilities/remote-data.utils';
+import { TranslateModule } from '@ngx-translate/core';
+import { PaginationComponent } from 'src/app/shared/pagination/pagination.component';
+
+import { AuditTableComponent } from './audit-table.component';
+
+describe('AuditTableComponent', () => {
+  let component: AuditTableComponent;
+  let fixture: ComponentFixture<AuditTableComponent>;
+
+  let audits = new PaginatedList() as PaginatedList<Audit>;
+  const dSpaceObjectDataService = jasmine.createSpyObj('DSpaceObjectDataService', { findById: createSuccessfulRemoteDataObject$(new DSpaceObject()) });
+
+
+  beforeEach(waitForAsync(() => {
+    audits.page = [ AuditMock ];
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        RouterTestingModule.withRoutes([]),
+        AuditTableComponent,
+        PaginationComponent,
+      ],
+      providers: [
+        { provide: DSONameService, useValue: new DSONameServiceMock() },
+        { provide: DSpaceObjectDataService, useValue: dSpaceObjectDataService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(AuditTableComponent, {
+        remove: { imports: [PaginationComponent] },
+      })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuditTableComponent);
+    component = fixture.componentInstance;
+    component.audits = audits;
+    component.isOverviewPage = true;
+    fixture.detectChanges();
+  });
+
+  describe('table structure', () => {
+
+    it('should display the entityType in the first column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(1)')).nativeElement;
+      expect(el.textContent).toContain(audits.page[0].eventType);
+    });
+
+    it('should display the eperson in the second column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(2)')).nativeElement;
+      expect(el.textContent).toContain(audits.page[0].epersonName);
+    });
+
+    it('should display the timestamp in the third column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(3)')).nativeElement;
+      expect(el.textContent).toContain('2020-11-13 10:41:06');
+    });
+
+    it('should display the objectUUID in the fourth column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(4)')).nativeElement;
+      expect(el.textContent).toContain(audits.page[0].objectUUID);
+    });
+
+    it('should display the objectType in the fifth column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(5)')).nativeElement;
+      expect(el.textContent).toContain(audits.page[0].objectType);
+    });
+
+    it('should display the subjectUUID in the sixth column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(6)')).nativeElement;
+      expect(el.textContent).toContain(audits.page[0].subjectUUID);
+    });
+
+    it('should display the subjectType in the seventh column', () => {
+      const rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+      const el = rowElements[0].query(By.css('td:nth-child(7)')).nativeElement;
+      expect(el.textContent).toContain(audits.page[0].subjectType);
+    });
+  });
+});