HParams: Allow an input to force use of legacy table (#6477)

## Motivation for features / changes
We will soon be flipping the flag to enable the RunsDataTable. However,
this new table does not work on the hosted experiments list page. This
allows that page(which is internal only) to force the runs table to use
the old table so we do not break that feature.

## Detailed steps to verify changes work correctly (as executed by you)
I ran this code internally first and used it to fix the problem. Then
copied it out to OSS.

Author: JamesHollyer

tensorboard/webapp/runs/views/runs_table/runs_table_container.ts

@@ -239,7 +239,7 @@ function matchFilter(
   selector: 'runs-table',
   template: `
     <runs-table-component
-      *ngIf="!HParamsEnabled.value"
+      *ngIf="!useDataTable()"
       [experimentIds]="experimentIds"
       [useFlexibleLayout]="useFlexibleLayout"
       [numSelectedItems]="numSelectedItems$ | async"
@@ -267,7 +267,7 @@ function matchFilter(
       (onMetricFilterChanged)="onMetricFilterChanged($event)"
     ></runs-table-component>
     <runs-data-table
-      *ngIf="HParamsEnabled.value"
+      *ngIf="useDataTable()"
       [headers]="runsColumns$ | async"
       [data]="sortedRunsTableData$ | async"
       [selectableColumns]="selectableColumns$ | async"
@@ -347,11 +347,12 @@ export class RunsTableContainer implements OnInit, OnDestroy {
 
   @Input() experimentIds!: string[];
   @Input() showHparamsAndMetrics = false;
+  @Input() forceLegacyTable = false;
 
   sortOption$ = this.store.select(getRunSelectorSort);
   paginationOption$ = this.store.select(getRunSelectorPaginationOption);
   regexFilter$ = this.store.select(getRunSelectorRegexFilter);
-  HParamsEnabled = new BehaviorSubject<boolean>(false);
+  hparamsEnabled = new BehaviorSubject<boolean>(false);
   runsColumns$ = this.store.select(getRunsTableHeaders);
   runsTableFullScreen$ = this.store.select(getRunsTableFullScreen);
 
@@ -395,7 +396,7 @@ export class RunsTableContainer implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.store.select(getEnableHparamsInTimeSeries).subscribe((enabled) => {
-      this.HParamsEnabled.next(enabled);
+      this.hparamsEnabled.next(enabled);
     });
     const getRunTableItemsPerExperiment = this.experimentIds.map((id) =>
       this.getRunTableItemsForExperiment(id)
@@ -816,6 +817,10 @@ export class RunsTableContainer implements OnInit, OnDestroy {
   orderColumns(newHeaderOrder: ColumnHeader[]) {
     this.store.dispatch(runsTableHeaderOrderChanged({newHeaderOrder}));
   }
+
+  useDataTable() {
+    return this.hparamsEnabled.value && !this.forceLegacyTable;
+  }
 }
 
 export const TEST_ONLY = {

tensorboard/webapp/runs/views/runs_table/runs_table_test.ts

@@ -174,7 +174,8 @@ describe('runs_table', () => {
   function createComponent(
     experimentIds: string[],
     columns?: RunsTableColumn[],
-    usePagination?: boolean
+    usePagination?: boolean,
+    forceLegacyTable?: boolean
   ) {
     const fixture = TestBed.createComponent(RunsTableContainer);
     fixture.componentInstance.experimentIds = experimentIds;
@@ -184,6 +185,7 @@ describe('runs_table', () => {
     if (usePagination !== undefined) {
       fixture.componentInstance.usePagination = usePagination;
     }
+    fixture.componentInstance.forceLegacyTable = forceLegacyTable ?? false;
     fixture.detectChanges();
 
     return fixture;
@@ -3198,6 +3200,16 @@ describe('runs_table', () => {
       ).toBeFalsy();
     });
 
+    it('renders legacy table when forceLegacyTable is true', () => {
+      const fixture = createComponent(['book'], [], false, true);
+      expect(
+        fixture.debugElement.query(By.directive(RunsDataTable))
+      ).toBeFalsy();
+      expect(
+        fixture.nativeElement.querySelector('runs-table-component')
+      ).toBeTruthy();
+    });
+
     it('passes run name, selected value, and color to data table', () => {
       // To make sure we only return the runs when called with the right props.
       const selectSpy = spyOn(store, 'select').and.callThrough();