refs #1724 OgBoot status added to global status component

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;
 }

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>

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 {