feat: Show more details of a locked environment in tooltip (#291)

Author: StefanNemeth

client/src/app/components/user-lock-info/user-lock-info.component.html

@@ -0,0 +1,19 @@
+@if (latestLock(); as lock) {
+  <a routerLink="environment/list" class="text-sm text-gray-500 flex flex-col items-center gap-1 mb-5" [pTooltip]="tooltipContent">
+    <i-tabler name="lock"></i-tabler>
+    <span class="w-20 text-center">{{ timeSinceLocked() }}</span>
+  </a>
+  <ng-template #tooltipContent>
+    <div class="flex flex-col">
+      <span class="text-xs text-gray-200 uppercase tracking-tighter font-bold">Locked Environment</span>
+      <span class="text-sm">{{ lock.environment?.name }}</span>
+      @if (lock.environment?.latestDeployment?.ref) {
+        <div class="border-b border-gray-500 my-2"></div>
+        <div class="flex gap-1 items-center">
+          <span class="text-sm truncate">{{ lock.environment?.latestDeployment?.ref }}</span>
+          <i-tabler style="height: 16px; width: 16px" name="git-branch" class="text-gray-200 flex-shrink-0" />
+        </div>
+      }
+    </div>
+  </ng-template>
+}

client/src/app/components/user-lock-info/user-lock-info.component.ts

@@ -0,0 +1,85 @@
+import { Component, inject, OnInit, OnDestroy, signal, computed } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { getEnvironmentsByUserLockingOptions } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
+import { KeycloakService } from '@app/core/services/keycloak/keycloak.service';
+import { injectQuery } from '@tanstack/angular-query-experimental';
+import { IconsModule } from 'icons.module';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+  selector: 'app-user-lock-info',
+  imports: [IconsModule, TooltipModule, RouterLink],
+  templateUrl: './user-lock-info.component.html',
+})
+export class UserLockInfoComponent implements OnInit, OnDestroy {
+  private keycloakService = inject(KeycloakService);
+
+  timeNow = signal<Date>(new Date());
+  private intervalId?: ReturnType<typeof setInterval>;
+
+  // Returns the latest lock information for the current user
+  lockQuery = injectQuery(() => ({
+    ...getEnvironmentsByUserLockingOptions(),
+    refetchInterval: 10000,
+    enabled: () => !!this.keycloakService.isLoggedIn(),
+  }));
+
+  ngOnInit() {
+    this.intervalId = setInterval(() => {
+      this.timeNow.set(new Date());
+    }, 1000);
+  }
+
+  ngOnDestroy() {
+    // Clear the interval
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  latestLock = computed(() => {
+    const lock = this.lockQuery.data();
+
+    // For some reason, when there is no lock
+    // an empty object instead of null is returned
+    return lock?.lockedAt ? lock : null;
+  });
+
+  timeSinceLocked = computed(() => {
+    const latestLock = this.latestLock();
+
+    if (!latestLock?.lockedAt) return '';
+
+    const lockedDate = new Date(latestLock.lockedAt);
+    const now = this.timeNow(); // your signal for "current time"
+    const diffMs = now.getTime() - lockedDate.getTime();
+
+    // If lockedAt is in the future, return empty or handle differently
+    if (diffMs < 0) {
+      return '';
+    }
+
+    const totalSeconds = Math.floor(diffMs / 1000);
+    const days = Math.floor(totalSeconds / 86400); // 1 day = 86400s
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    // Zero-pad hours, minutes, seconds
+    const padTwo = (num: number) => num.toString().padStart(2, '0');
+
+    if (days > 0) {
+      // Format: dd:hh:mm (e.g., "1:05:12" => 1 day, 5 hours, 12 minutes)
+      const dd = days.toString(); // or padTwo(days) if you prefer "01" for 1 day
+      const hh = padTwo(hours);
+      const mm = padTwo(minutes);
+      return `${dd}:${hh}:${mm}`;
+    } else {
+      // Format: hh:mm:ss (e.g., "05:12:36")
+      const hh = padTwo(hours);
+      const mm = padTwo(minutes);
+      const ss = padTwo(seconds);
+      return `${hh}:${mm}:${ss}`;
+    }
+  });
+}

client/src/app/pages/main-layout/main-layout.component.html

@@ -19,12 +19,7 @@
         }
       </div>
       <span class="flex-grow"></span>
-      @if (lockQuery.data()?.lockedAt) {
-        <p class="text-sm text-gray-500 flex items-center gap-1 mb-5">
-          <i-tabler name="lock"></i-tabler>
-          <span class="w-20">{{ timeSinceLocked(lockQuery.data()?.lockedAt) }}</span>
-        </p>
-      }
+      <app-user-lock-info />
       <app-profile-nav-section />
     </div>
 

client/src/app/pages/main-layout/main-layout.component.ts

@@ -1,8 +1,8 @@
 import { SlicePipe } from '@angular/common';
-import { Component, OnDestroy, OnInit, computed, inject, input, numberAttribute, signal } from '@angular/core';
+import { Component, computed, inject, input, numberAttribute } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { ProfileNavSectionComponent } from '@app/components/profile-nav-section/profile-nav-section.component';
-import { getEnvironmentsByUserLockingOptions, getRepositoryByIdOptions } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
+import { getRepositoryByIdOptions } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
 import { KeycloakService } from '@app/core/services/keycloak/keycloak.service';
 import { PermissionService } from '@app/core/services/permission.service';
 import { injectQuery } from '@tanstack/angular-query-experimental';
