Merge pull request #7016 from taskcluster/feat/w-m-ui

feat(ui): Display both queue and w-m info when available
taskcluster · May 16, 2024 · f44c5cf · f44c5cf
2 parents ceac13b + b5fae84
commit f44c5cf
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/changelog/HdnVbhnoRYGzKYzoDlyksg.md b/changelog/HdnVbhnoRYGzKYzoDlyksg.md
@@ -0,0 +1,6 @@
+audience: users
+level: patch
+reference: issue 6117
+---
+
+Workers list page in UI shows "Worker Pool" link when it is available to improve navigation.
diff --git a/ui/src/views/Provisioners/ViewWorker/index.jsx b/ui/src/views/Provisioners/ViewWorker/index.jsx
@@ -395,14 +395,19 @@ export default class ViewWorker extends Component {
 
   renderQueueWorker() {
     const {
-      data: { worker },
+      data: { worker, WorkerManagerWorker },
     } = this.props;
+    // Merged view to include both queue and worker-manager data
+    const mergedView = {
+      ...WorkerManagerWorker,
+      ...worker,
+    };
 
     return (
       <Fragment>
         {this.renderBreadcrumbs()}
         <br />
-        <WorkerDetailsCard worker={worker} />
+        <WorkerDetailsCard worker={mergedView} />
         <br />
         <WorkerTable worker={worker} />
         {this.renderMenu(true)}

diff --git a/ui/src/views/Provisioners/ViewWorkers/index.jsx b/ui/src/views/Provisioners/ViewWorkers/index.jsx
@@ -9,6 +9,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import HammerIcon from 'mdi-react/HammerIcon';
 import ProgressClockIcon from 'mdi-react/ProgressClockIcon';
 import HourglassIcon from 'mdi-react/HourglassIcon';
+import HexagonSlice4 from 'mdi-react/HexagonSlice4Icon';
 import { Box, Chip } from '@material-ui/core';
 import Spinner from '../../../components/Spinner';
 import TextField from '../../../components/TextField';
@@ -19,6 +20,7 @@ import WorkersTable from '../../../components/WorkersTable';
 import Dashboard from '../../../components/Dashboard';
 import { VIEW_WORKERS_PAGE_SIZE } from '../../../utils/constants';
 import { withAuth } from '../../../utils/Auth';
+import { joinWorkerPoolId } from '../../../utils/workerPool';
 import ErrorPanel from '../../../components/ErrorPanel';
 import Breadcrumbs from '../../../components/Breadcrumbs';
 import Link from '../../../utils/Link';
@@ -37,6 +39,7 @@ const STATES = {
   options: ({ location, match: { params } }) => ({
     errorPolicy: 'all',
     variables: {
+      workerPoolId: joinWorkerPoolId(params.provisionerId, params.workerType),
       provisionerId: params.provisionerId,
       workerType: params.workerType,
       workersConnection: {
@@ -62,7 +65,7 @@ const STATES = {
     gap: theme.spacing(2),
   },
   breadcrumbsPaper: {
-    marginRight: theme.spacing(4),
+    marginRight: theme.spacing(2),
     flex: 1,
   },
   dropdown: {
@@ -223,7 +226,7 @@ export default class ViewWorkers extends Component {
       location,
       classes,
       match: { params },
-      data: { loading, error, workers, workerType },
+      data: { loading, error, workers, workerType, WorkerPool },
     } = this.props;
     const query = parse(location.search.slice(1));
     const shouldIgnoreGraphqlError = this.shouldIgnoreGraphqlError(error);
@@ -254,6 +257,19 @@ export default class ViewWorkers extends Component {
               </Typography>
             </Breadcrumbs>
 
+            {WorkerPool && (
+              <Chip
+                size="medium"
+                icon={<HexagonSlice4 />}
+                label="Worker Pool"
+                component={Link}
+                clickable
+                to={`/worker-manager/${encodeURIComponent(
+                  WorkerPool.workerPoolId
+                )}`}
+              />
+            )}
+
             <Chip
               size="medium"
               icon={<HourglassIcon />}

diff --git a/ui/src/views/Provisioners/ViewWorkers/workers.graphql b/ui/src/views/Provisioners/ViewWorkers/workers.graphql
@@ -1,4 +1,4 @@
-query ViewWorkers($provisionerId: String!, $workerType: String!, $workersConnection: PageConnection, $quarantined: Boolean, $workerState: String) {
+query ViewWorkers($provisionerId: String!, $workerType: String!, $workerPoolId: String!, $workersConnection: PageConnection, $quarantined: Boolean, $workerState: String) {
   workers(provisionerId: $provisionerId, workerType: $workerType, connection: $workersConnection, isQuarantined: $quarantined, workerState: $workerState) {
     pageInfo {
       hasNextPage
@@ -31,6 +31,10 @@ query ViewWorkers($provisionerId: String!, $workerType: String!, $workersConnect
     }
   }
 
+  WorkerPool(workerPoolId: $workerPoolId) {
+    workerPoolId
+  }
+
   workerType(provisionerId: $provisionerId, workerType: $workerType) {
     actions {
       name