Do more requests in parallel. (#8895)

* Do more requests in parallel.

* Start fetching the pushes before the /api/repository/ request returns the data needed to render the PushList component.

Author: fqueze

ui/job-view/App.jsx

@@ -34,6 +34,7 @@ import DetailsPanel from './details/DetailsPanel';
 import PushList from './pushes/PushList';
 import KeyboardShortcuts from './KeyboardShortcuts';
 import { clearExpiredNotifications } from './redux/stores/notifications';
+import { fetchPushes } from './redux/stores/pushes';
 
 import '../css/treeherder.css';
 import '../css/treeherder-navbar-panels.css';
@@ -107,13 +108,15 @@ class App extends React.Component {
 
   async componentDidMount() {
     const { repoName, landoCommitID } = this.state;
+    const { fetchPushes } = this.props;
+
+    // Start all API requests in parallel - including pushes.
     getData(getApiUrl(endpoints.frameworks)).then((response) =>
       this.setState({ frameworks: response.data }),
     );
 
     RepositoryModel.getList().then((repos) => {
       const newRepo = repos.find((repo) => repo.name === repoName);
-
       this.setState({ currentRepo: newRepo, repos });
     });
 
@@ -124,6 +127,10 @@ class App extends React.Component {
       });
     });
 
+    // Start (pre)fetching pushes immediately. The PushList component needs
+    // currentRepo but it is not needed to start the network request.
+    fetchPushes();
+
     window.addEventListener('resize', this.updateDimensions, false);
     window.addEventListener('storage', this.handleStorageEvent);
     window.addEventListener(thEvents.filtersUpdated, this.handleFiltersUpdated);
@@ -498,6 +505,7 @@ App.propTypes = {
   jobMap: PropTypes.shape({}).isRequired,
   router: PropTypes.shape({}).isRequired,
   pushRoute: PropTypes.func.isRequired,
+  fetchPushes: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = ({ pushes: { jobMap }, router }) => ({
@@ -508,4 +516,5 @@ const mapStateToProps = ({ pushes: { jobMap }, router }) => ({
 export default connect(mapStateToProps, {
   pushRoute,
   clearExpiredNotifications,
+  fetchPushes,
 })(hot(App));

ui/job-view/pushes/Push.jsx

@@ -117,13 +117,18 @@ class Push extends React.PureComponent {
     // this allows someone to more quickly load ranges of revisions
     // when they don't care about the specific jobs and results.
     const allParams = getAllUrlParams();
+    const promises = [];
+
     if (!allParams.has('nojobs')) {
-      await this.fetchJobs();
+      promises.push(this.fetchJobs());
     }
     if (allParams.has('test_paths')) {
-      await this.fetchTestManifests();
+      promises.push(this.fetchTestManifests());
     }
 
+    // Execute jobs and test manifests in parallel
+    await Promise.all(promises);
+
     this.testForFilteredTry();
 
     window.addEventListener(thEvents.applyNewJobs, this.handleApplyNewJobs);

ui/job-view/pushes/PushList.jsx

@@ -31,6 +31,8 @@ class PushList extends React.Component {
   componentDidMount() {
     const { fetchPushes } = this.props;
 
+    // Fetch pushes regardless of whether App started the request,
+    // the Redux action will handle deduplication if needed.
     fetchPushes();
     this.poll();
   }

ui/job-view/redux/stores/pushes.js

@@ -248,10 +248,15 @@ export const fetchPushes = (
 ) => {
   return async (dispatch, getState) => {
     const {
-      pushes: { pushList, jobMap, oldestPushTimestamp },
+      pushes: { pushList, jobMap, oldestPushTimestamp, loadingPushes },
       router,
     } = getState();
 
+    // Prevent duplicate requests when already loading initial data.
+    if (loadingPushes && !setFromchange) {
+      return;
+    }
+
     dispatch({ type: LOADING });
 
     const locationSearch = parseQueryParams(window.location.search);
@@ -423,7 +428,7 @@ export const initialState = {
   decisionTaskMap: {},
   revisionTips: [],
   jobsLoaded: false,
-  loadingPushes: true,
+  loadingPushes: false,
   oldestPushTimestamp: null,
   allUnclassifiedFailureCount: 0,
   filteredUnclassifiedFailureCount: 0,

ui/shared/PushHealthStatus.jsx

@@ -22,19 +22,22 @@ class PushHealthStatus extends Component {
   }
 
   async componentDidMount() {
-    const {
-      jobCounts: { completed },
-    } = this.props;
-
-    if (completed > 0) {
-      await this.loadLatestStatus();
-    }
+    // Load health status immediately without waiting for job completion
+    await this.loadLatestStatus();
   }
 
   async componentDidUpdate(prevProps) {
     const { jobCounts } = this.props;
     const fields = ['completed', 'fixedByCommit', 'pending', 'running'];
 
+    // Skip if this is the initial load (all previous counts were zero)
+    const isInitialLoad = !fields.some(
+      (field) => prevProps.jobCounts[field] > 0,
+    );
+    if (isInitialLoad) {
+      return;
+    }
+
     if (didObjectsChange(jobCounts, prevProps.jobCounts, fields)) {
       await this.loadLatestStatus();
     }