Merge pull request #7266 from tdesveaux/react-base/BuilderView/Worker…

…sTab Add a Workers tab to BuilderView
buildbot · Dec 20, 2023 · 0e391b0 · 0e391b0
2 parents 40395e8 + 8fc678b
commit 0e391b0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/newsfragments/react-buildview-workers.feature b/newsfragments/react-buildview-workers.feature
@@ -0,0 +1 @@
+Add a "Workers" tab to the Builder view listing workers that are assigned to this builder (:issue:`7162`)
diff --git a/www/react-base/src/components/BuildrequestsTable/BuildrequestsTable.tsx b/www/react-base/src/components/BuildrequestsTable/BuildrequestsTable.tsx
@@ -16,8 +16,6 @@
 */
 
 import {Table} from "react-bootstrap";
-import Tab from 'react-bootstrap/Tab';
-import Tabs from 'react-bootstrap/Tabs';
 import {observer} from "mobx-react";
 import {Link} from "react-router-dom";
 import {
@@ -97,13 +95,5 @@ export const BuildRequestsTable = observer(({buildrequests}: BuildRequestsTableP
     );
   }
 
-  return (
-    <div>
-      <Tabs defaultActiveKey={1}>
-        <Tab eventKey={1} title="Build requests">
-          {buildrequests.array.length === 0 ? <span>None</span> : tableElement()}
-        </Tab>
-      </Tabs>
-    </div>
-  )
+  return buildrequests.array.length === 0 ? <span>None</span> : tableElement();
 });
diff --git a/www/react-base/src/views/BuilderView/BuilderView.tsx b/www/react-base/src/views/BuilderView/BuilderView.tsx
@@ -22,14 +22,13 @@ import {
   Build,
   Builder,
   Buildrequest,
-  DataCollection, DataMultiCollection,
+  DataCollection,
   Forcescheduler,
   Project,
   useDataAccessor,
-  useDataApiQuery,
-  useDataApiSingleElementQuery
+  useDataApiQuery
 } from "buildbot-data-js";
-import {TopbarAction, useTopbarItems, useTopbarActions, TopbarItem} from "buildbot-ui";
+import {TopbarAction, useTopbarItems, useTopbarActions, WorkerBadge} from "buildbot-ui";
 import {BuildsTable} from "../../components/BuildsTable/BuildsTable";
 import {BuildRequestsTable} from "../../components/BuildrequestsTable/BuildrequestsTable";
 import {useNavigate, useParams} from "react-router-dom";
@@ -38,6 +37,8 @@ import {ForceBuildModal} from "../../components/ForceBuildModal/ForceBuildModal"
 import {TableHeading} from "../../components/TableHeading/TableHeading";
 import {FaStop, FaSpinner} from "react-icons/fa";
 import {buildTopbarItemsForBuilder} from "../../util/TopbarUtils";
+import { Tab, Tabs } from "react-bootstrap";
+import { LoadingSpan } from "../../components/LoadingSpan/LoadingSpan";
 
 const anyCancellableBuilds = (builds: DataCollection<Build>,
                               buildrequests: DataCollection<Buildrequest>) => {
@@ -123,11 +124,18 @@ export const BuilderView = observer(() => {
     : Project.getAll(accessor, {id: builder.projectid.toString()})
   }));
 
+  const workersQuery = useDataApiQuery(() =>
+    buildersQuery.getRelated(builder => builder.getWorkers({query: {
+      order: 'name'
+    }
+  })));
+
   const builder = buildersQuery.getNthOrNull(0);
   const builds = buildsQuery.getParentCollectionOrEmpty(builderid.toString());
   const buildrequests = buildrequestsQuery.getParentCollectionOrEmpty(builderid.toString());
   const forceschedulers = forceSchedulersQuery.getParentCollectionOrEmpty(builderid.toString());
   const project = projectsQuery.getNthOrNull(0);
+  const workers = workersQuery.getParentCollectionOrEmpty(builderid.toString());
 
   const [isCancelling, setIsCancelling] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -191,14 +199,36 @@ export const BuilderView = observer(() => {
     }
   };
 
+  const renderWorkers = () => {
+    return (
+    <ul className="list-inline bb-builder-workers-container">
+    {
+      !workers.isResolved() ? <LoadingSpan/> :
+      workers.array.map(worker => (
+        <li><WorkerBadge key={worker.name} worker={worker} showWorkerName={true}/></li>
+      ))
+    }
+    </ul>);
+  };
+
   return (
     <div className="container">
       <AlertNotification text={errorMsg}/>
       {builder !== null && builder.description !== null
         ? renderDescription(builder)
         : <></>
       }
-      <BuildRequestsTable buildrequests={buildrequests}/>
+      <div>
+        <Tabs defaultActiveKey={1}>
+          <Tab eventKey={1} title="Build requests">
+            <BuildRequestsTable buildrequests={buildrequests}/>
+          </Tab>
+          <Tab eventKey={2} title="Workers">
+            {renderWorkers()}
+          </Tab>
+        </Tabs>
+      </div>
+
       <BuildsTable builds={builds} builders={null}/>
       {shownForceScheduler !== null
         ? <ForceBuildModal scheduler={shownForceScheduler} builderid={builderid}