Enhance Global Status component layout with loading state handling and improved dialog dimensions

ogWebconsole/src/app/components/global-status/global-status.component.css

@@ -1,7 +1,13 @@
 mat-dialog-content {
+    height: calc(100% - 64px);
+    overflow: auto;
     padding-top: 0.5em !important;
 }
 
+.content-container {
+    min-height: 100%;
+}
+
 .action-container {
     display: flex;
     justify-content: flex-end;

ogWebconsole/src/app/components/global-status/global-status.component.html

@@ -2,8 +2,10 @@
 	<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"
@@ -16,9 +18,11 @@
 					[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"
@@ -31,6 +35,7 @@
 					[showLabels]="showLabels"
 					[isDhcp]="isDhcp">
 				</app-status-tab>
+			</div>
 		</mat-tab>
 
 		<mat-tab label="Pxe"> Content 3 </mat-tab>

ogWebconsole/src/app/layout/header/header.component.ts

@@ -49,6 +49,11 @@ export class HeaderComponent implements OnInit {
   }
 
   showGlobalStatus() {
-    this.dialog.open(GlobalStatusComponent)
+    this.dialog.open(GlobalStatusComponent, {
+      width: '45vw',
+      height: '80vh', 
+      // maxWidth: '60vw', 
+      // maxHeight: '60vh'
+    })
   }
 }