Add support for extra options in the capture profile dialog.

This change allows users to add arbitrary key-value pairs as extra options when initiating a profile capture.

PiperOrigin-RevId: 813385389

Author: Profiler Team

frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html

@@ -116,6 +116,20 @@
           />
         </mat-form-field>
       </div>
+
+      <div>
+        Extra Options:
+        <div *ngFor="let option of extraOptions; let i = index">
+          <mat-form-field>
+            <input matInput placeholder="Key" [(ngModel)]="option.key" />
+          </mat-form-field>
+          <mat-form-field>
+            <input matInput placeholder="Value" [(ngModel)]="option.value" />
+          </mat-form-field>
+          <button mat-button (click)="removeExtraOption(i)">Remove</button>
+        </div>
+        <button mat-button (click)="addExtraOption()">Add Option</button>
+      </div>
     </mat-expansion-panel>
   </div>
 </mat-dialog-content>

frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts

@@ -24,6 +24,7 @@ export class CaptureProfileDialog {
   deviceTracerLevel = '1';
   pythonTracerLevel = '0';
   delay = 0;
+  extraOptions: Array<{key: string, value: string}> = [];
 
   constructor(private readonly dialogRef:
                   MatDialogRef<CaptureProfileDialog>) {}
@@ -37,7 +38,7 @@ export class CaptureProfileDialog {
   }
 
   captureProfile() {
-    this.dialogRef.close({
+    const options: {[key: string]: string|number|boolean} = {
       serviceAddr: this.serviceAddr,
       isTpuName: this.isTpuName,
       duration: this.duration,
@@ -47,10 +48,24 @@ export class CaptureProfileDialog {
       deviceTracerLevel: Number(this.deviceTracerLevel),
       pythonTracerLevel: Number(this.pythonTracerLevel),
       delay: this.delay,
-    });
+    };
+
+    for (const option of this.extraOptions) {
+      options[option.key] = option.value;
+    }
+
+    this.dialogRef.close(options);
   }
 
   close() {
     this.dialogRef.close();
   }
+
+  addExtraOption() {
+    this.extraOptions.push({key: '', value: ''});
+  }
+
+  removeExtraOption(index: number) {
+    this.extraOptions.splice(index, 1);
+  }
 }