feat(editor): Adds a EE view to show worker details and job status (#7600)

This change expands on the command channel communication introduced
lately between the main instance(s) and the workers. The frontend gets a
new menu entry "Workers" which will, when opened, trigger a regular call
to getStatus from the workers. The workers then respond via their
response channel to the backend, which then pushes the status to the
frontend.
This introduces the use of ChartJS for metrics.
This feature is still in MVP state and thus disabled by default for the
moment.

cypress/e2e/32-worker-view.cy.ts

@@ -0,0 +1,43 @@
+import { INSTANCE_MEMBERS } from '../constants';
+import { WorkerViewPage } from '../pages';
+
+const workerViewPage = new WorkerViewPage();
+
+describe('Worker View (unlicensed)', () => {
+	beforeEach(() => {
+		cy.disableFeature('workerView');
+		cy.disableQueueMode();
+	});
+
+	it('should not show up in the menu sidebar', () => {
+		cy.signin(INSTANCE_MEMBERS[0]);
+		cy.visit(workerViewPage.url);
+		workerViewPage.getters.menuItem().should('not.exist');
+	});
+
+	it('should show action box', () => {
+		cy.signin(INSTANCE_MEMBERS[0]);
+		cy.visit(workerViewPage.url);
+		workerViewPage.getters.workerViewUnlicensed().should('exist');
+	});
+});
+
+describe('Worker View (licensed)', () => {
+	beforeEach(() => {
+		cy.enableFeature('workerView');
+		cy.enableQueueMode();
+	});
+
+	it('should show up in the menu sidebar', () => {
+		cy.signin(INSTANCE_MEMBERS[0]);
+		cy.enableQueueMode();
+		cy.visit(workerViewPage.url);
+		workerViewPage.getters.menuItem().should('exist');
+	});
+
+	it('should show worker list view', () => {
+		cy.signin(INSTANCE_MEMBERS[0]);
+		cy.visit(workerViewPage.url);
+		workerViewPage.getters.workerViewLicensed().should('exist');
+	});
+});

cypress/pages/index.ts

@@ -11,3 +11,4 @@ export * from './bannerStack';
 export * from './workflow-executions-tab';
 export * from './signin';
 export * from './workflow-history';
+export * from './workerView';

cypress/pages/workerView.ts

@@ -0,0 +1,15 @@
+import { BasePage } from './base';
+
+export class WorkerViewPage extends BasePage {
+	url = '/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'),
+	};
+
+	actions = {};
+}

cypress/support/commands.ts

@@ -66,8 +66,15 @@ const setFeature = (feature: string, enabled: boolean) =>
 		enabled,
 	});
 
+const setQueueMode = (enabled: boolean) =>
+	cy.request('PATCH', `${BACKEND_BASE_URL}/rest/e2e/queue-mode`, {
+		enabled,
+	});
+
 Cypress.Commands.add('enableFeature', (feature: string) => setFeature(feature, true));
-Cypress.Commands.add('disableFeature', (feature): string => setFeature(feature, false));
+Cypress.Commands.add('disableFeature', (feature: string) => setFeature(feature, false));
+Cypress.Commands.add('enableQueueMode', () => setQueueMode(true));
+Cypress.Commands.add('disableQueueMode', () => setQueueMode(false));
 
 Cypress.Commands.add('grantBrowserPermissions', (...permissions: string[]) => {
 	if (Cypress.isBrowser('chrome')) {

cypress/support/index.ts

@@ -27,6 +27,8 @@ declare global {
 			interceptREST(method: string, url: string): Chainable<Interception>;
 			enableFeature(feature: string): void;
 			disableFeature(feature: string): void;
+			enableQueueMode(): void;
+			disableQueueMode(): void;
 			waitForLoad(waitForIntercepts?: boolean): void;
 			grantBrowserPermissions(...permissions: string[]): void;
 			readClipboard(): Chainable<string>;