Update flare-ui/src/app/components/activity-log/activity-log.component.ts

flare-ui/src/app/components/activity-log/activity-log.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, inject, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output, inject, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -8,6 +8,8 @@ import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 import { MatListModule } from '@angular/material/list';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
+import { Subject, takeUntil } from 'rxjs';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 
 interface ActivityLog {
   id: number;
@@ -39,7 +41,8 @@ interface ActivityLogResponse {
     MatPaginatorModule,
     MatListModule,
     MatCardModule,
-    MatDividerModule
+    MatDividerModule,
+    MatSnackBarModule
   ],
   template: `
     <mat-card class="activity-log-dropdown" (click)="$event.stopPropagation()">
@@ -48,7 +51,7 @@ interface ActivityLogResponse {
           <mat-icon>notifications</mat-icon>
           Recent Activities
         </mat-card-title>
-        <button mat-icon-button (click)="close.emit()">
+        <button mat-icon-button (click)="close.emit(); $event.stopPropagation()">
           <mat-icon>close</mat-icon>
         </button>
       </mat-card-header>
@@ -58,6 +61,15 @@ interface ActivityLogResponse {
           <div class="loading">
             <mat-spinner diameter="30"></mat-spinner>
           </div>
+        } @else if (error && activities.length === 0) {
+          <div class="error-state">
+            <mat-icon>error_outline</mat-icon>
+            <p>{{ error }}</p>
+            <button mat-button (click)="retry()">
+              <mat-icon>refresh</mat-icon>
+              Retry
+            </button>
+          </div>
         } @else if (activities.length === 0) {
           <div class="empty">
             <mat-icon>inbox</mat-icon>
@@ -120,8 +132,8 @@ interface ActivityLogResponse {
       justify-content: space-between;
       align-items: center;
       padding: 16px;
-      background-color: #424242;  // Koyu gri (önceden #f5f5f5 idi)
-      color: white;  // Yazıları beyaz yap
+      background-color: #424242;
+      color: white;
     
       mat-card-title {
         margin: 0;
@@ -129,18 +141,18 @@ interface ActivityLogResponse {
         align-items: center;
         gap: 8px;
         font-size: 18px;
-        color: white;  // Title'ı da beyaz yap
+        color: white;
     
         mat-icon {
           font-size: 24px;
           width: 24px;
           height: 24px;
-          color: white;  // Icon'u da beyaz yap
+          color: white;
         }
       }
     
       button {
-        color: white;  // Close button'u beyaz yap
+        color: white;
       }
     }
 
@@ -203,7 +215,7 @@ interface ActivityLogResponse {
       }
     }
 
-    .loading, .empty {
+    .loading, .empty, .error-state {
       padding: 60px 20px;
       display: flex;
       flex-direction: column;
@@ -220,11 +232,17 @@ interface ActivityLogResponse {
       }
 
       p {
-        margin: 0;
+        margin: 0 0 16px;
         font-size: 14px;
       }
     }
 
+    .error-state {
+      mat-icon {
+        color: #f44336;
+      }
+    }
+
     ::ng-deep {
       .mat-mdc-list-item-unscoped-content {
         display: block;
@@ -239,13 +257,16 @@ interface ActivityLogResponse {
     }
   `]
 })
