Merge pull request #1298 from utmstack/backlog/fix_logexplorer_tabs

fix(log_explorer): tab content edition not saving state on change

Author: mjabascal10

frontend/src/app/log-analyzer/explorer/log-analyzer-tabs/log-analyzer-tabs.component.ts

@@ -47,10 +47,9 @@ export class LogAnalyzerTabsComponent implements OnInit, OnDestroy {
             this.addNewTab(this.query.name, this.query, params);
           });
         } else {
-          if (isRefresh) {
-            this.tabService.deleteActiveTab();
+          if (this.tabService.getTabCount() ==0) {
+            this.addNewTab(null, null, params);
           }
-          this.addNewTab(null, null, params);
         }
       });
 
@@ -63,7 +62,9 @@ export class LogAnalyzerTabsComponent implements OnInit, OnDestroy {
     this.tabService.onSaveTabSubject
       .pipe(takeUntil(this.destroy$),
             filter(query => !!query))
-      .subscribe(query => this.tabService.updateActiveTab(query));
+      .subscribe(query => {
+      this.tabService.updateActiveTab(query)
+      });
 
     this.router.events.pipe(
       filter(event => event instanceof NavigationStart),
@@ -119,7 +120,7 @@ export class LogAnalyzerTabsComponent implements OnInit, OnDestroy {
   }
 
   trackByFn(index: number, tab: TabType): any {
-    return tab.uuid;
+    return `${tab.uuid}-${index}`;
   }
 
   ngOnDestroy(): void {

frontend/src/app/log-analyzer/shared/services/tab.service.ts

@@ -6,10 +6,15 @@ import { TabType } from '../type/tab.type';
 @Injectable()
 export class TabService {
   private tabs: TabType[] = [];
-  private tabSubject = new BehaviorSubject<TabType[]>(this.tabs);
-  public tabs$ = this.tabSubject.asObservable();
+  private tabSubject = new BehaviorSubject<TabType[]>([]);
   public onSaveTabSubject = new Subject<LogAnalyzerQueryType>();
 
+
+
+
+  public get tabs$(){
+    return this.tabSubject.asObservable();
+  }
   /**
    * Add a new tab and make it active.
    * @param tab The tab to add.
@@ -22,6 +27,7 @@ export class TabService {
       active: true,
     };
     this.tabs.push(newTab);
+
     this.emitTabs();
   }
 
@@ -111,6 +117,8 @@ export class TabService {
    * Emit the latest state of the tabs.
    */
   private emitTabs(): void {
-    this.tabSubject.next(this.tabs);
+    //avoiding javascript to send references to the subject
+    const tabsDeepcopy = JSON.parse(JSON.stringify(this.tabs))
+    this.tabSubject.next([...this.tabs]);
   }
 }

frontend/src/environments/environment.ts

@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  // SERVER_API_URL: 'https://192.168.1.18/',
-  SERVER_API_URL: 'http://localhost:8080/',
+  SERVER_API_URL: 'https://192.168.1.18/',
+  //SERVER_API_URL: 'http://localhost:8080/',
   SERVER_API_CONTEXT: '',
   SESSION_AUTH_TOKEN: window.location.host.split(':')[0].toLocaleUpperCase(),
   WEBSOCKET_URL: '//localhost:8080',