Bug 1494667 - Fix selecting job within count on page load (#4081)

tests/ui/unit/react/groups.tests.jsx

@@ -43,7 +43,7 @@ describe('JobGroup component', () => {
       />,
     );
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Web platform tests with e10s">' +
+      '<span class="platform-group" data-group-key="313281W-e10s1linux64debug"><span class="disabled job-group" title="Web platform tests with e10s">' +
         '<button class="btn group-symbol">W-e10s</button>' +
         '<span class="group-content">' +
           '<span class="group-job-list"><button data-job-id="166315800" title="success | test-linux64/debug-web-platform-tests-reftests-e10s-1 -  (18 mins)" class="btn btn-green filter-shown job-btn btn-xs">Wr1</button></span>' +
@@ -67,7 +67,7 @@ describe('JobGroup component', () => {
     jobGroup.setState({ expanded: true });
     jobGroup.setState({ expanded: false });
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Web platform tests with e10s">' +
+      '<span class="platform-group" data-group-key="313281W-e10s1linux64debug"><span class="disabled job-group" title="Web platform tests with e10s">' +
         '<button class="btn group-symbol">W-e10s</button>' +
         '<span class="group-content">' +
           '<span class="group-job-list"><button data-job-id="166315800" title="success | test-linux64/debug-web-platform-tests-reftests-e10s-1 -  (18 mins)" class="btn btn-green filter-shown job-btn btn-xs">Wr1</button></span>' +
@@ -90,7 +90,7 @@ describe('JobGroup component', () => {
     );
     jobGroup.setState({ expanded: true });
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Web platform tests with e10s">' +
+      '<span class="platform-group" data-group-key="313281W-e10s1linux64debug"><span class="disabled job-group" title="Web platform tests with e10s">' +
         '<button class="btn group-symbol">W-e10s</button>' +
           '<span class="group-content">' +
             '<span class="group-job-list">' +
@@ -117,7 +117,7 @@ describe('JobGroup component', () => {
 
     $rootScope.$emit(thEvents.groupStateChanged, 'expanded');
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Web platform tests with e10s">' +
+      '<span class="platform-group" data-group-key="313281W-e10s1linux64debug"><span class="disabled job-group" title="Web platform tests with e10s">' +
         '<button class="btn group-symbol">W-e10s</button>' +
           '<span class="group-content">' +
             '<span class="group-job-list">' +
@@ -143,7 +143,7 @@ describe('JobGroup component', () => {
     );
 
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Spidermonkey builds">' +
+      '<span class="platform-group" data-group-key="313293SM1linux64opt"><span class="disabled job-group" title="Spidermonkey builds">' +
         '<button class="btn group-symbol">SM</button>' +
         '<span class="group-content"><span class="group-job-list">' +
           '<button data-job-id="166316707" title="retry | spidermonkey-sm-msan-linux64/opt -  (0 mins)" class="btn btn-dkblue filter-shown job-btn btn-xs">msan</button>' +
@@ -169,7 +169,7 @@ describe('JobGroup component', () => {
 
     jobGroup.setState({ showDuplicateJobs: true });
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Spidermonkey builds">' +
+      '<span class="platform-group" data-group-key="313293SM1linux64opt"><span class="disabled job-group" title="Spidermonkey builds">' +
         '<button class="btn group-symbol">SM</button>' +
         '<span class="group-content"><span class="group-job-list">' +
           '<button data-job-id="166316707" title="retry | spidermonkey-sm-msan-linux64/opt -  (0 mins)" class="btn btn-dkblue filter-shown job-btn btn-xs">msan</button>' +
@@ -196,7 +196,7 @@ describe('JobGroup component', () => {
 
     $rootScope.$emit(thEvents.duplicateJobsVisibilityChanged);
     expect(jobGroup.html()).toEqual(
-      '<span class="platform-group"><span class="disabled job-group" title="Spidermonkey builds">' +
+      '<span class="platform-group" data-group-key="313293SM1linux64opt"><span class="disabled job-group" title="Spidermonkey builds">' +
         '<button class="btn group-symbol">SM</button>' +
         '<span class="group-content"><span class="group-job-list">' +
           '<button data-job-id="166316707" title="retry | spidermonkey-sm-msan-linux64/opt -  (0 mins)" class="btn btn-dkblue filter-shown job-btn btn-xs">msan</button>' +

ui/helpers/job.js

@@ -6,6 +6,7 @@ import {
 } from './constants';
 import { toDateStr } from './display';
 import { getSlaveHealthUrl, getWorkerExplorerUrl } from './url';
+import { getGroupMapKey } from './aggregateId';
 
 const btnClasses = {
   busted: 'btn-red',
@@ -121,12 +122,23 @@ export const scrollToElement = function scrollToElement(el, duration) {
   }
 };
 
-// Fetch the React instance based on the jobId, and if scrollTo is true, then
-// scroll it into view.
+export const findGroupInstance = function findGroupInstance(job) {
+  const { push_id, job_group_symbol, tier, platform, platform_option } = job;
+  const groupMapKey = getGroupMapKey(push_id, job_group_symbol, tier, platform, platform_option);
+  const viewContent = $('.th-view-content');
+  const groupEl = viewContent.find(
+    `span[data-group-key='${groupMapKey}']`).first();
+
+  if (groupEl.length) {
+    return findInstance(groupEl[0]);
+  }
+};
+
+// Fetch the React instance based on the jobId, and if scrollTo
+// is true, then scroll it into view.
 export const findJobInstance = function findJobInstance(jobId, scrollTo) {
-  const jobEl = $('.th-view-content')
-    .find(`button[data-job-id='${jobId}']`)
-    .first();
+  const jobEl = $('.th-view-content').find(
+    `button[data-job-id='${jobId}']`).first();
 
   if (jobEl.length) {
     if (scrollTo) {

ui/job-view/context/SelectedJob.jsx

@@ -4,6 +4,7 @@ import $ from 'jquery';
 
 import { thJobNavSelectors } from '../../helpers/constants';
 import {
+  findGroupInstance,
   findJobInstance,
   findSelectedInstance, scrollToElement,
 } from '../../helpers/job';
@@ -125,8 +126,14 @@ class SelectedJobClass extends React.Component {
       const selected = findSelectedInstance();
       if (selected) selected.setSelected(false);
     }
+    const group = findGroupInstance(job);
+    if (group) {
+      group.setExpanded(true);
+    }
     const newSelectedElement = findJobInstance(job.id, true);
-    newSelectedElement.setSelected(true);
+    if (newSelectedElement) {
+      newSelectedElement.setSelected(true);
+    }
 
     // If a timeout is passed in, this will cause a pause before
     // the selection takes place.  This allows for quick-switching

ui/job-view/pushes/JobGroup.jsx

@@ -80,6 +80,10 @@ export default class JobGroup extends React.Component {
     this.groupStateChangedUnlisten();
   }
 
+  setExpanded(isExpanded) {
+    this.setState({ expanded: isExpanded });
+  }
+
   toggleExpanded() {
     this.setState({ expanded: !this.state.expanded });
   }
@@ -135,7 +139,7 @@ export default class JobGroup extends React.Component {
   render() {
     const {
       $injector, repoName, filterPlatformCb, platform, filterModel,
-      group: { name: groupName, symbol: groupSymbol, tier: groupTier, jobs: groupJobs },
+      group: { name: groupName, symbol: groupSymbol, tier: groupTier, jobs: groupJobs, mapKey: groupMapKey },
     } = this.props;
     const { expanded, showDuplicateJobs } = this.state;
     const { buttons, counts } = this.groupButtonsAndCounts(
@@ -145,7 +149,10 @@ export default class JobGroup extends React.Component {
     );
 
     return (
-      <span className="platform-group">
+      <span
+        className="platform-group"
+        data-group-key={groupMapKey}
+      >
         <span
           className="disabled job-group"
           title={groupName}