fix(editor): Move workerview entry into settings menu (#7761)

As the worker view is not an essential function, it is being moved from
the main side bar to the settings side bar for the time being.

cypress/pages/workerView.ts

@@ -1,14 +1,14 @@
 import { BasePage } from './base';
 
 export class WorkerViewPage extends BasePage {
-	url = '/workers';
+	url = '/settings/workers';
 	getters = {
 		workerCards: () => cy.getByTestId('worker-card'),
 		workerCard: (workerId: string) => this.getters.workerCards().contains(workerId),
 		workerViewLicensed: () => cy.getByTestId('worker-view-licensed'),
 		workerViewUnlicensed: () => cy.getByTestId('worker-view-unlicensed'),
 		menuItems: () => cy.get('.el-menu-item'),
-		menuItem: () => this.getters.menuItems().get('#workersview'),
+		menuItem: () => this.getters.menuItems().get('#settings-workersview'),
 	};
 
 	actions = {};

packages/editor-ui/src/components/MainSidebar.vue

@@ -261,15 +261,6 @@ export default defineComponent({
 					position: 'top',
 					activateOnRouteNames: [VIEWS.EXECUTIONS],
 				},
-				{
-					id: 'workersview',
-					icon: 'truck-monster',
-					label: this.$locale.baseText('mainSidebar.workersView'),
-					position: 'top',
-					available:
-						this.settingsStore.isQueueModeEnabled && this.settingsStore.isWorkerViewAvailable,
-					activateOnRouteNames: [VIEWS.WORKER_VIEW],
-				},
 				{
 					id: 'cloud-admin',
 					type: 'link',
@@ -448,12 +439,6 @@ export default defineComponent({
 					}
 					break;
 				}
-				case 'workersview': {
-					if (this.$router.currentRoute.name !== VIEWS.WORKER_VIEW) {
-						this.goToRoute({ name: VIEWS.WORKER_VIEW });
-					}
-					break;
-				}
 				case 'settings': {
 					const defaultRoute = this.findFirstAccessibleSettingsRoute();
 					if (defaultRoute) {

packages/editor-ui/src/components/SettingsSidebar.vue

@@ -117,6 +117,15 @@ export default defineComponent({
 					available: this.canAccessLdapSettings(),
 					activateOnRouteNames: [VIEWS.LDAP_SETTINGS],
 				},
+				{
+					id: 'settings-workersview',
+					icon: 'truck-monster',
+					label: this.$locale.baseText('mainSidebar.workersView'),
+					position: 'top',
+					available:
+						this.settingsStore.isQueueModeEnabled && this.settingsStore.isWorkerViewAvailable,
+					activateOnRouteNames: [VIEWS.WORKER_VIEW],
+				},
 			];
 
 			for (const item of this.settingsFakeDoorFeatures) {
@@ -241,6 +250,10 @@ export default defineComponent({
 						void this.$router.push({ name: VIEWS.AUDIT_LOGS });
 					}
 					break;
+				case 'settings-workersview': {
+					await this.navigateTo(VIEWS.WORKER_VIEW);
+					break;
+				}
 				default:
 					break;
 			}

packages/editor-ui/src/components/Workers/WorkerCard.ee.vue

@@ -7,8 +7,8 @@
 				:class="stale ? [$style.cardHeading, $style.stale] : [$style.cardHeading]"
 				data-test-id="worker-card-name"
 			>
-				{{ worker.workerId }} ({{ worker.hostname }}) | Average Load:
+				Name: {{ worker.workerId }} ({{ worker.hostname }}) <br />
-				{{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
+				Average Load: {{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
 				{{ memAsGb(worker.freeMem).toFixed(2) }}GB / {{ memAsGb(worker.totalMem).toFixed(2) }}GB
 				{{ stale ? ' (stale)' : '' }}
 			</n8n-heading>
@@ -17,8 +17,8 @@
 			<n8n-text color="text-light" size="small" :class="$style.container">
 				<span
 					>{{ $locale.baseText('workerList.item.lastUpdated') }} {{ secondsSinceLastUpdateString }}s
-					ago | Architecture: {{ worker.arch }} | Platform: {{ worker.platform }} | n8n-Version:
+					ago | n8n-Version: {{ worker.version }} | Architecture: {{ worker.arch }} (
-					{{ worker.version }} | Uptime: {{ upTime(worker.uptime) }}</span
+					{{ worker.platform }}) | Uptime: {{ upTime(worker.uptime) }}</span
 				>
 				<WorkerJobAccordion :items="worker.runningJobsSummary" />
 				<WorkerNetAccordion :items="sortedWorkerInterfaces" />

packages/editor-ui/src/router.ts

@@ -217,21 +217,6 @@ export const routes = [
 			},
 		},
 	},
-	{
-		path: '/workers',
-		name: VIEWS.WORKER_VIEW,
-		components: {
-			default: WorkerView,
-			sidebar: MainSidebar,
-		},
-		meta: {
-			permissions: {
-				allow: {
-					loginStatus: [LOGIN_STATUS.LoggedIn],
-				},
-			},
-		},
-	},
 	{
 		path: '/workflows',
 		name: VIEWS.WORKFLOWS,
@@ -736,6 +721,20 @@ export const routes = [
 					},
 				},
 			},
+			{
+				path: 'workers',
+				name: VIEWS.WORKER_VIEW,
+				components: {
+					settingsView: WorkerView,
+				},
+				meta: {
+					permissions: {
+						allow: {
+							loginStatus: [LOGIN_STATUS.LoggedIn],
+						},
+					},
+				},
+			},
 			{
 				path: 'community-nodes',
 				name: VIEWS.COMMUNITY_NODES,

packages/editor-ui/src/views/WorkerView.vue

@@ -1,6 +1,4 @@
 <template>
-	<div :class="$style.workerListWrapper">
-		<div :class="$style.workerList">
 	<WorkerList
 		v-if="settingsStore.isQueueModeEnabled && settingsStore.isWorkerViewAvailable"
 		data-test-id="worker-view-licensed"
@@ -23,8 +21,6 @@
 			</a>
 		</template>
 	</n8n-action-box>
-		</div>
-	</div>
 </template>
 
 <script setup lang="ts">
@@ -41,25 +37,6 @@ const goToUpgrade = () => {
 </script>
 
 <style module lang="scss">
-.workerListWrapper {
-	display: grid;
-	grid-template-rows: 1fr 0;
-	position: relative;
-	height: 100%;
-	width: 100%;
-	max-width: 1280px;
-}
-
-.workerList {
-	position: relative;
-	height: 100%;
-	overflow: auto;
-	padding: var(--spacing-l) var(--spacing-l) 0;
-	@media (min-width: 1200px) {
-		padding: var(--spacing-2xl) var(--spacing-2xl) 0;
-	}
-}
-
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
 }