From 0f24f599cb69c964c865cca874840672fbdd026a Mon Sep 17 00:00:00 2001
From: Ludek Novy <13610612+ludeknovy@users.noreply.github.com>
Date: Wed, 11 Sep 2024 14:42:12 +0200
Subject: [PATCH] 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.
---
 .../item-detail/item-detail.component.html    | 17 ++++++++--
 .../monitoring-stats.component.css            |  5 +++
 .../monitoring-stats.component.html           | 31 +++++++++----------
 .../monitoring-stats.component.ts             | 11 ++++---
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
index 739f1edb..abb9f1ef 100644
--- 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
index 5e76fd30..db9e4665 100644
--- 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
index 17f6812b..df506f4b 100644
--- 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
index 857f85b1..000de2e4 100644
--- 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)