From f7dcafbd529494df764b1e93ab0d5b77390a0ede Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 18 Mar 2025 13:55:40 +0100
Subject: [PATCH] refs #1724 OgBoot status added to global status component

---
 .../global-status/global-status.component.css | 69 +++++++++++++++++--
 .../global-status.component.html              | 26 +++----
 .../global-status/global-status.component.ts  |  7 +-
 3 files changed, 84 insertions(+), 18 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 0267674..0432265 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.css
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.css
@@ -1,8 +1,39 @@
-.action-container {
+.dashboard {
     display: flex;
-    justify-content: flex-end;
-    gap: 1em;
-    padding: 1.5em;
+    flex-direction: column;
+}
+
+mat-dialog-content {
+    padding-top: 0.5em !important;
+}
+
+.disk-usage-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.disk-usage {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.service-list {
+    margin-top: 0em;
+    margin-bottom: 0.5em;
+}
+
+.services-status {
+    display: flex;
+    flex-direction: column;
+}
+
+.services-status li {
+    margin: 5px 0;
+    display: flex;
+    align-items: center;
 }
 
 .status-led {
@@ -19,4 +50,34 @@
 
 .status-led.inactive {
     background-color: red;
+}
+
+.disk-title {
+    margin-bottom: 0px;
+}
+
+.service-title {
+    margin-top: 0px;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th,
+td {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+th {
+    background-color: #f4f4f4;
+}
+
+.action-container {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1em;
+    padding: 1.5em;
 }
\ No newline at end of file
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 5854768..8c076fa 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.html
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.html
@@ -7,24 +7,26 @@
             <app-loading [isLoading]="loading"></app-loading>
             <div *ngIf="!loading" class="dashboard">
                 <!-- Disk Usage Section -->
-                <div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
-                    <h3>{{ 'diskUsageTitle' | translate }}</h3>
-                    <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
-                        [gradient]="gradient" [doughnut]="isDoughnut" [labels]="showLabels">
-                    </ngx-charts-pie-chart>
-                    <div class="disk-usage-info">
-                        <p>{{ 'totalLabel' | translate }}: {{ formatBytes(ogBootDiskUsage.total) }}</p>
-                        <p>{{ 'usedLabel' | translate }}: {{ formatBytes(ogBootDiskUsage.used) }}</p>
-                        <p>{{ 'availableLabel' | translate }}: {{ formatBytes(ogBootDiskUsage.available) }}</p>
-                        <p>{{ 'freeLabel' | translate }}: {{ ogBootDiskUsage.percentage }}%</p>
+                <div class="disk-usage-container">
+                    <h3 class="disk-title">{{ 'diskUsageTitle' | translate }}</h3>
+                    <div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
+                        <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
+                            [doughnut]="isDoughnut" [labels]="showLabels">
+                        </ngx-charts-pie-chart>
+                        <div class="disk-usage-info">
+                            <p>{{ 'totalLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.total) }}</strong></p>
+                            <p>{{ 'usedLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.used) }}</strong></p>
+                            <p>{{ 'availableLabel' | translate }}: <strong>{{ formatBytes(ogBootDiskUsage.available) }}</strong></p>
+                            <p>{{ 'freeLabel' | translate }}: <strong>{{ ogBootDiskUsage.percentage }}</strong></p>
+                        </div>
                     </div>
                 </div>
 
                 <!-- Services Status Section -->
                 <div class="services-status" joyrideStep="servicesStatusStep"
                     text="{{ 'servicesStatusDescription' | translate }}">
-                    <h3>{{ 'servicesTitle' | translate }}</h3>
-                    <ul>
+                    <h3 class="service-title">{{ 'servicesTitle' | translate }}</h3>
+                    <ul class="service-list">
                         <li *ngFor="let service of getServices()">
                             <span class="status-led"
                                 [ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
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 29c0a46..e9783a3 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.ts
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.ts
@@ -24,7 +24,7 @@ export class GlobalStatusComponent implements OnInit {
   colorScheme: any = {
     domain: ['#df200d', '#26a700']
   };
-  view: [number, number] = [1100, 500];
+  view: [number, number] = [400, 220];
 
   constructor(
     private configService: ConfigService,
@@ -55,6 +55,7 @@ export class GlobalStatusComponent implements OnInit {
         this.loading = false;
       }
     });
+    this.loading = true;
   }
 
   onTabChange(event: MatTabChangeEvent): void {
@@ -67,10 +68,12 @@ export class GlobalStatusComponent implements OnInit {
     if (!this.ogBootServicesStatus) {
       return [];
     }
-    return Object.keys(this.ogBootServicesStatus).map(key => ({
+    const services = Object.keys(this.ogBootServicesStatus).map(key => ({
       name: key,
       status: this.ogBootServicesStatus[key]
     }))
+    console.log(services);
+    return services;
   }
 
   formatBytes(bytes: number): string {