From 0b2f353173e26b6c1dbba984875124772d7b40e8 Mon Sep 17 00:00:00 2001
From: Thomas Desveaux <thomas.desveaux@dont-nod.com>
Date: Tue, 17 Oct 2023 14:43:30 +0200
Subject: [PATCH 1/2] www-react: Add Builder workers list to BuilderView

---
 .../src/views/BuilderView/BuilderView.tsx     | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/www/react-base/src/views/BuilderView/BuilderView.tsx b/www/react-base/src/views/BuilderView/BuilderView.tsx
index b148ad59d55f..55fca0aa8373 100644
--- a/www/react-base/src/views/BuilderView/BuilderView.tsx
+++ b/www/react-base/src/views/BuilderView/BuilderView.tsx
@@ -17,11 +17,13 @@
 
 import {observer} from "mobx-react";
 import {useState} from "react";
+import {Card} from "react-bootstrap";
 import {buildbotSetupPlugin} from "buildbot-plugin-support";
 import {
   Build,
   Builder,
   Buildrequest,
+  Worker,
   DataCollection, DataMultiCollection,
   Forcescheduler,
   Project,
@@ -29,9 +31,10 @@ import {
   useDataApiQuery,
   useDataApiSingleElementQuery
 } from "buildbot-data-js";
-import {TopbarAction, useTopbarItems, useTopbarActions, TopbarItem} from "buildbot-ui";
+import {TopbarAction, useTopbarItems, useTopbarActions, TopbarItem, WorkerBadge} from "buildbot-ui";
 import {BuildsTable} from "../../components/BuildsTable/BuildsTable";
 import {BuildRequestsTable} from "../../components/BuildrequestsTable/BuildrequestsTable";
+import {LoadingSpan} from "../../components/LoadingSpan/LoadingSpan";
 import {useNavigate, useParams} from "react-router-dom";
 import {AlertNotification} from "../../components/AlertNotification/AlertNotification";
 import {ForceBuildModal} from "../../components/ForceBuildModal/ForceBuildModal";
@@ -123,11 +126,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);
@@ -199,6 +209,19 @@ export const BuilderView = observer(() => {
         : <></>
       }
       <BuildRequestsTable buildrequests={buildrequests}/>
+      <Card>
+        <Card.Body>
+          <Card.Title>Workers</Card.Title>
+          <div className="bb-builder-workers-container">
+            {
+              !workers.isResolved() ? <LoadingSpan/> :
+              workers.array.map(worker => (
+                <WorkerBadge key={worker.name} worker={worker} showWorkerName={true}/>
+              ))
+            }
+          </div>
+        </Card.Body>
+      </Card>
       <BuildsTable builds={builds} builders={null}/>
       {shownForceScheduler !== null
         ? <ForceBuildModal scheduler={shownForceScheduler} builderid={builderid}

From 7dd79ca9e00def92644c18b6aa20c9e1f1182323 Mon Sep 17 00:00:00 2001
From: Thomas Desveaux <thomas.desveaux@dont-nod.com>
Date: Thu, 26 Oct 2023 18:02:59 +0200
Subject: [PATCH 2/2] www-react: Use PendingBuildRequestsTable in a Card
 element in BuilderView for consistency

Builds table should also be wrapped in a Card.
---
 .../src/views/BuilderView/BuilderView.tsx         | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/www/react-base/src/views/BuilderView/BuilderView.tsx b/www/react-base/src/views/BuilderView/BuilderView.tsx
index 55fca0aa8373..ac39f39b61c9 100644
--- a/www/react-base/src/views/BuilderView/BuilderView.tsx
+++ b/www/react-base/src/views/BuilderView/BuilderView.tsx
@@ -23,17 +23,14 @@ import {
   Build,
   Builder,
   Buildrequest,
-  Worker,
-  DataCollection, DataMultiCollection,
+  DataCollection,
   Forcescheduler,
   Project,
   useDataAccessor,
   useDataApiQuery,
-  useDataApiSingleElementQuery
 } from "buildbot-data-js";
-import {TopbarAction, useTopbarItems, useTopbarActions, TopbarItem, WorkerBadge} from "buildbot-ui";
+import {TopbarAction, useTopbarItems, useTopbarActions, WorkerBadge} from "buildbot-ui";
 import {BuildsTable} from "../../components/BuildsTable/BuildsTable";
-import {BuildRequestsTable} from "../../components/BuildrequestsTable/BuildrequestsTable";
 import {LoadingSpan} from "../../components/LoadingSpan/LoadingSpan";
 import {useNavigate, useParams} from "react-router-dom";
 import {AlertNotification} from "../../components/AlertNotification/AlertNotification";
@@ -41,6 +38,7 @@ 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 {PendingBuildRequestsTable} from "../../components/PendingBuildRequestsTable/PendingBuildRequestsTable";
 
 const anyCancellableBuilds = (builds: DataCollection<Build>,
                               buildrequests: DataCollection<Buildrequest>) => {
@@ -208,7 +206,12 @@ export const BuilderView = observer(() => {
         ? renderDescription(builder)
         : <></>
       }
-      <BuildRequestsTable buildrequests={buildrequests}/>
+      <Card>
+        <Card.Body>
+          <Card.Title>Pending Build Requests</Card.Title>
+          <PendingBuildRequestsTable buildRequestsQuery={buildrequests}/>
+        </Card.Body>
+      </Card>
       <Card>
         <Card.Body>
           <Card.Title>Workers</Card.Title>