[GEN-1910]: init workflow for UI E2E tests (using Cypress)

.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:

.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)

frontend/webapp/cypress.config.ts

@@ -1,9 +1,13 @@
-import {defineConfig} from 'cypress';
+import Cypress from 'cypress';
 
-export default defineConfig({
-    e2e: {
-        baseUrl: 'http://localhost:3000',
-        setupNodeEvents(on, config) {
-        },
-    },
-});
+const config: Cypress.ConfigOptions = {
+  e2e: {
+    // 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,
+  },
+};
+
+export default Cypress.defineConfig(config);

frontend/webapp/cypress/.gitignore

@@ -0,0 +1 @@
+screenshots/*

frontend/webapp/cypress/e2e/onboarding.cy.ts

@@ -0,0 +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');
+  });
+});

frontend/webapp/package.json

@@ -3,11 +3,16 @@
   "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",
     "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix"
+    "lint": "next lint --fix",
+    "cy": "cypress run --e2e -q",
+    "cy:open": "cypress open --e2e -b electron"
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
@@ -29,10 +34,11 @@
     "@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",
     "typescript": "5.6.3"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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"

tests/common/.gitignore

@@ -0,0 +1,2 @@
+*.pid
+*.log

tests/common/odigos_ui.sh

@@ -0,0 +1,124 @@
+#!/bin/bash
+
+# Ensure the script fails if any command fails
+set -e
+
+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_file="$scripts_dir/odigos_ui.log"
+pid_file="$scripts_dir/odigos_ui.pid"
+
+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 - ❌ Failed to start"
+    cat "$log_file"
+    exit 1
+  else
+    echo "Odigos UI - ✅ Ready"
+    cat "$log_file"
+  fi
+}
+
+function kill_process() {
+  # Kill the process
+  if [ "$1" != 0 ]; then
+    echo "Odigos UI - 💀 Killing process ($1)"
+    kill $1
+  fi
+}
+
+function kill_all() {
+  pid=$(get_process_id "$pid_file")
+  kill_process $pid
+}
+
+function stop() {
+  kill_all
+
+  # Cleanup
+  rm -f "$log_file"
+  rm -f "$pid_file"
+}
+
+function start() {
+  kill_all
+  cd "$scripts_dir/../../frontend/webapp"
+
+  # 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"
+  yarn back:build > /dev/null 2> "$log_file"
+
+  # Start the production build
+  echo "Odigos UI - ⏳ Starting..."
+  yarn back:start > /dev/null 2> "$log_file" &
+
+  sleep 3
+  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 - 👀 Testing with Cypress..."
+
+  set +e # Temporarily disable "exit on error"
+  yarn cy
+  test_exit_code=$?
+  set -e # Re-enable "exit on error"
+
+  if [ $test_exit_code -ne 0 ]; then
+    echo "Odigos UI - ❌ Cypress tests failed"
+    exit 1
+  else
+    echo "Odigos UI - ✅ Cypress tests passed"
+  fi
+}
+
+# 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
+    echo "❌ Error: Incorrect usage - '$0 <function_name>'"
+    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 "$@"

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 stop

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