My current objective is to filter via Instances, and I have implemented the following code: Within my component.ts file:
import { Component, OnInit } from "@angular/core";
import { AlertingService } from "src/app/services/alerting.service";
import { AlertingDB } from "src/app/models/alerting-db";
import { DatePipe } from "@angular/common";
import { MessageService } from "primeng/api";
@Component({
selector: "app-alerts-history",
templateUrl: "./alerts-history.component.html",
styleUrls: ["./alerts-history.component.css"]
})
export class AlertsHistoryComponent implements OnInit {
AlertsHistory: AlertingDB;
cols: string[];
constructor(
private alertingService: AlertingService,
public datepipe: DatePipe,
private messageService: MessageService
) {
this.cols = [
"Name",
"Instance",
"Severity",
"Summary",
"State",
"Active Date"
];
}
ngOnInit() {
this.alertingService.getAllAlertsFromDB().subscribe(res => {
this.AlertsHistory = res;
});
}
deleteHistory() {
this.alertingService.deleteAllAlertsFromDB().subscribe(async result => {
this.messageService.add({
severity: "info",
summary: "Success",
detail: `History Cleared`,
sticky: true
});
this.AlertsHistory = await this.alertingService
.getAllAlertsFromDB()
.toPromise();
});
}
}
In the corresponding component.HTML file:
<button
pButton
type="button"
label="Clear History"
class="ui-button-danger"
style="margin-bottom: 15px;margin-top: 15px;"
(click)="deleteHistory()"
></button>
<div>
<p-table
autoLayout="true"
ng-style="overflow: auto;"
#dt
[columns]="cols"
[value]="AlertsHistory"
[paginator]="true"
[rows]="15"
>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col">
{{ col }}
<p-sortIcon
[field]="col"
ariaLabel="Activate to sort"
ariaLabelDesc="Activate to sort in descending order"
ariaLabelAsc="Activate to sort in ascending order"
>
</p-sortIcon>
</th>
</tr>
<tr>
<th *ngFor="let col of columns" [ngSwitch]="col">
<input
*ngSwitchCase="'Instance'"
pInputText
type="text"
(input)="dt.filter($event.target.value, col, col.filterMatchMode)"
/>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-alert>
<tr [pSelectableRow]="alert">
<td>{{ alert.name }}</td>
<td>{{ alert.instance }}</td>
<td>{{ alert.severity }}</td>
<td>{{ alert.summary }}</td>
<td>{{ alert.state }}</td>
<td>{{ alert.activeAt | date: "medium" }}</td>
</tr>
</ng-template>
</p-table>
</div>
The associated component.model.ts file contains:
export class AlertingDB {
id: number;
name: string;
instance: string;
severity: string;
summary: string;
state: string;
activeAt: string;
}
Finally, within my component.service.ts file:
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { Response } from "@angular/http";
import { environment } from "src/environments/environment";
import { Alerting } from "../models/alerting";
import { AlertingDB } from "../models/alerting-db";
@Injectable({
providedIn: "root"
})
export class AlertingService {
private AlertingUrl = environment.API_URL + "Alerting"; // URL to web api
constructor(private http: HttpClient) {}
getAllAlertsFromDB(): Observable<AlertingDB> {
return this.http.get(this.AlertingUrl + "/getAll").pipe(
map((response: AlertingDB) => {
return <AlertingDB>response;
})
);
}
deleteAllAlertsFromDB(): Observable<AlertingDB> {
return this.http.delete<AlertingDB>(this.AlertingUrl);
}
}
Despite all functions working correctly, there seems to be an issue with the filtering functionality. Although no errors are shown in the console, the filter function does not provide the expected results. For example: When fetching all instances, everything appears as expected:
https://i.sstatic.net/Cjkem.png
However, when attempting to filter the instances, it returns 0 items:
https://i.sstatic.net/iFdiS.png
If anyone can offer assistance on resolving this filtering problem, it would be greatly appreciated. Thank you! :)