Add a submit button to the hosts sidenav for trace_viewer

PiperOrigin-RevId: 823535397

Author: muditgokhale2

frontend/app/components/sidenav/sidenav.ng.html

@@ -30,22 +30,37 @@
   </mat-form-field>
 </div>
 
-<div class="item-container">
+<div class="item-container" *ngIf="!isMultiHostsEnabled">
   <div [ngClass]="{'mat-subheading-2': true, 'disabled': !hosts.length}">
-    Hosts ({{ isMultiHostsEnabled ? selectedHostsInternal.length : hosts.length }})
+    Hosts ({{hosts.length}})
   </div>
   <mat-form-field class="full-width" appearance="outline">
-    <!-- Multi-host select -->
-    <mat-select *ngIf="isMultiHostsEnabled" panelClass="panel-override" [value]="selectedHostsInternal" [disabled]="!hosts.length" (selectionChange)="onHostsSelectionChange($event.value)" multiple>
+    <mat-select #singleSelectHost="matSelect" panelClass="panel-override" [value]="selectedHost" [disabled]="!hosts.length" (selectionChange)="onHostSelectionChange($event.value)">
       <mat-option *ngFor="let host of hosts" [value]="host">
         {{host}}
       </mat-option>
     </mat-select>
-    <!-- Single-host select -->
-    <mat-select *ngIf="!isMultiHostsEnabled" panelClass="panel-override" [value]="selectedHost" [disabled]="!hosts.length" (selectionChange)="onHostSelectionChange($event.value)">
-      <mat-option *ngFor="let host of hosts" [value]="host">
-        {{host}}
-      </mat-option>
+  </mat-form-field>
+</div>
+
+<div class="item-container" *ngIf="isMultiHostsEnabled">
+  <div [ngClass]="{'mat-subheading-2': true, 'disabled': !hosts.length}">
+    Hosts ({{selectedHostsInternal.length}})
+  </div>
+  <mat-form-field class="full-width" appearance="outline">
+    <mat-select #multiSelectHost="matSelect" panelClass="multi-host-select-panel" [value]="selectedHostsPending" [disabled]="!hosts.length" (selectionChange)="onHostsSelectionChange($event.value)" multiple>
+
+      <div class="select-panel-content">
+        <mat-option *ngFor="let host of hosts" [value]="host">
+          {{host}}
+        </mat-option>
+
+        <div class="submit-button-container" (click)="$event.stopPropagation()">
+          <button mat-flat-button color="primary" class="full-width" (click)="onSubmitHosts(); multiSelectHost.close()">
+            Apply Host Selection
+          </button>
+        </div>
+      </div>
     </mat-select>
   </mat-form-field>
 </div>
@@ -73,4 +88,3 @@
 </div>
 
 <br>
-

frontend/app/components/sidenav/sidenav.scss

@@ -13,3 +13,36 @@
 .mat-subheading-2 {
   margin-bottom: 0;
 }
+
+// Target the custom panel class defined in sidenav.ng.html
+.multi-host-select-panel {
+  // Mat-select uses a standard mat-option list structure, but we need to ensure
+  // the custom wrapper div inside the panel handles layout correctly.
+
+  // This selector targets the element that contains all the options and the button container.
+  // It ensures vertical stacking of options and the button.
+  .select-panel-content {
+    display: flex;
+    flex-direction: column;
+    // Note: The Mat Select component internally sets overflow and max-height for scrolling.
+  }
+
+  // Container for the submit button at the bottom of the dropdown
+  .submit-button-container {
+    position: sticky;
+    bottom: 0;
+    padding: 8px;
+
+    background: #fff;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+
+    .full-width {
+      width: 100%;
+    }
+  }
+
+  // Ensure options remain clickable and are not covered by the sticky button's padding.
+  mat-option {
+    flex-shrink: 0;
+  }
+}

frontend/app/components/sidenav/sidenav.ts

