add transaction logs (#78)

Co-authored-by: Apostolos GALANOPOULOS <[email protected]>
eu-digital-identity-wallet · Sep 3, 2024 · 419bf3f · 419bf3f
1 parent e71f963
commit 419bf3f
Show file tree

Hide file tree

Showing 19 changed files with 412 additions and 95 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -16,7 +16,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 		CoreModule,
 		BrowserAnimationsModule
 	],
-	providers: [],
+	providers: [
+		{ provide: LOCALE_ID, useValue: 'en-US' }
+	],
 	bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/core/models/event-log.ts b/src/app/core/models/event-log.ts
@@ -0,0 +1,10 @@
+
+export type EventLog = {
+  timestamp: number;
+  event: string;
+  actor: string;
+  data: {
+    key: string;
+    value: any;
+  };
+}
diff --git a/src/app/core/models/transaction-log.ts b/src/app/core/models/transaction-log.ts
@@ -0,0 +1,7 @@
+import { EventLog } from './event-log';
+
+export type TransactionLog = {
+  transaction_id: string;
+  last_updated: string;
+  events: EventLog[];
+};
diff --git a/src/app/core/services/presentation-definition.service.ts b/src/app/core/services/presentation-definition.service.ts
@@ -1,13 +1,14 @@
 import { Injectable } from '@angular/core';
 import { HttpService } from '@app/core/network/http/http.service';
 import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
+import { tap, map } from 'rxjs/operators';
 import { isJSON } from '../utils/ValidationJSON';
 import { PresentationDefinitionResponse } from '../models/presentation-definition-response';
 import { PresentationsResponse } from '../models/presentations-response';
 import { LocalStorageService } from './local-storage.service';
 import * as constants from '@core/constants/constants';
 import { DeviceDetectorService } from './device-detector.service';
+import { EventLog } from '../models/event-log';
 
 @Injectable()
 export class PresentationDefinitionService {
@@ -44,4 +45,29 @@ export class PresentationDefinitionService {
 			}
 		});
 	}
+	getsTransactionEventsLogs (transactionId: string): Observable<EventLog[]> {
+		return this.httpService.get(`ui/presentations/${transactionId}/events`)
+			.pipe(
+				map((data: any) => {
+					const events = data.events.map((event: EventLog) => {
+						this.getTransactionData(event).forEach((key: string) => {
+							const value = event[key as keyof EventLog] ?? {};
+							event.data = {
+								key: key,
+								value,
+							};
+						});
+						return event;
+					});
+					return events;
+				})
+			);
+	}
+	private getTransactionData (event: EventLog): string[] {
+		const objKeys = Object.keys(event);
+		objKeys.splice(objKeys.indexOf('timestamp'), 1);
+		objKeys.splice(objKeys.indexOf('event'), 1);
+		objKeys.splice(objKeys.indexOf('actor'), 1);
+		return objKeys;
+	}
 }
diff --git a/src/app/features/home/components/home/home.component.html b/src/app/features/home/components/home/home.component.html
@@ -1,5 +1,10 @@
 <vc-wallet-layout>
   <div body class="container ">
+    <mat-card appearance="outlined" class="show-logs">
+      <mat-card-content> <div class="log-button">
+        <vc-button class="vc-button" name="Inspect transaction logs" id="inspectLogs" mode="none" color="primary" (clicked)="inspectLogs()"></vc-button>
+      </div> </mat-card-content>
+    </mat-card>
     <mat-tab-group animationDuration="0ms" (selectedIndexChange)="selectedIndexChange($event)">
       <mat-tab #pid label="PID authentication">
         <ng-container *ngIf="pid.isActive">

