www: build view lazy changes

newsfragments/www-BuildView-changes-load-more.misc

@@ -0,0 +1 @@
+BuildView's 'Changes' tab (`builders/:builderid/builds/:buildnumber`) now only load a limited number of changes, with the option to load more.

newsfragments/www-BuildView-lazy-changes.misc

@@ -0,0 +1,2 @@
+BuildView (`builders/:builderid/builds/:buildnumber`) now load 'Changes' and 'Responsible Users' on first access to the tab.
+This lower unnecessary queries on the master.

www/base/src/views/BuildView/BuildView.tsx

@@ -21,7 +21,7 @@ import {FaSpinner} from "react-icons/fa";
 import {AlertNotification} from "../../components/AlertNotification/AlertNotification";
 import {useEffect, useState} from "react";
 import {Link, NavigateFunction, useNavigate, useParams} from "react-router-dom";
-import {buildbotSetupPlugin} from "buildbot-plugin-support";
+import {buildbotGetSettings, buildbotSetupPlugin} from "buildbot-plugin-support";
 import {
   Build,
   Buildrequest,
@@ -54,13 +54,15 @@ import {
   useFavIcon,
   useTopbarItems,
   useTopbarActions,
+  useLoadMoreItemsState,
 } from "buildbot-ui";
 import {PropertiesTable} from "../../components/PropertiesTable/PropertiesTable";
 import {ChangesTable} from "../../components/ChangesTable/ChangesTable";
 import {BuildSummary} from "../../components/BuildSummary/BuildSummary";
 import {Tab, Table, Tabs} from "react-bootstrap";
 import {buildTopbarItemsForBuilder} from "../../util/TopbarUtils";
 import {BuildViewDebugTab} from "./BuildViewDebugTab";
+import {LoadingSpan} from '../../components/LoadingSpan/LoadingSpan';
 
 const buildTopbarActions = (
   build: Build | null,
@@ -116,7 +118,7 @@ const buildTopbarActions = (
 }
 
 const getResponsibleUsers = (propertiesQuery: DataPropertiesCollection,
-                             changesQuery: DataCollection<Change>) => {
+                             changesAuthors: Set<string>) => {
   const responsibleUsers: {[name: string]: string | null} = {};
   if (getPropertyValueOrDefault(propertiesQuery.properties, "scheduler", "") === "force") {
     const owner = getPropertyValueOrDefault(propertiesQuery.properties, "owner", "");
@@ -130,8 +132,8 @@ const getResponsibleUsers = (propertiesQuery: DataPropertiesCollection,
     }
   }
 
-  for (const change of changesQuery.array) {
-    const [name, email] = parseChangeAuthorNameAndEmail(change.author);
+  for (const author of changesAuthors) {
+    const [name, email] = parseChangeAuthorNameAndEmail(author);
     if (email !== null || !(name in responsibleUsers)) {
       responsibleUsers[name] = email;
     }
@@ -140,6 +142,62 @@ const getResponsibleUsers = (propertiesQuery: DataPropertiesCollection,
   return responsibleUsers;
 }
 
+type TabWidgetProps = {
+  build: Build | null;
+}
+
+const ChangesTabWidget = ({build}: TabWidgetProps) => {
+  const initialChangesFetchLimit = buildbotGetSettings().getIntegerSetting("Changes.changesFetchLimit");
+  const [changesFetchLimit, onLoadMoreChanges] = useLoadMoreItemsState(
+    initialChangesFetchLimit, initialChangesFetchLimit
+  );
+
+  const changesQuery = useDataApiSingleElementQuery(
+    build, [changesFetchLimit],
+    b => b.getChanges({query: {limit: changesFetchLimit, field: ['changeid']}})
+  );
+  if (!changesQuery.isResolved()) {
+    return <LoadingSpan />
+  }
+
+  return <ChangesTable
+    changes={changesQuery}
+    fetchLimit={changesFetchLimit} onLoadMore={onLoadMoreChanges}
+  />
+}
+
+type ResponsibleUsersTabWidgetProps = {
+  propertiesQuery: DataPropertiesCollection;
+} & TabWidgetProps;
+
+const ResponsibleUsersTabWidget = ({build, propertiesQuery}: ResponsibleUsersTabWidgetProps) => {
+  const changesQuery = useDataApiSingleElementQuery(
+    build, [],
+    b => b.getChanges({subscribe: false, query: {field: 'author'}})
+  );
+
+  if (!propertiesQuery.isResolved() || !changesQuery.isResolved()) {
+    return <LoadingSpan />
+  }
+
+  const responsibleUsers = computed(() => getResponsibleUsers(
+    propertiesQuery,
+    new Set(changesQuery.array.map(c => c.author))
+  )).get();
+
+  return (
+    <ul className="list-group">
+      {
+        Object.entries(responsibleUsers).map(([author, email], index) => (
+          <li key={index} className="list-group-item">
+            <ChangeUserAvatar name={author} email={email} showName={true}/>
+          </li>
+        ))
+      }
+    </ul>
+  );
+}
+
 const BuildView = observer(() => {
   const builderid = useParams<"builderid">().builderid;
   const buildnumber = Number.parseInt(useParams<"buildnumber">().buildnumber ?? "");
@@ -167,7 +225,6 @@ const BuildView = observer(() => {
   const build = findOrNull(buildsArray, b => b.number === buildnumber);
   const nextBuild = findOrNull(buildsArray, b => b.number === buildnumber + 1);
 
-  const changesQuery = useDataApiSingleElementQuery(build, [], b => b.getChanges());
   const buildrequestsQuery = useDataApiSingleElementQuery(build, [],
     b => b.buildrequestid === null
       ? new DataCollection<Buildrequest>()
@@ -243,7 +300,6 @@ const BuildView = observer(() => {
     }
   }, [builderid, navigate, shouldNavigateToBuilder]);
 
-  const responsibleUsers = computed(() => getResponsibleUsers(propertiesQuery, changesQuery)).get();
   /*
     $window.document.title = $state.current.data.pageTitle({builder: builder['name'], build: buildnumber});
    */
@@ -359,14 +415,6 @@ const BuildView = observer(() => {
     ));
   }
 
-  const renderResponsibleUsers = () => {
-    return Object.entries(responsibleUsers).map(([author, email], index) => (
-      <li key={index} className="list-group-item">
-        <ChangeUserAvatar name={author} email={email} showName={true}/>
-      </li>
-    ));
-  };
-
   return (
     <div className="container bb-build-view">
       <AlertNotification text={errorMsg}/>
@@ -396,15 +444,10 @@ const BuildView = observer(() => {
           </Table>
         </Tab>
         <Tab eventKey="responsible" title="Responsible Users">
-          <ul className="list-group">
-            {renderResponsibleUsers()}
-          </ul>
+          <ResponsibleUsersTabWidget build={build} propertiesQuery={propertiesQuery} />
         </Tab>
         <Tab eventKey="changes" title="Changes">
-          {build !== null
-            ? <ChangesTable changes={changesQuery} fetchLimit={0} onLoadMore={null}/>
-            : <></>
-          }
+          <ChangesTabWidget build={build} />
         </Tab>
         <Tab eventKey="debug" title="Debug">
           <BuildViewDebugTab build={build} buildrequest={buildrequest} buildset={buildset}/>