@@ -14,6 +14,7 @@ import { DividerModule } from 'primeng/divider';
 import { ToastModule } from 'primeng/toast';
 import { TooltipModule } from 'primeng/tooltip';
 import { HeliosIconComponent } from '../../components/helios-icon/helios-icon.component';
+import { UserLockInfoComponent } from '@app/components/user-lock-info/user-lock-info.component';
 
 @Component({
   selector: 'app-main-layout',
@@ -32,10 +33,11 @@ import { HeliosIconComponent } from '../../components/helios-icon/helios-icon.co
     AvatarModule,
     CardModule,
     ProfileNavSectionComponent,
+    UserLockInfoComponent,
   ],
   templateUrl: './main-layout.component.html',
 })
-export class MainLayoutComponent implements OnInit, OnDestroy {
+export class MainLayoutComponent {
   private keycloakService = inject(KeycloakService);
   private permissionService = inject(PermissionService);
 
@@ -48,15 +50,6 @@ export class MainLayoutComponent implements OnInit, OnDestroy {
     enabled: () => !!this.repositoryId(),
   }));
 
-  lockQuery = injectQuery(() => ({
-    ...getEnvironmentsByUserLockingOptions(),
-    refetchInterval: 10000,
-    enabled: () => !!this.keycloakService.isLoggedIn(),
-  }));
-
-  timeNow = signal<Date>(new Date());
-  private intervalId?: ReturnType<typeof setInterval>;
-
   logout() {
     this.keycloakService.logout();
   }
@@ -94,53 +87,4 @@ export class MainLayoutComponent implements OnInit, OnDestroy {
     ];
     return baseItems;
   });
-
-  ngOnInit() {
-    this.intervalId = setInterval(() => {
-      this.timeNow.set(new Date());
-    }, 1000);
-  }
-
-  ngOnDestroy() {
-    // Clear the interval
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
-  }
-
-  timeSinceLocked(lockedAt: string | undefined): string {
-    if (!lockedAt) return '';
-
-    const lockedDate = new Date(lockedAt);
-    const now = this.timeNow(); // your signal for "current time"
-    const diffMs = now.getTime() - lockedDate.getTime();
-
-    // If lockedAt is in the future, return empty or handle differently
-    if (diffMs < 0) {
-      return '';
-    }
-
-    const totalSeconds = Math.floor(diffMs / 1000);
-    const days = Math.floor(totalSeconds / 86400); // 1 day = 86400s
-    const hours = Math.floor((totalSeconds % 86400) / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    // Zero-pad hours, minutes, seconds
-    const padTwo = (num: number) => num.toString().padStart(2, '0');
-
-    if (days > 0) {
-      // Format: dd:hh:mm (e.g., "1:05:12" => 1 day, 5 hours, 12 minutes)
-      const dd = days.toString(); // or padTwo(days) if you prefer "01" for 1 day
-      const hh = padTwo(hours);
-      const mm = padTwo(minutes);
-      return `${dd}:${hh}:${mm}`;
-    } else {
-      // Format: hh:mm:ss (e.g., "05:12:36")
-      const hh = padTwo(hours);
-      const mm = padTwo(minutes);
-      const ss = padTwo(seconds);
-      return `${hh}:${mm}:${ss}`;
-    }
-  }
 }

server/application-server/src/main/java/de/tum/cit/aet/helios/environment/Environment.java

@@ -15,6 +15,7 @@
 import jakarta.persistence.Version;
 import java.time.OffsetDateTime;
 import java.util.List;
+import java.util.Optional;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
 import lombok.Setter;
@@ -84,6 +85,10 @@ public class Environment extends RepositoryFilterEntity {
   @OneToMany(mappedBy = "environment", fetch = FetchType.LAZY)
   private List<EnvironmentLockHistory> lockHistory;
 
+  public Optional<Deployment> getLatestDeployment() {
+    return this.deployments.reversed().stream().findFirst();
+  }
+
   // Missing properties
   // nodeId --> GraphQl ID
   // ProtectionRule

server/application-server/src/main/java/de/tum/cit/aet/helios/environment/EnvironmentLockHistoryDto.java

@@ -13,7 +13,6 @@ public record EnvironmentLockHistoryDto(
     @Nullable OffsetDateTime unlockedAt,
     EnvironmentDto environment) {
 
-
   public static EnvironmentLockHistoryDto fromEnvironmentLockHistory(
       EnvironmentLockHistory environmentLockHistory) {
     Environment environment = environmentLockHistory.getEnvironment();
@@ -22,6 +21,8 @@ public static EnvironmentLockHistoryDto fromEnvironmentLockHistory(
         environmentLockHistory.getLockedBy(),
         environmentLockHistory.getLockedAt(),
         environmentLockHistory.getUnlockedAt(),
-        EnvironmentDto.fromEnvironment(environment));
+        EnvironmentDto.fromEnvironment(
+            environment,
+            environment.getLatestDeployment()));
   }
 }

server/application-server/src/main/java/de/tum/cit/aet/helios/environment/EnvironmentService.java

@@ -42,7 +42,7 @@ public List<EnvironmentDto> getAllEnvironments() {
         .map(
             environment -> {
               return EnvironmentDto.fromEnvironment(
-                  environment, environment.getDeployments().reversed().stream().findFirst());
+                  environment, environment.getLatestDeployment());
             })
         .collect(Collectors.toList());
   }
@@ -52,7 +52,7 @@ public List<EnvironmentDto> getAllEnabledEnvironments() {
         .map(
             environment -> {
               return EnvironmentDto.fromEnvironment(
-                  environment, environment.getDeployments().reversed().stream().findFirst());
+                  environment, environment.getLatestDeployment());
             })
         .collect(Collectors.toList());
   }