From b54024889b4bdf6d78a6b51ea9b667263fd877dc Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Tue, 7 Jan 2025 15:40:35 +0100
Subject: [PATCH 1/8] WIP: charts

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/type/chart-type.component.html     | 10 +-
 .../charts/type/chart-type.component.ts       | 93 +++++++++----------
 2 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
index b399093d..ef1ebbc9 100644
--- a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
@@ -1,6 +1,7 @@
+<h1 class="text-center font-semibold text-sm text-gray-700 dark:text-gray-400">Deployments per Manager</h1>
 @if (chartOptions) {
   <apx-chart
-    class="block h-60 max-w-full max-h-full overflow-hidden"
+    class="block h-52 max-w-full max-h-full overflow-hidden"
     [series]="chartOptions.series!"
     [labels]="chartOptions.labels!"
     [colors]="chartOptions.colors!"
@@ -8,7 +9,10 @@
     [stroke]="chartOptions.stroke!"
     [tooltip]="chartOptions.tooltip!"
     [xaxis]="chartOptions.xaxis!"
-    [legend]="chartOptions.legend!"
-    [title]="chartOptions.title!">
+    [legend]="chartOptions.legend!">
   </apx-chart>
+} @else if (loading) {
+  <p class="block h-52 max-w-full max-h-full overflow-hidden">Loading...</p>
+} @else {
+  <p class="block h-52 max-w-full max-h-full overflow-hidden">Nothing to display right now.</p>
 }
