opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add loading spinner to Global Status component during data fetch

pull/18/head
Lucas Lara García 2025-03-21 10:42:11 +01:00
parent 44c4c60297
commit ebe14e0125
2 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ogWebconsole/src/app/components/global-status/global-status.component.css
View File

@ -14,3 +14,19 @@ mat-dialog-content {
gap: 1em;
padding: 1.5em;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
.loading-spinner {
width: 100px;
height: 100px;
}

80
ogWebconsole/src/app/components/global-status/global-status.component.html
View File

@ -1,46 +1,48 @@
<header>
<h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1>
<h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1>
</header>
<mat-dialog-content>
<app-loading [isLoading]="loading"></app-loading>
<mat-tab-group (selectedTabChange)="onTabChange($event)">
<mat-tab label="OgBoot">
<div *ngIf="!loading" class="content-container">
<app-status-tab
[loading]="loading"
[diskUsage]="ogBootDiskUsage"
[servicesStatus]="ogBootServicesStatus"
[installedOgLives]="installedOgLives"
[diskUsageChartData]="ogBootDiskUsageChartData"
[view]="view"
[colorScheme]="colorScheme"
[isDoughnut]="isDoughnut"
[showLabels]="showLabels"
[isDhcp]="isDhcp">
</app-status-tab>
</div>
</mat-tab>
<mat-dialog-content [ngClass]="{'loading': loading}">
<div class="spinner-container" *ngIf="loading">
<mat-spinner class="loading-spinner"></mat-spinner>
</div>
<mat-tab-group (selectedTabChange)="onTabChange($event)">
<mat-tab label="OgBoot">
<div *ngIf="!loading" class="content-container">
<app-status-tab
[loading]="loading"
[diskUsage]="ogBootDiskUsage"
[servicesStatus]="ogBootServicesStatus"
[installedOgLives]="installedOgLives"
[diskUsageChartData]="ogBootDiskUsageChartData"
[view]="view"
[colorScheme]="colorScheme"
[isDoughnut]="isDoughnut"
[showLabels]="showLabels"
[isDhcp]="isDhcp">
</app-status-tab>
</div>
</mat-tab>
<mat-tab label="Dhcp">
<div *ngIf="!loading" class="content-container">
<app-status-tab
[loading]="loading"
[diskUsage]="dhcpDiskUsage"
[servicesStatus]="dhcpServicesStatus"
[subnets]="subnets"
[diskUsageChartData]="dhcpDiskUsageChartData"
[view]="view"
[colorScheme]="colorScheme"
[isDoughnut]="isDoughnut"
[showLabels]="showLabels"
[isDhcp]="isDhcp">
</app-status-tab>
</div>
</mat-tab>
<mat-tab label="Dhcp">
<div *ngIf="!loading" class="content-container">
<app-status-tab
[loading]="loading"
[diskUsage]="dhcpDiskUsage"
[servicesStatus]="dhcpServicesStatus"
[subnets]="subnets"
[diskUsageChartData]="dhcpDiskUsageChartData"
[view]="view"
[colorScheme]="colorScheme"
[isDoughnut]="isDoughnut"
[showLabels]="showLabels"
[isDhcp]="isDhcp">
</app-status-tab>
</div>
</mat-tab>
<mat-tab label="Pxe"> Content 3 </mat-tab>
</mat-tab-group>
<mat-tab label="Pxe"> Content 3 </mat-tab>
</mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
<button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
</mat-dialog-actions>