fix(frontend): Fix run comparison filter

frontend/src/pages/RunList.test.tsx

@@ -381,6 +381,28 @@ describe('RunList', () => {
     expect(Apis.runServiceApi.getRun).toHaveBeenCalledWith('run2');
   });
 
+  it('loads given and filtered list of runs only', async () => {
+    mockNRuns(5, {});
+    const props = generateProps();
+    props.runIdListMask = ['filterRun1', 'filterRun2', 'notincluded'];
+    tree = shallow(<RunList {...props} />);
+    await (tree.instance() as RunListTest)._loadRuns({
+      filter: encodeURIComponent(
+        JSON.stringify({
+          predicates: [{ key: 'name', op: PredicateOp.ISSUBSTRING, string_value: 'filterRun' }],
+        }),
+      ),
+    });
+    expect(tree.state('runs')).toMatchObject([
+      {
+        run: { name: 'run with id: filterRun1' },
+      },
+      {
+        run: { name: 'run with id: filterRun2' },
+      },
+    ]);
+  });
+
   it('adds metrics columns', async () => {
     mockNRuns(2, {
       run: {

frontend/src/pages/RunList.tsx

@@ -331,9 +331,12 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
 
     if (Array.isArray(this.props.runIdListMask)) {
       displayRuns = this.props.runIdListMask.map(id => ({ run: { id } }));
-      // listRuns doesn't currently support batching by IDs, so in this case we retrieve each run
-      // individually.
-      await this._getAndSetRuns(displayRuns);
+      const filter = JSON.parse(
+        decodeURIComponent(request.filter || '{"predicates": []}'),
+      ) as ApiFilter;
+      // listRuns doesn't currently support batching by IDs, so in this case we retrieve and filter
+      // each run individually.
+      await this._getAndSetRuns(displayRuns, filter);
     } else {
       // Load all runs
       if (this.props.storageState) {
@@ -429,14 +432,27 @@ class RunList extends React.PureComponent<RunListProps, RunListState> {
 
   /**
    * For each run ID, fetch its corresponding run, and set it in DisplayRuns
+   * Remove the run from the list if its name does not match the filter
    */
-  private _getAndSetRuns(displayRuns: DisplayRun[]): Promise<DisplayRun[]> {
+  private _getAndSetRuns(displayRuns: DisplayRun[], filter: ApiFilter): Promise<DisplayRun[]> {
+    const filterSubstring =
+      filter.predicates &&
+      filter.predicates[0] &&
+      filter.predicates[0].key === 'name' &&
+      filter.predicates[0].op === PredicateOp.ISSUBSTRING &&
+      filter.predicates[0].string_value
+        ? filter.predicates[0].string_value.toLowerCase()
+        : '';
     return Promise.all(
       displayRuns.map(async displayRun => {
         let getRunResponse: ApiRunDetail;
         try {
           getRunResponse = await Apis.runServiceApi.getRun(displayRun.run!.id!);
-          displayRun.run = getRunResponse.run!;
+          if (getRunResponse.run?.name?.toLowerCase().includes(filterSubstring)) {
+            displayRun.run = getRunResponse.run!;
+          } else {
+            displayRuns.splice(displayRuns.indexOf(displayRun), 1);
+          }
         } catch (err) {
           displayRun.error = await errorToMessage(err);
         }