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.
n8n-io · Nov 21, 2023 · 366cd67 · 366cd67
1 parent b7c5c74
commit 366cd67
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 81 deletions.
diff --git a/cypress/pages/workerView.ts b/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 = {};

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/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) {

diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/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;
 			}

diff --git a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue b/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:
-				{{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
+				Name: {{ worker.workerId }} ({{ worker.hostname }}) <br />
+				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:
-					{{ worker.version }} | Uptime: {{ upTime(worker.uptime) }}</span
+					ago | n8n-Version: {{ worker.version }} | Architecture: {{ worker.arch }} (
+					{{ worker.platform }}) | Uptime: {{ upTime(worker.uptime) }}</span
 				>
 				<WorkerJobAccordion :items="worker.runningJobsSummary" />
 				<WorkerNetAccordion :items="sortedWorkerInterfaces" />

diff --git a/packages/editor-ui/src/router.ts b/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,

diff --git a/packages/editor-ui/src/views/WorkerView.vue b/packages/editor-ui/src/views/WorkerView.vue
@@ -1,30 +1,26 @@
 <template>
-	<div :class="$style.workerListWrapper">
-		<div :class="$style.workerList">
-			<WorkerList
-				v-if="settingsStore.isQueueModeEnabled && settingsStore.isWorkerViewAvailable"
-				data-test-id="worker-view-licensed"
-			/>
-			<n8n-action-box
-				v-else
-				data-test-id="worker-view-unlicensed"
-				:class="$style.actionBox"
-				:description="$locale.baseText('workerList.actionBox.description')"
-				:buttonText="$locale.baseText('workerList.actionBox.buttonText')"
-				@click:button="goToUpgrade"
-			>
-				<template #heading>
-					<span>{{ $locale.baseText('workerList.actionBox.title') }}</span>
-				</template>
-				<template #description>
-					{{ $locale.baseText('workerList.actionBox.description') }}
-					<a :href="$locale.baseText('workerList.docs.url')" target="_blank">
-						{{ $locale.baseText('workerList.actionBox.description.link') }}
-					</a>
-				</template>
-			</n8n-action-box>
-		</div>
-	</div>
+	<WorkerList
+		v-if="settingsStore.isQueueModeEnabled && settingsStore.isWorkerViewAvailable"
+		data-test-id="worker-view-licensed"
+	/>
+	<n8n-action-box
+		v-else
+		data-test-id="worker-view-unlicensed"
+		:class="$style.actionBox"
+		:description="$locale.baseText('workerList.actionBox.description')"
+		:buttonText="$locale.baseText('workerList.actionBox.buttonText')"
+		@click:button="goToUpgrade"
+	>
+		<template #heading>
+			<span>{{ $locale.baseText('workerList.actionBox.title') }}</span>
+		</template>
+		<template #description>
+			{{ $locale.baseText('workerList.actionBox.description') }}
+			<a :href="$locale.baseText('workerList.docs.url')" target="_blank">
+				{{ $locale.baseText('workerList.actionBox.description.link') }}
+			</a>
+		</template>
+	</n8n-action-box>
 </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;
 }