File

projects/cobbler-frontend/src/app/actions/check-sys/check-sys.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(userService: UserService, cobblerApiService: CobblerApiService, _snackBar: MatSnackBar)
Parameters :
Name Type Optional
userService UserService No
cobblerApiService CobblerApiService No
_snackBar MatSnackBar No

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
updateChecks
updateChecks()
Returns : void

Properties

Public data
Type : Observable<Array<string>>
Default value : of([])
Public isLoading
Default value : true
Private ngUnsubscribe
Default value : new Subject<void>()
Public userService
Type : UserService
import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltip } from '@angular/material/tooltip';
import { RouterOutlet } from '@angular/router';
import { CobblerApiService } from 'cobbler-api';
import { Observable, of, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UserService } from '../../services/user.service';
import Utils from '../../utils';

@Component({
  selector: 'cobbler-check-sys',
  templateUrl: './check-sys.component.html',
  styleUrls: ['./check-sys.component.scss'],
  standalone: true,
  imports: [
    RouterOutlet,
    MatListModule,
    CommonModule,
    MatButton,
    MatIconButton,
    MatIcon,
    MatTooltip,
    MatProgressSpinner,
  ],
})
export class CheckSysComponent implements OnInit, OnDestroy {
  // Unsubscribe
  private ngUnsubscribe = new Subject<void>();

  // Data
  public data: Observable<Array<string>> = of([]);
  public isLoading = true;

  constructor(
    public userService: UserService,
    private cobblerApiService: CobblerApiService,
    private _snackBar: MatSnackBar,
  ) {}

  ngOnInit(): void {
    this.updateChecks();
  }

  ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  updateChecks(): void {
    this.isLoading = true;
    this.cobblerApiService
      .check(this.userService.token)
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(
        (data) => {
          this.data = of(data);
          this.isLoading = false;
        },
        (error) => {
          // HTML encode the error message since it originates from XML
          this._snackBar.open(Utils.toHTML(error.message), 'Close');
          this.isLoading = false;
        },
      );
  }
}
<div class="right-column" id="dataScreen">
  <router-outlet></router-outlet>
  <div class="CheckSys-div">
    <div class="title-table">
      <div class="title-row">
        <h1 class="title title-cell-text">CHECK</h1>
        <span class="title-cell-button">
          <button mat-icon-button (click)="this.updateChecks()">
            <mat-icon>refresh</mat-icon>
          </button>
        </span>
      </div>
    </div>
    <div class="list-group">
      <mat-spinner *ngIf="isLoading" style="margin: 0 auto"></mat-spinner>
      <ng-container *ngIf="!isLoading">
        <mat-list>
          <ng-template ngFor [ngForOf]="this.data | async" let-element>
            <mat-list-item>{{ element }}</mat-list-item>
          </ng-template>
        </mat-list>
      </ng-container>
    </div>
  </div>
</div>

./check-sys.component.scss

.title-table {
  display: table;
  width: 100%;
}

.title-row {
  display: table-cell;
  width: 100%;
}

.title-cell-text {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}

.title-cell-button {
  display: table-cell;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""