Bug 1901066 - Make graph tooltip view link to treeherder filter to just the single job

Author: Andrej1198

ui/perfherder/graphs/GraphTooltip.jsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import countBy from 'lodash/countBy';
 import { Button } from 'react-bootstrap';
@@ -27,6 +27,9 @@ import { notify } from '../../shared/stores/notificationStore';
 import { getAction } from '../../helpers/taskcluster';
 import { formatTaskclusterError } from '../../helpers/errorMessage';
 
+// Cache job.searchStr so we can hover over multiple data points
+const jobSearchStrCache = new Map();
+
 const GraphTooltip = ({
   testData,
   infraAffectedData,
@@ -115,11 +118,41 @@ const GraphTooltip = ({
     });
   }
 
+  const cacheKey = `${testDetails.repository_name}/${dataPointDetails.jobId}`;
+  const [jobSearchStr, setJobSearchStr] = useState(
+    dataPointDetails.jobId ? jobSearchStrCache.get(cacheKey) || '' : '',
+  );
+
+  useEffect(() => {
+    if (!dataPointDetails.jobId) return undefined;
+
+    if (jobSearchStrCache.has(cacheKey)) {
+      setJobSearchStr(jobSearchStrCache.get(cacheKey));
+      return undefined;
+    }
+
+    let cancelled = false;
+    JobModel.get(testDetails.repository_name, dataPointDetails.jobId)
+      .then((job) => {
+        const searchStr = job.searchStr || '';
+        jobSearchStrCache.set(cacheKey, searchStr);
+        if (!cancelled) setJobSearchStr(searchStr);
+      })
+      .catch(() => {
+        if (!cancelled) setJobSearchStr('');
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cacheKey, dataPointDetails.jobId, testDetails.repository_name]);
+
   const jobsUrl = getJobsUrl({
     repo: testDetails.repository_name,
     revision: dataPointDetails.revision,
     selectedJob: dataPointDetails.jobId,
     group_state: 'expanded',
+    ...(jobSearchStr ? { searchStr: jobSearchStr.split(' ') } : {}),
   });
 
   const createAlert = async () => {