File
Implements
Methods
|
applyFilter
|
applyFilter(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
displayedColumns
|
Type : string[]
|
Default value : [
'ip',
'objType',
'name',
'mostRecentStart',
'mostRecentStop',
'seenStart',
'seenStop',
'state',
]
|
|
|
|
Private
ngUnsubscribe
|
Default value : new Subject<void>()
|
|
|
|
paginator
|
Type : MatPaginator
|
Decorators :
@ViewChild(MatPaginator)
|
|
|
|
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort)
|
|
|
import { DatePipe } from '@angular/common';
import {
AfterViewInit,
Component,
OnDestroy,
OnInit,
ViewChild,
} from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { CobblerApiService, InstallationStatus } from 'cobbler-api';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserService } from '../../services/user.service';
@Component({
selector: 'cobbler-status',
standalone: true,
imports: [
MatFormFieldModule,
MatInputModule,
MatTableModule,
MatPaginatorModule,
MatSort,
DatePipe,
],
templateUrl: './status.component.html',
styleUrl: './status.component.scss',
})
export class StatusComponent implements OnInit, OnDestroy, AfterViewInit {
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Table
displayedColumns: string[] = [
'ip',
'objType',
'name',
'mostRecentStart',
'mostRecentStop',
'seenStart',
'seenStop',
'state',
];
dataSource: MatTableDataSource<InstallationStatus> = new MatTableDataSource(
[],
);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(
public userService: UserService,
private cobblerApiService: CobblerApiService,
) {}
ngOnInit(): void {
this.cobblerApiService
.get_status('normal', this.userService.token)
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((value) => {
console.log(value);
this.dataSource.data = value;
});
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
<h1 class="title">Installation Status</h1>
<mat-form-field>
<mat-label>Filter</mat-label>
<input
matInput
(keyup)="applyFilter($event)"
placeholder="Ex. 10.0.0.1"
#input
/>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- IP Column -->
<ng-container matColumnDef="ip">
<th mat-header-cell *matHeaderCellDef>IP</th>
<td mat-cell *matCellDef="let element">{{ element.ip }}</td>
</ng-container>
<!-- Object Type Column -->
<ng-container matColumnDef="objType">
<th mat-header-cell *matHeaderCellDef>Object Type</th>
<td mat-cell *matCellDef="let element">
{{ element.mostRecentTarget.split(":")[0] }}
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">
{{ element.mostRecentTarget.split(":")[1] }}
</td>
</ng-container>
<!-- Most Recent Start Column -->
<ng-container matColumnDef="mostRecentStart">
<th mat-header-cell *matHeaderCellDef>Most Recent Start</th>
<td mat-cell *matCellDef="let element">
{{ element.mostRecentStart * 1000 | date: "short" }}
</td>
</ng-container>
<!-- Most Recent Stop Column -->
<ng-container matColumnDef="mostRecentStop">
<th mat-header-cell *matHeaderCellDef>Most Recent Stop</th>
<td mat-cell *matCellDef="let element">
{{ element.mostRecentStop * 1000 | date: "short" }}
</td>
</ng-container>
<!-- Seen Start Column -->
<ng-container matColumnDef="seenStart">
<th mat-header-cell *matHeaderCellDef>Seen Start Counter</th>
<td mat-cell *matCellDef="let element">{{ element.seenStop }}</td>
</ng-container>
<!-- Seen Stop Column -->
<ng-container matColumnDef="seenStop">
<th mat-header-cell *matHeaderCellDef>Seen Stop Counter</th>
<td mat-cell *matCellDef="let element">{{ element.seenStop }}</td>
</ng-container>
<!-- State Column -->
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>State</th>
<td mat-cell *matCellDef="let element">{{ element.state }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
No data matching the filter "{{ input.value }}"
</td>
</tr>
</table>
<!-- Paginator -->
<mat-paginator
[pageSizeOptions]="[5, 10, 25, 100]"
aria-label="Select number of installations"
></mat-paginator>
</div>
Legend
Html element with directive