From cb7af4422457f3a2fb7d4f36e8b062bd371e769f Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 17:57:23 +0200
Subject: [PATCH 01/13] [GEN-1910]: init workflow for UI E2E tests (using
 Cypress) (#1911)

---
 .github/workflows/e2e.yaml             |   8 +-
 .github/workflows/helm-lint.yml        |   4 +-
 frontend/webapp/cypress.config.ts      |  19 ++--
 frontend/webapp/cypress/e2e/spec.cy.ts |   7 ++
 frontend/webapp/package.json           |   6 +-
 frontend/webapp/yarn.lock              |   8 +-
 tests/common/.gitignore                |   2 +
 tests/common/odigos_ui.sh              | 135 +++++++++++++++++++++++++
 tests/e2e/cli-upgrade/odigos-ui.pid    |   1 -
 tests/e2e/ui/cypress-test.yaml         |  23 +++++
 10 files changed, 189 insertions(+), 24 deletions(-)
 create mode 100644 frontend/webapp/cypress/e2e/spec.cy.ts
 create mode 100644 tests/common/.gitignore
 create mode 100755 tests/common/odigos_ui.sh
 delete mode 100644 tests/e2e/cli-upgrade/odigos-ui.pid
 create mode 100644 tests/e2e/ui/cypress-test.yaml

diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml
index d205372f2..a834c7b4b 100644
--- a/.github/workflows/e2e.yaml
+++ b/.github/workflows/e2e.yaml
@@ -68,6 +68,7 @@ jobs:
           - '1.23'
           - '1.30'
         test-scenario:
+          - 'ui'
           - 'multi-apps'
           - 'helm-chart'
           - 'cli-upgrade'
@@ -107,13 +108,6 @@ jobs:
           version: 'v0.23.0'
           cluster_name: kind
 
-      - name: Install FE
-        # this is used for cypress tests which are not run in every scenario
-        if: matrix.test-scenario == 'multi-apps' || matrix.test-scenario == 'helm-chart'
-        run: |
-          cd frontend/webapp
-          yarn install
-
       - name: Download and Load Docker Images to Kind
         uses: actions/download-artifact@v4
         with:
diff --git a/.github/workflows/helm-lint.yml b/.github/workflows/helm-lint.yml
index b20590a9c..7a84f4f21 100644
--- a/.github/workflows/helm-lint.yml
+++ b/.github/workflows/helm-lint.yml
@@ -15,5 +15,5 @@ jobs:
         uses: azure/setup-helm@v4
       - name: Lint Charts
         run: |
-        shopt -s extglob
-        helm lint helm/!(*.md)
+          shopt -s extglob
+          helm lint helm/!(*.md)
diff --git a/frontend/webapp/cypress.config.ts b/frontend/webapp/cypress.config.ts
index 258794ec7..5bc18e87c 100644
--- a/frontend/webapp/cypress.config.ts
+++ b/frontend/webapp/cypress.config.ts
@@ -1,9 +1,12 @@
-import {defineConfig} from 'cypress';
+import Cypress from 'cypress';
 
-export default defineConfig({
-    e2e: {
-        baseUrl: 'http://localhost:3000',
-        setupNodeEvents(on, config) {
-        },
-    },
-});
+const config: Cypress.ConfigOptions = {
+  e2e: {
+    baseUrl: 'https://example.cypress.io',
+    setupNodeEvents(on, config) {},
+    supportFile: false,
+    waitForAnimations: true,
+  },
+};
+
+export default Cypress.defineConfig(config);
diff --git a/frontend/webapp/cypress/e2e/spec.cy.ts b/frontend/webapp/cypress/e2e/spec.cy.ts
new file mode 100644
index 000000000..173acfca1
--- /dev/null
+++ b/frontend/webapp/cypress/e2e/spec.cy.ts
@@ -0,0 +1,7 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('/');
+
+    expect(true).to.equal(true);
+  });
+});
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 8e2324790..269f520df 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "lint:fix": "next lint --fix"
+    "lint:fix": "next lint --fix",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run"
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
@@ -29,7 +31,7 @@
     "@types/react-dom": "18.3.1",
     "autoprefixer": "^10.4.20",
     "babel-plugin-styled-components": "^2.1.4",
