Merge pull request #2 from tdesveaux/tds/builders/worker_list

www-react: Add builder workers in /builder/{id} view
dontnod · Oct 26, 2023 · 4f8a3cc · 4f8a3cc
2 parents 808f259 + 7dd79ca
commit 4f8a3cc
Showing 1 changed file with 31 additions and 5 deletions.
diff --git a/www/react-base/src/views/BuilderView/BuilderView.tsx b/www/react-base/src/views/BuilderView/BuilderView.tsx
@@ -17,27 +17,28 @@
 
 import {observer} from "mobx-react";
 import {useState} from "react";
+import {Card} from "react-bootstrap";
 import {buildbotSetupPlugin} from "buildbot-plugin-support";
 import {
   Build,
   Builder,
   Buildrequest,
-  DataCollection, DataMultiCollection,
+  DataCollection,
   Forcescheduler,
   Project,
   useDataAccessor,
   useDataApiQuery,
-  useDataApiSingleElementQuery
 } 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 {LoadingSpan} from "../../components/LoadingSpan/LoadingSpan";
 import {useNavigate, useParams} from "react-router-dom";
 import {AlertNotification} from "../../components/AlertNotification/AlertNotification";
 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>) => {
@@ -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);
@@ -198,7 +206,25 @@ 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>
+          <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}