@@ -33,6 +33,7 @@ export class SideNav implements OnInit, OnDestroy {
   selectedTagInternal = '';
   selectedHostInternal = '';
   selectedHostsInternal: string[] = [];
+  selectedHostsPending: string[] = [];
   selectedModuleInternal = '';
   navigationParams: {[key: string]: string|boolean} = {};
   multiHostEnabledTools: string[] = ['trace_viewer', 'trace_viewer@'];
@@ -141,10 +142,14 @@ export class SideNav implements OnInit, OnDestroy {
     this.selectedTagInternal = tag;
     this.selectedModuleInternal = moduleName;
 
-    if (hostsParam) {
-      this.selectedHostsInternal = hostsParam.split(',');
+    if (this.isMultiHostsEnabled) {
+      if (hostsParam) {
+        this.selectedHostsInternal = hostsParam.split(',');
+      }
+      this.selectedHostsPending = [...this.selectedHostsInternal];
+    } else {
+      this.selectedHostInternal = host;
     }
-    this.selectedHostInternal = host;
     this.update();
   }
 
@@ -168,7 +173,7 @@ export class SideNav implements OnInit, OnDestroy {
       ...this.navigationParams,
     };
     if (this.isMultiHostsEnabled) {
-      navigationEvent.hosts = this.selectedHosts;
+      navigationEvent.hosts = this.selectedHostsInternal;
     } else {
       navigationEvent.host = this.selectedHost;
     }
@@ -258,9 +263,35 @@ export class SideNav implements OnInit, OnDestroy {
     this.afterUpdateTag();
   }
 
-  onTagSelectionChange(tag: string) {
+  async onTagSelectionChange(tag: string) {
+    const previousSelectedTag = this.selectedTagInternal;
     this.selectedTagInternal = tag;
-    this.afterUpdateTag();
+
+    const isChangingToMultiHost = !previousSelectedTag ||
+        (this.isMultiHostsEnabled && previousSelectedTag !== this.selectedTag);
+
+    this.selectedHostsInternal = [];
+    this.selectedHostsPending = [];
+    this.selectedHostInternal = '';
+
+    if (isChangingToMultiHost) {
+      this.hosts = await this.getHostsForSelectedTag();
+      if (this.hosts.length > 0) {
+        this.selectedHostsInternal = [this.hosts[0]];
+      } else {
+        this.selectedHostsInternal = [];
+      }
+      this.selectedHostsPending = [...this.selectedHostsInternal];
+
+      if (this.is_hlo_tool) {
+        this.moduleList = await this.getModuleListForSelectedTag();
+      }
+
+      this.navigateTools();
+
+    } else {
+      this.afterUpdateTag();
+    }
   }
 
   afterUpdateTag() {
@@ -271,8 +302,17 @@ export class SideNav implements OnInit, OnDestroy {
   // Keep them under the same update function as initial step of the separation.
   async updateHosts() {
     this.hosts = await this.getHostsForSelectedTag();
-    this.selectedHostsInternal = [this.hosts[0]];
-    this.selectedHostInternal = this.hosts[0];
+
+    if (this.isMultiHostsEnabled) {
+      if (this.selectedHostsInternal.length === 0 && this.hosts.length > 0) {
+        this.selectedHostsInternal = [this.hosts[0]];
+      }
+      this.selectedHostsPending = [...this.selectedHostsInternal];
+    } else {
+      if (!this.selectedHostInternal && this.hosts.length > 0) {
+        this.selectedHostInternal = this.hosts[0];
+      }
+    }
     if (this.is_hlo_tool) {
       this.moduleList = await this.getModuleListForSelectedTag();
     }
@@ -282,13 +322,16 @@ export class SideNav implements OnInit, OnDestroy {
 
   onHostSelectionChange(selection: string) {
     this.selectedHostInternal = selection;
-    this.selectedHostsInternal = [];
     this.navigateTools();
   }
 
   onHostsSelectionChange(selection: string[]) {
-    this.selectedHostsInternal = selection;
-    this.selectedHostInternal = '';  // Ensure single-host is empty
+    this.selectedHostsPending =
+        Array.isArray(selection) ? selection : [selection];
+  }
+
+  onSubmitHosts() {
+    this.selectedHostsInternal = [...this.selectedHostsPending];
     this.navigateTools();
   }
 
@@ -298,7 +341,9 @@ export class SideNav implements OnInit, OnDestroy {
   }
 
   afterUpdateHost() {
-    this.navigateTools();
+    if (!this.isMultiHostsEnabled) {
+      this.navigateTools();
+    }
   }
 
   // Helper function to serialize query parameters