-    "cypress": "^13.15.2",
+    "cypress": "^13.16.0",
     "eslint": "9.15.0",
     "eslint-config-next": "15.0.3",
     "postcss": "^8.4.49",
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 0d9442481..185b1ddac 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -3123,10 +3123,10 @@ csstype@3.1.3, csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-cypress@^13.15.2:
-  version "13.15.2"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.15.2.tgz#ef19554c274bc4ff23802aeb5c52951677fa67f1"
-  integrity sha512-ARbnUorjcCM3XiPwgHKuqsyr5W9Qn+pIIBPaoilnoBkLdSC2oLQjV1BUpnmc7KR+b7Avah3Ly2RMFnfxr96E/A==
+cypress@^13.16.0:
+  version "13.16.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.16.0.tgz#7674ca33941f9da58f15fd4e3456856d87730970"
+  integrity sha512-g6XcwqnvzXrqiBQR/5gN+QsyRmKRhls1y5E42fyOvsmU7JuY+wM6uHJWj4ZPttjabzbnRvxcik2WemR8+xT6FA==
   dependencies:
     "@cypress/request" "^3.0.6"
     "@cypress/xvfb" "^1.2.4"
diff --git a/tests/common/.gitignore b/tests/common/.gitignore
new file mode 100644
index 000000000..10327c64f
--- /dev/null
+++ b/tests/common/.gitignore
@@ -0,0 +1,2 @@
+*.pid
+*.log
\ No newline at end of file
diff --git a/tests/common/odigos_ui.sh b/tests/common/odigos_ui.sh
new file mode 100755
index 000000000..aea9a8519
--- /dev/null
+++ b/tests/common/odigos_ui.sh
@@ -0,0 +1,135 @@
+#!/bin/bash
+
+# Ensure the script fails if any command fails
+set -e
+
+scripts_dir="/tests/common"
+log_filename="$scripts_dir/odigos_ui.log"
+back_pid_filename="$scripts_dir/ui_backend.pid"
+front_pid_filename="$scripts_dir/ui_frontend.pid"
+
+function cleanup() {
+  rm -f "../../$front_pid_filename"
+  rm -f "../../$back_pid_filename"
+  rm -f "../../$log_filename"
+}
+
+function get_process_id() {
+  if [ ! -f "$1" ]; then
+    # File does not exist
+    echo "0"
+    return
+  fi
+
+  pid=$(cat "$1" 2>/dev/null)
+  if ps -p "$pid" > /dev/null 2>&1; then
+    # Process is running
+    echo "$pid"
+  else
+    # Process is not running
+    echo "0"
+  fi
+}
+
+function check_process() {
+  # Check if the process is running
+  if [ "$1" == 0 ]; then
+    echo "Odigos UI - ❌ $2 failed to start"
+    cat "$3"
+    exit 1
+  else
+    echo "Odigos UI - ✅ $2 is ready"
+  fi
+}
+
+function kill_process() {
+  # Kill the process
+  if [ "$1" != 0 ]; then
+    echo "Odigos UI - 💀 Killing $2 process ($1)"
+    kill $1
+  fi
+}
+
+function kill_all() {
+  # Kill processes if they are still running
+  front_pid=$(get_process_id "../../$front_pid_filename")
+  kill_process $front_pid "Frontend"
+  back_pid=$(get_process_id "../../$back_pid_filename")
+  kill_process $back_pid "Backend"
+}
+
+function end () {
+  kill_all
+  cleanup
+}
+
+function start() {
+  kill_all
+
+  # Install dependencies and build the Frontend
+  cd "../../frontend/webapp"
+  echo "Odigos UI - ⏳ Frontend installing"
+  yarn install > /dev/null 2> "../../$log_filename"
+  echo "Odigos UI - ⏳ Frontend building"
+  yarn build > /dev/null 2> "../../$log_filename"
+
+  # Build and start the Backend
+  cd "../"
+  echo "Odigos UI - ⏳ Backend building"
+  go build -o ./odigos-backend > /dev/null 2> "../$log_filename"
+  echo "Odigos UI - ⏳ Backend starting"
+  ./odigos-backend --port 8085 --debug --address 0.0.0.0 > /dev/null 2> "../$log_filename" &
+  sleep 3
+  echo $! > "../$back_pid_filename"
+  back_pid=$(get_process_id "../$back_pid_filename")
+  check_process $back_pid "Backend" "../$log_filename"
+
+  # Start the Frontend
+  # (we could skip this step, and simply use the UI on port 3001 from the Backend build - but we may want to run tests on the UI in real-time while developing, hence we will use port 3000 from the Frontend build)
+  cd "./webapp"
+  echo "Odigos UI - ⏳ Frontend starting"
+  yarn dev > /dev/null 2> "../../$log_filename" &
+  sleep 3
+  echo $! > "../../$front_pid_filename"
+  front_pid=$(get_process_id "../../$front_pid_filename")
+  check_process $front_pid "Frontend" "../../$log_filename"
+}
+
+function test() {
+  # Run tests on the Frontend
+  cd "../../frontend/webapp"
+  echo "Odigos UI - 👀 Frontend testing"
+
+  set +e # Temporarily disable "exit on error"
+  yarn cy:run
+  test_exit_code=$?
+  set -e # Re-enable "exit on error"
+
+  if [ $test_exit_code -ne 0 ]; then
+    echo "Odigos UI - ❌ Frontend tests failed"
+  else
+    echo "Odigos UI - ✅ Frontend tests passed"
+  fi
+}
+
+# This is to allow the script to be used dynamically, we call the function name from the CLI (start/end/test/etc.)
+# This method prevents duplicated code across multiple-scripts
+function main() {
+  if [ $# -lt 1 ]; then
+    echo "❌ Error: Incorrect usage - '$0 <function_name> [arguments...]'"
+    exit 1
+  fi
+
+  func="$1"
+  shift # Shift arguments, so $@ contains only the arguments for the function
+
+  # Check if the function exists and call it (with the remaining arguments)
+  if declare -f "$func" > /dev/null; then
+    $func "$@"
+  else
+    echo "❌ Error: Function '$func' not found."
+    exit 1
+  fi
+}
+
+main "$@"
diff --git a/tests/e2e/cli-upgrade/odigos-ui.pid b/tests/e2e/cli-upgrade/odigos-ui.pid
deleted file mode 100644
index 989dc8b87..000000000
--- a/tests/e2e/cli-upgrade/odigos-ui.pid
+++ /dev/null
@@ -1 +0,0 @@
-88480
diff --git a/tests/e2e/ui/cypress-test.yaml b/tests/e2e/ui/cypress-test.yaml
new file mode 100644
index 000000000..bb45fcef5
--- /dev/null
+++ b/tests/e2e/ui/cypress-test.yaml
@@ -0,0 +1,23 @@
+apiVersion: v1
+kind: Test
+metadata:
+  name: ui-cypress
+spec:
+  description: Run E2E Cypress tests VS. Odigos UI
+  skipDelete: true
+  steps:
+    - name: Start the UI
+      try:
+        - script:
+            timeout: 300s
+            content: ../../common/odigos_ui.sh start
+    - name: Test the UI
+      try:
+        - script:
+            timeout: 300s
+            content: ../../common/odigos_ui.sh test
+    - name: End the UI
+      try:
+        - script:
+            timeout: 60s
+            content: ../../common/odigos_ui.sh end

From 8c82a6ccea76da46498e017fc80d889710d60c89 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 18:40:45 +0200
Subject: [PATCH 02/13] Purposely fail Cypress demo-test (#1913)

---
 frontend/webapp/cypress/e2e/spec.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/cypress/e2e/spec.cy.ts b/frontend/webapp/cypress/e2e/spec.cy.ts
index 173acfca1..3fc47176b 100644
--- a/frontend/webapp/cypress/e2e/spec.cy.ts
+++ b/frontend/webapp/cypress/e2e/spec.cy.ts
@@ -2,6 +2,6 @@ describe('template spec', () => {
   it('passes', () => {
     cy.visit('/');
 
-    expect(true).to.equal(true);
+    expect(true).to.equal(false);
   });
 });

From b14348d7b3f942504724f628c18981a3f6ca06d2 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 18:54:13 +0200
Subject: [PATCH 03/13] Remove "try" from UI tests YAML (#1914)

---
 tests/e2e/ui/cypress-test.yaml | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/tests/e2e/ui/cypress-test.yaml b/tests/e2e/ui/cypress-test.yaml
index bb45fcef5..e59310781 100644
--- a/tests/e2e/ui/cypress-test.yaml
+++ b/tests/e2e/ui/cypress-test.yaml
@@ -7,17 +7,14 @@ spec:
   skipDelete: true
   steps:
     - name: Start the UI
-      try:
-        - script:
-            timeout: 300s
-            content: ../../common/odigos_ui.sh start
+      script:
+        timeout: 300s
+        content: ../../common/odigos_ui.sh start
     - name: Test the UI
-      try:
-        - script:
-            timeout: 300s
-            content: ../../common/odigos_ui.sh test
+      script:
+        timeout: 300s
+        content: ../../common/odigos_ui.sh test
     - name: End the UI
-      try:
-        - script:
-            timeout: 60s
-            content: ../../common/odigos_ui.sh end
+      script:
+        timeout: 60s
+        content: ../../common/odigos_ui.sh end

From e43a0ffe06c637f9fd289091a3fa065fa7b1d3e4 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 19:00:08 +0200
Subject: [PATCH 04/13] Use chainsaw for UI tests (#1915)

---
 tests/e2e/ui/cypress-test.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/ui/cypress-test.yaml b/tests/e2e/ui/cypress-test.yaml
index e59310781..caee248e3 100644
--- a/tests/e2e/ui/cypress-test.yaml
+++ b/tests/e2e/ui/cypress-test.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: chainsaw.kyverno.io/v1alpha1
 kind: Test
 metadata:
   name: ui-cypress

From 993ec90cc0c90a4a969861db0d756beee362dfd5 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 19:25:08 +0200
Subject: [PATCH 05/13] Bring back YAML/try and follow file-name convention
 (#1916)

---
 tests/e2e/ui/chainsaw-test.yaml | 23 +++++++++++++++++++++++
 tests/e2e/ui/cypress-test.yaml  | 20 --------------------
 2 files changed, 23 insertions(+), 20 deletions(-)
 create mode 100644 tests/e2e/ui/chainsaw-test.yaml
 delete mode 100644 tests/e2e/ui/cypress-test.yaml

diff --git a/tests/e2e/ui/chainsaw-test.yaml b/tests/e2e/ui/chainsaw-test.yaml
new file mode 100644
index 000000000..5bd137812
--- /dev/null
+++ b/tests/e2e/ui/chainsaw-test.yaml
@@ -0,0 +1,23 @@
+apiVersion: chainsaw.kyverno.io/v1alpha1
+kind: Test
+metadata:
+  name: ui-cypress
+spec:
+  description: Run E2E tests against Odigos UI using Cypress
+  skipDelete: true
+  steps:
+    - name: Start the UI
+      try:
+        - script:
+            timeout: 300s
+            content: ../../common/odigos_ui.sh start
+    - name: Test the UI
+      try:
+        - script:
+            timeout: 300s
+            content: ../../common/odigos_ui.sh test
+    - name: End the UI
+      try:
+        - script:
+            timeout: 60s
+            content: ../../common/odigos_ui.sh end
diff --git a/tests/e2e/ui/cypress-test.yaml b/tests/e2e/ui/cypress-test.yaml
deleted file mode 100644
index caee248e3..000000000
--- a/tests/e2e/ui/cypress-test.yaml
+++ /dev/null
@@ -1,20 +0,0 @@
-apiVersion: chainsaw.kyverno.io/v1alpha1
-kind: Test
-metadata:
-  name: ui-cypress
-spec:
-  description: Run E2E Cypress tests VS. Odigos UI
-  skipDelete: true
-  steps:
-    - name: Start the UI
-      script:
-        timeout: 300s
-        content: ../../common/odigos_ui.sh start
-    - name: Test the UI
-      script:
-        timeout: 300s
-        content: ../../common/odigos_ui.sh test
-    - name: End the UI
-      script:
-        timeout: 60s
-        content: ../../common/odigos_ui.sh end

From 079f2dad25f792118676ddc2dc0bb8278617e080 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 20:21:41 +0200
Subject: [PATCH 06/13] Fix script directory (#1917)

---
 frontend/webapp/cypress/.gitignore | 1 +
 tests/common/odigos_ui.sh          | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/cypress/.gitignore

diff --git a/frontend/webapp/cypress/.gitignore b/frontend/webapp/cypress/.gitignore
new file mode 100644
index 000000000..04ddc8bcb
--- /dev/null
+++ b/frontend/webapp/cypress/.gitignore
@@ -0,0 +1 @@
+screenshots/*
\ No newline at end of file
diff --git a/tests/common/odigos_ui.sh b/tests/common/odigos_ui.sh
index aea9a8519..45192205d 100755
--- a/tests/common/odigos_ui.sh
+++ b/tests/common/odigos_ui.sh
@@ -3,7 +3,10 @@
 # Ensure the script fails if any command fails
 set -e
 
-scripts_dir="/tests/common"
+scripts_dir="$(cd "$(dirname "$0")" && pwd)"
+# The above "$scripts_dir" key is used to identify where the script was called from, to ensure all paths are relative to the script.
+# This is useful when the script is called from another location, and the paths are relative to the calling script (for exmaple YAML file).
+
 log_filename="$scripts_dir/odigos_ui.log"
 back_pid_filename="$scripts_dir/ui_backend.pid"
 front_pid_filename="$scripts_dir/ui_frontend.pid"
@@ -116,7 +119,7 @@ function test() {
 # This method prevents duplicated code across multiple-scripts
 function main() {
   if [ $# -lt 1 ]; then
-    echo "❌ Error: Incorrect usage - '$0 <function_name> [arguments...]'"
+    echo "❌ Error: Incorrect usage - '$0 <function_name>'"
     exit 1
   fi
 

From 1d0d010f6ec38758c1eac2f4cab6450cf5296c46 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 20:34:31 +0200
Subject: [PATCH 07/13] Fix path redirects (#1918)

---
 tests/common/odigos_ui.sh       | 40 ++++++++++++++++-----------------
 tests/e2e/ui/chainsaw-test.yaml |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/tests/common/odigos_ui.sh b/tests/common/odigos_ui.sh
index 45192205d..25480cab1 100755
--- a/tests/common/odigos_ui.sh
+++ b/tests/common/odigos_ui.sh
@@ -12,9 +12,9 @@ back_pid_filename="$scripts_dir/ui_backend.pid"
 front_pid_filename="$scripts_dir/ui_frontend.pid"
 
 function cleanup() {
-  rm -f "../../$front_pid_filename"
-  rm -f "../../$back_pid_filename"
-  rm -f "../../$log_filename"
+  rm -f "$front_pid_filename"
+  rm -f "$back_pid_filename"
+  rm -f "$log_filename"
 }
 
 function get_process_id() {
@@ -55,13 +55,13 @@ function kill_process() {
 
 function kill_all() {
   # Kill processes if they are still running
-  front_pid=$(get_process_id "../../$front_pid_filename")
+  front_pid=$(get_process_id "$front_pid_filename")
   kill_process $front_pid "Frontend"
-  back_pid=$(get_process_id "../../$back_pid_filename")
+  back_pid=$(get_process_id "$back_pid_filename")
   kill_process $back_pid "Backend"
 }
 
-function end () {
+function stop() {
   kill_all
   cleanup
 }
@@ -70,37 +70,37 @@ function start() {
   kill_all
 
   # Install dependencies and build the Frontend
-  cd "../../frontend/webapp"
+  cd "$scripts_dir/../../frontend/webapp"
   echo "Odigos UI - ⏳ Frontend installing"
-  yarn install > /dev/null 2> "../../$log_filename"
+  yarn install > /dev/null 2> "$log_filename"
   echo "Odigos UI - ⏳ Frontend building"
-  yarn build > /dev/null 2> "../../$log_filename"
+  yarn build > /dev/null 2> "$log_filename"
 
   # Build and start the Backend
   cd "../"
   echo "Odigos UI - ⏳ Backend building"
-  go build -o ./odigos-backend > /dev/null 2> "../$log_filename"
+  go build -o ./odigos-backend > /dev/null 2> "$log_filename"
   echo "Odigos UI - ⏳ Backend starting"
-  ./odigos-backend --port 8085 --debug --address 0.0.0.0 > /dev/null 2> "../$log_filename" &
+  ./odigos-backend --port 8085 --debug --address 0.0.0.0 > /dev/null 2> "$log_filename" &
   sleep 3
-  echo $! > "../$back_pid_filename"
-  back_pid=$(get_process_id "../$back_pid_filename")
-  check_process $back_pid "Backend" "../$log_filename"
+  echo $! > "$back_pid_filename"
+  back_pid=$(get_process_id "$back_pid_filename")
+  check_process $back_pid "Backend" "$log_filename"
 
   # Start the Frontend
   # (we could skip this step, and simply use the UI on port 3001 from the Backend build - but we may want to run tests on the UI in real-time while developing, hence we will use port 3000 from the Frontend build)
   cd "./webapp"
   echo "Odigos UI - ⏳ Frontend starting"
-  yarn dev > /dev/null 2> "../../$log_filename" &
+  yarn dev > /dev/null 2> "$log_filename" &
   sleep 3
-  echo $! > "../../$front_pid_filename"
-  front_pid=$(get_process_id "../../$front_pid_filename")
-  check_process $front_pid "Frontend" "../../$log_filename"
+  echo $! > "$front_pid_filename"
+  front_pid=$(get_process_id "$front_pid_filename")
+  check_process $front_pid "Frontend" "$log_filename"
 }
 
 function test() {
   # Run tests on the Frontend
-  cd "../../frontend/webapp"
+  cd "$scripts_dir/../../frontend/webapp"
   echo "Odigos UI - 👀 Frontend testing"
 
   set +e # Temporarily disable "exit on error"
@@ -115,7 +115,7 @@ function test() {
   fi
 }
 
-# This is to allow the script to be used dynamically, we call the function name from the CLI (start/end/test/etc.)
+# This is to allow the script to be used dynamically, we call the function name from the CLI (start/stop/test/etc.)
 # This method prevents duplicated code across multiple-scripts
 function main() {
   if [ $# -lt 1 ]; then
diff --git a/tests/e2e/ui/chainsaw-test.yaml b/tests/e2e/ui/chainsaw-test.yaml
index 5bd137812..af2936c42 100644
--- a/tests/e2e/ui/chainsaw-test.yaml
+++ b/tests/e2e/ui/chainsaw-test.yaml
@@ -20,4 +20,4 @@ spec:
       try:
         - script:
             timeout: 60s
-            content: ../../common/odigos_ui.sh end
+            content: ../../common/odigos_ui.sh stop

From 803d2f063d6a233c77d191943bfbfa0512fac761 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 20:48:46 +0200
Subject: [PATCH 08/13] Exit/Throw on tests failed (#1919)

---
 tests/common/odigos_ui.sh | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/common/odigos_ui.sh b/tests/common/odigos_ui.sh
index 25480cab1..a9026afff 100755
--- a/tests/common/odigos_ui.sh
+++ b/tests/common/odigos_ui.sh
@@ -110,6 +110,7 @@ function test() {
 
   if [ $test_exit_code -ne 0 ]; then
     echo "Odigos UI - ❌ Frontend tests failed"
+    exit 1
   else
     echo "Odigos UI - ✅ Frontend tests passed"
   fi

From 831b7d28b75afc6984e8c45ce5396cce8985fb53 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 21:03:52 +0200
Subject: [PATCH 09/13] Undo "purposely failing" demo-test (#1920)

---
 frontend/webapp/cypress/e2e/spec.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/cypress/e2e/spec.cy.ts b/frontend/webapp/cypress/e2e/spec.cy.ts
index 3fc47176b..173acfca1 100644
--- a/frontend/webapp/cypress/e2e/spec.cy.ts
+++ b/frontend/webapp/cypress/e2e/spec.cy.ts
@@ -2,6 +2,6 @@ describe('template spec', () => {
   it('passes', () => {
     cy.visit('/');
 
-    expect(true).to.equal(false);
+    expect(true).to.equal(true);
   });
 });

From 1d989dd7542ee381393179d842626fc6e199fbfa Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 4 Dec 2024 21:21:47 +0200
Subject: [PATCH 10/13] =?UTF-8?q?Apply=20actual=20in-app=20test,=20connect?=
 =?UTF-8?q?ion=20is=20confirmed=20=F0=9F=91=8D=20(#1921)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/webapp/cypress.config.ts      | 2 +-
 frontend/webapp/cypress/e2e/spec.cy.ts | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/cypress.config.ts b/frontend/webapp/cypress.config.ts
index 5bc18e87c..a15e76143 100644
--- a/frontend/webapp/cypress.config.ts
+++ b/frontend/webapp/cypress.config.ts
@@ -2,7 +2,7 @@ import Cypress from 'cypress';
 
 const config: Cypress.ConfigOptions = {
   e2e: {
-    baseUrl: 'https://example.cypress.io',
+    baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {},
     supportFile: false,
     waitForAnimations: true,
diff --git a/frontend/webapp/cypress/e2e/spec.cy.ts b/frontend/webapp/cypress/e2e/spec.cy.ts
index 173acfca1..97c1ad3d2 100644
--- a/frontend/webapp/cypress/e2e/spec.cy.ts
+++ b/frontend/webapp/cypress/e2e/spec.cy.ts
@@ -1,7 +1,6 @@
-describe('template spec', () => {
-  it('passes', () => {
+describe('Onboarding', () => {
+  it('Visiting the root path fetches a config with GraphQL. A fresh install will result in a redirect to the start of onboarding, confirming Front + Back connections', () => {
     cy.visit('/');
-
-    expect(true).to.equal(true);
+    cy.location('pathname').should('eq', '/choose-sources');
   });
 });

From f3039e46e33cb395eacad72e23735a72fd225e4a Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 5 Dec 2024 10:33:10 +0200
Subject: [PATCH 11/13] Improved usage of package.json scripts (#1923)

---
 frontend/webapp/cypress.config.ts             |  3 +-
 .../e2e/{spec.cy.ts => onboarding.cy.ts}      |  1 +
 frontend/webapp/package.json                  | 13 +--
 tests/common/odigos_ui.sh                     | 82 ++++++++-----------
 4 files changed, 43 insertions(+), 56 deletions(-)
 rename frontend/webapp/cypress/e2e/{spec.cy.ts => onboarding.cy.ts} (75%)

diff --git a/frontend/webapp/cypress.config.ts b/frontend/webapp/cypress.config.ts
index a15e76143..46927c59c 100644
--- a/frontend/webapp/cypress.config.ts
+++ b/frontend/webapp/cypress.config.ts
@@ -2,7 +2,8 @@ import Cypress from 'cypress';
 
 const config: Cypress.ConfigOptions = {
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    // this uses the "production" build, if you want to use the "development" build, you can use "port=3000" instead
+    baseUrl: 'http://localhost:3001',
     setupNodeEvents(on, config) {},
     supportFile: false,
     waitForAnimations: true,
diff --git a/frontend/webapp/cypress/e2e/spec.cy.ts b/frontend/webapp/cypress/e2e/onboarding.cy.ts
similarity index 75%
rename from frontend/webapp/cypress/e2e/spec.cy.ts
rename to frontend/webapp/cypress/e2e/onboarding.cy.ts
index 97c1ad3d2..e8d975e58 100644
--- a/frontend/webapp/cypress/e2e/spec.cy.ts
+++ b/frontend/webapp/cypress/e2e/onboarding.cy.ts
@@ -1,6 +1,7 @@
 describe('Onboarding', () => {
   it('Visiting the root path fetches a config with GraphQL. A fresh install will result in a redirect to the start of onboarding, confirming Front + Back connections', () => {
     cy.visit('/');
+    // If backend connection failed for any reason, teh default redirect would be "/overview"
     cy.location('pathname').should('eq', '/choose-sources');
   });
 });
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 269f520df..c1c57959c 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "predev": "rm -rf .next",
     "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
-    "cy:open": "cypress open",
-    "cy:run": "cypress run"
+    "prebuild": "rm -rf out",
+    "build": "next build && cd .. && go build -o ./odigos-backend",
+    "start": "cd .. && ./odigos-backend --port 8085 --debug --address 0.0.0.0",
+    "lint": "next lint --fix",
+    "cy": "cypress run --e2e -q",
+    "cy:open": "cypress open --e2e -b electron"
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
diff --git a/tests/common/odigos_ui.sh b/tests/common/odigos_ui.sh
index a9026afff..3e09e8834 100755
--- a/tests/common/odigos_ui.sh
+++ b/tests/common/odigos_ui.sh
@@ -7,15 +7,8 @@ scripts_dir="$(cd "$(dirname "$0")" && pwd)"
 # The above "$scripts_dir" key is used to identify where the script was called from, to ensure all paths are relative to the script.
 # This is useful when the script is called from another location, and the paths are relative to the calling script (for exmaple YAML file).
 
-log_filename="$scripts_dir/odigos_ui.log"
-back_pid_filename="$scripts_dir/ui_backend.pid"
-front_pid_filename="$scripts_dir/ui_frontend.pid"
-
-function cleanup() {
-  rm -f "$front_pid_filename"
-  rm -f "$back_pid_filename"
-  rm -f "$log_filename"
-}
+log_file="$scripts_dir/odigos_ui.log"
+pid_file="$scripts_dir/odigos_ui.pid"
 
 function get_process_id() {
   if [ ! -f "$1" ]; then
@@ -37,82 +30,73 @@ function get_process_id() {
 function check_process() {
   # Check if the process is running
   if [ "$1" == 0 ]; then
-    echo "Odigos UI - ❌ $2 failed to start"
-    cat "$3"
+    echo "Odigos UI - ❌ Failed to start"
+    cat "$log_file"
     exit 1
   else
-    echo "Odigos UI - ✅ $2 is ready"
+    echo "Odigos UI - ✅ Ready"
+    cat "$log_file"
   fi
 }
 
 function kill_process() {
   # Kill the process
   if [ "$1" != 0 ]; then
-    echo "Odigos UI - 💀 Killing $2 process ($1)"
+    echo "Odigos UI - 💀 Killing process ($1)"
     kill $1
   fi
 }
 
 function kill_all() {
-  # Kill processes if they are still running
-  front_pid=$(get_process_id "$front_pid_filename")
-  kill_process $front_pid "Frontend"
-  back_pid=$(get_process_id "$back_pid_filename")
-  kill_process $back_pid "Backend"
+  pid=$(get_process_id "$pid_file")
+  kill_process $pid
 }
 
 function stop() {
   kill_all
-  cleanup
+
+  # Cleanup
+  rm -f "$log_file"
+  rm -f "$pid_file"
 }
 
 function start() {
   kill_all
-
-  # Install dependencies and build the Frontend
   cd "$scripts_dir/../../frontend/webapp"
-  echo "Odigos UI - ⏳ Frontend installing"
-  yarn install > /dev/null 2> "$log_filename"
-  echo "Odigos UI - ⏳ Frontend building"
-  yarn build > /dev/null 2> "$log_filename"
-
-  # Build and start the Backend
-  cd "../"
-  echo "Odigos UI - ⏳ Backend building"
-  go build -o ./odigos-backend > /dev/null 2> "$log_filename"
-  echo "Odigos UI - ⏳ Backend starting"
-  ./odigos-backend --port 8085 --debug --address 0.0.0.0 > /dev/null 2> "$log_filename" &
-  sleep 3
-  echo $! > "$back_pid_filename"
-  back_pid=$(get_process_id "$back_pid_filename")
-  check_process $back_pid "Backend" "$log_filename"
-
-  # Start the Frontend
-  # (we could skip this step, and simply use the UI on port 3001 from the Backend build - but we may want to run tests on the UI in real-time while developing, hence we will use port 3000 from the Frontend build)
-  cd "./webapp"
-  echo "Odigos UI - ⏳ Frontend starting"
-  yarn dev > /dev/null 2> "$log_filename" &
+
+  # Install dependencies
+  echo "Odigos UI - ⏳ Installing..."
+  yarn install > /dev/null 2> "$log_file"
+
+  # Create a production build
+  echo "Odigos UI - ⏳ Building..."
+  yarn build > /dev/null 2> "$log_file"
+
+  # Start the production build
+  echo "Odigos UI - ⏳ Starting..."
+  yarn start > /dev/null 2> "$log_file" &
+
   sleep 3
-  echo $! > "$front_pid_filename"
-  front_pid=$(get_process_id "$front_pid_filename")
-  check_process $front_pid "Frontend" "$log_filename"
+  echo $! > "$pid_file"
+  pid=$(get_process_id "$pid_file")
+  check_process $pid
 }
 
 function test() {
   # Run tests on the Frontend
   cd "$scripts_dir/../../frontend/webapp"
-  echo "Odigos UI - 👀 Frontend testing"
+  echo "Odigos UI - 👀 Testing with Cypress..."
 
   set +e # Temporarily disable "exit on error"
-  yarn cy:run
+  yarn cy
   test_exit_code=$?
   set -e # Re-enable "exit on error"
 
   if [ $test_exit_code -ne 0 ]; then
-    echo "Odigos UI - ❌ Frontend tests failed"
+    echo "Odigos UI - ❌ Cypress tests failed"
     exit 1
   else
-    echo "Odigos UI - ✅ Frontend tests passed"
+    echo "Odigos UI - ✅ Cypress tests passed"
   fi
 }
 

From c8288aa33f7d104bbd710e8ea2f6270b4acf77f3 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 5 Dec 2024 10:44:40 +0200
Subject: [PATCH 12/13] fix GitHub build error (#1924)

---
 frontend/webapp/package.json | 9 ++++++---
 tests/common/odigos_ui.sh    | 3 ++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index c1c57959c..b144f7bcf 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "back:build": "cd .. && go build -o ./odigos-backend",
+    "back:start": "cd .. && ./odigos-backend --port 8085 --debug --address 0.0.0.0",
     "predev": "rm -rf .next",
     "dev": "next dev",
     "prebuild": "rm -rf out",
-    "build": "next build && cd .. && go build -o ./odigos-backend",
-    "start": "cd .. && ./odigos-backend --port 8085 --debug --address 0.0.0.0",
+    "build": "next build",
+    "start": "next start",
     "lint": "next lint --fix",
     "cy": "cypress run --e2e -q",
     "cy:open": "cypress open --e2e -b electron"
@@ -37,5 +39,6 @@
     "eslint-config-next": "15.0.3",
     "postcss": "^8.4.49",
     "typescript": "5.6.3"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/tests/common/odigos_ui.sh b/tests/common/odigos_ui.sh
index 3e09e8834..fb48af7c4 100755
--- a/tests/common/odigos_ui.sh
+++ b/tests/common/odigos_ui.sh
@@ -71,10 +71,11 @@ function start() {
   # Create a production build
   echo "Odigos UI - ⏳ Building..."
   yarn build > /dev/null 2> "$log_file"
+  yarn back:build > /dev/null 2> "$log_file"
 
   # Start the production build
   echo "Odigos UI - ⏳ Starting..."
-  yarn start > /dev/null 2> "$log_file" &
+  yarn back:start > /dev/null 2> "$log_file" &
 
   sleep 3
   echo $! > "$pid_file"

From 6bb53fe41f40a83a3b211fffc1881d0f9e26b42d Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 5 Dec 2024 11:07:32 +0200
Subject: [PATCH 13/13] fix py version (#1925)

---
 .../services/python-http-server/Dockerfile.python-alpine        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/workload-lifecycle/services/python-http-server/Dockerfile.python-alpine b/tests/e2e/workload-lifecycle/services/python-http-server/Dockerfile.python-alpine
index 45d9ec9f1..f3aaf6d2e 100644
--- a/tests/e2e/workload-lifecycle/services/python-http-server/Dockerfile.python-alpine
+++ b/tests/e2e/workload-lifecycle/services/python-http-server/Dockerfile.python-alpine
@@ -1,5 +1,5 @@
 # Dockerfile.alpine
-FROM python:3.10-alpine
+FROM python:3.10.15-alpine
 WORKDIR /app
 COPY . /app
 RUN pip install --no-cache-dir django