From bc006d1b3a3e9832be6b15a2a478473c9a95c324 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Mon, 27 Oct 2025 12:17:38 +0200 Subject: [PATCH 1/3] feat: update audit component to format log dates and enhance status display --- .../src/app/components/audit/audit-data-source.ts | 2 +- frontend/src/app/components/audit/audit.component.css | 11 +++++++++++ .../src/app/components/audit/audit.component.html | 8 +++++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/audit/audit-data-source.ts b/frontend/src/app/components/audit/audit-data-source.ts index 0ef494a76..97880383a 100644 --- a/frontend/src/app/components/audit/audit-data-source.ts +++ b/frontend/src/app/components/audit/audit-data-source.ts @@ -70,7 +70,7 @@ export class AuditDataSource implements DataSource { } const formattedLogs = res.logs.map(log => { const date = new Date(log.createdAt); - const formattedDate = format(date, "P p") + const formattedDate = format(date, "d MMM yyyy 'at' h:mm a") return { ['Table']: log.table_name, ['User']: log.email, diff --git a/frontend/src/app/components/audit/audit.component.css b/frontend/src/app/components/audit/audit.component.css index 4e5bf39de..38b199ba7 100644 --- a/frontend/src/app/components/audit/audit.component.css +++ b/frontend/src/app/components/audit/audit.component.css @@ -110,4 +110,15 @@ th.mat-header-cell, td.mat-cell { .hidden { display: none; +} + +.status-badge { + display: inline-block; + padding: 4px 12px; + border-radius: 4px; +} + +.status-succeed { + background-color: #EBF9EB; + color: #1A5E20; } \ No newline at end of file diff --git a/frontend/src/app/components/audit/audit.component.html b/frontend/src/app/components/audit/audit.component.html index 37b4601e2..8f560146e 100644 --- a/frontend/src/app/components/audit/audit.component.html +++ b/frontend/src/app/components/audit/audit.component.html @@ -73,7 +73,13 @@

Rocketadmin can not find any tables

{{ column }}
- {{element[column] || '—'}} + + {{element[column]}} + + + {{element[column] || '—'}} +
From 6b4ed423bb4f48a7cc1fcaa991c87620169b296a Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 31 Oct 2025 11:25:52 +0200 Subject: [PATCH 2/3] 111 1111111 --- .../app/components/audit/audit-data-source.ts | 24 ++++++++-- .../app/components/audit/audit.component.css | 47 +++++++++++++++++++ .../app/components/audit/audit.component.html | 24 +++++++++- .../app/components/audit/audit.component.ts | 19 +++++--- 4 files changed, 103 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/components/audit/audit-data-source.ts b/frontend/src/app/components/audit/audit-data-source.ts index 97880383a..64d315d9f 100644 --- a/frontend/src/app/components/audit/audit-data-source.ts +++ b/frontend/src/app/components/audit/audit-data-source.ts @@ -27,6 +27,7 @@ export class AuditDataSource implements DataSource { public loading$ = this.loadingSubject.asObservable(); public paginator: MatPaginator; + public usersList: any[] = []; constructor(private _connections: ConnectionsService) {} @@ -68,15 +69,32 @@ export class AuditDataSource implements DataSource { rowReceived: 'received row', rowsReceived: 'received rows' } + const statuses = { + successfully: 'successfully', + unsuccessfully: 'failed', + unknown: 'unknown' + } const formattedLogs = res.logs.map(log => { const date = new Date(log.createdAt); - const formattedDate = format(date, "d MMM yyyy 'at' h:mm a") + const formattedDateOnly = format(date, "d MMM yyyy") + const formattedTimeOnly = format(date, "h:mm a") + const user = this.usersList.find(u => u.email === log.email); + const isViewAction = log.operationType === 'rowReceived' || log.operationType === 'rowsReceived'; + const isEditAction = log.operationType === 'updateRow'; + const isDeleteAction = log.operationType === 'deleteRow'; return { ['Table']: log.table_name, ['User']: log.email, + ['UserName']: user?.name || null, + ['UserEmail']: log.email, ['Action']: actions[log.operationType], - ['Date']: formattedDate, - ['Status']: log.operationStatusResult, + ['IsViewAction']: isViewAction, + ['IsEditAction']: isEditAction, + ['IsDeleteAction']: isDeleteAction, + ['Date']: formattedDateOnly, + ['DateOnly']: formattedDateOnly, + ['TimeOnly']: formattedTimeOnly, + ['Status']: statuses[log.operationStatusResult] || log.operationStatusResult, operationType: log.operationType, createdAt: log.createdAt, prevValue: log.old_data, diff --git a/frontend/src/app/components/audit/audit.component.css b/frontend/src/app/components/audit/audit.component.css index 38b199ba7..a28ce70c7 100644 --- a/frontend/src/app/components/audit/audit.component.css +++ b/frontend/src/app/components/audit/audit.component.css @@ -121,4 +121,51 @@ th.mat-header-cell, td.mat-cell { .status-succeed { background-color: #EBF9EB; color: #1A5E20; +} + +.status-failed { + background-color: #FDDBD2; +} + +.user-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.user-name { + font-size: 14px; + font-weight: 500; + line-height: 1.2; +} + +.user-email { + font-size: 12px; + color: rgba(0, 0, 0, 0.6); + line-height: 1.2; +} + +@media (prefers-color-scheme: dark) { + .user-email { + color: rgba(255, 255, 255, 0.6); + } +} + +.action-with-icon { + display: flex; + align-items: center; + gap: 6px; +} + +.action-icon { + font-size: 16px; + width: 16px; + height: 16px; + color: rgba(0, 0, 0, 0.5); +} + +@media (prefers-color-scheme: dark) { + .action-icon { + color: rgba(255, 255, 255, 0.5); + } } \ No newline at end of file diff --git a/frontend/src/app/components/audit/audit.component.html b/frontend/src/app/components/audit/audit.component.html index 8f560146e..3a016c143 100644 --- a/frontend/src/app/components/audit/audit.component.html +++ b/frontend/src/app/components/audit/audit.component.html @@ -74,10 +74,30 @@

Rocketadmin can not find any tables

+ [ngClass]="{'status-badge': true, 'status-succeed': element[column] === 'successfully', 'status-failed': element[column] === 'failed'}"> {{element[column]}} - + + +
+ visibility + {{element[column]}} +
+
+ create + {{element[column]}} +
+
+ delete + {{element[column]}} +
+ {{element[column] || '—'}}
diff --git a/frontend/src/app/components/audit/audit.component.ts b/frontend/src/app/components/audit/audit.component.ts index efff0fc26..059fbb4d4 100644 --- a/frontend/src/app/components/audit/audit.component.ts +++ b/frontend/src/app/components/audit/audit.component.ts @@ -14,6 +14,7 @@ import { Log } from 'src/app/models/logs'; import { MatButtonModule } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; import { MatPaginator } from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSelectModule } from '@angular/material/select'; @@ -40,6 +41,7 @@ import { normalizeTableName } from 'src/app/lib/normalize'; MatFormFieldModule, MatSelectModule, MatButtonModule, + MatIconModule, MatTableModule, MatPaginatorModule, FormsModule, @@ -100,7 +102,17 @@ export class AuditComponent implements OnInit { this.columns = ['Table', 'User', 'Action', 'Date', 'Status', 'Details']; this.dataColumns = ['Table', 'User', 'Action', 'Date', 'Status']; this.dataSource = new AuditDataSource(this._connections); - this.loadLogsPage(); + + if (this.accesLevel !== 'none') { + this._users.fetchConnectionUsers(this.connectionID) + .subscribe(res => { + this.usersList = res; + this.dataSource.usersList = res; + this.loadLogsPage(); + }); + } else { + this.loadLogsPage(); + } this._tables.fetchTables(this.connectionID) .subscribe( @@ -117,11 +129,6 @@ export class AuditComponent implements OnInit { this.isServerError = true; this.serverError = {abstract: err.error.message, details: err.error.originalMessage}; }) - - if (this.accesLevel !== 'none') this._users.fetchConnectionUsers(this.connectionID) - .subscribe(res => { - this.usersList = res; - }) } loadLogsPage() { From 863c4a29c016d0b7ae0a9dc3095b10312b8f47c9 Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Mon, 3 Nov 2025 14:34:11 +0200 Subject: [PATCH 3/3] feat: enhance audit component with user details and action icons, update status display --- frontend/src/app/components/audit/audit-data-source.ts | 2 ++ frontend/src/app/components/audit/audit.component.html | 10 +++++++--- frontend/src/app/components/audit/audit.component.ts | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/components/audit/audit-data-source.ts b/frontend/src/app/components/audit/audit-data-source.ts index 64d315d9f..da18a1804 100644 --- a/frontend/src/app/components/audit/audit-data-source.ts +++ b/frontend/src/app/components/audit/audit-data-source.ts @@ -82,6 +82,7 @@ export class AuditDataSource implements DataSource { const isViewAction = log.operationType === 'rowReceived' || log.operationType === 'rowsReceived'; const isEditAction = log.operationType === 'updateRow'; const isDeleteAction = log.operationType === 'deleteRow'; + const isAddAction = log.operationType === 'addRow'; return { ['Table']: log.table_name, ['User']: log.email, @@ -91,6 +92,7 @@ export class AuditDataSource implements DataSource { ['IsViewAction']: isViewAction, ['IsEditAction']: isEditAction, ['IsDeleteAction']: isDeleteAction, + ['IsAddAction']: isAddAction, ['Date']: formattedDateOnly, ['DateOnly']: formattedDateOnly, ['TimeOnly']: formattedTimeOnly, diff --git a/frontend/src/app/components/audit/audit.component.html b/frontend/src/app/components/audit/audit.component.html index 3a016c143..f70e3907f 100644 --- a/frontend/src/app/components/audit/audit.component.html +++ b/frontend/src/app/components/audit/audit.component.html @@ -89,6 +89,10 @@

Rocketadmin can not find any tables

visibility {{element[column]}} +
+ add + {{element[column]}} +
create {{element[column]}} @@ -97,15 +101,15 @@

Rocketadmin can not find any tables

delete {{element[column]}}
- + {{element[column] || '—'}} - - Details + + Changes