diff --git a/src/app/features/home/components/home/home.component.scss b/src/app/features/home/components/home/home.component.scss
@@ -7,6 +7,14 @@
     margin-top: 5rem;
   }
   .container {
+    .show-logs {
+      display: flex;
+      margin-bottom: 1em;
+      .log-button {
+        display: flex;
+        justify-content: center;
+      }
+    }
     ::ng-deep {
       .mdc-tab {
         background: var(--background-paper) 0% 0% no-repeat padding-box;

diff --git a/src/app/features/home/components/home/home.component.ts b/src/app/features/home/components/home/home.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {DataService} from '@app/core/services/data.service';
 import {NavigateService} from '@app/core/services/navigate.service';
@@ -14,115 +14,139 @@ import {LocalStorageService} from '@app/core/services/local-storage.service';
 import * as constants from '@core/constants/constants';
 import {InputSchemeComponent} from '../input-scheme/input-scheme.component';
 import {MatTabsModule} from '@angular/material/tabs';
-import {AttestationSelectableModelService} from "@app/core/services/attestation-selectable-model.service";
-
+import {AttestationSelectableModelService} from '@app/core/services/attestation-selectable-model.service';
+import { OpenLogsComponent } from '@app/shared/elements/open-logs/open-logs.component';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatCardModule } from '@angular/material/card';
 @Component({
-  standalone: true,
-  imports: [CommonModule, MatTabsModule, RadioGroupComponent, SharedModule, InputSchemeComponent, WalletLayoutComponent],
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss'],
-  providers: [OnlineAuthenticationSIOPService, HomeService],
-  changeDetection: ChangeDetectionStrategy.OnPush
+	standalone: true,
+	imports: [
+		CommonModule,
+		MatTabsModule,
+		RadioGroupComponent,
+		SharedModule,
+		InputSchemeComponent,
+		WalletLayoutComponent,
+		OpenLogsComponent,
+		MatDialogModule,
+		MatCardModule
+	],
+	templateUrl: './home.component.html',
+	styleUrls: ['./home.component.scss'],
+	providers: [OnlineAuthenticationSIOPService, HomeService, MatDialog],
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HomeComponent implements OnInit {
 
-  actions: BodyAction[] = HOME_ACTIONS;
-  optionsCustomRequest: MenuOption[] = [];
-  optionsPIDAuthentication: MenuOption[] = [];
-  optionsMDLAuthentication: MenuOption[] = [];
-  optionsAgeVerification: MenuOption[] = [];
+	actions: BodyAction[] = HOME_ACTIONS;
+	optionsCustomRequest: MenuOption[] = [];
+	optionsPIDAuthentication: MenuOption[] = [];
+	optionsMDLAuthentication: MenuOption[] = [];
+	optionsAgeVerification: MenuOption[] = [];
+
+	private dialog: MatDialog = inject(MatDialog);
 
-  constructor(
+	constructor (
     private navigateService: NavigateService,
     private readonly onlineAuthenticationSIOPService: OnlineAuthenticationSIOPService,
     private readonly dataService: DataService,
     private readonly attestationSelectableModelService: AttestationSelectableModelService,
     private readonly homeService: HomeService,
-    private readonly localStorageService: LocalStorageService
-  ) {
-    this.localStorageService.remove(constants.UI_PRESENTATION);
-  }
+    private readonly localStorageService: LocalStorageService,
+	) {
+		this.localStorageService.remove(constants.UI_PRESENTATION);
+	}
+
+	ngOnInit (): void {
+		this.optionsCustomRequest = this.homeService.optionsCustomRequest;
+		this.optionsPIDAuthentication = this.homeService.optionsPIDAuthentication;
+		this.optionsMDLAuthentication = this.homeService.optionsMDLAuthentication;
+		this.optionsAgeVerification = this.homeService.optionsAgeVerification;
+	}
 
-  ngOnInit(): void {
-    this.optionsCustomRequest = this.homeService.optionsCustomRequest;
-    this.optionsPIDAuthentication = this.homeService.optionsPIDAuthentication;
-    this.optionsMDLAuthentication = this.homeService.optionsMDLAuthentication;
-    this.optionsAgeVerification = this.homeService.optionsAgeVerification;
-  }
+	private navTarget = '';
 
-  private navTarget = '';
+	setNavigateTarget (choose: string) {
+		if (choose === 'PID_full') {
+			this.navTarget = 'pid-full';
+		} else if (choose === 'PID_Selectable') {
+			this.navTarget = 'cbor-selectable/pid-create';
+		} else if (choose === 'AgeOver18_attestation') {
+			this.navTarget = 'age-attestation';
+		} else if (choose === 'AgeOver18_pid') {
+			this.navTarget = 'pid-age-over-18';
+		} else if (choose === 'MDL_Selectable') {
+			this.navTarget = 'cbor-selectable/mdl-create';
+		} else if (choose === 'MDL_Full') {
+			this.navTarget = 'mdl-full';
+		} else if (choose === 'PD_Custom_Request') {
+			this.navTarget = 'custom-request';
+		}
+		this.actions = [...this.actions].map((item) => {
+			item.disabled = false;
+			return item;
+		});
+	}
 
-  setNavigateTarget(choose: string) {
-    if (choose === 'PID_full') {
-      this.navTarget = 'pid-full';
-    } else if (choose === 'PID_Selectable') {
-      this.navTarget = 'cbor-selectable/pid-create';
-    } else if (choose === 'AgeOver18_attestation') {
-      this.navTarget = 'age-attestation';
-    } else if (choose === 'AgeOver18_pid') {
-      this.navTarget = 'pid-age-over-18';
-    } else if (choose === 'MDL_Selectable') {
-      this.navTarget = 'cbor-selectable/mdl-create';
-    } else if (choose === 'MDL_Full') {
-      this.navTarget = 'mdl-full';
-    } else if (choose === 'PD_Custom_Request') {
-      this.navTarget = 'custom-request';
-    }
-    this.actions = [...this.actions].map((item) => {
-      item.disabled = false;
-      return item;
-    });
-  }
+	submit () {
+		if (this.navTarget === 'pid-full') {
+			const presentationPurpose = 'We need to verify your identity';
+			this.onlineAuthenticationSIOPService.initPIDPresentationTransaction(presentationPurpose).subscribe((data) => {
+				this.dataService.setQRCode(data);
+				this.navigateService.navigateTo(this.navTarget);
+			});
 
-  submit() {
-    if (this.navTarget === 'pid-full') {
-      let presentationPurpose = 'We need to verify your identity';
-      this.onlineAuthenticationSIOPService.initPIDPresentationTransaction(presentationPurpose).subscribe((data) => {
-        this.dataService.setQRCode(data);
-        this.navigateService.navigateTo(this.navTarget);
-      });
+		} else if (this.navTarget === 'cbor-selectable/pid-create') {
+			const presentationPurpose = 'We need to verify your identity';
+			this.attestationSelectableModelService.setPresentationPurpose(presentationPurpose);
+			this.attestationSelectableModelService.setModel('PID');
+			this.navigateService.navigateTo('cbor-selectable/create');
 
-    } else if (this.navTarget === 'cbor-selectable/pid-create') {
-      let presentationPurpose = 'We need to verify your identity';
-      this.attestationSelectableModelService.setPresentationPurpose(presentationPurpose)
-      this.attestationSelectableModelService.setModel('PID')
-      this.navigateService.navigateTo('cbor-selectable/create');
+		} else if (this.navTarget === 'mdl-full') {
+			const presentationPurpose = 'We need to verify your mobile driving licence';
+			this.onlineAuthenticationSIOPService.initMDLPresentationTransaction(presentationPurpose).subscribe((data) => {
+				this.dataService.setQRCode(data);
+				this.navigateService.navigateTo(this.navTarget);
+			});
 
-    } else if (this.navTarget === 'mdl-full') {
-      let presentationPurpose = 'We need to verify your mobile driving licence';
-        this.onlineAuthenticationSIOPService.initMDLPresentationTransaction(presentationPurpose).subscribe((data) => {
-          this.dataService.setQRCode(data);
-          this.navigateService.navigateTo(this.navTarget);
-        });
+		} else if (this.navTarget === 'cbor-selectable/mdl-create') {
+			const presentationPurpose = 'We need to verify your mobile driving licence';
+			this.attestationSelectableModelService.setPresentationPurpose(presentationPurpose);
+			this.attestationSelectableModelService.setModel('MDL');
+			this.navigateService.navigateTo('cbor-selectable/create');
 
-    } else if (this.navTarget === 'cbor-selectable/mdl-create') {
-      let presentationPurpose = 'We need to verify your mobile driving licence';
-      this.attestationSelectableModelService.setPresentationPurpose(presentationPurpose)
-      this.attestationSelectableModelService.setModel('MDL')
-      this.navigateService.navigateTo('cbor-selectable/create');
+		} else if (this.navTarget === 'pid-age-over-18') {
+			const presentationPurpose = 'We need to verify you are over 18 using your PID';
+			this.onlineAuthenticationSIOPService.initPIDAgeOver18PresentationTransaction(presentationPurpose).subscribe((data) => {
+				this.dataService.setQRCode(data);
+				this.navigateService.navigateTo(this.navTarget);
+			});
 
-    } else if (this.navTarget === 'pid-age-over-18') {
-      let presentationPurpose = 'We need to verify you are over 18 using your PID';
-      this.onlineAuthenticationSIOPService.initPIDAgeOver18PresentationTransaction(presentationPurpose).subscribe((data) => {
-        this.dataService.setQRCode(data);
-        this.navigateService.navigateTo(this.navTarget);
-      });
+		} else if (this.navTarget === 'age-attestation') {
+			this.onlineAuthenticationSIOPService.initAgeOver18AttestationPresentationTransaction().subscribe((data) => {
+				this.dataService.setQRCode(data);
+				this.navigateService.navigateTo(this.navTarget);
+			});
 
-    } else if (this.navTarget === 'age-attestation') {
-      this.onlineAuthenticationSIOPService.initAgeOver18AttestationPresentationTransaction().subscribe((data) => {
-        this.dataService.setQRCode(data);
-        this.navigateService.navigateTo(this.navTarget);
-      });
+		} else if (this.navTarget === 'custom-request') {
+			this.navigateService.navigateTo(this.navTarget);
+		}
+	}
 
-    } else if (this.navTarget === 'custom-request') {
-      this.navigateService.navigateTo(this.navTarget);
-    }
-  }
+	selectedIndexChange (_event: number) {
+		this.actions = [...this.actions].map((item) => {
+			item.disabled = true;
+			return item;
+		});
+	}
+	inspectLogs () {
+  	this.dialog.open(OpenLogsComponent, {
+  		data: {
+  			transactionId: '',
+  			label: 'Inspect transaction logs',
+				isInspectLogs: true
+  		},
+  	});
+	}
 
-  selectedIndexChange(_event: number) {
-    this.actions = [...this.actions].map((item) => {
-      item.disabled = true;
-      return item;
-    });
-  }
 }
diff --git a/src/app/features/verifiable-credential/components/qr-code/qr-code.component.html b/src/app/features/verifiable-credential/components/qr-code/qr-code.component.html
@@ -14,4 +14,7 @@
   <div *ngIf="!hasResult">
     <a class="authorize" [href]="redirectUrl">AUTHENTICATE WITH WALLET</a>
   </div>
+  <div class="show-logs">
+    <a (click)="openLogs()">View transaction logs</a>
+  </div>
 </div>
diff --git a/src/app/features/verifiable-credential/components/qr-code/qr-code.component.scss b/src/app/features/verifiable-credential/components/qr-code/qr-code.component.scss
@@ -63,6 +63,16 @@
                 }
             }
         }
+        .show-logs {
+          display: flex;
+          a {
+            color: map-get(map-get(temp.$palette, color), primary);
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 2rem;
+            text-decoration: underline;
+          }
+        }
     }
     @media (max-width: map-get(points.$breakpoints, xs)) and  (min-width: map-get(points.$breakpoints, sm)){
         .vc-verifiable-credential {