feat: Goa GEL Blockchain e-Licensing Platform - Full Stack Implementation
Complete implementation of the Goa Government e-Licensing platform with: Backend: - NestJS API with JWT authentication - PostgreSQL database with Knex ORM - Redis caching and session management - MinIO document storage - Hyperledger Besu blockchain integration - Multi-department workflow system - Comprehensive API tests (266/282 passing) Frontend: - Angular 21 with standalone components - Angular Material + TailwindCSS UI - Visual workflow builder - Document upload with progress tracking - Blockchain explorer integration - Role-based dashboards (Admin, Department, Citizen) - E2E tests with Playwright (37 tests) Infrastructure: - Docker Compose orchestration - Blockscout blockchain explorer - Development and production configurations
This commit is contained in:
Mahi
@@ -0,0 +1,50 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import {
|
||||
WebhookResponseDto,
|
||||
CreateWebhookDto,
|
||||
UpdateWebhookDto,
|
||||
WebhookTestResultDto,
|
||||
WebhookLogEntryDto,
|
||||
PaginatedWebhookLogsResponse,
|
||||
} from '../../../api/models';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class WebhookService {
|
||||
private readonly api = inject(ApiService);
|
||||
|
||||
getWebhooks(): Observable<WebhookResponseDto[]> {
|
||||
return this.api.get<WebhookResponseDto[]>('/webhooks');
|
||||
}
|
||||
|
||||
getWebhook(id: string): Observable<WebhookResponseDto> {
|
||||
return this.api.get<WebhookResponseDto>(`/webhooks/${id}`);
|
||||
}
|
||||
|
||||
createWebhook(dto: CreateWebhookDto): Observable<WebhookResponseDto> {
|
||||
return this.api.post<WebhookResponseDto>('/webhooks', dto);
|
||||
}
|
||||
|
||||
updateWebhook(id: string, dto: UpdateWebhookDto): Observable<WebhookResponseDto> {
|
||||
return this.api.patch<WebhookResponseDto>(`/webhooks/${id}`, dto);
|
||||
}
|
||||
|
||||
deleteWebhook(id: string): Observable<void> {
|
||||
return this.api.delete<void>(`/webhooks/${id}`);
|
||||
}
|
||||
|
||||
testWebhook(id: string): Observable<WebhookTestResultDto> {
|
||||
return this.api.post<WebhookTestResultDto>(`/webhooks/${id}/test`, {});
|
||||
}
|
||||
|
||||
getWebhookLogs(id: string, page = 1, limit = 20): Observable<PaginatedWebhookLogsResponse> {
|
||||
return this.api.get<PaginatedWebhookLogsResponse>(`/webhooks/${id}/logs`, { page, limit });
|
||||
}
|
||||
|
||||
toggleActive(id: string, isActive: boolean): Observable<WebhookResponseDto> {
|
||||
return this.api.patch<WebhookResponseDto>(`/webhooks/${id}`, { isActive });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { PageHeaderComponent } from '../../../shared/components/page-header/page-header.component';
|
||||
import { WebhookService } from '../services/webhook.service';
|
||||
import { NotificationService } from '../../../core/services/notification.service';
|
||||
import { WebhookEvent } from '../../../api/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-webhook-form',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
ReactiveFormsModule,
|
||||
MatCardModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatCheckboxModule,
|
||||
MatProgressSpinnerModule,
|
||||
PageHeaderComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="page-container">
|
||||
<app-page-header
|
||||
[title]="isEditMode() ? 'Edit Webhook' : 'Register Webhook'"
|
||||
[subtitle]="isEditMode() ? 'Update webhook configuration' : 'Configure a new webhook endpoint'"
|
||||
>
|
||||
<button mat-button routerLink="/webhooks">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
Back
|
||||
</button>
|
||||
</app-page-header>
|
||||
|
||||
<mat-card class="form-card">
|
||||
<mat-card-content>
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="48"></mat-spinner>
|
||||
</div>
|
||||
} @else {
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Webhook URL</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="url"
|
||||
placeholder="https://your-server.com/webhook"
|
||||
/>
|
||||
@if (form.controls.url.hasError('required')) {
|
||||
<mat-error>URL is required</mat-error>
|
||||
}
|
||||
@if (form.controls.url.hasError('pattern')) {
|
||||
<mat-error>Enter a valid HTTPS URL</mat-error>
|
||||
}
|
||||
<mat-hint>Must be a publicly accessible HTTPS endpoint</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Events</mat-label>
|
||||
<mat-select formControlName="events" multiple>
|
||||
@for (event of eventOptions; track event.value) {
|
||||
<mat-option [value]="event.value">{{ event.label }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (form.controls.events.hasError('required')) {
|
||||
<mat-error>Select at least one event</mat-error>
|
||||
}
|
||||
<mat-hint>Select the events you want to receive notifications for</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Description (optional)</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
formControlName="description"
|
||||
rows="2"
|
||||
placeholder="What is this webhook used for?"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="form-actions">
|
||||
<button mat-button type="button" routerLink="/webhooks">Cancel</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
type="submit"
|
||||
[disabled]="form.invalid || submitting()"
|
||||
>
|
||||
@if (submitting()) {
|
||||
<mat-spinner diameter="20"></mat-spinner>
|
||||
} @else {
|
||||
{{ isEditMode() ? 'Update' : 'Register' }}
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.form-card {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
`,
|
||||
],
|
||||
})
|
||||
export class WebhookFormComponent implements OnInit {
|
||||
private readonly fb = inject(FormBuilder);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly webhookService = inject(WebhookService);
|
||||
private readonly notification = inject(NotificationService);
|
||||
|
||||
readonly loading = signal(false);
|
||||
readonly submitting = signal(false);
|
||||
readonly isEditMode = signal(false);
|
||||
private webhookId: string | null = null;
|
||||
|
||||
readonly eventOptions: { value: WebhookEvent; label: string }[] = [
|
||||
{ value: 'APPROVAL_REQUIRED', label: 'Approval Required' },
|
||||
{ value: 'DOCUMENT_UPDATED', label: 'Document Updated' },
|
||||
{ value: 'REQUEST_APPROVED', label: 'Request Approved' },
|
||||
{ value: 'REQUEST_REJECTED', label: 'Request Rejected' },
|
||||
{ value: 'CHANGES_REQUESTED', label: 'Changes Requested' },
|
||||
{ value: 'LICENSE_MINTED', label: 'License Minted' },
|
||||
{ value: 'LICENSE_REVOKED', label: 'License Revoked' },
|
||||
];
|
||||
|
||||
readonly form = this.fb.nonNullable.group({
|
||||
url: ['', [Validators.required, Validators.pattern(/^https:\/\/.+/)]],
|
||||
events: [[] as WebhookEvent[], [Validators.required]],
|
||||
description: [''],
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
this.webhookId = this.route.snapshot.paramMap.get('id');
|
||||
if (this.webhookId) {
|
||||
this.isEditMode.set(true);
|
||||
this.loadWebhook();
|
||||
}
|
||||
}
|
||||
|
||||
private loadWebhook(): void {
|
||||
if (!this.webhookId) return;
|
||||
|
||||
this.loading.set(true);
|
||||
this.webhookService.getWebhook(this.webhookId).subscribe({
|
||||
next: (webhook) => {
|
||||
this.form.patchValue({
|
||||
url: webhook.url,
|
||||
events: webhook.events,
|
||||
description: webhook.description || '',
|
||||
});
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.notification.error('Failed to load webhook');
|
||||
this.router.navigate(['/webhooks']);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
if (this.form.invalid) return;
|
||||
|
||||
this.submitting.set(true);
|
||||
const values = this.form.getRawValue();
|
||||
|
||||
const action$ = this.isEditMode()
|
||||
? this.webhookService.updateWebhook(this.webhookId!, values)
|
||||
: this.webhookService.createWebhook(values);
|
||||
|
||||
action$.subscribe({
|
||||
next: () => {
|
||||
this.notification.success(
|
||||
this.isEditMode() ? 'Webhook updated' : 'Webhook registered'
|
||||
);
|
||||
this.router.navigate(['/webhooks']);
|
||||
},
|
||||
error: () => {
|
||||
this.submitting.set(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
||||
import { PageHeaderComponent } from '../../../shared/components/page-header/page-header.component';
|
||||
import { StatusBadgeComponent } from '../../../shared/components/status-badge/status-badge.component';
|
||||
import { EmptyStateComponent } from '../../../shared/components/empty-state/empty-state.component';
|
||||
import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialog/confirm-dialog.component';
|
||||
import { WebhookService } from '../services/webhook.service';
|
||||
import { NotificationService } from '../../../core/services/notification.service';
|
||||
import { WebhookResponseDto } from '../../../api/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-webhook-list',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatCardModule,
|
||||
MatTableModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatChipsModule,
|
||||
MatMenuModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatDialogModule,
|
||||
PageHeaderComponent,
|
||||
StatusBadgeComponent,
|
||||
EmptyStateComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="page-container">
|
||||
<app-page-header title="Webhooks" subtitle="Manage event notifications">
|
||||
<button mat-raised-button color="primary" routerLink="new">
|
||||
<mat-icon>add</mat-icon>
|
||||
Register Webhook
|
||||
</button>
|
||||
</app-page-header>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="48"></mat-spinner>
|
||||
</div>
|
||||
} @else if (webhooks().length === 0) {
|
||||
<app-empty-state
|
||||
icon="webhook"
|
||||
title="No webhooks"
|
||||
message="Register a webhook to receive event notifications."
|
||||
>
|
||||
<button mat-raised-button color="primary" routerLink="new">
|
||||
<mat-icon>add</mat-icon>
|
||||
Register Webhook
|
||||
</button>
|
||||
</app-empty-state>
|
||||
} @else {
|
||||
<table mat-table [dataSource]="webhooks()">
|
||||
<ng-container matColumnDef="url">
|
||||
<th mat-header-cell *matHeaderCellDef>URL</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<span class="url-cell">{{ row.url }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef>Events</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<div class="events-chips">
|
||||
@for (event of row.events.slice(0, 2); track event) {
|
||||
<mat-chip>{{ formatEvent(event) }}</mat-chip>
|
||||
}
|
||||
@if (row.events.length > 2) {
|
||||
<mat-chip>+{{ row.events.length - 2 }}</mat-chip>
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef>Status</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<app-status-badge [status]="row.isActive ? 'ACTIVE' : 'INACTIVE'" />
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item (click)="testWebhook(row)">
|
||||
<mat-icon>send</mat-icon>
|
||||
<span>Test</span>
|
||||
</button>
|
||||
<button mat-menu-item [routerLink]="[row.id, 'logs']">
|
||||
<mat-icon>history</mat-icon>
|
||||
<span>View Logs</span>
|
||||
</button>
|
||||
<button mat-menu-item [routerLink]="[row.id, 'edit']">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="deleteWebhook(row)">
|
||||
<mat-icon color="warn">delete</mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.url-cell {
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
max-width: 300px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.events-chips {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mat-column-actions {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
`,
|
||||
],
|
||||
})
|
||||
export class WebhookListComponent implements OnInit {
|
||||
private readonly webhookService = inject(WebhookService);
|
||||
private readonly notification = inject(NotificationService);
|
||||
private readonly dialog = inject(MatDialog);
|
||||
|
||||
readonly loading = signal(true);
|
||||
readonly webhooks = signal<WebhookResponseDto[]>([]);
|
||||
|
||||
readonly displayedColumns = ['url', 'events', 'status', 'actions'];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadWebhooks();
|
||||
}
|
||||
|
||||
loadWebhooks(): void {
|
||||
this.loading.set(true);
|
||||
this.webhookService.getWebhooks().subscribe({
|
||||
next: (data) => {
|
||||
this.webhooks.set(data);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
formatEvent(event: string): string {
|
||||
return event.replace(/_/g, ' ').toLowerCase();
|
||||
}
|
||||
|
||||
testWebhook(webhook: WebhookResponseDto): void {
|
||||
this.webhookService.testWebhook(webhook.id).subscribe({
|
||||
next: (result) => {
|
||||
if (result.success) {
|
||||
this.notification.success(`Webhook test successful (${result.statusCode})`);
|
||||
} else {
|
||||
this.notification.error(`Webhook test failed: ${result.error || result.statusMessage}`);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
deleteWebhook(webhook: WebhookResponseDto): void {
|
||||
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
|
||||
data: {
|
||||
title: 'Delete Webhook',
|
||||
message: 'Are you sure you want to delete this webhook?',
|
||||
confirmText: 'Delete',
|
||||
confirmColor: 'warn',
|
||||
},
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((confirmed) => {
|
||||
if (confirmed) {
|
||||
this.webhookService.deleteWebhook(webhook.id).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Webhook deleted');
|
||||
this.loadWebhooks();
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { PageHeaderComponent } from '../../../shared/components/page-header/page-header.component';
|
||||
import { EmptyStateComponent } from '../../../shared/components/empty-state/empty-state.component';
|
||||
import { WebhookService } from '../services/webhook.service';
|
||||
import { WebhookLogEntryDto } from '../../../api/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-webhook-logs',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatCardModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatChipsModule,
|
||||
MatProgressSpinnerModule,
|
||||
PageHeaderComponent,
|
||||
EmptyStateComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="page-container">
|
||||
<app-page-header title="Webhook Logs" subtitle="Delivery history and status">
|
||||
<button mat-button routerLink="/webhooks">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
Back to Webhooks
|
||||
</button>
|
||||
</app-page-header>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="48"></mat-spinner>
|
||||
</div>
|
||||
} @else if (logs().length === 0) {
|
||||
<app-empty-state
|
||||
icon="history"
|
||||
title="No logs yet"
|
||||
message="Webhook delivery logs will appear here once events are triggered."
|
||||
/>
|
||||
} @else {
|
||||
<table mat-table [dataSource]="logs()">
|
||||
<ng-container matColumnDef="timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef>Timestamp</th>
|
||||
<td mat-cell *matCellDef="let row">{{ row.timestamp | date: 'medium' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="event">
|
||||
<th mat-header-cell *matHeaderCellDef>Event</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-chip>{{ formatEvent(row.event) }}</mat-chip>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef>Status</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<span class="status-code" [class.success]="isSuccess(row.statusCode)">
|
||||
{{ row.statusCode }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="responseTime">
|
||||
<th mat-header-cell *matHeaderCellDef>Response Time</th>
|
||||
<td mat-cell *matCellDef="let row">{{ row.responseTime }}ms</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="retries">
|
||||
<th mat-header-cell *matHeaderCellDef>Retries</th>
|
||||
<td mat-cell *matCellDef="let row">{{ row.retryCount }}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator
|
||||
[length]="totalItems()"
|
||||
[pageSize]="pageSize()"
|
||||
[pageIndex]="pageIndex()"
|
||||
[pageSizeOptions]="[10, 25, 50]"
|
||||
(page)="onPageChange($event)"
|
||||
showFirstLastButtons
|
||||
/>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-code {
|
||||
font-family: monospace;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #ffcdd2;
|
||||
color: #c62828;
|
||||
|
||||
&.success {
|
||||
background-color: #c8e6c9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
}
|
||||
`,
|
||||
],
|
||||
})
|
||||
export class WebhookLogsComponent implements OnInit {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
private readonly webhookService = inject(WebhookService);
|
||||
|
||||
readonly loading = signal(true);
|
||||
readonly logs = signal<WebhookLogEntryDto[]>([]);
|
||||
readonly totalItems = signal(0);
|
||||
readonly pageSize = signal(20);
|
||||
readonly pageIndex = signal(0);
|
||||
|
||||
readonly displayedColumns = ['timestamp', 'event', 'status', 'responseTime', 'retries'];
|
||||
|
||||
private webhookId: string | null = null;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.webhookId = this.route.snapshot.paramMap.get('id');
|
||||
if (!this.webhookId) {
|
||||
this.router.navigate(['/webhooks']);
|
||||
return;
|
||||
}
|
||||
this.loadLogs();
|
||||
}
|
||||
|
||||
loadLogs(): void {
|
||||
if (!this.webhookId) return;
|
||||
|
||||
this.loading.set(true);
|
||||
this.webhookService
|
||||
.getWebhookLogs(this.webhookId, this.pageIndex() + 1, this.pageSize())
|
||||
.subscribe({
|
||||
next: (response) => {
|
||||
this.logs.set(response.data);
|
||||
this.totalItems.set(response.total);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onPageChange(event: PageEvent): void {
|
||||
this.pageIndex.set(event.pageIndex);
|
||||
this.pageSize.set(event.pageSize);
|
||||
this.loadLogs();
|
||||
}
|
||||
|
||||
formatEvent(event: string): string {
|
||||
return event.replace(/_/g, ' ').toLowerCase();
|
||||
}
|
||||
|
||||
isSuccess(statusCode: number): boolean {
|
||||
return statusCode >= 200 && statusCode < 300;
|
||||
}
|
||||
}
|
||||
29
frontend/src/app/features/webhooks/webhooks.routes.ts
Normal file
29
frontend/src/app/features/webhooks/webhooks.routes.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { authGuard } from '../../core/guards';
|
||||
|
||||
export const WEBHOOKS_ROUTES: Routes = [
|
||||
{
|
||||
path: '',
|
||||
loadComponent: () =>
|
||||
import('./webhook-list/webhook-list.component').then((m) => m.WebhookListComponent),
|
||||
canActivate: [authGuard],
|
||||
},
|
||||
{
|
||||
path: 'new',
|
||||
loadComponent: () =>
|
||||
import('./webhook-form/webhook-form.component').then((m) => m.WebhookFormComponent),
|
||||
canActivate: [authGuard],
|
||||
},
|
||||
{
|
||||
path: ':id/logs',
|
||||
loadComponent: () =>
|
||||
import('./webhook-logs/webhook-logs.component').then((m) => m.WebhookLogsComponent),
|
||||
canActivate: [authGuard],
|
||||
},
|
||||
{
|
||||
path: ':id/edit',
|
||||
loadComponent: () =>
|
||||
import('./webhook-form/webhook-form.component').then((m) => m.WebhookFormComponent),
|
||||
canActivate: [authGuard],
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user