From 44c4c60297db597e0e35db4a487f024ffd86702d Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Thu, 20 Mar 2025 14:17:49 +0100
Subject: [PATCH] Enhance Global Status component layout with loading state
 handling and improved dialog dimensions

---
 .../global-status/global-status.component.css |  6 +++
 .../global-status.component.html              | 53 ++++++++++---------
 .../global-status/global-status.component.ts  |  2 +-
 .../src/app/layout/header/header.component.ts |  7 ++-
 4 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.css b/ogWebconsole/src/app/components/global-status/global-status.component.css
index e904d94..667f99d 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.css
+++ b/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;
diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.html b/ogWebconsole/src/app/components/global-status/global-status.component.html
index dce42df..d6f2044 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.html
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.html
@@ -2,35 +2,40 @@
 	<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">
-			<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 *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">
-			<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 *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>
diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.ts b/ogWebconsole/src/app/components/global-status/global-status.component.ts
index 6272b4b..cd17fd2 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.ts
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.ts
@@ -109,4 +109,4 @@ export class GlobalStatusComponent implements OnInit {
       this.loadDhcpStatus();
     }
   }
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/header/header.component.ts b/ogWebconsole/src/app/layout/header/header.component.ts
index 8365ed9..7e50f1d 100644
--- a/ogWebconsole/src/app/layout/header/header.component.ts
+++ b/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'
+    })
   }
 }