diff --git a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.ts b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.ts
index e002f008..9267f369 100644
--- a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.ts
@@ -17,62 +17,59 @@ export class ChartTypeComponent implements OnDestroy {
 
   private readonly destroyed$ = new Subject<void>();
 
+  loading: boolean = true;
+
   constructor() {
     this.deploymentTargets$.pipe(takeUntil(this.destroyed$)).subscribe((dts) => {
-      this.chartOptions = {
-        series: [],
-        labels: [],
-        colors: ['#0db7ed', '#326CE5', '#174c76'],
-        chart: {
-          height: 192,
-          type: 'donut',
-          sparkline: {
-            enabled: true,
+      this.loading = false;
+
+      if (dts.length > 0) {
+        this.chartOptions = {
+          series: [],
+          labels: [],
+          colors: ['#0db7ed', '#326CE5', '#174c76'],
+          chart: {
+            height: 192,
+            type: 'donut',
+            sparkline: {
+              enabled: true,
+            },
+          },
+          stroke: {
+            curve: 'smooth',
           },
-        },
-        stroke: {
-          curve: 'smooth',
-        },
-        tooltip: {
-          enabled: false,
-        },
-        legend: {
-          show: true,
-          position: 'top',
-          fontFamily: 'Inter',
-          labels: {
-            colors: 'rgb(156, 163, 175)',
-            useSeriesColors: false,
+          tooltip: {
+            enabled: false,
           },
-        },
-        title: {
-          text: 'Deployment Managers',
-          align: 'center',
-          offsetY: 10,
-          style: {
-            color: 'rgb(156, 163, 175)',
-            fontFamily: 'Poppins',
+          legend: {
+            show: true,
+            position: 'top',
+            fontFamily: 'Inter',
+            labels: {
+              colors: 'rgb(156, 163, 175)',
+              useSeriesColors: false,
+            },
           },
-        },
-        plotOptions: {
-          pie: {
-            customScale: 0.8,
+          plotOptions: {
+            pie: {
+              customScale: 0.8,
+            },
           },
-        },
-      };
-      const managers: {[key: string]: UserAccountWithRole} = {};
-      const counts: {[key: string]: number} = {};
-      for (const dt of dts) {
-        if (dt.createdBy?.id && !managers[dt.createdBy.id]) {
-          managers[dt.createdBy.id] = dt.createdBy;
-          counts[dt.createdBy.id] = 1;
-        } else if (dt.createdBy?.id && managers[dt.createdBy.id]) {
-          counts[dt.createdBy.id] = counts[dt.createdBy.id] + 1;
+        };
+        const managers: {[key: string]: UserAccountWithRole} = {};
+        const counts: {[key: string]: number} = {};
+        for (const dt of dts) {
+          if (dt.createdBy?.id && !managers[dt.createdBy.id]) {
+            managers[dt.createdBy.id] = dt.createdBy;
+            counts[dt.createdBy.id] = 1;
+          } else if (dt.createdBy?.id && managers[dt.createdBy.id]) {
+            counts[dt.createdBy.id] = counts[dt.createdBy.id] + 1;
+          }
         }
-      }
 
-      this.chartOptions.labels = Object.values(managers).map((v) => v.name ?? v.email);
-      this.chartOptions.series = Object.values(counts);
+        this.chartOptions.labels = Object.values(managers).map((v) => v.name ?? v.email);
+        this.chartOptions.series = Object.values(counts);
+      }
     });
   }
 

From c8883a6e7299514b5b42ab86cad6b881ad3883ec Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Tue, 7 Jan 2025 16:20:25 +0100
Subject: [PATCH 2/8] WIP: charts

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/uptime/chart-uptime.component.html         | 11 ++++++++---
 .../charts/uptime/chart-uptime.component.ts           |  3 +++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
index f3e4f792..21d868c1 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
@@ -1,12 +1,17 @@
+<h1 class="text-center font-semibold text-sm text-gray-700 dark:text-gray-400">Deployment Uptime</h1>
 @if (chartOptions) {
   <apx-chart
-    class="block h-60 max-w-full max-h-full overflow-hidden"
+    class="block h-52 max-w-full max-h-full overflow-hidden"
     [series]="chartOptions.series!"
     [chart]="chartOptions.chart!"
     [stroke]="chartOptions.stroke!"
     [tooltip]="chartOptions.tooltip!"
     [xaxis]="chartOptions.xaxis!"
-    [legend]="chartOptions.legend!"
-    [title]="chartOptions.title!">
+    [legend]="chartOptions.legend!">
   </apx-chart>
+} @else if (loading) {
+  <p class="block h-52 max-w-full max-h-full overflow-hidden">Loading...</p>
+} @else {
+  <p class="block h-52 max-w-full max-h-full overflow-hidden">Nothing to display right now.</p>
 }
+
diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
index 7ad0a7c7..08f8c567 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
@@ -17,6 +17,8 @@ export class ChartUptimeComponent implements OnInit {
 
   private readonly metrics = inject(MetricsService);
 
+  loading = true;
+
   async ngOnInit() {
     const dts = await firstValueFrom(this.deploymentTargets$);
     for (const dt of dts) {
@@ -29,6 +31,7 @@ export class ChartUptimeComponent implements OnInit {
           continue;
         }
         this.metrics.getUptimeForDeployment(deployment.id!).subscribe((uptimes) => {
+          this.loading = false;
           this.chartOptions = {
             series: [
               {

From 32e05123c62a04dc0e4dab2b04e774080e8b25af Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Wed, 8 Jan 2025 09:06:55 +0100
Subject: [PATCH 3/8] fix: uptime chart positioning

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/uptime/chart-uptime.component.ts       | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
index 08f8c567..e7c47d85 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
@@ -46,7 +46,9 @@ export class ChartUptimeComponent implements OnInit {
               },
             ],
             chart: {
-              height: 220,
+              offsetY: 20,
+              //width: '100%',
+              //height: '80%',
               type: 'bar',
               stacked: true,
               sparkline: {
@@ -67,20 +69,13 @@ export class ChartUptimeComponent implements OnInit {
               show: true,
               position: 'top',
               fontFamily: 'Inter',
-              offsetY: -18,
+              offsetY: -5,
+              floating: true,
               labels: {
                 colors: 'rgb(156, 163, 175)',
                 useSeriesColors: false,
               },
             },
-            title: {
-              text: `${dt.name}`,
-              align: 'center',
-              style: {
-                color: 'rgb(156, 163, 175)',
-                fontFamily: 'Poppins',
-              },
-            },
           };
         });
         return;

From fb693b70f57d3f4953b417c0a096e4f6b6c7e487 Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Wed, 8 Jan 2025 09:35:22 +0100
Subject: [PATCH 4/8] WIP select

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/uptime/chart-uptime.component.html | 39 ++++++++++++++++++-
 .../charts/uptime/chart-uptime.component.ts   | 18 ++++++++-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
index 21d868c1..ffc565fa 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
@@ -1,4 +1,41 @@
-<h1 class="text-center font-semibold text-sm text-gray-700 dark:text-gray-400">Deployment Uptime</h1>
+<div class="relative">
+  <h1 class="inline-flex self-center font-semibold text-sm text-gray-700 dark:text-gray-400">Deployment Uptime</h1>
+
+  <button cdkOverlayOrigin
+          #dropdownTrigger="cdkOverlayOrigin"
+          (click)="showDropdown = !showDropdown"
+          class="inline-block absolute top-0 right-0 p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          type="button">
+    <fa-icon [icon]="faEllipsis"></fa-icon>
+  </button>
+
+</div>
+
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayHasBackdrop]="true"
+  (backdropClick)="showDropdown = false"
+  [cdkConnectedOverlayBackdropClass]="'transparent'"
+  [cdkConnectedOverlayOrigin]="dropdownTrigger"
+  [cdkConnectedOverlayOpen]="showDropdown">
+  <div
+    @dropdown
+    style="transform-origin: top center"
+    class="my-2 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
+    <ul class="py-1" role="none">
+      <li>
+        <button
+          type="button"
+          (click)="selectDeploymentTarget()"
+          class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+          role="menuitem">
+          Deployment xyz
+        </button>
+      </li>
+    </ul>
+  </div>
+</ng-template>
+
 @if (chartOptions) {
   <apx-chart
     class="block h-52 max-w-full max-h-full overflow-hidden"
diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
index e7c47d85..64b3b579 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
@@ -3,11 +3,16 @@ import {ApexOptions, NgApexchartsModule} from 'ng-apexcharts';
 import {firstValueFrom, lastValueFrom} from 'rxjs';
 import {DeploymentTargetsService} from '../../../services/deployment-targets.service';
 import {MetricsService} from '../../../services/metrics.service';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {faEllipsis, faEllipsisVertical} from '@fortawesome/free-solid-svg-icons';
+import {CdkConnectedOverlay, CdkOverlayOrigin} from '@angular/cdk/overlay';
+import {dropdownAnimation} from '../../../animations/dropdown';
 
 @Component({
   selector: 'app-chart-uptime',
   templateUrl: './chart-uptime.component.html',
-  imports: [NgApexchartsModule],
+  imports: [NgApexchartsModule, FaIconComponent, CdkOverlayOrigin, CdkConnectedOverlay],
+  animations: [dropdownAnimation],
 })
 export class ChartUptimeComponent implements OnInit {
   public chartOptions?: ApexOptions;
@@ -18,6 +23,10 @@ export class ChartUptimeComponent implements OnInit {
   private readonly metrics = inject(MetricsService);
 
   loading = true;
+  showDropdown = false;
+
+  protected readonly faEllipsisVertical = faEllipsisVertical;
+  protected readonly faEllipsis = faEllipsis;
 
   async ngOnInit() {
     const dts = await firstValueFrom(this.deploymentTargets$);
@@ -46,7 +55,7 @@ export class ChartUptimeComponent implements OnInit {
               },
             ],
             chart: {
-              offsetY: 20,
+              offsetY: 10,
               //width: '100%',
               //height: '80%',
               type: 'bar',
@@ -82,4 +91,9 @@ export class ChartUptimeComponent implements OnInit {
       }
     }
   }
+
+  selectDeploymentTarget() {
+    // TODO
+    this.showDropdown = false;
+  }
 }

From 2de6015906d4eb4ece24be6ceaf909786f74b245 Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Wed, 8 Jan 2025 09:47:31 +0100
Subject: [PATCH 5/8] WIP select

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/uptime/chart-uptime.component.html | 20 +++---
 .../charts/uptime/chart-uptime.component.ts   | 62 +++++++++++++++++--
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
index ffc565fa..571615e7 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
@@ -23,15 +23,17 @@ <h1 class="inline-flex self-center font-semibold text-sm text-gray-700 dark:text
     style="transform-origin: top center"
     class="my-2 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
     <ul class="py-1" role="none">
-      <li>
-        <button
-          type="button"
-          (click)="selectDeploymentTarget()"
-          class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
-          role="menuitem">
-          Deployment xyz
-        </button>
-      </li>
+      @for (dt of deploymentTargets$ | async; track dt.id ) {
+        <li>
+          <button
+            type="button"
+            (click)="selectDeploymentTarget(dt)"
+            class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
+            role="menuitem">
+            {{ dt.name }}
+          </button>
+        </li>
+      }
     </ul>
   </div>
 </ng-template>
diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
index 64b3b579..5de565eb 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
@@ -7,18 +7,20 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {faEllipsis, faEllipsisVertical} from '@fortawesome/free-solid-svg-icons';
 import {CdkConnectedOverlay, CdkOverlayOrigin} from '@angular/cdk/overlay';
 import {dropdownAnimation} from '../../../animations/dropdown';
+import {AsyncPipe} from '@angular/common';
+import {DeploymentTarget} from '../../../types/deployment-target';
 
 @Component({
   selector: 'app-chart-uptime',
   templateUrl: './chart-uptime.component.html',
-  imports: [NgApexchartsModule, FaIconComponent, CdkOverlayOrigin, CdkConnectedOverlay],
+  imports: [NgApexchartsModule, FaIconComponent, CdkOverlayOrigin, CdkConnectedOverlay, AsyncPipe],
   animations: [dropdownAnimation],
 })
 export class ChartUptimeComponent implements OnInit {
   public chartOptions?: ApexOptions;
 
   private readonly deploymentTargets = inject(DeploymentTargetsService);
-  private readonly deploymentTargets$ = this.deploymentTargets.list();
+  readonly deploymentTargets$ = this.deploymentTargets.list();
 
   private readonly metrics = inject(MetricsService);
 
@@ -30,7 +32,7 @@ export class ChartUptimeComponent implements OnInit {
 
   async ngOnInit() {
     const dts = await firstValueFrom(this.deploymentTargets$);
-    for (const dt of dts) {
+    /*for (const dt of dts) {
       if (dt.currentStatus) {
         let deployment;
         try {
@@ -89,11 +91,59 @@ export class ChartUptimeComponent implements OnInit {
         });
         return;
       }
-    }
+    }*/
   }
 
-  selectDeploymentTarget() {
-    // TODO
+  async selectDeploymentTarget(dt: DeploymentTarget) {
     this.showDropdown = false;
+    const deployment = await lastValueFrom(this.deploymentTargets.latestDeploymentFor(dt.id!));
+    this.metrics.getUptimeForDeployment(deployment.id!).subscribe((uptimes) => {
+      this.loading = false;
+      this.chartOptions = {
+        series: [
+          {
+            name: 'available',
+            data: uptimes.map((ut) => ut.total - ut.unknown),
+            color: '#00bfa5',
+          },
+          {
+            name: 'unknown',
+            data: uptimes.map((ut) => ut.unknown),
+            color: '#feb019',
+          },
+        ],
+        chart: {
+          offsetY: 10,
+          //width: '100%',
+          //height: '80%',
+          type: 'bar',
+          stacked: true,
+          sparkline: {
+            enabled: true,
+          },
+        },
+        stroke: {
+          curve: 'smooth',
+        },
+        tooltip: {
+          enabled: false,
+        },
+        xaxis: {
+          type: 'datetime',
+          categories: uptimes.map((ut) => ut.hour),
+        },
+        legend: {
+          show: true,
+          position: 'top',
+          fontFamily: 'Inter',
+          offsetY: -5,
+          floating: true,
+          labels: {
+            colors: 'rgb(156, 163, 175)',
+            useSeriesColors: false,
+          },
+        },
+      };
+    });
   }
 }

From 7b19765f4d6735593c7963592ea73b1c014c5b8f Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Wed, 8 Jan 2025 11:58:17 +0100
Subject: [PATCH 6/8] feat: store and read from local storage

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/type/chart-type.component.html     |   4 +-
 .../charts/uptime/chart-uptime.component.html |  23 ++-
 .../charts/uptime/chart-uptime.component.ts   | 173 +++++++-----------
 3 files changed, 76 insertions(+), 124 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
index ef1ebbc9..56d69fee 100644
--- a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
@@ -11,8 +11,6 @@ <h1 class="text-center font-semibold text-sm text-gray-700 dark:text-gray-400">D
     [xaxis]="chartOptions.xaxis!"
     [legend]="chartOptions.legend!">
   </apx-chart>
-} @else if (loading) {
-  <p class="block h-52 max-w-full max-h-full overflow-hidden">Loading...</p>
 } @else {
-  <p class="block h-52 max-w-full max-h-full overflow-hidden">Nothing to display right now.</p>
+  <p class="">Nothing to display right now.</p>
 }
diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
index 571615e7..6ce4dc0c 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.html
@@ -1,14 +1,16 @@
 <div class="relative">
-  <h1 class="inline-flex self-center font-semibold text-sm text-gray-700 dark:text-gray-400">Deployment Uptime</h1>
+  <h1 class="inline-flex self-center font-semibold text-sm text-gray-700 dark:text-gray-400">
+    Uptime{{ selectedDeploymentTarget ? ': ' + selectedDeploymentTarget.name : '' }}
+  </h1>
 
-  <button cdkOverlayOrigin
-          #dropdownTrigger="cdkOverlayOrigin"
-          (click)="showDropdown = !showDropdown"
-          class="inline-block absolute top-0 right-0 p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-          type="button">
+  <button
+    cdkOverlayOrigin
+    #dropdownTrigger="cdkOverlayOrigin"
+    (click)="showDropdown = !showDropdown"
+    class="inline-block absolute top-0 right-0 p-1 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+    type="button">
     <fa-icon [icon]="faEllipsis"></fa-icon>
   </button>
-
 </div>
 
 <ng-template
@@ -23,7 +25,7 @@ <h1 class="inline-flex self-center font-semibold text-sm text-gray-700 dark:text
     style="transform-origin: top center"
     class="my-2 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600">
     <ul class="py-1" role="none">
-      @for (dt of deploymentTargets$ | async; track dt.id ) {
+      @for (dt of deploymentTargets$ | async; track dt.id) {
         <li>
           <button
             type="button"
@@ -48,9 +50,6 @@ <h1 class="inline-flex self-center font-semibold text-sm text-gray-700 dark:text
     [xaxis]="chartOptions.xaxis!"
     [legend]="chartOptions.legend!">
   </apx-chart>
-} @else if (loading) {
-  <p class="block h-52 max-w-full max-h-full overflow-hidden">Loading...</p>
 } @else {
-  <p class="block h-52 max-w-full max-h-full overflow-hidden">Nothing to display right now.</p>
+  <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Nothing to display right now.</p>
 }
-
diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
index 5de565eb..e1918185 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
@@ -1,6 +1,6 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {ApexOptions, NgApexchartsModule} from 'ng-apexcharts';
-import {firstValueFrom, lastValueFrom} from 'rxjs';
+import {catchError, EMPTY, filter, firstValueFrom, lastValueFrom, of, switchMap} from 'rxjs';
 import {DeploymentTargetsService} from '../../../services/deployment-targets.service';
 import {MetricsService} from '../../../services/metrics.service';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
@@ -9,6 +9,8 @@ import {CdkConnectedOverlay, CdkOverlayOrigin} from '@angular/cdk/overlay';
 import {dropdownAnimation} from '../../../animations/dropdown';
 import {AsyncPipe} from '@angular/common';
 import {DeploymentTarget} from '../../../types/deployment-target';
+import {HttpErrorResponse} from '@angular/common/http';
+import {Deployment} from '../../../types/deployment';
 
 @Component({
   selector: 'app-chart-uptime',
@@ -17,6 +19,7 @@ import {DeploymentTarget} from '../../../types/deployment-target';
   animations: [dropdownAnimation],
 })
 export class ChartUptimeComponent implements OnInit {
+  private readonly LOCAL_STORAGE_KEY = 'dashboard_uptime_deployment_target_id';
   public chartOptions?: ApexOptions;
 
   private readonly deploymentTargets = inject(DeploymentTargetsService);
@@ -24,126 +27,78 @@ export class ChartUptimeComponent implements OnInit {
 
   private readonly metrics = inject(MetricsService);
 
-  loading = true;
   showDropdown = false;
+  storedDeploymentTargetId?: string;
+  selectedDeploymentTarget?: DeploymentTarget;
 
-  protected readonly faEllipsisVertical = faEllipsisVertical;
   protected readonly faEllipsis = faEllipsis;
 
   async ngOnInit() {
+    this.storedDeploymentTargetId = window.localStorage[this.LOCAL_STORAGE_KEY];
     const dts = await firstValueFrom(this.deploymentTargets$);
-    /*for (const dt of dts) {
-      if (dt.currentStatus) {
-        let deployment;
-        try {
-          // temporarily: simply show uptime of the first deployment target with a status and a deployment
-          deployment = await lastValueFrom(this.deploymentTargets.latestDeploymentFor(dt.id!));
-        } catch (e) {
-          continue;
-        }
-        this.metrics.getUptimeForDeployment(deployment.id!).subscribe((uptimes) => {
-          this.loading = false;
-          this.chartOptions = {
-            series: [
-              {
-                name: 'available',
-                data: uptimes.map((ut) => ut.total - ut.unknown),
-                color: '#00bfa5',
-              },
-              {
-                name: 'unknown',
-                data: uptimes.map((ut) => ut.unknown),
-                color: '#feb019',
-              },
-            ],
-            chart: {
-              offsetY: 10,
-              //width: '100%',
-              //height: '80%',
-              type: 'bar',
-              stacked: true,
-              sparkline: {
-                enabled: true,
-              },
-            },
-            stroke: {
-              curve: 'smooth',
-            },
-            tooltip: {
-              enabled: false,
-            },
-            xaxis: {
-              type: 'datetime',
-              categories: uptimes.map((ut) => ut.hour),
-            },
-            legend: {
-              show: true,
-              position: 'top',
-              fontFamily: 'Inter',
-              offsetY: -5,
-              floating: true,
-              labels: {
-                colors: 'rgb(156, 163, 175)',
-                useSeriesColors: false,
-              },
-            },
-          };
-        });
-        return;
-      }
-    }*/
+    const stored = dts.find((dt) => dt.id === this.storedDeploymentTargetId);
+    if (stored) {
+      this.selectDeploymentTarget(stored);
+    }
   }
 
-  async selectDeploymentTarget(dt: DeploymentTarget) {
+  selectDeploymentTarget(dt: DeploymentTarget) {
     this.showDropdown = false;
-    const deployment = await lastValueFrom(this.deploymentTargets.latestDeploymentFor(dt.id!));
-    this.metrics.getUptimeForDeployment(deployment.id!).subscribe((uptimes) => {
-      this.loading = false;
-      this.chartOptions = {
-        series: [
-          {
-            name: 'available',
-            data: uptimes.map((ut) => ut.total - ut.unknown),
-            color: '#00bfa5',
+    this.selectedDeploymentTarget = dt;
+    window.localStorage[this.LOCAL_STORAGE_KEY] = dt.id;
+    this.chartOptions = undefined;
+    this.deploymentTargets
+      .latestDeploymentFor(dt.id!)
+      .pipe(
+        catchError(() => EMPTY),
+        switchMap((deployment) => (deployment?.id ? this.metrics.getUptimeForDeployment(deployment.id) : of([])))
+      )
+      .subscribe((uptimes) => {
+        this.chartOptions = {
+          series: [
+            {
+              name: 'available',
+              data: uptimes.map((ut) => ut.total - ut.unknown),
+              color: '#00bfa5',
+            },
+            {
+              name: 'unknown',
+              data: uptimes.map((ut) => ut.unknown),
+              color: '#feb019',
+            },
+          ],
+          chart: {
+            offsetY: 10,
+            //width: '100%',
+            //height: '80%',
+            type: 'bar',
+            stacked: true,
+            sparkline: {
+              enabled: true,
+            },
           },
-          {
-            name: 'unknown',
-            data: uptimes.map((ut) => ut.unknown),
-            color: '#feb019',
+          stroke: {
+            curve: 'smooth',
           },
-        ],
-        chart: {
-          offsetY: 10,
-          //width: '100%',
-          //height: '80%',
-          type: 'bar',
-          stacked: true,
-          sparkline: {
-            enabled: true,
+          tooltip: {
+            enabled: false,
           },
-        },
-        stroke: {
-          curve: 'smooth',
-        },
-        tooltip: {
-          enabled: false,
-        },
-        xaxis: {
-          type: 'datetime',
-          categories: uptimes.map((ut) => ut.hour),
-        },
-        legend: {
-          show: true,
-          position: 'top',
-          fontFamily: 'Inter',
-          offsetY: -5,
-          floating: true,
-          labels: {
-            colors: 'rgb(156, 163, 175)',
-            useSeriesColors: false,
+          xaxis: {
+            type: 'datetime',
+            categories: uptimes.map((ut) => ut.hour),
+          },
+          legend: {
+            show: true,
+            position: 'top',
+            fontFamily: 'Inter',
+            offsetY: -5,
+            floating: true,
+            labels: {
+              colors: 'rgb(156, 163, 175)',
+              useSeriesColors: false,
+            },
           },
-        },
-      };
-    });
+        };
+      });
   }
 }

From 01e708a766cf9b81c2d6151d5e6468553c35a9d0 Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Wed, 8 Jan 2025 12:04:53 +0100
Subject: [PATCH 7/8] fix

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../src/app/components/charts/type/chart-type.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
index 56d69fee..8dd5019f 100644
--- a/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
+++ b/frontend/cloud-ui/src/app/components/charts/type/chart-type.component.html
@@ -12,5 +12,5 @@ <h1 class="text-center font-semibold text-sm text-gray-700 dark:text-gray-400">D
     [legend]="chartOptions.legend!">
   </apx-chart>
 } @else {
-  <p class="">Nothing to display right now.</p>
+  <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Nothing to display right now.</p>
 }

From 424aa60d3127f5b9a564d4933653cd2dd242dcd0 Mon Sep 17 00:00:00 2001
From: christophenne <christoph.enne@glasskube.eu>
Date: Wed, 8 Jan 2025 15:27:53 +0100
Subject: [PATCH 8/8] fix: auto select first item

Signed-off-by: christophenne <christoph.enne@glasskube.eu>
---
 .../charts/uptime/chart-uptime.component.ts   | 112 +++++++++---------
 1 file changed, 55 insertions(+), 57 deletions(-)

diff --git a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
index e1918185..abbe4efd 100644
--- a/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
+++ b/frontend/cloud-ui/src/app/components/charts/uptime/chart-uptime.component.ts
@@ -1,16 +1,14 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {ApexOptions, NgApexchartsModule} from 'ng-apexcharts';
-import {catchError, EMPTY, filter, firstValueFrom, lastValueFrom, of, switchMap} from 'rxjs';
+import {firstValueFrom} from 'rxjs';
 import {DeploymentTargetsService} from '../../../services/deployment-targets.service';
 import {MetricsService} from '../../../services/metrics.service';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faEllipsis, faEllipsisVertical} from '@fortawesome/free-solid-svg-icons';
+import {faEllipsis} from '@fortawesome/free-solid-svg-icons';
 import {CdkConnectedOverlay, CdkOverlayOrigin} from '@angular/cdk/overlay';
 import {dropdownAnimation} from '../../../animations/dropdown';
 import {AsyncPipe} from '@angular/common';
 import {DeploymentTarget} from '../../../types/deployment-target';
-import {HttpErrorResponse} from '@angular/common/http';
-import {Deployment} from '../../../types/deployment';
 
 @Component({
   selector: 'app-chart-uptime',
@@ -36,69 +34,69 @@ export class ChartUptimeComponent implements OnInit {
   async ngOnInit() {
     this.storedDeploymentTargetId = window.localStorage[this.LOCAL_STORAGE_KEY];
     const dts = await firstValueFrom(this.deploymentTargets$);
-    const stored = dts.find((dt) => dt.id === this.storedDeploymentTargetId);
-    if (stored) {
-      this.selectDeploymentTarget(stored);
+    let initiallySelected = dts.find((dt) => dt.id === this.storedDeploymentTargetId);
+    if (!initiallySelected && dts.length > 0) {
+      initiallySelected = dts[0];
+    }
+    if (initiallySelected) {
+      await this.selectDeploymentTarget(initiallySelected);
+    } else {
+      delete window.localStorage[this.LOCAL_STORAGE_KEY];
     }
   }
 
-  selectDeploymentTarget(dt: DeploymentTarget) {
+  async selectDeploymentTarget(dt: DeploymentTarget) {
     this.showDropdown = false;
     this.selectedDeploymentTarget = dt;
     window.localStorage[this.LOCAL_STORAGE_KEY] = dt.id;
     this.chartOptions = undefined;
-    this.deploymentTargets
-      .latestDeploymentFor(dt.id!)
-      .pipe(
-        catchError(() => EMPTY),
-        switchMap((deployment) => (deployment?.id ? this.metrics.getUptimeForDeployment(deployment.id) : of([])))
-      )
-      .subscribe((uptimes) => {
-        this.chartOptions = {
-          series: [
-            {
-              name: 'available',
-              data: uptimes.map((ut) => ut.total - ut.unknown),
-              color: '#00bfa5',
-            },
-            {
-              name: 'unknown',
-              data: uptimes.map((ut) => ut.unknown),
-              color: '#feb019',
-            },
-          ],
-          chart: {
-            offsetY: 10,
-            //width: '100%',
-            //height: '80%',
-            type: 'bar',
-            stacked: true,
-            sparkline: {
-              enabled: true,
-            },
-          },
-          stroke: {
-            curve: 'smooth',
+    if (dt.latestDeployment?.id) {
+      const uptimes = await firstValueFrom(this.metrics.getUptimeForDeployment(dt.latestDeployment.id));
+      this.chartOptions = {
+        series: [
+          {
+            name: 'available',
+            data: uptimes.map((ut) => ut.total - ut.unknown),
+            color: '#00bfa5',
           },
-          tooltip: {
-            enabled: false,
+          {
+            name: 'unknown',
+            data: uptimes.map((ut) => ut.unknown),
+            color: '#feb019',
           },
-          xaxis: {
-            type: 'datetime',
-            categories: uptimes.map((ut) => ut.hour),
+        ],
+        chart: {
+          offsetY: 10,
+          //width: '100%',
+          //height: '80%',
+          type: 'bar',
+          stacked: true,
+          sparkline: {
+            enabled: true,
           },
-          legend: {
-            show: true,
-            position: 'top',
-            fontFamily: 'Inter',
-            offsetY: -5,
-            floating: true,
-            labels: {
-              colors: 'rgb(156, 163, 175)',
-              useSeriesColors: false,
-            },
+        },
+        stroke: {
+          curve: 'smooth',
+        },
+        tooltip: {
+          enabled: false,
+        },
+        xaxis: {
+          type: 'datetime',
+          categories: uptimes.map((ut) => ut.hour),
+        },
+        legend: {
+          show: true,
+          position: 'top',
+          fontFamily: 'Inter',
+          offsetY: -5,
+          floating: true,
+          labels: {
+            colors: 'rgb(156, 163, 175)',
+            useSeriesColors: false,
           },
-        };
-      });
+        },
+      };
+    }
   }
 }