Refactor monitoring stats layout and initialization (#415)

Replaced modal-based layout with a card-based layout in monitoring-stats.component.html to improve UI consistency. Added OnInit interface to MonitoringStatsComponent for better chart initialization. Removed redundant component placements and adjusted CSS styles for better spacing.
ludeknovy · Sep 11, 2024 · 0f24f59 · 0f24f59
1 parent 543bee6
commit 0f24f59
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 24 deletions.
diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
@@ -337,8 +337,6 @@ <h6 class="card-header bg-white border-0">Summary</h6>
                 <div class="row" *ngIf="itemData.monitoring.cpu.data.length > 0">
                   <div class="col-sm mb-1 summary-bold">Max CPU usage</div>
                   <div class="col-sm mb-1">{{itemData.monitoring.cpu.max}}%
-                    <app-monitoring-stats [data]="itemData.monitoring.cpu.data">
-                    </app-monitoring-stats>
                   </div>
                 </div>
               </div>
@@ -419,6 +417,8 @@ <h6 class="card-header bg-transparent">Status Codes Chart</h6>
                 </div>
               </div>
 
+
+
               <div class="row" *ngIf="itemData.sutOverview && itemData.sutOverview.length > 1">
                 <div class="col">
                   <div class="card table-stats card-shadow">
@@ -515,6 +515,19 @@ <h6 class="card-header bg-transparent">Target System Statistics <span class="com
             </ng-template>
           </li>
 
+          <li ngbNavItem [ngbNavItem]="4" *ngIf="itemData.monitoring.cpu.data.length !== 0">
+            <a ngbNavLink class="nav-link bg-transparent">Monitoring</a>
+            <ng-template ngbNavContent>
+              <div class="row charts">
+                <div class="col tab-charts">
+                  <app-monitoring-stats [data]="itemData.monitoring.cpu.data">
+                  </app-monitoring-stats>
+                </div>
+              </div>
+
+            </ng-template>
+          </li>
+
 
         </ul>
         <div [ngbNavOutlet]="nav"></div>

diff --git a/src/app/item-detail/monitoring-stats/monitoring-stats.component.css b/src/app/item-detail/monitoring-stats/monitoring-stats.component.css
@@ -11,3 +11,8 @@
 .monitoring-data:hover {
   color: #105196
 }
+
+
+.card {
+  margin-top: 20px;
+}
diff --git a/src/app/item-detail/monitoring-stats/monitoring-stats.component.html b/src/app/item-detail/monitoring-stats/monitoring-stats.component.html
@@ -1,19 +1,16 @@
-<ng-template #content let-modal>
-  <div class="modal-header" ngbAutofocus>
-    <h5 class="modal-title" id="modal-basic-title">Monitoring stats</h5>
-    <button type="button" style="outline: none;" class="btn-close" aria-label="" (click)="modal.dismiss('Cross click')">
-
-    </button>
-  </div>
-  <div class="modal-body">
-    <div *ngIf="monitoringChartOptions">
-      <highcharts-chart [Highcharts]="Highcharts" [options]="monitoringChartOptions" [callbackFunction]="chartCallback" [(update)]="updateFlag"
-        [constructorType]="chartConstructor" style="width: auto; height: 400px; display: block;"></highcharts-chart>
+<div class="row charts">
+  <div class="col tab-charts" *ngIf="data.length > 0">
+    <div class="card overview-chart-card card-shadow">
+      <h6 class="card-header bg-transparent">Monitoring</h6>
+      <div class="card-body">
+        <div class="chart">
+          <highcharts-chart [Highcharts]="Highcharts" [options]="monitoringChartOptions"
+                            [callbackFunction]="chartCallback"
+                            [(update)]="updateFlag"
+                            [constructorType]="chartConstructor"
+                            style="width: auto; height: 400px; display: block;"></highcharts-chart>
+        </div>
+      </div>
     </div>
   </div>
-</ng-template>
-
-
-
-
-<a class="monitoring-data" (click)="open(content)"><i class="fas fa-heartbeat"></i></a>
+</div>
diff --git a/src/app/item-detail/monitoring-stats/monitoring-stats.component.ts b/src/app/item-detail/monitoring-stats/monitoring-stats.component.ts
@@ -8,9 +8,9 @@ import { from } from "rxjs";
 @Component({
   selector: "app-monitoring-stats",
   templateUrl: "./monitoring-stats.component.html",
-  styleUrls: ["./monitoring-stats.component.css"]
+  styleUrls: ["./monitoring-stats.component.css", "../item-detail.component.scss", "../../shared-styles.css"]
 })
-export class MonitoringStatsComponent {
+export class MonitoringStatsComponent implements OnInit {
   Highcharts: typeof Highcharts = Highcharts;
   monitoringChartOptions;
   chartConstructor = "chart";
@@ -28,11 +28,12 @@ export class MonitoringStatsComponent {
 
   @Input() data: [{ name: string, timestamp: Date, avgCpu: number, avgMem: number }];
 
+  ngOnInit() {
+    this.prepareChart()
+  }
 
-  open(content) {
-    this.modalService.open(content, { size: "xl" }).result
-      .then((_) => { this.monitoringChartOptions = null; }, () => { this.monitoringChartOptions = null; });
 
+  prepareChart() {
     const workers = Array.from(new Set(this.data.map(data => data.name)));
     const series = workers.map((worker) => this.data
       .filter(data => data.name === worker)