System views updated

This commit is contained in:
Jose Alberto Hernandez
2025-05-24 22:46:53 -05:00
parent 7ab980c2ba
commit 14c539a605
34 changed files with 291 additions and 237 deletions
@@ -39,6 +39,8 @@ export class AuditTrailsDataSource implements DataSource<any> {
pageIndex: number = 0,
limit: number = 10
) {
console.log(pageIndex);
console.log(limit);
this.auditTrailsSubject.next([]);
this.systemService
.getAuditTrails(filterBy, orderBy, sortOrder, pageIndex * limit, limit)
@@ -1,4 +1,4 @@
<div class="container m-b-20 layout-row align-end gap-20px">
<div class="container m-b-20 layout-row align-end">
<button mat-raised-button color="primary" (click)="downloadCSV()">
<fa-icon icon="file" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Download CSV' | translate }}
@@ -110,7 +110,10 @@
</mat-autocomplete>
<div class="container mat-elevation-z8 table-container">
<table mat-table [dataSource]="dataSource" matSort>
<div *ngIf="isLoading">
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<table *ngIf="!isLoading" mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trail ID' | translate }}</th>
<td mat-cell *matCellDef="let auditTrail">{{ auditTrail.id }}</td>
@@ -166,6 +169,7 @@
</table>
<mat-paginator
*ngIf="!isLoading"
[length]="dataSource?.records$ | async"
[pageSize]="10"
[pageSizeOptions]="[10, 25, 50, 100]"
@@ -129,10 +129,12 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
/** Checker form control. */
checker = new UntypedFormControl();
isLoading = false;
/** Paginator for audit trails table. */
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatPaginator) paginator: MatPaginator;
/** Sorter for audit trails table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatSort) sort: MatSort;
/**
* Retrieves the audit trail search template data from `resolve`.
@@ -161,6 +163,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
this.setFilteredActions();
this.setFilteredEntities();
this.setFilteredCheckers();
this.dataSource = new AuditTrailsDataSource(this.systemService);
this.getAuditTrails();
}
@@ -264,7 +267,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
)
.subscribe();
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
//this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
merge(this.sort.sortChange, this.paginator.page)
.pipe(tap(() => this.loadAuditTrailsPage()))
@@ -275,14 +278,14 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
* Initializes the data source for audit trails table and loads the first page.
*/
getAuditTrails() {
this.dataSource = new AuditTrailsDataSource(this.systemService);
this.dataSource.getAuditTrails(
this.filterAuditTrailsBy,
this.sort.active,
this.sort.direction,
this.paginator.pageIndex,
this.paginator.pageSize
);
this.isLoading = true;
const isActive: string = this.sort ? this.sort.active : '';
const direction: string = this.sort ? this.sort.direction : '';
const pageIndex: number = this.paginator ? this.paginator.pageIndex : 0;
const pageSize: any = this.paginator ? this.paginator.pageSize : 20;
this.dataSource.getAuditTrails(this.filterAuditTrailsBy, isActive, direction, pageIndex, pageSize);
this.isLoading = false;
}
/**
@@ -292,13 +295,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
if (!this.sort.direction) {
delete this.sort.active;
}
this.dataSource.getAuditTrails(
this.filterAuditTrailsBy,
this.sort.active,
this.sort.direction,
this.paginator.pageIndex,
this.paginator.pageSize
);
this.getAuditTrails();
}
/**
@@ -1,108 +1,116 @@
<div class="container layout-row-wrap align-between responsive-column gap-4percent">
<div class="flex-46">
<mat-card>
<mat-card-content>
<div class="layout-row-wrap">
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.ID' | translate }}
</div>
<div class="container layout-row align-between responsive-column">
<mat-card class="flex-100">
<mat-card-content class="flex-100">
<div class="layout-row flex-100">
<div class="flex-46">
<div class="layout-row-wrap">
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.ID' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.id }}
</div>
<div class="flex-50">
{{ auditTrailData.id }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Status' | translate }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Status' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.processingResult }}
</div>
<div class="flex-50">
{{ auditTrailData.processingResult }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.User' | translate }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.User' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.maker }}
</div>
<div class="flex-50">
{{ auditTrailData.maker }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Action' | translate }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Action' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.actionName }}
</div>
<div class="flex-50">
{{ auditTrailData.actionName }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Entity' | translate }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Entity' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.entityName }}
</div>
<div class="flex-50">
{{ auditTrailData.entityName }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Resource ID' | translate }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Resource ID' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.resourceId }}
</div>
<div class="flex-50">
{{ auditTrailData.resourceId }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Date' | translate }}
</div>
<div class="flex-50 mat-body-strong">
{{ 'labels.inputs.Date' | translate }}
</div>
<div class="flex-50">
{{ auditTrailData.madeOnDate | dateFormat }}
</div>
<div class="flex-50">
{{ auditTrailData.madeOnDate | dateFormat }}
</div>
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
{{ 'labels.inputs.Office' | translate }}
</div>
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
{{ 'labels.inputs.Office' | translate }}
</div>
<div class="flex-50" *ngIf="auditTrailData.officeName">
{{ auditTrailData.officeName }}
</div>
<div class="flex-50" *ngIf="auditTrailData.officeName">
{{ auditTrailData.officeName }}
</div>
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
{{ 'labels.inputs.Savings Account No' | translate }}
</div>
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
{{ 'labels.inputs.Savings Account No' | translate }}
</div>
<div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
{{ auditTrailData.savingsAccountNo }}
</div>
<div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
{{ auditTrailData.savingsAccountNo }}
</div>
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
{{ 'labels.inputs.Group Level' | translate }}
</div>
<div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
{{ 'labels.inputs.Group Level' | translate }}
</div>
<div class="flex-50" *ngIf="auditTrailData.groupLevelName">
{{ auditTrailData.groupLevelName }}
<div class="flex-50" *ngIf="auditTrailData.groupLevelName">
{{ auditTrailData.groupLevelName }}
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="flex-46">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="command">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
<td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
</ng-container>
<div class="flex-46 command">
<table mat-table [dataSource]="dataSource" class="command-table" matSort>
<ng-container matColumnDef="command">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
<td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
</ng-container>
<ng-container matColumnDef="commandValue">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
<td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
{{ auditTrailCommand.commandValue }}
</td>
</ng-container>
<ng-container matColumnDef="commandValue">
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
<td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
{{ auditTrailCommand.commandValue }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
</div>
<div class="layout-row layout-align-center m-t-20 column-on-mobile">
<button type="button" mat-raised-button color="primary" [routerLink]="['../']">
{{ 'labels.buttons.Back' | translate }}
</button>
</div>
</mat-card-content>
</mat-card>
</div>
@@ -12,3 +12,11 @@ table {
.column-value-wrapper {
word-break: break-all;
}
.command {
background-color: #eee;
}
.command-table {
background-color: inherit;
}
@@ -6,12 +6,12 @@
</mat-form-field>
</div>
<div #configurationsTable class="mat-elevation-z8">
<div #configurationsTable class="mat-elevation-z8 m-b-10">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
<td mat-cell *matCellDef="let configuration">
{{ configuration.name }}&nbsp;&nbsp;
<span class="m-r-10">{{ configuration.name }}</span>
<fa-icon
*ngIf="configuration.description"
icon="question-circle"
@@ -1,12 +1,3 @@
table {
width: 100%;
}
// TODO: CONFIGURE THESE CLASSES GLOBALLY
.enabled {
color: #32cd32;
}
.disabled {
color: #f44366;
}
@@ -99,7 +99,7 @@ export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {
*/
toggleStatus(configuration: any) {
this.systemService
.updateConfiguration(configuration.id, { enabled: !configuration.enabled })
.updateConfiguration(configuration.id, { enabled: configuration.enabled })
.subscribe((response: any) => {
configuration.enabled = response.changes.enabled;
if (configuration.name === SettingsService.businessDateConfigName) {
@@ -3,3 +3,7 @@
margin-left: auto;
}
}
.table-container {
padding-bottom: 10px;
}
@@ -56,7 +56,7 @@ export class ManageExternalEventsComponent implements OnInit {
* Enables/Disables respective event
*/
toggleStatus(event: any) {
this.externalEventConfigurations[event.type] = !event.enabled;
this.externalEventConfigurations[event.type] = event.enabled;
this.existAnyUpdate = true;
}
@@ -1,6 +1,6 @@
.container-card {
margin: 0 auto;
max-width: 80rem;
max-width: 90rem;
width: 90%;
padding: 0;
padding-bottom: 50px;
@@ -24,7 +24,7 @@
</mat-form-field>
</div>
<div class="space-top layout-row gap-20percent">
<div class="space-top layout-row gap-10px">
<button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
<fa-icon icon="play" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Run Selected Jobs' | translate }}
@@ -135,7 +135,7 @@
mat-icon-button
class="errorlog"
(click)="showErrorLog(job)"
*ngIf="!(job.lastRunHistory && job.lastRunHistory.status === 'success')"
*ngIf="jobWithError(job)"
matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
matTooltipPosition="right"
>
@@ -145,14 +145,14 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" ngClass="{{ rowColor(row) }}"></tr>
</table>
<mat-paginator [pageSizeOptions]="[50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
<div class="container space-top layout-row gap-20percent">
<div class="container space-top layout-row gap-10px">
<button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
<fa-icon icon="play" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Run Selected Jobs' | translate }}
@@ -1,3 +1,8 @@
.container {
min-width: 84rem;
width: 84rem;
}
table {
width: 100%;
@@ -26,6 +31,10 @@ table {
color: #ffa726;
}
.job-error {
background-color: #f7dbb7;
}
.suspend {
background: #32cd32;
color: #fff;
@@ -126,11 +126,12 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
* Initializes the data source, paginator and sorter for manage scheduler jobs table.
*/
setJobs() {
this.systemService.getJobs().subscribe((jobData: any) => {
this.dataSource = new MatTableDataSource(jobData);
this.systemService.getJobs().subscribe((jobData: any[]) => {
const sortedData = jobData.sort((a, b) => b.active - a.active || this.sortByName(a, b));
this.dataSource = new MatTableDataSource(sortedData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.jobsCounter = jobData.length;
this.jobsCounter = sortedData.length;
this.selection.clear();
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
@@ -149,6 +150,18 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
});
}
sortByName(a: any, b: any): number {
// Sort on name
if (a.displayName < b.displayName) {
return -1;
}
if (a.displayName > b.displayName) {
return 1;
}
// Both idential, return 0
return 0;
}
getScheduler() {
this.systemService.getScheduler().subscribe((schedulerData: any) => {
this.schedulerData = schedulerData;
@@ -303,4 +316,15 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
}
});
}
jobWithError(job: any): boolean {
return !(job.lastRunHistory && job.lastRunHistory.status === 'success');
}
rowColor(job: any): string {
if (this.jobWithError(job)) {
return 'job-error';
}
return '';
}
}
@@ -1,12 +1,12 @@
<div class="container">
<div class="layout-row gap-20px">
<div class="layout-row m-b-10">
<mat-form-field class="flex-fill">
<mat-label>{{ 'labels.inputs.Filter By Version' | translate }}</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)" />
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div class="mat-elevation-z8 container">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="version">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Version' | translate }}</th>
@@ -72,7 +72,7 @@
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
<div class="layout-row layout-align-center gap-2percent layout-lt-md-column">
<div class="layout-row layout-align-center">
<button type="button" color="primary" mat-raised-button [routerLink]="['../']">
{{ 'labels.buttons.Back' | translate }}
</button>
@@ -1,5 +1,9 @@
.container {
padding-bottom: 15px;
}
table {
width: 100%;
width: 96%;
.select-row:hover {
cursor: pointer;