-export class ActivityLogComponent implements OnInit {
+export class ActivityLogComponent implements OnInit, OnDestroy {
   @Output() close = new EventEmitter<void>();
 
   private http = inject(HttpClient);
+  private snackBar = inject(MatSnackBar);
+  private destroyed$ = new Subject<void>();
 
   activities: ActivityLog[] = [];
   loading = false;
+  error = '';
   currentPage = 1;
   pageSize = 10;
   totalItems = 0;
@@ -255,8 +276,14 @@ export class ActivityLogComponent implements OnInit {
     this.loadActivities();
   }
 
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+
   loadActivities(page: number = 1) {
     this.loading = true;
+    this.error = '';
     this.currentPage = page;
     
     // Backend sadece limit parametresi alıyor, page almıyor
@@ -264,24 +291,40 @@ export class ActivityLogComponent implements OnInit {
     
     this.http.get<ActivityLog[]>(
       `/api/activity-log?limit=${limit}`
+    ).pipe(
+      takeUntil(this.destroyed$)
     ).subscribe({
       next: (response) => {
-        // Response direkt array olarak geliyor
-        const allActivities = response || [];
-        
-        // Manuel pagination yap
-        const startIndex = (page - 1) * this.pageSize;
-        const endIndex = startIndex + this.pageSize;
-        
-        this.activities = allActivities.slice(startIndex, endIndex);
-        this.totalItems = allActivities.length;
-        this.totalPages = Math.ceil(allActivities.length / this.pageSize);
-        this.loading = false;
+        try {
+          // Response direkt array olarak geliyor
+          const allActivities = response || [];
+          
+          // Manual pagination yap
+          const startIndex = (page - 1) * this.pageSize;
+          const endIndex = startIndex + this.pageSize;
+          
+          this.activities = allActivities.slice(startIndex, endIndex);
+          this.totalItems = allActivities.length;
+          this.totalPages = Math.ceil(allActivities.length / this.pageSize);
+          this.loading = false;
+        } catch (err) {
+          console.error('Failed to process activities:', err);
+          this.error = 'Failed to process activity data';
+          this.activities = [];
+          this.loading = false;
+        }
       },
       error: (error) => {
         console.error('Failed to load activities:', error);
-        this.activities = []; // Hata durumunda boş array
+        this.error = this.getErrorMessage(error);
+        this.activities = [];
         this.loading = false;
+        
+        // Show error in snackbar
+        this.snackBar.open(this.error, 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
       }
     });
   }
@@ -297,20 +340,30 @@ export class ActivityLogComponent implements OnInit {
     this.close.emit();
   }
 
+  retry() {
+    this.loadActivities(this.currentPage);
+  }
+
   getRelativeTime(timestamp: string): string {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 1) return 'just now';
-    if (diffMins < 60) return `${diffMins} min ago`;
-    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
-    if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
-
-    return date.toLocaleDateString();
+    try {
+      const date = new Date(timestamp);
+      const now = new Date();
+      const diffMs = now.getTime() - date.getTime();
+      const diffMins = Math.floor(diffMs / 60000);
+      const diffHours = Math.floor(diffMs / 3600000);
+      const diffDays = Math.floor(diffMs / 86400000);
+
+      if (diffMs < 0) return 'just now'; // Future dates
+      if (diffMins < 1) return 'just now';
+      if (diffMins < 60) return `${diffMins} min ago`;
+      if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+      if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+
+      return date.toLocaleDateString();
+    } catch (err) {
+      console.error('Invalid timestamp:', timestamp, err);
+      return 'Unknown';
+    }
   }
 
   getActionText(activity: ActivityLog): string {
@@ -329,7 +382,10 @@ export class ActivityLogComponent implements OnInit {
       'DELETE_API': 'deleted API',
       'UPDATE_ENVIRONMENT': 'updated environment',
       'IMPORT_PROJECT': 'imported project',
-      'CHANGE_PASSWORD': 'changed password'
+      'CHANGE_PASSWORD': 'changed password',
+      'LOGIN': 'logged in',
+      'LOGOUT': 'logged out',
+      'FAILED_LOGIN': 'failed login attempt'
     };
 
     return actions[activity.action] || activity.action.toLowerCase().replace(/_/g, ' ');
@@ -344,6 +400,8 @@ export class ActivityLogComponent implements OnInit {
     if (action.includes('PUBLISH')) return 'publish';
     if (action.includes('IMPORT')) return 'cloud_upload';
     if (action.includes('PASSWORD')) return 'lock';
+    if (action.includes('LOGIN')) return 'login';
+    if (action.includes('LOGOUT')) return 'logout';
     return 'info';
   }
 
@@ -354,4 +412,19 @@ export class ActivityLogComponent implements OnInit {
   isLast(activity: ActivityLog): boolean {
     return this.activities.indexOf(activity) === this.activities.length - 1;
   }
+
+  private getErrorMessage(error: any): string {
+    if (error.status === 0) {
+      return 'Unable to connect to server. Please check your connection.';
+    } else if (error.status === 401) {
+      return 'Session expired. Please login again.';
+    } else if (error.status === 403) {
+      return 'You do not have permission to view activity logs.';
+    } else if (error.error?.detail) {
+      return error.error.detail;
+    } else if (error.message) {
+      return error.message;
+    }
+    return 'Failed to load activities. Please try again.';
+  }
 }